/* HOUSE RULES: no rounded corners, no shadows, no glass/blur.
   Everything below is square-edged and flat by design. */
/* =========================================================================
   SUB. — Home v3. Self-contained: styles index-v3.html only.
   site.css / home-v2.css and every other page are untouched.
   ========================================================================= */

@font-face{
  font-family:'Switzer';
  src:url('../fonts/Switzer-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/Fraunces-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* the blue runs deep -> light so the studio backdrop of the cut-out
     photography (#C3DDF9, sampled) lands on an identical value and the
     photo edge disappears */
  --blue-900:#5E7CA8;
  --blue-700:#7B9AC6;
  --blue-500:#8FADD2;
  --blue-300:#A8C6E8;
  --blue-200:#C3DDF9;
  --blue-50:#EAF2FB;

  --pink-100:#F7DEE2;
  --pink-200:#F2CBD3;
  --pink-400:#E8A0AE;
  --pink-500:#DE8A9B;

  /* Kuromi campaign palette — the hero is plum, so the page is too */
  --plum-900:#2E2140;
  --plum-700:#4A3568;
  --plum-500:#6E5794;
  --lilac-300:#B79FD6;
  --lilac-100:#EDE7F5;

  --cream:#F6F2EC;
  --ink:#241B33;
  --ink-2:#584B66;
  --ink-3:#8B7E97;
  --paper:#FFFFFF;
  --line:#E2DAEC;
  /* structural hairlines: --line measures 1.22:1 on cream and disappears on
     a phone; --rule is 2.03:1 — still a hairline, actually visible */
  --rule:#B7A5CC;

  --sans:'Switzer','Noto Sans Thai','Kanit',system-ui,-apple-system,sans-serif;
  --display:'Fraunces','Noto Sans Thai','Kanit',Georgia,serif;

  --wrap:1200px;
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --r:0px;                     /* square frames, per the client */
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  font-variation-settings:'wght' 400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;              /* never overflow-x:hidden — it kills sticky */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--ink);color:#fff;padding:.6rem 1rem}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.on-light :focus-visible,.nl__form :focus-visible{outline-color:var(--plum-500)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- logo (masked PNG, inherits currentColor) -------------------- */
.logo{display:inline-flex;position:relative;line-height:0;vertical-align:middle}
.logo__mark,.logo__dot{
  display:block;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
.logo__mark{
  width:var(--logo-w,80px);aspect-ratio:673/266;background:currentColor;
  -webkit-mask-image:url('../img/logo-mark.png');mask-image:url('../img/logo-mark.png');
}
.logo__dot{
  position:absolute;inset:0;width:var(--logo-w,80px);aspect-ratio:673/266;
  background:var(--dot,#FCF1B9);
  -webkit-mask-image:url('../img/logo-dot.png');mask-image:url('../img/logo-dot.png');
}

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem 1.5rem;font-size:.75rem;
  font-variation-settings:'wght' 600;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:15px;height:15px}
.btn--outline{border:1.4px solid rgb(255 255 255 / .8);color:#fff}
.btn--outline:hover{background:#fff;color:var(--ink)}
.btn--pink{background:var(--pink-400);color:#fff}
.btn--pink:hover{background:var(--pink-500)}
.btn--blue{background:var(--blue-700);color:#fff}
.btn--blue:hover{background:var(--blue-900)}
.btn--sm{padding:.55rem 1.05rem;font-size:.6875rem;letter-spacing:.08em}

/* circular arrow, used on every card that opens something */
.oarw{
  width:34px;height:34px;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;flex:0 0 auto;
  transition:transform .2s ease,background-color .2s ease;
}
.oarw svg{width:15px;height:15px}
.oarw--ghost{background:rgb(255 255 255 / .22);color:#fff;
  border:1.2px solid rgb(255 255 255 / .55)}

/* ---------- nav --------------------------------------------------------- */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;color:#fff;
}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);width:100%;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.75rem);
}
.nav__logo{--logo-w:74px;--dot:#FCF1B9;color:#fff}
.nav__links{display:flex;gap:clamp(.9rem,2.2vw,1.9rem);list-style:none;margin:0;padding:0}
.nav__links a{font-size:.8125rem;font-variation-settings:'wght' 500;opacity:.94}
.nav__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.nav__r{margin-left:auto;display:flex;align-items:center;gap:.85rem}
.nav__ic{display:grid;place-items:center;width:32px;height:32px;color:#fff}
.nav__ic svg{width:18px;height:18px}
.nav__vers{display:inline-flex;align-items:center;gap:.5rem;margin-right:.15rem}
.nav__vers a,.nav__vers span{
  font-size:.6875rem;font-variation-settings:'wght' 600;letter-spacing:.08em;
  text-transform:uppercase;opacity:.6;transition:opacity .2s}
.nav__vers a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.nav__vers [aria-current]{opacity:1;text-decoration:underline;text-underline-offset:3px}
.burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:24px;height:24px}
.burger span{display:block;height:1.6px;background:#fff;}

/* ---------- hero: split display type, corner meta, scrolling strip -------
   Follows the supplied reference: the two display words sit either side of
   the subject, small uppercase meta in the corners, and a continuously
   scrolling strip of colourways cutting across the image. */
.hero{
  position:relative;padding-top:var(--nav-h);color:#fff;overflow:clip;
  /* Kuromi collection: the backdrop matches the campaign shot's own lilac so
     the cut-out sits on it without a visible seam */
  background:
    radial-gradient(60% 76% at 50% 76%, #B79FD6 0%, rgb(183 159 214 / 0) 70%),
    linear-gradient(168deg, #6E5794 0%, #8A6FB4 40%, #A98FCE 100%);
}
.hero__in{
  position:relative;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(1.5rem,4vw,3rem) var(--gutter) 0;
  min-height:clamp(660px,92vh,1120px);display:flex;flex-direction:column;
}
.hero__split{
  position:relative;z-index:2;margin:0;display:flex;justify-content:space-between;align-items:flex-start;
  font-family:var(--display);line-height:.92;letter-spacing:-.02em;
  font-size:clamp(2.4rem,9vw,7.5rem);
  font-variation-settings:'wght' 400,'SOFT' 20,'WONK' 1,'opsz' 144;
  pointer-events:none;
}
.hero__w{display:block}
.hero__meta{
  position:absolute;z-index:2;top:clamp(5.5rem,13vw,10.5rem);margin:0;
  font-size:.5625rem;line-height:1.7;letter-spacing:.13em;text-transform:uppercase;
  font-variation-settings:'wght' 500;opacity:.9;
}
.hero__meta b{font-variation-settings:'wght' 700}
.hero__meta--l{left:var(--gutter)}
.hero__meta--r{right:var(--gutter);text-align:right}
.hero__figure{
  /* Dominant but never clipped: sized by HEIGHT so the whole figure always
     fits the hero — driving it off width cropped her head at wide viewports. */
  position:absolute;z-index:1;left:56%;bottom:0;transform:translateX(-50%);
  height:clamp(480px,88vh,1060px);width:auto;margin:0;pointer-events:none;
}
.hero__figure img{
  height:100%;width:auto;max-width:none;display:block;
}
/* the strip cuts across the subject, as in the reference */
.marquee{
  position:absolute;z-index:3;
  /* full-bleed like the reference poster: the strip runs edge to edge, not
     to the 1200px wrap, so the five tiles are as large as the screen allows */
  left:50%;right:auto;width:100vw;transform:translateX(-50%);
  /* anchored to the bottom, not to a % of the hero: the tiles are square,
     so their height follows the width, and a top-% would slide the strip
     into the footer row at some viewports */
  top:auto;bottom:clamp(5rem,10vw,8.5rem);
  /* its own containing block, so a tile can be sized as a fraction of the
     strip (cqw) rather than of the viewport — five across, whatever the width */
  container-type:inline-size;
  --mq-per:6;
  --mq-gap:10px;
  overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 2%,#000 98%,#0000);
          mask-image:linear-gradient(90deg,#0000,#000 2%,#000 98%,#0000);
}
/* No `gap` here on purpose: the loop translates by exactly -50%, so the two
   copies must tile without a seam. Gap would leave half a gap unaccounted for
   and the strip would jump once per cycle; a per-tile margin divides evenly. */
.marquee__track{display:flex;width:max-content;animation:mq 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mq{
  flex:0 0 calc(100cqw / var(--mq-per) - var(--mq-gap));
  margin-right:var(--mq-gap);background:rgb(255 255 255 / .10);
}
.mq img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block}
.hero__foot{
  position:relative;z-index:3;margin-top:auto;padding:clamp(1rem,2.4vw,1.75rem) 0;display:flex;
  align-items:center;justify-content:space-between;gap:1rem;
  font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wght' 600;opacity:.92;
}
/* corner registration marks */
.reg{position:absolute;width:14px;height:14px;z-index:3;opacity:.5;pointer-events:none;
  background:
    linear-gradient(#fff,#fff) center/100% 1px no-repeat,
    linear-gradient(#fff,#fff) center/1px 100% no-repeat}
.reg--tl{top:calc(var(--nav-h) + 10px);left:14px}
.reg--tr{top:calc(var(--nav-h) + 10px);right:14px}
.reg--bl{bottom:14px;left:14px}
.reg--br{bottom:14px;right:14px}

/* ---------- the page grid -----------------------------------------------
   One field for the whole body. `--edge` is the distance from the viewport
   edge to the text column, expressed off 100% (never 100vw — vw includes the
   scrollbar and would push a full-bleed row sideways). Any band can therefore
   run to the bleed and still line its type up with every other band. */
.sec,
.spec__r,
.mark{
  --edge:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
}
.sec{padding-inline:var(--edge)}

/* ---------- the section marker ------------------------------------------
   No eyebrow, no digits. The section names itself, then a hairline runs off
   the right bleed edge — descended from the hero's own foot rule, which is
   the one piece of furniture the client has already signed off. */
.mark{
  display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem);
  margin:0;padding-left:var(--edge);padding-right:0;
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  font-variation-settings:'wght' 600;color:var(--ink-2);
}
.mark::after{content:"";flex:1 1 auto;height:1px;background:var(--rule)}
/* inside the dark panel the rule runs to the panel edge, not the viewport */
.mark--dark{color:rgb(255 255 255 / .62);padding-left:0;
  margin-right:calc(-1 * clamp(1.5rem,4vw,4rem))}
.mark--dark::after{background:rgb(255 255 255 / .3)}

.sec__t{
  margin:0;font-family:var(--display);line-height:.95;letter-spacing:-.022em;
  font-size:clamp(1.9rem,5vw,4.15rem);
  font-variation-settings:'wght' 400,'SOFT' 20,'WONK' 1,'opsz' 144;
}
.lnk{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  font-variation-settings:'wght' 600;
  border-bottom:1.2px solid currentColor;padding-bottom:.32rem;
  transition:opacity .2s ease;
}
.lnk:hover{opacity:.65}
.lnk__a{display:inline-grid;place-items:center}
.lnk__a svg{width:14px;height:14px;display:block}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--plum-700)}

/* ---------- the brief ----------------------------------------------------
   The plate is flush to the band's top and bottom and bleeds off the right
   edge; its height is driven by the type stack, not by an aspect box. The
   paragraph does NOT sit in a column parallel to the heading — that is the
   arrangement that read as generated. It hangs off a hairline one column in
   and a long way down, so heading and body share neither axis nor baseline. */
.brief{
  --edge:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background:var(--cream);color:var(--ink);
  display:grid;
  grid-template-columns:[full-start] var(--edge) [wrap-start] repeat(12,minmax(0,1fr)) [wrap-end] var(--edge) [full-end];
  column-gap:clamp(.7rem,1.5vw,1.4rem);
  padding-block:0;
  align-items:start;
}
/* the plate runs the full height of the band, so the mark rule stops against
   its edge instead of bleeding past — a picture cutting a rule, which is the
   hero's own grammar */
.brief .mark{
  grid-column:full-start / full-end;grid-row:1;position:relative;z-index:3;
  margin-block:clamp(2rem,4vw,3.25rem) clamp(3.5rem,9vw,8rem);
}

.brief__t{
  grid-column:wrap-start / 9;grid-row:2;z-index:2;margin:0;position:relative;
  font-family:var(--display);letter-spacing:-.03em;line-height:.88;
  font-size:clamp(2.15rem,7.6vw,6.1rem);
  font-variation-settings:'wght' 400,'SOFT' 20,'WONK' 1,'opsz' 144;
}
/* a hand-set rag, one weight throughout — a lighter last line reads as a
   failed font load, not as a decision */
/* two lines flush, then only the closing line steps out toward the picture —
   three indents read as centred verse, not as a rag */
.brief__t .l{display:block}
.brief__t .l--b{margin-left:0}
.brief__t .l--c{margin-left:clamp(2.5rem,26%,15rem)}

.brief__plate{
  grid-column:10 / full-end;grid-row:1 / span 3;align-self:stretch;z-index:1;
  margin:0;overflow:hidden;background:var(--lilac-100);min-height:clamp(300px,44vw,560px);
}
.brief__plate img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}

/* The rule the paragraph hangs from is its own grid item spanning from the
   left bleed edge to column 9 — a grid span, not a negative-margin guess, so
   it lands on the column line exactly at every width. */
.brief__rule{
  grid-column:full-start / 9;grid-row:3;align-self:start;
  height:1px;background:var(--rule);margin-top:clamp(2.25rem,5vw,4.5rem);
}
.brief__body{
  grid-column:3 / 9;grid-row:3;
  margin-top:clamp(2.25rem,5vw,4.5rem);
  padding-top:clamp(1.15rem,2.4vw,1.9rem);
  padding-bottom:clamp(2.25rem,4.5vw,3.75rem);
}
.brief__body p{margin:0 0 1.6rem;font-size:.9375rem;line-height:1.62;color:var(--ink-2);max-width:42ch}
.brief__body .lede{color:var(--ink);font-variation-settings:'wght' 500}

/* ---------- specification -----------------------------------------------
   Four facts split two and two — what the garment is, then what it costs —
   as full-bleed rows whose own top border is the rule. No cells, no dividers. */
.spec{background:var(--plum-900);color:#fff}
.spec__l{margin:0;padding:clamp(2rem,4vw,3.25rem) 0 clamp(2.25rem,4.5vw,3.75rem)}
.spec__r{
  --edge:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(.6rem,2vw,2.5rem);align-items:baseline;
  padding:clamp(.9rem,1.9vw,1.4rem) var(--edge);
  border-top:1px solid rgb(255 255 255 / .24);
}
.spec__r--turn{margin-top:clamp(1.6rem,3.4vw,2.75rem)}
.spec__r dt{
  font-family:var(--display);letter-spacing:-.012em;
  font-size:clamp(1.05rem,2.1vw,1.7rem);
  font-variation-settings:'wght' 400,'SOFT' 20,'WONK' 1,'opsz' 72;
}
.spec__r dd{
  margin:0;font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  font-variation-settings:'wght' 500;color:rgb(255 255 255 / .7);line-height:1.6;
}

/* ---------- the collections --------------------------------------------- */
.cxs{background:var(--cream);color:var(--ink);padding-top:clamp(2.5rem,5vw,4rem)}
.cxs .sec__t{margin-block:clamp(1.6rem,3.5vw,2.9rem) clamp(2rem,4vw,3.25rem)}
.cxs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cx{display:block;background:var(--plum-900)}
.cx__media{display:block;aspect-ratio:3/4;overflow:hidden}
.cx__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.cx:hover .cx__media img{transform:scale(1.045)}

/* ---------- the colourways ---------------------------------------------- */
.wys{background:var(--paper);color:var(--ink);padding-top:clamp(2.5rem,5vw,4rem)}
.wys__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
  margin-block:clamp(1.6rem,3.5vw,2.9rem) clamp(2rem,4vw,3.25rem);
}
.wys__side p{margin:0 0 1.3rem;font-size:.9375rem;line-height:1.65;color:var(--ink-2);max-width:44ch}
.wys__cta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.wys__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.way{display:block;background:var(--lilac-100);color:var(--ink)}
.way img{width:100%;height:auto;display:block}
.way__c{
  display:block;padding:.9rem clamp(.6rem,1.2vw,1.05rem) clamp(1.1rem,1.8vw,1.5rem);
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:'wght' 600;transition:opacity .2s ease;
}
.way:hover .way__c{opacity:.55}

/* ---------- made yours --------------------------------------------------- */
.craft{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  background:var(--plum-900);color:#fff;
}
.craft__hero{margin:0;min-height:100%}
.craft__hero img{width:100%;height:100%;object-fit:cover;display:block}
.craft__panel{padding:clamp(2.25rem,5vw,4.5rem) clamp(1.5rem,4vw,4rem)}
.craft__panel .sec__t{margin-top:clamp(1.5rem,3vw,2.5rem)}
.craft__p{margin:1.15rem 0 1.9rem;font-size:.9375rem;line-height:1.65;opacity:.85;max-width:46ch}
.craft__list{list-style:none;margin:0;padding:0;border-top:1px solid rgb(255 255 255 / .24)}
.craft__list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:.9rem 0;border-bottom:1px solid rgb(255 255 255 / .24);font-size:.8125rem;
}
.craft__list b{font-variation-settings:'wght' 600}
.craft__list span{opacity:.75;text-align:right}
.craft__panel>.lnk{margin-top:1.9rem}
.craft__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;margin-top:2.4rem}
.th{margin:0}
.th img{width:100%;height:auto;display:block}
.th figcaption{margin-top:.55rem;font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;opacity:.62}

/* ---------- the film ------------------------------------------------------ */
.film{background:var(--lilac-100);color:var(--ink);padding-top:clamp(2.5rem,5vw,4rem)}
.film__in{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(2rem,4vw,3.5rem) var(--gutter) clamp(2.5rem,6vw,5.25rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(1.75rem,4vw,4rem);align-items:center;
}
.film__p{margin:1.15rem 0 1.9rem;font-size:.9375rem;line-height:1.65;color:var(--ink-2);max-width:40ch}
.film__v{justify-self:center}
.film__v video{width:min(330px,74vw);height:auto;display:block;background:#000}

/* ---------- follow -------------------------------------------------------- */
.folio{background:var(--paper);color:var(--ink)}
.folio__strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.folio__strip a{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--lilac-100)}
.folio__strip img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.folio__strip a:hover img{transform:scale(1.06)}
.folio__bar{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-block:clamp(1.25rem,2.6vw,2rem);
}
.folio__at{font-family:var(--display);font-size:clamp(1.25rem,2.6vw,2rem);
  font-variation-settings:'wght' 400,'SOFT' 20,'WONK' 1,'opsz' 72}

/* ---------- footer ------------------------------------------------------ */
.foot{background:var(--plum-700);color:#fff;padding-top:clamp(2.25rem,5vw,3.5rem)}
.foot__in{
  display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr)) minmax(0,1.4fr);
  gap:clamp(1.25rem,3vw,2.25rem);
}
.foot__brand .logo{--logo-w:110px;--dot:#FCF1B9;color:#fff}
.foot__tag{margin:.9rem 0 0;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.foot__p{margin:.6rem 0 0;font-size:.8125rem;opacity:.86;max-width:24ch;line-height:1.55}
.socials{display:flex;gap:.5rem;margin-top:1.25rem}
.socials a{
  width:32px;height:32px;display:grid;place-items:center;
  background:rgb(255 255 255 / .16);transition:background-color .2s,transform .2s;
}
.socials a:hover{background:rgb(255 255 255 / .3);transform:translateY(-2px)}
.socials svg{width:16px;height:16px}
.fcol h3{margin:0 0 .85rem;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wght' 700}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.fcol a{font-size:.8125rem;opacity:.86}
.fcol a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.fcol .soon{font-size:.8125rem;opacity:.6}

.nl p{margin:0 0 .9rem;font-size:.8125rem;opacity:.86;line-height:1.55}
.nl__form{display:flex;gap:.5rem;background:var(--paper);padding:.3rem .3rem .3rem 1rem}
.nl__form input{flex:1 1 auto;min-width:0;border:0;background:none;font-size:.8125rem;color:var(--ink)}
.nl__form input::placeholder{color:var(--ink-3)}
.nl__form input:focus{outline:none}
.nl__go{
  width:32px;height:32px;background:var(--plum-700);color:#fff;
  display:grid;place-items:center;flex:0 0 auto;transition:background-color .2s}
.nl__go:hover{background:var(--plum-900)}
.nl__go svg{width:15px;height:15px}
.nl__msg{margin:.6rem 0 0;font-size:.75rem;opacity:.95;min-height:1em}
.nl__msg a{text-decoration:underline}
.nl__msg:empty{display:none}

.foot__bar{
  margin-top:clamp(2rem,4vw,3rem);padding:1.15rem 0;
  border-top:1px solid rgb(255 255 255 / .2);
  text-align:center;font-size:.75rem;opacity:.82;
}

/* ---------- motion ------------------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:1000px){
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand,.nl{grid-column:1/-1}
  .craft__thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .nav__links{display:none}
  .burger{display:flex}
  /* The hero is a stack of absolutely-positioned layers, so it needs a real
     height of its own here — min-height:0 (left over from the earlier grid
     hero) collapsed it to ~220px and the strip landed on top of the words. */
  .hero__in{padding-bottom:0;min-height:clamp(560px,86vh,820px)}
  .hero__split{font-size:clamp(2rem,10.5vw,3.4rem)}
  /* Portrait source, and the box is pinned top AND bottom rather than sized off
     height: the top edge lands on the heading's own top, so her hair rises into
     the gap between "Medical" and "Scrubs" exactly as it does on desktop, and
     the figure fills the band instead of floating in it. The crop is centred on
     her head, so a centred figure centres the head. */
  .hero__figure{
    left:50%;top:clamp(1.5rem,4vw,3rem);bottom:auto;
    /* the box carries the crop's own aspect, so the picture is never squeezed
       or over-cropped whatever the viewport; 127% is the width that lands its
       foot on the hero's foot at phone proportions, and the vh term stops a
       short viewport (a phone held sideways, a small tablet) blowing it up */
    width:min(127%, 74vh);height:auto;aspect-ratio:820 / 1163;
    max-width:none;max-height:none;
  }
  .hero__figure img{width:100%;height:100%;max-height:none;
    object-fit:cover;object-position:50% 0}

  /* the brief unstacks: statement, then plate as a band, then the body.
     The plate keeps its right bleed so the band still reads as a spread. */
  .brief__t{grid-column:wrap-start / wrap-end;grid-row:2}
  .brief__plate{grid-column:wrap-start / full-end;grid-row:3;z-index:1;
    margin-top:clamp(1.75rem,5vw,3rem);min-height:0;aspect-ratio:4/3}
  .brief__body{grid-column:wrap-start / wrap-end;grid-row:4}
  .brief__rule{grid-column:full-start / wrap-end;grid-row:4}
  .brief__body{grid-row:4}

  .spec__r{grid-template-columns:1fr;gap:.3rem}
  .wys__head{grid-template-columns:1fr}
  /* three stacked 3:4 portraits ran ~1500px on a phone; square them off and
     hold each subject's head in frame */
  .cxs__grid{grid-template-columns:1fr}
  .cx__media{aspect-ratio:1/1}
  .cx:nth-child(1) .cx__media img{object-position:50% 18%}
  .cx:nth-child(2) .cx__media img{object-position:50% 12%}
  .cx:nth-child(3) .cx__media img{object-position:50% 42%}
  .craft,.film__in{grid-template-columns:1fr}
  .craft__hero img{max-height:60vh}
  /* five tall columns will not fit a phone; let them run sideways instead of
     shrinking to thumbnails */
  .wys__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .wys__grid .way{flex:0 0 clamp(148px,44vw,220px);scroll-snap-align:start}
  .folio__strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  /* five 75px tiles on a phone is unreadable — three, at the same rhythm */
  /* three tiles with the gap back, and the strip riding the middle of the
     screen rather than sitting down near the foot */
  .marquee{--mq-per:3;--mq-gap:8px;bottom:auto;
    /* dead centre of the SCREEN. .hero__in starts below the nav, so subtract
       the nav height from 50vh. Centring on the box instead put the strip's top
       edge within a few px of her chin on a 390-414px phone. The floor keeps
       it off her face on a short viewport, where mid-screen sits higher up her. */
    top:max(calc(50vh - var(--nav-h)), 18rem);transform:translate(-50%,-50%)}
  /* the stepped rag has to give up its indents or it eats the measure */
  .brief__t .l--c{margin-left:clamp(1rem,12%,3rem)}
}
@media (max-width:560px){
  .craft__list li{flex-direction:column;gap:.2rem}
  .craft__list span{text-align:left}
  .folio__bar{flex-direction:column;align-items:flex-start;gap:.9rem}
  .foot__in{grid-template-columns:1fr}
}

/* V5: campaign-led fashion store. Original Hero styles above are unchanged. */
.g-body{background:#fff;color:#111;font:400 1rem/1.5 var(--sans)}
.g-body h2,.g-body h3,.g-dialog h2{font-family:var(--sans);font-weight:500;font-variation-settings:'wght' 500;letter-spacing:-.015em;line-height:1.2;margin:0}
.g-body p{margin:0}
.g-body figure{margin:0}
.g-body a:hover{text-decoration:underline;text-underline-offset:4px}
.g-body :focus-visible,.g-dialog :focus-visible,.home-v5 .folio :focus-visible,.home-v5 .foot :focus-visible{outline:2px solid #634176;outline-offset:4px}
.g-row-title{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:18px 24px;border-bottom:1px solid #161616;min-height:64px}
.g-row-title h2{font-size:1rem;font-weight:600;letter-spacing:.025em}
.g-row-actions{display:flex;align-items:center;gap:20px}
.g-row-actions>a,.g-row-actions>button{font-size:.8125rem;text-decoration:underline;text-underline-offset:4px}
.g-row-actions>button{border:0;background:none;padding:0;margin:0;font-family:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.g-scroll{font-size:1.4rem;line-height:1;min-width:40px;min-height:40px;border:1px solid #c7c7c7}
.g-scroll:disabled{opacity:.3;cursor:default}
.g-products{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#999 #f3f3f3;overscroll-behavior-x:contain}
.g-product{flex:0 0 20%;min-width:0;border-right:1px solid #333;border-bottom:1px solid #333;scroll-snap-align:start;scroll-margin:0}
.g-product:last-child{border-right:0}
.g-product-image{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;background:#beaad7;padding:0;border:0;border-radius:0;text-align:left}
.g-product-image>img{width:100%;height:100%;object-fit:cover;object-position:center 24%;display:block;transition:transform .4s ease,opacity .25s ease}
#kitty .g-product-image{background:#eee}
#kitty .g-product-image>img{object-position:center 26%}
.g-product-image.g-product-image--flat{background:#f5f5f5}
.g-product-image.g-product-image--flat>img{object-fit:contain;object-position:center}
.g-product-image .g-product-detail{position:absolute;inset:0;opacity:0;object-position:center}
.g-quick{position:absolute;bottom:0;left:0;right:0;display:block;background:#fff;padding:12px 8px;font-size:.75rem;letter-spacing:.04em;text-align:center;transform:translateY(100%);transition:transform .22s ease;border-top:1px solid #222}
@media(hover:hover){.g-product-image:hover>.g-product-detail{opacity:1}.g-product-image:hover>.g-quick{transform:none}.g-product-image:hover>img:first-child{transform:scale(1.025)}}
.g-product-image:focus-visible>.g-quick{transform:none}
.g-product-info{padding:13px 12px 14px;min-height:112px;background:#fff}
.g-product-name{display:block;padding:0;text-align:left;font-size:.875rem;text-transform:uppercase;font-weight:500;line-height:1.4;max-width:100%}
.g-product-name:hover{text-decoration:underline;text-underline-offset:3px}
.g-product-colour{display:flex;gap:7px;align-items:center;font-size:.8125rem;color:#555;margin-top:6px}
.g-product-colour i{width:10px;height:10px;display:inline-block;background:var(--chip);border:1px solid #0003;flex-shrink:0}
.g-product-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:.875rem}
.g-shop-link{font-size:.75rem;min-height:28px;display:flex;align-items:center}
.g-campaign{position:relative;isolation:isolate;aspect-ratio:1672/941;background:#eee;overflow:hidden}
.g-campaign-photo{display:block;position:absolute;inset:0}
.g-campaign-photo img{width:100%;height:100%;object-fit:cover;display:block}
.g-campaign-top{position:absolute;z-index:1;top:34px;left:34px;right:34px;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;pointer-events:none}
.g-campaign-top h2{font-size:clamp(1.4rem,2.6vw,2.5rem);font-weight:600}
.g-campaign-top>span{font-size:.875rem;letter-spacing:.025em}
.g-campaign--kitty{color:#fff}
.g-campaign--garden{color:#fff}
.g-campaign-cta{position:absolute;z-index:1;left:50%;bottom:30px;transform:translateX(-50%);background:#fff;color:#111;border:1px solid #111;padding:13px 26px;min-width:204px;text-align:center;font-size:.875rem;white-space:nowrap}
.g-campaign-cta:hover{background:#111;color:#fff;text-decoration:none!important}
.g-stories{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #111}
.g-story{display:grid;grid-template-columns:1fr 1fr;border-right:1px solid #111;align-items:stretch}
.g-story:last-child{border-right:0}
.g-story-img{overflow:hidden;background:#eee;aspect-ratio:1}
.g-story-img img{display:block;width:100%;height:100%;object-fit:cover}
.g-story-copy{padding:clamp(1rem,2.2vw,2rem);align-self:center}
.g-story h2{font-size:1.125rem;margin-bottom:14px}
.g-story p{font-size:.9375rem;color:#555;line-height:1.65;margin-bottom:22px}
.g-story span{font-size:.8125rem;text-decoration:underline;text-underline-offset:4px}
.g-boxes{display:grid;grid-template-columns:1.25fr 1fr .7fr;align-items:center;gap:0;border-bottom:1px solid #111;background:#fff}
.g-box-copy{padding:clamp(1.5rem,4vw,4rem)}
.g-kicker{font-size:.75rem;font-weight:500;letter-spacing:.075em;margin-bottom:20px!important}
.g-box-copy h2{font-size:clamp(1.8rem,3vw,3rem);line-height:1.06;margin-bottom:24px}
.g-box-copy>p:not(.g-kicker){font-size:1rem;line-height:1.65;max-width:40ch;color:#555}
.g-box-links{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:28px;font-size:.8125rem;text-decoration:underline;text-underline-offset:5px}
.g-box-image{align-self:stretch;display:flex;align-items:center;background:#d8cae9}
.g-box-image img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.g-box-film{background:#9e0c19;align-self:stretch;display:flex;align-items:center}
.g-box-film video{display:block;width:100%;height:auto;max-height:600px}
.g-about{display:grid;grid-template-columns:1fr 1.1fr auto;align-items:center;gap:2rem;padding:42px 24px;border-bottom:1px solid #111}
.g-about h2{font-size:1.125rem;max-width:24ch;line-height:1.35}
.g-about p{font-size:.9375rem;color:#555;max-width:58ch;line-height:1.65}
.g-about>a{font-size:.8125rem;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.g-service{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #111}
.g-service>a{padding:25px 20px;border-right:1px solid #c7c7c7}
.g-service>a:last-child{border-right:0}
.g-service strong,.g-service span{display:block;font-size:.8125rem;font-weight:400}
.g-service strong{font-weight:500;margin-bottom:6px}.g-service span{color:#555;line-height:1.5}
.home-v5 .folio{background:white;color:#111}
.home-v5 .folio__bar{padding:23px 24px;border-bottom:1px solid #111}
.home-v5 .folio__at{font-family:var(--sans);font-size:1.125rem;font-weight:500;font-variation-settings:'wght' 500}
.home-v5 .folio__strip{gap:0}
.home-v5 .folio__strip a{border-right:1px solid #111;aspect-ratio:1}
.home-v5 .folio__strip a:last-child{border-right:0}
.home-v5 .folio .lnk{font-size:.8125rem;letter-spacing:.02em;border:0}
/* v7's body still carries .home-v5 (it was built on top of it), so these two
   v5 rules were repainting the v7 footer white and pushing it full-bleed —
   the one page on the site whose footer did not match its own navigation.
   :not(.home-v7) keeps index-v5 exactly as it was. */
.home-v5:not(.home-v7) .foot{background:#fff;color:#111;border-top:1px solid #111;padding-top:45px}
.home-v5:not(.home-v7) .foot>.wrap{max-width:none;padding-inline:24px}
.home-v5:not(.home-v7) .foot__brand .logo{color:#111;--dot:#111}
.home-v5:not(.home-v7) .foot__tag{font-size:.75rem;letter-spacing:.02em}
.home-v5:not(.home-v7) .foot__p,.home-v5:not(.home-v7) .fcol a,.home-v5:not(.home-v7) .nl p{font-size:.875rem}
.home-v5:not(.home-v7) .fcol h3{font-size:.8125rem;letter-spacing:.025em;font-weight:500}
.home-v5:not(.home-v7) .socials a{background:#f0f0f0}
.home-v5:not(.home-v7) .nl__form{border:1px solid #111}
.home-v5:not(.home-v7) .nl__go{background:#111}
.home-v5:not(.home-v7) .foot__bar{border-color:#ddd;text-align:left}
.g-dialog{padding:0;width:min(860px,calc(100vw - 40px));max-height:calc(100svh - 40px);border:1px solid #111;border-radius:0;color:#111;background:#fff;overflow:auto}
.g-dialog::backdrop{background:#0007}
.g-dialog-layout{display:grid;grid-template-columns:1fr 1fr}
.g-dialog-close{position:absolute;right:10px;top:8px;font-size:2rem;line-height:1;width:44px;height:44px;z-index:2;background:#fff}
.g-dialog-image{background:#ddd0ec;height:min(650px,calc(100svh - 42px));min-height:460px}
.g-dialog-image>img{width:100%;height:100%;object-fit:contain;display:block}
.g-dialog-copy{padding:65px 28px 32px;align-self:center}
.g-dialog h2{font-size:1.75rem;text-transform:uppercase;line-height:1.2}
#g-dialog-price{font-size:1.125rem;margin:22px 0 5px}
.g-dialog-set{font-size:.875rem;color:#555;margin:0 0 32px}
#g-dialog-colour{font-size:.9375rem;margin:0 0 16px}
.g-dialog-swatches{border:0;padding:0;margin:0 0 26px;min-width:0}
#g-dialog-swatches{display:flex;flex-wrap:wrap;gap:10px}
.g-colour-option{position:relative;display:block;width:40px;height:40px;cursor:pointer}
.g-colour-option input{position:absolute;inset:0;margin:0;opacity:0;width:100%;height:100%;cursor:pointer}
.g-colour-option>span:first-of-type{display:block;width:100%;height:100%;background:var(--chip);border:3px solid #fff;outline:1px solid #ddd}
.g-colour-option input:checked+span{outline:2px solid #111}
.g-colour-option input:focus-visible+span{outline:2px solid #634176;outline-offset:3px}
.g-dialog-note{font-size:.875rem;line-height:1.6;color:#555;margin:0 0 24px}
.g-dialog-buy{display:block;background:#111;color:#fff;padding:16px;font-size:.875rem;text-align:center}
.g-dialog-buy:hover{background:#4a3568}
.g-dialog-sizing{font-size:.8125rem;display:inline-block;text-decoration:underline;text-underline-offset:4px}
.g-dialog-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0}
.g-dialog-links a[hidden]{display:none}
@media(max-width:1100px){.g-product{flex-basis:25%}.g-story{grid-template-columns:1fr}.g-story-img{aspect-ratio:1.5}.g-story-copy{min-height:180px}.g-boxes{grid-template-columns:1.2fr 1fr .75fr}.g-box-copy{padding:25px}.g-service>a{padding-inline:16px}}
@media(max-width:760px){
 .g-row-title{padding:16px;gap:12px;min-height:60px}.g-row-title h2{font-size:.875rem;max-width:50%}.g-row-actions{gap:10px}.g-row-actions>a,.g-row-actions>button{font-size:.75rem}.g-scroll{min-width:30px;min-height:36px;font-size:1.2rem}
 .g-product{flex-basis:50%}.g-product-info{padding:12px 10px;min-height:120px}.g-product-name{font-size:.8125rem}.g-product-colour{font-size:.75rem}.g-product-bottom{font-size:.8125rem}.g-product-image{aspect-ratio:3/4}
 .g-campaign{aspect-ratio:4/5}.g-campaign-photo img{object-position:center}.g-campaign-top{top:22px;left:18px;right:18px;flex-direction:column;gap:5px}.g-campaign-top h2{font-size:1.5rem}.g-campaign-top>span{font-size:.75rem}.g-campaign-cta{bottom:22px;font-size:.8125rem;padding:12px 20px}
 .g-stories{grid-template-columns:1fr 1fr}.g-story-img{aspect-ratio:1}.g-story-copy{padding:18px 14px;min-height:220px}.g-story h2{font-size:.9375rem}.g-story p{font-size:.875rem;line-height:1.6}.g-story span{font-size:.75rem}
 .g-boxes{grid-template-columns:1fr 1fr}.g-box-copy{grid-column:1/-1;padding:35px 20px}.g-box-copy h2{font-size:2rem}.g-box-copy h2 br{display:none}.g-box-copy h2 br::after{content:' '}.g-box-copy>p:not(.g-kicker){max-width:55ch;font-size:.9375rem}.g-box-image{min-width:0}.g-box-film video{max-height:none}
 .g-about{grid-template-columns:1fr;gap:18px;padding:32px 20px}.g-about h2{max-width:none}.g-about p{font-size:.875rem}
 .g-service{grid-template-columns:1fr 1fr}.g-service>a{padding:20px 16px}.g-service>a:nth-child(2){border-right:0}.g-service>a:nth-child(-n+2){border-bottom:1px solid #ccc}.g-service strong{font-size:.75rem}.g-service span{font-size:.8125rem}
 .home-v5 .folio__bar{padding:20px 16px;flex-direction:row;align-items:center}.home-v5 .folio__at{font-size:1rem}.home-v5 .folio__strip a:nth-child(3n){border-right:0}.home-v5:not(.home-v7) .foot>.wrap{padding-inline:20px}
 .g-dialog{width:calc(100vw - 24px);max-height:calc(100svh - 24px)}.g-dialog-layout{grid-template-columns:1fr}.g-dialog-image{height:45svh;min-height:280px}.g-dialog-copy{padding:28px 22px}.g-dialog h2{font-size:1.4rem}.g-dialog-set{margin-bottom:20px}.g-dialog-close{position:sticky;top:8px;float:right;margin-bottom:-44px}.g-dialog .g-kicker{margin-bottom:14px!important}
}
@media(prefers-reduced-motion:reduce){.g-body *{transition:none!important;scroll-behavior:auto!important}}

/* Existing desktop campaign artwork contains its own title. */
@media(min-width:761px){.g-campaign-top{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}
@media(max-width:760px){.g-campaign-top{right:auto;background:#fff;color:#111;padding:10px 12px;max-width:calc(100% - 36px)}.g-campaign-top h2{font-size:1.2rem}.g-campaign-top>span{font-size:.75rem}.g-campaign--kitty .g-campaign-photo img{object-position:50% 15%}.g-campaign--garden .g-campaign-photo img{object-position:50% 40%}}

/* SUB v6: garment-label controls and a consistent studio photo grid. */
.home-v6{--sub-ink:#32213f;--sub-butter:#fcf1b9;--sub-rule:#d9d3dd}
.home-v6 .g-row-title{border-color:var(--sub-rule);padding:20px 28px}
.home-v6 .g-row-title h2{display:flex;align-items:center;gap:14px;font-weight:500;font-size:1rem;letter-spacing:.055em;color:var(--sub-ink)}
.sub-edition{display:inline-grid;place-items:center;flex:none;width:31px;height:34px;color:var(--sub-butter);background:var(--sub-ink);font-family:var(--display);font-size:1rem;letter-spacing:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%)}
.home-v6 .g-row-actions>a,.home-v6 .g-row-actions>button{display:inline-flex;align-items:center;gap:16px;border-bottom:1px dashed #786b80;padding-block:8px;font-size:.875rem;letter-spacing:.04em;text-decoration:none}
.home-v6 .g-row-actions>a::after,.home-v6 .g-row-actions>button::after{content:'↗';font-size:1.05rem;transition:transform .2s}
.home-v6 .g-row-actions>a:hover::after,.home-v6 .g-row-actions>button:hover::after{transform:translate(2px,-2px)}
/* the header action never leaves sub-scrub now, so it takes the inward
   arrow; ↗ stays reserved for the links that really do go out */
.home-v7 .g-row-actions>a::after,.home-v7 .g-row-actions>button::after{content:'→'}
.home-v7 .g-row-actions>a:hover::after,.home-v7 .g-row-actions>button:hover::after{transform:translateX(3px)}

.home-v6 .g-scroll{border-color:var(--sub-rule);color:var(--sub-ink);position:relative;background:#fff}
.home-v6 .g-scroll:not(:disabled):hover{background:var(--sub-butter);border-color:var(--sub-ink)}
.home-v6 .g-product{border-color:var(--sub-rule)}
.home-v6 .g-product-info{padding:18px 16px 16px;min-height:124px}
.home-v6 .g-product-name{color:var(--sub-ink);font-size:.875rem;font-weight:500;letter-spacing:.025em}
.home-v6 .g-product-colour{font-size:.875rem;color:#6b606f;margin-top:7px}
.home-v6 .g-product-colour i{width:12px;height:12px;border:1px solid #0002}
.home-v6 .g-product-bottom{margin-top:13px;align-items:center}
.home-v6 .g-shop-link{position:relative;display:inline-flex;align-items:center;padding:6px 10px;min-height:36px;border:1px solid #a99caf;font-size:.75rem;letter-spacing:.065em;color:var(--sub-ink);transition:background .2s,border-color .2s}
.home-v6 .g-shop-link:hover{background:var(--sub-butter);border-color:var(--sub-ink);text-decoration:none}
.home-v6 .g-quick{display:flex;justify-content:space-between;align-items:center;background:var(--sub-ink);color:#fff;border-top:0;padding:13px 16px;font-size:.8125rem;letter-spacing:.065em}
.home-v6 .g-quick>span:last-child{color:var(--sub-butter);font-size:1.2rem;line-height:1}
.home-v6 .g-campaign-cta,.home-v6 .g-dialog-buy{display:inline-flex;align-items:stretch;justify-content:space-between;padding:0;gap:0;border:1px solid var(--sub-ink);background:#fff;color:var(--sub-ink);min-height:52px;text-decoration:none;isolation:isolate;clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
.sub-action-mark{width:48px;flex:0 0 48px;position:relative;background:var(--sub-butter);border-right:1px dashed #998794}
.sub-action-mark::before{content:'';position:absolute;inset:0;background:var(--sub-ink);mask:url('../img/logo-mark.png') center / 30px auto no-repeat;-webkit-mask:url('../img/logo-mark.png') center / 30px auto no-repeat}
.sub-action-text{align-self:center;position:relative;padding:16px 22px;font-size:.8125rem;font-weight:500;letter-spacing:.055em;line-height:1.2;white-space:normal}
.sub-action-text::after{content:'';position:absolute;bottom:6px;left:18px;right:18px;border-bottom:1px dashed #b6a9bf;opacity:.75}
.sub-action-arrow{display:grid;place-items:center;width:42px;flex:0 0 42px;border-left:1px solid #d6cddc}
.sub-action-arrow svg{width:18px;height:18px;transition:transform .2s}
.home-v6 .g-campaign-cta:hover,.home-v6 .g-dialog-buy{background:var(--sub-ink);color:#fff}
.home-v6 .g-campaign-cta:hover .sub-action-arrow,.home-v6 .g-dialog-buy .sub-action-arrow{border-color:#67576f;color:var(--sub-butter)}
.home-v6 .g-campaign-cta:hover .sub-action-arrow svg,.home-v6 .g-dialog-buy:hover .sub-action-arrow svg{transform:translateX(3px)}
.home-v6 .g-dialog-buy{width:100%;text-align:center}
.home-v6 .g-dialog-buy:hover{background:#4a355c}
.home-v6 .g-dialog{border-color:var(--sub-ink)}
.home-v6 .g-dialog-close{font-size:1.6rem;border:1px solid var(--sub-rule);height:36px;width:36px;top:12px;right:12px}
.home-v6 .g-dialog-close:hover{background:var(--sub-butter)}
.home-v6 .g-dialog-swatches{margin-bottom:28px}
.home-v6 .g-colour-option{width:42px;height:42px}
.home-v6 .g-colour-option>span:first-of-type{border-width:5px;outline-color:#ddd6e1}
.home-v6 .g-colour-option input:checked+span{outline:1px dashed var(--sub-ink)}
.home-v6 .g-colour-option input:checked+span::after{content:'';position:absolute;bottom:0;right:0;width:10px;height:10px;background:var(--sub-butter);border:1px solid var(--sub-ink)}
.home-v6 .g-colour-option input:focus-visible+span{outline:2px solid var(--sub-ink);outline-offset:4px}
.home-v6 .g-dialog-image{position:relative}
.sub-photo-label{position:absolute;left:20px;top:20px;z-index:1;font-size:.6875rem;letter-spacing:.12em;color:var(--sub-ink);background:#fff;padding:7px 9px;border-left:2px solid var(--sub-ink)}
.sub-view-toggle{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;background:#fff;border:1px solid var(--sub-ink);z-index:1}
.sub-view-toggle[hidden]{display:none}
.sub-view-toggle button{min-height:38px;padding:10px 14px;font-size:.6875rem;font-weight:500;letter-spacing:.07em;white-space:nowrap}
.sub-view-toggle button+button{border-left:1px solid var(--sub-ink)}
.sub-view-toggle button[aria-pressed=true]{background:var(--sub-ink);color:var(--sub-butter)}
.home-v6 .g-story-copy>span,.home-v6 .g-box-links>a,.home-v6 .g-about>a{border-bottom:1px dashed #8b7b94;padding-bottom:5px;text-decoration:none}
.home-v6 .g-story:hover,.home-v6 .g-story:hover span{text-decoration:none}
.home-v6 .g-story:hover .g-story-copy>span{color:#806089}
.home-v6 .g-service{background:#faf8fb;border-color:var(--sub-rule)}
.home-v6 .g-service>a{border-color:var(--sub-rule)}
.home-v6 .g-service strong{color:var(--sub-ink);font-weight:500;letter-spacing:.05em}
.home-v6 .g-service>a:hover{background:#f4eff7;text-decoration:none}
.home-v6 .nl__go{background:var(--sub-ink);color:var(--sub-butter)}
@media(max-width:760px){
 .home-v6 .g-row-title{padding:15px 16px}.home-v6 .g-row-title h2{gap:9px;font-size:.8125rem;letter-spacing:.035em}.sub-edition{width:25px;height:28px;font-size:.875rem}
 .home-v6 .g-row-actions>a,.home-v6 .g-row-actions>button{font-size:.75rem;gap:7px}.home-v6 .g-row-actions{gap:7px}.home-v6 .g-product-info{padding:14px 11px;min-height:131px}.home-v6 .g-product-name{font-size:.8125rem}.home-v6 .g-product-colour{font-size:.8125rem}
 .home-v6 .g-shop-link{padding:4px 7px;font-size:.6875rem;min-height:34px}.home-v6 .g-product-bottom{font-size:.8125rem;gap:5px}
 .sub-action-mark{width:40px;flex-basis:40px}.sub-action-mark::before{mask-size:26px auto;-webkit-mask-size:26px auto}.sub-action-text{padding:15px 16px;font-size:.75rem}.sub-action-arrow{width:36px;flex-basis:36px}
 .home-v6 .g-campaign-cta{max-width:calc(100% - 32px);min-width:260px}.sub-photo-label{left:12px;top:12px;font-size:.6875rem}
 .home-v6 .g-dialog-buy .sub-action-text{padding-inline:10px}.sub-view-toggle{bottom:12px}
}

/* A shared portrait stage, with per-source optical framing. Originals are intact. */
.home-v6 .g-product-image{aspect-ratio:4/5}
.home-v6 #kuromi .g-product-image>img:first-child{position:absolute;width:200%;max-width:none;height:auto;left:-50%;top:-35%;object-fit:initial}
.home-v6 #kitty .g-product-image>img:first-child{object-position:center top}
.home-v6 #garden .g-product-image>img:first-child{object-fit:contain;padding:7%;background:#f5f5f5}
.home-v6 .g-product-image>.g-quick{z-index:2}
.home-v6 .g-product-image .g-product-detail{object-fit:cover;object-position:center}
.sub-colour-story{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--sub-rule);background:#f6f1f7}
.sub-colour-story-photo{display:block;overflow:hidden;aspect-ratio:4/5}
.sub-colour-story-photo img{display:block;width:100%;height:100%;object-fit:cover}
.sub-colour-story-copy{padding:clamp(28px,6vw,100px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:var(--sub-ink)}
.sub-story-label{font-size:.75rem;letter-spacing:.1em;border-bottom:1px dashed #9c8aa5;padding-bottom:12px}
.sub-colour-story-copy h2{font-family:var(--sans);font-weight:500;font-size:clamp(32px,4.3vw,70px);line-height:1.05;letter-spacing:-.045em;margin:40px 0 24px}
.sub-colour-story-copy p{font-size:1rem;line-height:1.8;margin-bottom:32px}
.sub-colour-story-copy>a{font-size:.8125rem;letter-spacing:.05em;border-bottom:1px dashed #9c8aa5;padding-block:12px;display:flex;gap:32px;text-decoration:none}
.sub-colour-story-copy>a:hover{color:#806089}
.sub-story-foot{font-size:.625rem;letter-spacing:.13em;margin-top:70px}
@media(max-width:760px){.sub-colour-story{grid-template-columns:1fr}.sub-colour-story-copy{padding:32px 24px}.sub-colour-story-copy h2{margin:24px 0 16px;font-size:42px}.sub-story-foot{margin-top:32px}}
@media(prefers-reduced-motion:reduce){.home-v6 .sub-action-arrow svg,.home-v6 .g-row-actions>a::after{transition:none}}

/* v7: curated on-model photography in one repeatable collection composition. */
.home-v7 .sub-edit{background:#fff}
.edit-photographs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#fff}
.edit-figure{margin:0;min-width:0;background:#fff}
/* the photographs are buttons now: they open the dialog on this page rather
   than sending you to somebody else's website */
.edit-image{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;
  background:#f2eff3;width:100%;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}
/* the frame is cut at source now, so nothing here has to zoom */
.edit-image img{display:block;width:100%;height:100%;object-fit:cover}
.edit-image__zoom{position:absolute;right:0;bottom:0;width:44px;height:44px;
  display:grid;place-items:center;background:#fff;color:#32213f;
  opacity:0;transition:opacity .2s ease}
.edit-image__zoom svg{width:19px;height:19px}
.edit-image:hover .edit-image__zoom,
.edit-image:focus-visible .edit-image__zoom{opacity:1}
@media(hover:none){.edit-image__zoom{opacity:1}}
@media(prefers-reduced-motion:reduce){.edit-image__zoom,.edit-colour__tile img{transition:none}}
.edit-figure figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 24px;color:#625969;font-size:.8125rem;border-bottom:1px solid #ddd6e1}
.edit-figure figcaption>span:first-child{font-size:.75rem;letter-spacing:.09em;white-space:nowrap;color:#32213f}

.home-v7 #kuromi .edit-figure--detail img{object-position:center}
.home-v7 #kitty .edit-figure--look img{object-fit:cover}
.home-v7 #kitty .edit-figure--detail img{object-fit:cover}

.home-v7 #garden .edit-figure--detail img{object-fit:cover}
/* The colour picker used to be a 17px square and a 13px label squeezed into
   the middle column of a three-across strip. It is the one control in the
   band that anybody actually uses, so it gets its own full-width row and a
   real tile: the cloth itself, with the character stitched on THAT colour —
   which is a different design on every colourway in the Sanrio lines. */
.edit-shop{padding:28px 28px 32px;display:grid;
  grid-template-columns:minmax(200px,1fr) auto;gap:20px 32px;
  align-items:center;border-bottom:1px solid #d9d3dd}
.home-v7 .edit-shop-heading h3{font-size:1.125rem;color:#32213f;line-height:1.4;margin-bottom:10px}
.edit-shop-heading p{font-size:.875rem;letter-spacing:.05em;margin:0}
/* auto-placement put the buy button on a row of its own once the picker
   started spanning the full width, so all three are placed explicitly */
.edit-shop-heading{grid-column:1;grid-row:1}
.edit-selection{grid-column:1/-1;grid-row:2;border-top:1px solid #e6e1e9;padding-top:22px}
.edit-selection>p{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:#625969;margin:0 0 14px}
.edit-selection>p span{letter-spacing:.02em;margin-left:16px;font-size:.8125rem;text-transform:none}
.edit-colours{display:flex;flex-wrap:wrap;gap:18px 16px}
.edit-colour{display:flex;flex-direction:column;gap:9px;align-items:stretch;
  width:112px;background:transparent;border:0;padding:0;color:#32213f;
  font:inherit;cursor:pointer}
.edit-colour__tile{position:relative;display:block;overflow:hidden;
  background:var(--chip);outline:1px solid #0000001a;outline-offset:-1px}
.edit-colour__tile img{display:block;width:100%;height:auto;aspect-ratio:1;
  object-fit:cover;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
/* the measured fabric hex, stated plainly under the photograph — a studio
   light is not a colour reference on its own */
.edit-colour__tile::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:6px;background:var(--chip)}
.edit-colour__n{font-size:.8125rem;line-height:1.3;text-align:left}
.edit-colour:hover .edit-colour__tile img{transform:scale(1.07)}
.edit-colour:hover .edit-colour__n{text-decoration:underline;text-underline-offset:3px}
.edit-colour:focus-visible,.edit-image:focus-visible{outline:2px solid #32213f;outline-offset:-3px}
.home-v7 .edit-buy{width:auto;white-space:nowrap;grid-column:2;grid-row:1;justify-self:end}
.home-v7 .edit-buy .sub-action-text{font-size:.875rem;padding-inline:16px}
@media(max-width:1100px){.edit-shop{grid-template-columns:1fr auto}.edit-figure figcaption{padding:14px 16px;flex-direction:column;gap:3px}}
@media(max-width:600px){.edit-photographs{gap:1px}.edit-image{aspect-ratio:3/4}.edit-figure figcaption{font-size:.75rem;padding:12px 10px;min-height:75px}.edit-figure figcaption>span:first-child{font-size:.75rem}.edit-shop{padding:22px 16px 26px;grid-template-columns:1fr;gap:16px}.edit-shop-heading{grid-row:1}.home-v7 .edit-buy{grid-column:1;grid-row:2;justify-self:stretch}.edit-selection{grid-row:3}.edit-colour{width:96px}.edit-colours{gap:14px 12px}.edit-selection{padding-top:18px}.home-v7 .edit-buy{justify-self:stretch}}

/* ---------- version switcher: seven chips ------------------------------
   Seven of these will not fit a 375px bar at the desktop size, and hiding
   them on a phone defeats the point of a switcher, so on small screens they
   go compact and, if a device is narrower still, the strip scrolls sideways
   rather than pushing the burger off the edge. */
@media (max-width:640px){
  .nav__vers{
    display:inline-flex;gap:.3rem;margin-right:0;
    flex:0 1 auto;min-width:0;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .nav__vers::-webkit-scrollbar{display:none}
  /* the switcher can only give up width if its flex parent is allowed to
     shrink too, otherwise the burger gets pushed past the bar */
  .nav__r{min-width:0}
  .nav__vers a{font-size:.625rem;letter-spacing:.04em;flex:0 0 auto}
}

/* ======================================================= THE CLOSE ========
   The five small bands that used to sit between the last product block and
   the footer are now three, and all three are arrangements of ONE field.
   That is the whole fix for "the layout is very strange": nothing here
   invents its own column count any more.

   These sections live OUTSIDE .g-body on purpose — .g-body h2 forces
   font-family:var(--sans) (line ~573), which would silently strip Fraunces
   off every heading below.

   HOUSE RULES hold: square, flat, no radius, no shadow, no blur.
   ========================================================================= */
.close{
  --edge:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  display:grid;
  grid-template-columns:
    [full-start] var(--edge)
    [wrap-start] repeat(12,minmax(0,1fr)) [wrap-end]
    var(--edge) [full-end];
  column-gap:clamp(.7rem,1.5vw,1.4rem);
  align-items:start;
}
.close > *{min-width:0}          /* Thai has no spaces; without this it overflows */

.close .mark{grid-column:full-start / full-end;grid-row:1}
.close__t{
  margin:0;font-family:var(--display);line-height:.94;letter-spacing:-.025em;
  font-size:clamp(2.1rem,5.6vw,4.6rem);
  font-variation-settings:'wght' 400,'SOFT' 20,'WONK' 1,'opsz' 144;
}
.close__t--sm{font-size:clamp(1.7rem,3.4vw,2.9rem)}
.close__p{margin:clamp(1.1rem,2.2vw,1.6rem) 0 0;font-size:.9375rem;line-height:1.65;max-width:42ch}
.close__links{margin:clamp(1.4rem,2.6vw,2rem) 0 0;display:flex;flex-wrap:wrap;gap:.9rem 1.6rem}
.close__plate{display:block;margin:0;overflow:hidden;background:var(--lilac-100)}
.close__plate img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.close__plate:hover img{transform:scale(1.035)}

/* ---------- band one: the box set, pale ground, plate bleeding right ----- */
.close--boxset{background:var(--cream);color:var(--ink)}
.close--boxset .mark{margin-block:clamp(2rem,4vw,3.25rem) 0}
.close--boxset .close__copy{
  grid-column:wrap-start / 7;grid-row:2;align-self:center;
  padding-block:clamp(1.75rem,3.2vw,3rem) clamp(2rem,4vw,3.5rem);
}
.close--boxset .close__plate{
  grid-column:9 / full-end;grid-row:1 / span 2;align-self:stretch;
  min-height:clamp(320px,34vw,500px);
}
.close--boxset .close__p{color:var(--ink-2)}

/* ---------- band two: the ledger, the one dark field in the tail ---------
   Every number on the page gathered into one panel. It also absorbs the four
   links the old four-cell service strip carried, so nothing lost a route. */
.close--ledger{background:var(--plum-900);color:#fff}
.close--ledger .close__film{
  grid-column:full-start / 5;grid-row:1;align-self:stretch;
  position:relative;overflow:hidden;background:#000;
  min-height:clamp(320px,38vw,560px);
}
.close--ledger .close__film video{width:100%;height:100%;object-fit:cover;
  object-position:50% 22%;display:block}
.filmbtn{
  position:absolute;left:clamp(.9rem,1.6vw,1.4rem);bottom:clamp(.9rem,1.6vw,1.4rem);
  background:#fff;color:var(--ink);border:0;
  padding:.62rem 1.05rem;font-family:var(--sans);
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wght' 700;cursor:pointer;
}
.filmbtn:hover{background:var(--lilac-100)}
.close__film.is-playing .filmbtn{display:none}
.close--ledger .close__ledger{
  grid-column:6 / wrap-end;grid-row:1;
  padding-block:clamp(2.5rem,5vw,4.5rem);
}
.close--ledger .mark{grid-column:6 / wrap-end;position:static;margin:0 0 clamp(1rem,2vw,1.5rem)}
.close--ledger .close__t{margin-bottom:clamp(1.5rem,3vw,2.4rem)}

.ledger{list-style:none;margin:0;padding:0;border-top:1px solid rgb(255 255 255 / .24)}
.ledger li{border-bottom:1px solid rgb(255 255 255 / .24)}
.ledger a{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:.4rem clamp(.8rem,2vw,2rem);align-items:baseline;
  padding:clamp(.85rem,1.7vw,1.15rem) 0;
  transition:opacity .2s ease;
}
.ledger a:hover{opacity:.7}
.ledger__k{
  font-family:var(--display);font-size:clamp(1rem,1.7vw,1.35rem);
  letter-spacing:-.01em;
  font-variation-settings:'wght' 400,'SOFT' 20,'WONK' 1,'opsz' 72;
}
.ledger__v{
  font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  font-variation-settings:'wght' 500;color:rgb(255 255 255 / .74);line-height:1.6;
}

/* ---------- band three: the story, plate bleeding the other way ---------- */
.close--story{background:var(--paper);color:var(--ink)}
.close--story .close__plate--left{
  grid-column:full-start / 7;grid-row:1;align-self:stretch;
  min-height:clamp(280px,29vw,430px);
}
/* the box is wider than the source, so cover crops vertically — hold the top
   so all three faces stay in frame instead of centring on their waists */
.close--story .close__plate--left img{object-position:50% 5%}
.close--story .close__copy--right{
  grid-column:8 / wrap-end;grid-row:1;align-self:center;
  padding-block:clamp(2.5rem,5vw,4.5rem);
}
.close--story .mark{grid-column:8 / wrap-end;position:static;padding-left:0;margin:0 0 clamp(1rem,2vw,1.5rem)}
.close--story .close__p{color:var(--ink-2)}

/* ---------- one column on a phone --------------------------------------- */
@media (max-width:820px){
  .close--boxset .close__copy,
  .close--ledger .close__ledger,
  .close--story .close__copy--right{grid-column:wrap-start / wrap-end}
  .close--boxset .close__plate{grid-column:wrap-start / full-end;grid-row:3;
    min-height:0;aspect-ratio:4/3;margin-top:clamp(1.5rem,4vw,2.5rem)}
  .close--boxset .close__copy{grid-row:2;padding-bottom:0}
  .close--ledger .close__film{grid-column:full-start / wrap-end;grid-row:1;
    min-height:0;aspect-ratio:3/2}
  .close--ledger .close__ledger{grid-row:2}
  .close--ledger .mark{grid-column:wrap-start / wrap-end}
  .close--story .close__plate--left{grid-column:full-start / wrap-end;grid-row:1;
    min-height:0;aspect-ratio:4/3}
  .close--story .close__copy--right{grid-row:2}
  .close--story .mark{grid-column:wrap-start / wrap-end}
  .ledger a{grid-template-columns:1fr;gap:.25rem}
}


/* ---------- Collections submenu -----------------------------------------
   "New Arrivals" pointed at Kuromi, which is not the newest thing on the
   site, and sat next to "Collections" as a second, overlapping shop entry.
   It is gone; Collections opens the list instead. CSS-only, so it works with
   a keyboard (:focus-within) and needs no script on either the generated
   pages or the hand-written homepage.

   HOUSE RULES hold: square, flat, no radius, no shadow, no blur. */
.nav__has-sub{position:relative}
.nav__has-sub > a{display:inline-flex;align-items:center;gap:.4rem}
.nav__caret{width:0;height:0;border-left:3.5px solid transparent;
  border-right:3.5px solid transparent;border-top:4px solid currentColor;
  opacity:.7;transition:transform .2s ease}
.nav__has-sub:hover .nav__caret,
.nav__has-sub:focus-within .nav__caret{transform:rotate(180deg);opacity:1}

.nav__sub{
  position:absolute;top:100%;left:-1.1rem;z-index:5;
  margin:0;padding:.55rem 0;list-style:none;min-width:17rem;
  background:var(--plum-900,#2E2140);
  border:1px solid rgb(255 255 255 / .16);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
/* the bar is 76px tall and the item sits centred in it, so the pointer has a
   gap to cross — this pad keeps the panel hoverable on the way down */
.nav__sub::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:18px}
.nav__has-sub:hover > .nav__sub,
.nav__has-sub:focus-within > .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub li{margin:0}
.nav__sub a{
  display:block;padding:.5rem 1.1rem;font-size:.8125rem;line-height:1.35;
  color:#fff;opacity:.88;white-space:nowrap;
}
.nav__sub a:hover,.nav__sub a:focus-visible{opacity:1;background:rgb(255 255 255 / .1)}
.nav__sub li:first-child a{
  opacity:1;font-variation-settings:'wght' 600;font-weight:600;
  border-bottom:1px solid rgb(255 255 255 / .16);
  margin-bottom:.35rem;padding-bottom:.6rem;
}

/* no hover on a phone: the list is simply open inside the menu that the
   burger reveals, indented under its heading */
@media (max-width:820px){
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;border:0;background:none;padding:.35rem 0 .1rem;
    border-left:1px solid rgb(255 255 255 / .22);margin-left:.15rem}
  .nav__sub::before{display:none}
  .nav__sub a{padding:.4rem 0 .4rem .9rem;white-space:normal}
  .nav__sub li:first-child a{border-bottom:0;margin-bottom:0;padding-bottom:.4rem}
  .nav__caret{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav__sub{transition:none}.nav__caret{transition:none}
}

/* A collection the brand no longer produces keeps its photographs and its
   old price, and carries this where the buy button is on the one line still
   in production. Square, hairline, no shadow — the house rule holds. */
.g-dialog-sold[hidden]{display:none}
.g-dialog-sold{display:inline-block;margin:.15rem 0 0;padding:.22rem .6rem;
  border:1px solid currentColor;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2,#4C515B)}

/* A band for a line out of production keeps its old price and says so beside
   it. Square, hairline, no shadow, and never the plum that reads as a button. */
.edit-sold{display:inline-block;margin-left:.5rem;padding:.16rem .5rem;
  border:1px solid currentColor;font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2,#4C515B);vertical-align:.08em}

/* The homepage runs its own phone menu — it has no .drawer — and reopened the
   desktop link list with no per-row padding, so its rows were a fifth the
   height of the inner pages' and under the 24px floor. */
@media (max-width:820px){
  .nav__links > li > a{display:flex;align-items:center;min-height:44px}
  .nav__sub a{min-height:44px;display:flex;align-items:center;padding-block:.4rem}
}