/* Cowboy Clay — black, bone white, one rawhide tan accent. */
:root{
  --black:#0a0a0a;
  --black-2:#121110;
  --bone:#f2efea;
  --bone-dim:#a8a49d;
  --grey:#6f6b65;
  --tan:#c3a177;          /* rawhide — the only color on the page */
  --tan-deep:#8d7150;
  --line:rgba(242,239,234,.14);
  --display:"Alfa Slab One",Georgia,serif;
  --ui:"Oswald","Arial Narrow",Helvetica,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--black);color:var(--bone);
  font-family:var(--ui);font-weight:300;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--tan);text-decoration:none}

/* film grain over everything */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;justify-content:center;text-align:center;overflow:hidden}
.hero__art{position:absolute;inset:0;z-index:0}
.hero__art picture{display:block;position:absolute;inset:0}
/* any photo dropped in is forced to black and white so it always matches */
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:grayscale(1) contrast(1.06) brightness(.52)}
/* no photo yet: a bone-white horizon glow doing the work instead */
.hero__art--none{
  background:
    radial-gradient(120% 78% at 50% 74%, rgba(242,239,234,.20) 0%, rgba(242,239,234,.06) 34%, transparent 62%),
    radial-gradient(60% 34% at 50% 76%, rgba(195,161,119,.22) 0%, transparent 70%),
    linear-gradient(180deg,#050505 0%,#0e0d0c 48%,#070706 100%);
}
/* dust streaks */
.hero__art::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(97deg,transparent 0 38px,rgba(242,239,234,.035) 38px 39px,transparent 39px 96px);
}
.hero__vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(94% 84% at 50% 40%,transparent 40%,rgba(0,0,0,.6) 88%,#000 100%)}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 20%, transparent 40%, rgba(0,0,0,.72) 76%, rgba(0,0,0,.94) 100%),
    radial-gradient(80% 50% at 50% 94%, rgba(0,0,0,.6) 0%, transparent 72%)}
.hero__inner{position:relative;z-index:2;padding:30px 0 clamp(44px,7vh,86px)}

/* product tin laid over the cover - the only warm thing on the page, so it reads
   as the product and not as decoration. NOT greyscaled with the photo. */
.hero__tin{display:block;z-index:3;position:absolute;left:clamp(20px,5vw,84px);bottom:clamp(28px,7vh,74px);
  width:clamp(132px,15vw,212px);transform:rotate(-7deg);
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.72)) drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.hero__tin img{width:100%;height:auto}

.eyebrow{
  font-family:var(--ui);font-weight:400;font-size:12px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--tan);margin:0 0 26px;
}
.wordmark{
  font-family:var(--display);font-weight:400;
  font-size:clamp(3.2rem,13.5vw,9.5rem);line-height:.86;letter-spacing:-.015em;
  text-transform:uppercase;margin:0;color:var(--bone);
  text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 64px rgba(242,239,234,.16);
}
.wordmark span{display:block}
.rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:30px auto 0;max-width:340px}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--tan-deep),transparent)}
.rule i{display:block;width:7px;height:7px;background:var(--tan);transform:rotate(45deg)}
.lede{
  font-size:clamp(1rem,2.1vw,1.22rem);font-weight:300;letter-spacing:.03em;
  color:var(--bone-dim);max-width:34ch;margin:22px auto 0;
}
.hero__meta{margin-top:34px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;cursor:pointer;border:1px solid var(--tan);background:transparent;
  color:var(--tan);font-family:var(--ui);font-weight:400;font-size:13px;letter-spacing:.3em;
  text-transform:uppercase;padding:17px 42px;transition:background .25s,color .25s;
}
.btn:hover{background:var(--tan);color:#0a0a0a}
.btn--solid{background:var(--bone);border-color:var(--bone);color:#0a0a0a}
.btn--solid:hover{background:var(--tan);border-color:var(--tan);color:#0a0a0a}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.hero .btn{margin-top:40px}

/* ---------- SECTIONS ---------- */
section{position:relative;z-index:2}
.band{border-top:1px solid var(--line);padding:92px 0}
.band--dark{background:var(--black-2)}
.kicker{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--tan);margin:0 0 18px;text-align:center}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,4.6vw,2.9rem);line-height:1.05;
   text-transform:uppercase;margin:0 0 14px;text-align:center;letter-spacing:-.01em}
.sub{text-align:center;color:var(--bone-dim);max-width:52ch;margin:0 auto}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:56px;border:1px solid var(--line)}
.pillar{background:var(--black);padding:40px 28px;text-align:center}
.pillar b{display:block;font-family:var(--display);font-weight:400;font-size:1.15rem;text-transform:uppercase;
          letter-spacing:.02em;color:var(--bone);margin-bottom:12px}
.pillar p{margin:0;color:var(--bone-dim);font-size:15px;line-height:1.6}
.pillar i{display:block;font-style:normal;color:var(--tan);font-size:11px;letter-spacing:.34em;margin-bottom:18px}

/* ---------- BUY ---------- */
.buy{text-align:center}
.price{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,7vw,3.6rem);color:var(--bone);line-height:1;margin:8px 0 6px}
.price small{font-family:var(--ui);font-size:12px;letter-spacing:.3em;color:var(--grey);display:block;margin-top:14px;text-transform:uppercase}
#checkout{margin:44px auto 0;max-width:520px;min-height:0}
#checkout:empty{display:none}
.note{margin-top:26px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.warn{border:1px solid var(--tan-deep);color:var(--bone-dim);padding:18px 22px;max-width:520px;margin:28px auto 0;font-size:14px;letter-spacing:.02em}

footer{border-top:1px solid var(--line);padding:46px 0;text-align:center;color:var(--grey);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
footer a{color:var(--grey)}
footer a:hover{color:var(--tan)}

@media(min-width:901px){
  .hero__art img{object-position:center 40%}
  .hero__inner{max-width:860px}
  .wordmark{font-size:clamp(3.2rem,min(6.4vw,11vh),6.4rem)}
  .rule{max-width:280px}
}
/* ---------- TALL VIEWPORTS ----------
   Keyed to ASPECT RATIO, not width: a portrait tablet (900x1200) is as tall-and-
   narrow as a phone and cover-cropping the wide frame there cuts the revolvers
   off exactly the same way. index.php switches the <source> on the same 4/5. */
@media(max-aspect-ratio:4/5){
  /* the tin and the type stack, in that order, above the bottom edge */
  .hero{flex-direction:column;justify-content:flex-end;align-items:center}
  .hero__tin{position:static;width:min(38vw,168px);margin:0 0 -8px;transform:rotate(-4deg);
    filter:drop-shadow(0 16px 22px rgba(0,0,0,.7))}
  .hero__inner{padding-top:30px}

  /* WITH a portrait file: a real crop, from the top down, so a tall screen gets
     the whole pose at full width instead of a strip of the wide frame */
  .hero__art--dual{inset:0 0 auto;height:66vh}
  /* biased low on purpose: on a phone the overflow is ~30px so this shows nearly
     the whole frame, while on a portrait tablet the overflow is ~550px and a
     top-weighted value would push the hat clean out of the picture */
  .hero__art--dual img{height:100%;object-fit:cover;object-position:center 62%}
  .hero__art--dual::after{opacity:1;background:linear-gradient(180deg,
    rgba(10,10,10,0) 0%,rgba(10,10,10,0) 58%,rgba(10,10,10,.72) 86%,#0a0a0a 100%)}

  /* WIDE FRAME ONLY: a portrait crop of a 2:1 photo keeps just the middle ~23%
     of the width and saws the outstretched arms off, so it runs full-width as a
     band instead, its edges faded into the black rather than ending on a seam.
     A plain gradient does that fade - cheaper than mask-image at this size. */
  .hero__art--wideonly{inset:19vh 0 auto;height:auto}
  .hero__art--wideonly img{height:auto;object-fit:fill}
  .hero__art--wideonly::after{opacity:1;background:linear-gradient(180deg,
    #0a0a0a 0%,rgba(10,10,10,0) 9%,rgba(10,10,10,0) 64%,rgba(10,10,10,.85) 92%,#0a0a0a 100%)}
  .hero__art--wideonly ~ .hero__vig{background:radial-gradient(125% 72% at 50% 32%,transparent 48%,rgba(0,0,0,.46) 90%,#000 100%)}

  .hero__scrim{background:linear-gradient(180deg,transparent 0%,transparent 34%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.96) 100%)}
}

/* ---------- PHONES (type + spacing only; the art is handled above) ---------- */
@media(max-width:760px){
  .hero__tin{width:min(38vw,150px)}
  .wordmark{font-size:clamp(2.8rem,12.2vw,4.4rem)}
  .pillars{grid-template-columns:1fr}
  .band{padding:68px 0}
  .hero__inner{padding:26px 0 34px}
  .eyebrow{letter-spacing:.3em;font-size:11px}
}

/* =========================================================================
   INTERACTION LAYER (Sep 22 2026)
   Everything below is progressive: with JS off, panels and answers are still
   in the markup and the buy button is still a link.
   ========================================================================= */

/* the rule under the wordmark now says what is in the tin */
.rule{max-width:min(92vw,460px)}
.rule span{font-family:var(--ui);font-weight:400;font-size:clamp(10px,2.4vw,12px);letter-spacing:.34em;
  text-transform:uppercase;color:var(--tan);white-space:nowrap}

/* scroll cue, parked in the corner so it never fights the bottom-anchored type */
.hero__scroll{position:absolute;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vh,30px);z-index:3;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .25s}
.hero__scroll:hover{opacity:1}
.hero__scroll i{display:block;width:11px;height:11px;border-right:1px solid var(--bone);border-bottom:1px solid var(--bone);
  transform:rotate(45deg) translate(-2px,-2px);animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:rotate(45deg) translate(-2px,-2px)}50%{transform:rotate(45deg) translate(2px,2px)}}

/* sections rise in once, and only when JS is there to take them back down */
html.js-reveal [data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js-reveal [data-reveal].is-in{opacity:1;transform:none}
.pillar{transition:background .3s,transform .3s}
.pillar:hover{background:var(--black-2);transform:translateY(-3px)}

/* ---------- HOW TO USE ---------- */
.steps{margin-top:52px;display:grid;grid-template-columns:266px 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.steps__tabs{display:flex;flex-direction:column;background:var(--black)}
.steps__tab{display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--bone-dim);font-family:var(--ui);font-weight:300;font-size:13px;letter-spacing:.26em;
  text-transform:uppercase;padding:21px 22px;transition:color .22s,background .22s}
.steps__tab:last-child{border-bottom:0}
.steps__tab i{font-style:normal;font-size:11px;letter-spacing:.18em;color:var(--tan-deep);transition:color .22s}
.steps__tab:hover{color:var(--bone)}
.steps__tab.is-on{background:var(--black-2);color:var(--bone)}
.steps__tab.is-on i{color:var(--tan)}
.steps__tab:focus-visible{outline:1px solid var(--tan);outline-offset:-3px}
.steps__stage{background:var(--black);padding:clamp(28px,4vw,46px);display:flex;align-items:center;min-height:232px}
.steps__panel{animation:stepin .45s cubic-bezier(.2,.7,.2,1) both}
.steps__panel b{display:block;font-family:var(--display);font-weight:400;line-height:1.16;
  font-size:clamp(1.12rem,2.5vw,1.62rem);text-transform:uppercase;color:var(--bone);margin-bottom:14px}
.steps__panel p{margin:0;color:var(--bone-dim);max-width:48ch}
@keyframes stepin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---------- BUY ---------- */
.buy__tin{display:block;width:clamp(150px,21vw,215px);margin:4px auto 10px;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.62))}
.buy__tin img{width:100%;height:auto}
.buy__what{margin:0 0 10px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--tan)}
.qty{display:inline-flex;align-items:center;gap:4px;margin:30px 0 4px;border:1px solid var(--line);padding:5px}
.qty[hidden]{display:none}
.qty__btn{width:44px;height:44px;background:transparent;border:0;cursor:pointer;color:var(--tan);
  font-family:var(--ui);font-size:19px;line-height:1;transition:background .2s,color .2s}
.qty__btn:hover:not([disabled]){background:var(--tan);color:#0a0a0a}
.qty__btn[disabled]{opacity:.28;cursor:not-allowed}
.qty__btn:focus-visible{outline:1px solid var(--tan);outline-offset:-3px}
.qty__n{min-width:40px;text-align:center;font-family:var(--display);font-size:1.28rem;color:var(--bone)}
.qty__word{padding:0 14px 0 6px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey)}

/* ---------- FAQ ---------- */
.faq__list{max-width:780px;margin:52px auto 0;border-top:1px solid var(--line);text-align:left}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{position:relative;cursor:pointer;list-style:none;padding:22px 40px 22px 0;
  font-family:var(--ui);font-weight:400;font-size:16px;letter-spacing:.02em;color:var(--bone);transition:color .2s}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--tan)}
.faq__item summary:focus-visible{outline:1px solid var(--tan);outline-offset:3px}
.faq__item summary i{position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-7px;
  border-right:1px solid var(--tan);border-bottom:1px solid var(--tan);transform:rotate(45deg);transition:transform .28s}
.faq__item[open] summary i{transform:rotate(-135deg)}
.faq__a{padding:0 0 26px;color:var(--bone-dim);font-size:15px;line-height:1.7}
.faq__a p{margin:0;max-width:64ch}
.faq__item[open] .faq__a{animation:stepin .35s ease both}

/* ---------- STICKY BUY BAR ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:8;transform:translateY(102%);
  transition:transform .38s cubic-bezier(.2,.7,.2,1);
  background:rgba(10,10,10,.93);border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.bar.is-on{transform:none}
.bar__in{display:flex;align-items:center;gap:14px;padding-top:11px;padding-bottom:11px}
.bar__tin{flex:0 0 auto;width:44px;display:block}
.bar__tin img{width:100%;height:auto}
.bar__txt{display:flex;flex-direction:column;line-height:1.25;margin-right:auto}
.bar__txt b{font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--bone)}
.bar__txt i{font-style:normal;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey)}
.bar__btn{padding:13px 26px;font-size:12px;white-space:nowrap}

@media(max-width:760px){
  .hero__scroll{display:none}
  .steps{grid-template-columns:1fr;margin-top:38px}
  /* 2x2 rather than a scrolling row: four tabs do not fit across a phone, and a
     row that scrolls sideways hides steps 03 and 04 with nothing to say so */
  .steps__tabs{display:grid;grid-template-columns:1fr 1fr}
  .steps__tab{border-right:1px solid var(--line);padding:15px 14px;
    font-size:12px;letter-spacing:.18em;gap:8px}
  .steps__tab:nth-child(2n){border-right:0}
  .steps__tab:nth-last-child(-n+2){border-bottom:0}
  .steps__stage{min-height:0;padding:30px 22px 34px}
  .faq__list{margin-top:36px}
  .faq__item summary{font-size:15px;padding:19px 34px 19px 0}
  .bar__tin{width:38px}
  .bar__txt i{display:none}
  .bar__btn{padding:12px 18px;font-size:11px;letter-spacing:.2em}
}

@media(prefers-reduced-motion:reduce){
  .hero__scroll i{animation:none}
  .steps__panel,.faq__item[open] .faq__a{animation:none}
  .bar{transition:none}
  html.js-reveal [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- LOOK INSIDE (closed tin <-> open clay) ----------
   One control, two shots stacked. Hover on a mouse, tap or Enter anywhere else;
   with JS off it is simply the closed tin, which is the honest default. */
.jar{position:relative;display:block;width:clamp(150px,21vw,215px);margin:4px auto 8px;
  padding:0;border:0;background:transparent;cursor:pointer;text-align:center}
/* under the wordmark, in the flow of the type block */
/* the 24vh ceiling is what keeps the Buy button above the fold on a short laptop
   window - at 900px tall it never binds, at 700px it pulls the jar back in */
.jar--hero{margin:clamp(14px,2.2vh,24px) auto 0;width:clamp(180px,21vw,min(290px,30vh))}
.jar:focus-visible{outline:1px solid var(--tan);outline-offset:8px}
/* breathing: the tin is the one thing on the cover you can DO something with,
   so it keeps a slow idle pulse until the first open, then stops for good */
.jar__stack{position:relative;display:block;isolation:isolate;
  animation:breathe 3.6s ease-in-out infinite}
.jar__stack::before{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,rgba(195,161,119,.26) 0%,rgba(195,161,119,.08) 42%,transparent 70%);
  animation:halo 3.6s ease-in-out infinite}
.jar:hover .jar__stack,.jar.is-open .jar__stack,.jar--used .jar__stack,
.jar:hover .jar__stack::before,.jar.is-open .jar__stack::before,.jar--used .jar__stack::before{animation:none}
.jar--used .jar__stack::before,.jar.is-open .jar__stack::before{opacity:0}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes halo{0%,100%{opacity:.22;transform:scale(.92)}50%{opacity:.6;transform:scale(1.06)}}

.jar__shot{display:block;width:100%;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.62));
  transition:opacity .42s ease,transform .78s cubic-bezier(.22,.8,.2,1)}
.jar__shot img{display:block;width:100%;height:auto}
.jar__shot--lid{position:relative}
/* the lid twists off anticlockwise and lifts away; the clay settles in under it */
.jar__shot--open{position:absolute;inset:0;opacity:0;transform:rotate(-38deg) scale(.88)}
.jar.is-open .jar__shot--lid{opacity:0;transform:rotate(-330deg) scale(1.2)}
.jar.is-open .jar__shot--open{opacity:1;transform:none}
.jar__hint{display:inline-flex;align-items:center;gap:9px;margin-top:14px;white-space:nowrap;
  font-family:var(--ui);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--grey);transition:color .25s,opacity .25s}
.jar__hint i{display:block;width:6px;height:6px;background:var(--tan);transform:rotate(45deg)}
.jar:hover .jar__hint{color:var(--tan)}
.jar.is-open .jar__hint{opacity:.4}

@media(prefers-reduced-motion:reduce){
  .jar__shot{transition:opacity .2s ease}
  .jar__shot--open,.jar.is-open .jar__shot--lid{transform:none}
  .jar__stack,.jar__stack::before{animation:none}
  .jar__stack::before{opacity:.3}
}

/* ---------- HAT BAND ----------
   A square photo, so it keeps its own half of the row rather than being cropped
   into a letterbox strip; on phones it stacks above the copy. */
.split{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  align-items:stretch;border-top:1px solid var(--line);background:var(--black)}
.split__img{margin:0;position:relative;min-height:clamp(340px,54vh,620px);overflow:hidden}
.split__img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:grayscale(1) contrast(1.06) brightness(.82)}
/* the photo dissolves into the page on the side the copy is on */
.split__img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,.35) 0%,transparent 26%,transparent 72%,rgba(10,10,10,.92) 100%)}
.split__txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,86px) clamp(24px,5vw,72px);text-align:left}
.split__txt .kicker,.split__txt h2,.split__txt .sub{text-align:left;margin-left:0}
.split__txt h2{margin-bottom:20px}
.split__txt .sub{max-width:40ch;margin:0}

@media(max-width:860px){
  .split{grid-template-columns:1fr}
  .split__img{min-height:clamp(300px,46vh,420px)}
  .split__img::after{background:linear-gradient(180deg,rgba(10,10,10,.3) 0%,transparent 30%,transparent 62%,rgba(10,10,10,.95) 100%)}
  .split__txt{padding:34px 24px 58px;text-align:center}
  .split__txt .kicker,.split__txt h2,.split__txt .sub{text-align:center}
  .split__txt .sub{margin:0 auto}
}

/* the buy bar is always on screen, so the page needs to end above it */
body{padding-bottom:78px}
.bar{transform:none}
.btn--big{padding:20px 54px;font-size:14px}
@media(max-width:760px){ body{padding-bottom:70px} .btn--big{padding:17px 34px;font-size:13px} }

/* ---------- INGREDIENTS ---------- */
/* borders on the items, not a 1px gap over a tinted container: 14 items never
   fill the last row, and the leftover cell showed up as a phantom 15th tile */
.ing__grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);
  margin:52px 0 0;padding:0;text-align:left}
.ing__item{background:var(--black);padding:19px 18px 21px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.ing__item i{display:block;font-style:normal;font-size:10px;letter-spacing:.24em;color:var(--tan-deep);margin-bottom:9px}
.ing__item b{display:block;font-family:var(--display);font-weight:400;font-size:.98rem;line-height:1.2;
  text-transform:uppercase;letter-spacing:.01em;color:var(--bone);margin-bottom:7px}
.ing__item span{display:block;font-size:13px;line-height:1.5;color:var(--bone-dim)}
/* the four that keep it together, marked rather than hidden */
.ing__item--aux{background:var(--black-2)}
.ing__item--aux i{color:var(--grey)}
.ing__item--aux b{color:var(--bone-dim)}
.ing__item--aux span{color:var(--grey)}
.ing__note{max-width:62ch;margin:34px auto 0;text-align:center;font-size:15px;color:var(--bone-dim)}
.ing__note b{color:var(--bone);font-weight:400}
.ing__note em{font-style:normal;color:var(--grey)}
@media(max-width:760px){
  .ing__grid{grid-template-columns:1fr 1fr;margin-top:36px}
  .ing__item{padding:15px 13px 17px}
  .ing__item b{font-size:.9rem}
  .ing__item span{font-size:12px}
}

/* icon sprite: one line weight, one colour, inherits from its tile */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ing__top{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.ing__ic{width:27px;height:27px;flex:0 0 auto;color:var(--tan);
  fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ing__item--aux .ing__ic{color:var(--grey)}
.ing__top i{margin:0}

/* gift band */
.gift{text-align:center}
.gift .sub{margin-bottom:34px}

/* mirrored split: photo on the right, so it alternates with the hat band */
.split--flip .split__img{order:2}
.split--flip .split__img::after{background:linear-gradient(270deg,rgba(10,10,10,.35) 0%,transparent 26%,transparent 72%,rgba(10,10,10,.92) 100%)}
.split--flip .split__img img{object-position:center 46%;filter:grayscale(0) contrast(1.02) brightness(.94)}
.split__cta{margin:32px 0 0}
@media(max-width:860px){
  .split--flip .split__img{order:0}
  .split--flip .split__img::after{background:linear-gradient(180deg,rgba(10,10,10,.3) 0%,transparent 30%,transparent 62%,rgba(10,10,10,.95) 100%)}
}