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

/* the garden colour step is a picker: one row, however many colours there are */
.gcolours{grid-template-columns:repeat(var(--gcols,8),minmax(0,1fr))}
@media (max-width:1100px){.gcolours{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:820px){.gcolours{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.gcolours{grid-template-columns:repeat(3,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)}}