@view-transition{navigation:auto}

/* Layout: one long page, each series gets its own full-bleed colour band (Forest Night, Bone, Ink) between Stone sections; olive appears once per screen. Single committed light brand look. */
:root{
  --stone:#D4C7BE; --ink:#1D1C1C; --bone:#F1ECE6; --mushroom:#8C7B6F; --soft:#5E534C; --rule:#B8AAA0;
  --mist:#E1E3D1; --sage:#C2C8AB; --olive:#48502B; --olive-deep:#363B20; --forest:#252916;
  --f-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --wm:url("/assets/logos/kumi-wordmark.svg");
  --k:url("/assets/logos/kumi-k.svg");
  --ssw:url("/assets/logos/second-shift-wordmark.svg");
  --ssm:url("/assets/logos/second-shift-mark.svg");
  --gth:url("/assets/logos/the-gathering-wordmark.svg");
  --ddw:url("/assets/logos/dough-diaries-wordmark.svg");
  --dds:url("/assets/logos/dough-diaries-seal.svg");
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.mask{-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:currentColor}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-body);font-weight:600;font-size:15px;padding:13px 22px;border:1px solid transparent;text-decoration:none;cursor:pointer;line-height:1.1;transition:background .2s,color .2s,transform .2s}
.btn-olive{background:var(--olive);color:var(--bone)}
.btn-olive:hover{background:var(--olive-deep)}
.btn-line{border-color:currentColor;background:transparent}
.btn-line:hover{background:currentColor}
.btn-line:hover span{color:var(--hover-ink,var(--stone))}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--stone);border-bottom:1px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;gap:28px;padding-block:14px}
.nav .logo{width:92px;aspect-ratio:2937/850;-webkit-mask-image:var(--wm);mask-image:var(--wm);color:var(--ink)}
.nav ul{display:flex;gap:24px;list-style:none;margin:0 0 0 auto;padding:0;font-size:15px}
.nav ul a{text-decoration:none}
.nav ul a:hover{text-decoration:underline;text-underline-offset:4px}
.nav .btn{padding:10px 16px;font-size:14px}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,56px);padding-block:clamp(48px,8vw,104px) clamp(48px,7vw,88px);align-items:center}
.hero-copy{display:grid;gap:26px;min-width:0}
.hero h1{font-family:var(--f-display);font-size:clamp(56px,9.5vw,128px);line-height:.92;letter-spacing:-.02em}
.hero h1 em{color:var(--olive)}
.hero .lede{font-size:clamp(17px,1.6vw,20px);max-width:42ch}
.hero .row{display:flex;flex-wrap:wrap;gap:12px}
.hero-art{position:relative;background:var(--olive);aspect-ratio:4/5;display:grid;place-items:center;max-width:100%}
.hero-art .k{width:62%;aspect-ratio:3247/3280;-webkit-mask-image:var(--k);mask-image:var(--k);color:var(--stone);transition:transform .8s cubic-bezier(.3,1.6,.5,1)}
.hero-art:hover .k{transform:rotate(-8deg) scale(1.03)}
.sticker{position:absolute;top:18px;right:-14px;width:88px;height:88px;border-radius:50%;background:var(--sage);color:var(--forest);display:grid;place-items:center;text-align:center;transform:rotate(12deg);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;line-height:1.2}
.sticker b{display:block;font-family:var(--f-display);font-weight:400;font-size:30px;letter-spacing:0;line-height:1}
.hero-art .cap{position:absolute;left:16px;bottom:14px;color:var(--sage)}

/* ticker */
.ticker{border-block:1px solid var(--ink);overflow:hidden;background:var(--bone)}
.ticker .track{display:flex;gap:40px;padding-block:14px;white-space:nowrap;width:max-content;animation:tick 40s linear infinite}
.ticker span{font-family:var(--f-display);font-size:24px;font-style:italic}
.ticker i{font-style:normal;color:var(--olive)}
@keyframes tick{to{transform:translateX(-50%)}}

/* intro */
.intro .wrap{padding-block:clamp(56px,8vw,96px);display:grid;grid-template-columns:1fr 2fr;gap:32px}
.intro h2{font-family:var(--f-display);font-size:clamp(32px,4vw,48px);line-height:1.05}
.intro p{font-size:19px;max-width:52ch}
.intro .cols{display:grid;gap:18px;min-width:0}

/* series bands */
.series{padding-block:clamp(56px,8vw,104px)}
.series .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
.series .id{display:grid;gap:22px;align-content:start;min-width:0}
.series .id .label{opacity:.8}
.series h3{font-family:var(--f-display);font-size:clamp(36px,4.6vw,60px);line-height:1}
.series .body{display:grid;gap:22px;min-width:0}
.series .body p{max-width:54ch}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid;border-bottom:1px solid}
.facts div{padding:14px 12px 14px 0;display:grid;gap:2px;min-width:0}
.facts div+div{padding-left:12px;border-left:1px solid}
.facts b{font-family:var(--f-display);font-weight:400;font-size:30px;line-height:1.1}
.facts span{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}

.s-shift{background:var(--forest);color:var(--bone);--hover-ink:var(--forest)}
.s-shift .facts,.s-shift .facts div{border-color:#4A5130}
.s-shift .ssw{width:min(360px,100%);aspect-ratio:3271/665;-webkit-mask-image:var(--ssw);mask-image:var(--ssw);color:var(--bone)}
.s-shift .ssm{width:64px;aspect-ratio:944/1093;-webkit-mask-image:var(--ssm);mask-image:var(--ssm);color:var(--sage)}
.s-shift .label,.s-shift .facts span{color:var(--sage)}
.quote{border-left:2px solid var(--sage);padding-left:18px;font-family:var(--f-display);font-style:italic;font-size:24px;line-height:1.3;max-width:34ch}

.s-gather{background:var(--bone);color:var(--ink);--hover-ink:var(--bone)}
.s-gather .facts,.s-gather .facts div{border-color:var(--rule)}
.s-gather .gth{width:min(340px,100%);aspect-ratio:3972/1453;-webkit-mask-image:var(--gth);mask-image:var(--gth);color:var(--ink)}
.s-gather .label{color:var(--soft)}
.venue{display:flex;gap:16px;align-items:center;background:var(--mist);padding:16px 18px;max-width:520px}
.venue .pin{flex:none;width:44px;height:44px;border-radius:50%;background:var(--olive);color:var(--bone);display:grid;place-items:center;font-family:var(--f-mono);font-size:12px}
.venue div{display:grid;min-width:0}
.venue b{font-weight:600}
.venue span{font-size:14px;color:var(--soft)}

.s-dough{background:var(--ink);color:var(--stone);--hover-ink:var(--ink)}
.s-dough .ddw{width:min(340px,100%);aspect-ratio:3191/860;-webkit-mask-image:var(--ddw);mask-image:var(--ddw);color:var(--stone)}
.s-dough .dds{width:76px;aspect-ratio:1219/1228;-webkit-mask-image:var(--dds);mask-image:var(--dds);color:var(--sage);animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.s-dough .label{color:var(--sage)}
.batches{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.batch{border:1px solid #3A3736;padding:20px;display:grid;gap:10px;align-content:start;min-width:0}
.batch .no{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mushroom)}
.batch h4{margin:0;font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.05;color:var(--bone)}
.batch p{font-size:15px}
.batch .tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--sage);color:var(--forest)}
.tag.dim{background:transparent;color:var(--stone);border:1px solid #4A4645}
.invite{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.invite small{font-family:var(--f-mono);font-size:12px;color:var(--mushroom);letter-spacing:.04em}

/* how */
.how .wrap{padding-block:clamp(56px,8vw,96px);display:grid;gap:36px}
.how h2{font-family:var(--f-display);font-size:clamp(32px,4vw,48px);line-height:1.05}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.step{padding:20px 20px 4px 0;display:grid;gap:10px;align-content:start;min-width:0}
.step+.step{padding-left:20px;border-left:1px solid var(--rule)}
.step .n{font-family:var(--f-display);font-size:44px;line-height:1;color:var(--olive)}
.step b{font-weight:600}
.step p{font-size:15px;color:var(--soft)}

/* join */
.join{background:var(--olive);color:var(--bone)}
.join .wrap{padding-block:clamp(56px,8vw,96px);display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end}
.join h2{font-family:var(--f-display);font-size:clamp(40px,6vw,80px);line-height:.95}
.join h2 em{color:var(--sage)}
.join form{display:grid;gap:14px;min-width:0}
.join .fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.join label{display:grid;gap:6px;font-size:13px;font-weight:600;min-width:0}
.join input,.join select{font:inherit;font-size:16px;font-weight:400;padding:12px 14px;border:1px solid var(--sage);background:var(--olive-deep);color:var(--bone);width:100%;border-radius:0}
.join input::placeholder{color:#9AA27F}
.join .full{grid-column:1/-1}
.join .btn{background:var(--bone);color:var(--forest);justify-self:start}
.join .btn:hover{background:var(--sage)}
.join .note{font-family:var(--f-mono);font-size:12px;color:var(--sage);letter-spacing:.03em}
.join .note[data-on]{color:var(--bone)}

/* footer */
.foot{background:var(--ink);color:var(--stone)}
.foot .wrap{padding-block:clamp(56px,8vw,96px) 28px;display:grid;gap:clamp(40px,6vw,72px)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-top .about{display:grid;gap:16px;align-content:start;max-width:34ch}
.foot-top .about .k{width:56px;aspect-ratio:3247/3280;-webkit-mask-image:var(--k);mask-image:var(--k);color:var(--sage)}
.foot-top .about p{font-family:var(--f-display);font-size:26px;line-height:1.2;color:var(--bone)}
.foot-col{display:grid;gap:10px;align-content:start;min-width:0}
.foot-col .label{color:var(--mushroom);margin-bottom:6px}
.foot-col a{text-decoration:none;font-size:15px;width:fit-content}
.foot-col a:hover{color:var(--bone);text-decoration:underline;text-underline-offset:4px}
.foot-marks{display:flex;flex-wrap:wrap;align-items:center;gap:28px 40px;padding-block:28px;border-block:1px solid #3A3736}
.foot-marks div{color:var(--stone);opacity:.75;transition:opacity .2s}
.foot-marks div:hover{opacity:1}
.fm-ss{width:44px;aspect-ratio:944/1093;-webkit-mask-image:var(--ssm);mask-image:var(--ssm)}
.fm-g{width:150px;aspect-ratio:3972/1453;-webkit-mask-image:var(--gth);mask-image:var(--gth)}
.fm-dd{width:56px;aspect-ratio:1219/1228;-webkit-mask-image:var(--dds);mask-image:var(--dds)}
.foot .big{width:100%;aspect-ratio:2937/850;-webkit-mask-image:var(--wm);mask-image:var(--wm);color:var(--stone)}
.foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mushroom)}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr}.foot-top .about{grid-column:1/-1}}
@media (max-width:900px){
  .hero .wrap,.intro .wrap,.series .wrap,.join .wrap{grid-template-columns:1fr}
  .hero-art{aspect-ratio:5/4;max-width:560px}
  .sticker{right:12px}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(3){padding-left:0;border-left:0}
  .step:nth-child(n+3){border-top:1px solid var(--rule);margin-top:12px}
}
@media (max-width:600px){
  .nav ul{display:none}
  .nav .btn{margin-left:auto}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){padding-left:0;border-left:0}
  .facts div:nth-child(n+3){border-top:1px solid}
  .batches,.join .fields{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step,.step+.step{padding-left:0;border-left:0}
  .step+.step{border-top:1px solid var(--rule);margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .ticker .track,.s-dough .dds{animation:none}
  .hero-art:hover .k{transform:none}
  html{scroll-behavior:auto}
}

/* ---- multi-page additions ---- */
.nav ul a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.nav{view-transition-name:kumi-nav;color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;width:fit-content}
.more .arr{transition:transform .25s}
.more:hover .arr{transform:translateX(4px)}
.eyebrow-row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.sec{padding-block:clamp(56px,8vw,104px)}
.sec-head{display:grid;grid-template-columns:1fr 2fr;gap:32px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{font-family:var(--f-display);font-size:clamp(34px,4.4vw,56px);line-height:1}
.sec-head p{max-width:52ch;align-self:end}
.faq{display:grid;border-top:1px solid currentColor}
.faq details{border-bottom:1px solid currentColor}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding-block:20px;font-family:var(--f-display);font-size:clamp(22px,2.4vw,28px);line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:20px;transition:transform .25s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:22px;max-width:60ch}
@media (max-width:900px){.sec-head{grid-template-columns:1fr}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

.seat-band{background:var(--forest);color:var(--bone)}
.seat-band .wrap{padding-block:28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px}
.seat-band p{font-family:var(--f-display);font-size:clamp(26px,3vw,36px);line-height:1.1}
.seat-band .more{color:var(--sage);font-size:16px}

/* mobile menu */
.menu-btn{display:none;background:none;border:1px solid var(--ink);color:var(--ink);width:44px;height:44px;padding:0;cursor:pointer;place-items:center}
.menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after{display:block;width:18px;height:1.5px;background:currentColor;position:relative;transition:transform .25s,background .25s}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0}
.menu-btn .bars::before{top:-6px}.menu-btn .bars::after{top:6px}
.menu-btn[aria-expanded="true"] .bars{background:transparent}
.menu-btn[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){
  .nav .wrap{gap:12px}
  .nav .btn{margin-left:auto}
  .menu-btn{display:grid}
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;margin:0;background:var(--stone);border-bottom:1px solid var(--ink);flex-direction:column;gap:0;padding:8px clamp(16px,4vw,40px) 20px}
  .nav ul.open{display:flex}
  .nav ul li a{display:block;padding:14px 0;font-family:var(--f-display);font-size:30px;line-height:1.1;border-bottom:1px solid var(--rule)}
}
@media (max-width:380px){.nav .btn{padding:10px 12px;font-size:13px}}
@media (hover:none){.btn:hover,.opt:hover,.recipe:hover{transform:none}}