/* 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)}

.entries{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s-4) var(--s-3)}
.entry{flex:0 1 15rem;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)));
  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)}
}