/* Page CSS shared by every coming-soon page: responsive custom properties, hero protection,
   scroll-linked reveal system, reading progress and the standing newsletter invitation. */
html,body{background:var(--color-site-cream)}#root{min-height:100vh}#story,#our-story,#eat,#flavours,#signup{scroll-margin-top:76px}a{color:var(--color-site-ink)}a:hover{color:var(--color-site-body)}
@keyframes masuru-settle{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
@keyframes masuru-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero-photo{animation:masuru-settle 1900ms cubic-bezier(.22,.61,.36,1) both}
.hero-in{animation:masuru-rise 900ms cubic-bezier(.22,.61,.36,1) both}
.hero-in-1{animation-delay:240ms}.hero-in-2{animation-delay:380ms}.hero-in-3{animation-delay:500ms}.hero-in-4{animation-delay:620ms}.hero-in-5{animation-delay:760ms}.hero-in-6{animation-delay:920ms}
@media (prefers-reduced-motion:reduce){.hero-photo,.hero-in{animation:none}}
/* Long-form page entrance. The first section is already in view at load, so its scroll-linked
   reveal cannot play — this gives it the hero's arrival instead: the section rises as a whole,
   its photograph settles out of a slight scale, and the copy column follows a beat later. */
.cs-lead>section:first-child{animation:masuru-rise 1000ms cubic-bezier(.22,.61,.36,1) 120ms both}
.cs-lead>section:first-child img{animation:masuru-settle 1700ms cubic-bezier(.22,.61,.36,1) 120ms both}
.cs-lead>section:first-child>div>*:nth-child(2){animation:masuru-rise 950ms cubic-bezier(.22,.61,.36,1) 380ms both}
@media (prefers-reduced-motion:reduce){.cs-lead>section:first-child,.cs-lead>section:first-child img,.cs-lead>section:first-child>div>*:nth-child(2){animation:none}}
:root{--tweak-heading-weight:300;--tweak-heading-scale:.883;--tweak-caps-tracking:.28em}
.masuru-caps{letter-spacing:var(--tweak-caps-tracking)}
/* Closing band: groups sit closer than the space between them, so the badge, the slogan pair,
   the headline and the form read as one statement rather than a stacked list. */
[data-cs-closing]{gap:var(--space-lg)!important}
[data-cs-closing]>*:last-child{margin-top:var(--space-xs)}
/* Hero protection. Two washes in the hero's own taupe rather than a grey veil: one left-to-right
   under the copy column, one short one under the header. Keeps every text run over paper-toned
   ground, so swapping the photograph cannot break contrast again. */
.cs-hero-scrim{position:absolute;inset:0;pointer-events:none;background:var(--cs-hero-scrim,none)}
.cs-inner header nav a{color:var(--color-site-ink)}
/* Reading progress: a single hairline across the top, drawn by scroll position. */
.cs-prog{position:fixed;top:0;left:0;right:0;height:1px;z-index:60;background:var(--color-site-ink);opacity:.24;transform:scaleX(0);transform-origin:0 50%}
@supports (animation-timeline:scroll()){.cs-prog{animation:cs-prog linear both;animation-timeline:scroll(root block)}}
@keyframes cs-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* The standing newsletter invitation. Hidden until the hero is behind you, and it steps aside
   when the closing signup band arrives — two named timelines rather than a scroll listener. */
.cs-cta{position:fixed;right:var(--cs-gutter);bottom:22px;z-index:55;display:none;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:var(--color-site-ink);color:var(--color-site-cream);text-decoration:none;box-shadow:0 12px 30px rgba(44,41,39,.22);opacity:0;transition:transform 480ms cubic-bezier(.22,.61,.36,1)}
.cs-cta:hover{transform:translateY(-3px);background:var(--color-site-body)}
@keyframes cs-cta-in{from{opacity:0;visibility:hidden;transform:translateY(14px)}to{opacity:1;visibility:visible;transform:translateY(0)}}
@keyframes cs-cta-out{from{opacity:1}to{opacity:0;visibility:hidden}}
.cs-inline-cta{transition:opacity 320ms ease}
.cs-inline-cta:hover{opacity:.6}
.cs-email::placeholder{color:var(--cs-ph,var(--color-site-body));opacity:1}
/* Stat-row dividers: vertical between cells in a row, horizontal between rows when it wraps to 2-up. */
.cs-stat{border-left:1px solid var(--color-site-hairline-soft)}
.cs-stat:first-child{border-left:none}
@container (max-width:900px){
.cs-stat:nth-child(odd){border-left:none}
.cs-stat:nth-child(n+3){border-top:1px solid var(--color-site-hairline-soft)}
}
.cs-email:focus{border-color:var(--cs-ring-border,var(--color-site-ink));box-shadow:0 0 0 3px var(--cs-ring,rgba(44,41,39,.12))}
/* Flavour cards lift and the photograph swells inside its frame — slow, no bounce.
   The lift lives on .cs-flav-lift rather than the article: the article is a scroll-reveal target,
   and a filling animation owns its transform outright. The wrapper also escapes FlavourCard's
   own inline transition, so the 620ms ease is the one that actually runs. */
.cs-flav-lift{transition:transform 620ms cubic-bezier(.22,.61,.36,1),box-shadow 620ms cubic-bezier(.22,.61,.36,1)}
.cs-flav-lift article{height:100%}
#flavours article>div:first-child{overflow:hidden}
#flavours article img{transition:transform 900ms cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){
.cs-flav-lift:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(44,41,39,.14)}
.cs-flav-lift:hover img{transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){.cs-flav-lift,#flavours article img{transition:none}}
.cs-page{max-width:var(--cs-frame,none);margin:0 auto;container-type:inline-size}
html.is-framed,html.is-framed body{background:#b3aca0}
/* Viewport-fixed chrome follows the frame rather than the window when the page is framed. */
html.is-framed .cs-prog{left:calc(50% - var(--cs-frame)/2);width:var(--cs-frame);right:auto}
html.is-framed .cs-cta{right:calc(50% - var(--cs-frame)/2 + 16px)}
html.is-framed body{padding:26px 0}
html.is-framed .cs-page{overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.22)}
.cs-inner{--cs-flav-stats-col:1/-1;--cs-flav-stats-dir:row;--cs-flav-stats-pad:var(--space-lg) 0 0;--cs-gutter:var(--space-xxxl);--cs-hero-min:53.2cqw;--cs-hero-img-pos:absolute;--cs-hero-img-h:100%;--cs-hero-img-obj:center right;--cs-privacy-band:380px;--cs-hero-scrim:linear-gradient(to bottom,rgba(210,196,181,.94) 0,rgba(210,196,181,.66) 62px,rgba(210,196,181,0) 132px),linear-gradient(100deg,rgba(210,196,181,.99) 0,rgba(210,196,181,.98) 42%,rgba(210,196,181,.88) 55%,rgba(210,196,181,0) 76%);--cs-hero-pad:9% var(--cs-gutter) 7%;--cs-hero-copy-max:560px;--cs-cols-keep:repeat(3,1fr);--cs-keep-pad:var(--space-lg) var(--space-md);--cs-keep-gap:8px;--cs-keep-en:16px;--cs-keep-jp:11px;--cs-keep-bl:1px solid var(--color-site-band-rule);--cs-keep-bt:none;--cs-cols-founders:1fr 1.05fr;--cs-founders-img-col:2;--cs-founders-txt-col:1;--cs-founders-txt-row:1 / span 2;--cs-founders-cta-col:2;--cs-founders-cta-row:2;--cs-cols-story:1fr 1.1fr;--cs-story-gap:var(--space-section);--cs-cols-eatphoto:repeat(2,1fr);--cs-cols-eatcards:repeat(3,1fr);--cs-cols-flav:repeat(5,1fr);--cs-cols-stats:repeat(4,1fr);--cs-stat-per-row:4;--cs-form-dir:row}
@container (max-width:1040px){.cs-inner{--cs-flav-stats-col:auto;--cs-flav-stats-dir:column;--cs-flav-stats-pad:0;--cs-cols-flav:repeat(3,1fr);--cs-cols-eatcards:repeat(2,1fr);--cs-gutter:var(--space-xxl)}}
@container (max-width:900px){.cs-inner{--space-xxxl:22px;--space-xxl:20px;--space-section:52px;--space-section-lg:64px;--cs-gutter:22px;--cs-hero-min:0;--cs-hero-img-pos:relative;--cs-hero-img-h:clamp(240px,52cqw,340px);--cs-hero-img-obj:center 42%;--cs-privacy-band:260px;--cs-hero-scrim:linear-gradient(to bottom,rgba(210,196,181,.92) 0,rgba(210,196,181,.55) 56px,rgba(210,196,181,0) 116px);--cs-hero-pad:30px var(--cs-gutter) 46px;--cs-hero-copy-max:none;--cs-cols-keep:repeat(3,1fr);--cs-keep-bl:1px solid var(--color-site-band-rule);--cs-keep-bt:none;--cs-keep-pad:20px 6px 22px;--cs-keep-gap:7px;--cs-keep-en:14px;--cs-keep-jp:10px;--cs-cols-founders:1fr 1.05fr;--cs-founders-img-col:2;--cs-founders-txt-col:1;--cs-founders-txt-row:1;--cs-cols-founders:1fr;--cs-founders-img-col:auto;--cs-founders-txt-col:auto;--cs-founders-txt-row:auto;--cs-founders-cta-col:auto;--cs-founders-cta-row:auto;--cs-cols-story:1fr;--cs-story-gap:var(--space-xxl);--cs-cols-eatphoto:1fr;--cs-cols-eatcards:1fr;--cs-cols-flav:repeat(2,1fr);--cs-cols-stats:repeat(2,1fr);--cs-stat-per-row:2;--cs-form-dir:column}}
@container (max-width:900px){.cs-keep svg{width:20px;height:20px}}
@container (max-width:520px){.cs-inner header nav{display:none!important}.cs-burger{display:flex!important}}
/* Scroll-linked reveals. Native view() timelines: progress is tied to scroll POSITION, so the
   motion plays forward on the way down and reverses on the way up, and nothing depends on scroll
   events or observers. Browsers without support simply get the static page. */
@keyframes rv-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes rv-fade{from{opacity:0}to{opacity:1}}
@keyframes rv-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes rv-track{from{opacity:0;letter-spacing:.26em}to{opacity:1;letter-spacing:.01em}}
@keyframes rv-rule{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@supports (animation-timeline:view()){
.cs-inner{timeline-scope:--cs-hero}
#top{view-timeline-name:--cs-hero}

/* Hero exit: the photograph drifts on and the copy lifts away, so leaving the hero is a move
   rather than a cut. The load-in animation keeps its own document timeline. */
@keyframes cs-hero-drift{from{transform:scale(1)}to{transform:scale(1.07) translateY(1.5%)}}
@keyframes cs-hero-lift{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}
.hero-photo{animation:masuru-settle 1900ms cubic-bezier(.22,.61,.36,1) both,cs-hero-drift linear both;animation-timeline:auto,--cs-hero;animation-range:normal,exit 0% exit 100%}
.cs-hero-copy{animation:cs-hero-lift linear both;animation-timeline:--cs-hero;animation-range:exit 15% exit 95%}
.cs-cta{display:flex;animation:cs-cta-in linear both,cs-cta-out linear forwards;animation-timeline:scroll(root block),scroll(root block);animation-range:9% 18%,84% 92%}
}
@supports (animation-timeline:view()){
[data-reveal="rise"],[data-reveal-children="rise"]>*{animation:rv-rise linear both;animation-timeline:view();animation-range:entry 6% entry 82%;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
[data-reveal="fade"],[data-reveal-children="fade"]>*{animation:rv-fade linear both;animation-timeline:view();animation-range:entry 6% entry 82%;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
[data-reveal="photo"],[data-reveal-children="photo"]>*{animation:rv-fade linear both;animation-timeline:view();animation-range:entry 0% entry 62%;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
[data-reveal="photo"]>img,[data-reveal-children="photo"]>*>img{animation:rv-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 34%;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
[data-reveal="track"]{animation:rv-track linear both;animation-timeline:view();animation-range:entry 8% cover 14%;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
[data-reveal="rule"]{transform-origin:center;animation:rv-rule linear both;animation-timeline:view();animation-range:entry 20% cover 22%;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
[data-reveal-children]>*:nth-child(2){animation-range:entry 13% entry 89%}
[data-reveal-children]>*:nth-child(3){animation-range:entry 20% entry 96%}
[data-reveal-children]>*:nth-child(4){animation-range:entry 27% cover 3%}
[data-reveal-children]>*:nth-child(5){animation-range:entry 34% cover 10%}
[data-reveal-children]>*:nth-child(6){animation-range:entry 41% cover 17%}
[data-reveal-children="photo"]>*:nth-child(2){animation-range:entry 10% entry 72%}
}
@media (prefers-reduced-motion:reduce){[data-reveal],[data-reveal-children]>*,[data-reveal] img{animation:none!important}}