/* Halden & Vale — kitchen atelier
   Palette locked to 5 values. No accent colour anywhere. */

:root{
  --ink:      #0C0B0A;
  --ink-soft: #171614;
  --cream:    #F2EFE9;
  --cream-dim:#E4E0D7;
  --grey:     #8E877C;
  --hair:     rgba(242,239,233,.14);
  --hair-ink: rgba(12,11,10,.14);

  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gut: clamp(20px, 5vw, 64px);
  --bay: clamp(120px, 18vw, 240px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--cream);outline-offset:4px}

/* ---------- type ---------- */
.d1,.d2,.d3{font-family:var(--display);font-weight:300;line-height:.98;letter-spacing:-.015em}
.d1{font-size:clamp(3.4rem, 13vw, 8.5rem)}
.d2{font-size:clamp(2.6rem, 8.5vw, 5.2rem)}
.d3{font-size:clamp(1.9rem, 5.5vw, 3rem);line-height:1.08}

.eyebrow{
  font-size:.62rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--grey);
  font-weight:400;
}
.lede{font-size:clamp(1.02rem,2.4vw,1.22rem);color:var(--cream-dim);max-width:52ch;line-height:1.85}
.small{font-size:.83rem;color:var(--grey);line-height:1.8}

/* ---------- surfaces ---------- */
.bay{padding:var(--bay) var(--gut)}
.bay--tight{padding:calc(var(--bay)*.6) var(--gut)}
.light{background:var(--cream);color:var(--ink)}
.light .eyebrow,.light .small{color:#6E675C}
.light .lede{color:#3A3631}
.wrap{max-width:1240px;margin:0 auto}
.narrow{max-width:760px;margin:0 auto}

.rule{height:1px;background:var(--hair);border:0;margin:0}
.light .rule{background:var(--hair-ink)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);
  mix-blend-mode:difference;
}
.mark{
  font-family:var(--display);
  font-size:1.02rem;letter-spacing:.3em;text-transform:uppercase;
  color:#fff;
}
.mark small{display:block;font-family:var(--body);font-size:.5rem;letter-spacing:.3em;opacity:.6;margin-top:3px}
.menu{display:flex;gap:30px}
.menu a{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.72;transition:opacity .3s}
.menu a:hover,.menu a[aria-current]{opacity:1}
/* When the panel is open the nav must drop out of difference blending —
   a black panel differenced against the page renders as nothing. */
.nav.is-open{mix-blend-mode:normal}

@media(max-width:860px){
  .menu{
    gap:0;position:fixed;inset:0;z-index:65;
    background:var(--ink);
    flex-direction:column;align-items:flex-start;justify-content:center;
    padding:0 var(--gut);
    opacity:0;pointer-events:none;
    transition:opacity .45s cubic-bezier(.2,.7,.2,1);
  }
  .menu.open{opacity:1;pointer-events:auto}

  .menu a{
    font-family:var(--display);font-weight:300;
    font-size:clamp(2rem,9vw,2.9rem);line-height:1;
    letter-spacing:-.01em;text-transform:none;
    width:100%;padding:clamp(14px,2.6vh,22px) 0;
    border-bottom:1px solid var(--hair);
    opacity:0;transform:translateY(14px);
    color:var(--cream);
  }
  .menu a:last-child{border-bottom:0}
  .menu a[aria-current]{opacity:1}
  .menu a[aria-current]::after{
    content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--cream);vertical-align:middle;margin-left:14px;
  }
  .menu.open a{
    animation:menuIn .5s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .menu.open a:nth-child(1){animation-delay:.05s}
  .menu.open a:nth-child(2){animation-delay:.10s}
  .menu.open a:nth-child(3){animation-delay:.15s}
  .menu.open a:nth-child(4){animation-delay:.20s}
  .menu.open a:nth-child(5){animation-delay:.25s}
  .menu.open a:nth-child(6){animation-delay:.30s}
  .menu.open a:nth-child(7){animation-delay:.35s}
  @keyframes menuIn{to{opacity:.88;transform:none}}

  /* Burger becomes a cross while the panel is open. */
  .burger span{transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .25s}
  .nav.is-open .burger span:first-child{transform:translateY(5.5px) rotate(45deg)}
  .nav.is-open .burger span:last-child{transform:translateY(-5.5px) rotate(-45deg)}

  /* Stop the page scrolling behind the panel. */
  body.nav-locked{overflow:hidden}
}
.burger{display:none;width:26px;height:12px;position:relative;background:none;border:0;cursor:pointer}
.burger span{position:absolute;left:0;right:0;height:1px;background:#fff}
.burger span:first-child{top:0}.burger span:last-child{bottom:0}
@media(max-width:860px){.burger{display:block;z-index:70}}

/* ---------- hero ---------- */
.hero{position:relative;height:118svh;min-height:760px;display:flex;align-items:flex-end;overflow:hidden}
.hero__img{position:absolute;inset:0}
.hero__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,11,10,.55) 0%,rgba(12,11,10,.12) 40%,rgba(12,11,10,.9) 100%)}
.hero__img img{transform:scale(1.06);animation:drift 22s ease-out forwards}
@keyframes drift{to{transform:scale(1)}}
.hero__body{position:relative;padding:0 var(--gut) clamp(120px,20vh,220px);width:100%}
.hero .d1{margin:.18em 0 .3em}

.rise{opacity:0;transform:translateY(22px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.rise:nth-child(2){animation-delay:.12s}
.rise:nth-child(3){animation-delay:.24s}
.rise:nth-child(4){animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- signature: finishes ---------- */
.finishes{display:flex;gap:clamp(18px,6vw,58px);justify-content:center;flex-wrap:wrap;margin-top:64px}
.finish{background:none;border:0;cursor:pointer;text-align:center;font-family:inherit;color:inherit;width:96px}
.finish i{
  display:block;width:74px;height:74px;margin:0 auto 16px;border-radius:50%;
  border:1px solid var(--hair);position:relative;transition:border-color .45s;
}
.light .finish i{border-color:var(--hair-ink)}
.finish i::after{
  content:"";position:absolute;inset:20px;border-radius:50%;
  background:var(--sw);transition:inset .45s cubic-bezier(.2,.7,.2,1);
}
.finish:hover i::after,.finish[aria-pressed="true"] i::after{inset:9px}
.finish:hover i,.finish[aria-pressed="true"] i{border-color:currentColor}
.finish span{font-family:var(--display);font-size:1.02rem}
.finish em{display:block;font-style:normal;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-top:2px}

/* ---------- project cards ---------- */
.grid{display:grid;gap:clamp(28px,5vw,64px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}}

.card{display:block}
.card__img{aspect-ratio:4/5;overflow:hidden;background:var(--ink-soft)}
.card__img img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__img img{transform:scale(1.04)}
.card__meta{padding-top:22px}
.card__meta h3{font-family:var(--display);font-weight:300;font-size:1.75rem;line-height:1.1;margin:8px 0 6px}

/* ---------- editorial split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split__img{aspect-ratio:3/4;overflow:hidden;background:var(--ink-soft)}

/* ---------- list rows ---------- */
.rows{border-top:1px solid var(--hair)}
.light .rows{border-color:var(--hair-ink)}
.row{display:grid;grid-template-columns:64px 1fr;gap:clamp(20px,5vw,60px);
  padding:clamp(30px,5vw,52px) 0;border-bottom:1px solid var(--hair)}
.light .row{border-color:var(--hair-ink)}
.row__n{font-family:var(--display);font-size:1.5rem;color:var(--grey);line-height:1}
.row h3{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,3.6vw,2.1rem);margin-bottom:12px;line-height:1.15}
.row p{color:var(--cream-dim);max-width:60ch}
.light .row p{color:#3A3631}

/* ---------- quote ---------- */
.quote{border:1px solid var(--hair);padding:clamp(30px,5vw,52px)}
.light .quote{border-color:var(--hair-ink)}
.quote p{font-family:var(--display);font-size:clamp(1.3rem,3vw,1.7rem);font-style:italic;line-height:1.45;margin-bottom:24px}

/* ---------- buttons + form ---------- */
.btn{
  display:inline-block;padding:19px 44px;border:1px solid currentColor;
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  transition:background .4s,color .4s;
}
.btn:hover{background:var(--cream);color:var(--ink)}
.light .btn:hover{background:var(--ink);color:var(--cream)}

.field{margin-bottom:34px}
.field label{display:block;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.field input,.field textarea,.field select{
  width:100%;background:none;border:0;border-bottom:1px solid var(--hair);
  color:inherit;font-family:inherit;font-size:1.02rem;font-weight:300;
  padding:10px 0;transition:border-color .35s;
}
.light .field input,.light .field textarea,.light .field select{border-color:var(--hair-ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:currentColor}
.field textarea{resize:vertical;min-height:120px}
.field select option{background:var(--ink);color:var(--cream)}
.light .field select option{background:var(--cream);color:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--cream);padding:var(--bay) var(--gut) 44px}
.foot__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(30px,5vw,64px);margin-top:72px}
@media(max-width:760px){.foot__cols{grid-template-columns:1fr 1fr}}
.foot__cols h4{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);font-weight:400;margin-bottom:20px}
.foot__cols a,.foot__cols p{display:block;font-size:.9rem;color:var(--cream-dim);margin-bottom:11px}
.foot__cols a:hover{color:var(--cream)}
.foot__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  margin-top:72px;padding-top:26px;border-top:1px solid var(--hair);font-size:.72rem;color:var(--grey)}

.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ═══ hero depth stage ═══
   Pure CSS transforms — no WebGL, no canvas. Everything animated here is
   transform/opacity only, so it stays on the GPU compositor. */

.hero{perspective:1400px;perspective-origin:50% 45%}
.hero__stage{position:absolute;inset:-6%;transform-style:preserve-3d;will-change:transform}

.hero__img{
  position:absolute;inset:0;
  transform:translateZ(-180px) scale(1.16);
  transform-style:preserve-3d;
}
.hero__img img{
  transform:scale(1.04);
  animation:breathe 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes breathe{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to  {transform:scale(1.12) translate3d(-1.2%,-1%,0)}
}

/* Volumetric wash that shifts as the stage tilts — gives the flat photo
   the impression of a light source sitting in front of it. */
.hero__wash{
  position:absolute;inset:0;pointer-events:none;
  transform:translateZ(-60px) scale(1.06);
  background:
    radial-gradient(120% 80% at var(--gx,50%) var(--gy,38%),
      rgba(242,239,233,.16) 0%, rgba(242,239,233,0) 55%),
    linear-gradient(180deg,rgba(12,11,10,.62) 0%,rgba(12,11,10,.10) 42%,rgba(12,11,10,.94) 100%);
}

/* Hairline plane floating between photo and type — reads as a pane of glass. */
.hero__pane{
  position:absolute;left:var(--gut);right:var(--gut);bottom:22%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,239,233,.34),transparent);
  transform:translateZ(40px);
  opacity:0;animation:rise 1.6s .5s cubic-bezier(.2,.7,.2,1) forwards;
}

.hero__body{transform-style:preserve-3d}
.hero .eyebrow{transform:translateZ(70px)}
.hero .d1     {transform:translateZ(120px)}
.hero .lede   {transform:translateZ(70px)}

/* Type arrives as depth rather than a slide. */
.rise{animation-name:riseZ}
@keyframes riseZ{
  from{opacity:0;transform:translate3d(0,26px,-70px)}
  to  {opacity:1;transform:translateZ(var(--z,0px))}
}
.hero .eyebrow.rise,.hero .lede.rise{--z:70px}
.hero .d1.rise{--z:120px}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;width:1px;height:46px;
  background:linear-gradient(180deg,transparent,rgba(242,239,233,.5),transparent);
  transform:translateX(-50%) translateZ(50px);
}
.scroll-cue::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:var(--cream);
  animation:trickle 2.6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes trickle{0%{transform:translateY(-14px);opacity:0}
  30%{opacity:1}70%{opacity:1}100%{transform:translateY(46px);opacity:0}}

/* Project cards get a restrained version of the same idea. */
.card{perspective:1000px}
.card__img{transform-style:preserve-3d;will-change:transform;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:reduce){
  .hero__stage,.hero__img,.hero__wash,.card__img{transform:none!important}
  .hero__img img{animation:none;transform:scale(1.03)}
  .scroll-cue::after{animation:none}
}
@media (hover:none){
  /* Touch devices: keep the scroll parallax, drop pointer tilt. */
  .hero__pane{display:none}
}


/* ═══ long-form sections ═══ */

/* A held pause — one line of type in a large empty field. */
.hold{padding:clamp(140px,24vh,260px) var(--gut);text-align:center}
.hold p{font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,4.4vw,2.6rem);line-height:1.4;max-width:20ch;margin:0 auto}
.hold .eyebrow{margin-bottom:34px}

/* Full-bleed image band with its own parallax. */
.band{position:relative;height:clamp(420px,78vh,760px);overflow:hidden}
.band__img{position:absolute;inset:-14% 0;will-change:transform}
.band__img img{height:100%}
.band::after{content:"";position:absolute;inset:0;background:rgba(12,11,10,.34)}
.band__cap{position:absolute;left:var(--gut);bottom:clamp(28px,5vw,52px);z-index:2;
  max-width:34ch}
.band__cap h3{font-family:var(--display);font-weight:300;
  font-size:clamp(1.7rem,4.6vw,2.8rem);line-height:1.1;color:var(--cream);margin-top:10px}

/* Numbers, spaced out. */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,5vw,64px)}
@media(max-width:760px){.figs{grid-template-columns:1fr;gap:52px}}
.fig strong{display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(3.2rem,9vw,5.4rem);line-height:.9;margin-bottom:18px}
.fig p{color:var(--cream-dim);font-size:.92rem;max-width:30ch}
.light .fig p{color:#3A3631}

/* Slow horizontal wordmark strip. */
.strip{overflow:hidden;padding:clamp(46px,7vw,80px) 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.light .strip{border-color:var(--hair-ink)}
.strip__track{display:flex;gap:clamp(40px,7vw,96px);width:max-content;
  animation:slide 46s linear infinite}
.strip span{font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,3.6vw,2.3rem);white-space:nowrap;opacity:.4}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip__track{animation:none}}

/* Two detail images, offset. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.duo figure:last-child{margin-top:clamp(40px,10vw,140px)}
.duo .f-img{aspect-ratio:3/4;overflow:hidden;background:var(--ink-soft)}
.duo figcaption{padding-top:18px;font-size:.83rem;color:var(--grey);line-height:1.8;max-width:34ch}

/* Questions. */
.qa{border-top:1px solid var(--hair)}
.light .qa{border-color:var(--hair-ink)}
.qa details{border-bottom:1px solid var(--hair)}
.light .qa details{border-color:var(--hair-ink)}
.qa summary{list-style:none;cursor:pointer;padding:clamp(26px,4vw,38px) 0;
  font-family:var(--display);font-weight:300;font-size:clamp(1.25rem,3vw,1.7rem);
  display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:1.1rem;color:var(--grey);flex:none}
.qa details[open] summary::after{content:"–"}
.qa p{padding-bottom:clamp(26px,4vw,38px);color:var(--cream-dim);max-width:62ch}
.light .qa p{color:#3A3631}