/* Page composition only. Brand, paper, type, spacing and reveals live in styles.css. */
/* A compact botanical title: ink draws in, leaves settle, then all motion stops. */
.closer-opening {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  text-align:center;
  padding:34px 24px 35px;
  color:var(--ivory);
  background-color:var(--teal);
  background-image:url('assets/teal-texture.svg'),radial-gradient(ellipse at 0% 110%,#c46a3d 0%,transparent 37%),radial-gradient(ellipse at 100% -20%,#d8a24a 0%,transparent 39%),linear-gradient(110deg,#214e56,#356d70 52%,#214e56);
  background-size:480px 480px,100% 100%,100% 100%,100% 100%;
  border-bottom:4px solid var(--wheat);
}
/* Offset glazes suggest hand-painted plates, keeping the central type quiet. */
.closer-opening::before,.closer-opening::after {
  content:''; position:absolute; z-index:0; pointer-events:none;
  inset:auto; clip-path:none; width:350px; height:350px;
  border-radius:50%; border:1px solid rgba(246,243,236,.36);
  background:none; box-shadow:0 0 0 17px rgba(216,162,74,.12),0 0 0 19px rgba(246,243,236,.13),inset 0 0 0 18px rgba(216,162,74,.1);
}
.closer-opening::before { left:-125px; bottom:-235px; }
.closer-opening::after { right:-125px; top:-235px; }
.closer-opening .title-main { color:var(--ivory); }
.closer-opening .title-context { color:#f0cc87; }
.closer-opening .opening-botanical-left svg g { stroke:#f0cc87; }
.closer-opening .opening-botanical-right svg g { stroke:#f0cc87; }
.closer-opening .opening-botanical-left path:not(:first-child) { fill:var(--wheat); }
.closer-opening .opening-botanical-right path:not(:first-child) { fill:var(--wheat); }
.closer-opening .opening-underline path { stroke:#f0cc87; stroke-width:3; }

.opening-title-group { position:relative; z-index:1; }
.closer-opening h1 { font-size:clamp(43px,4.7vw,66px); margin:0; }
.closer-opening h1 span { display:block; }
.title-main { animation:title-unfold 1400ms cubic-bezier(.16,1,.3,1) both; }
.closer-opening .title-context {
  font-size:26px;
  line-height:1.4;
  letter-spacing:-.025em;
  margin-top:4px;
  animation:soft-arrival 1200ms 160ms both;
}
.opening-underline { display:block; width:180px; height:14px; margin:9px auto 10px; overflow:visible; }
.opening-underline path { fill:none; stroke:var(--wheat); stroke-width:2; stroke-linecap:round; animation:ink-draw 1500ms 350ms both; }
.closer-peek { font-family:var(--serif); font-size:21px; margin:0; animation:soft-arrival 1100ms 450ms both; }
.opening-botanical { position:absolute; width:210px; top:66px; pointer-events:none; }
.opening-botanical-left { right:calc(50% + 290px); transform:rotate(-15deg); }
.opening-botanical-right { left:calc(50% + 290px); transform:scaleX(-1) rotate(-15deg); }
.opening-botanical svg { width:100%; height:auto; overflow:visible; }
.opening-botanical path { animation:botanical-ink 2900ms 200ms ease-out both; }
.opening-botanical path:nth-child(2) { animation-delay:450ms; }
.opening-botanical path:nth-child(3) { animation-delay:650ms; }
@keyframes title-unfold {
  from { opacity:0; transform:translateY(22px) scale(.975); clip-path:inset(0 0 100%); }
  to { opacity:1; transform:none; clip-path:inset(0); }
}
@keyframes soft-arrival { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes ink-draw { from { stroke-dasharray:1; stroke-dashoffset:1; } to { stroke-dasharray:1; stroke-dashoffset:0; } }
@keyframes botanical-ink {
  from { opacity:0; stroke-dasharray:1; stroke-dashoffset:1; fill-opacity:0; }
  30% { opacity:.8; fill-opacity:0; }
  to { opacity:.8; stroke-dasharray:1; stroke-dashoffset:0; fill-opacity:.28; }
}
.closer-page .story-grid { align-items:center; }
.closer-page .story-copy { min-width:0; }
/* Match the landing page's 80% inset figures, including non-growing video. */
.closer-page .closer-media { width:80%; justify-self:center; margin-inline:auto; border-radius:4px; }
.closer-media .media-frame { position:relative; aspect-ratio:1122 / 1402; background:var(--ivory); }
.closer-media img,.closer-media video { display:block; width:100%; height:100%; object-fit:contain; }
.closer-media video { background:var(--ivory); }
.closer-page .story-copy .closing-line { font-size:24px; }
.closer-page .story-heading h2 { text-wrap:balance; }
.closer-cooking .section-heading { max-width:780px; margin-bottom:50px; }
.closer-cooking .story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cooking-steps { list-style:none; padding:0; margin:0; }
.cooking-steps li { position:relative; padding:2px 0 25px 78px; }
.cooking-steps li+li { border-top:1px solid var(--sand); padding-top:27px; }
.step-icon {
  position:absolute;
  left:0;
  top:0;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:45% 55% 51% 49% / 55% 43% 57% 45%;
  color:var(--teal);
  background:rgba(127,168,166,.18);
  box-shadow:inset 0 0 0 1px rgba(33,78,86,.08);
}
.step-icon::after { content:''; position:absolute; inset:-4px; border:1px solid rgba(127,168,166,.3); border-radius:55% 45% 48% 52% / 44% 57% 43% 56%; transform:rotate(-9deg); }
.step-icon-2 { background:rgba(216,162,74,.17); }
.step-icon-2::after { border-color:rgba(216,162,74,.32); transform:rotate(12deg); }
.step-icon-3 { background:rgba(196,106,61,.12); }
.step-icon-3::after { border-color:rgba(196,106,61,.24); }
.step-icon svg { width:43px; height:43px; }
.cooking-steps li+li .step-icon { top:25px; }
.cooking-steps .in-view .step-icon path { animation:ink-draw 1250ms 150ms both; }
.cooking-steps h3 { font-family:var(--serif); font-size:28px; font-weight:400; line-height:1.3; letter-spacing:-.03em; color:var(--teal); margin:0 0 12px; }
.cooking-steps p { margin:0; }

.closer-return { text-align:center; border-top:1px solid var(--sand); padding:36px 20px; margin:0; }
.closer-return a { font-size:15px; }
.closer-page~.site-footer { border-top:0; }
.site-header nav a[aria-current=page] { text-decoration:underline; text-decoration-color:var(--sand); text-underline-offset:8px; }
@media(max-width:1000px) {
  .opening-botanical-left { right:calc(50% + 230px); }
  .opening-botanical-right { left:calc(50% + 230px); }
  .closer-page .story-heading h2 { font-size:40px; }
  .closer-page .story-grid { gap:36px; }
}
@media(max-width:760px) {
  .closer-opening { padding:29px 20px 30px; }
  .closer-opening h1 { font-size:clamp(39px,8vw,54px); }
  .closer-opening .title-context { font-size:23px; }
  .closer-peek { font-size:18px; }
  .opening-botanical { width:140px; top:63px; opacity:.45; }
  .opening-botanical-left { right:calc(50% + 145px); }
  .opening-botanical-right { left:calc(50% + 145px); }
  .closer-page .story-grid,.closer-cooking .story-grid { grid-template-columns:1fr; gap:32px; }
  .closer-page .story-copy { grid-row:1; }
  .closer-page .closer-media { position:relative; top:auto; }
  .closer-page .story-heading h2 { font-size:39px; }
  .closer-page .story-copy .closing-line { font-size:23px; }
  .closer-cooking .section-heading { margin-bottom:30px; }
  .closer-cooking .closer-media { grid-row:1; }
  .closer-cooking .story-copy { grid-row:2; }
  .cooking-steps li { padding-left:66px; }
  .step-icon { width:48px; height:48px; }
  .step-icon svg { width:37px; height:37px; }
}
@media(prefers-reduced-motion:reduce) {
  .closer-page .photo-growth { transform:none; }
  .opening-botanical path { opacity:.8; }
  .title-main { clip-path:none; }
}

/* Small pause control replaces the full player chrome on the looping film. */
.story-motion-toggle {
  position:absolute; right:14px; bottom:14px; padding:9px 15px;
  min-height:44px; border:1px solid rgba(246,243,236,.6); border-radius:30px;
  background:rgba(33,78,86,.94); color:var(--ivory); font-size:13px;
  cursor:pointer; box-shadow:0 2px 12px #0002;
}
.story-motion-toggle:hover { background:var(--teal); }
.film-fallback { position:absolute; inset:auto 12px 12px; padding:12px; background:var(--ivory); font-size:14px; }
@media(max-width:760px) {
  .closer-opening {
    background-image:url('assets/teal-texture.svg'),radial-gradient(ellipse at -30% 110%,#c46a3d 0%,transparent 52%),radial-gradient(ellipse at 130% -10%,#d8a24a 0%,transparent 52%),linear-gradient(110deg,#214e56,#356d70 52%,#214e56);
  }
  .closer-opening::before { left:-255px; }
  .closer-opening::after { right:-255px; }
}

/* Gilded details and directional light add depth without enlarging the banner. */
.closer-opening {
  box-shadow:inset 0 1px 0 #f0cc8766,inset 0 -1px 0 #fff6;
  border-image:linear-gradient(90deg,#c46a3d,#f0cc87 35%,#d8a24a 65%,#c46a3d) 1;
}
.closer-opening h1 {
  text-shadow:0 2px 2px rgba(8,34,38,.55),0 7px 18px rgba(8,34,38,.42);
}
.closer-opening .title-context { text-shadow:0 2px 3px #102e35bb,0 5px 14px #102e3566; }
.opening-botanical svg { filter:drop-shadow(0 3px 3px #133a3e66); }
.closer-opening::before,.closer-opening::after {
  border-color:#f0cc8799;
  background:radial-gradient(circle,transparent 55%,#f0cc871c 69%,transparent 70%);
  box-shadow:0 0 0 7px #214e5633,0 0 0 9px #f0cc873d,0 0 0 25px #d8a24a1a,0 0 0 27px #f0cc8744,inset 0 0 0 20px #d8a24a12,inset 0 0 0 22px #f0cc8755;
  animation:glaze-arrival 3000ms cubic-bezier(.2,.65,.3,1) both;
}
.closer-opening::after { animation-delay:180ms; }
.opening-underline { width:220px; filter:drop-shadow(0 2px 3px #102e3588); }
.opening-light {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 20%,rgba(216,162,74,.12) 36%,rgba(240,204,135,.32) 47%,rgba(246,243,236,.24) 51%,rgba(240,204,135,.12) 59%,transparent 76%);
  transform:translateX(100%);
  animation:light-pass 3400ms 350ms ease-in-out both;
}
@keyframes light-pass { from { transform:translateX(-100%); opacity:0; } 30%,70% { opacity:1; } to { transform:translateX(100%); opacity:0; } }
@keyframes glaze-arrival { from { opacity:.15; transform:scale(.78) rotate(-14deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@media(prefers-reduced-motion:reduce) { .opening-light { display:none; } }

/* A closer handoff from the compact banner to the first story only. */
.launch-banner + .story-section { padding-top:72px; }
@media(max-width:1000px) { .launch-banner + .story-section { padding-top:60px; } }
@media(max-width:760px) { .launch-banner + .story-section { padding-top:52px; } }

/* Align the film with the steps; let the closing thought span both columns. */
.closer-cooking .story-grid { align-items:start; }
.closer-cooking .story-copy { padding-top:0; padding-bottom:0; }
.cooking-closing {
  max-width:780px; margin:38px auto 0; padding-top:28px;
  border-top:1px solid var(--sand); font-family:var(--serif);
  font-size:25px; line-height:1.4; color:var(--teal); text-wrap:balance;
}
@media(max-width:760px) { .cooking-closing { margin-top:24px; font-size:23px; } }