/** Shopify CDN: Minification failed

Line 781:1 Unexpected "}"

**/
/* ==================================================================
   ACRAEA  Water Garden Editorial
   One ground for the whole page, handed over section by section as you
   scroll. See "the ground" below — that is the load-bearing idea here.
   ================================================================== */
:root{
  --paper:#F4F1EA; --raised:#FAF8F3; --shallow:#D6E7EC; --sea:#8CBDCE;
  --deep:#20505E; --ink:#26323C; --moss:#7C8B6B; --amber:#B5813F; --bloom:#D98C7A;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Karla",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --bg:var(--paper); --fg:var(--ink); --accent:var(--deep);
  --soft:rgba(38,50,60,.64); --faint:rgba(38,50,60,.45); --rule:rgba(38,50,60,.16);
  --btn-bg:var(--deep); --btn-fg:var(--paper);

  --pad:clamp(1.15rem,5vw,4rem);
  --measure:62ch;
  --radius:2px;
  --field:var(--raised);

  /* Long and eased, so the ground reads as light changing in a room
     rather than as a slide advancing. */
  --ground:900ms cubic-bezier(.4,0,.2,1);
}

/* ----  the ground  ----------------------------------------------
   A scheme is no longer something a section paints on itself. It is
   something a section ASKS FOR: whichever one owns the middle of the
   viewport hands its scheme to <html data-ground>, and the whole page —
   header included — drifts to it over most of a second. That drift is
   the entire effect; per-section backgrounds would cut instead.
   `scheme-*` survives only as the label the script reads, plus a
   no-JavaScript fallback further down.
   ---------------------------------------------------------------- */
:root[data-ground=paper]{--bg:var(--paper);--fg:var(--ink);--accent:var(--deep);
  --soft:rgba(38,50,60,.64);--faint:rgba(38,50,60,.45);--rule:rgba(38,50,60,.16);
  --btn-bg:var(--deep);--btn-fg:var(--paper);--field:var(--raised)}
:root[data-ground=shallow]{--bg:var(--shallow);--fg:var(--ink);--accent:var(--deep);
  --soft:rgba(38,50,60,.64);--faint:rgba(38,50,60,.45);--rule:rgba(38,50,60,.20);
  --btn-bg:var(--deep);--btn-fg:var(--paper);--field:rgba(255,255,255,.42)}
/* Sea takes #173F4B, not --deep: on this ground --deep only reaches 4.34:1,
   which fails for anything at body size. Do not "tidy" it back. */
:root[data-ground=sea]{--bg:var(--sea);--fg:var(--ink);--accent:#173F4B;
  --soft:rgba(38,50,60,.70);--faint:rgba(38,50,60,.52);--rule:rgba(38,50,60,.22);
  --btn-bg:var(--deep);--btn-fg:var(--paper);--field:rgba(255,255,255,.34)}
:root[data-ground=deep]{--bg:var(--deep);--fg:var(--paper);--accent:#BCD9E3;
  --soft:rgba(244,241,234,.72);--faint:rgba(244,241,234,.52);--rule:rgba(244,241,234,.24);
  --btn-bg:var(--paper);--btn-fg:var(--deep);--field:rgba(244,241,234,.08)}
:root[data-ground=ink]{--bg:var(--ink);--fg:var(--paper);--accent:var(--sea);
  --soft:rgba(244,241,234,.72);--faint:rgba(244,241,234,.52);--rule:rgba(244,241,234,.22);
  --btn-bg:var(--sea);--btn-fg:var(--ink);--field:rgba(244,241,234,.08)}

/* The drift itself. Long and eased, so it reads as light changing in a
   room rather than as a slide advancing. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;
  transition:background-color var(--ground),color var(--ground)}
body.no-scroll{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  body,.header,.section,.footer{transition-duration:1ms !important}
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;line-height:1.12;
  text-wrap:balance;font-variation-settings:"opsz" 120}
h1{font-size:clamp(2.4rem,5.4vw,3.75rem)}
h2{font-size:clamp(1.8rem,3.8vw,2.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.25}
h4{font-size:1.02rem;line-height:1.3}
p{margin:0;max-width:var(--measure)}

.eyebrow{font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  margin:0;color:var(--accent)}
.soft{color:var(--soft)}
.faint{color:var(--faint)}
.meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em}

.section{background:transparent;color:var(--fg);padding:clamp(3.25rem,7vw,6rem) var(--pad);
  transition:color var(--ground)}

/* No JavaScript, no scroll listener — so each section paints itself the
   old way and the page is merely un-animated rather than all one colour. */
html:not([data-ground]) .scheme-paper{background:var(--paper);color:var(--ink)}
html:not([data-ground]) .scheme-shallow{background:var(--shallow);color:var(--ink)}
html:not([data-ground]) .scheme-sea{background:var(--sea);color:var(--ink)}
html:not([data-ground]) .scheme-deep{background:var(--deep);color:var(--paper)}
html:not([data-ground]) .scheme-ink{background:var(--ink);color:var(--paper)}
.inner{max-width:1260px;margin:0 auto;display:flex;flex-direction:column;gap:2.25rem}
.inner--tight{gap:1.5rem}

.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:.88rem 2.1rem;border-radius:var(--radius);font-weight:500;letter-spacing:.03em;
  font-size:.92rem;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);
  transition:background .18s ease,color .18s ease}
.btn:hover{background:transparent;color:var(--btn-bg)}
.scheme-deep .btn:hover,.scheme-ink .btn:hover{color:var(--btn-bg)}
.btn--ghost{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn--ghost:hover{background:var(--accent);color:var(--bg)}
.btn[disabled]{opacity:.4;pointer-events:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- chrome ---- */
.announce{background:var(--bg);color:var(--fg);border-bottom:1px solid var(--rule);
  position:relative;padding:.62rem var(--pad);text-align:center;
  transition:background-color var(--ground),color var(--ground),border-color var(--ground)}
.announce__track span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.announce button{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;color:var(--faint);font-size:1rem;line-height:1;padding:.25rem}

/* ---- header --------------------------------------------------------
   Three columns so the wordmark sits dead centre no matter how wide the
   two flanks get. Transparent, because the ground behind it is already
   the right colour and is already animating; painting the header would
   only put a seam across the drift.
   -------------------------------------------------------------------- */
/* Painted, not transparent. A see-through bar looks clean until the first
   heading scrolls under it and the two collide; and because the paint is the
   ground's own colour, drifting with it, the bar still reads as part of the
   page rather than a strip laid over it. */
/* The whole top block travels together, so the offer stays on screen while
   the reader is deciding. The header itself is static inside it — two nested
   sticky elements would fight over the same top edge. */
.topbar{position:sticky;top:0;z-index:60}
.header{background:var(--bg);color:var(--fg);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:.95rem var(--pad) .8rem;
  transition:color var(--ground),padding .32s ease,background-color var(--ground)}
/* Lifted only changes the height — the paint is already there. */
.header--lifted{padding-top:.62rem;padding-bottom:.55rem;box-shadow:0 1px 0 var(--rule)}

.header__left{display:flex;align-items:center;gap:.9rem}
.header__right{display:flex;align-items:center;justify-content:flex-end;gap:1.15rem}

.header__centre{display:flex;flex-direction:column;align-items:center;gap:.42rem}
.header__brand{font-family:var(--display);font-size:1.42rem;letter-spacing:.34em;
  text-indent:.34em;color:inherit;line-height:1}
/* The header artwork is the INK wordmark — dark by design, so it reads on
   paper and disappears on ink. One file, inverted when the ground goes
   dark, rather than swapping sources mid-scroll. */
.header__brand img{filter:none;transition:filter var(--ground)}
:root[data-ground=deep] .header__brand img,
:root[data-ground=ink] .header__brand img{filter:invert(1) brightness(1.9)}

/* Only the shop categories live up here. Everything else — journal,
   about, help — is one tap away in the drawer, where it does not compete
   with the thing people came to buy. */
/* At rest the categories are worth a whole row. Once you are reading, they
   are not — the bar folds down to one line and gives the page back its
   height. Everything folded away is still one tap into the drawer. */
.header__nav{display:flex;gap:1.6rem;font-size:.83rem;letter-spacing:.015em;
  color:color-mix(in srgb,currentColor 82%,transparent);
  max-height:2rem;overflow:hidden;
  transition:color var(--ground),max-height .34s ease,opacity .24s ease}
.header--lifted .header__nav{max-height:0;opacity:0;pointer-events:none}
.header__nav a{padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease}
.header__nav a:hover{color:var(--fg);border-bottom-color:currentColor}

.iconbtn{background:none;border:0;padding:.35rem;cursor:pointer;color:inherit;
  display:inline-flex;align-items:center;justify-content:center;line-height:0}
.iconbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.25}
.iconbtn:hover{opacity:.62}
.header__count{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  margin-left:-.28rem;align-self:flex-start;padding-top:.15rem}

@media(max-width:860px){
  .header{padding:1rem var(--pad) .9rem}
  .header__nav{display:none}
  .header__brand{font-size:1.16rem}
}

/* ---- drawer --------------------------------------------------------
   The panel carries what the header refuses to: the full range, the
   secondary links, the letter. It is a left-hand sheet rather than a
   full overlay so the page stays visible behind it — you can see where
   you were standing.
   -------------------------------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:90}
.drawer[hidden]{display:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(16,23,28,.34);
  opacity:0;transition:opacity .5s ease;border:0;padding:0;cursor:pointer;width:100%}
.drawer.is-open .drawer__scrim{opacity:1}

/* The panel is always paper, whatever the ground behind it is doing — so it
   has to reset the DERIVED tokens too, not just background and colour.
   Without this, a dark ground leaves --soft and --rule cream, and the body
   copy and the field's rule go invisible on the paper panel. */
.drawer__panel{--bg:var(--paper);--fg:var(--ink);--accent:var(--deep);
  --soft:rgba(38,50,60,.66);--faint:rgba(38,50,60,.46);--rule:rgba(38,50,60,.22);
  position:absolute;inset:0 auto 0 0;width:min(430px,88vw);
  background:var(--paper);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2.4rem;
  padding:1.15rem clamp(1.5rem,4vw,2.6rem) 2.4rem;
  transform:translateX(-100%);transition:transform .52s cubic-bezier(.4,0,.2,1)}
.drawer.is-open .drawer__panel{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){
  .drawer__panel,.drawer__scrim{transition-duration:1ms}
}

.drawer__close{align-self:flex-start;width:1.9rem;height:1.9rem;margin-left:-.4rem;
  border:0;background:none;cursor:pointer;color:var(--ink);font-size:1.35rem;line-height:1;
  display:flex;align-items:center;justify-content:center}
.drawer__close:hover{opacity:.55}
.drawer__intro{font-size:.92rem;line-height:1.6;color:rgba(38,50,60,.7);max-width:34ch;margin:0}

.drawer__primary{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.22rem}
.drawer__primary a{font-family:var(--display);font-size:1.32rem;line-height:1.5;
  color:var(--ink);display:inline-block}
.drawer__primary a:hover{font-style:italic}

.drawer__secondary{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.34rem}
.drawer__secondary a{font-size:.8rem;color:rgba(38,50,60,.62)}
.drawer__secondary a:hover{color:var(--ink)}

.drawer__art{margin-top:auto;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.drawer__art img{width:100%;height:100%;object-fit:cover}

/* ---- the tucked letter ---------------------------------------------
   Subscribing is a footnote, not a billboard: a heading, three lines,
   and a rule you type on. It earns its place by being small.
   -------------------------------------------------------------------- */
.tuck{display:flex;flex-direction:column;gap:.7rem;max-width:34ch}
.tuck h4{font-family:var(--display);font-size:1.02rem;letter-spacing:.04em;
  text-transform:none;color:inherit;font-weight:400}
.tuck p{font-size:.79rem;line-height:1.6;color:var(--soft);text-indent:2.2em;margin:0}
/* A hairline at --rule (16%) is invisible at a glance, and then nobody
   knows there is anything to type into. This line has to announce itself as
   a field, so it takes its weight from the text colour instead. */
.tuck__row{display:flex;align-items:center;gap:1rem;
  border-bottom:1px solid color-mix(in srgb,currentColor 45%,transparent);
  padding-bottom:.45rem;transition:border-color .2s ease}
.tuck__row input{flex:1;min-width:0;background:none;border:0;padding:.3rem 0;
  font:inherit;font-size:.82rem;color:inherit}
.tuck__row input::placeholder{color:color-mix(in srgb,currentColor 58%,transparent);opacity:1}
.tuck__row input:focus{outline:none}
.tuck__row:focus-within{border-color:currentColor}
.tuck__row button{background:none;border:0;cursor:pointer;padding:0;color:inherit;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.tuck__row button:hover{opacity:.6}
.tuck__note{font-size:.7rem;color:var(--faint);margin:0}

/* ---- hero ---- */
.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:min(80vh,720px);background:var(--ink)}
.hero__panel{position:relative;overflow:hidden;isolation:isolate}
.hero__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero__type{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:1.45rem;text-align:center;color:var(--paper);
  padding:clamp(3rem,7vw,5rem) clamp(1.4rem,4vw,3rem) clamp(2.6rem,6vw,4.25rem)}
.hero__type h1{color:var(--paper);max-width:14ch}
.hero__type .eyebrow{color:rgba(244,241,234,.82)}
.hero__type .btn{background:var(--paper);color:var(--deep);border-color:var(--paper)}
.hero__type .btn:hover{background:transparent;color:var(--paper)}
.hero__placeholder{width:100%;height:100%;background:var(--sea)}
/* ---- hero: BECOMING spans the seam between the two photos ---- */
.hero__overlay{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  z-index:4;margin:0;color:var(--paper);font-weight:300;letter-spacing:.05em;
  font-size:clamp(2.6rem,7vw,6.5rem);white-space:nowrap;text-align:center;
  text-shadow:0 2px 20px rgba(0,0,0,.35),0 24px 60px rgba(0,0,0,.35);pointer-events:none}
/* Both photos travel together on a phone: stacked instead of side by side,
   so BECOMING still crosses the seam at the natural midpoint between them. */
@media(max-width:820px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__panel{aspect-ratio:4/5}
  .hero__overlay{top:50%;font-size:clamp(2rem,10vw,3rem)}
}

/* ---- grids ---- */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1.6rem}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.band{width:100%;aspect-ratio:16/7;overflow:hidden;border-radius:var(--radius);background:var(--shallow)}
.band img{width:100%;height:100%;object-fit:cover}

.trio__n{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--accent);margin:0 0 .5rem}
.trio p{font-size:.92rem;line-height:1.65}

/* ---- product card ---- */
/* Stretch to the row, and let the foot fall to the bottom. Without this a
   card whose materials metafield is empty — or whose title wraps to one
   line instead of two — sits its price higher than its neighbours, and the
   whole row reads as misaligned. */
.pcard{display:flex;flex-direction:column;gap:.5rem;height:100%}
.pcard__shot{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:rgba(128,128,128,.08)}
.pcard__shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcard:hover .pcard__shot img{transform:scale(1.03)}
.pcard__sku{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--accent);margin:.65rem 0 0}
.pcard__mat{font-size:.78rem;line-height:1.55;color:var(--soft);margin:0}
.pcard__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--rule);padding-top:.75rem;margin-top:auto}
.pcard__prac{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
/* The practice label is the flexible half; the price is not. Letting the
   price wrap put a strikethrough on one line and the real number on the
   next, and only on the cards whose label happened to be long. */
.pcard__prac{min-width:0}
.pcard__price{font-family:var(--display);font-size:1.2rem;white-space:nowrap;flex:none}

/* ---- practices ---- */
.prac{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:2rem;
  padding:1.85rem 0;border-top:1px solid var(--rule);align-items:start}
.prac:last-child{border-bottom:1px solid var(--rule)}
@media(max-width:700px){.prac{grid-template-columns:1fr;gap:.6rem}}

/* ---- stone grid ---- */
.stones{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.stones a{padding:1.45rem 1.1rem;background:var(--bg);display:flex;flex-direction:column;gap:.28rem;
  transition:background .18s ease}
.stones a:hover{background:transparent}
.stones b{font-family:var(--display);font-weight:400;font-size:1.08rem}
.stones span{font-size:.75rem;color:var(--soft)}

/* ---- elemental pulse ---- */
.section--stone-pulse{padding-bottom:clamp(1.5rem,3.5vw,3.25rem)}
.section--stone-pulse .inner{gap:1.4rem}
.stone-pulse{width:calc(100vw - var(--pad) - var(--pad));margin:.25rem 0 0 calc((100% - 100vw)/2 + var(--pad))}
.stone-pulse__carousel{display:grid;grid-template-columns:2.25rem minmax(0,1fr) 2.25rem;align-items:center;gap:clamp(.5rem,2vw,2rem)}
.stone-pulse__arrow{appearance:none;border:0;background:transparent;color:var(--accent);font-size:2.25rem;line-height:1;padding:.35rem;cursor:pointer;transition:opacity .2s ease,transform .2s ease}
.stone-pulse__arrow:hover{opacity:.65;transform:translateX(-3px)}
.stone-pulse__arrow--next:hover{transform:translateX(3px)}
.stone-pulse__viewport{position:relative;min-width:0;overflow:hidden;padding:1.4rem 0 1.1rem}
.stone-pulse__track{position:relative;height:15rem;min-width:0;column-gap:clamp(.7rem,3vw,3.4rem)}
.stone-pulse__item{position:absolute;left:50%;top:0;display:grid;grid-template-rows:10.4rem auto;min-width:0;align-items:end;justify-items:center;text-align:center;gap:1.05rem;opacity:.58;transform-origin:center bottom;transition:transform .42s cubic-bezier(.4,0,.2,1),opacity .32s ease}
.stone-pulse__item.is-near{opacity:.78}
.stone-pulse__item.is-active{opacity:1;z-index:1}
.stone-pulse__item.is-hidden{opacity:0;pointer-events:none}
.stone-pulse__item.is-teleporting{transition:none!important}
.stone-pulse__image{display:block;width:min(100%,8.7rem);height:8.7rem;object-fit:contain;background:transparent;filter:drop-shadow(0 .45rem .5rem rgba(7,30,36,.26))}
.stone-pulse__item.is-active .stone-pulse__image{width:min(100%,9.25rem);height:9.25rem;filter:drop-shadow(0 .52rem .58rem rgba(7,30,36,.28))}
.stone-pulse__copy{display:grid;gap:.28rem;min-height:3.9rem;align-content:start}
.stone-pulse__energy,.stone-pulse__name{margin:0}
.stone-pulse__energy{font-size:.68rem;font-weight:600;letter-spacing:.095em;line-height:1.2;text-transform:uppercase;color:var(--soft)}
.stone-pulse__name{font-family:var(--display);font-size:1rem;font-weight:400;line-height:1.25;color:var(--fg)}
.stone-pulse__item.is-active .stone-pulse__energy{color:var(--fg)}
.stone-pulse__item.is-active .stone-pulse__name{font-size:1.06rem}
@media(max-width:700px){
  .stone-pulse__carousel{grid-template-columns:1.8rem minmax(0,1fr) 1.8rem;gap:0}
  .stone-pulse__viewport{padding-top:1.2rem}
  .stone-pulse__track{height:13rem;column-gap:.25rem}
  .stone-pulse__item{grid-template-rows:8.7rem auto;opacity:.42}
  .stone-pulse__item.is-near{opacity:.68}
  .stone-pulse__item.is-active{opacity:1}
  .stone-pulse__image{width:6.8rem;height:6.8rem}
  .stone-pulse__item.is-active .stone-pulse__image{width:7.3rem;height:7.3rem}
  .stone-pulse__copy{min-height:3.7rem}
  .stone-pulse__energy{font-size:.54rem;letter-spacing:.06em}
  .stone-pulse__name{font-size:.78rem}
  .stone-pulse__item.is-active .stone-pulse__name{font-size:.86rem}
  .stone-pulse__arrow{font-size:1.8rem;padding:.25rem}
}

/* ---- journal ---- */
.jcard{display:flex;flex-direction:column;gap:.8rem}
.jcard__thumb{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--shallow)}
.jcard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.jcard:hover .jcard__thumb img{transform:scale(1.03)}
.jcard p{font-size:.88rem;line-height:1.6}

/* ---- forms ---- */
.form{display:flex;gap:.6rem;flex-wrap:wrap;max-width:520px}
.form input[type=email],.form input[type=text],select,textarea{
  flex:1 1 220px;padding:.85rem 1rem;border:1px solid var(--accent);border-radius:var(--radius);
  background:var(--raised);color:var(--ink);font-family:var(--body);font-size:.95rem}
.form input::placeholder{color:rgba(38,50,60,.45)}

/* ---- footer --------------------------------------------------------
   Three movements: the directory, then a held breath, then the signature.
   The middle one is the point — a ruled field with four words pinned to
   its edges, most of it empty. It is the only place on the site where
   type is allowed to be purely a picture.
   -------------------------------------------------------------------- */
.footer{background:transparent;color:var(--fg);padding:clamp(3.5rem,7vw,6rem) var(--pad) 1.6rem;
  transition:color var(--ground)}
/* The number of link columns is a setting, not a constant — hard-coding
   five tracks leaves a hole the day someone runs three. auto-fit collapses
   what is not used; the letter takes two tracks so its lines do not break
   every four words. */
.footer__grid{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:2.4rem}
.footer__grid .tuck{grid-column:span 2;min-width:15rem}
@media(max-width:680px){
  .footer__grid{grid-template-columns:repeat(2,1fr);gap:1.9rem}
  .footer__grid .tuck{grid-column:1/-1;min-width:0}
}
.footer h4{font-family:var(--display);font-size:1.02rem;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 .95rem;color:inherit}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:.44rem;font-size:.84rem}
.footer li a{color:var(--soft);transition:color .2s ease}
.footer li a:hover{color:var(--fg)}

/* --- the held breath --- */
/* Four words on the inside of a frame, read clockwise. The two vertical ones
   own the outer columns; the two horizontal ones are inset past those columns
   so a long word — BECOMING is nine letters and nearly fills the height —
   cannot run up into the line above it. The words are editable in the theme
   editor, so the clearance has to hold for any length, not just today's. */
.footer__marque{position:relative;max-width:1180px;margin:clamp(2.6rem,6vw,4.5rem) auto 0;
  border:1px solid var(--rule);transition:border-color var(--ground);
  --marque-pad:clamp(1.6rem,3.5vw,2.9rem);
  --marque-gutter:calc(var(--marque-pad) + 2.9rem);
  min-height:clamp(330px,50vh,500px);
  padding:var(--marque-pad)}
.footer__word{position:absolute;margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.45rem,3.1vw,2.5rem);line-height:1;letter-spacing:.04em;
  color:var(--fg);transition:color var(--ground);white-space:nowrap}
.footer__word--one{top:var(--marque-pad);left:var(--marque-gutter);font-style:italic}
.footer__word--two{top:var(--marque-pad);right:var(--marque-pad);
  writing-mode:vertical-rl;letter-spacing:.1em}
.footer__word--three{bottom:var(--marque-pad);left:var(--marque-pad);
  writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.1em}
.footer__word--four{bottom:var(--marque-pad);right:var(--marque-gutter);font-style:italic}
@media(max-width:600px){
  .footer__marque{min-height:360px;--marque-gutter:calc(var(--marque-pad) + 2rem)}
  .footer__word{font-size:1.3rem}
}

/* --- the signature --- */
.footer__sign{text-align:center;margin:clamp(2.2rem,5vw,3.4rem) auto 0;
  display:flex;flex-direction:column;align-items:center;gap:.55rem}
.footer__logo{margin:0 auto}
.footer__brand{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.6rem);
  letter-spacing:.36em;text-indent:.36em;color:inherit;margin:0}
.footer__estd{font-size:.63rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--faint);margin:0}
.footer__tagline{font-family:var(--display);font-style:italic;font-size:.98rem;
  color:var(--soft);margin:.35rem 0 0;max-width:34ch;transition:color var(--ground)}

.footer__legal{max-width:1180px;margin:clamp(2rem,4vw,3rem) auto 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap;
  font-size:.68rem;color:var(--faint)}
.footer__legal p{margin:0;max-width:none}
.footer__legal a{text-decoration:underline;text-underline-offset:3px}

/* Sits in the legal row on purpose: it is a utility, not an invitation. */
.localeform{display:flex;align-items:baseline;gap:.5rem;color:var(--faint);
  transition:color var(--ground)}
.localeform label{font-size:.68rem}
.localeform select{appearance:none;background:none;border:0;padding:0 .1rem;
  font:inherit;font-size:.68rem;color:var(--fg);cursor:pointer;
  border-bottom:1px solid var(--rule);transition:color var(--ground),border-color var(--ground)}
.localeform select:hover{border-bottom-color:currentColor}
.localeform select option{color:var(--ink);background:var(--paper)}

/* ---- product / collection / cart ---- */
/* The page's own way back, above everything, so it survives the mobile
   reflow that puts the photographs first. */
.pdp__back{max-width:1120px;margin:0 auto;padding:clamp(1.6rem,3.5vw,2.4rem) var(--pad) 0}
.pdp__back a{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);text-decoration:none;display:inline-flex;gap:.5em;align-items:center;
  transition:color .2s ease}
.pdp__back a:hover{color:var(--fg)}
.pdp__back a span{transition:transform .2s ease}
.pdp__back a:hover span{transform:translateX(-.25em)}

.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  max-width:1120px;margin:0 auto;padding:clamp(1.2rem,2.5vw,1.8rem) var(--pad) clamp(2.5rem,5vw,4rem)}
@media(max-width:860px){.pdp{grid-template-columns:1fr}}
.pdp__media{display:flex;flex-direction:column;gap:.75rem}
.pdp__media img{width:100%;border-radius:var(--radius);display:block}

/* On a phone six stacked photographs put the price four screens down and the
   button five. Here they sit side by side and swipe, with the next one
   peeking in, so the name and price land on the first screen. */
@media(max-width:860px){
  .pdp__media{flex-direction:row;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad);scroll-padding:0 var(--pad)}
  .pdp__media::-webkit-scrollbar{display:none}
  .pdp__media .pdp__shot{flex:0 0 72%;width:auto;scroll-snap-align:start}
}

/* The button is still a screen or two down on a phone, so it follows along
   the bottom edge until the real one is in view. */
.pdp__bar{display:none}
@media(max-width:860px){
  .pdp__bar{display:flex;align-items:center;gap:.9rem;position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
    background:var(--bg);border-top:1px solid var(--rule);
    transition:transform .25s ease}
  .pdp__bar[hidden]{display:flex;transform:translateY(110%);visibility:hidden}
  .pdp__bar-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
  .pdp__bar-name{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pdp__bar-price{font-family:var(--display);font-size:1.05rem}
  .pdp__bar .btn{flex:none;padding-left:1.6rem;padding-right:1.6rem}
  .pdp{padding-bottom:6.5rem}
}
@media(prefers-reduced-motion:reduce){.pdp__bar{transition:none}}

/* Each photograph is a button, so enlarging works from the keyboard too and
   the cursor says so before the click. */
.pdp__shot{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;
  margin:0;font:inherit;color:inherit;display:block;width:100%;cursor:zoom-in;
  overflow:hidden;border-radius:var(--radius);position:relative}
.pdp__shot img{transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.pdp__shot:hover img,.pdp__shot:focus-visible img{transform:scale(1.045)}
.pdp__shot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.lightbox{position:fixed;inset:0;z-index:120;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;
  background:rgba(16,22,26,.94);padding:clamp(.75rem,3vw,2.5rem);
  opacity:0;transition:opacity .25s ease}
.lightbox.is-open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox__stage{grid-column:2;display:flex;align-items:center;justify-content:center;
  height:100%;min-width:0;touch-action:pan-y}
/* width/height attributes carry the ratio; auto lets it govern so the element
   box hugs the picture instead of being letterboxed inside a larger one. */
.lightbox__stage img{width:auto;height:auto;max-width:100%;max-height:88vh;
  object-fit:contain;border-radius:var(--radius);user-select:none;-webkit-user-drag:none}
.lightbox__close,.lightbox__nav{appearance:none;-webkit-appearance:none;background:none;
  border:0;color:#F4F1EA;cursor:pointer;line-height:1;padding:.35em .5em;
  opacity:.62;transition:opacity .2s ease}
.lightbox__close:hover,.lightbox__nav:hover,
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{opacity:1}
.lightbox__close{position:absolute;top:clamp(.5rem,2vw,1.5rem);right:clamp(.5rem,2vw,1.5rem);
  font-size:2rem;z-index:1}
.lightbox__nav{font-size:clamp(2.5rem,6vw,4rem)}
.lightbox__nav--prev{grid-column:1}
.lightbox__nav--next{grid-column:3}
.lightbox__count{position:absolute;bottom:clamp(.6rem,2.5vw,1.6rem);left:0;right:0;
  /* p is capped at --measure globally; the counter needs full width to centre. */
  max-width:none;text-align:center;color:#F4F1EA;opacity:.6;margin:0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em}
/* One photograph: the arrows and the counter would both be lying. */
.lightbox.is-single .lightbox__nav,.lightbox.is-single .lightbox__count{display:none}
@media(max-width:640px){
  .lightbox{grid-template-columns:1fr}
  .lightbox__stage{grid-column:1}
  .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%)}
  .lightbox__nav--prev{left:.15rem}
  .lightbox__nav--next{right:.15rem}
}
@media(prefers-reduced-motion:reduce){
  .pdp__shot img,.lightbox,.pdp__back a span{transition:none}
  .pdp__shot:hover img,.pdp__shot:focus-visible img{transform:none}
}
.pdp__info{display:flex;flex-direction:column;gap:1.05rem;align-self:start;position:sticky;top:2rem}
@media(max-width:860px){.pdp__info{position:static}}
.pdp__price{font-family:var(--display);font-size:1.6rem}
.pdp__practice{padding:.1rem 0 .15rem;display:flex;flex-direction:column;gap:.4rem}
.pdp__practice-name{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent)}
.pdp__practice-note{margin:0;font-family:var(--display);font-size:clamp(1.08rem,2vw,1.28rem);
  line-height:1.5;max-width:34ch;color:var(--fg)}
.pdp__primary{margin:0;font-size:.84rem;line-height:1.65;color:var(--soft)}
.pdp__primary span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.2rem}
.pdp__observation{font-size:.94rem;line-height:1.68;margin:0;max-width:42ch}
.rte p{margin:0 0 .9rem}
.rte p:last-child{margin-bottom:0}

.cartline{display:grid;grid-template-columns:88px 1fr auto;gap:1.1rem;align-items:start;
  padding:1.25rem 0;border-bottom:1px solid var(--rule)}
.cartline img{border-radius:var(--radius)}

.pagenav{display:flex;gap:1.5rem;justify-content:center;padding:2rem 0;font-size:.88rem}

/* ---- section background image (generic; used by By stone) ----
   Image fills the section; the scheme's own background colour sits over it,
   controlled by --bg-overlay. Text still reads the scheme's --fg, so contrast holds. */
.section.has-bg{position:relative;isolation:isolate;background:transparent}
.section__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.section.has-bg::after{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--bg);opacity:var(--bg-overlay,.86)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==================================================================
   Secondary pages: hero band, body, image+text, quote band.
   Same five schemes, same measure. ASCII only in here.
   ================================================================== */
.pagehero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--bg);color:var(--fg);
  display:flex;align-items:flex-end;
  min-height:clamp(20rem,46vh,30rem);
  padding:clamp(2.5rem,6vw,4.5rem) var(--pad)}
.pagehero--short{min-height:clamp(13rem,26vh,19rem)}
.pagehero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pagehero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(16,23,28,.86) 0%,rgba(16,23,28,.60) 34%,
    rgba(16,23,28,.14) 72%,rgba(16,23,28,.30) 100%)}
.pagehero__type{max-width:1120px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;gap:1rem}
.pagehero__img ~ .pagehero__type,
.pagehero__img ~ .pagehero__type h1{color:var(--paper)}
.pagehero__img ~ .pagehero__type .eyebrow{color:rgba(244,241,234,.80)}
.pagehero__lede{font-family:var(--display);font-size:clamp(1.05rem,2.2vw,1.4rem);
  font-style:italic;line-height:1.5;max-width:38ch;color:inherit;opacity:.88}

.rte--page{max-width:none}
.rte--page h2{margin:2.4rem 0 .85rem}
.rte--page h3{margin:2rem 0 .6rem}
.rte--page h2:first-child,.rte--page h3:first-child{margin-top:0}
.rte--page p{max-width:var(--measure)}
.rte--page strong{font-weight:700}
.rte--page ul,.rte--page ol{margin:0 0 1.1rem;padding-left:1.15rem;max-width:var(--measure)}
.rte--page li{margin-bottom:.35rem}
.rte--page li::marker{color:var(--accent)}
.rte--page a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.rte--page hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
.rte--page blockquote{margin:1.6rem 0;padding-left:1.25rem;
  border-left:2px solid var(--accent);font-family:var(--display);
  font-size:1.15rem;line-height:1.5;max-width:38ch}

.mediatext{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);
  align-items:center}
.mediatext--reverse .mediatext__media{order:2}
.mediatext__media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius)}
.mediatext__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mediatext__placeholder{position:absolute;inset:0;background:var(--sea)}
.mediatext__body{display:flex;flex-direction:column;gap:1.05rem;align-items:flex-start}
.mediatext__btn{margin-top:.5rem}
@media(max-width:760px){
  .mediatext{grid-template-columns:1fr}
  .mediatext--reverse .mediatext__media{order:0}
  .mediatext__media{aspect-ratio:3/2}
}

.bigquote__wrap{align-items:flex-start}
.bigquote__wrap--centre{align-items:center;text-align:center}
.bigquote{font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,3.6vw,2.35rem);line-height:1.36;
  max-width:26ch;color:var(--fg);text-wrap:balance}
.bigquote__wrap--centre .bigquote{max-width:24ch}

/* ---- product page accordions + cart note ---- */
.pdp__details{margin-top:1.75rem;border-top:1px solid var(--rule)}
.acc{border-bottom:1px solid var(--rule)}
.acc summary{cursor:pointer;list-style:none;padding:.95rem 0;
  font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--fg)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:1.05rem;letter-spacing:0;color:var(--accent)}
.acc[open] summary::after{content:"\2212"}
.acc summary:hover{color:var(--accent)}
.acc__body{padding:0 0 1.3rem;font-size:.92rem;color:var(--soft)}
.acc__body p{margin:0 0 .8rem;max-width:none}
.acc__body p:last-child{margin-bottom:0}
.acc__body strong{color:var(--fg)}
.acc__body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.cartnote{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem 0;
  border-top:1px solid var(--rule)}
.cartnote textarea{width:100%;font:inherit;font-size:.94rem;color:var(--fg);
  background:var(--raised);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.75rem .85rem;resize:vertical}
.cartnote textarea::placeholder{color:var(--faint)}
.cartnote textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- worn by: their photographs, their sentences --------------------
   Square shots so a phone snap and a studio shot sit on the same line
   without one of them looking like a mistake. */
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.3rem,2.6vw,2.2rem);margin-top:2rem}
.voices__lede{max-width:46ch;margin:.7rem 0 0}
.voice{margin:0;display:flex;flex-direction:column;gap:.75rem}
.voice__shot{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);
  background:rgba(128,128,128,.09)}
.voice__shot img{width:100%;height:100%;object-fit:cover;display:block}
.voice__quote{margin:0;font-size:.9rem;line-height:1.66;opacity:.88}
.voice__who{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;opacity:.6}
.voices__foot{margin-top:1.9rem;font-size:.85rem}
.voices__foot a{text-decoration:underline;text-underline-offset:.2em}
@media(max-width:600px){.voices{grid-template-columns:1fr 1fr;gap:1rem}
  .voice__quote{font-size:.83rem}}

/* ---- currency code ------------------------------------------------
   AUD, NZD and CAD all print as "$". The code sits beside the number,
   small enough not to shout and large enough to settle the question. */
.price__code{font-family:var(--mono);font-size:.58em;letter-spacing:.1em;
  opacity:.55;margin-left:.35em;vertical-align:.12em}

/* ---- what happens after you press the button ---------------------- */
.pdp__fit{margin:1.15rem 0 0;padding:.95rem 0 0;border-top:1px solid var(--rule)}
.pdp__fit-size{font-size:.95rem;line-height:1.6;margin:0 0 .35rem}
.pdp__fit-note{font-size:.8rem;line-height:1.6;color:var(--soft);margin:0}
.pdp__assure{list-style:none;margin:1rem 0 .9rem;padding:0;
  display:flex;flex-direction:column;gap:.42rem}
.pdp__assure li{position:relative;padding-left:1.05rem;font-size:.82rem;
  line-height:1.5;color:var(--soft)}
.pdp__assure li::before{content:"";position:absolute;left:0;top:.52em;
  width:.42rem;height:.42rem;border:1px solid currentColor;border-radius:50%;opacity:.6}

/* ---- sale price (compare-at) ---- */
.price--was{color:var(--faint);text-decoration:line-through;font-weight:400;margin-right:.45em}
.price--now{color:var(--fg)}
.pdp__price .price--was{font-size:.7em;vertical-align:.08em}

/* ---- hero: left-aligned type, body copy, two CTAs, video panel ---- */
.hero__type{align-items:flex-start;text-align:left;gap:1.05rem}
.hero__type h1{max-width:16ch}
/* 54ch, not 38ch: the longest line is 51 characters, and at 38 it broke one
   word short and left "time." alone on a line of its own. `text-wrap:pretty`
   is the belt to that braces — on the narrower desktop widths where the
   sentence still has to wrap, it refuses to leave a single word behind. */
.hero__body{color:rgba(244,241,234,.86);font-size:clamp(.95rem,1.15vw,1.06rem);
  line-height:1.7;max-width:54ch;margin:0;text-wrap:pretty}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.35rem}
.hero__type .btn--ghost{background:transparent;color:var(--paper);border-color:rgba(244,241,234,.55)}
.hero__type .btn--ghost:hover{background:var(--paper);color:var(--deep);border-color:var(--paper)}
.hero__panel video,.hero__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;display:block}
@media(max-width:820px){
  .hero__body{max-width:none;font-size:.94rem;line-height:1.65}
  .hero__type{padding:2.6rem 1.4rem 2.1rem;gap:.95rem}
  .hero__type h1{font-size:clamp(2.05rem,9.5vw,2.85rem);max-width:12ch}
  /* Stacked, not side by side: two half-width buttons on a 390px screen
     wrap their labels onto two lines each and stop reading as buttons. */
  .hero__ctas{width:100%;flex-direction:column;gap:.55rem;margin-top:.15rem}
  .hero__ctas .btn{flex:none;width:100%;text-align:center}
}

/* ---- practices: three cards ---- */
.pracs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-top:2.1rem}
.praccard{display:flex;flex-direction:column;gap:.62rem;color:inherit;text-decoration:none}
.praccard__shot{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.02))}
.praccard__shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
a.praccard:hover .praccard__shot img{transform:scale(1.04)}
.praccard__name{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.85;margin-top:.2rem}
.praccard__state{font-family:var(--display);font-weight:400;font-size:1.12rem;line-height:1.4}
.praccard__act{font-size:.88rem;line-height:1.65;opacity:.72;padding-left:.85rem;
  border-left:1px solid currentColor}
a.praccard:hover .praccard__state{text-decoration:underline;text-underline-offset:.22em}
.pracs__foot{margin-top:2rem;font-size:.9rem;opacity:.72}
.pracs__foot a{text-decoration:underline;text-underline-offset:.2em}
@media(max-width:820px){
  .pracs{grid-template-columns:1fr;gap:2.1rem}
  .praccard__shot{aspect-ratio:16/10}
}

/* ---- claim: one field of colour, the making floating on it ---- */
.claim{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch
  gap:clamp(1.8rem,4vw,4.2rem);padding:clamp(2.3rem,4vw,3.8rem) var(--pad);
  max-width:calc(1260px + 2 * var(--pad));margin-inline:auto}
.claim__media{position:relative;overflow:hidden;aspect-ratio:auto;
  width:100%;justify-self:start;transform:translateX(-1.4rem);
  border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  box-shadow:0 24px 60px -28px rgba(0,0,0,.55)}
.claim__media img,.claim__media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.claim__type{display:flex;flex-direction:column;justify-content:center;gap:.85rem;padding:0}
.claim__type h2{max-width:15ch;margin:0}
.claim__body{font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.75;max-width:40ch;
  opacity:.86;margin:0}
.claim__practices{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.1rem,2.6vw,2.6rem);align-items:start;border-top:1px solid var(--rule);
  padding-top:1.5rem;margin-top:.9rem}
.claim__practice-icon{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.claim__practice-icon svg{width:1.05rem;height:1.05rem;stroke:currentColor;fill:none;stroke-width:1.15}
.claim__practice h3{font-family:var(--display);font-size:clamp(1.05rem,1.5vw,1.28rem);
  font-weight:400;line-height:1.25;margin:0 0 .42rem}
.claim__practice p{font-size:.78rem;line-height:1.55;opacity:.7;margin:0;max-width:25ch}
.claim__reading{font-size:.78rem;line-height:1.55}
.claim__reading a{color:inherit;display:inline-block;opacity:.82;text-decoration:none;
  transition:opacity .2s ease}
.claim__reading a:hover{opacity:1}
@media(max-width:820px){
  .claim{grid-template-columns:1fr;gap:1.5rem;padding:clamp(1.9rem,6vw,2.6rem) var(--pad)}
  .claim__media{max-width:100%;aspect-ratio:4/3}
  .claim__practices{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.25rem}
  .claim__practice-icon{width:1.9rem;height:1.9rem;margin-bottom:.4rem}
  .claim__practice-icon svg{width:.78rem;height:.78rem}
  .claim__practice h3{font-size:.76rem;margin:0 0 .18rem}
  .claim__practice p{font-size:.6rem;line-height:1.3;max-width:none}
  .claim__reading{padding-top:.25rem}
}}

/* ---- intentions: three entry tiles under a light band ---- */
.intentions__head{text-align:center;max-width:640px;margin:0 auto clamp(2.4rem,5vw,3.4rem)}
.intentions__head h2{margin:0}
.intentions__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem);
  max-width:calc(1120px + 2 * var(--pad));margin:0 auto}
.intentions__tile{display:block;color:inherit;text-decoration:none}
.intentions__frame{aspect-ratio:4/5;overflow:hidden;background:var(--shallow);border-radius:var(--radius)}
.intentions__frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.intentions__tile:hover .intentions__frame img{transform:scale(1.04)}
.intentions__body{padding-top:1.1rem;border-top:1px solid var(--rule);margin-top:1.1rem;position:relative}
.intentions__body h3{font-family:var(--display);font-size:1.05rem;font-weight:400;margin:0 0 .3rem;
  letter-spacing:.04em;text-transform:uppercase}
.intentions__body p{font-size:.88rem;opacity:.7;margin:0}
.intentions__go{position:absolute;right:0;bottom:.1rem;font-size:.85rem;opacity:.6;
  transition:opacity .2s ease,transform .2s ease}
.intentions__tile:hover .intentions__go{opacity:1;transform:translateX(3px)}
@media(max-width:820px){
  .intentions__grid{grid-template-columns:1fr;max-width:420px}
}

/* ---- claim: adjustable tint over the making media ---- */
.claim__scrim{position:absolute;inset:0;display:block;pointer-events:none;z-index:1}
.claim__media img,.claim__media video{z-index:0}

/* ---- announcement: two messages, crossfading ---- */
.announce{padding-left:calc(var(--pad) + 1.6rem);padding-right:calc(var(--pad) + 1.6rem)}
.announce__viewport{overflow:hidden}
.announce__track{position:relative;display:flex;align-items:center;justify-content:center;height:1.7em}
.announce__track span{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;opacity:0;transition:opacity .7s ease;
  font-size:clamp(.54rem,1.55vw,.7rem);letter-spacing:clamp(.05em,.4vw,.14em)}
.announce__track span.is-active{opacity:1}
@media (prefers-reduced-motion: reduce){
  .announce__track span{transition:none}
}
/* ---- becoming: standalone dark text band, sits under the hero ---- */
.becoming{padding:clamp(2rem,4vw,3rem) clamp(1.4rem,4vw,3rem);text-align:center}
.becoming__inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.45rem;color:var(--paper)}
.becoming .eyebrow{color:rgba(244,241,234,.82);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.becoming h2{color:var(--paper);font-weight:300;font-size:clamp(2rem,3.6vw,3rem);margin:0}
.becoming__body{color:rgba(244,241,234,.82);font-weight:300;line-height:1.7;max-width:46ch;margin:0}
.becoming__ctas{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}
.becoming .btn{background:var(--paper);color:var(--deep);border-color:var(--paper)}
.becoming .btn:hover{background:transparent;color:var(--paper)}
.becoming .btn--ghost{background:transparent;color:var(--paper);border:1px solid var(--paper)}
.becoming .btn--ghost:hover{background:var(--paper);color:var(--deep)}
@media(max-width:820px){
  .becoming__body{font-size:.86rem;max-width:30ch}
  .becoming__ctas{flex-wrap:nowrap;gap:.6rem}
  .becoming .btn{padding:.8rem .7rem;font-size:.62rem;letter-spacing:.06em;white-space:nowrap}
}