/* Root & Bay website. Brand tokens, fonts, focus ring and reduced motion come from web/brand.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--rb-cream); color: var(--rb-espresso); padding: 10px 14px; z-index: 10; }
.skip:focus { top: 12px; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 5; background: var(--rb-bg); border-bottom: 1px solid var(--rb-border); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 14px; }
.site-head .logo img { height: 38px; width: auto; }
.site-head nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin: 0; padding: 0; list-style: none; font-size: var(--rb-step--1); }
.site-head nav a { display: inline-block; padding: 10px 0; text-decoration: none; }
.site-head nav a[aria-current="page"], .site-head nav a:hover { text-decoration: underline; }
.home .site-head { position: absolute; inset: 0 0 auto; background: transparent; border-bottom-color: transparent; }

/* Buttons: 44 px tall, one press state */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font: 600 var(--rb-step--1)/1.2 var(--rb-font-body); text-decoration: none; border: 1.5px solid currentColor; transition: transform .12s ease-out, background-color .2s; }
.btn:active { transform: translateY(1px); }
.btn-solid { background: var(--rb-text); color: var(--rb-bg); border-color: var(--rb-text); }
.btn-solid:hover { background: var(--rb-text-muted); border-color: var(--rb-text-muted); }
.btn-line { color: var(--rb-text); }
.btn-line:hover { background: var(--rb-surface); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.site-head .btn { min-height: 44px; padding: 8px 18px; }

/* Home hero: the one orchestrated moment, the roots growing out of the pod */
.hero { min-height: min(100svh, 860px); display: grid; align-items: center; padding: 120px 0 72px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 6vw, var(--rb-step-5)); line-height: 1.04; margin: 0; max-width: 13ch; letter-spacing: -.01em; }
.hero p.lead { font-size: var(--rb-step-1); line-height: 1.55; margin: 24px 0 0; max-width: 36ch; color: var(--rb-text-muted); }
.hero .mark { width: min(100%, 420px); justify-self: center; position: relative; }
.hero .btn-solid { background: var(--rb-cream); color: var(--rb-espresso); border-color: var(--rb-cream); }
.hero .btn-solid:hover { background: #fff; border-color: #fff; }
.hero .btn-line:hover { background: var(--rb-surface); }
/* The roots grow: a cover in the hero colour shrinks off the roots, top to bottom. Only transform and
   opacity animate, so the detailed SVG is painted once and phones run it on the compositor. */
@media (prefers-reduced-motion: no-preference) {
  .hero .mark img { animation: appear .7s ease-out both; }
  .hero .mark::after { content: ""; position: absolute; inset: 49% -4% -4%; background: var(--rb-bg);
    transform-origin: 50% 100%; animation: uncover 1.7s .45s cubic-bezier(.3, .6, .2, 1) both; }
}
@keyframes appear { from { opacity: 0; transform: translateY(10px); } }
@keyframes uncover { to { transform: scaleY(0); } }

/* Sections */
section { padding-block: clamp(64px, 9vw, 120px); }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head h2 { margin: 0 0 12px; }
.section-head p { margin: 0; color: var(--rb-text-muted); }
.tint { background: var(--rb-surface); }

/* Product line index: full-width rows, the photo carries each line */
.lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rb-border); }
.lines li { border-bottom: 1px solid var(--rb-border); }
.lines a { display: grid; grid-template-columns: 1fr 1.1fr 280px; gap: 32px; align-items: center; padding: 28px 0; text-decoration: none; }
.lines h3 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0; }
.lines p { margin: 0; color: var(--rb-text-muted); font-size: var(--rb-step--1); }
.lines .count { display: block; margin-top: 6px; color: var(--rb-text); font-size: var(--rb-step--1); }
.lines a:hover h3, .lines a:focus-visible h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.lines .ph { aspect-ratio: 3 / 2; }

/* Photos reserve their space (no layout shift); the cream shows until they arrive */
.ph { aspect-ratio: 3 / 2; background: var(--rb-cream); overflow: hidden; border-radius: 6px; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.panel { display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: var(--rb-cream);
  background: radial-gradient(120% 90% at 85% 10%, rgba(244, 236, 200, .14), transparent 55%), var(--rb-espresso); }
.panel strong { font: 700 clamp(1.3rem, 2.4vw, 1.75rem)/1.15 var(--rb-font-heading); }
.panel span { font-size: var(--rb-step--1); opacity: .85; margin-top: 6px; }

/* How an order works: a real sequence, so it is numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--rb-text); padding-top: 18px; }
.steps li::before { content: counter(step); display: block; font: 700 var(--rb-step-3)/1 var(--rb-font-heading); margin-bottom: 14px; }
.steps h3 { font-size: var(--rb-step-1); margin: 0 0 8px; }
.steps p { margin: 0; font-size: var(--rb-step--1); color: var(--rb-text-muted); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--rb-border); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 12px; height: 6px; border: solid var(--rb-text); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.note { font-size: var(--rb-step--1); color: var(--rb-text-muted); margin-top: 18px; }
.registered { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.registered li { border: 1.5px solid var(--rb-control-border); border-radius: 6px; padding: 10px 16px; font-size: var(--rb-step--1); }

/* Quote band */
.quote h2 { max-width: 18ch; margin: 0; }
.quote p { color: var(--rb-text-muted); }
.quote .btn-solid { background: var(--rb-cream); color: var(--rb-espresso); border-color: var(--rb-cream); }
.quote .btn-solid:hover { background: #fff; border-color: #fff; }

/* Product line page */
.line-hero { padding-block: 56px 72px; }
.line-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.line-hero .wrap > * { min-width: 0; }  /* lets the swipeable product row scroll instead of widening the column */
.line-hero h1 { margin: 0 0 14px; }
.line-hero .sub { font-size: var(--rb-step-1); margin: 0 0 18px; line-height: 1.5; }
.toc { margin-top: 26px; }
.toc h2 { font: 600 var(--rb-step--1) var(--rb-font-body); margin: 0 0 10px; }
.toc ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.toc a { display: inline-block; padding: 9px 14px; border: 1.5px solid var(--rb-control-border); border-radius: 999px; font-size: var(--rb-step--1); text-decoration: none; }
.toc a:hover { background: var(--rb-bg); }

.product { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; padding-block: 56px; border-top: 1px solid var(--rb-border); }
.product:first-of-type { border-top: 0; }
.product .ph { position: sticky; top: 96px; }
.product h2 { margin: 0 0 10px; }
.product .summary { font-size: var(--rb-step-1); line-height: 1.5; margin: 0 0 24px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0 0 28px; font-size: var(--rb-step--1); }
.facts dt { color: var(--rb-text-muted); }
.facts dd { margin: 0; }
.product h3 { font: 600 var(--rb-step-0) var(--rb-font-body); margin: 28px 0 8px; }
table.spec { width: 100%; border-collapse: collapse; font-size: var(--rb-step--1); }
table.spec th, table.spec td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rb-border); }
table.spec th { font-weight: 600; width: 42%; }
.product .actions { margin-top: 28px; }

.prose { max-width: 720px; }
.prose h2 { margin-top: 48px; }
.terms { display: grid; grid-template-columns: max-content 1fr; gap: 12px 32px; margin: 0; }
.terms dt { font-weight: 600; }
.terms dd { margin: 0; color: var(--rb-text-muted); }

/* Footer */
.site-foot { padding-block: 56px 40px; font-size: var(--rb-step--1); }
.site-foot .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.site-foot img { height: 40px; width: auto; margin-bottom: 14px; }
.site-foot h2 { font: 600 var(--rb-step--1) var(--rb-font-body); margin: 0 0 10px; color: var(--rb-text); }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { padding: 4px 0; }
.site-foot p { margin: 0; color: var(--rb-text-muted); }
.site-foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--rb-border); padding-top: 20px; }

@media (max-width: 900px) {
  .hero .wrap, .line-hero .wrap, .cols, .product { grid-template-columns: 1fr; }
  .hero { padding-top: 140px; }
  .hero .mark { width: min(60%, 300px); grid-row: 1; justify-self: start; }
  .lines a { grid-template-columns: 1fr 160px; }
  .lines a > p { grid-column: 1; grid-row: 2; }
  .lines .ph { grid-column: 2; grid-row: 1 / 3; }
  .steps { grid-template-columns: 1fr 1fr; }
  .product .ph { position: static; }
  .site-foot .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-head .logo img { height: 32px; }
  .site-head .btn { display: none; }
  .hero { padding-top: 120px; min-height: 0; }
  .hero .mark { width: 132px; }  /* the quote band and every product keep their own quote buttons */
  .lines a { grid-template-columns: 1fr 104px; gap: 16px; }
  /* one swipeable row instead of 28 stacked chips; the page itself never scrolls sideways */
  .toc ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 8px; scrollbar-width: thin; }
  .toc li { flex: none; }
  .steps { grid-template-columns: 1fr; }
  .facts, .terms { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd, .terms dd { margin-bottom: 10px; }
  .site-foot .wrap { grid-template-columns: 1fr; }
}

/* ---------- Scroll choreography: ingredients drift, one statement inks in, photos move with depth ----------
   Only transform and opacity animate, driven by scroll position (no JS, no library), so it runs on the
   compositor on phones too. Browsers without scroll-driven animations, and anyone who asks for reduced
   motion, get the same page standing still. */
section { position: relative; overflow: clip; }
section > .wrap { position: relative; z-index: 1; }
/* Floats sit only in the side margin, never over content: width is capped to the margin (content column is
   1180px), and below 1400px wide there is no room, so they are not shown. */
.float { position: absolute; z-index: 0; width: min(var(--w, 160px), max(0px, calc(((100vw - 1180px) / 2 - 48px) * .8))); height: auto; pointer-events: none; user-select: none;
  mix-blend-mode: multiply;  /* the white studio background disappears into white and cream sections */
  transform: rotate(var(--r0, 0deg)); }
@media (max-width: 1399px) { .float { display: none; } }


@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @supports (animation-timeline: view()) {
    .float { animation: drift linear both; animation-timeline: view(); animation-range: cover; will-change: transform; }
    .lines .ph img, .line-hero .ph img { animation: depth linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes drift {
  from { transform: translate3d(0, calc(var(--from, 80px) * var(--k, 1)), 0) rotate(var(--r0, -8deg)); }
  to { transform: translate3d(0, calc(var(--to, -80px) * var(--k, 1)), 0) rotate(var(--r1, 8deg)); }
}
@keyframes depth {
  from { transform: scale(1.12) translate3d(0, -4%, 0); }
  to { transform: scale(1.12) translate3d(0, 4%, 0); }
}

@media (max-width: 900px) {
  .float { --k: .5; }  /* shorter sections: shorter drift, so nothing slides past a section edge */
}
@media (max-width: 560px) {
  .float { --k: .35; }
}

/* ---------- Homepage journey: from the root to the open sea ----------
   Default (no scroll-driven animation support): six full-screen chapters, each with its own scene.
   With support: one sticky stage holds all six scenes; each dissolves in and slowly pushes forward as its
   chapter panel scrolls past. 130svh per chapter must match C in build_site.py's journey(). */
.journey { padding: 0; background: var(--rb-deep-espresso); }
.journey .stage { display: none; }
.chapters { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.chapter { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.chapter > .fallback, .layer { position: absolute; inset: 0; z-index: 0; }
.chapter > .fallback img, .layer img { width: 100%; height: 100%; object-fit: cover; }
.chapter > .wrap { position: relative; z-index: 1; }
.panel { max-width: 30rem; padding: clamp(24px, 3vw, 40px); border-radius: 8px; color: var(--rb-cream);
  background: linear-gradient(100deg, rgba(43, 27, 17, .88), rgba(43, 27, 17, .7)); }  /* cream text stays above 4.5:1 over any scene */
.panel .num { display: block; font: 700 var(--rb-step-1)/1 var(--rb-font-heading); color: var(--rb-text-muted); margin-bottom: 14px; }
.panel h2 { color: var(--rb-cream); margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3rem); }
.panel p { margin: 0; color: var(--rb-text-muted); }
.panel .btn-solid { background: var(--rb-cream); color: var(--rb-espresso); border-color: var(--rb-cream); }
.panel .btn-solid:hover { background: #fff; border-color: #fff; }

@supports (animation-timeline: view()) {
  .journey { view-timeline: --journey block; }
  .journey .stage { display: block; position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; overflow: hidden; }
  .chapter { min-height: 130svh; }
  .chapter > .fallback { display: none; }
  .layer { opacity: 0; animation: layer-in linear both; animation-timeline: --journey; }
  .layer:first-child { opacity: 1; animation: none; }
  @media (prefers-reduced-motion: no-preference) {
    .layer img { animation: push linear both; animation-timeline: --journey; will-change: transform; }
  }
}
@keyframes layer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes push { from { transform: scale(1); } to { transform: scale(1.1); } }

@media (max-width: 560px) {
  .chapter { align-items: flex-end; padding-bottom: 12svh; }  /* phone scenes keep their lower 40% calm for text */
  .panel { max-width: none; }
}

/* ---------- Products dropdown ---------- */
.site-head .wrap { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease-out; }
.menu[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.menu summary:hover { text-decoration: underline; }
.menu-panel { position: absolute; top: calc(100% - 4px); right: 0; z-index: 10; width: min(580px, 100%); padding: 10px;
  border-radius: 12px; background: var(--rb-paper); color: var(--rb-espresso); border: 1px solid var(--rb-line);
  box-shadow: 0 24px 48px rgba(43, 27, 17, .18), 0 2px 8px rgba(43, 27, 17, .08); }
.site-head .menu-panel ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.site-head .menu-panel a { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--rb-espresso); }
.site-head .menu-panel a:hover, .site-head .menu-panel a:focus-visible, .site-head .menu-panel a[aria-current="page"] { background: var(--rb-cream); text-decoration: none; }
.menu-panel .ph { width: 60px; flex: none; aspect-ratio: 1; border-radius: 6px; }
.menu-panel .panel { padding: 6px; }
.menu-panel .panel strong { font-size: .6rem; }
.menu-panel strong { display: block; font: 700 1.05rem/1.2 var(--rb-font-heading); }
.menu-panel small { display: block; margin-top: 2px; color: var(--rb-muted); font-size: .8rem; }
.site-head .menu-panel .menu-all { justify-content: center; margin-top: 6px; padding: 12px; border-top: 1px solid var(--rb-line); border-radius: 0 0 8px 8px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .menu[open] .menu-panel { animation: menu-in .2s ease-out; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 560px) { .site-head .menu-panel ul { grid-template-columns: 1fr; } }