/* ============================================================
   Shumake Studios — visual system
   Palette: editorial, earthy, tactile, slightly luxurious.
     — Olive Taupe foundation
     — Moss accent (pop emphasis, CTAs, italics, highlights)
     — Chartreuse interactive highlight
     — Espresso & Near Black to ground everything
   ============================================================ */

:root{
  /* — Ground: warm neutral canvas — */
  --bg: #F2F0E8;
  --panel: #EBE9DF;

  /* — Text — */
  --fg: #171512;         /* Near Black */
  --fg-soft: #5A5548;

  /* — Borders — */
  --line: #C4BFAE;

  /* — Foundation: large-area colors — */
  --olive-taupe: #77755A;

  /* — Accent: CTAs and focal points — */
  --moss: #7B842D;
  --on-accent: #F2F0E8;

  /* — Interactive highlights — */
  --chartreuse: #CECD75;

  /* — Dark sections — */
  --espresso: #432719;
  --on-dark: #F2F0E8;

  /* — Semantic aliases — */
  --accent: var(--moss);
  --accent-deep: var(--olive-taupe);

  /* Fixed light color for text overlaid on dark images — never changes */
  --on-overlay: #F2F0E8;

  /* Inverted "feature band" — always the OPPOSITE of the current theme so it
     provides contrast rhythm in both. Light theme → dark band. */
  --ink: #14120F;
  --on-ink: #EDEBE3;
  --ink-line: #3A352B;
  --ink-accent: #CECD75;   /* chartreuse: light, reads on the dark band */

  /* type — Archivo does the display + label heavy lifting, Work Sans for body */
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --grot:"Work Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* legacy alias: existing headings referenced --serif; now resolve to the grotesque display */
  --serif:var(--display);

  /* rhythm */
  --pad:clamp(18px,4vw,60px);
  --gap:clamp(28px,5vw,64px);
  --micro:11px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* dark preference */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#171512;
    --panel:#2A251F;
    --fg:#F2F0E8;
    --fg-soft:#A0998B;
    --line:#3A352D;
    --on-accent:#F2F0E8;
    --chartreuse:#CECD75;
    --moss:#8DA035;
    --olive-taupe:#77755A;
    --espresso:#432719;
    --accent:var(--moss);
    --accent-deep:var(--olive-taupe);
    /* feature band flips light so it still contrasts the dark page */
    --ink:#EDEBE3;
    --on-ink:#14120F;
    --ink-line:#C4BFAE;
    --ink-accent:#5C6B1E;   /* deep olive: dark, reads on the light band */
  }
}
:root[data-theme="dark"]{
  --bg:#171512;--panel:#2A251F;--fg:#F2F0E8;--fg-soft:#A0998B;--line:#3A352D;--on-overlay:#F2F0E8;
  --on-accent:#F2F0E8;
  --chartreuse:#CECD75;--moss:#8DA035;--olive-taupe:#77755A;--espresso:#432719;
  --accent:var(--moss);--accent-deep:var(--olive-taupe);
  --ink:#EDEBE3;--on-ink:#14120F;--ink-line:#C4BFAE;--ink-accent:#5C6B1E;
}
:root[data-theme="light"]{
  --bg:#F2F0E8;--fg:#171512;--fg-soft:#5A5548;--panel:#EBE9DF;--line:#C4BFAE;--on-overlay:#F2F0E8;
  --on-accent:#F2F0E8;
  --chartreuse:#CECD75;--moss:#7B842D;--olive-taupe:#77755A;--espresso:#432719;
  --accent:var(--moss);--accent-deep:var(--olive-taupe);
  --ink:#14120F;--on-ink:#EDEBE3;--ink-line:#3A352B;--ink-accent:#CECD75;
}

/* ---------- reset + base ---------- */
*{box-sizing:border-box;border-radius:0}
html,body{margin:0;padding:0;overflow-x:clip}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--grot);font-weight:400;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* utilities */
.u{font-family:var(--grot);text-transform:uppercase;font-size:var(--micro);letter-spacing:.16em;font-weight:500}
.serif{font-family:var(--serif)}
.tabular{font-variant-numeric:tabular-nums}

/* ==================================================
   NAV
   ================================================== */
.nav{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--bg) 68%,transparent);
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;
  padding:0 var(--pad);height:56px;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.nav .mark .m,.nav .mark .wm,.nav ul a,.nav .status{color:var(--fg)}
.nav.scrolled{
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  border-bottom-color:var(--line);
}
.nav .mark{
  display:flex;align-items:baseline;gap:9px;font-family:var(--serif);
}
.nav .mark .m{
  font-size:26px;line-height:1;font-weight:400;letter-spacing:-.02em;color:var(--fg);
}
.nav .mark .wm{
  font-family:var(--grot);font-size:9.5px;letter-spacing:.32em;font-weight:500;
  text-transform:uppercase;color:var(--fg);
}
.nav ul{
  display:flex;gap:26px;list-style:none;margin:0;padding:0;justify-self:center;
}
.nav ul a{position:relative;padding:2px 0;font-family:var(--grot);font-size:13px;text-transform:lowercase;letter-spacing:.02em;font-weight:500}
.nav .status{display:flex;align-items:center;gap:8px}
.nav .dot{
  width:7px;height:7px;background:var(--accent);border-radius:50%;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 0%,transparent)}
}
@media(max-width:820px){ .nav ul{display:none} }

/* scroll progress bar */
.scrollbar{
  position:fixed;top:0;left:0;height:2px;z-index:90;
  background:var(--accent);width:0%;
  pointer-events:none;transition:none;
}

/* ==================================================
   HERO — giant lowercase typographic statement
   ================================================== */
.hero-type{
  position:relative;min-height:calc(100vh - 56px);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(28px,5vw,72px) var(--pad) clamp(24px,4vw,48px);
  border-bottom:1px solid var(--line);background:var(--bg);overflow:hidden;
}
.hero-type .ht-inner{
  display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:clamp(28px,5vw,60px);
}
.hero-type .ht-eyebrow{
  font-family:var(--grot);font-size:clamp(10px,1vw,12px);
  letter-spacing:.24em;text-transform:uppercase;color:var(--fg-soft);
}
.hero-type .ht-title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(72px,19vw,300px);line-height:.82;letter-spacing:-.05em;
  text-transform:lowercase;margin:0;color:var(--fg);
  flex:1;display:flex;align-items:center;
}
.hero-type .ht-out{white-space:pre-line}
.hero-type .ht-caret{
  display:inline-block;width:.5ch;height:.72em;margin-left:.04em;
  background:var(--accent);transform:translateY(.06em);
  animation:caretBlink 1.05s step-end infinite;
  transition:opacity .6s var(--ease);
}
@keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}}
/* caret hidden before typing starts and after it settles */
.hero-type .ht-title:not(.typing):not(.typed) .ht-caret,
.hero-type .ht-title.done .ht-caret{opacity:0;animation:none}
.hero-type .ht-foot{
  display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,60px);
  align-items:end;
}
@media(max-width:720px){.hero-type .ht-foot{grid-template-columns:1fr;align-items:start}}
.hero-type .ht-sub{
  font-family:var(--grot);font-size:clamp(15px,1.5vw,19px);line-height:1.45;
  color:var(--fg);max-width:42ch;margin:0;
}
.hero-type .ht-cta{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--grot);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg);border:1px solid var(--fg);padding:16px 26px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.hero-type .ht-cta:hover{background:var(--fg);color:var(--bg)}
.hero-type .ht-cta span{font-size:14px;transition:transform .3s var(--ease)}
.hero-type .ht-cta:hover span{transform:translate(3px,-3px)}

/* Ken Burns collage — full-bleed motion band */
.hero-collage{
  position:relative;height:min(72vh,760px);min-height:420px;
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  border-bottom:1px solid var(--line);overflow:hidden;background:var(--panel);
}
.hero-collage .hc-left{position:relative;overflow:hidden}
.hero-collage .hc-right{display:grid;grid-template-rows:1fr 1fr;border-left:1px solid var(--line)}
.hero-collage .hc-right>*{position:relative;overflow:hidden}
.hero-collage .hc-right>*+*{border-top:1px solid var(--line)}
@media(max-width:820px){
  .hero-collage{grid-template-columns:1fr;height:auto}
  .hero-collage .hc-right{grid-template-rows:none;grid-template-columns:1fr 1fr;border-left:0;border-top:1px solid var(--line);height:32vh}
  .hero-collage .hc-right>*+*{border-top:0;border-left:1px solid var(--line)}
  .hero-collage .hc-left{height:52vh}
}

/* Ken Burns crossfade stack — first image shows on load, others rotate in */
.kb{position:absolute;inset:0;background:var(--panel)}
.kb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;animation:kbCycle var(--kb-dur,18s) var(--ease) infinite;
  will-change:opacity,transform;
}
.kb img:nth-child(1){animation-delay:0s}
.kb img:nth-child(2){animation-delay:calc(var(--kb-dur,18s) / -3 * 2)}
.kb img:nth-child(3){animation-delay:calc(var(--kb-dur,18s) / -3)}
@keyframes kbCycle{
  0%   {opacity:0;transform:scale(1.02)}
  5%   {opacity:1}
  33%  {opacity:1;transform:scale(1.16)}
  38%  {opacity:0;transform:scale(1.16)}
  100% {opacity:0;transform:scale(1.16)}
}

/* ==================================================
   MARQUEE — client strip
   ================================================== */
.marquee{
  overflow:hidden;border-bottom:1px solid var(--line);background:var(--panel);
  padding:16px 0;
}
.marquee .track{
  display:flex;gap:44px;width:max-content;
  animation:marquee 26s linear infinite;
  will-change:transform;
}
.marquee span{
  font-family:var(--display);font-weight:500;font-size:clamp(20px,2.4vw,30px);
  color:var(--fg);white-space:nowrap;letter-spacing:-.02em;text-transform:lowercase;
}
.marquee span::after{content:" /";color:var(--accent);padding-left:44px}
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ==================================================
   STATEMENT — studio copy
   ================================================== */
.statement{
  padding:clamp(70px,10vw,140px) var(--pad);
  display:grid;
  grid-template-columns:auto minmax(280px,520px) minmax(320px,720px);
  gap:clamp(30px,3vw,60px);
  justify-content:center;align-items:start;
  border-bottom:1px solid var(--line);
}
.statement .label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--grot);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fg-soft);white-space:nowrap;padding-top:4px;
}
.statement .body{max-width:520px}
.statement p{
  margin:0;font-family:var(--serif);
  font-size:clamp(26px,3.4vw,44px);line-height:1.14;letter-spacing:-.022em;
  text-wrap:balance;
}
.statement p em{font-style:italic;color:var(--accent)}
.statement p+p{margin-top:.7em}
.statement .support{
  font-family:var(--grot);font-size:15px;line-height:1.65;color:var(--fg-soft);
  max-width:56ch;margin-top:36px;letter-spacing:0;
}
.statementFig{
  margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--panel);align-self:start;width:100%;
}
.statementFig img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform 8s var(--ease);
}
.statementFig:hover img{transform:scale(1.05)}
.statementFig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;color:var(--on-overlay);
  font-family:var(--grot);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(0,0,0,0));
}
@media(max-width:1000px){
  .statement{grid-template-columns:auto 1fr}
  .statementFig{grid-column:1/-1;justify-self:start;margin-top:20px;max-width:none;aspect-ratio:16/10}
  .statementFig img{object-position:center 20%}
}
@media(max-width:720px){
  .statement{grid-template-columns:1fr}
  .statement .label{writing-mode:horizontal-tb;transform:none}
}

/* ==================================================
   SECTION HEADS
   ================================================== */
.sec{padding:0 var(--pad);border-bottom:1px solid var(--line)}
.secHead{
  display:flex;justify-content:space-between;align-items:baseline;gap:22px;
  padding:22px 0 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.secHead .no{color:var(--fg-soft)}
.secHead h2{
  margin:0;font-family:var(--grot);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;
}

/* giant lowercase display head — Maren Aldo scale */
.slab{
  font-family:var(--display);
  font-size:clamp(52px,10vw,150px);line-height:.82;letter-spacing:-.05em;
  text-transform:lowercase;font-weight:600;margin:0;
}

/* ==================================================
   SPOTLIGHT — editorial highlight strip
   ================================================== */
.spotlight{padding:0 var(--pad);border-bottom:1px solid var(--line)}
.spotlightHead{
  display:flex;justify-content:space-between;align-items:center;
  padding:clamp(28px,4vw,48px) 0 clamp(20px,3vw,28px);
  border-bottom:1px solid var(--line);
}
.spotlightHead .label{
  font-family:var(--grot);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-soft)
}
.spotlightCta{
  font-family:var(--grot);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg);border-bottom:1px solid var(--accent);padding-bottom:2px;transition:color .25s var(--ease);
}
.spotlightCta:hover{color:var(--accent)}
.spotlightGrid{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0;align-items:stretch;
}
.sCard{
  position:relative;overflow:hidden;color:inherit;isolation:isolate;
  display:block;height:100%;
}
.sCard-lead{aspect-ratio:4/5}
.sStack{
  display:grid;grid-template-rows:1fr 1fr;gap:0;
  border-left:1px solid var(--line);min-height:0;
}
.sStack .sCard + .sCard{border-top:1px solid var(--line)}
@media(max-width:720px){
  .spotlightGrid{grid-template-columns:1fr}
  .sCard-lead{aspect-ratio:4/5}
  .sStack{border-left:0;border-top:1px solid var(--line);grid-template-rows:none}
  .sStack .sCard{aspect-ratio:4/3}
}
.sCard figure{margin:0;height:100%;overflow:hidden;background:var(--panel)}
.sCard figure img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .4s var(--ease);
  filter:grayscale(12%) contrast(.98) brightness(.98);
}
.sCard:hover figure img{transform:scale(1.06);filter:grayscale(0%) contrast(1) brightness(1.06)}
.sMeta{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,2.5vw,36px);
  background:linear-gradient(0deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.3) 35%,transparent 60%);
  pointer-events:none;
}
.sMeta .sBadge{
  font-family:var(--grot);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-overlay) 70%,transparent);
}
.sMeta h3{
  margin:4px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3vw,38px);line-height:1.05;letter-spacing:-.02em;
  color:var(--on-overlay);
}

/* ==================================================
   WORKS — horizontal snap-scroll carousel
   ================================================== */
.works{padding:0 var(--pad)}
.worksHead{
  padding:clamp(30px,5vw,64px) 0 clamp(24px,3vw,40px);
  display:grid;grid-template-columns:1fr auto;gap:22px 40px;align-items:end;
  border-bottom:1px solid var(--line);
}
.worksHead .slab{max-width:14ch}
.carouselNav{display:flex;align-items:center;gap:22px;padding-bottom:10px}
.carouselNav .progress{
  font-family:var(--grot);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-soft);font-variant-numeric:tabular-nums;
}
.cBtnGroup{display:flex;gap:0;border:1px solid var(--line)}
.cBtn{
  width:44px;height:44px;background:transparent;border:0;color:var(--fg);
  display:grid;place-items:center;cursor:pointer;font-size:14px;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.cBtn+.cBtn{border-left:1px solid var(--line)}
.cBtn:hover:not(:disabled){background:var(--olive-taupe);color:var(--on-overlay)}
.cBtn:disabled{opacity:.3;cursor:not-allowed}

.carouselWrap{margin:0 calc(var(--pad) * -1);overflow:hidden;position:relative}

.carousel{
  display:flex;gap:0;height:100vh;min-height:500px;
  padding:clamp(28px,4vw,48px) var(--pad);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.carousel::-webkit-scrollbar{display:none}
.carousel:focus{outline:none}

.card{
  flex:0 0 clamp(380px,48vw,680px);
  scroll-snap-align:start;scroll-margin-left:var(--pad);
  color:inherit;position:relative;overflow:hidden;
  height:100%;display:block;
  margin-right:clamp(1px,1.2vw,9px);
  transition:transform .5s var(--ease);
  border-radius:2px;
}
.card.wide{flex-basis:clamp(500px,62vw,840px)}
.card figure{
  margin:0;overflow:hidden;background:var(--panel);
  height:100%;position:relative;
}
.card figure img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease),filter .5s var(--ease);
  filter:grayscale(15%) contrast(.98);
}
.card:hover figure img,.card:focus-visible figure img{
  transform:scale(1.05);filter:grayscale(0%) contrast(1);
}

/* Full-bleed image with overlaid title */
.cardMeta{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,3vw,44px);
  background:linear-gradient(
    0deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.42) 30%,
    transparent 60%
  );
  pointer-events:none;
  gap:4px;
  transition:opacity .45s var(--ease);
}
.cLbl{
  font-family:var(--grot);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-overlay) 70%,transparent);
}
.card h3{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(22px,2.6vw,36px);line-height:1.05;letter-spacing:-.02em;
  text-wrap:balance;color:var(--on-overlay);
}
.cKind{
  font-family:var(--grot);font-size:12.5px;
  color:color-mix(in srgb,var(--on-overlay) 75%,transparent);
  line-height:1.5;letter-spacing:0;margin-top:2px;
}


@media(max-width:720px){
  .worksHead{grid-template-columns:1fr}
  .carousel{height:80vh;min-height:360px}
  .card{flex-basis:min(82vw,400px);margin-right:clamp(2px,1.5vw,10px)}
  .card.wide{flex-basis:min(82vw,400px)}
  .cardMeta{padding:clamp(18px,4vw,32px)}
  .card h3{font-size:clamp(20px,5vw,26px)}
}

/* ==================================================
   WORK INDEX (legacy list, unused) — kept for reference
   ================================================== */
.work{padding:0 var(--pad) 0;border-bottom:1px solid var(--line)}
.workTitle{
  padding:clamp(30px,5vw,64px) 0 clamp(20px,3vw,40px);
  display:grid;grid-template-columns:1fr auto;gap:22px 32px;align-items:end;
  border-bottom:1px solid var(--line);
}
.workTitle .slab{grid-column:1/2}
.workTitle .count{
  grid-column:2/3;font-family:var(--grot);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-soft);padding-bottom:12px;
  white-space:nowrap;text-align:right;line-height:1.55;
}
@media(max-width:820px){
  .workTitle{grid-template-columns:1fr}
  .workTitle .count{grid-column:1/2;text-align:left}
}

.index{list-style:none;margin:0;padding:0}
.row{
  position:relative;isolation:isolate;cursor:pointer;
  display:grid;grid-template-columns:76px minmax(0,2fr) minmax(0,1.6fr) 74px 60px;
  align-items:center;gap:22px;
  padding:18px 8px;border-bottom:1px solid var(--line);
  transition:color .4s var(--ease);
}
.row:last-child{border-bottom:0}
.row .thumb{
  width:76px;height:76px;overflow:hidden;background:var(--panel);
  position:relative;
}
.row .thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),filter .4s var(--ease);
  filter:grayscale(35%) contrast(.98);
}
.row:hover .thumb img,.row:focus-within .thumb img{transform:scale(1.08);filter:none}
.row .title{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);line-height:1;letter-spacing:-.02em;font-weight:400}
.row .kind{font-family:var(--grot);font-size:12.5px;letter-spacing:.02em;color:var(--fg-soft);line-height:1.4}
.row .badge{
  justify-self:start;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);padding:4px 8px;color:var(--fg-soft);white-space:nowrap;
}
.row .yr{text-align:right;font-family:var(--grot);font-size:12px;letter-spacing:.08em;color:var(--fg-soft);font-variant-numeric:tabular-nums}
.row::before{
  content:"";position:absolute;inset:0;background:var(--sw,var(--accent));
  transform:scaleY(0);transform-origin:bottom;z-index:-1;
  transition:transform .38s var(--ease);
}
.row:hover::before,.row:focus-within::before{transform:scaleY(1)}
.row:hover,.row:focus-within{color:var(--swText,var(--on-accent))}
.row:hover .kind,.row:hover .yr,.row:hover .badge,
.row:focus-within .kind,.row:focus-within .yr,.row:focus-within .badge{color:inherit;opacity:.85}
.row:hover .badge,.row:focus-within .badge{border-color:currentColor}
.row .arrow{display:none}
@media(max-width:820px){
  .row{grid-template-columns:60px 1fr auto;gap:14px 16px;padding:14px 8px}
  .row .thumb{width:60px;height:60px}
  .row .title{font-size:20px}
  .row .kind{grid-column:2/3}
  .row .badge{grid-column:2/4;grid-row:3/4;justify-self:start;margin-top:4px}
  .row .yr{grid-column:3/4;grid-row:1/2}
  .row .arrow{display:none}
}

.workFooter{
  display:flex;justify-content:space-between;align-items:center;gap:22px;
  padding:26px 8px;color:var(--fg-soft);font-size:12px;letter-spacing:.06em;text-transform:uppercase;flex-wrap:wrap;
}
.workFooter a{color:var(--fg);border-bottom:1px solid var(--accent);padding-bottom:2px}
.workFooter a:hover{color:var(--accent)}

/* ==================================================
   SERVICES — 4 packages + à la carte
   ================================================== */
.services{padding:0 var(--pad);border-bottom:1px solid var(--line)}
.servicesHead{
  padding:clamp(30px,5vw,64px) 0 clamp(20px,3vw,40px);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:end;
  border-bottom:1px solid var(--line);
}
@media(max-width:820px){.servicesHead{grid-template-columns:1fr}}
.servicesHead .lede{
  font-family:var(--serif);font-size:clamp(20px,2.3vw,28px);line-height:1.25;
  letter-spacing:-.015em;max-width:38ch;margin:0;
}
.servicesHead .lede em{font-style:italic;color:var(--accent)}

.packs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-bottom:1px solid var(--line);
}
@media(max-width:1000px){.packs{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.packs{grid-template-columns:1fr}}
.pack{
  position:relative;padding:30px 24px 28px;background:var(--bg);
  display:flex;flex-direction:column;gap:14px;text-align:left;
  border-right:1px solid var(--line);cursor:pointer;isolation:isolate;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.pack:hover:not(.on){background:var(--panel)}
.pack:last-child{border-right:0}
@media(max-width:1000px){
  .pack:nth-child(2){border-right:0}
  .pack:nth-child(1),.pack:nth-child(2){border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
  .pack{border-right:0;border-bottom:1px solid var(--line)}
  .pack:last-child{border-bottom:0}
}
.pack .pn{font-family:var(--grot);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-soft)}
.pack .pt{font-family:var(--serif);font-size:26px;line-height:1;letter-spacing:-.02em;font-weight:400}
.pack .pp{font-family:var(--grot);font-size:24px;letter-spacing:-.01em;color:var(--accent);font-weight:500}
.pack:hover:not(.on) .pp{color:var(--fg)}
.pack ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--fg-soft);line-height:1.45;flex:1}
.pack ul li{padding-left:14px;position:relative}
.pack ul li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:1px;background:var(--fg-soft)}
.pack .pbtn{
  align-self:flex-start;margin-top:6px;background:none;border:0;color:var(--fg);cursor:pointer;
  font-family:var(--grot);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 0;position:relative;
}
.pack .pbtn::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;
  transition:right .35s var(--ease);
}
.pack .pbtn:hover::after{right:50%}
.pack.on{background:var(--olive-taupe);color:var(--on-overlay)}
.pack.on .pn,.pack.on ul{color:color-mix(in srgb,var(--on-overlay) 72%,transparent)}
.pack.on ul li::before{background:color-mix(in srgb,var(--on-overlay) 60%,transparent)}
.pack.on .pp{color:color-mix(in srgb,var(--chartreuse) 78%,var(--on-overlay))}
.pack.on .pbtn{color:var(--on-overlay)}

.alacarte{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
}
@media(max-width:820px){.alacarte{grid-template-columns:1fr}}
.acCol{padding:26px 0;border-right:1px solid var(--line)}
.acCol:last-child{border-right:0}
@media(max-width:820px){.acCol:first-child{border-right:0;border-bottom:1px solid var(--line)}}
.acCol h3{margin:0 24px 14px;font-family:var(--grot);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-soft);font-weight:500}
.acCol dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:0}
.acCol dt,.acCol dd{padding:9px 24px;border-top:1px solid var(--line);font-size:14px;margin:0;letter-spacing:0}
.acCol dt{font-family:var(--grot);text-transform:uppercase;letter-spacing:.06em;font-size:12.5px}
.acCol dd{font-variant-numeric:tabular-nums;text-align:right;color:var(--fg-soft)}
.acCol dd b{color:var(--fg);font-weight:500;color:inherit}

/* ==================================================
   BOOKING — package deposit / consult calendar
   ================================================== */
.book{padding:0 var(--pad);border-bottom:1px solid var(--line);background:var(--bg)}
.bookTop{
  padding:clamp(30px,5vw,64px) 0 clamp(20px,3vw,40px);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:end;
  border-bottom:1px solid var(--line);
}
@media(max-width:820px){.bookTop{grid-template-columns:1fr}}
.bookTop p{margin:0;font-family:var(--serif);font-size:clamp(20px,2.3vw,28px);line-height:1.25;letter-spacing:-.015em;max-width:36ch}

.bookGrid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;
}
@media(max-width:900px){.bookGrid{grid-template-columns:1fr}}
.bookLeft{padding:28px 30px 30px 0;border-right:1px solid var(--line)}
.bookRight{padding:28px 0 30px 30px}
@media(max-width:900px){
  .bookLeft{border-right:0;border-bottom:1px solid var(--line);padding:28px 0 30px}
  .bookRight{padding:28px 0 30px}
}

.formRow{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.formRow label{font-family:var(--grot);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft)}
.formRow input,.formRow select,.formRow textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 0;font-family:var(--grot);font-size:15px;color:var(--fg);
  transition:border-color .25s var(--ease);
}
.formRow input:focus,.formRow select:focus,.formRow textarea:focus{
  outline:0;border-bottom-color:var(--accent);
}
.formRow textarea{resize:vertical;min-height:70px}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:520px){.form2{grid-template-columns:1fr}}

.summary{
  margin-top:4px;background:var(--panel);
  border:1px solid var(--line);
}
.sLine{
  display:grid;grid-template-columns:1fr auto;gap:14px;padding:11px 15px;
  border-bottom:1px solid var(--line);font-size:13.5px;
}
.sLine:last-of-type{border-bottom:0}
.sLine dt{margin:0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);padding-top:3px}
.sLine dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.sLine.total{background:var(--espresso);color:var(--on-overlay)}
.sLine.total dt{color:color-mix(in srgb,var(--on-overlay) 60%,transparent)}
.sLine.total dd{color:color-mix(in srgb,var(--chartreuse) 80%,var(--on-overlay));font-size:20px;letter-spacing:-.01em}

.cta{
  width:100%;background:var(--accent);color:var(--on-accent);border:0;cursor:pointer;
  padding:18px;font-family:var(--grot);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.cta:hover:not(:disabled){background:var(--accent-deep);transform:translateY(-1px)}
.cta:disabled{background:var(--panel);color:var(--fg-soft);cursor:not-allowed}
.note{font-size:11.5px;color:var(--fg-soft);line-height:1.55;margin:14px 0 0;letter-spacing:0}

/* consultation toggle */
.mode{
  display:flex;border:1px solid var(--line);margin-bottom:22px;
}
.mode button{
  flex:1;background:none;border:0;padding:12px 10px;cursor:pointer;
  font-family:var(--grot);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.mode button[aria-pressed="true"]{background:var(--olive-taupe);color:var(--on-overlay)}

/* mini calendar (consult call) */
.calTop{display:flex;align-items:center;justify-content:space-between;padding:0 0 12px}
.calTop .mo{font-family:var(--grot);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.navBtn{background:none;border:1px solid var(--line);color:inherit;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;font-size:11px}
.navBtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.navBtn:disabled{opacity:.3;cursor:not-allowed}
.dow,.cgrid{display:grid;grid-template-columns:repeat(7,1fr)}
.dow div{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);padding:6px 0;text-align:center}
.day{aspect-ratio:1/.85;border:0;background:none;color:inherit;font:inherit;cursor:pointer;display:grid;place-items:center;font-size:12.5px;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 .5px var(--line);position:relative}
.day.mute{color:transparent;cursor:default}
.day.off{color:var(--fg-soft);opacity:.32;cursor:not-allowed;text-decoration:line-through}
.day:not(.off):not(.mute):hover{background:var(--panel)}
.day.on{background:var(--accent);color:var(--on-accent)}
.day.today::after{content:"";position:absolute;bottom:5px;width:3px;height:3px;background:var(--accent)}
.day.on.today::after{background:var(--on-accent)}
.slots{display:flex;flex-wrap:wrap;gap:6px;padding:14px 0 0}
.slot{background:none;border:1px solid var(--line);color:inherit;font:inherit;cursor:pointer;padding:7px 11px;font-size:11.5px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.slot:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.slot.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ==================================================
   ABOUT MICAH
   ================================================== */
.about{
  padding:clamp(60px,8vw,120px) var(--pad);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:clamp(36px,5vw,68px);
}
.about .fig{
  position:relative;width:100%;max-width:min(900px,90vw);aspect-ratio:4/5;
  background:var(--panel);overflow:hidden;
}
.about .fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(10%)}
.about .fig .cap{
  position:absolute;bottom:0;left:0;right:0;padding:14px 20px;
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);color:var(--on-overlay);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}
.aboutBody{width:100%;max-width:720px}
.aboutBody h3{
  margin:0 0 26px;font-family:var(--serif);font-size:clamp(30px,4vw,54px);
  line-height:1.02;letter-spacing:-.025em;font-weight:400;max-width:18ch;text-wrap:balance;
}
.aboutBody h3 em{font-style:italic;color:var(--accent)}
.aboutBody p{margin:0 0 16px;font-family:var(--grot);font-size:15px;line-height:1.65;color:var(--fg-soft)}
.aboutBody .creds{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 24px;margin-top:38px;
}
.aboutBody .creds div{border-top:1px solid var(--line);padding:14px 0}
.aboutBody .creds dt{font-family:var(--grot);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);margin:0 0 4px}
.aboutBody .creds dd{margin:0;font-size:13.5px;letter-spacing:-.005em}

/* ==================================================
   FOOTER
   ================================================== */
.foot{padding:var(--pad);background:var(--espresso);color:var(--on-dark);display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px;align-items:start}
@media(max-width:720px){.foot{grid-template-columns:1fr}}
.foot .big{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,40px);line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;max-width:16ch}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px}
.foot .col h4{margin:0 0 12px;font-family:var(--grot);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--on-dark) 60%,transparent);font-weight:500}
.foot .col a{position:relative}
.foot .col a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:var(--chartreuse);transition:right .3s var(--ease);
}
.foot .col a:hover::after{right:0}
.foot .col a:hover{color:var(--chartreuse)}
.footBase{padding:16px var(--pad);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:color-mix(in srgb,var(--on-dark) 60%,transparent);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid color-mix(in srgb,var(--on-dark) 16%,transparent)}

/* ==================================================
   REVEAL BREAK — full-bleed image pins, next section
   rises over it like a curtain. Classy, not distracting.
   ================================================== */
.rb-wrap{position:relative}
.rb-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;z-index:0;
  background:var(--panel);
}
.rb-pin img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(10%) contrast(.98);
  transform:scale(1.04);
}
.rb-pin .rb-cap{
  position:absolute;left:0;bottom:0;padding:var(--pad);z-index:2;
  color:var(--on-overlay);font-family:var(--grot);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 16px rgba(0,0,0,.4);
}
/* the section that rides up over the pinned image */
.rb-over{position:relative;z-index:1;background:var(--bg)}

/* ==================================================
   MOTION — reveal on scroll
   ================================================== */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:.04s}
.stag.in>*:nth-child(2){transition-delay:.12s}
.stag.in>*:nth-child(3){transition-delay:.20s}
.stag.in>*:nth-child(4){transition-delay:.28s}
.stag.in>*:nth-child(5){transition-delay:.36s}
.stag.in>*:nth-child(6){transition-delay:.44s}
.stag.in>*:nth-child(7){transition-delay:.52s}
.stag.in>*:nth-child(8){transition-delay:.60s}
.stag.in>*:nth-child(9){transition-delay:.68s}

/* Note: motion runs on all devices regardless of the OS "reduce motion"
   setting — a deliberate brand choice for full desktop/mobile parity. */