/* ---------------------------------------------------------------
   Solterra design system.

   One file, one system. Every colour, size and space is a token on
   :root; every page is built from the same handful of components
   below, so a change here moves the whole site at once. Templates
   carry no style="" attributes - the Content-Security-Policy in
   root/_headers forbids them.

   Fonts: docs/brand.md 4.2. The BN faces (Magnique, Trainwreck) are on a
   desktop licence, which does not cover a website; Fraunces and Jost stand in
   until a webfont licence is bought. `build.py --check` refuses the BN files.
   --------------------------------------------------------------- */

/* Fraunces 400 (soft, wonky) for titles and Jost 500 for caps: SIL OFL 1.1,
   Google Fonts' latin subsets, self-hosted. */
@font-face{font-family:'Fraunces';src:url('/static/fonts/Fraunces-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';src:url('/static/fonts/Jost-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cinzel';src:url('/static/fonts/Cinzel-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
/* Source Sans 3 (SIL OFL 1.1, SourceSans3-OFL.txt): Google Fonts' own latin
   subset, self-hosted so no request leaves the site. One variable file covers
   400 and 600. */
@font-face{font-family:'Source Sans 3';src:url('/static/fonts/SourceSans3-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';src:url('/static/fonts/SourceSans3-Italic-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;

  /* colour - the packaging sheet, plus two derived tones (docs/brand.md 4.1) */
  --cream:#fff7ea; --offwhite:#f3ede9; --stone:#dacdc3;
  --orange:#a83a23; --rust:#641d0f; --coffee:#220f0c;
  --bg:var(--cream); --surface:var(--offwhite); --rule:var(--stone); --border:#9a8a83;
  --text:var(--coffee); --text-muted:#64554f;
  --accent:var(--orange); --accent-hover:var(--rust);
  --field:var(--surface);

  /* tints and glass - every translucent colour on the site, named once */
  --tint:rgba(34,15,12,.07);          /* hover on a light surface */
  --tint-rule:rgba(34,15,12,.12);     /* hairline between joined buttons */
  --glass:rgba(255,247,234,.62);      /* toolbar over a photo header */
  --glass-solid:rgba(255,247,234,.95);/* toolbar over the cream page */
  --glass-pill:rgba(255,247,234,.9);  /* arrow pills and the buy bar */
  --glass-edge:rgba(255,255,255,.5);
  --shadow:0 1px 14px rgba(34,15,12,.08);
  --shadow-up:0 4px 22px rgba(34,15,12,.12);
  --scrim-side:linear-gradient(90deg,rgba(34,15,12,.64),rgba(34,15,12,.24) 55%,rgba(34,15,12,.04));
  --scrim-foot:linear-gradient(0deg,rgba(34,15,12,.35),rgba(34,15,12,0) 45%);
  --on-dark:var(--cream);
  --on-dark-muted:rgba(255,247,234,.78);
  --on-dark-faint:rgba(255,247,234,.62);
  --on-dark-rule:rgba(255,247,234,.16);
  --on-dark-tint:rgba(255,247,234,.12);
  --tk-on-dark:#f2b39f;               /* visible placeholders on the dark footer */

  /* type */
  --font-title:'Fraunces',Georgia,serif;
  --font-caps:'Jost',system-ui,sans-serif;   /* Trainwreck was all caps by design; Jost needs text-transform */
  --font-logo:'Cinzel',Georgia,serif;
  --font-text:'Source Sans 3',ui-sans-serif,-apple-system,sans-serif;
  --weight-title:0;        /* the +35% stroke Magnique needed; Fraunces has real weight */
  --h1:clamp(2.6rem,7vw,5.25rem);
  --h2:clamp(2rem,5vw,3.75rem);        /* a section's statement */
  --h2-sub:clamp(1.6rem,3.2vw,2.3rem); /* a heading inside a section */
  --h3:clamp(1.3rem,2.3vw,1.7rem);

  /* space */
  --gutter:clamp(1.25rem,5vw,3.5rem);
  --maxw:90rem;
  --measure:62ch;
  --section:clamp(4rem,9vw,7.5rem);
  /* the page's left edge at any width - the toolbar lines up with it too */
  --edge:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));

  /* toolbar */
  --bar-h:48px;
  --bar-inset:.625rem;
  --bar-clear:calc(var(--bar-h) + var(--bar-inset) * 2);

  --ease:cubic-bezier(.32,.72,0,1);

  /* the two leaf-shadow sections on home, kept the same height */
  --leaf-h:clamp(18rem,43vw,38rem);
}

/* ================================================================ base */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--bar-clear)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-text);
  font-size:1.0625rem;line-height:1.6;text-rendering:optimizeLegibility}
img,video{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}   /* beats the display rules below, e.g. on a video */
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--cream)}   /* orange on coffee is 2.9:1 */
::selection{background:var(--accent);color:var(--cream)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:46rem}
.skip{position:absolute;left:-9999px;z-index:99;background:var(--accent);color:var(--cream);
  padding:.875rem 1.5rem}
.skip:focus{left:1rem;top:1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* controls that only work with main.js stay hidden until it has loaded */
[data-js-only]{display:none}
.js [data-js-only]{display:flex}

/* every page but those with a full-bleed header clears the floating toolbar */
body:not(.has-hero) main{padding-top:var(--bar-clear)}

section{padding-block:var(--section)}
.section-alt{background:var(--surface)}
.after-head{padding-top:clamp(.5rem,2vw,1.5rem)}
.media-head + .after-head{padding-top:1.5rem}

/* ================================================================ type */

h1,h2,h3{font-family:var(--font-title);font-weight:400;letter-spacing:-.03em;line-height:1;
  -webkit-text-stroke:var(--weight-title) currentColor;margin:0 0 1rem}
h1{font-size:var(--h1)}
h2{font-size:var(--h2);max-width:18ch}
h3{font-size:var(--h3);letter-spacing:-.025em;line-height:1.12}
.sub-h,.prose h2,.break-h,.info-grid h2,.panels-head h2{font-size:var(--h2-sub)}
.prose h2{margin-top:3rem}
.prose h3{font-size:clamp(1.2rem,2vw,1.45rem);margin-top:2rem}

.eyebrow{display:block;font-family:var(--font-caps);text-transform:uppercase;font-size:.8rem;letter-spacing:.14em;
  color:var(--accent-hover);margin:0 0 .8rem}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--text-muted);max-width:46ch;margin:0 0 1.5rem}

.prose p,.prose li{max-width:var(--measure)}
.prose p,.prose ul,.prose ol,.prose table{margin:0 0 1.4rem}
.prose ul,.prose ol{padding-left:1.15rem}
.prose li{margin-bottom:.8rem}
/* a wide table scrolls inside itself rather than widening the page on a phone */
.prose table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--rule)}
.prose th{font-family:var(--font-caps);text-transform:uppercase;font-size:.75rem;letter-spacing:.1em;color:var(--text-muted)}
.prose a{text-decoration-color:var(--accent);text-underline-offset:.2em}

/* ================================================================ buttons */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;
  font-family:var(--font-caps);text-transform:uppercase;font-size:.9rem;letter-spacing:.08em;text-decoration:none;
  padding:.9rem 1.7rem;background:var(--accent);color:var(--cream);border:1px solid var(--accent);
  cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease),transform .1s}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:var(--tint)}
.on-dark .btn.ghost:hover{background:var(--on-dark-tint)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
.actions.more{margin-top:3rem}

/* one arrow-pair component: .pill is the standard size, .pill.sm the hero's,
   .pill.outline sits on the page rather than over a photo */
.pill{border-radius:999px;background:var(--glass-pill);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pill.outline{background:transparent;border:1px solid var(--border)}
.pill button{position:relative;width:48px;height:44px;border:0;padding:0;background:transparent;
  cursor:pointer;display:grid;place-items:center;color:var(--text);
  transition:background .2s var(--ease)}
.pill button:first-child{border-radius:999px 0 0 999px}
.pill button:last-child{border-radius:0 999px 999px 0}
.pill button:hover{background:var(--tint)}
.pill button + button{box-shadow:inset 1px 0 0 var(--tint-rule)}
.pill button:focus-visible{outline-offset:-3px}
.pill svg{width:16px;height:16px}
/* 25% smaller to look at; the hit area is extended so it stays 44px */
.pill.sm button{width:39px;height:33px}
.pill.sm button::after{content:'';position:absolute;inset:-6px -3px}
.pill.sm button:first-child::after{inset:-6px 0 -6px -8px}
.pill.sm button:last-child::after{inset:-6px -8px -6px 0}
.pill.sm svg{width:13.5px;height:13.5px}

/* ================================================================ toolbar
   Thin and nearly edge to edge, with its logo and links lined up with the
   page content below. Translucent over a photo header; firm once the page
   scrolls past it, and firm from the start on pages without one. */

.toolbar{position:fixed;z-index:50;top:var(--bar-inset);left:var(--bar-inset);right:var(--bar-inset);
  height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-left:max(.9rem, calc(var(--edge) - var(--bar-inset) - 1px));
  padding-right:max(.35rem, calc(var(--edge) - var(--bar-inset) - .8rem - 1px));
  border-radius:10px;background:var(--glass-solid);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--rule);box-shadow:var(--shadow-up);
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.toolbar.over-media{background:var(--glass);border-color:var(--glass-edge);box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:.85rem;min-height:44px;text-decoration:none;color:var(--text);
  font-family:var(--font-logo);font-weight:700;font-size:.95rem;letter-spacing:.17em}
/* Line art drawn for large sizes: at 28px a stroke is about a pixel, so the
   logo is shown as big as the 48px bar comfortably takes. */
.brand-mark{height:34px;width:auto}
.brand-word{height:17px;width:auto}
/* the lotus is a mask, so it has no background and takes the text colour */
.brand i{display:block;width:26px;height:26px;background:currentColor;
  -webkit-mask:url('/static/img/mark.svg') center/contain no-repeat;
  mask:url('/static/img/mark.svg') center/contain no-repeat}
.toolbar nav{display:flex}
.toolbar nav a{display:flex;align-items:center;min-height:44px;padding:0 .8rem;border-radius:7px;
  font-family:var(--font-caps);text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;text-decoration:none;color:var(--text);
  white-space:nowrap;transition:background .25s var(--ease)}
.toolbar nav a:hover{background:var(--tint)}
.toolbar nav a[aria-current]{text-decoration:underline;text-underline-offset:.45em;
  text-decoration-color:var(--accent)}
/* a phone has room for the lotus and the three links, not the word as well */
.toolbar .brand{flex:none}
@media (max-width:36rem){
  .toolbar .brand span,.toolbar .brand-word{display:none}
}
@media (max-width:30rem){
  .toolbar nav a{padding:0 .55rem;font-size:.74rem}
}
@media (prefers-reduced-transparency:reduce){
  .toolbar,.toolbar.over-media{background:var(--bg);backdrop-filter:none}
}

/* ================================================================ hero
   Full viewport. Slides change ONLY when someone presses an arrow; a video
   slide loops until then. The shop header uses the same slides. */

.hero{position:relative;height:100svh;min-height:34rem;overflow:hidden;padding:0;color:var(--on-dark)}
[data-slides] .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
[data-slides] .slide.on{opacity:1}
[data-slides] .slide img,[data-slides] .slide video{width:100%;height:100%;object-fit:cover}
.scrim{position:absolute;inset:0;pointer-events:none;background:var(--scrim-side),var(--scrim-foot)}
.hero-copy{position:relative;z-index:2;height:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gutter) clamp(4.5rem,9vh,6.5rem);display:flex;flex-direction:column;
  justify-content:flex-end;align-items:flex-start}
.hero-copy .eyebrow{color:var(--on-dark-muted)}
.hero-copy h1{font-size:clamp(2.08rem,6.4vw,4.8rem);max-width:13ch;margin-bottom:.5rem}
.hero-copy .lead{color:var(--on-dark-muted);margin:.25rem 0 1.75rem;font-family:var(--font-caps);text-transform:uppercase;
  font-size:clamp(.82rem,1.2vw,.95rem);letter-spacing:.12em;text-transform:uppercase}
.hero-copy h1 + .actions{margin-top:1.5rem}
.hero-controls{position:absolute;z-index:3;right:var(--edge);bottom:1.75rem;display:flex;align-items:center;gap:.6rem}
.hero-controls .vid-toggle:focus-visible{position:static}

.rise{opacity:0;transform:translateY(20px)}
.playing .rise{animation:rise .85s var(--ease) both}
.playing .rise:nth-child(2){animation-delay:.09s}
.playing .rise:nth-child(3){animation-delay:.18s}
.playing .rise:nth-child(4){animation-delay:.27s}
@keyframes rise{to{opacity:1;transform:none}}

/* Shop, About and Contact open on a shorter version of the same thing. An
   illustration takes dark type and no scrim, since it is light. */
.media-head{position:relative;height:min(80svh,46rem);min-height:26rem;overflow:hidden;padding:0;
  color:var(--on-dark);background:var(--text)}
/* Shop, Journal, About and every journal post share this height */
.media-head.compact{height:min(46.2svh,27.06rem);min-height:17.16rem}
.media-head > img,.media-head > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-head .hero-copy{padding-bottom:clamp(2.5rem,6vh,4rem)}
.media-head h1{font-size:var(--h1)}
.media-head.art{color:var(--text);background:var(--surface)}
.media-head.art .eyebrow{color:var(--text)}
.media-head .hero-controls{bottom:clamp(2.5rem,6vh,4rem)}
/* on a phone the heading runs the full width, so the arrows move up out of its way */
@media (max-width:48rem){.media-head .hero-controls{bottom:auto;top:calc(var(--bar-clear) + .5rem)}}

/* Every autoplaying loop can be stopped (WCAG 2.2.2): a click or tap on the
   video does it, and this button is the keyboard's way - out of sight until
   it has focus, like the skip link. */
.vid-toggle{display:none;position:absolute;z-index:4;left:var(--edge);bottom:1.25rem;min-height:44px;
  padding:0 1rem;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--font-caps);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;color:var(--text);
  background:var(--glass-pill);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.js .vid-toggle{display:inline-flex;align-items:center}
.vid-toggle:not(:focus-visible){width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.media-head .vid-toggle,.break .vid-toggle{left:auto;right:var(--edge)}

/* ================================================================ page head
   The top of every page without a full-bleed header. */

.page-head{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem)}
.page-head h1{max-width:15ch;margin-bottom:.75rem}
.page-head .lead{margin-bottom:0}
/* an article's title sits in its reading column, at a reading size */
.page-head.narrow h1{font-size:clamp(2.2rem,5vw,3.5rem);max-width:none}
.page-head.narrow .lead{max-width:none}

/* An article: its cover is the page header (.post-band, the compact band
   every page uses), then one centred column 52.5rem (840px) wide - b,
   halfmoon's journal width - in a larger size so the wide lines still read. */
.post-band .hero-copy{max-width:calc(52.5rem + 2 * var(--gutter))}
.post-band h1{font-size:clamp(2rem,4.4vw,3.4rem);max-width:20ch;text-wrap:balance}
.post{max-width:calc(52.5rem + 2 * var(--gutter));padding-top:clamp(2rem,5vw,3.5rem)}
.post-lead{max-width:none;font-size:clamp(1.15rem,1.6vw,1.3rem);margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.post-body{font-size:clamp(1.05rem,1.25vw,1.15rem);line-height:1.7}
.post-body p,.post-body li{max-width:none}
.post-img{margin:2.25rem 0}
.post-img img{display:block;width:100%;height:auto;background:var(--surface)}
.post-shop{margin-top:2.5rem}

.section-head{margin-bottom:clamp(2rem,4vw,3rem)}
.section-head h2{margin-bottom:.5rem}
.section-head .lead{margin-bottom:0}

/* ================================================================ product card
   A small carousel of lifestyle photos with the video as the second slide,
   a position bar underneath, and a crossfade to the video on hover. */

.cards{list-style:none;padding:0;margin:0;display:grid;gap:3rem 1.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:48rem){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards:has(> li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
.pcard{display:flex;flex-direction:column;min-width:0}
.pcard-media{position:relative}
.pcard-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior-x:contain;aspect-ratio:1;background:var(--surface)}
.pcard-track::-webkit-scrollbar{display:none}
.pcard-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;overflow:hidden;display:block}
.pcard-slide img,.pcard-slide video,.pcard-hover{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.pcard:hover .pcard-slide img,.pcard:hover .pcard-hover{transform:scale(1.03)}
.pcard-hover{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease),transform .8s var(--ease)}
.pcard.hovering .pcard-hover{opacity:1}
.pcard-arrow{display:none;position:absolute;z-index:2;top:50%;width:36px;height:36px;margin-top:-18px;
  border:0;padding:0;border-radius:50%;place-items:center;cursor:pointer;color:var(--text);
  background:var(--glass-pill);opacity:0;transition:opacity .25s var(--ease)}
.js .pcard-arrow{display:grid}
.pcard-arrow svg{width:14px;height:14px}
.pcard-arrow.prev{left:.6rem}
.pcard-arrow.next{right:.6rem}
.pcard-arrow:focus-visible{outline-offset:-3px}
.pcard:hover .pcard-arrow,.pcard-arrow:focus-visible{opacity:1}
@media (hover:none){.js .pcard-arrow{display:none}}
.pcard-bar{position:relative;height:2px;margin-top:.85rem;background:var(--rule);overflow:hidden}
.pcard-bar span{position:absolute;inset:0 auto 0 0;background:var(--text);
  width:calc(100% / var(--n,1));transform:translateX(calc(var(--i,0) * 100%));
  transition:transform .45s var(--ease)}
.pcard-bar[data-n="2"]{--n:2} .pcard-bar[data-n="3"]{--n:3} .pcard-bar[data-n="4"]{--n:4}
.pcard-bar[data-n="5"]{--n:5} .pcard-bar[data-n="6"]{--n:6} .pcard-bar[data-n="7"]{--n:7}
.pcard-bar[data-n="8"]{--n:8}
.pcard h3{margin:1.1rem 0 .3rem;text-align:center;text-wrap:balance}
.pcard h3 a{text-decoration:none}
.pcard .meta{margin:0;text-align:center;font-size:.95rem;color:var(--text-muted)}
.pcard .meta:last-of-type{margin-bottom:1.1rem}
.pcard .btn{width:100%;margin-top:auto}
/* in a row, reserve two lines for every title so subtitles and buttons line up */
@media (min-width:48rem){
  .pcard h3{min-height:2.24em;display:flex;align-items:flex-start;justify-content:center}
}

/* ================================================================ image sections */

/* the wide rectangle - moves slower than the page */
.break{position:relative;height:var(--leaf-h);overflow:hidden;padding:0;color:var(--on-dark)}
.break > img,.break > video{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;
  will-change:transform}
.break .cap{position:absolute;z-index:2;left:0;right:0;bottom:0;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gutter) clamp(1.75rem,5vw,3.5rem)}
.break-h{margin:0;max-width:24ch}

/* a second full-screen moment near the bottom of a page */
/* the same height as the wide strip above, cropped from the bottom: the leaves are at the top */
.fullbleed{position:relative;height:var(--leaf-h);overflow:hidden;padding:0}
.fullbleed > img,.fullbleed > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center top}

.arrow{flex:0 0 auto}

/* ================================================================ journal */

.post-cards{list-style:none;padding:0;margin:0;display:grid;gap:3rem 1.75rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:48rem){
  .post-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .post-cards:has(> li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
.post-card{display:flex;flex-direction:column;height:100%;text-decoration:none;min-width:0}
.post-card .img{display:block;overflow:hidden;aspect-ratio:16/9;background:var(--surface);margin-bottom:1.1rem}
.post-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post-card:hover img{transform:scale(1.04)}
.post-card h3{margin-bottom:.5rem}
.post-card .desc{display:block;margin:0 0 1rem;color:var(--text-muted)}
.post-card .go{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-caps);text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;color:var(--accent)}

/* The journal page: every post as a tile */
.journal-tiles{padding-top:clamp(2.5rem,5vw,4rem)}
/* Home: the same tiles as one sideways row, two to a screen (one and a peek
   on a phone), moved by the arrows or a swipe */
.post-cards.post-rail{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:85%;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.post-rail::-webkit-scrollbar{display:none}
.post-rail > li{scroll-snap-align:start}
@media (min-width:48rem){.post-cards.post-rail{grid-template-columns:none;grid-auto-columns:calc((100% - 1.75rem) / 2)}}
.rail-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.5rem}

.cover{margin-block:0 clamp(2.5rem,5vw,4rem)}
.cover img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* Contact: one brown band, the details beside the sign-up card - the same
   pairing as the footer, so the page and the footer read as one block */
.contact-band{background:var(--text);color:var(--on-dark);border-bottom:1px solid var(--on-dark-rule)}
.contact-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media (min-width:60rem){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.contact-info .prose p{color:var(--on-dark-muted);max-width:44ch}
.contact-list{margin:1.5rem 0 0;border-top:1px solid var(--on-dark-rule)}
.contact-list div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1.5rem;
  padding:.4rem 0;border-bottom:1px solid var(--on-dark-rule)}
.contact-list dt{font-family:var(--font-caps);text-transform:uppercase;font-size:.75rem;letter-spacing:.1em;color:var(--on-dark-faint);
  padding-block:.75rem}
.contact-list dd{margin:0;text-align:right;padding-block:.5rem;line-height:1.55}
.contact-list a{color:var(--on-dark)}
@media (max-width:40rem){
  .contact-list div{flex-direction:column;align-items:flex-start;gap:0}
  .contact-list dt{padding-block:.75rem 0}
  .contact-list dd{text-align:left}
}

/* ================================================================ product page */

.pdp{display:grid;gap:2rem;align-items:start;padding-block:1.25rem clamp(3rem,6vw,4.5rem)}
@media (min-width:64rem){
  .pdp{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.5rem}
  /* the details column is long; the pictures stay in view beside it */
  .gallery{position:sticky;top:calc(var(--bar-clear) + 1rem)}
}
.pdp h1{font-size:clamp(2.1rem,4.2vw,3.25rem);max-width:14ch;margin-bottom:.7rem;text-wrap:balance}
/* name, size, tags: the same three lines as the product card */
.pdp-lines{margin:0 0 1.5rem}
.pdp-lines p{margin:0;font-size:1.05rem;color:var(--text-muted)}
.pdp-lines .tags{color:var(--text)}

/* The rail is exactly as tall as the stage beside it and scrolls inside
   itself, with a visible scrollbar, so every thumbnail can be reached. */
.gallery{display:grid;gap:.6rem;grid-template-columns:64px minmax(0,1fr)}
.rail{grid-column:1;grid-row:1}
.stage{grid-column:2;grid-row:1}
.rail{display:flex;flex-direction:column;gap:.5rem;height:0;min-height:100%;overflow-y:auto;
  scrollbar-width:thin;overscroll-behavior:contain}
.rail button{flex:0 0 auto;width:64px;height:64px;padding:0;border:1px solid transparent;
  background:none;cursor:pointer;overflow:hidden}
.rail button:focus-visible{outline-offset:-3px}
.rail img{width:100%;height:100%;object-fit:cover}
.rail button[aria-current="true"]{border-color:var(--text)}
@media (max-width:40rem){
  .gallery{grid-template-columns:minmax(0,1fr)}
  .rail,.stage{grid-column:auto;grid-row:auto}
  .rail{flex-direction:row;overflow-x:auto;height:auto;min-height:0}
  /* four and a half thumbnails: the half says the row scrolls */
  .rail button{width:calc((100% - 2rem) / 4.5);height:auto;aspect-ratio:1}
}
/* the stage is a swipeable strip: a finger, a trackpad or the arrows move it */
.stage{position:relative;overflow:hidden;aspect-ratio:1;background:var(--surface)}
.stage-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior-x:contain}
.stage-track::-webkit-scrollbar{display:none}
.stage-track:focus-visible{outline-offset:-3px}
.shot{flex:0 0 100%;min-width:0;height:100%;scroll-snap-align:start}
.shot img,.shot video{width:100%;height:100%;object-fit:cover}
/* shorter on phones, so the Amazon button makes the first screen */
@media (max-width:40rem){.stage{aspect-ratio:5/4}}
.stage .pill{position:absolute;z-index:2;right:.9rem;bottom:.9rem}
.stage .vid-toggle{z-index:2;left:.9rem;bottom:.9rem}
/* a play mark on the rail's video thumbnails */
.rail button[data-kind="video"]{position:relative}
/* a dark disc behind the triangle, so the mark reads on a light photo too */
.rail button[data-kind="video"]::before{content:'';position:absolute;left:50%;top:50%;width:28px;height:28px;
  margin:-14px 0 0 -14px;border-radius:50%;background:rgba(34,15,12,.6)}
.rail button[data-kind="video"]::after{content:'';position:absolute;left:50%;top:50%;
  transform:translate(-35%,-50%);border-left:11px solid var(--cream);border-block:7px solid transparent}

.reviews-link{display:inline-flex;align-items:center;min-height:44px;margin:.25rem 0 .5rem;font-size:.92rem;
  color:var(--text-muted);text-underline-offset:.25em}
.variant{display:flex;gap:.5rem;margin:0 0 1.25rem}
.variant a{display:flex;align-items:center;min-height:44px;padding:0 1.15rem;text-decoration:none;
  font-family:var(--font-caps);text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;color:var(--text-muted);
  border:1px solid var(--border)}
.variant a[aria-current]{background:var(--text);color:var(--cream);border-color:var(--text)}
.spec{margin:1.75rem 0 0;border-top:1px solid var(--rule);font-size:.93rem;color:var(--text-muted)}
.spec > div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}
.spec dt,.spec dd{margin:0}
.spec dd{color:var(--text);text-align:right}
.acc + .spec{margin-top:0;border-top:0}
/* Features: a short checklist rather than one long line */
.spec .features{flex-direction:column;gap:.7rem}
.spec .features dd{text-align:left}
.spec .features ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem 1.25rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.spec .features li{position:relative;padding-left:1.05rem}
.spec .features li::before{content:'';position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}

.iconrow{list-style:none;padding:0;margin:1.75rem 0;display:grid;gap:1.25rem .75rem;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.iconrow li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem}
/* in the text colour and at 56px: the line art is drawn for large sizes, and
   at 42px in orange it read as faint */
.iconrow i{display:block;width:56px;height:56px;background:var(--text);
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.iconrow span{font-family:var(--font-caps);text-transform:uppercase;font-size:.68rem;letter-spacing:.09em;line-height:1.45}
.i-nature{--icon:url('/static/img/icons/nature.svg')}
.i-performance{--icon:url('/static/img/icons/performance.svg')}
.i-design{--icon:url('/static/img/icons/design.svg')}
.i-nontoxic{--icon:url('/static/img/icons/nontoxic.svg')}

/* one accordion for everything that folds: Description, About, each FAQ */
.acc{border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:1.5rem;min-height:44px;padding:1.2rem 0;
  font-family:var(--font-title);font-size:var(--h3);line-height:1.15;
  letter-spacing:-.025em;-webkit-text-stroke:var(--weight-title) currentColor}
.acc.small summary{font-size:clamp(1.1rem,1.8vw,1.3rem);padding:1rem 0}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';flex:0 0 auto;font-family:var(--font-text);font-size:1.5rem;line-height:1;
  -webkit-text-stroke:0;color:var(--accent);transition:transform .3s var(--ease)}
.acc details[open] > summary::after{transform:rotate(45deg)}
.acc .fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.acc details[open] .fold{grid-template-rows:1fr}
.acc .fold > div{overflow:hidden}
.acc .fold .prose{padding-bottom:1.4rem}
.product-meta .acc{margin-top:1.75rem}
.product-meta .acc .prose{font-size:.98rem;color:var(--text)}
.product-meta .acc .prose li{margin-bottom:.6rem}
/* Description reads as the first row of the spec list below it */
.spec-acc summary{font-family:var(--font-text);font-size:.93rem;letter-spacing:0;-webkit-text-stroke:0;
  line-height:1.6;color:var(--text-muted);padding:.7rem 0}
.spec-acc summary::after{font-size:1.25rem}
/* the FAQ follows the A+ panels, on the page's own cream */
.faq-section h2{margin-bottom:1rem}

.info-grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:60rem){.info-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.info-grid h2{margin-bottom:1rem}

/* A+ modules, full bleed */
.panels-section{padding-bottom:0}
.panels-head{margin-bottom:1.25rem}
.panels-head h2{margin:0}
.panels-foot{display:flex;justify-content:flex-end;margin-top:1rem}
.panels{display:grid;grid-auto-flow:column;grid-auto-columns:min(94vw,66rem);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:var(--edge);scroll-padding-inline:var(--edge)}
.panels::-webkit-scrollbar{display:none}
.panels img{scroll-snap-align:start;width:100%;background:var(--surface)}

.buybar{position:sticky;bottom:.75rem;z-index:20;display:flex;gap:1rem;align-items:center;
  justify-content:space-between;padding:.8rem 1.1rem;margin:0 auto 1.5rem;
  width:min(calc(100% - 2 * var(--gutter)), calc(var(--maxw) - 2 * var(--gutter)));
  background:var(--glass-pill);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--rule)}
.buybar > div{min-width:0}
.buybar b{display:block;font-family:var(--font-title);font-weight:400;font-size:1.15rem;letter-spacing:-.02em;
  -webkit-text-stroke:var(--weight-title) currentColor;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar span{display:block;font-size:.85rem;color:var(--text-muted)}
.buybar .btn{flex:0 0 auto}
/* main.js tucks it away until the page's own button has scrolled off */
.js .buybar.tucked{transform:translateY(calc(100% + 1.5rem));opacity:0;visibility:hidden}
.js .buybar.ready{transition:transform .4s var(--ease),opacity .4s var(--ease),visibility 0s}
.js .buybar.ready.tucked{transition:transform .4s var(--ease),opacity .4s var(--ease),visibility 0s .4s}
/* on a phone: one slim row, not a quarter of the screen */
@media (max-width:48rem){
  .buybar{padding:.5rem .6rem .5rem .9rem;gap:.6rem}
  .buybar b{font-size:.9rem;white-space:normal;line-height:1.15;display:-webkit-box;
    -webkit-box-orient:vertical;-webkit-line-clamp:2}
  .buybar span{display:none}
  .buybar .btn{min-height:44px;padding:.55rem .9rem;font-size:.76rem}
}
@media (max-width:22.5rem){
  .buybar{padding-left:.75rem}
  .buybar .btn{padding-inline:.65rem;letter-spacing:.04em}
}

/* ================================================================ info card
   The "keep in touch" card. Only the unpublished Contact page uses it now. */

.info-card{position:relative;isolation:isolate;overflow:hidden;background:var(--cream);color:var(--text);
  padding:clamp(1.5rem,3vw,2rem);border:1px solid var(--rule)}
/* Ahasan's botanical card, faint enough that the form stays the point */
.info-card::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;
  background:url('/static/img/site/art/sign-up/1.svg') center/cover no-repeat}
/* 160 KB of art: main.js adds .near when the card is a screen away */
.js .info-card:not(.near)::before{background:none}
.info-card h3{margin-bottom:.4rem}
.info-card p{margin:0 0 1.1rem;font-size:.95rem;color:var(--text-muted)}
.info-card label{display:block;font-family:var(--font-caps);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;margin-bottom:.4rem}
.info-card .row{display:flex;gap:.5rem;flex-wrap:wrap}
.info-card input{flex:1 1 12rem;min-width:0;min-height:48px;padding:0 .9rem;font:inherit;color:var(--text);
  background:var(--field);border:1px solid var(--border)}
.info-card input:focus-visible{outline-offset:0}
.info-card .fine{margin:.9rem 0 0;font-size:.8rem;line-height:1.5}
.info-card .fine a{color:var(--text)}
.on-dark .info-card :focus-visible{outline-color:var(--accent)}

/* ================================================================ about
   Picture-led, like b, halfmoon's "our story": wide statements, photos edge
   to edge, the two materials side by side, then the three products. */
.about-open{padding-block:clamp(3rem,8vw,6rem);text-align:center}
.about-statement{font-family:var(--font-title);font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.15;
  letter-spacing:-.02em;max-width:32ch;margin:0 auto;text-wrap:balance}
.about-break img{display:block;width:100%;height:var(--leaf-h);object-fit:cover}
.about-materials,.about-made{padding-block:clamp(2.5rem,6vw,4.5rem)}
.about-materials{background:var(--surface)}
.material-grid{display:grid;gap:clamp(1.75rem,4vw,3rem);margin-top:clamp(1.25rem,3vw,2rem)}
.material-grid img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:1.25rem}
.material-grid h3,.made-grid h3{font-size:var(--h3);margin:0 0 .5rem}
.material-grid p{margin:0;max-width:62ch}
.made-grid{list-style:none;padding:0;margin:clamp(1.25rem,3vw,2rem) 0 1.75rem;display:grid;gap:clamp(1.5rem,3vw,2rem)}
.made-grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;margin-bottom:1rem;background:var(--surface)}
.made-grid h3 a{text-decoration:none;color:inherit}
.made-grid p{margin:0;color:var(--text-muted)}
@media (min-width:48rem){
  .material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .made-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.about-close{padding-block:clamp(2.5rem,6vw,4.5rem);text-align:center}
.about-close p{max-width:46ch;margin:0 auto 1.25rem}
.about-close .actions{justify-content:center;margin:0}

/* ================================================================ footer
   Brand on the left, then Shop, Solterra and Contact: no sign-up card, as the
   site sends no email. */

/* kept tight: about a quarter less height than the first version */
.site-footer{background:var(--text);color:var(--on-dark);padding-block:clamp(2.6rem,5.25vw,4.1rem) 1.25rem}
.site-footer a{color:var(--on-dark);text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-underline-offset:.25em}
.footer-grid{display:grid;gap:2rem}
@media (min-width:60rem){.footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)}}
.footer-brand .brand{color:var(--on-dark);font-size:1.15rem;margin-bottom:.6rem;gap:.75rem}
.footer-brand .brand i{width:32px;height:32px}
.footer-brand .brand-mark{height:40px}
.footer-brand .brand-word{height:21px}
.contact-line.social{gap:.55rem}
.contact-line.social svg{flex:0 0 auto}
.footer-brand p{margin:0 0 .45rem;color:var(--on-dark-muted);max-width:34ch}
.contact-line{display:inline-flex;align-items:center;min-height:34px}
.footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.footer-contact{grid-column:1 / -1}
@media (min-width:40rem){.footer-links{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-contact{grid-column:auto}}
.footer-contact p{margin:0 0 .45rem;font-size:.95rem;color:var(--on-dark-muted)}
.footer-h{font-family:var(--font-caps);text-transform:uppercase;font-size:.74rem;letter-spacing:.12em;line-height:1.6;
  -webkit-text-stroke:0;color:var(--on-dark-faint);margin:0 0 .5rem;max-width:none}
.footer-links ul{list-style:none;padding:0;margin:0}
.footer-links a{display:inline-flex;align-items:center;min-height:32px;font-size:.95rem;text-wrap:balance}
/* Privacy above the copyright, both in the same colour as the footer links */
.footer-base{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  margin-top:clamp(1.75rem,3.75vw,3rem);padding-top:1rem;border-top:1px solid var(--on-dark-rule);
  font-size:.85rem;color:var(--on-dark)}
.footer-base p{margin:0}
.footer-base a{display:inline-flex;align-items:center;min-height:32px}
.tk{color:var(--tk-on-dark)}

/* ================================================================ phones
   Tap targets are keyed to WIDTH, not pointer type: `pointer: coarse` is not
   reported by every phone browser or by device emulation. */

@media (max-width:48rem){
  .pcard h3 a{display:inline-flex;align-items:center;min-height:44px}
  .footer-links a,.contact-line,.footer-base a{min-height:44px}
  /* a two-line link reads as one item, with space before the next */
  .footer-links a{line-height:1.3;padding-block:.4rem}
  .iconrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panels{grid-auto-columns:calc(100vw - 2 * var(--edge));gap:var(--edge)}
  .prose table{font-size:.85rem}
  .prose th,.prose td{padding:.55rem .4rem}
  .prose th:first-child,.prose td:first-child{padding-left:0}
  .prose th:last-child,.prose td:last-child{padding-right:0}
  /* clear of the arrows at the bottom of the hero */
  .hero-copy{padding-bottom:calc(1.75rem + 33px + 1.5rem)}
  /* no leaves above the footer on a phone; hidden, so it never loads either */
  .fullbleed{display:none}
  /* a finger swipes the product gallery; the arrows only covered the photo */
  .stage .pill{display:none}
}
/* the smallest phones: four links and the lotus in 300px */
@media (max-width:23rem){
  .toolbar{gap:.5rem}
  .toolbar .brand-mark{height:28px}
  .toolbar nav a{padding:0 .35rem;letter-spacing:.06em}
}
/* hero slide 2 on a portrait screen: keep the roller's lotus end in frame */
@media (max-aspect-ratio:3/4){
  .hero .slide:nth-child(2) video{object-position:36% 50%}
}

/* ================================================================ motion */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.15s !important}
  .rise{opacity:1;transform:none}
  .break > img,.break > video{transform:none !important}
}