/* ============================================================
   Otto. homepage structure
   Brand tokens: Vanilla, Gold, Sage, Pine (from the brand guidelines)
   Brand fonts: Modish (wordmark, supplied as the logo image)
                Clother Light (body, not on Google Fonts, so Jost
                stands in until the licensed files are added)

   To switch to the licensed font, drop the files in and add:
   @font-face{font-family:"Clother";src:url("fonts/Clother-Light.woff2") format("woff2");font-weight:300}
   The font stacks below will pick it up automatically.
   ============================================================ */

/* Self-hosted fonts (Jost and Cormorant Garamond are SIL OFL, so hosting them ourselves is fine) */
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/jost-300.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jost-400.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jost-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-500.woff2") format("woff2")}

:root{
  --vanilla:#F5EFE3;
  --gold:#C2954C;
  --gold-deep:#B18540;
  --gold-light:#CBA35F;
  --sage:#888A62;
  --pine:#36432E;
  --pine-deep:#26301F;

  --bg:var(--vanilla);
  --surface:#ECE6D8;
  --text:#2E3528;
  --muted:#636854;  /* nudged from #6B705C so small grey text meets WCAG AA (4.5:1) on both light backgrounds */
  --heading:var(--pine);
  --line:rgba(54,67,46,.16);
  --band:var(--pine);
  --band-text:var(--vanilla);
  --band-muted:rgba(245,239,227,.78);
  --logo-light:block;
  --logo-dark:none;

  --font-display:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --font-body:"Clother","Jost","Futura","Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;

  /* Up to ~1440px wide the layout is unchanged. Beyond that the side margins hold at 8rem
     and the content keeps stretching with the screen at any width, instead of sitting
     in a fixed column with ever-wider empty margins. */
  --wrap:100vw;
  --gutter:clamp(1.25rem, calc((100vw - 1180px) / 2), 8rem);
  --radius:4px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1E261B; --surface:#2A3426; --text:#E8E2D5; --muted:#B5B7A0;
    --heading:#F5EFE3; --line:rgba(245,239,227,.14); --band:#141A12; --logo-light:none; --logo-dark:block;
  }
}
:root[data-theme="dark"]{
  --bg:#1E261B; --surface:#2A3426; --text:#E8E2D5; --muted:#B5B7A0;
  --heading:#F5EFE3; --line:rgba(245,239,227,.14); --band:#141A12; --logo-light:none; --logo-dark:block;
}

html{scroll-padding-top:calc(80px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:300;font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-display);font-weight:500;color:var(--heading);margin:0;line-height:1.05;letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Smaller desktops: keep a comfortable side margin so left-hand copy never runs to the edge */
@media (min-width:901px){:root{--gutter:clamp(3rem, calc((100vw - 1180px) / 2), 8rem)}}
.wrap{width:min(var(--wrap),100% - (var(--gutter) * 2));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--pine-deep);padding:.6rem 1rem;z-index:100;text-decoration:none}
.skip:focus{left:1rem;top:1rem}

/* Breakout grid: content columns line up with .wrap, outer columns reach the viewport edge */
.breakout{display:grid;grid-template-columns:minmax(var(--gutter),1fr) repeat(2,minmax(0,calc(var(--wrap) / 2))) minmax(var(--gutter),1fr)}

/* ---------- Buttons & links ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body);font-weight:400;font-size:.95rem;line-height:1;padding:.95rem 1.5rem;border-radius:var(--radius);text-decoration:none;border:1px solid transparent;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
/* Dark text on gold: cream on this gold is 2.38:1 and fails WCAG at any size, pine-deep is 5.05:1.
   Hover goes lighter, not darker, because pine-deep on --gold-deep drops to 4.13:1 (light is 5.86:1). */
.btn-gold{background:var(--gold);color:var(--pine-deep);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn-outline{background:transparent;color:var(--vanilla);border-color:rgba(245,239,227,.7)}
.btn-outline:hover{background:rgba(245,239,227,.1);border-color:var(--vanilla)}
.btn-pine{background:var(--heading);color:var(--bg);border-color:var(--heading)}
.btn-pine:hover{opacity:.92}
/* Links: text in the heading colour with a gold underline. Gold text itself can't pass 4.5:1 on the
   light backgrounds without turning bronze, so gold carries the accent and the text carries the contrast. */
.text-link,.cookie-inner p a,.prose a,.prose .link-btn,.faq details p a{color:var(--heading);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:.25em}
.text-link:hover,.cookie-inner p a:hover,.prose a:hover,.prose .link-btn:hover,.faq details p a:hover{color:var(--heading);text-decoration-thickness:2px}
.text-link{font-weight:400;font-size:.9rem}

.band .copy{position:relative;z-index:1}

/* ---------- Images (fill their box, cropped to fit) ---------- */
.media{position:relative;margin:0;overflow:hidden;background:var(--surface)}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.ph-story.media img{object-position:center 40%}
.product .media{aspect-ratio:3 / 4;border-radius:var(--radius)}
.feature .media{aspect-ratio:5 / 3}
.feature .media img{object-position:center top}
.feature .media img.pos-low{object-position:center 72%}

/* ---------- Image swiper (used in a .media box) ---------- */
.swiper-track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.swiper-track::-webkit-scrollbar{display:none}
.swiper-track{cursor:grab}
.swiper-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.swiper-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start}
.swiper-slide img{user-select:none;-webkit-user-drag:none;pointer-events:none}
.swiper-track:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.swiper-bar{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;background:rgba(245,239,227,.4);cursor:pointer}
.swiper-bar-fill{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--gold)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:80px;position:relative}
.logo{display:inline-block;line-height:0}
.logo img{height:38px;width:auto}
.logo .on-light{display:var(--logo-light)}
.logo .on-dark{display:var(--logo-dark)}
.nav{display:flex;align-items:center;justify-content:flex-end}
.nav a{font-size:.92rem;font-weight:400;text-decoration:none;color:var(--text);padding:.45rem 1.15rem;transition:color .15s ease}
.nav a + a{border-left:1px solid var(--line)}
.nav a:last-child{padding-right:0}
.nav a:hover{color:var(--gold)}
.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:.2rem}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;background:none;border:0;padding:0;color:var(--text);cursor:pointer;border-radius:50%;text-decoration:none}
.icon-btn:hover{background:var(--surface)}
.icon-btn svg{width:21px;height:21px}
.menu-btn{display:none}

/* ---------- Bands (dark pine sections) ---------- */
.band{background:var(--band);color:var(--band-text);position:relative;overflow:hidden}
.band h1,.band h2,.band h3{color:var(--band-text)}
.band .copy p{color:var(--band-muted)}

/* ---------- Hero: full-width image, dark overlay, copy layered on top ----------
   Tune how much of the photo shows through with --hero-overlay (lower alphas = more image). */
.hero{position:relative;overflow:hidden;display:grid;align-items:center;min-height:clamp(440px,62vh,600px);
  --hero-overlay:linear-gradient(95deg,rgba(30,30,30,.7) 0%,rgba(30,30,30,.6) 45%,rgba(30,30,30,.48) 100%)}
.hero-media{position:absolute;inset:0;z-index:0}
/* One <picture> picks the photo, so the browser downloads only the one it shows:
   phones (760px and under) get the portrait photo, 901–1439px the small wide photo,
   and tablets plus large desktops the large wide photo. */
.hero-media picture,.hero-img{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-img{object-fit:cover;object-position:center 8%;filter:blur(3px) saturate(.9);transform:scale(1.04)}
/* Mobile hero photo: show from the top of Otto's hat */
@media (max-width:760px){.hero-img{object-position:center top}}
/* Large desktops only: slightly taller hero */
@media (min-width:1440px){.hero{min-height:clamp(480px,68vh,680px)}.band.hero h1{font-size:4rem}}
/* Desktop: blur fades from full on the left (behind the copy) to sharp on the right */
@media (min-width:901px){
  .hero-img{filter:saturate(.9);transform:none}
  .hero-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 25%,transparent 60%);
    mask-image:linear-gradient(90deg,#000 0%,#000 25%,transparent 60%)}
}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--hero-overlay)}
.hero .wrap{position:relative;z-index:2}
.hero h1,.hero .lede{text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero .lede{color:rgba(245,239,227,.92)}
.hero-copy{padding:4rem 0;max-width:36rem}
.hero h1{font-size:clamp(2.8rem,5.6vw,4.6rem);display:flex;align-items:baseline;gap:.22em;flex-wrap:wrap}
.inline-logo{height:1.28em;width:auto;position:relative;top:.14em}
.inline-logo-gold{display:inline-block;height:1.15em;vertical-align:-.12em;margin-left:.08em;top:0}
.lede{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.5;color:var(--band-muted);margin:1.05rem 0 1.75rem;max-width:32rem}
.actions{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- Split sections (copy + image) ---------- */
.copy{align-self:center}
.copy h2{font-size:clamp(2.2rem,3.8vw,3rem)}
.copy p{margin:1.3rem 0 1.9rem;max-width:30rem}
.copy p + p{margin-top:-.9rem}
@media (min-width:901px){.story .copy h2 + p{margin-top:.75rem}}
.copy .story-note{font-family:var(--font-body);font-weight:400;font-size:.95rem;line-height:1.3;color:var(--heading)}
.eyebrow{font-size:.95rem;letter-spacing:.04em;color:var(--muted);margin:0 0 1rem}
.copy .eyebrow{margin:0 0 1rem}
.band .copy .eyebrow{color:var(--band-muted)}

.story{padding-top:3rem}
.story .copy{grid-column:2;padding:2.5rem 3.5rem 2.5rem 0}
.ph-story{grid-column:3 / 4;border-radius:var(--radius);min-height:0;aspect-ratio:6 / 5}

.entrance .copy{grid-column:3;padding:5rem 0 5rem 3.5rem}
.ph-entrance{grid-column:1 / 3;border-radius:0;min-height:max(560px, 30vw)}
.ph-entrance.media img{object-position:center 45%}
/* Desktop: "Who is Otto?" mirrors the "Made to make an impression" band (pine background, full-bleed image) */
@media (min-width:901px){
  .story{margin-top:1.25rem;padding-top:0;background:var(--band);color:var(--band-text)}
  .story h2{color:var(--band-text)}
  .story .copy p{color:var(--band-muted)}
  .story .copy .story-note{color:var(--band-text)}
  .story .copy{padding:5rem 3.5rem 5rem 0}
  .ph-story{grid-column:3 / 5;border-radius:0;aspect-ratio:auto;min-height:max(560px, 30vw)}
}

.paint .copy{grid-column:3;padding:4.5rem 0 4.5rem 3.5rem}
.ph-paint{grid-column:1 / 3;border-radius:0;min-height:max(520px, 28vw)}
.ph-paint.media img{object-position:center 48%}

/* ---------- Features ---------- */
.features{padding:3rem 0 1.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.feature{background:var(--surface);border-radius:var(--radius);overflow:hidden;text-align:center;padding-bottom:1.6rem}
.feature h3{font-size:1.3rem;margin:1.1rem 1rem .35rem}
.feature p{font-size:.92rem;color:var(--muted);padding:0 1.5rem;line-height:1.5}

/* ---------- Specification ---------- */
.spec{background:var(--bg);padding:0 0 3.5rem}
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin:0}
.spec-grid > div{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:1.1rem 1rem 1.2rem;border:1px solid rgba(194,149,76,.75);border-radius:0}
.spec-grid dt{font-family:var(--font-body);font-weight:400;font-size:.95rem;line-height:1.3;color:var(--heading)}
.spec-grid dd{margin:.2rem 0 0;font-size:.88rem;color:var(--muted);line-height:1.45;max-width:14rem}

/* ---------- Collection ---------- */
.collection{padding:4.5rem 0}
.section-head{text-align:center;margin-bottom:2.25rem}
.section-head h2{font-size:clamp(2.1rem,3.8vw,2.9rem)}
.section-head p{color:var(--muted);font-size:1.05rem;margin-top:.3rem}
.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.product{background:var(--surface);border-radius:var(--radius);padding:1rem 1rem 1.1rem;text-align:center;display:flex;flex-direction:column}
.product h3{font-family:var(--font-body);font-weight:400;font-size:.95rem;color:var(--heading);margin:.9rem 0 .1rem;line-height:1.3}
.price{font-size:.85rem;color:var(--muted)}
.product .text-link{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line);font-size:.85rem}
.product .price + .text-link{margin-top:.9rem}


/* ---------- Closing call to action ---------- */
.cta{text-align:center;padding:4.25rem 0}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-size:clamp(1.9rem,3.5vw,2.6rem);margin-bottom:1.5rem}

/* ---------- Footer ---------- */
.site-footer{padding:2rem 0 1.5rem;border-top:1px solid var(--line)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.footer-nav{display:flex;gap:1.75rem;flex-wrap:wrap}
.footer-nav a{font-size:.86rem;text-decoration:none;color:var(--text)}
.footer-nav a:hover{color:var(--gold)}
.legal{font-size:.76rem;color:var(--muted);margin-top:1.5rem}

/* ---------- Tablet / mobile ---------- */
@media (max-width:1023px){
  .products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .header-inner{grid-template-columns:auto 1fr;min-height:66px}
  .logo img{height:30px}
  .nav{display:none;position:absolute;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);top:100%;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:.4rem 0 .6rem}
  .nav.open{display:flex}
  .nav a,.nav a:last-child{padding:.85rem var(--gutter);font-size:1rem}
  .nav a + a{border-left:0;border-top:1px solid var(--line)}
  .menu-btn{display:inline-grid}

  .breakout{grid-template-columns:1fr}
  .breakout > *,.story .copy,.entrance .copy,.paint .copy{grid-column:1}
  .hero{min-height:370px;align-items:end;--hero-overlay:linear-gradient(180deg,rgba(30,30,30,.42) 0%,rgba(30,30,30,.6) 45%,rgba(30,30,30,.78) 100%)}
  .hero-copy{padding:2rem 0 1.5rem;max-width:none}
  .hero .actions .btn{flex:1 1 100%;justify-content:center}
  /* Lift the photo on phones so Otto's face sits clear above the heading */
  .ph-story,.ph-entrance,.ph-paint{min-height:340px}
  .story .copy,.entrance .copy,.paint .copy{padding:3rem var(--gutter) 2.75rem}
  .paint .copy{padding-top:1.5rem}
  /* Story block on mobile: image first, inset to the text margins, copy tucked underneath */
  .story{padding-top:1.25rem}
  .ph-story{order:1;min-height:0;aspect-ratio:4 / 3;margin:0;border-radius:0}
  .story .copy{order:2;padding:1.75rem var(--gutter) 1.5rem}
  /* Tighter type and spacing on small screens */
  .copy .eyebrow{margin-bottom:.5rem}
  .copy h2{font-size:2rem}
  .copy p{margin:.9rem 0 1.4rem}
  .hero h1{font-size:2.6rem}
  .lede{margin-top:.35rem}
  .section-head h2{font-size:2rem}
  .cta h2{font-size:1.9rem}
  .copy p{max-width:none}

  .features{padding:1.5rem 0 .75rem}
  .grid-3{gap:.65rem}
  .feature{padding-bottom:1.1rem}
  .feature h3{font-size:1.1rem;margin:.8rem .5rem .25rem}
  .feature p{font-size:.78rem;padding:0 .6rem}

  .spec{padding:0 0 2.25rem}
  .spec-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .spec-grid > div{padding:1rem .75rem 1.1rem}
  .spec-grid dt{font-size:.95rem}
  .spec-grid dd{font-size:.9rem}


  .footer-inner{flex-direction:column;align-items:flex-start;gap:1.25rem}
}
@media (max-width:760px){
  .story .copy p + .story-note{margin-top:-.5rem}
  /* Spec tiles on phones: a peek carousel showing one tile and half of the next */
  .spec .wrap{width:100%}
  .spec-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;padding:0 var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .spec-grid::-webkit-scrollbar{display:none}
  .spec-grid > div{flex:0 0 calc((100% - .75rem) / 1.5);scroll-snap-align:start}
  .spec-grid dd{max-width:none}

  /* Feature blocks become a peek carousel: one card plus half the next, swipe to see more */
  .features .grid-3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;width:100%;margin-inline:0;padding:0 var(--gutter) .25rem;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .features .grid-3::-webkit-scrollbar{display:none}
  .feature{flex:0 0 calc((100% - .75rem) / 1.5);scroll-snap-align:start;padding-bottom:1.4rem}
  .feature h3{font-size:1.3rem;margin:1rem .75rem .3rem}
  .feature p{font-size:.86rem;padding:0 1rem}

  .collection{padding-top:2.5rem;padding-bottom:2.5rem}
  .collection .wrap{width:100%}
  .collection .section-head{padding:0 var(--gutter);margin-bottom:1.25rem}
  .products{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;padding:0 var(--gutter) .25rem;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .products::-webkit-scrollbar{display:none}
  .product{flex:0 0 calc((100% - .75rem) / 1.5);scroll-snap-align:start}
}

/* Mobile: tighter gap between the hero intro line and the buttons */
@media (max-width:760px){.hero .lede{margin-bottom:1rem}}
/* Mobile: keep word pairs together, so a new sentence never starts with one word stranded at a line end, and a paragraph never ends with one word on its last line */
@media (max-width:760px){.keep-words{white-space:nowrap}}
/* All screen sizes: short words (2 letters or fewer) and "and" / "or" never end a line; a sentence's last word never starts a line alone */
.keep-conj{white-space:nowrap}
/* "Your Otto, your way." heading: tighter line spacing */
#paint-title{line-height:.88}
/* White Stores notes */
.collection-note{text-align:center;color:var(--muted);font-size:.88rem;line-height:1.5;margin:1.75rem auto 0;max-width:44rem;padding:0 var(--gutter)}
.collection-note a,.legal a{color:inherit;text-decoration:none}
.collection-note a:hover,.legal a:hover{color:var(--gold)}
@media (max-width:760px){.collection-note{margin-top:1.25rem;font-size:.84rem}}
/* "Sold exclusively by White Stores." in a softer sage green */
:root{--sage-soft:#5F6E53}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sage-soft:#A9B79A}}
:root[data-theme="dark"]{--sage-soft:#A9B79A}
.story .copy .story-exclusive{color:var(--sage-soft)}
@media (min-width:901px){.story .copy .story-exclusive{color:#A9B79A}}
.story-exclusive a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.story-exclusive a:hover{color:var(--gold)}
/* Tighter gap between the White Stores note and the "Your Otto, your way." block */
#collection{padding-bottom:2.5rem}
@media (max-width:760px){#collection{padding-bottom:1.5rem}}
/* ---------- 404 page ---------- */
.not-found{min-height:100vh;min-height:100dvh;display:grid;place-items:center}
.not-found h1{font-size:clamp(2.2rem,5vw,3.6rem);display:flex;align-items:baseline;justify-content:center;gap:.22em;flex-wrap:wrap;margin-bottom:1rem}
.not-found p{color:var(--band-muted);margin-bottom:1.75rem}

/* ---------- Cookie consent ---------- */
[hidden]{display:none!important}
.btn-line{background:transparent;color:var(--heading);border-color:var(--heading)}
.btn-line:hover{background:var(--surface)}
.legal-links{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:.5rem}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.legal-links a:hover,.link-btn:hover{color:var(--gold)}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.12);padding:1.1rem 0 calc(1.1rem + env(safe-area-inset-bottom,0px))}
.cookie-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.cookie-inner p{font-size:.92rem;line-height:1.5;max-width:44rem}
/* Reject and Accept are the same size and weight: rejecting must be as easy as accepting */
.cookie-actions{display:flex;gap:.75rem}
.cookie-actions .btn{min-width:7.5rem;justify-content:center}
@media (max-width:760px){
  .cookie-actions{width:100%}
  .cookie-actions .btn{flex:1 1 0}
}

/* ---------- Text page (cookies) ---------- */
.prose{padding:3.5rem 0 4rem;max-width:46rem}
.prose h1{font-size:clamp(2.4rem,4.5vw,3.2rem);margin-bottom:1.25rem}
.prose h2{font-size:1.7rem;margin:2.25rem 0 .75rem}
.prose p,.prose li{margin:0 0 .9rem}
.table-scroll{overflow-x:auto;margin:0 0 1rem}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:34rem}
.prose th,.prose td{text-align:left;vertical-align:top;padding:.65rem .75rem;border-bottom:1px solid var(--line)}
.prose th{font-weight:400;color:var(--heading)}
.prose code{font-size:.88em}

/* ---------- FAQ ---------- */
/* Native <details> accordions: no JS, keyboard accessible, and Google indexes collapsed answers in full */
.faq{padding:4rem 0 4.5rem}
.faq-list{max-width:46rem;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font-weight:400;font-size:1.05rem;line-height:1.4;color:var(--heading)}
.faq summary::-webkit-details-marker{display:none}
/* The question text sits in one <span>: the summary is a flex row, so loose text (or the word-pair
   spans site.js adds) would each become a flex item and get spread across the row */
.faq summary::after{content:"+";flex:none;font-size:1.5rem;line-height:1;font-weight:300;color:var(--gold);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold)}
.faq details p{padding:0 2.5rem 1.3rem 0;color:var(--muted);font-size:.98rem;line-height:1.6}
.faq details p a{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
@media (max-width:760px){
  .faq{padding:2.5rem 0 3rem}
  .faq summary{font-size:1rem;padding:1rem 0}
  .faq details p{padding-right:0}
}