/* =========================================================================
   SUB. — inner pages in the v7 language.

   Loaded AFTER site.css on collection-kuromi / collections / about / faq /
   contact only. index.html (v1) does not load it and is untouched.

   It is a skin, not a rewrite: site.css already drives almost everything off
   custom properties, so remapping the token set moves the whole page onto the
   v7 palette without editing a single layout rule — which is also why none of
   the page copy can get lost in the process. Only the pieces that are v1
   signatures rather than layout (the ticker, the scalloped lace bar, the
   numbered eyebrows, the white nav, the bare footer) are replaced outright.

   HOUSE RULES still apply: no rounded corners, no shadows, no glass/blur.
   ========================================================================= */

:root{
  /* --- v7 neutrals ---------------------------------------------------- */
  --ink:        #241B33;
  --ink-2:      #584B66;
  --ink-3:      #8B7E97;
  --paper:      #FFFFFF;
  --bone:       #F6F2EC;      /* v7 --cream */
  --line:       #E2DAEC;
  --line-soft:  #EFEAF6;

  /* --- the periwinkle ramp becomes the Kuromi plum ramp ---------------
     Every existing rule refers to these by name, so they all follow. */
  --peri-50:    #F8F5FC;
  --peri-100:   #EDE7F5;      /* v7 --lilac-100 */
  --peri-200:   #DDD2EE;
  --peri-300:   #B79FD6;      /* v7 --lilac-300 — signature */
  --peri-500:   #6E5794;      /* v7 --plum-500 */
  --peri-700:   #4A3568;      /* v7 --plum-700 — AA on paper */

  /* --butter is the logo's dot and is shared with the v7 nav — left alone */
  --butter-600: #B7A5CC;

  --accent:     var(--peri-300);
  --accent-ink: var(--peri-700);

  /* v7 structural hairline: --line is 1.22:1 on cream and vanishes on a
     phone, so anything load-bearing uses this instead */
  --rule:       #B7A5CC;

  --plum-900:   #2E2140;
  --plum-700:   #4A3568;
  --plum-500:   #6E5794;

  --wrap: 1200px;             /* v7 measure, not v1's 1400 */
  --nav-h: 76px;
}

/* ---------- the v1 signatures that do not belong in v7 ------------------ */
.ticker{display:none}

/* the scalloped lace bar is the single most v1 thing on the page; the nav
   becomes a flat plum band instead, which is what v7's bar reads as once it
   is off the hero photograph */
.nav__paint{
  -webkit-mask-image:none;mask-image:none;
  height:100%;background:var(--plum-700);
}
.nav,
.nav[data-solid="true"],
body[data-nav="solid"] .nav{color:#fff}
body[data-nav="solid"] .nav__paint{background:var(--plum-700)}
.nav[data-solid="true"] .logo__dot,
body[data-nav="solid"] .logo__dot{background:var(--butter)}

/* v7 puts the wordmark on the left and everything else after it */
.nav__inner{
  display:flex;align-items:center;
  gap:clamp(1rem,3vw,2.75rem);
}
.nav__inner > a{order:-1}
.nav__inner > div:first-child{order:0;gap:clamp(.9rem,2.2vw,1.9rem)}
.nav__right{order:1;margin-left:auto;gap:.85rem}
.nav__list{gap:clamp(.9rem,2.2vw,1.9rem)}
.nav__list a{font-size:.8125rem;opacity:.94}
.nav__list a:hover{opacity:1}
/* square, outlined — the v7 bar has no filled black pill */
.nav__shop{
  background:transparent;color:#fff;
  border:1.4px solid rgb(255 255 255 / .8);
  min-height:38px;padding:0 1.1rem;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
}
.nav__shop:hover{background:#fff;color:var(--ink);border-color:#fff}
.nav__icon{width:32px;height:32px;margin-right:0;color:#fff}
.nav__icon svg{width:18px;height:18px}

/* ---------- the section marker ------------------------------------------
   v7 has no numbered eyebrow: the section names itself and a hairline runs
   off to the right. The number itself is stripped in the generator, because
   CSS cannot remove text. currentColor keeps the rule legible on the cream,
   plum and photographic grounds this class lands on. */
.eyebrow{
  display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem);
  font-size:.625rem;letter-spacing:.2em;color:var(--ink-2);
}
.eyebrow::after{
  content:"";flex:1 1 auto;height:1px;
  background:currentColor;opacity:.45;
}
.eyebrow--ink{color:var(--ink)}
/* inside a narrow column or a flex row the rule would fight the layout */
.eyebrow--bare::after{display:none}

/* v7 hangs every band off one left axis — a centred narrow measure is a v1
   idea. But margin-inline:0 pulled these to the true page edge, so the FAQ's
   text column sat 113px left of every other page and of its own navigation.
   Align them with the 1200px wrap instead of with the viewport. */
.wrap--narrow,.wrap--mid{margin-inline:max(0px, calc((100% - var(--wrap)) / 2))}

/* ---------- footer ------------------------------------------------------ */
.footer{
  background:var(--plum-700);color:#fff;border-top:0;
  margin-top:clamp(3rem,7vw,6rem);
  padding-block:clamp(2.5rem,6vw,4.5rem) 0;
}
.footer .eyebrow,
.footer .eyebrow--ink{color:rgb(255 255 255 / .72)}
.footer .acc__btn{color:#fff}
.footer .acc__item{border-color:rgb(255 255 255 / .22)}
.footer .acc__panel a{color:rgb(255 255 255 / .8)}
.footer .acc__panel a:hover{color:#fff}
.footer .body{color:rgb(255 255 255 / .8)}
.footer .socials a{
  background:rgb(255 255 255 / .16);color:#fff;
  width:32px;height:32px;display:grid;place-items:center;
}
.footer .socials a:hover{background:rgb(255 255 255 / .3)}
.footer .socials svg{width:16px;height:16px}
.footer__bar{
  color:rgb(255 255 255 / .72);
  border-top:1px solid rgb(255 255 255 / .22);
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.15rem;
}
.footer__bar a{color:#fff}


/* ---------- colourway grid ----------------------------------------------
   site.css hard-codes 2/3/4 columns; the collection pages now say how many
   they need through --cols, so five Kuromi colours sit on one row instead of
   four plus an orphan. */
.grid-p[style*="--cols"]{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
@media (max-width:1100px){.grid-p[style*="--cols"]{grid-template-columns:repeat(min(var(--cols,4),4),minmax(0,1fr))}}
@media (max-width:820px){.grid-p[style*="--cols"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.grid-p[style*="--cols"]{grid-template-columns:repeat(2,minmax(0,1fr))}}



/* ---------- FAQ ----------------------------------------------------------
   The categories are jump links now, not tabs that hide the other eight
   groups, and every answer is open when the page loads. */
.tabs--jump{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding:0 0 1.5rem;
  border-bottom:1px solid var(--rule);margin-bottom:.5rem}
.tabs--jump a{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);padding:.3rem 0;border-bottom:1.5px solid transparent}
.tabs--jump a:hover{color:var(--ink)}
.tabs--jump a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--plum-500)}
.faq__cat{font-family:var(--display,inherit);font-size:clamp(1.25rem,2.4vw,1.75rem);
  margin:clamp(2.25rem,4vw,3rem) 0 .75rem;scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
[data-faq-group]{scroll-margin-top:calc(var(--nav-h) + 1rem)}
[data-faq-group]:first-of-type .faq__cat{margin-top:1.5rem}
.acc__panel a{text-decoration:underline;text-underline-offset:3px}

/* site.css opens a panel with `.acc__btn[aria-expanded="true"] + .acc__panel`,
   an ADJACENT-sibling rule. On the FAQ the button is wrapped in an <h3> for
   heading structure, so the panel's previous sibling is the <h3>, never the
   button — which means no FAQ answer has ever been able to open, clicked or
   not. Match on the item instead. */
.acc__item:has(> h3 > .acc__btn[aria-expanded="true"]) > .acc__panel{grid-template-rows:1fr}

/* ---------- contact form -------------------------------------------------
   The page had no form at all: four links and a photograph. */
.cform{display:grid;gap:1rem;max-width:34rem}
.cform label{display:grid;gap:.4rem;font-size:.75rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2)}
.cform input[type=text],.cform textarea,.cform select{
  font:inherit;font-size:.9375rem;letter-spacing:0;text-transform:none;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);padding:.7rem .85rem;
  width:100%;min-width:0}
.cform textarea{resize:vertical;min-height:7rem}
.cform input:focus,.cform textarea:focus,.cform select:focus{
  outline:2px solid var(--plum-500);outline-offset:-1px;border-color:var(--plum-500)}
.cform input::placeholder,.cform textarea::placeholder{color:var(--ink-3);text-transform:none;letter-spacing:0}
.cform input[name="_honey"]{position:absolute;left:-9999px;width:1px;height:1px}
.cform .btn{justify-self:start;margin-top:.25rem}
.cform__note{font-size:.8125rem;color:var(--ink-2);margin:0}
.cform__ok{background:var(--peri-100);border-left:3px solid var(--plum-500);
  padding:.9rem 1rem;font-size:.9375rem;color:var(--ink)}

/* ---------- where to buy ------------------------------------------------- */
.shops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.5rem;padding-top:1.5rem}
@media (max-width:760px){.shops{grid-template-columns:minmax(0,1fr)}}

/* ---------- "in the set" spec list --------------------------------------- */
.spec-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin:1.5rem 0 0;border-top:1px solid var(--rule)}
.spec-list > div{padding:1.25rem 1.5rem 1.4rem 0;border-bottom:1px solid var(--line)}
.spec-list dt{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);font-weight:600;margin-bottom:.45rem}
.spec-list dd{margin:0;font-size:.9375rem;line-height:1.6;color:var(--ink-2);max-width:34ch}
.spec-list a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.spec-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.spec-list{grid-template-columns:minmax(0,1fr)}}

/* ---------- colour rail --------------------------------------------------
   Nine colours in a nine-across grid made every tile 120px — a colour picker
   you have to squint at. Five at a time, each nearly twice the size, and the
   rest arrive by scrolling. */
.grail{position:relative}
.gcolours{
  display:flex;gap:clamp(.7rem,1.4vw,1.1rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-top:1.1rem;
}
.gcolours::-webkit-scrollbar{display:none}
.gcol__look,.gcol__mac{background:var(--bone)}
.gcol figcaption{margin-top:.6rem;font-size:.8125rem}

.grail__btn{
  position:absolute;top:calc(50% - .9rem);transform:translateY(-50%);z-index:2;
  width:40px;height:40px;display:grid;place-items:center;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
  cursor:pointer;transition:background-color .2s,opacity .2s;
}
.grail__btn svg{width:18px;height:18px}
.grail__btn:hover{background:var(--peri-100)}
.grail__btn[disabled]{opacity:0;pointer-events:none}
.grail__btn--prev{left:-20px}
.grail__btn--next{right:-20px}
@media (max-width:820px){
  .grail__btn{display:none}
}
@media (prefers-reduced-motion:reduce){.gcolours{scroll-behavior:auto}}

/* =========================================================================
   COLLECTION-PAGE RHYTHM — one field, six measures, one peak.
   inner-v7.css loads after site.css, so nothing here needs !important.
   HOUSE RULES hold: square, flat — no border-radius, no shadow, no blur.
   ========================================================================= */

/* ---------- the field ----------------------------------------------------
   --edge is home-v7.css's own token (:247 / :292 / :892): the distance from
   the viewport edge to the text column, expressed off 100% — never 100vw,
   which counts the scrollbar and would shove every full-bleed row sideways.
   With inner-v7's --wrap:1200 and --gutter:44 it is 164px at 1440, which is
   exactly where .wrap already starts its text.

   The outer tracks are --edge MINUS one column-gap, because a 14-track field
   has 13 gutters. Without that subtraction `wrap-start` lands at 185.6px and
   the page carries two left axes 21.6px apart — nav, footer and every
   padding-based band at 164, every grid child at 185.6. With it:
       wrap-start = (164 - 21.6) + 21.6 = 164     one axis, page-wide
       12 cols + 11 gaps = 1112px                 = .wrap's text box exactly
       column = 72.87px at 1440
   max(0px, …) is a guard: --edge floors at --gutter (20px) and --gx only
   passes 20px above a 1333px viewport, where --edge is already 110px, so it
   never clamps today — but it keeps the field safe if --wrap is ever retuned.
   ========================================================================= */
.cband{
  --edge:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  --gx:clamp(.7rem,1.5vw,1.4rem);
  display:grid;
  grid-template-columns:
    [full-start] max(0px, var(--edge) - var(--gx))
    [wrap-start] repeat(12,minmax(0,1fr)) [wrap-end]
    max(0px, var(--edge) - var(--gx)) [full-end];
  column-gap:var(--gx);
  align-items:start;
}
/* min-width:0 is not optional — Thai has no spaces and a grid child without
   it blows its track out. Default placement is the text axis; the rules
   below opt individual children out. */
.cband > *{min-width:0;grid-column:wrap-start / wrap-end}

/* every band head's hairline runs edge to edge now, on every band */
.cband > .band__head{
  grid-column:full-start / full-end;
  padding-inline:var(--edge);
  border-bottom-color:var(--rule);
}

/* ---------- band 1 · INTRO — type on the axis, plate off the right -------
   .brief from home-v7.css (:290-345). The rule starts at the TRUE viewport
   edge and dies at column 8; the lead hangs off it at column 3, so heading
   and body share neither axis nor baseline. The plate is flush to the band's
   top and bottom and leaves the page on the right. */
.cband--intro{background:var(--paper);padding-block:0}
.cband--intro .eyebrow{
  grid-column:wrap-start / 8;grid-row:1;z-index:2;
  margin-block:clamp(1.75rem,3.4vw,2.75rem) 0;
}
.cband--intro .h-display{
  grid-column:wrap-start / 8;grid-row:2;z-index:2;
  margin:clamp(.85rem,1.7vw,1.5rem) 0 0;
  /* the page spends its display budget once, on the rail. --t-4xl is 88px at
     1440, which put "Hello Kitty Medical Scrub" on three lines in a 640px
     column — and three lines of display copy is a house no. */
  font-size:clamp(2.1rem,4.6vw,3.6rem);
}
.cband__rule{
  grid-column:full-start / 8;grid-row:3;
  height:1px;background:var(--rule);
  margin-top:clamp(1.75rem,4vw,3rem);
}
.cband__body{
  grid-column:3 / 8;grid-row:3;z-index:2;
  margin-top:clamp(1.75rem,4vw,3rem);
  padding:clamp(1rem,2.2vw,1.65rem) 0 clamp(2rem,4vw,3rem);
}
.cband__body .lead{max-width:46ch;margin:0}
.cband__acts{display:flex;flex-wrap:wrap;gap:.75rem;margin:clamp(1.1rem,2.2vw,1.6rem) 0 0}
.cband__also{margin:.9rem 0 0;font-size:var(--t-sm);color:var(--ink-3)}
.cband__plate{
  grid-column:9 / full-end;grid-row:1 / span 3;align-self:stretch;z-index:1;
  margin:0;overflow:hidden;background:var(--peri-100);
  min-height:clamp(300px,34vw,490px);
}
.cband__plate img{width:100%;height:100%;object-fit:cover;display:block}
.cband--intro .cband__plate img{object-position:50% 18%}

/* ---------- band 2 · THE RAIL — the page peak ----------------------------
   The component already ships: .grail, [data-rail], [data-rail-track] and the
   two buttons are in garden_extra, the handler is site.js:164-188. Only the
   measure changes, plus a --per token so the breakpoints below can actually
   reach it. --per is declared on .grail, not on .gcolours, because the
   ARROWS need to read it too and they are siblings of the track. */
.cband--rail{padding-block:clamp(2.5rem,5vw,4rem) clamp(2.75rem,5.5vw,4.5rem)}
.cband--rail .gstep__k{grid-column:wrap-start / wrap-end;margin-top:clamp(1.1rem,2.2vw,1.6rem)}
.cband--rail .gstep__s{grid-column:wrap-start / wrap-end}
.cband .grail{grid-column:full-start / full-end}

.grail{--per:5;--rgap:clamp(.7rem,1.4vw,1.1rem)}
@media (max-width:1100px){.grail{--per:4}}
@media (max-width:900px) {.grail{--per:3}}
@media (max-width:560px) {.grail{--per:1.65}}

/* REPLACES the .gcol flex-basis block and its three media queries (deleted
   below). Styling the CHILDREN, not .gcol, keeps the rail reusable. */
.gcolours{
  gap:var(--rgap);
  /* the peak is the one band deliberately OFF the 164 text axis; a snap
     port inset would put it back on and undo the bleed. */
  scroll-padding-inline-start:0;
}
.gcolours > *{
  flex:0 0 calc((100% - (var(--per) - 1) * var(--rgap)) / var(--per));
  min-width:0;margin:0;scroll-snap-align:start;
}
/* the column: look shot (4:5) stacked FLUSH on the embroidery macro (1:1) —
   the homepage's own model + macro pairing. At 1440 full bleed the tile is
   273.9px, so the photography runs 342 + 274 = 616px tall, which is what
   makes this the tallest band on the page rather than a wider card. */
.gcol__m{display:block;background:var(--bone)}
.gcol__look,.gcol__mac{width:100%;height:auto;display:block;object-fit:cover}
.gcol__look{aspect-ratio:4/5;object-position:50% 14%}
.gcol__mac{aspect-ratio:1/1}
.gcol__p{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* at the bleed there is no outside for the buttons to sit in: flush to the
   viewport edge, over the photograph, and centred on the LOOK shot rather
   than on the whole column so they never land on the caption.
   Ink ground, not paper: Whisper Snow and Sugar Blue are a pale garment on a
   pale studio floor and a white button vanishes on them. Square, flat, no
   shadow — the fix for contrast is the fill, never a shadow. */
.cband .grail__btn{
  left:auto;right:auto;
  top:calc(1.1rem + 62.5vw / var(--per));
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.cband .grail__btn:hover{background:var(--plum-700);border-color:var(--plum-700)}
.cband .grail__btn--prev{left:0}
.cband .grail__btn--next{right:0}
/* x mandatory + a fractional last tile can make the final snap position
   unreachable; proximity cannot. */
@media (max-width:560px){.gcolours{scroll-snap-type:x proximity}}

/* ---------- band 3 · IN THE SET — narrow text, hairlines to both edges ----
   NOT a dark plum panel: six rows of shipping, sizing and exchange terms are
   not the most expensive-looking thing on a collection page. What carries
   the rhythm is that the rules run 0 -> 1440 while the prose measure narrows
   to 46ch. Class kept as .spec-list on purpose — no rename, no orphan. */
.cband--set{padding-block:clamp(2.25rem,4.5vw,3.5rem) clamp(2.5rem,5vw,4rem)}
.cband--set .spec-list{
  grid-column:full-start / full-end;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0;border-top:0;border-bottom:1px solid var(--rule);
}
.cband--set .spec-list > div{
  border-top:1px solid var(--rule);border-bottom:0;
  padding:clamp(1rem,1.9vw,1.4rem) clamp(1rem,3vw,3rem);
}
.cband--set .spec-list > div:nth-child(odd){padding-left:var(--edge)}
.cband--set .spec-list > div:nth-child(even){padding-right:var(--edge)}
.cband--set .spec-list dd{max-width:46ch}

/* ---------- band 4 · BUILDER / EMBROIDERY — axis to the right bleed ------
   A rhyme with band 1 at a different scale: type holds the 164 axis, the
   pictures leave the page on the right. */
.cband--build{padding-block:clamp(2.25rem,4.5vw,3.5rem) clamp(2.5rem,5vw,4rem)}
.cband--build .emb,
.cband--build .gmotifs{
  grid-column:wrap-start / full-end;
  padding-top:clamp(1.1rem,2.2vw,1.6rem);
}
.cband--build .gstep__k{margin-top:clamp(1.4rem,3vw,2.25rem)}
.cband--build .gstep__k:first-of-type{margin-top:0}
.cband--build .films{grid-column:wrap-start / 9}
/* then it narrows again — the builder ends where the reading ends */
.cband--build .gstep--last{grid-column:wrap-start / 8}

/* ---------- band 5 · SIZE GUIDE — the contraction ------------------------
   Two auto-fit tables at 548px each inside 1112 are loose; at 850px they are
   409px each and still two-up (the auto-fit minimum is 320px), and coming
   straight after a band that bled off the right edge the pull-back reads. */
.cband--size{padding-block:clamp(2.25rem,4.5vw,3.5rem) clamp(2.5rem,5vw,4rem)}
.cband--size .sizewrap{grid-column:wrap-start / 10}
.cband--size .muted{grid-column:wrap-start / 10}

/* ---------- band 6 · MAKE IT YOURS — the mirror of band 1 ----------------
   .close--story from home-v7.css (:977-990). The page opens with a picture
   bleeding right and closes with one bleeding left; that bracket is the
   rhythm stated in one sentence. */
.cband--yours{background:var(--peri-50);padding-block:0}
.cband--yours .cband__plate{
  grid-column:full-start / 7;grid-row:1;align-self:stretch;
  min-height:clamp(280px,29vw,430px);
}
.cband--yours .cband__copy{
  grid-column:8 / wrap-end;grid-row:1;align-self:center;
  padding-block:clamp(2.25rem,4.5vw,3.75rem);
}
.cband--yours .cband__copy .body{max-width:42ch}

/* ---------- band 7 · VALUES — the rule to both edges ---------------------
   Cheapest change on the page, and the one that makes every band above it
   read as full width. --rule, not --line: --line is 1.22:1 on cream and
   disappears on a phone. Not a grid — hence its own --edge. */
.cband--values{
  --edge:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  display:block;
  border-top:1px solid var(--rule);
  padding:clamp(1.75rem,3.5vw,2.75rem) var(--edge) clamp(2.25rem,4.5vw,3.5rem);
}

/* ---------- one column, no horizontal overflow ---------------------------
   At 375 --gutter is 20px, --edge collapses to max(20, negative) = 20 and
   --gx to 11.2, so the outer tracks are 8.8px and wrap-start lands on 20px —
   the same axis as the nav. The field degrades on its own; only the explicit
   placements need restating. Both plates KEEP one bleed edge, so the
   asymmetry survives the collapse instead of flattening to a centred stack,
   and .emb / .gmotifs deliberately keep bleeding right at every width. */
@media (max-width:900px){
  .cband--intro .eyebrow,
  .cband--intro .h-display{grid-column:wrap-start / wrap-end}
  .cband--intro .cband__plate{
    grid-column:wrap-start / full-end;grid-row:3;
    min-height:0;aspect-ratio:4/5;margin-top:clamp(1.5rem,4vw,2.5rem);
  }
  .cband--intro .cband__rule{grid-column:full-start / wrap-end;grid-row:4}
  .cband--intro .cband__body{grid-column:wrap-start / wrap-end;grid-row:4}

  .cband--set .spec-list{grid-template-columns:minmax(0,1fr)}
  .cband--set .spec-list > div{padding-inline:var(--edge)}

  .cband--build .films,
  .cband--build .gstep--last,
  .cband--size .sizewrap,
  .cband--size .muted{grid-column:wrap-start / wrap-end}

  .cband--yours .cband__plate{
    grid-column:full-start / wrap-end;grid-row:1;min-height:0;aspect-ratio:4/3;
  }
  .cband--yours .cband__copy{
    grid-column:wrap-start / wrap-end;grid-row:2;
    padding-block:clamp(1.5rem,4vw,2.25rem) clamp(2.25rem,5vw,3.25rem);
  }
}

/* ---------- the character square on the rail column ----------------------
   A white square straddling the seam between the look shot (4:5) and the
   embroidery macro (1:1), carrying that colourway's own character and its
   name. The seam sits at 1.25 / 2.25 = 55.56% of the column, so the square
   is centred on that line and reads as pinned to both photographs at once.

   Square, flat, hairline — no radius, no shadow. A perfect square on
   purpose: aspect-ratio 1, so it stays square at every rail width. */
.gcol__m{position:relative;display:block;background:var(--bone)}
.gcol__card{
  position:absolute;left:50%;top:55.56%;transform:translate(-50%,-50%);
  width:min(62%,190px);aspect-ratio:1;
  background:var(--paper);border:1px solid rgb(0 0 0 / .08);
  /* minmax(0,1fr), not 1fr: a 1fr row refuses to shrink below its content,
     so the artwork pushed the box to 168x178 and the square stopped being
     square. */
  display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;
  align-items:center;justify-items:center;
  padding:11% 8% 8%;gap:.4rem;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.gcol__card img{
  width:auto;height:100%;max-width:100%;object-fit:contain;display:block;
  /* a cut-out on white needs no edge treatment; any halo here would be CSS,
     not the PNG */
}
.gcol__card--bare{grid-template-rows:auto;place-content:center;padding:14% 10%}
.gcol__name{
  font-size:clamp(.6875rem,.95vw,.8125rem);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);text-align:center;line-height:1.25;
  font-variation-settings:'wght' 600;font-weight:600;
}
.gcol:hover .gcol__card{transform:translate(-50%,-50%) scale(1.04)}
@media (max-width:560px){.gcol__card{width:min(72%,150px);padding:11% 7% 8%}}
@media (prefers-reduced-motion:reduce){.gcol__card{transition:none}}
/* the colour name is on the card; the caption keeps the chip and the price,
   and hides its own copy of the name from sight without removing it from the
   accessibility tree where the chip has no text of its own */
.gcol__cn{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gcol figcaption{position:relative;display:flex;align-items:center;gap:.4rem}

/* Garden's square: the four motifs two-up, because any of them can go on any
   of the nine colours. Same white square, same rules. */
/* implicit rows size themselves off image height:100% — circular, so the
   grid grew past its track and the name ended up underneath the artwork.
   Both axes are declared. */
.gcol__quad{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:5%;width:100%;height:100%;min-height:0;place-items:center}
.gcol__quad img{width:100%;height:100%;min-height:0;object-fit:contain;display:block}

/* ---------- sold out ------------------------------------------------------
   Only the Kuromi line is still in production. The other collection pages
   keep every photograph and every word about the drop, and say so plainly
   where the buy button used to be. Square tag, hairline border, the page's
   own accent ink — a state, not an error. */
.soldout{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  max-width:50ch;color:var(--ink-2);font-size:var(--t-sm);line-height:1.65}
.soldout__tag{display:inline-block;border:1px solid currentColor;
  padding:.22rem .6rem;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);white-space:nowrap}
.band__meta .soldout__tag{color:var(--accent-ink)}
.gstep--last .soldout{margin-top:1.25rem}
/* the hub card's badge slot carries the status for a line out of production */
.badge--sold{background:transparent;border-color:currentColor;color:var(--ink-2)}