/* =====================================================================
   RUSTY CHEN — "PATINA"
   Oxidized-metal editorial system
   ===================================================================== */

:root{
  /* Palette — warm near-black, bone, rust ↔ verdigris */
  --bg:        #15110d;
  --bg-2:      #1c1712;
  --fg:        #ece3d4;
  --muted:     #988c7c;   /* warm taupe — nudged lighter for AA contrast headroom on dark */
  --rust:      #c8551f;   /* oxidized copper / orange */
  --rust-2:    #e0692c;
  --patina:    #6fa891;   /* verdigris */
  --line:      rgba(236,227,212,.14);
  --line-soft: rgba(236,227,212,.07);

  /* Type */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --serif:   "Instrument Serif", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Metrics */
  --pad: clamp(1.1rem, 4vw, 3.25rem);
  --nav-h: 71px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--display);
  font-weight:400;
  line-height:1.4;
  overflow-x:hidden;        /* fallback for browsers without overflow:clip */
  overflow-x:clip;          /* contains iOS Safari phantom h-scroll from transformed/bleeding children */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--rust); color:#fff; }

/* Hide native cursor when custom cursor is active (fine-pointer only) */
@media (hover:hover) and (pointer:fine){
  .js body{ cursor:none; }
  .js a, .js button, .js [data-cursor], .js [data-magnetic]{ cursor:none; }
}

/* ---------- Grain overlay ---------- */
.grain{
  position:fixed; inset:0;
  z-index:9000; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  animation:grain 6s steps(6) infinite;
}
/* animate the texture (background-position) — element stays viewport-sized so it never causes scroll */
@keyframes grain{
  0%{background-position:0 0} 20%{background-position:-7px 5px}
  40%{background-position:5px -7px} 60%{background-position:-4px 4px}
  80%{background-position:7px 2px} 100%{background-position:0 0}
}

/* ---------- Custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9500;
  width:11px; height:11px; border-radius:50%;
  background:var(--rust);
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease),
             background .35s var(--ease), opacity .3s;
  mix-blend-mode:difference;
  display:none;
}
@media (hover:hover) and (pointer:fine){ .js .cursor{ display:grid; place-items:center; } }
.cursor.is-hover{ width:74px; height:74px; background:var(--fg); mix-blend-mode:normal; }
.cursor.is-link{ width:30px; height:30px; background:transparent; border:1px solid var(--rust); mix-blend-mode:normal; }
.cursor__label{
  font-family:var(--mono); font-size:10px; letter-spacing:.02em;
  color:var(--bg); text-transform:uppercase; opacity:0;
  transform:scale(.5); transition:opacity .3s, transform .3s;
  white-space:nowrap;
}
.cursor.is-hover .cursor__label{ opacity:1; transform:scale(1); }

/* ---------- Preloader ---------- */
.loader{
  position:fixed; inset:0; z-index:9800;
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.loader__inner{
  width:100%; padding:0 var(--pad);
  display:flex; justify-content:space-between; align-items:flex-end;
}
.loader__row{ display:flex; flex-direction:column; gap:.1em; overflow:hidden; }
.loader__word{
  font-family:var(--serif); font-size:clamp(2rem,7vw,5rem);
  line-height:1; font-style:italic; color:var(--fg);
  transform:translateY(110%);
}
.loader__count{
  font-family:var(--mono); font-size:clamp(2rem,7vw,5rem);
  display:flex; align-items:flex-start; gap:.1em; color:var(--rust);
}
.loader__pct{ font-size:.4em; margin-top:.3em; color:var(--muted); }
.loader__bar{
  position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--line-soft);
}
.loader__fill{ display:block; height:100%; width:0; background:var(--rust); }

/* ---------- Navigation ---------- */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--pad);
  mix-blend-mode:difference;
}
.nav__brand{ display:flex; align-items:center; gap:.6rem; overflow:hidden; }
.nav__mark{
  font-family:var(--mono); font-weight:500; letter-spacing:-.02em;
  border:1px solid var(--fg); border-radius:50%;
  width:34px; height:34px; display:grid; place-items:center; font-size:.8rem;
}
.nav__name{ font-family:var(--mono); font-size:.82rem; letter-spacing:.02em; }
.nav__menu{ display:flex; gap:1.6rem; }
.nav__menu a{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.02em;
  position:relative; padding:.2rem 0;
}
.nav__menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__menu a:hover::after{ transform:scaleX(1); transform-origin:left; }
/* .OS — enter the RUSTYCHEN.OS terminal (ASCII) experience */
.nav__menu .nav__os{
  align-self:center; padding:.34em .6em; border-radius:3px; line-height:1;
  font-size:.74rem; font-weight:600; letter-spacing:.08em;
  color:#04100a; background:#38e07b;
  box-shadow:0 0 0 1px rgba(56,224,123,.5), 0 0 11px rgba(56,224,123,.32);
  transition:background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.nav__menu .nav__os::after{
  content:"_"; position:static; left:auto; bottom:auto; width:auto; height:auto;
  background:none; transform:none; margin-left:1px;
  animation:osblink 1.1s steps(1) infinite;
}
.nav__menu .nav__os:hover{
  background:#5cf29a; color:#04100a; transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(56,224,123,.85), 0 0 16px rgba(56,224,123,.55);
}
@keyframes osblink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .nav__menu .nav__os::after{ animation:none; } }
.nav__cta{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.78rem;
  border:1px solid var(--line); border-radius:100px;
  padding:.5rem .9rem;
}
.nav__cta .dot{
  width:7px; height:7px; border-radius:50%; background:var(--patina);
  box-shadow:0 0 0 0 rgba(111,168,145,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(111,168,145,.55)}
  70%{box-shadow:0 0 0 9px rgba(111,168,145,0)}
  100%{box-shadow:0 0 0 0 rgba(111,168,145,0)}
}
.nav__actions{ display:flex; align-items:center; gap:.75rem; }
.ai-toggle{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.78rem; color:var(--fg);
  background:none; border:1px solid var(--line); border-radius:100px;
  padding:.5rem .85rem; letter-spacing:.02em;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.ai-toggle:hover{ border-color:var(--rust); }
.ai-toggle__orb{
  width:12px; height:12px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--rust), var(--patina), var(--rust));
  animation:spin 4s linear infinite; box-shadow:0 0 10px rgba(200,85,31,.5);
}
@keyframes spin{ to{ transform:rotate(1turn); } }
@media (max-width:760px){
  .nav__menu{ display:none; }
  .nav__cta{ display:none; }
}

/* ---------- Mobile nav (hamburger + full-screen sheet, injected by JS) ---------- */
.nav__toggle{
  display:none; flex-direction:column; align-items:flex-end; justify-content:center;
  gap:6px; width:30px; height:30px; padding:0; margin:0;
  background:none; border:0; cursor:pointer;
}
.nav__toggle span{
  display:block; width:26px; height:1.5px; background:var(--fg);
  transition:transform .4s var(--ease), opacity .25s var(--ease), width .4s var(--ease);
}
.nav__toggle span:nth-child(2){ width:18px; }
html.nav-open .nav__toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); width:26px; }
html.nav-open .nav__toggle span:nth-child(2){ opacity:0; }
html.nav-open .nav__toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); width:26px; }

.nav__mobile{
  position:fixed; inset:0; z-index:850;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .55s var(--ease), visibility .55s var(--ease);
}
html.nav-open .nav__mobile{ opacity:1; visibility:visible; pointer-events:auto; }
.nav__mobile ol{ list-style:none; display:flex; flex-direction:column; gap:.15rem; margin:0; padding:0; }
.nav__mobile li{ overflow:hidden; }
.nav__mobile ol a{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(2.6rem, 13vw, 3.8rem); line-height:1.12;
  display:inline-block; color:var(--fg);
  transform:translateY(115%);
  transition:transform .65s var(--ease), color .3s var(--ease);
}
html.nav-open .nav__mobile ol a{ transform:translateY(0); }
html.nav-open .nav__mobile li:nth-child(1) a{ transition-delay:.10s; }
html.nav-open .nav__mobile li:nth-child(2) a{ transition-delay:.16s; }
html.nav-open .nav__mobile li:nth-child(3) a{ transition-delay:.22s; }
html.nav-open .nav__mobile li:nth-child(4) a{ transition-delay:.28s; }
html.nav-open .nav__mobile li:nth-child(5) a{ transition-delay:.34s; }
.nav__mobile ol a:hover, .nav__mobile ol a.is-current{ color:var(--rust); }
.nav__mobile ol a .idx{
  font-family:var(--mono); font-style:normal; font-size:.7rem;
  vertical-align:super; color:var(--muted); margin-right:.5rem; letter-spacing:.04em;
}
html.nav-open, html.nav-open body{ overflow:hidden; }

@media (max-width:760px){
  .nav__toggle{ display:flex; }
  .nav{ z-index:900; }
}

/* ---------- Scroll-progress rail (oxidation-aware) ---------- */
.rail{
  position:fixed; top:0; right:0; z-index:700;
  width:3px; height:100vh; height:100svh;
  background:var(--line-soft); pointer-events:none;
}
.rail__fill{
  display:block; width:100%; height:0%;
  background:linear-gradient(180deg, rgba(217,122,52,.5), var(--rust));
  box-shadow:0 0 10px 0 var(--rust);
  transition:height .12s linear, background .25s linear, box-shadow .25s linear;
}
@media (max-width:760px){ .rail{ width:2px; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.01em;
  padding:.85rem 1.4rem; border-radius:100px; border:1px solid var(--line);
  background:none; color:var(--fg); position:relative; overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--rust);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn--solid{ background:var(--rust); border-color:var(--rust); color:#1a1209; }
.btn--solid::before{ background:var(--fg); }
.btn--solid:hover{ color:#1a1209; border-color:var(--fg); }
.btn--ghost:hover{ color:#1a1209; border-color:var(--rust); }
.btn__orb{
  width:11px; height:11px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--rust), var(--patina), var(--rust));
  animation:spin 4s linear infinite;
}
.btn--ghost:hover .btn__orb{ background:#1a1209; }

/* ---------- Shared ---------- */
.section-index{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  display:inline-block; margin-bottom:1.5rem;
}
.tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; }
.serif{ font-family:var(--serif); font-style:italic; font-weight:400; }
.rust{ color:var(--rust); }
.patina{ color:var(--patina); }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  padding:clamp(4.5rem,10vh,7rem) var(--pad) clamp(1.4rem,3vh,2.4rem);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(1rem,3vh,2rem);
  overflow:hidden;
}
.hero__meta{ display:flex; justify-content:space-between; }
.hero__meta .tag--right{ margin-left:auto; }
.hero__title{
  font-weight:700;
  font-size:clamp(4.5rem, 20vw, 20rem);
  line-height:.82;
  letter-spacing:-.03em;
  margin:auto 0;
  text-transform:none;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .word{ display:inline-block; will-change:transform; }
.hero__amp{
  font-family:var(--serif); font-style:italic; color:var(--rust);
  font-weight:400; margin-left:.12em; font-size:.72em;
}
/* Disciplines-forward hero */
.hero__disc{ margin:0; font-size:clamp(2.6rem, min(12.5vw, 13vh), 8.6rem); line-height:.85; }
.hero__disc .line{ padding-bottom:.02em; }
.hero__disc .disc{ color:var(--fg); transition:color .5s var(--ease); }
.hero__disc .disc.is-lit{ color:var(--rust); }
.hero__disc .sep{ color:var(--muted); font-weight:300; margin:0 .06em; }
.disc__kicker{
  display:block; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem, 2.4vw, 2rem); line-height:1.1; color:var(--muted);
  letter-spacing:0; margin-bottom:clamp(.7rem,1.4vw,1.2rem);
}
.disc__amp{ font-family:var(--serif); font-style:italic; color:var(--rust); font-weight:400; }
.hero__lead .lit,
.lit{ color:var(--rust); font-style:normal; }
.hero__foot{ display:flex; flex-direction:column; gap:clamp(1rem,2.4vh,1.9rem); }
.hero__cta-row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.hero__row{
  display:grid; grid-template-columns:1fr auto;
  align-items:end; gap:2rem;
}
.hero__lead{
  max-width:44ch; font-size:clamp(1rem,1.55vw,1.35rem);
  line-height:1.5; color:var(--fg);
}
.hero__roles{ justify-self:end; text-align:right; }
@media (max-width:760px){ .hero__row{ grid-template-columns:1fr; } }
.hero__roles{
  font-family:var(--mono); font-size:.85rem; text-transform:uppercase;
  letter-spacing:.04em; display:flex; gap:.5em; align-items:center; color:var(--muted);
}
.roles__rotate{ position:relative; display:inline-grid; height:1.4em; overflow:hidden; }
.roles__rotate span{
  grid-area:1/1; color:var(--rust);
  transform:translateY(110%); opacity:0;
}
.roles__rotate span.is-active{ transform:translateY(0); opacity:1; transition:.6s var(--ease); }
.roles__rotate span.is-out{ transform:translateY(-110%); opacity:0; transition:.6s var(--ease); }

.hero__scroll{
  position:absolute; right:clamp(.7rem,2.2vw,1.6rem); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.28em; color:var(--muted); z-index:5;
}
.hero__scroll span{ writing-mode:vertical-rl; }
.hero__arrow{ width:1px; height:64px; background:var(--line); position:relative; overflow:hidden; }
.hero__arrow::after{ content:""; position:absolute; inset:0; background:var(--rust); animation:drip 2s var(--ease) infinite; }
@keyframes drip{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }
@media (max-width:760px){
  .hero__row{ grid-template-columns:1fr; }
  .hero__scroll, .hero__roles{ display:none; }
}

/* oxidation glow bleeding from a corner */
.hero__oxide{
  position:absolute; z-index:-1; right:-15%; top:20%;
  width:60vw; height:60vw; border-radius:50%;
  background:radial-gradient(circle, rgba(200,85,31,.20), transparent 62%);
  filter:blur(30px); pointer-events:none;
}

/* keep hero text above the portrait */
.hero__disc, .hero__foot, .hero__meta{ position:relative; z-index:2; }

/* ---------- Hero portrait — digital / glitch treatment ---------- */
.hero__portrait{
  --face:url("../assets/img/yenfu_rustychen.jpg");
  position:absolute; inset:0 0 0 auto; z-index:0;
  width:min(60vw, 780px); pointer-events:none;
  -webkit-mask-image:linear-gradient(to left, #000 40%, transparent 95%);
          mask-image:linear-gradient(to left, #000 40%, transparent 95%);
}
/* legibility + let the frame melt into the warm dark on the left & bottom */
.hero__portrait::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(21,17,13,.82) 5%, transparent 20%),
    linear-gradient(to right, var(--bg) 1%, rgba(21,17,13,.35) 34%, transparent 70%),
    linear-gradient(to top, var(--bg) 3%, transparent 42%);
}
.glitch{ position:absolute; inset:0; overflow:hidden; background:#0b0906; }
.glitch__img{
  position:absolute; inset:0;
  background-image:var(--face); background-size:cover;
  background-position:57% 26%; background-repeat:no-repeat;
  will-change:transform, clip-path;
}
/* clean grayscale figure, always on */
.glitch__img--base{ filter:grayscale(1) contrast(1.08) brightness(.9); }
/* chromatic channels — invisible at rest, flash offset during glitch bursts */
.glitch__img--c{
  background-color:#12e9ff; background-blend-mode:multiply;
  mix-blend-mode:screen; opacity:0;
  animation:glitch-c 6s steps(1,end) infinite;
}
.glitch__img--r{
  background-color:#ff2d55; background-blend-mode:multiply;
  mix-blend-mode:screen; opacity:0;
  animation:glitch-r 6s steps(1,end) infinite;
}
/* torn slice that jumps a horizontal band sideways */
.glitch__tear{
  filter:grayscale(1) contrast(1.1) brightness(1.05);
  opacity:0; animation:glitch-tear 6s steps(1,end) infinite;
}
/* scanlines + flicker */
.glitch__fx{
  position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
  animation:glitch-flicker 5s steps(1,end) infinite;
}

@keyframes glitch-c{
  0%,6%,100%{ opacity:0; transform:translate(0,0); }
  2%{ opacity:.85; transform:translate(-7px,1px); }
  30%{ opacity:0; }
  31%{ opacity:.8; transform:translate(6px,-2px); }
  33%{ opacity:0; }
  63%{ opacity:0; }
  64%{ opacity:.85; transform:translate(-5px,0); }
  66%{ opacity:0; }
}
@keyframes glitch-r{
  0%,6%,100%{ opacity:0; transform:translate(0,0); }
  2%{ opacity:.9; transform:translate(7px,-1px); }
  30%{ opacity:0; }
  31%{ opacity:.85; transform:translate(-6px,2px); }
  33%{ opacity:0; }
  63%{ opacity:0; }
  64%{ opacity:.9; transform:translate(5px,0); }
  66%{ opacity:0; }
}
@keyframes glitch-tear{
  0%,100%{ opacity:0; clip-path:inset(0 0 100% 0); transform:translate(0,0); }
  1.5%{ opacity:.9; clip-path:inset(18% 0 62% 0); transform:translate(14px,0); }
  3%{ opacity:0; }
  31.5%{ opacity:.85; clip-path:inset(55% 0 30% 0); transform:translate(-18px,0); }
  33%{ opacity:0; }
  47%{ opacity:.8; clip-path:inset(72% 0 12% 0); transform:translate(10px,0); }
  48.5%{ opacity:0; }
  64.5%{ opacity:.9; clip-path:inset(34% 0 48% 0); transform:translate(-12px,0); }
  66%{ opacity:0; }
}
@keyframes glitch-flicker{
  0%,100%{ opacity:.5; }
  2%{ opacity:.85; }
  31%{ opacity:.9; }
  64%{ opacity:.8; }
  50%{ opacity:.45; }
}
@media (max-width:760px){
  .hero__portrait{ width:100%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
    opacity:.5;
  }
  /* mobile portrait is full-bleed behind the copy — shift the framing right so
     Yenfu's face is centred and not clipped at the left edge (desktop keeps 57% 26%) */
  .glitch__img{ background-position:42% 22%; }
  .hero__portrait::after{
    background:linear-gradient(to top, var(--bg) 8%, rgba(21,17,13,.55) 45%, transparent 85%);
  }
}
@media (prefers-reduced-motion:reduce){
  .glitch__img--c, .glitch__img--r, .glitch__tear, .glitch__fx{ animation:none; }
  .glitch__img--c, .glitch__img--r, .glitch__tear{ opacity:0; }
}

/* ---------- STATEMENT ---------- */
.statement{ padding:12vh var(--pad); border-top:1px solid var(--line-soft); }
.statement__text{
  font-size:clamp(1.6rem, 4.4vw, 3.6rem);
  line-height:1.22; letter-spacing:-.015em; max-width:20ch + 40ch; font-weight:400;
}
.statement__text .word{ display:inline-block; }

/* ---------- ABOUT / FAQ ---------- */
.about{ padding:12vh var(--pad); border-top:1px solid var(--line-soft); }
.about__q{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.2; letter-spacing:-.01em;
  color:var(--fg); margin:0 0 .6rem;
}
.about__a{ font-size:clamp(.95rem,1.05vw,1.02rem); line-height:1.65; color:var(--muted); margin:0; }
/* full-width lead: the identity question + bio */
.about__bio{ margin:2.6rem 0 clamp(3rem,6vw,5rem); }
.about__q--lead{ font-size:clamp(1.9rem,4.4vw,3.2rem); margin-bottom:1.1rem; }
.about__a--lead{ font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.6; max-width:none; }
/* the remaining four Q&As in a row */
.faq--cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.6rem 2rem; margin:0; }
.faq--cols .faq__item{ margin:0; padding-top:1.4rem; border-top:1px solid var(--line-soft); }
@media (max-width:900px){ .faq--cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .faq--cols{ grid-template-columns:1fr; } }

/* ---------- MARQUEE ---------- */
.marquee{ padding:2.4rem 0; border-block:1px solid var(--line-soft); overflow:hidden; }
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__set{ display:flex; align-items:center; }
.marquee__set span{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(2rem,5.5vw,4.2rem); padding:0 1.4rem; white-space:nowrap; color:var(--fg);
}
.marquee__set i{ color:var(--rust); font-style:normal; font-size:1rem; }

/* ---------- SELECTED WORKS ---------- */
.works{ position:relative; padding:12vh var(--pad); }
.works__head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:1rem; margin-bottom:1rem; }
.works__all{ font-family:var(--mono); font-size:.82rem; color:var(--fg); }
.works__list{ list-style:none; border-top:1px solid var(--line); }
.work{ border-bottom:1px solid var(--line); }
.work a{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:1.5rem;
  padding:clamp(1.1rem,3.2vw,2.3rem) 0;
  position:relative; z-index:2;
  transition:padding-left .5s var(--ease), color .5s var(--ease);
}
.work__no{ font-family:var(--mono); font-size:.8rem; color:var(--muted); }
.work__name{
  font-size:clamp(1.9rem,6vw,5rem); font-weight:600; letter-spacing:-.02em;
  line-height:1; transition:transform .5s var(--ease), color .5s var(--ease);
}
.work__tag{ font-family:var(--mono); font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; justify-self:end; text-align:right; }
.work:hover a{ padding-left:clamp(1rem,3vw,3rem); }
.work:hover .work__name{ color:var(--rust); }
.work:hover .work__no{ color:var(--rust); }
/* dim siblings when hovering the list */
.works__list:hover .work:not(:hover) .work__name{ color:var(--muted); opacity:.45; }

.works__float{
  position:fixed; top:0; left:0; z-index:6;
  width:min(32vw,380px); aspect-ratio:4/3;
  border-radius:3px; overflow:hidden; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.86);
  border:1px solid rgba(236,227,212,.2);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
  will-change:transform,opacity;
}
/* the image itself — desaturated, high-contrast "digital" render */
.works__float-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.3) brightness(.92);
}
/* video preview sits above the poster image, shown while a video-project is hovered */
.works__float-vid{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.3) brightness(.92);
  opacity:0; transition:opacity .3s var(--ease);
}
.works__float.is-vid .works__float-vid{ opacity:1; }
/* CRT scanlines */
.works__float::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.34) 2px 3px);
  mix-blend-mode:multiply; opacity:.75;
}
/* rust → verdigris duotone wash + subtle digital flicker */
.works__float::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(135deg, rgba(200,85,31,.55), rgba(111,168,145,.4));
  mix-blend-mode:screen; animation:flicker 3.4s steps(1) infinite;
}
@keyframes flicker{ 0%,100%{opacity:.92} 46%{opacity:.78} 48%{opacity:1} 92%{opacity:.85} 94%{opacity:1} }
.works__float-tag{
  position:absolute; left:8px; bottom:7px; z-index:4;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg); mix-blend-mode:difference;
}
@media (max-width:760px){ .works__float{ display:none; } .work__tag{ display:none; } .work a{ grid-template-columns:auto 1fr; } }

/* ---------- PILLARS ---------- */
.pillars{ padding:12vh var(--pad); border-top:1px solid var(--line-soft); }
.pillars__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.pillar{
  position:relative; overflow:hidden;
  min-height:52vh; padding:1.6rem;
  border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between;
  isolation:isolate;
}
.pillar__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.42) contrast(1.05);
  transform:scale(1.05); opacity:.5;
  transition:transform .8s var(--ease), filter .8s var(--ease), opacity .8s var(--ease);
}
.pillar::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(21,17,13,.2), var(--bg));
  transition:opacity .6s var(--ease);
}
.pillar:hover .pillar__bg{ transform:scale(1); filter:grayscale(0) brightness(.62); opacity:.85; }
.pillar__k{ font-family:var(--mono); font-size:.8rem; color:var(--muted); }
.pillar__title{ font-size:clamp(2rem,3.4vw,3.2rem); line-height:.95; font-weight:600; letter-spacing:-.02em; margin-top:auto; }
.pillar__desc{ color:var(--muted); font-size:.95rem; max-width:24ch; margin-top:.8rem; }
.pillar__go{
  font-family:var(--mono); font-size:.8rem; color:var(--rust); margin-top:1.1rem;
  transform:translateX(0); transition:transform .5s var(--ease); display:inline-block;
}
.pillar:hover .pillar__go{ transform:translateX(8px); }
@media (max-width:900px){ .pillars__grid{ grid-template-columns:1fr; } .pillar{ min-height:38vh; } }

/* ---------- CONTACT ---------- */
.contact{ padding:14vh var(--pad) 2.5rem; border-top:1px solid var(--line-soft); }
.contact__big{ display:block; margin:1rem 0 12vh; width:max-content; max-width:100%; }
.c-line{ display:block; overflow:hidden; }
.c-line__in{
  display:block;
  font-size:clamp(2.8rem,12vw,11rem); line-height:.94; font-weight:700; letter-spacing:-.03em;
  transition:color .5s var(--ease), transform .6s var(--ease);
}
.c-line__in--serif{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--rust); }
.contact__big:hover .c-line__in{ color:var(--patina); }
.contact__big:hover .c-line__in--serif{ color:var(--rust-2); }
.contact__aside{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  padding-bottom:8vh;
}
.contact__aside p{ font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,2.4vw,1.8rem); color:var(--muted); }
.contact__foot{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-top:2rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.82rem; color:var(--muted);
}
.contact__social{ display:flex; gap:1.4rem; }
.contact__foot a:hover{ color:var(--fg); }

/* ====================================================================
   AI MODE — conversational portfolio
   ==================================================================== */
.ai{
  position:fixed; inset:0; z-index:9700;
  display:flex; justify-content:flex-end;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s var(--ease), visibility .5s;
}
body.ai-open .ai{ opacity:1; visibility:visible; pointer-events:auto; }
body.ai-open{ overflow:hidden; }
.ai__scrim{
  position:absolute; inset:0;
  background:rgba(10,8,6,.55); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .5s var(--ease);
}
body.ai-open .ai__scrim{ opacity:1; }
.ai__panel{
  position:relative; width:min(560px,100%); height:100%;
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .6s var(--ease-io);
  box-shadow:-40px 0 80px rgba(0,0,0,.5);
}
body.ai-open .ai__panel{ transform:translateX(0); }
/* animated oxidation seam on the panel edge */
.ai__panel::before{
  content:""; position:absolute; left:-1px; top:0; width:2px; height:100%;
  background:linear-gradient(180deg, var(--rust), var(--patina), var(--rust));
  background-size:100% 300%; animation:seam 8s linear infinite;
}
@keyframes seam{ to{ background-position:0 300%; } }

.ai__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--pad); border-bottom:1px solid var(--line);
}
.ai__id{ display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.85rem; }
.ai__id-sep{ color:var(--rust); margin:0 .3em; }
.ai__pulse{
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--patina), var(--rust));
  box-shadow:0 0 0 0 rgba(111,168,145,.5); animation:pulse 2.2s infinite;
}
.ai__close{
  font-family:var(--mono); font-size:.78rem; color:var(--muted);
  background:none; border:none; display:flex; gap:.5rem; align-items:center;
  transition:color .3s;
}
.ai__close span{ color:var(--rust); }
.ai__close:hover{ color:var(--fg); }

.ai__log{
  flex:1; overflow-y:auto; padding:1.6rem var(--pad);
  display:flex; flex-direction:column; gap:1.1rem;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.ai__log::-webkit-scrollbar{ width:5px; }
.ai__log::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }

.msg{ max-width:88%; opacity:0; transform:translateY(12px); animation:msgIn .5s var(--ease) forwards; }
@keyframes msgIn{ to{ opacity:1; transform:none; } }
.msg--user{ align-self:flex-end; text-align:right; }
.msg--bot{ align-self:flex-start; }
.msg__who{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.4rem; }
.msg__bubble{
  display:inline-block; padding:.8rem 1rem; border-radius:14px;
  font-size:.98rem; line-height:1.5;
}
.msg--user .msg__bubble{ background:var(--rust); color:#1a1209; border-bottom-right-radius:3px; }
.msg--bot .msg__bubble{ background:rgba(236,227,212,.06); border:1px solid var(--line); border-bottom-left-radius:3px; color:var(--fg); }
.msg__bubble b{ color:var(--rust); font-weight:600; }
.msg--bot .msg__bubble a{ color:var(--patina); text-decoration:underline; text-underline-offset:3px; }

/* project cards inside answers */
.ai-cards{ display:flex; flex-direction:column; gap:.5rem; margin-top:.7rem; }
.ai-card{
  display:flex; align-items:center; gap:.8rem; padding:.5rem;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(236,227,212,.03);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.ai-card:hover{ border-color:var(--rust); transform:translateX(4px); background:rgba(200,85,31,.06); }
.ai-card img{ width:56px; height:44px; object-fit:cover; border-radius:7px; filter:grayscale(.4); }
.ai-card__t{ font-weight:600; font-size:.9rem; }
.ai-card__s{ font-family:var(--mono); font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.ai-card__go{ margin-left:auto; color:var(--rust); font-family:var(--mono); font-size:.8rem; padding-right:.4rem; }

/* typing indicator */
.typing{ display:inline-flex; gap:5px; padding:.9rem 1rem; background:rgba(236,227,212,.06); border:1px solid var(--line); border-radius:14px; border-bottom-left-radius:3px; }
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s; } .typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.ai__dock{ padding:1rem var(--pad) 1.2rem; border-top:1px solid var(--line); background:var(--bg); }
.ai__suggest{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.9rem; }
.chip{
  font-family:var(--mono); font-size:.74rem; color:var(--fg);
  border:1px solid var(--line); border-radius:100px; padding:.45rem .8rem;
  background:none; cursor:pointer; transition:border-color .3s, color .3s, background .3s;
  white-space:nowrap;
}
.chip:hover{ border-color:var(--rust); color:var(--rust); }
.ai__form{ display:flex; gap:.6rem; align-items:center; }
.ai__input{
  flex:1; background:rgba(236,227,212,.05); border:1px solid var(--line);
  border-radius:100px; padding:.85rem 1.1rem; color:var(--fg);
  font-family:var(--display); font-size:.95rem; outline:none;
  transition:border-color .3s;
}
.ai__input:focus{ border-color:var(--rust); }
.ai__input::placeholder{ color:var(--muted); }
.ai__send{
  width:46px; height:46px; flex:none; border-radius:50%;
  background:var(--rust); color:#1a1209; border:none; font-size:1.2rem;
  display:grid; place-items:center; transition:transform .3s var(--ease), background .3s;
}
.ai__send:hover{ transform:scale(1.08); }
.ai__note{ font-family:var(--mono); font-size:.66rem; color:var(--muted); margin-top:.8rem; text-align:center; opacity:.7; }
@media (max-width:760px){ .ai__panel{ width:100%; } }

/* ====================================================================
   Inner index pages (Works / Students / …) — shared head + filter
   ==================================================================== */
.nav__menu a.is-current{ color:var(--rust); }
.page-head{ padding:clamp(7rem,15vh,10.5rem) var(--pad) clamp(1.5rem,4vh,3rem); }
.page-title{ font-size:clamp(3rem,11vw,9rem); font-weight:700; letter-spacing:-.03em; line-height:.88; margin:.2em 0 0; }
.page-title em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--rust); }
.page-intro{ max-width:52ch; margin-top:clamp(1rem,2vw,1.6rem); font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.5; color:var(--fg); }
.page-intro .serif{ font-family:var(--serif); font-style:italic; }
.filter{
  position:sticky; top:var(--nav-h); z-index:600;
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  padding:1rem var(--pad);
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(10px); border-block:1px solid var(--line-soft);
}
.filter__btn{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em;
  color:var(--muted); background:none; border:1px solid var(--line);
  border-radius:100px; padding:.5rem .95rem; text-transform:uppercase;
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.filter__btn sup{ font-size:.62em; margin-left:.35em; opacity:.7; }
.filter__btn:hover{ color:var(--fg); border-color:var(--muted); }
.filter__btn.is-active{ color:#1a1209; background:var(--rust); border-color:var(--rust); }

/* ---------- Reveal defaults (JS-driven) ---------- */
.js [data-reveal]{ display:inline-block; }
.js [data-mask]{ display:block; transform:translateY(105%); transition:transform 1.05s var(--ease); }
.js .contact__big.is-in [data-mask]{ transform:translateY(0); }
.js .contact__big .c-line:nth-child(2) [data-mask]{ transition-delay:.09s; }
.js .contact__big .c-line:nth-child(3) [data-mask]{ transition-delay:.18s; }
/* ---------- Lightbox (seamless PDF / video pop-up) ---------- */
html.lb-lock{ overflow:hidden; }
/* while the lightbox is open, hand control back to the native cursor
   (the custom disc can't track over the iframe/video and sits below the modal) */
html.lb-lock .cursor{ display:none !important; }
html.lb-lock body{ cursor:auto !important; }
html.lb-lock .lightbox a,
html.lb-lock .lightbox button,
html.lb-lock .lightbox video,
html.lb-lock .lightbox [data-cursor]{ cursor:pointer !important; }
html.lb-lock .lightbox__stage{ cursor:default !important; }
.lightbox{
  position:fixed; inset:0; z-index:9700;
  display:none; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3.5rem);
}
.lightbox.is-open{ display:flex; }
.lightbox__scrim{
  position:absolute; inset:0;
  background:color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter:blur(8px);
  opacity:0; animation:lb-fade .35s var(--ease) forwards;
}
.lightbox__panel{
  position:relative; z-index:1;
  width:min(1100px, 100%); max-height:100%;
  display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.985);
  animation:lb-in .5s var(--ease) forwards;
}
.lightbox__bar{
  flex:0 0 auto; display:flex; align-items:center; gap:1rem;
  padding:.7rem .9rem .7rem 1.1rem; border-bottom:1px solid var(--line-soft);
}
.lightbox__title{
  font-family:var(--display); font-weight:600; font-size:1rem;
  letter-spacing:-.01em; color:var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lightbox__close{
  margin-left:auto;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--fg); background:none; border:1px solid var(--line);
  border-radius:100px; padding:.4rem .8rem; cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.lightbox__close:hover{ color:var(--bg); background:var(--rust); border-color:var(--rust); }
.lightbox__stage{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  background:#0c0a08;
}
.lightbox__pdf{ width:100%; height:82vh; max-height:100%; border:0; background:#fff; }
.lightbox__video{ width:100%; max-height:82vh; display:block; background:#000; }
@keyframes lb-fade{ to{ opacity:1; } }
@keyframes lb-in{ to{ opacity:1; transform:none; } }
@media (max-width:640px){
  .lightbox__pdf{ height:70vh; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .loader{ display:none; }
  .lightbox__scrim, .lightbox__panel{ opacity:1; transform:none; }
}

/* Nickname accent (nav wordmark + hero signature) — themes with the section */
.nick{ color:var(--rust); }

/* Logo [Rusty] oxidizes through the whole palette (rust→yellow→verdigris→pink→copper) */
@keyframes nick-cycle{
  0%   { color:#c8551f; }
  20%  { color:#ffcf40; }
  40%  { color:#6fa891; }
  60%  { color:#f2589a; }
  80%  { color:#d97a34; }
  100% { color:#c8551f; }
}
.nav__name .nick,
.contact__copy .nick{ animation:nick-cycle 7s linear infinite; }

/* ---------- Homepage theme — fixed golden-yellow accent ---------- */
body.theme-home{
  --rust:   #ffcf40;   /* homepage signature: yellow (Works=orange, Students=green, Playground=pink) */
  --rust-2: #ffe07a;
  --patina: #ffcf40;   /* fold the 2nd accent into yellow too — keeps the homepage single-hue */
}
.theme-home ::selection{ background:var(--rust); color:#1a1209; }        /* dark text on bright yellow */
.theme-home .rail__fill{ background:linear-gradient(180deg, color-mix(in srgb, var(--rust) 45%, transparent), var(--rust)); }
.theme-home .hero__oxide{ background:radial-gradient(circle, rgba(255,207,64,.16), transparent 62%); }

/* =====================================================================
   CARD COMPONENT — shared (Works grid + design-system reference)
   Page-specific scroll-reveal (.card opacity/transform) stays in works.css
   ===================================================================== */
.card a{ display:block; }
/* shape variety drives the masonry rhythm */
.card--portrait  .card__media{ aspect-ratio:3/4; }
.card--square    .card__media{ aspect-ratio:1/1; }
.card--landscape .card__media{ aspect-ratio:4/3; }
.card--wide      .card__media{ aspect-ratio:16/10; }
.card__media{
  position:relative; overflow:hidden;
  border:1px solid var(--line); background:var(--bg-2);
  border-radius:3px;
}
.card__media img,
.card__vid{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.18) brightness(.82);
  transform:scale(1.03);
  transition:filter .6s var(--ease), transform .9s var(--ease), opacity .5s var(--ease);
}
.card:hover .card__media img,
.card:hover .card__vid{ filter:grayscale(.45) contrast(1.06) brightness(.98); transform:scale(1.07); }
.card__vid{ z-index:1; opacity:0; }
.card.is-playing .card__vid{ opacity:1; }
.card__play{
  position:absolute; top:8px; right:9px; z-index:4;
  font-size:.62rem; color:var(--fg); mix-blend-mode:difference;
  opacity:.85; transition:opacity .3s var(--ease);
}
.card:hover .card__play{ opacity:0; }
.card__media::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.24) 2px 3px);
  mix-blend-mode:multiply; opacity:.55;
}
.card__media::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(140deg, rgba(200,85,31,.55), rgba(111,168,145,.32));
  mix-blend-mode:screen; opacity:0; transition:opacity .6s var(--ease);
}
.card:hover .card__media::after{ opacity:.6; }
.card__k{
  position:absolute; top:8px; left:9px; z-index:4;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em;
  color:var(--fg); mix-blend-mode:difference;
}
.card__view{
  position:absolute; right:9px; bottom:8px; z-index:4;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg); opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.card:hover .card__view{ opacity:1; transform:none; }
.card__meta{ display:flex; align-items:baseline; gap:.6rem; padding-top:.85rem; }
.card__title{ font-size:clamp(1.2rem,1.9vw,1.65rem); font-weight:600; letter-spacing:-.01em; line-height:1.1; transition:color .4s var(--ease); }
.card__title small{ display:block; font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.02rem; letter-spacing:0; color:var(--muted); margin-top:.22rem; }
.card:hover .card__title{ color:var(--rust); }
.card__cat{ margin-left:auto; align-self:flex-start; font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap; }

/* =====================================================================
   FORM ELEMENTS — PATINA form system (reusable; accent follows section theme)
   Not used on the current site; ready for a future contact form, etc.
   ===================================================================== */
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field__label{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.field__label .req{ color:var(--rust); margin-left:.15em; }
.field__hint{ font-family:var(--mono); font-size:.72rem; color:var(--muted); }

.input{
  font-family:var(--display); font-size:.98rem; color:var(--fg); width:100%;
  background:rgba(236,227,212,.05);
  border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1rem; outline:none;
  -webkit-appearance:none; appearance:none;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.input::placeholder{ color:var(--muted); }
.input:hover{ border-color:rgba(236,227,212,.28); }
.input:focus{
  border-color:var(--rust); background:rgba(236,227,212,.07);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--rust) 22%, transparent);
}
.input:disabled{ opacity:.45; cursor:not-allowed; }
textarea.input{ min-height:120px; resize:vertical; line-height:1.5; }
select.input{
  cursor:pointer; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23988c7c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}

/* validation */
.field--error .input{ border-color:#d9694f; }
.field--error .field__hint{ color:#d9694f; }
.field--ok .input{ border-color:var(--patina); }

/* checkbox + radio */
.check, .radio{
  display:inline-flex; align-items:flex-start; gap:.65rem; cursor:pointer;
  font-family:var(--display); font-size:.98rem; color:var(--fg); line-height:1.4;
}
.check input, .radio input{
  appearance:none; -webkit-appearance:none; flex:none;
  width:20px; height:20px; margin-top:.05rem; cursor:pointer;
  border:1px solid var(--line); background:rgba(236,227,212,.05);
  display:grid; place-content:center;
  transition:border-color .25s, background .25s;
}
.check input{ border-radius:6px; }
.radio input{ border-radius:50%; }
.check input:hover, .radio input:hover{ border-color:var(--rust); }
.check input::after{
  content:""; width:11px; height:9px; transform:scale(0); transition:transform .2s var(--ease);
  background:#1a1209; clip-path:polygon(14% 52%,0 66%,40% 100%,100% 20%,86% 6%,38% 66%);
}
.radio input::after{ content:""; width:9px; height:9px; border-radius:50%; background:#1a1209; transform:scale(0); transition:transform .2s var(--ease); }
.check input:checked, .radio input:checked{ background:var(--rust); border-color:var(--rust); }
.check input:checked::after, .radio input:checked::after{ transform:scale(1); }

/* toggle / switch */
.switch{ display:inline-flex; align-items:center; gap:.7rem; cursor:pointer; font-family:var(--display); color:var(--fg); }
.switch input{
  appearance:none; -webkit-appearance:none; position:relative; flex:none;
  width:46px; height:26px; border-radius:100px; cursor:pointer;
  background:rgba(236,227,212,.1); border:1px solid var(--line);
  transition:background .3s, border-color .3s;
}
.switch input::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:var(--fg); transition:transform .3s var(--ease), background .3s;
}
.switch input:checked{ background:var(--rust); border-color:var(--rust); }
.switch input:checked::after{ transform:translateX(20px); background:#1a1209; }

/* range */
.input--range{ -webkit-appearance:none; appearance:none; width:100%; height:2px; padding:0; background:var(--line); border-radius:2px; outline:none; cursor:pointer; }
.input--range::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--rust); cursor:pointer; border:3px solid var(--bg); box-shadow:0 0 0 1px var(--rust); }
.input--range::-moz-range-thumb{ width:14px; height:14px; border:none; border-radius:50%; background:var(--rust); cursor:pointer; }

/* fieldset + focus-visible */
.fieldset{ border:1px solid var(--line-soft); border-radius:16px; padding:1.4rem; }
.fieldset > legend{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:0 .5rem; }
.input:focus-visible, .check input:focus-visible, .radio input:focus-visible, .switch input:focus-visible, .input--range:focus-visible{
  outline:2px solid var(--rust); outline-offset:2px;
}

/* =====================================================================
   CONTACT MODAL — pops up from the nav "Contact" + footer "Let's talk"
   Injected by main.js so it lives on every page. Accent follows theme.
   ===================================================================== */
.cmodal{
  position:fixed; inset:0; z-index:9400;
  display:grid; place-items:center; padding:var(--pad);
  visibility:hidden; pointer-events:none;
  transition:visibility .5s;   /* just gates hiding until fades finish; visuals fade on children */
}
html.cmodal-open .cmodal{ visibility:visible; pointer-events:auto; }
/* animate the scrim's own opacity AND the blur (0→10px) so it eases in smoothly */
.cmodal__scrim{
  position:absolute; inset:0;
  opacity:0;
  background:color-mix(in srgb, var(--bg) 0%, transparent);
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  transition:opacity .45s var(--ease),
             backdrop-filter .5s var(--ease),
             -webkit-backdrop-filter .5s var(--ease),
             background .5s var(--ease);
  will-change:opacity, backdrop-filter;
}
html.cmodal-open .cmodal__scrim{
  opacity:1;
  background:color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.cmodal__panel{
  position:relative; width:min(560px, 100%);
  background:var(--bg-2); border:1px solid var(--line); border-radius:20px;
  padding:clamp(1.6rem,4vw,2.6rem);
  transform:translateY(18px) scale(.98); opacity:0;
  transition:transform .5s var(--ease) .04s, opacity .4s var(--ease) .04s;
  will-change:transform, opacity;
  max-height:90vh; overflow:auto;
}
html.cmodal-open .cmodal__panel{ transform:none; opacity:1; }
.cmodal__close{
  position:absolute; top:1rem; right:1rem; width:40px; height:40px;
  display:grid; place-items:center; border:1px solid var(--line); border-radius:50%;
  background:none; color:var(--fg); cursor:pointer; font-size:1.1rem; line-height:1;
  transition:border-color .3s, color .3s, transform .3s var(--ease);
}
.cmodal__close:hover{ border-color:var(--rust); color:var(--rust); transform:rotate(90deg); }
.cmodal__eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.cmodal__title{
  font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1;
  font-size:clamp(2rem,6vw,2.8rem); margin:.5rem 0 .5rem;
}
.cmodal__title em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--rust); }
.cmodal__lead{ color:var(--muted); font-size:.95rem; line-height:1.55; max-width:42ch; }
.cmodal__status{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--fg);
}
.cmodal__status .dot{ width:8px; height:8px; border-radius:50%; background:var(--patina); box-shadow:0 0 0 0 rgba(111,168,145,.6); animation:pulse 2.4s infinite; }
.cmodal__list{ margin-top:1.6rem; }
.cmodal__row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem .3rem; border-top:1px solid var(--line-soft);
  font-family:var(--mono); color:var(--fg);
  transition:padding-left .35s var(--ease), color .3s var(--ease);
}
.cmodal__row:last-child{ border-bottom:1px solid var(--line-soft); }
.cmodal__row:hover{ padding-left:1rem; color:var(--rust); }
.cmodal__row .k{ font-size:.82rem; letter-spacing:.02em; }
.cmodal__row .v{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:var(--muted); transition:color .3s; }
.cmodal__row:hover .v{ color:var(--rust); }
.cmodal__row .v .arr{ transition:transform .35s var(--ease); }
.cmodal__row:hover .v .arr{ transform:translate(3px,-3px); }
html.cmodal-open, html.cmodal-open body{ overflow:hidden; }