/* Allura — red clay.
   Art direction: a ceramicist's material sample book. Grain over every ground,
   hairline rules as the connective device, a catalogue that numbers itself, and
   the three clay states shown as actual colour fields rather than described. */

*{box-sizing:border-box}
/* The UA sheet hides [hidden] elements, and any author rule that gives one
   a display wins over it — the empty bag badge shipped as a bare dot, and
   the drawer showed its totals and order form with nothing in the bag.
   !important here is the fix for the whole class, not a patch for one. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink-body);
  font-family:var(--face-body);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;position:relative}
/* The tooth. Over the whole page, under every interaction. */
body::before{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;
  background:var(--grain);opacity:.055;mix-blend-mode:multiply}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--face-display);font-weight:500;margin:0;
  text-wrap:balance;color:var(--ink);letter-spacing:var(--tracking-display)}
p{margin:0}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-2);top:var(--s-2);background:var(--ground);
  padding:var(--s-1);z-index:1000}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.label{font-family:var(--face-body);font-size:var(--step--1);font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent)}
.measure{max-width:var(--measure)}
.shell{max-width:var(--page);margin-inline:auto;padding-inline:var(--s-3)}

/* ============ header ============ */
.site-head{display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-3);position:sticky;top:0;z-index:40;
  background:var(--ground);border-bottom:var(--rule)}
.mark{margin-inline-end:auto}
.mark img{width:120px}
.site-nav{display:flex;gap:var(--s-3);font-size:var(--step--1);
  letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:600}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;
  position:relative;transition:color .18s ease}
.site-nav>.nav-item>a::before{content:"";position:absolute;inset-inline:0;
  bottom:12px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.site-nav>.nav-item>a:hover::before,
.site-nav>.nav-item>a.here::before{transform:scaleX(1)}
.site-nav a:hover{color:var(--accent)}
.nav-toggle{display:none;background:none;border:var(--rule);color:var(--ink);
  font:inherit;font-size:var(--step--1);font-weight:600;min-height:44px;
  padding-inline:var(--s-2);letter-spacing:var(--tracking-label);
  text-transform:uppercase;cursor:pointer}

.nav-item{position:relative}
.has-sub>a::after{content:"";display:inline-block;margin-inline-start:.5em;
  border:.28em solid transparent;border-top-color:currentColor;
  transform:translateY(.2em)}
.submenu{display:none;position:absolute;inset-inline-start:0;inset-block-start:100%;
  min-width:15rem;background:var(--ground);border:var(--rule);
  padding:var(--s-1) 0;z-index:50}
.nav-item:hover>.submenu,.nav-item:focus-within>.submenu{display:block}
.submenu a{display:flex;align-items:center;min-height:44px;
  padding:var(--s-1) var(--s-2);text-transform:none;letter-spacing:0;
  font-weight:400;font-size:var(--step--1);transition:background .18s ease}
.submenu a:hover{background:var(--surface)}

@media (max-width:860px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;inset-block-start:100%;inset-inline:0;
    flex-direction:column;gap:0;background:var(--ground);
    padding:var(--s-2) var(--s-3);border-bottom:var(--rule)}
  .site-nav.open{display:flex}
  .nav-item{width:100%}
  .submenu{display:block;position:static;border:0;min-width:0;background:none;
    padding:0 0 var(--s-1) var(--s-2)}
}

/* ============ hero — type over image, no box ============ */
/* The hero holds a 16:9 plate and lets it keep its own proportions, so the
   whole studio reads instead of a tight centre crop. Height follows the image,
   capped so it never eats the fold on a short window. */
/* width:100% is load-bearing. With aspect-ratio set, a clamped height makes
   the browser re-derive the inline size from the ratio, so on a short window
   the hero narrows to 78vh x 16/9 and leaves cream beside it. */
.hero{position:relative;display:grid;align-items:end;overflow:hidden;
  isolation:isolate;aspect-ratio:16/9;width:100%;max-height:78vh;min-height:24rem}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;z-index:-2}
@media (max-width:760px){
  /* A 16:9 plate on a phone is a letterbox sliver — give it room vertically. */
  .hero{aspect-ratio:4/5;width:100%;max-height:none}
  .hero>img{object-position:center 46%}
}
/* The scrim exists to make type readable, not to colour the picture. The
   old one ramped to solid --light and washed the lower half of the studio
   shot red — the tools, the sacks, the dust on the bench all went to a flat
   stain. Neutral darkening keeps the photograph's own warmth and still
   carries cream type over it. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(0,0,0,.58) 0%, rgba(0,0,0,.40) 14%,
    rgba(0,0,0,.16) 34%, rgba(0,0,0,0) 58%)}
/* Type protection, aimed at the corner the type is in rather than at the
   whole frame. Darkening the entire image to pass contrast is how a good
   photograph turns into a flat stain; a diagonal wedge buys the same
   legibility and leaves the window, the pots and the shelves alone.
   Measured, not judged by eye: cream on the worst ground this covers. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top right,
    rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 17%,
    rgba(0,0,0,.40) 37%, rgba(0,0,0,0) 64%)}
.hero-copy{padding:var(--s-5) var(--s-3) var(--s-4);
  max-width:var(--page);margin-inline:auto;width:100%;color:var(--ground)}
.hero-copy .label{color:var(--ground)}
.hero h1{font-size:var(--step-5);line-height:.86;color:var(--ground);
  margin:var(--s-2) 0 var(--s-2);text-indent:-.04em}
.hero-sub{font-size:var(--step-1);font-weight:300;color:var(--ground);
  max-width:28ch;border-top:1px solid var(--ground);padding-top:var(--s-2)}

/* ============ the catalogue — centred, symmetric ============ */
.catalogue{padding-block:var(--s-6) var(--s-5);text-align:center}
.cat-head{display:grid;justify-items:center;gap:var(--s-1);
  margin-bottom:var(--s-5)}
.cat-head h1,.cat-head h2{font-size:var(--step-3);max-width:20ch}
.cat-head .label{margin:0}
.cat-count{font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;color:var(--taupe);
  font-variant-numeric:tabular-nums}
.cat-head::after{content:"";width:3rem;height:2px;background:var(--accent);
  margin-top:var(--s-2)}

/* The basis decides how the cards break, and the arithmetic is worth writing
   down because it is wrong by default every time a category is added:
   N fit on a line while N*basis + (N-1)*gap <= --page. At 13.2rem six cards
   gave five and a lone sixth; at 17rem, four and two. 19rem puts four over
   the line, so six break three and three. Recheck on the seventh. */
.entries{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s-4) var(--s-3)}
.entry{flex:0 1 19rem;display:grid;grid-template-rows:auto auto auto 1fr;
  gap:var(--s-1);justify-items:center;cursor:pointer}
.entry-no{font-size:.68rem;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-label);
  text-transform:uppercase}
.entry figure{margin:0;overflow:hidden;width:100%}
.entry figure img,.entry figure .no-photo{aspect-ratio:4/5;object-fit:cover;
  width:100%;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.entry:hover figure img,.entry:focus-visible figure img{transform:scale(1.04)}
.entry h2,.entry h3{font-size:var(--step-1);line-height:1.15;max-width:14ch;
  display:flex;flex-direction:column;align-items:center;gap:var(--s-1);
  transition:color .18s ease;margin-top:var(--s-1)}
.entry:hover h2,.entry:hover h3{color:var(--accent)}
.entry p{font-size:var(--step--1);max-width:24ch;color:var(--taupe)}
.no-photo{background:var(--surface);position:relative}
.no-photo::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 10px,var(--ground) 10px 11px)}
.badge{font-family:var(--face-body);font-size:.62rem;font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);padding:.15em .5em;
  white-space:nowrap}

/* ============ the three states, as actual material ============ */
.states{display:grid;grid-template-columns:repeat(3,1fr);
  border-block:2px solid var(--ink)}
.state{padding:var(--s-5) var(--s-3) var(--s-4);min-height:18rem;
  display:grid;align-content:end;gap:var(--s-1)}
.state+.state{border-inline-start:var(--rule)}
.state:nth-child(1){background:var(--clay-raw)}   /* raw — grey-pink, darker */
.state:nth-child(2){background:var(--cream)}      /* dry — the palest it gets */
.state:nth-child(3){background:var(--clay-fired);color:var(--ground)}
.state:nth-child(3) h3,.state:nth-child(3) .state-no{color:var(--ground)}
.state-no{font-size:var(--step--1);font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-label)}
.state h3{font-size:var(--step-2)}
.state p{font-size:var(--step--1);max-width:26ch}

/* ============ explore — asymmetric, image bleeds off the edge ============ */
.explore{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:start;gap:var(--s-5);padding-block:var(--s-5);
  max-width:var(--page);margin-inline:auto;padding-inline:var(--s-3)}
.explore-copy h2{font-size:var(--step-3);margin-bottom:var(--s-2)}
.explore-copy p{font-size:var(--step-1);font-weight:300;max-width:34ch;
  margin-bottom:var(--s-2)}
.explore-copy .rule{width:4rem;height:2px;background:var(--accent);
  margin-bottom:var(--s-3)}
.explore figure{margin:0;position:relative}
.explore figure img{width:100%;aspect-ratio:5/4;object-fit:cover}
.explore figcaption{font-size:var(--step--1);margin-top:var(--s-1);color:var(--taupe)}
@media (min-width:1025px){
  .explore{padding-inline-end:0}
  .explore figure{margin-inline-end:calc((100vw - var(--page))/-2)}
}
@media (max-width:1024px){.explore{grid-template-columns:1fr;gap:var(--s-3)}}

/* ============ collection + prose pages ============ */
.page-head{padding-block:var(--s-5) var(--s-3);border-bottom:2px solid var(--ink);
  max-width:var(--page);margin-inline:auto;padding-inline:var(--s-3)}
.page-head h1{font-size:var(--step-4);margin-block:var(--s-1) var(--s-2)}
.page-head .lede{font-size:var(--step-1);font-weight:300;max-width:38ch}
.studio-note{border-inline-start:3px solid var(--accent);padding:var(--s-2);
  background:var(--surface);max-width:var(--measure);font-size:var(--step--1);
  margin-top:var(--s-3)}

.products{max-width:var(--page);margin:var(--s-4) auto var(--s-6);
  padding-inline:var(--s-3);display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:var(--s-3) var(--s-3)}
.product{display:grid;gap:var(--s-1);align-content:start}
.product figure{margin:0;overflow:hidden}
.product img,.product .no-photo{aspect-ratio:4/5;object-fit:cover;width:100%;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.product:hover img{transform:scale(1.04)}

.prose{max-width:var(--measure);margin:var(--s-5) auto var(--s-6);
  padding-inline:var(--s-3)}
.prose h1{font-size:var(--step-4);margin-block:var(--s-1) var(--s-3)}
.prose h2{font-size:var(--step-2);margin:var(--s-4) 0 var(--s-2);
  padding-top:var(--s-2);border-top:var(--rule)}
.prose p,.prose ul{margin-bottom:var(--s-2)}
.prose .lede{font-size:var(--step-1);font-weight:300}
.prose ul{padding-inline-start:1.1em}
.prose li{margin-bottom:var(--s-1)}
.prose a{border-bottom:1px solid var(--accent);transition:color .18s ease}
.prose a:hover{color:var(--accent)}

/* ============ footer ============ */
.site-foot{background:var(--accent);color:var(--ground);margin-top:var(--s-5);
  padding:var(--s-5) var(--s-3) var(--s-4)}
.foot-grid{max-width:var(--page);margin-inline:auto;display:grid;
  grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start}
.foot-mark img{width:112px}
.foot-lines{display:grid;gap:var(--s-1);justify-items:end;text-align:end}
.foot-line{font-family:var(--face-display);font-size:var(--step-2);
  letter-spacing:var(--tracking-display)}
.foot-note{font-size:var(--step--1)}
.disclosure{max-width:var(--page);margin:var(--s-4) auto 0;padding-top:var(--s-2);
  border-top:1px solid var(--surface);font-size:.72rem;max-width:var(--page);
  line-height:1.6}
@media (max-width:760px){
  .foot-grid{grid-template-columns:1fr;gap:var(--s-3)}
  .foot-lines{justify-items:start;text-align:start}
  .states{grid-template-columns:1fr}
  .state+.state{border-inline-start:0;border-top:var(--rule)}
  .state{min-height:0;padding-block:var(--s-4) var(--s-3)}
  .entry+.entry{padding-inline-start:0;border-inline-start:0}
  .entry{padding-inline:0}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* A product that does not ship yet, sitting beside ones that do. */

/* ---- product body: one row per thing, one rhythm ---- */
/* The disclosure sits at the foot of every card so the row of "What it is"
   lines up even when one product's description runs to two lines. */
.product{align-content:stretch}
.p-body{display:flex;flex-direction:column;gap:var(--s-1);height:100%}
.p-detail{margin-top:auto}
.product h3{font-size:var(--step-0);padding-top:var(--s-1);border-top:var(--rule);
  display:block;line-height:1.25}
.product .badge{justify-self:start}

.p-price{font-family:var(--face-display);font-size:var(--step-1);
  display:flex;align-items:baseline;gap:.45em;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1}
.p-when{font-family:var(--face-body);font-size:.66rem;font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--taupe)}
.p-note{font-size:var(--step--1);color:var(--taupe);line-height:1.5}

.p-detail{border-top:var(--rule);padding-top:var(--s-1)}
.p-detail summary{cursor:pointer;list-style:none;color:var(--accent)}
.p-detail summary::-webkit-details-marker{display:none}
.p-detail summary::marker{content:""}
.p-detail summary>span{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-1);min-height:44px;font-size:.66rem;font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase}
.p-detail summary>span::after{content:"";width:.45rem;height:.45rem;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .22s ease}
.p-detail[open] summary>span::after{transform:rotate(-135deg) translateY(1px)}
/* The open description floats over what is below it instead of growing the
   card. In a grid, a card that grows makes its whole row taller and shoves
   every card beneath it down the page — opening one product must not move the
   other nine. The panel is absolutely positioned, so it takes no space at all.
   `.product` is positioned but has no z-index, so it creates no stacking
   context and the panel's z-index lifts it above the cards that follow. */
.product{position:relative}
.p-detail p{position:absolute;inset-inline:0;top:100%;z-index:30;
  margin:0;padding:var(--s-2);background:var(--ground);
  border:1px solid var(--taupe);box-shadow:0 6px 24px rgba(0,0,0,.10);
  font-size:var(--step--1);line-height:1.55;color:var(--ink-body)}

/* A product that does not ship yet, sitting beside ones that do. */
.product.unshipped figure{outline:1px solid var(--accent);outline-offset:-1px}

.foot-social{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:inherit}
.foot-social a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--step--1);font-weight:600;letter-spacing:var(--tracking-label);
  text-transform:uppercase;border-bottom:1px solid var(--surface);
  transition:border-color .18s ease}
.foot-social a:hover{border-bottom-color:var(--ground)}

/* ============ the bag ============ */
/* No processor behind it yet, so the language is "request", never "pay", and
   the drawer carries the no-charge line where the subtotal is — the one place
   someone is actually looking at a number. */
.bag-open{font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;color:var(--ink-body);
  min-height:44px;padding-inline:var(--s-1);display:inline-flex;
  align-items:center;gap:.45em;border:0;background:none;cursor:pointer;
  transition:color .18s ease}
.bag-open:hover{color:var(--accent)}
.bag-count{display:inline-flex;align-items:center;justify-content:center;
  min-width:1.45em;height:1.45em;border-radius:50%;background:var(--accent);
  color:var(--ground);font-size:.78em;letter-spacing:0;font-variant-numeric:tabular-nums}

/* display: lives on [open] only. On the bare class it outranks the UA's
   dialog:not([open]){display:none} and the drawer renders down the page. */
.bag{margin:0 0 0 auto;max-width:30rem;width:100%;height:100%;max-height:100%;
  border:0;border-inline-start:var(--rule);padding:var(--s-3);
  background:var(--ground);color:var(--ink-body);overflow-y:auto}
.bag[open]{display:flex;flex-direction:column;gap:var(--s-2)}
.bag::backdrop{background:rgba(0,0,0,.42)}
.bag-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-2);border-bottom:var(--rule);padding-bottom:var(--s-1)}
.bag-head h2{font-size:var(--step-1);color:var(--ink)}
.bag-x{font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;color:var(--ink-body);min-height:44px;
  border:0;background:none;cursor:pointer}
.bag-x:hover{color:var(--accent)}
.bag-empty{font-size:var(--step--1)}
.bag-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.bag-item{display:grid;grid-template-columns:4.5rem 1fr auto;gap:var(--s-2);
  align-items:start;padding-bottom:var(--s-2);border-bottom:var(--rule)}
.bag-item img{width:100%;aspect-ratio:4/5;object-fit:cover}
.bag-item-body{display:grid;gap:.35rem}
.bag-item-name{font-family:var(--face-display);font-size:var(--step-0);color:var(--ink)}
.bag-item-each{font-size:var(--step--1)}
.bag-item-line{font-variant-numeric:tabular-nums;font-size:var(--step-0)}
.qty{display:inline-flex;align-items:center;gap:.25rem}
.qty-btn{width:44px;height:44px;border:var(--rule);background:none;
  color:var(--ink-body);font-size:var(--step-0);cursor:pointer;line-height:1;
  transition:background .18s ease,color .18s ease}
.qty-btn:hover{background:var(--accent);color:var(--ground)}
.qty-n{min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}

.bag-totals{display:grid;gap:var(--s-1);border-top:var(--rule);padding-top:var(--s-2)}
.bag-sub-row{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--face-display);font-size:var(--step-1);color:var(--ink)}
.bag-subtotal{font-variant-numeric:tabular-nums}
.bag-fine{font-size:var(--step--1);line-height:1.5}
.bag-nocharge{border:var(--rule);padding:var(--s-1)}

.bag-form{display:grid;gap:var(--s-2)}
.field{display:grid;gap:.3rem}
.field label{font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;color:var(--ink)}
.field .opt{text-transform:none;letter-spacing:0;font-weight:400;font-size:.92em;font-style:italic}
.field input,.field textarea{font:inherit;font-size:var(--step-0);
  color:var(--ink-body);background:var(--ground);border:var(--rule);
  padding:.6rem .7rem;min-height:44px;width:100%}
.field textarea{resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px}
.bag-send,.bag-copy{font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;min-height:48px;cursor:pointer;
  border:var(--rule);background:var(--accent);color:var(--ground);
  transition:background .18s ease}
.bag-send:hover,.bag-copy:hover{background:var(--ink-body)}
.bag-done{display:grid;gap:var(--s-2)}
.bag-done-lede{font-family:var(--face-display);font-size:var(--step-1);color:var(--ink)}
.bag-order-text{font:inherit;font-size:var(--step--1);color:var(--ink-body);
  background:var(--ground);border:var(--rule);padding:.7rem;width:100%}

/* the add control on a product card */
.add{font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;min-height:44px;width:100%;
  cursor:pointer;border:var(--rule);background:none;color:var(--ink-body);
  margin-top:var(--s-1);transition:background .18s ease,color .18s ease}
.add:hover,.add.added{background:var(--accent);color:var(--ground)}

/* ============ the evidence ============ */
.research{background:var(--ground);border-top:var(--rule);
  padding:var(--s-6) var(--s-3);scroll-margin-top:6rem}
.research-head{max-width:var(--page);margin-inline:auto;display:grid;gap:var(--s-2)}
.research-head h2{font-size:var(--step-3);max-width:18ch;color:var(--ink)}
.research-intro{font-size:var(--step-1);font-weight:300;max-width:52ch}
.findings{max-width:var(--page);margin:var(--s-5) auto 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:var(--s-4) var(--s-3)}
.finding{display:grid;gap:var(--s-2);align-content:start;
  border-top:2px solid var(--accent);padding-top:var(--s-2)}
.finding h3{font-size:var(--step-1);line-height:1.2;max-width:22ch;color:var(--ink)}
.stats{display:grid;gap:var(--s-1)}
.stat{display:flex;align-items:baseline;gap:.6rem}
.stat-v{font-family:var(--face-display);font-size:var(--step-2);line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-l{font-size:var(--step--1)}
.finding-body{font-size:var(--step-0);line-height:1.6}
.tested{font-size:var(--step--1);border-inline-start:2px solid var(--surface);
  padding-inline-start:var(--s-1)}
.cite{font-size:var(--step--1);line-height:1.45;border-top:var(--rule);
  padding-top:var(--s-1)}
.cite a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.research-foot{max-width:var(--page);margin:var(--s-5) auto 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));gap:var(--s-3)}
.research-foot h3{font-size:var(--step-1);color:var(--ink);margin-bottom:var(--s-1)}
.research-foot p{font-size:var(--step-0);line-height:1.6;max-width:56ch}

@media (prefers-reduced-motion:reduce){
  .add,.qty-btn,.bag-send,.bag-copy,.bag-open,.bag-x{transition:none}
}

/* Three findings side by side are one object, so their rows have to line up —
   headings run two or three lines and that was leaving the stats at three
   different heights. subgrid hands each card the parent's rows instead of its
   own. Below the breakpoint the cards stack, where alignment is meaningless
   and the larger row gap is what separates them, so the rule stays up here. */
@media (min-width:62rem){
  .findings{grid-template-rows:repeat(6,auto);row-gap:var(--s-2)}
  .finding{grid-row:span 6;grid-template-rows:subgrid}
}

/* ============ colouring sheets ============ */
/* The plate is the product: show it at paper proportions, big, and let the
   whole thing be the download target as well as the button. */
.sheets{max-width:var(--page);margin:var(--s-4) auto var(--s-6);
  padding-inline:var(--s-3);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));
  gap:var(--s-4) var(--s-3)}
.sheet{display:grid;gap:var(--s-1);align-content:start}
.sheet-plate{display:block;border:var(--rule);overflow:hidden;
  background:var(--ground)}
.sheet-plate img{width:100%;aspect-ratio:1240/1754;object-fit:cover;
  object-position:top center;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.sheet-plate:hover img{transform:scale(1.03)}
.sheet h2{font-size:var(--step-1);margin-top:var(--s-1)}
.sheet p{font-size:var(--step--1);line-height:1.55}
.sheet-get{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;margin-top:var(--s-1);border:var(--rule);
  font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;color:var(--ink-body);
  transition:background .18s ease,color .18s ease}
.sheet-get:hover{background:var(--accent);color:var(--ground)}
.sheet-note{max-width:var(--measure);margin:0 auto var(--s-6);
  font-size:var(--step--1);border-top:var(--rule);padding-top:var(--s-2)}
@media (prefers-reduced-motion:reduce){
  .sheet-plate img,.sheet-get{transition:none}
}

/* Four sheets side by side are one object: the blurbs run two or three lines
   and that left the download buttons at three different heights. */
@media (min-width:52rem){
  .sheets{grid-template-rows:repeat(4,auto);row-gap:var(--s-1)}
  .sheet{grid-row:span 4;grid-template-rows:subgrid}
}

/* ============ the line — every product, on the landing page ============ */
/* A rail, not a grid: twelve plates in a grid is a catalogue page, and this
   has to stay an opening. The last item keeps a deliberate sliver visible at
   the right edge so the rail reads as scrollable without a hint arrow. */
.band{padding-block:var(--s-5) var(--s-4);border-top:var(--rule)}
.band-head{display:grid;gap:var(--s-1);margin-bottom:var(--s-3)}
.band-head h2{font-size:var(--step-3)}
.band-sub{font-size:var(--step-1);font-weight:300;max-width:46ch}
.rail{list-style:none;margin:0;display:flex;gap:var(--s-3);
  /* The first plate lines up with the heading above it; the rail then runs
     off the right edge, which is what says "there is more" without an arrow.
     Starting flush at the viewport edge reads as a mistake, not a choice. */
  padding:0 var(--s-3) var(--s-2)
          max(var(--s-3), calc((100vw - var(--page)) / 2 + var(--s-3)));
  /* scroll-snap aligns the first item to the scrollport's edge, which eats
     the padding above and clips the first plate on load. scroll-padding is
     what tells snapping where the content really starts. */
  scroll-padding-inline-start:
          max(var(--s-3), calc((100vw - var(--page)) / 2 + var(--s-3)));
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:thin}
.rail:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rail-item{flex:0 0 clamp(13rem,21vw,17.5rem);scroll-snap-align:start;
  display:grid;gap:var(--s-1);align-content:start}
.rail-plate{display:block;overflow:hidden}
.rail-plate img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.rail-plate:hover img{transform:scale(1.05)}
.rail-name{font-family:var(--face-display);font-size:var(--step-0);
  color:var(--ink);display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s-1);border-top:var(--rule);padding-top:.45rem}
.rail-price{font-family:var(--face-body);font-size:var(--step--1);
  color:var(--ink-body);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.rail-plate img{transition:none}}

/* ============ the first-order offer ============ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.promo{margin:auto;max-width:54rem;width:calc(100% - 2 * var(--s-3));
  border:var(--rule);padding:0;background:var(--ground);color:var(--ink-body);
  overflow:hidden;position:relative}
.promo[open]{display:grid;grid-template-columns:minmax(min(16rem,100%),.85fr) 1fr}
.promo::backdrop{background:rgba(0,0,0,.52)}
.promo-art{margin:0;height:100%}
.promo-art img{width:100%;height:100%;object-fit:cover}
.promo-body,.promo-done{padding:var(--s-4) var(--s-3)}
.promo-body h2{font-size:var(--step-3);line-height:1;margin:var(--s-1) 0 var(--s-2)}
.promo-lede{font-size:var(--step-0);line-height:1.55;max-width:34ch}
.promo-form{display:grid;gap:var(--s-1);margin-top:var(--s-3)}
.promo-form input{font:inherit;font-size:var(--step-0);color:var(--ink-body);
  background:var(--ground);border:var(--rule);padding:.7rem .8rem;min-height:48px}
.promo-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.promo-send,.promo-ok{font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;min-height:48px;cursor:pointer;
  border:var(--rule);background:var(--accent);color:var(--ground);
  transition:background .18s ease}
.promo-send:hover,.promo-ok:hover{background:var(--ink-body)}
.promo-send[disabled]{cursor:default}
.promo-error{font-size:var(--step--1);font-weight:600}
.promo-fine{font-size:var(--step--1);line-height:1.5;margin-top:var(--s-2)}
.promo-x{position:absolute;top:0;right:0;z-index:2;min-height:44px;
  padding-inline:var(--s-2);border:0;background:var(--ground);
  color:var(--ink-body);cursor:pointer;font-size:var(--step--1);
  letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:600}
.promo-x:hover{color:var(--accent)}
.promo-done{grid-column:1 / -1}
.promo-code{font-family:var(--face-display);font-size:var(--step-4);
  line-height:1;letter-spacing:.06em;color:var(--accent);margin:var(--s-1) 0 var(--s-2)}
.promo-ok{margin-top:var(--s-2);padding-inline:var(--s-3)}
@media (max-width:40rem){
  .promo[open]{grid-template-columns:1fr}
  .promo-art{height:11rem}
}
@media (prefers-reduced-motion:reduce){.promo-send,.promo-ok,.promo-x{transition:none}}

/* ============ motion ============ */
/* Three moments, and nothing else moves.
   1. The page opens: the hero type settles and the photograph comes to rest.
   2. A swatch is inspected: the hovered clay state takes room from the others.
   3. A panel arrives: the bag from the edge it lives on, the offer from below.

   Everything animates transform or opacity only, and nothing is parked
   invisible waiting to be scrolled to — the first painted frame is the whole
   page, readable. `backwards` holds the start state during the delay, and
   that start state is offset, never hidden. */

@keyframes rise  { from { transform: translateY(18px) } to { transform: none } }
@keyframes settle{ from { transform: scale(1.035)    } to { transform: none } }
@keyframes veil  { from { opacity: 0 }                 to { opacity: 1 } }
@keyframes drawer{ from { transform: translateX(26px) } to { transform: none } }
@keyframes lift  { from { transform: translateY(16px) scale(.985) }
                   to   { transform: none } }

.hero-copy > *{animation:rise .8s cubic-bezier(.16,.84,.26,1) backwards}
.hero-copy .label{animation-delay:0s}
.hero h1{animation-delay:.09s}
.hero-sub{animation-delay:.2s}
/* The photograph arrives last and slowest: it is the ground the type sits on,
   so it should settle under the words rather than compete with them. */
.hero > img{animation:settle 1.9s cubic-bezier(.16,.84,.26,1) backwards}

/* Inspecting a swatch. The hovered state takes room from its neighbours —
   the motion means something here, which is the only reason it is allowed. */
.states{transition:grid-template-columns .5s cubic-bezier(.2,.7,.3,1)}
.states:has(.state:nth-child(1):hover){grid-template-columns:1.42fr 1fr 1fr}
.states:has(.state:nth-child(2):hover){grid-template-columns:1fr 1.42fr 1fr}
.states:has(.state:nth-child(3):hover){grid-template-columns:1fr 1fr 1.42fr}

/* Panels arrive from where they belong: the bag from the edge it is docked
   to, the offer up from the page. */
.bag[open]{animation:drawer .34s cubic-bezier(.2,.75,.3,1)}
.bag[open]::backdrop{animation:veil .34s ease}
.promo[open]{animation:lift .4s cubic-bezier(.2,.75,.3,1)}
.promo[open]::backdrop{animation:veil .4s ease}

@media (prefers-reduced-motion:reduce){
  .hero-copy > *,.hero > img,.bag[open],.bag[open]::backdrop,
  .promo[open],.promo[open]::backdrop{animation:none}
  .states{transition:none}
  .states:has(.state:hover){grid-template-columns:repeat(3,1fr)}
}

/* "How to use" shares the one disclosure panel with "what it is", because the
   panel is absolutely positioned to keep its neighbours still and a second
   panel would land on top of this one. */
.p-sub{display:block;margin-top:var(--s-2);font-size:var(--step--1);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  font-weight:600;color:var(--ink)}
.p-use{display:block;margin-top:.35rem}

/* The disclosure panel is absolutely positioned so that opening one does not
   shift the cards beside it. The cost is that a long panel runs off the end of
   the grid and lands on the footer. The grid absorbs it instead: the footer
   moving down is ordinary accordion behaviour, and it is the cards staying
   still that was asked for. */
.products:has(.p-detail[open]){padding-bottom:20rem}
@media (prefers-reduced-motion:no-preference){
  .products{transition:padding-bottom .3s ease}
}

/* The evidence, summarised. The numbers stay out; the method goes in. */
.leads{max-width:var(--page);margin:var(--s-4) auto 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:var(--s-3)}
.lead{display:grid;gap:.4rem;align-content:start;
  border-top:2px solid var(--accent);padding-top:var(--s-2)}
.lead-v{font-family:var(--face-display);font-size:var(--step-3);line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.lead-c{font-size:var(--step-0);line-height:1.45;max-width:26ch}
.research-caveat{max-width:var(--page);margin:var(--s-3) auto 0;
  font-size:var(--step-0);border-inline-start:2px solid var(--surface);
  padding-inline-start:var(--s-2)}
.research-more{max-width:var(--page);margin:var(--s-3) auto 0}
.research-more>summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:.6rem;min-height:44px;
  font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;color:var(--ink-body)}
.research-more>summary::-webkit-details-marker{display:none}
.research-more>summary::marker{content:""}
.research-more>summary::after{content:"";width:.55em;height:.55em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-.12em);transition:transform .22s ease}
.research-more[open]>summary::after{transform:rotate(-135deg) translateY(-.12em)}
.research-more>summary:hover{color:var(--accent)}
.research-more .findings{margin-top:var(--s-4)}
@media (prefers-reduced-motion:reduce){
  .research-more>summary::after{transition:none}
}

/* ============ the closing band ============ */
/* The page used to end on an editorial note with nothing to do. Someone who
   has read this far has decided; give them the one action and the one answer
   they will want next. */
/* Raw clay, not fired: the footer is already --accent and the two bands sat
   with 80px of cream between them, which read as a mistake rather than as two
   sections. Three distinct grounds now — page, band, footer. */
.closing{background:var(--surface);color:var(--ink-body);
  padding:var(--s-6) var(--s-3);border-top:var(--rule)}
.closing-inner{max-width:var(--page);margin-inline:auto;display:grid;
  gap:var(--s-2);justify-items:start}
.closing .label{color:var(--light)}
.closing h2{font-size:var(--step-3);color:var(--ink);max-width:16ch}
.closing-sub{font-size:var(--step-1);font-weight:300;max-width:46ch}
.closing-acts{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s-2) var(--s-3);margin-top:var(--s-2)}
.closing-cta{display:inline-flex;align-items:center;min-height:52px;
  padding-inline:var(--s-3);background:var(--accent);color:var(--ground);
  font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;
  transition:background .18s ease,color .18s ease}
.closing-cta:hover{background:var(--light);color:var(--ground)}
.closing-alt{font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;color:var(--ink-body);
  border-bottom:1px solid var(--ink-body);padding-bottom:2px;min-height:44px;
  display:inline-flex;align-items:center}
@media (prefers-reduced-motion:reduce){.closing-cta{transition:none}}

/* ============ the band of seals ============ */
/* Type over a photograph of the material, the way the hero works. The scrim
   is heavier here because the marks are small and thin, and thin cream line
   work over a mid-tone photograph is the first thing to disappear. */
.marks{position:relative;isolation:isolate;overflow:hidden;
  padding:var(--s-6) var(--s-3);color:var(--ground)}
.marks-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 55%;z-index:-2}
.marks::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.62) 45%,rgba(0,0,0,.72) 100%)}
.marks-inner{max-width:var(--page);margin-inline:auto;display:grid;
  gap:var(--s-3);justify-items:center;text-align:center}
.marks h2{font-size:var(--step-2);color:var(--ground);font-weight:400}
/* Nine of them have to sit on one line at the page width, the way the
   reference does — seven across with two orphaned underneath reads as an
   accident. 9 circles + 8 gaps must come under --page, which sets the size. */
.seals{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:var(--s-2)}
.seal{position:relative;width:6.7rem;height:6.7rem;display:grid;
  place-items:center;color:var(--ground)}
.seal svg{position:absolute;inset:0;width:100%;height:100%}
/* Tighter than the site's label tracking: "Dermatologist" is thirteen
   letters and it has to live inside a circle. */
.seal-t{display:grid;gap:.12rem;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;line-height:1.25;
  padding-inline:.35rem}
.marks-note{font-size:var(--step--1);line-height:1.55;max-width:58ch;
  border-top:1px solid var(--ground);padding-top:var(--s-2)}
@media (max-width:52rem){
  .seal{width:5.6rem;height:5.6rem}
  .seal-t{font-size:.6rem}
}