/* ═══════════════════════════════════════════════════════════════════
   CHRIS HINTON — ARTIST
   A dim room, warm lamps, and the work.

   Rule the whole sheet obeys: type never sits on top of a picture.
   Labels live at the edge of the frame, in the margin, or on hover —
   the way a placard hangs beside a painting, never across it.
   ═══════════════════════════════════════════════════════════════════ */

/* ── tokens ──────────────────────────────────────────────────────── */
:root{
  /* the room */
  --pitch:       #131211;
  --charcoal:    #1C1B1A;
  --lift:        #211F1E;
  /* the light */
  --bone:        #F5F3F0;
  --cream:       #C9A57E;
  --cream-deep:  #B08862;

  --bone-64: rgba(245,243,240,.64);
  --bone-46: rgba(245,243,240,.46);
  --bone-32: rgba(245,243,240,.32);
  --hair:    rgba(245,243,240,.09);
  --hair-lit:rgba(201,165,126,.34);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* the whisper scale — nothing here shouts */
  --t-micro: .625rem;   /* 10px  placard meta        */
  --t-label: .6875rem;  /* 11px  kickers, nav, rules */
  --t-small: .8125rem;  /* 13px  captions            */
  --t-body:  .9375rem;  /* 15px  prose               */
  --t-lead:  1.0625rem; /* 17px  hero line, pitch    */

  --track-wide: .34em;
  --track-mid:  .18em;

  --gut:  clamp(1.5rem, 5vw, 5rem);
  --bay:  clamp(6rem, 14vh, 11rem);   /* vertical air between sections */

  --ease:  cubic-bezier(.16,.84,.44,1);
  --ease-s:cubic-bezier(.4,0,.2,1);
  --slow:  600ms;
  --slower:1200ms;
}

/* ── reset ───────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body,h1,h2,h3,p,figure,blockquote,dl,dd{ margin:0; }
img,video{ display:block; max-width:100%; }
button,input,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

html,body{ background:var(--charcoal); }
body{
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.68;
  color:var(--bone-64);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }

::selection{ background:var(--cream); color:var(--pitch); }

:focus-visible{
  outline:1px solid var(--cream);
  outline-offset:4px;
  border-radius:1px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:fixed; top:0; left:50%; translate:-50% -110%; z-index:200;
  background:var(--cream); color:var(--pitch);
  padding:.7rem 1.4rem; font-size:var(--t-label);
  letter-spacing:var(--track-mid); text-transform:uppercase;
  transition:translate 260ms var(--ease);
}
.skip:focus{ translate:-50% 0; }

/* ── shared type ─────────────────────────────────────────────────── */
.kicker{
  font-size:var(--t-label);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--bone-32);
  font-weight:500;
}

/* the signature: a gallery placard. beside the work, never on it. */
.placard{
  display:flex; flex-direction:column; gap:.28em;
  font-size:var(--t-micro);
  line-height:1.5;
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  font-weight:500;
}
.placard__title{ color:var(--bone-64); }
.placard__meta { color:var(--bone-32); letter-spacing:var(--track-mid); }
.placard__no{
  color:var(--cream); opacity:.7;
  font-variant-numeric:tabular-nums; letter-spacing:.22em;
}
.placard__no b,.placard__no i{ font-weight:500; font-style:normal; }

/* ═══ persistent chrome ══════════════════════════════════════════ */

/* film grain — one 128px tile, painted once, nudged in 8 steps */
.grain{
  position:fixed; inset:-100px; z-index:90; pointer-events:none;
  background-image:var(--grain-tile);
  background-repeat:repeat;
  opacity:.05;
  mix-blend-mode:overlay;
  will-change:transform;
  animation:grain-shift 900ms steps(1) infinite;
}
@keyframes grain-shift{
  0%  { transform:translate(0,0); }
  12% { transform:translate(-6%,-3%); }
  25% { transform:translate(3%,-8%); }
  37% { transform:translate(-4%,5%); }
  50% { transform:translate(7%,2%); }
  62% { transform:translate(-8%,-6%); }
  75% { transform:translate(2%,7%); }
  87% { transform:translate(5%,-4%); }
}

.rail{
  position:fixed; top:0; left:0; right:0; height:1px; z-index:95;
  background:var(--hair); pointer-events:none;
}
.rail__fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--cream-deep), var(--cream));
  transform-origin:left;
}

/* cursor becomes a lamp near the work */
.cursor{
  position:fixed; top:0; left:0; z-index:96; pointer-events:none;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:var(--cream);
  opacity:0;
  transition:width 480ms var(--ease), height 480ms var(--ease),
             margin 480ms var(--ease), opacity 320ms linear,
             background-color 480ms var(--ease);
}
.cursor.is-live{ opacity:.85; }
.cursor.is-open{
  width:74px; height:74px; margin:-37px 0 0 -37px;
  background:rgba(201,165,126,.10);
  box-shadow:inset 0 0 0 1px var(--hair-lit);
}
.cursor__label{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:var(--t-micro); letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--cream);
  opacity:0; transition:opacity 320ms linear 120ms;
}
.cursor.is-open .cursor__label{ opacity:1; }

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.1rem var(--gut);
  font-size:var(--t-label); letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--bone-46);
  transition:opacity var(--slow) var(--ease), translate var(--slow) var(--ease);
}
.topbar::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(19,18,17,.78) 0%, rgba(19,18,17,.5) 55%, transparent);
}
.topbar.is-hidden{ opacity:0; translate:0 -100%; }
/* the mark — big enough to anchor the whole bar; nav stays a whisper beside it */
.topbar__name{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(1.9rem,4.4vw,3rem);
  font-weight:400; letter-spacing:-.01em;
  text-transform:none;
  line-height:1;
  color:var(--bone);
  transition:color var(--slow) var(--ease);
}
.topbar__name:hover{ color:var(--cream); }
.topbar__nav{ display:flex; gap:clamp(1rem,3vw,2.4rem); }
.topbar__nav a{ position:relative; transition:color var(--slow) var(--ease); }
.topbar__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:currentColor; scale:0 1; transform-origin:left;
  transition:scale var(--slow) var(--ease);
}
.topbar__nav a:hover{ color:var(--bone); }
.topbar__nav a:hover::after{ scale:1 1; }

/* house lights */
.curtain{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  background:var(--pitch);
  transition:opacity 900ms var(--ease), visibility 0s linear 900ms;
}
.curtain__mark{
  font-family:var(--serif);
  font-size:clamp(1.6rem,5vw,2.4rem);
  font-weight:300; letter-spacing:.4em; text-indent:.4em;
  color:var(--cream);
  opacity:0;
  animation:mark-in 1500ms var(--ease) forwards;
}
@keyframes mark-in{
  0%   { opacity:0; letter-spacing:.9em; }
  40%  { opacity:.85; }
  100% { opacity:.55; letter-spacing:.4em; }
}
body.is-lit .curtain{ opacity:0; visibility:hidden; }

/* ═══ 1. HERO ════════════════════════════════════════════════════ */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:grid; align-items:end;
  padding:0 var(--gut) clamp(3.5rem,9vh,6rem);
  overflow:hidden;
}

/* cinematic block — video when it exists, graded stills until then */
.cine{ position:absolute; inset:0; overflow:hidden; background:var(--pitch); }
.cine__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity 1400ms var(--ease);
}
.cine.has-video .cine__video{ opacity:1; }
.cine.has-video .cine__stills{ opacity:0; }
.cine__stills{
  position:absolute; inset:0;
  transition:opacity 1400ms var(--ease);
  filter:saturate(.81) contrast(1.02) brightness(.82) sepia(.06);
}
.cine__still{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; scale:1.08;
  transition:opacity 2600ms var(--ease);
}
.cine__still.is-on{ opacity:1; animation:push-in 15s linear forwards; }
@keyframes push-in{ from{ scale:1.05; } to{ scale:1.16; } }
/* warm rim light over every cinematic block, so all three grade alike */
.cine::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(201,165,126,.20), transparent 58%),
    radial-gradient(140% 110% at 50% 60%, transparent 42%, rgba(19,18,17,.55) 100%);
}
.hero__shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    var(--charcoal) 0%, rgba(28,27,26,.86) 16%,
    rgba(28,27,26,.34) 42%, transparent 68%);
}
.hero__lamp{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(58% 44% at 22% 78%, rgba(201,165,126,.13), transparent 70%);
}

.hero__copy{ position:relative; z-index:2; max-width:44ch; }
.hero__copy .kicker{ margin-bottom:1.5rem; color:var(--bone-46); }
.hero__line{
  font-size:var(--t-lead);
  line-height:1.62;
  color:var(--bone-64);
  font-weight:400;
  letter-spacing:.005em;
  text-wrap:balance;
}

/* right gutter, not centre — the copy owns the bottom-left corner */
.cue{
  position:absolute; z-index:2; right:var(--gut);
  bottom:clamp(1.6rem,4vh,2.6rem);
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  font-size:var(--t-micro); letter-spacing:var(--track-wide);
  text-transform:uppercase; color:var(--bone-32);
  transition:color var(--slow) var(--ease);
}
.cue:hover{ color:var(--cream); }
.cue__line{
  width:1px; height:clamp(38px,7vh,64px);
  background:linear-gradient(to bottom, var(--hair-lit), transparent);
  position:relative; overflow:hidden;
}
.cue__line::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--cream), transparent);
  animation:cue-fall 2800ms var(--ease-s) infinite;
}
@keyframes cue-fall{
  0%  { transform:translateY(-100%); opacity:0; }
  30% { opacity:1; }
  100%{ transform:translateY(100%); opacity:0; }
}

/* ═══ 2. LEDGER ══════════════════════════════════════════════════ */
.ledger{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  background:var(--lift);
}
.ledger__cell{
  padding:clamp(2rem,5vh,3.2rem) var(--gut);
  display:flex; flex-direction:column; gap:.7rem;
  border-left:1px solid var(--hair);
}
.ledger__cell:first-child{ border-left:0; }
.ledger__fig{
  font-family:var(--serif);
  font-size:clamp(2rem,4.6vw,3.1rem);
  font-weight:300; line-height:1;
  color:var(--bone);
  font-variant-numeric:tabular-nums;
  font-optical-sizing:auto;
  /* all three figures sit on one line, whatever their size */
  display:flex; align-items:flex-end;
  min-height:clamp(2rem,4.6vw,3.1rem);
}
.ledger__fig em{ font-style:normal; color:var(--cream); }
.ledger__fig--word{
  font-size:clamp(1.5rem,3.2vw,2.2rem);
  letter-spacing:-.01em; color:var(--cream);
}
.ledger__key{
  font-size:var(--t-micro); letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--bone-32);
}

/* ═══ 3. MISSION ═════════════════════════════════════════════════ */
.mission{
  padding:clamp(9rem,22vh,16rem) var(--gut);
  text-align:center;
  display:grid; justify-items:center; gap:clamp(2.6rem,6vh,4rem);
  background:
    radial-gradient(70% 50% at 50% 42%, rgba(201,165,126,.055), transparent 72%),
    var(--charcoal);
}
.mission__statement{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:clamp(1.9rem,5.4vw,3.9rem);
  font-weight:300;
  line-height:1.22;
  letter-spacing:-.018em;
  color:var(--bone);
  max-width:26ch;
}
.mission__statement span{ display:block; }
.mission__note{
  max-width:46ch;
  font-size:var(--t-body);
  color:var(--bone-46);
  text-wrap:pretty;
}

/* ═══ 4. PILLARS ═════════════════════════════════════════════════ */
.pillars{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,3.5rem);
  padding:0 var(--gut) var(--bay);
}
/* each pillar is a link through to its filtered portfolio page */
.pillar{
  display:flex; flex-direction:column; gap:1.6rem;
  color:inherit; text-decoration:none; cursor:pointer;
}
.pillar__frame{
  position:relative; overflow:hidden;
  aspect-ratio:4/5;
  background:var(--pitch);
}
.pillar__frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(19,18,17,.62) 100%);
  opacity:.9; transition:opacity var(--slower) var(--ease);
}
.pillar__frame img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.93) brightness(.91);
  scale:1.02;
  transition:scale var(--slower) var(--ease), filter var(--slower) var(--ease);
}
.pillar:hover .pillar__frame img{ scale:1.06; filter:saturate(1) brightness(1); }
.pillar:hover .pillar__frame::after{ opacity:.42; }

.pillar__name{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:clamp(1.1rem,1.8vw,1.35rem);
  font-weight:400; line-height:1.2; letter-spacing:-.01em;
  color:var(--bone);
  margin-bottom:.7rem;
  position:relative; padding-bottom:.9rem;
}
.pillar__name::after{
  content:''; position:absolute; left:0; bottom:0; width:26px; height:1px;
  background:var(--cream-deep);
  transition:width var(--slower) var(--ease);
}
.pillar:hover .pillar__name::after{ width:56px; }
.pillar__text p{ font-size:var(--t-small); color:var(--bone-46); max-width:34ch; }

.pillar__cta{
  display:inline-flex; align-items:center; gap:.5em;
  margin-top:1.1rem;
  font-size:var(--t-micro); letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--cream);
  opacity:0; translate:0 6px;
  transition:opacity var(--slow) var(--ease), translate var(--slow) var(--ease);
}
.pillar__cta svg{ width:11px; height:11px; transition:translate var(--slow) var(--ease); }
.pillar:hover .pillar__cta{ opacity:1; translate:0 0; }
.pillar:hover .pillar__cta svg{ translate:4px 0; }
.pillar:focus-visible .pillar__cta{ opacity:1; translate:0 0; }

/* ═══ 5. STORY ═══════════════════════════════════════════════════ */
.story{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
  padding:var(--bay) var(--gut);
  background:var(--lift);
  border-top:1px solid var(--hair);
}
.story__media{ position:relative; }
.story__media .cine{
  position:relative; inset:auto;
  aspect-ratio:3/2;
  background:var(--pitch);
}
/* the story block presents actual artwork — show it whole, grade it gently */
.cine--story .cine__stills{ filter:saturate(.96) contrast(1.01) brightness(.97); }
.cine--story .cine__still{ object-fit:contain; padding:clamp(1rem,3vw,2.4rem); }
.cine--story .cine__still.is-on{ animation:none; scale:1; }
.cine--story::after{
  background:radial-gradient(110% 90% at 50% 46%, transparent 46%, rgba(19,18,17,.5) 100%);
}
.placard--static{ margin-top:1.1rem; }

.story__text{ max-width:52ch; }
.story__text .kicker{ margin-bottom:2rem; }
.prose p{ font-size:var(--t-body); color:var(--bone-46); margin-bottom:1.5rem; text-wrap:pretty; }
.prose p:last-child{ margin-bottom:0; }
.prose__sign{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:var(--t-lead); color:var(--cream); margin-top:2.2rem;
}

/* ═══ 6. PINEHURST CASE ══════════════════════════════════════════ */
.case{ padding:var(--bay) var(--gut); }
.case__intro{
  display:grid; gap:1.4rem;
  max-width:62ch; margin-bottom:clamp(3rem,7vh,5rem);
}
.case__title{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(1.7rem,4vw,2.6rem);
  font-weight:300; line-height:1.14; letter-spacing:-.02em;
  color:var(--bone);
}
.case__body{ font-size:var(--t-body); color:var(--bone-46); max-width:50ch; }

.case__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,1.6vw,1.4rem);
}
.case__item{
  position:relative; overflow:hidden;
  aspect-ratio:4/3;
  background:var(--pitch);
}
/* the lead piece takes a 2×2 block — same 4:3 shape, twice the size */
.case__item--lead{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
/* hover brings a little more light up, but the room stays legible at rest */
.case__item img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.89) brightness(.82);
  scale:1.01;
  transition:filter var(--slower) var(--ease), scale var(--slower) var(--ease);
}
/* a shadow falls across the lower edge so the label stays readable
   over pale paper — no box, no plate, just less light down there */
.case__item::after,.hang::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(to top, rgba(19,18,17,.9), rgba(19,18,17,.45) 42%, transparent);
  opacity:0; pointer-events:none;
  transition:opacity var(--slow) var(--ease);
}
.case__item:hover::after,.case__item:focus-within::after,
.hang:hover::after,.hang:focus-within::after{ opacity:1; }

.case__item .placard{
  position:absolute; z-index:1; left:1.1rem; right:1.1rem; bottom:1.1rem;
  opacity:0; translate:0 8px;
  transition:opacity var(--slow) var(--ease), translate var(--slow) var(--ease);
}
.case__item:hover img,
.case__item:focus-within img{ filter:saturate(1) brightness(1); scale:1.035; }
.case__item:hover .placard,
.case__item:focus-within .placard{ opacity:1; translate:0 0; }

.case__also{
  margin-top:clamp(2.4rem,5vh,3.6rem);
  padding-top:1.6rem; border-top:1px solid var(--hair);
  font-size:var(--t-micro); letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--bone-32);
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem;
}
.case__also span{ color:var(--bone-46); }
.case__also i{ color:var(--cream); font-style:normal; opacity:.6; }

/* ═══ 7. THE WALL — a static sampler, no scroll-jacking ═══════════ */
.wall{ background:var(--pitch); padding-top:var(--bay); }
.wall__intro{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:1rem 2rem;
  padding:0 var(--gut) clamp(2rem,5vh,3rem);
}
.wall__intro .kicker{ margin:0; }
.wall__more{
  font-size:var(--t-label); letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--cream);
  position:relative; padding-bottom:.3rem;
  transition:color var(--slow) var(--ease);
}
.wall__more::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; scale:0 1; transform-origin:left;
  transition:scale var(--slow) var(--ease);
}
.wall__more:hover{ color:var(--bone); }
.wall__more:hover::after{ scale:1 1; }

/* a salon hang: every piece keeps its own proportions, nothing is cropped */
.wall__grid{
  columns:2;
  column-gap:clamp(1rem,2.4vw,2.2rem);
  padding:0 var(--gut) var(--bay);
  background:var(--charcoal);
}
.hang{
  position:relative; overflow:hidden;
  break-inside:avoid;
  display:block;
  margin:0 0 clamp(1rem,2.4vw,2.2rem);
  background:var(--pitch);
}
.hang img{
  width:100%; height:auto;
  filter:saturate(.89) brightness(.82);
  scale:1.01;
  transition:filter var(--slower) var(--ease), scale var(--slower) var(--ease);
}
.hang .placard{
  position:absolute; z-index:1; left:1.2rem; bottom:1.2rem; right:1.2rem;
  opacity:0; translate:0 10px;
  transition:opacity var(--slow) var(--ease), translate var(--slow) var(--ease);
}
.hang:hover img,.hang:focus-within img{ filter:saturate(1) brightness(1); scale:1.04; }
.hang:hover .placard,.hang:focus-within .placard{ opacity:1; translate:0 0; }

/* ═══ 8. CLOSE ═══════════════════════════════════════════════════ */
.close{
  position:relative; isolation:isolate;
  padding:clamp(7rem,18vh,12rem) var(--gut);
  background:var(--pitch);
  border-top:1px solid var(--hair);
}
.close__lamp{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(64% 52% at 50% 8%, rgba(201,165,126,.13), transparent 68%);
}
.close__inner{ max-width:74rem; margin-inline:auto; }
.close__title{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(1.6rem,3.6vw,2.5rem);
  font-weight:300; line-height:1.2; letter-spacing:-.02em;
  color:var(--bone);
  margin:1.4rem 0 clamp(3rem,7vh,4.5rem);
  max-width:20ch;
}

.form{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.4rem,3vw,2.4rem);
  max-width:44rem;
}
.field{ display:grid; gap:.7rem; }
.field--full{ grid-column:1/-1; }
.field label{
  font-size:var(--t-micro); letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--bone-32);
}
.field input,.field textarea,.signup__form input{
  background:transparent;
  border:0; border-bottom:1px solid var(--hair);
  padding:.6rem 0;
  font-size:var(--t-body); color:var(--bone);
  border-radius:0;
  transition:border-color var(--slow) var(--ease);
}
.field textarea{ resize:vertical; min-height:5.5rem; }
.field input:hover,.field textarea:hover,.signup__form input:hover{ border-color:var(--bone-32); }
.field input:focus,.field textarea:focus,.signup__form input:focus{
  outline:0; border-color:var(--cream);
}
.field.is-bad input,.field.is-bad textarea{ border-color:var(--cream-deep); }

.form__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem;
  margin-top:.6rem;
}
.btn{
  --btn-bg:var(--cream);
  background:var(--btn-bg); color:var(--pitch);
  border:1px solid var(--btn-bg);
  padding:.95rem 2.1rem; cursor:pointer;
  font-size:var(--t-label); letter-spacing:var(--track-mid);
  text-transform:uppercase; font-weight:500;
  border-radius:0;
  transition:background-color var(--slow) var(--ease),
             color var(--slow) var(--ease),
             border-color var(--slow) var(--ease);
}
.btn:hover{ background:var(--bone); border-color:var(--bone); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn--ghost{
  background:transparent; color:var(--cream);
  border-color:var(--hair-lit);
  padding:.8rem 1.5rem;
}
.btn--ghost:hover{ background:transparent; color:var(--bone); border-color:var(--bone-32); }

.form__status{
  font-size:var(--t-micro); letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--bone-32); margin:0;
}
.form__status.is-good{ color:var(--cream); }
.form__status.is-bad{ color:var(--cream-deep); }

.signup{
  margin-top:clamp(3.4rem,8vh,5rem);
  padding-top:clamp(2rem,4vh,3rem);
  border-top:1px solid var(--hair);
  max-width:44rem;
  display:grid; gap:1.2rem;
}
.signup__pitch{ font-size:var(--t-small); color:var(--bone-46); max-width:40ch; }
.signup__form{ display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end; }
.signup__form input{ flex:1 1 16rem; }

/* ═══ PORTFOLIO PAGE ═══════════════════════════════════════════════
   Same salon hang as the homepage sampler (.wall__grid / .hang),
   with a page head and a set of category filters above it. */
.p-head{
  padding:clamp(8.5rem,20vh,12.5rem) var(--gut) clamp(2.5rem,6vh,3.5rem);
  max-width:60rem;
}
.p-head .kicker{ margin-bottom:1.2rem; }
.p-title{
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(2.1rem,5.6vw,3.6rem);
  font-weight:300; line-height:1.1; letter-spacing:-.02em;
  color:var(--bone);
  margin-bottom:1.2rem;
}
.p-desc{ font-size:var(--t-body); color:var(--bone-46); max-width:52ch; }

.p-tabs{
  display:flex; flex-wrap:wrap; gap:.7rem;
  padding:0 var(--gut) clamp(2.2rem,5vh,3.4rem);
}
.p-tab{
  padding:.65rem 1.15rem;
  font-size:var(--t-label); letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--bone-46);
  border:1px solid var(--hair); background:transparent; cursor:pointer;
  transition:color var(--slow) var(--ease), border-color var(--slow) var(--ease),
             background-color var(--slow) var(--ease);
}
.p-tab:hover{ color:var(--bone); border-color:var(--bone-32); }
.p-tab.is-active{ color:var(--pitch); background:var(--cream); border-color:var(--cream); }

.p-count{
  padding:0 var(--gut) clamp(1.5rem,4vh,2.4rem);
  font-size:var(--t-micro); letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--bone-32);
}

.hang.is-hidden{ display:none; }

/* ═══ FOOTER ═════════════════════════════════════════════════════ */
.foot{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:1.4rem;
  padding:2.4rem var(--gut) 2.6rem;
  border-top:1px solid var(--hair);
  background:var(--pitch);
  font-size:var(--t-micro); letter-spacing:var(--track-mid);
  text-transform:uppercase; color:var(--bone-32);
}
.foot__name{ color:var(--bone-46); }
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.foot__nav a{ transition:color var(--slow) var(--ease); }
.foot__nav a:hover{ color:var(--cream); }

/* ═══ reveal states (JS adds .is-in) ═════════════════════════════ */
.js [data-reveal]{
  opacity:0; translate:0 22px;
  transition:opacity 1100ms var(--ease), translate 1100ms var(--ease);
}
.js [data-reveal].is-in{ opacity:1; translate:0 0; }

/* kinetic type — tracking settles as the line arrives.
   --ls carries each element's resting letter-spacing. */
.js [data-lines]{
  opacity:0; translate:0 14px;
  letter-spacing:calc(var(--ls, 0em) + .07em);
  transition:opacity 1300ms var(--ease), translate 1300ms var(--ease),
             letter-spacing 1600ms var(--ease);
}
.js [data-lines].is-in{ opacity:1; translate:0 0; letter-spacing:var(--ls, 0em); }

.kicker[data-lines]       { --ls:var(--track-wide); }
.hero__line[data-lines]   { --ls:.005em; }
.mission__statement span  { --ls:-.018em; }
.case__title[data-lines],
.close__title[data-lines] { --ls:-.02em; }

/* ═══ RESPONSIVE ═════════════════════════════════════════════════ */
@media (max-width:1024px){
  .pillars{ grid-template-columns:1fr; gap:clamp(3rem,7vh,4.5rem); }
  .pillar{ flex-direction:row; align-items:center; gap:2rem; }
  .pillar__frame{ flex:0 0 42%; aspect-ratio:1/1; }
  .pillar__text{ flex:1; }

  .story{ grid-template-columns:1fr; gap:clamp(2.5rem,6vh,4rem); }
  .story__media{ order:-1; }

  .case__grid{ grid-template-columns:repeat(2,1fr); }
  .case__item--lead{ grid-column:span 2; grid-row:span 1; aspect-ratio:16/9; }
}

@media (max-width:720px){
  :root{ --bay:clamp(4.5rem,11vh,7rem); }

  /* the big mark doesn't leave room for the nav beside it down here —
     let it wrap to its own line, and scale it down closer to the same
     visual weight relative to the nav that it has on desktop (a literal
     4x-nav size would swallow a 375px screen) */
  .topbar{ padding:1.1rem var(--gut); flex-wrap:wrap; row-gap:.5rem; }
  .topbar__name{ font-size:clamp(1.3rem,6.5vw,1.7rem); }
  .topbar__nav{ gap:1.1rem; }

  .hero{ min-height:92svh; }
  .hero__copy{ max-width:none; }
  /* the copy runs full width down here, so the cue drops its label —
     the falling hairline is enough */
  .cue__word{ display:none; }

  .ledger{ grid-template-columns:1fr; }
  .ledger__cell{ border-left:0; border-top:1px solid var(--hair); padding-block:1.8rem; }
  .ledger__cell:first-child{ border-top:0; }

  .pillar{ flex-direction:column; align-items:stretch; gap:1.3rem; }
  .pillar__frame{ flex:none; aspect-ratio:3/2; }
  .pillar__text p{ max-width:none; }

  .case__grid{ grid-template-columns:1fr; }
  .case__item,.case__item--lead{ grid-column:1/-1; grid-row:auto; aspect-ratio:4/3; }
  /* touch has no hover — the placard and its shadow just stay on */
  .case__item .placard,.hang .placard{ opacity:1; translate:0 0; }
  .case__item::after,.hang::after{ opacity:1; }
  .pillar__cta{ opacity:1; translate:0 0; }

  .wall__grid{ columns:1; }
  .wall__intro{ flex-direction:column; align-items:flex-start; gap:.8rem; }

  .form{ grid-template-columns:1fr; }
  .foot{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
}

@media (hover:none){
  .cursor{ display:none; }
}

/* ═══ REDUCED MOTION ═════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  .grain{ animation:none; }
  .cine__still{ opacity:0; }
  .cine__still.is-on{ opacity:1; scale:1; }
  .js [data-reveal],.js [data-lines]{ opacity:1; translate:0 0; letter-spacing:inherit; }
  .cursor{ display:none; }
  .curtain{ display:none; }
}