@charset "UTF-8";
/* ===========================================================================
   AFRO CROWN BEAUTY — Braids & Beauty · Vienna
   Design system v2.0

   Display: Cormorant Garamond   ·   UI and body: Montserrat
   Both SIL Open Font License, bundled as VARIABLE fonts — one file per family
   covering every weight, freely embeddable including commercially.

   Neither face carries σ, subscripts or U+2192. The site therefore uses no
   mathematical notation, and arrows are drawn SVG (.btn__arrow), never typed.
   =========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-var.woff2") format("woff2-variations"),
       url("../fonts/cormorant-garamond-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var.woff2") format("woff2-variations"),
       url("../fonts/montserrat-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* palette — the client's brand board, verbatim */
  --ink:        #1A120D;   /* Espresso — the only black */
  --ink-2:      #26190F;
  --ink-3:      #3B2A1C;
  --paper:      #F6F2E8;   /* Ivory */
  --paper-2:    #EDE6D6;
  --paper-3:    #DCD0BA;
  --gold:       #C8A463;
  --gold-lt:    #E0C68F;
  --gold-dk:    #9A7B3F;
  --clay:       #B56B52;   /* Terracotta */
  --clay-lt:    #CE8A72;
  --indigo:     #5B2A4A;   /* Plum */
  --jade:       #2E5C4D;

  /* the metallic gold of the mark, for rules and flourishes */
  --gold-sheen: linear-gradient(135deg, #6E5020 0%, #B08B44 26%, #EFE0B4 46%,
                                #C8A463 60%, #A17A32 78%, #634718 100%);

  /* type */
  --font:         "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.9rem, 7.2vw, 5.6rem);
  --fs-h1:      clamp(2.2rem, 5.0vw, 3.6rem);
  --fs-h2:      clamp(1.8rem, 3.4vw, 2.7rem);
  --fs-h3:      clamp(1.25rem, 2.0vw, 1.6rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-label:   0.6875rem;

  --lh-tight: 1.04;
  --lh-body:  1.72;
  --tr-label: 0.26em;
  --tr-tight: 0.005em;

  /* layout */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4rem, 9vw, 8rem);
  --hair: rgba(246,242,232,.24);
  --hair-ink: rgba(26,18,13,.20);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--ink); padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- typography */
.display, .h1, .h2, .h3, .brand__name, .card__name, .price__fig, blockquote p, .hero__stat b {
  font-family: var(--font-display);
  font-weight: 400;
}
.display {
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: .04em; text-transform: uppercase;
}
.h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--tr-tight); }
.h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: var(--tr-tight); }
.h3 { font-size: var(--fs-h3); line-height: 1.2; }
.lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6; }
.small { font-size: var(--fs-small); }
.muted { opacity: .74; }
.u-gold { color: var(--gold); }
.u-clay { color: var(--clay); }

/* wide-tracked caps: the Secession label voice */
.label {
  font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tr-label); line-height: 1.5;
}

/* Technique descriptor under each style name */
.spec-line { font-size: var(--fs-small); color: var(--gold); letter-spacing: .04em; }

/* ------------------------------------------------------------------ layout */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--sec-y); }
.section--ink   { background: var(--ink);   color: var(--paper); }
.section--paper2{ background: var(--paper-2); }
.section--clay  { background: var(--clay);  color: var(--paper); }
.section--gold  { background: var(--gold);  color: var(--ink); }

.section-label { display: flex; align-items: center; gap: .9rem; margin-bottom: 2.4rem; }
.section-label__num { font-family: var(--font-display); color: var(--clay); font-size: .95rem; letter-spacing: .1em; }
.section--ink .section-label__num { color: var(--gold); }
.section-label__rule { width: 40px; height: 1px; background: currentColor; opacity: .5; }
.section-label__text { opacity: .7; }

/* --------------------------------------------------------------- ornaments */
.rule { height: 1px; background: var(--hair-ink); border: 0; margin: 0; }
.section--ink .rule { background: var(--hair); }
.corner { position: relative; }
.corner::before, .corner::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
}
.corner::before { top: 20px; left: 20px;  border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.corner::after  { bottom: 20px; right: 20px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

/* An SVG loaded through <img> CANNOT inherit currentColor — it renders with its own
   default fill and disappears on dark grounds. The standalone knot is therefore painted
   as a CSS mask, so it takes the surrounding text colour like a glyph would. */
.knot {
  display: block; background: currentColor; flex: none;
  aspect-ratio: 1.44 / 1;                     /* the crown's own proportion */
  -webkit-mask: url("../svg/acb-mark-current.svg") center / contain no-repeat;
          mask: url("../svg/acb-mark-current.svg") center / contain no-repeat;
}
.knot--center { margin-inline: auto; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1rem 1.6rem; background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); cursor: pointer;
  font-family: var(--font); font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em; font-size: .72rem;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.btn:hover { background: transparent; color: var(--btn-bd); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: var(--paper); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--gold); --btn-bd: var(--ink); }
.btn--ink:hover { background: transparent; color: var(--ink); }
/* Neither Cormorant Garamond nor Montserrat has U+2192 — the arrow is drawn, never typed */
.btn__arrow { width: 18px; height: 8px; flex: none; }

/* anchor targets clear the sticky header */
:target, .section, h1, h2, h3 { scroll-margin-top: 96px; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink); color: var(--paper);
  border-bottom: 1px solid rgba(198,155,46,.5);
}
.site-header__inner { display: flex; align-items: center; gap: 2rem; height: 76px; }
.brand { display: flex; align-items: center; gap: .8rem; margin-right: auto; }
.brand__mark { width: 52px; height: 36px; flex: none; display: block; }
.brand__name { font-size: 1.18rem; letter-spacing: .18em; line-height: 1.05;
  text-transform: uppercase; display: block; }
.brand__sub { font-size: .48rem; letter-spacing: .3em; color: var(--gold);
  text-transform: uppercase; display: block; margin-top: 2px; white-space: nowrap; }
.brand__name--sub { font-size: .86rem; letter-spacing: .34em; }
.nav { display: flex; gap: 2rem; }
.nav a { font-family: var(--font); font-weight: 400;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .2em; position: relative; padding-block: .4rem; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--gold); transition: width .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--gold); }
.nav-toggle { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--paper); margin: 5px 0; transition: .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------------------------- hero */
.hero { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(2rem,5vw,5rem);
  align-items: center; padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
/* grid/flex items default to min-width:auto, so a wide child (the stat row) can
   force the whole column past .wrap. Never remove these. */
.hero__inner > *, .split > *, .grid > * { min-width: 0; }
.hero__eyebrow { display: flex; align-items: center; gap: 1rem; color: var(--gold); margin-bottom: 2rem; }
.hero__eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--gold); flex: none; }
.hero__title { margin-bottom: 1.6rem; }
.hero__title span { display: block; }
.hero__swash { width: 340px; max-width: 60%; margin-bottom: 2rem; }
.hero__swash span { display: block; height: 3px; background: var(--gold); }
.hero__swash span + span { width: 80%; margin-top: 5px; background: var(--clay); }
.hero__deck { color: var(--paper-3); max-width: 46ch; margin-bottom: 2.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3.2rem; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 1.25rem clamp(2rem,5vw,4rem); border-top: 1px solid var(--hair); padding-top: 1.6rem; }
.hero__stat b { display: block; font-size: 2rem; font-weight: 400; color: var(--gold); line-height: 1; }
.hero__stat span { color: var(--paper-3); }
.hero__art { position: relative; }
.hero__art img { width: clamp(200px, 30vw, 400px); }
.hero__art figcaption {
  position: absolute; inset-block-start: 50%; inset-inline-end: -2.2rem;
  transform: translateY(-50%) rotate(90deg); transform-origin: center;
  color: var(--gold); white-space: nowrap;
}

/* ----------------------------------------------------------------- ticker */
.ticker {
  background: var(--gold); color: var(--ink);
  border-block: 2px solid var(--ink); overflow: hidden; padding-block: .85rem;
}
.ticker__track { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; gap: 2rem; padding-inline: 1rem; }
.ticker__group span { font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .22em; font-size: 1.05rem; white-space: nowrap; }
.ticker__dot { width: 7px; height: 7px; background: var(--ink); transform: rotate(45deg); flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ cards */
/* min() keeps auto-fit tracks from exceeding a narrow container */
.grid { display: grid; gap: 2rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

.card {
  background: var(--ink-2); color: var(--paper); position: relative;
  border: 1px solid rgba(198,155,46,.42); padding: 1.75rem;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: var(--gold); }
.card__art { background: var(--ink); margin-bottom: 1.4rem; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-top: 1px solid rgba(198,155,46,.5); padding-top: 1.1rem; }
.card__name { font-size: 1.45rem; text-transform: uppercase; letter-spacing: .01em; }
.card__price { color: var(--gold); font-size: 1.15rem; white-space: nowrap; }
.card__meta { display: flex; justify-content: space-between; gap: 1rem; margin-block: .5rem 1.4rem; }
.card__word { color: var(--gold); }
.card__foot { margin-top: auto; }
.card .btn { width: 100%; }

/* ------------------------------------------------------------------ prices */
.price { background: var(--paper); border: 1px solid var(--hair-ink); padding: 2rem; position: relative;
  display: flex; flex-direction: column; }
.price--feature { background: var(--ink); color: var(--paper); border-color: var(--gold); }
.price__flag { position: absolute; top: -13px; right: 1.5rem; background: var(--gold); color: var(--ink);
  padding: .35rem 1rem; }
.price__name { font-family: var(--font); font-weight: 500; color: var(--clay); text-transform: uppercase; letter-spacing: .1em; font-size: 1.05rem; margin-bottom: 1rem; }
.price--feature .price__name { color: var(--gold); }
.price__fig { display: flex; align-items: baseline; gap: .6rem; font-size: 3.1rem; line-height: 1;
  padding-bottom: 1.2rem; border-bottom: 1px solid rgba(198,155,46,.55); }
.price__fig small { font-size: .8rem; opacity: .7; }
.price__list { margin-block: 1.4rem; display: grid; gap: .7rem; }
.price__list li { display: grid; grid-template-columns: 1.2rem 1fr; font-size: var(--fs-small); }
.price__list li::before { content: "—"; color: var(--gold); }
.price .btn { margin-top: auto; width: 100%; }

/* ------------------------------------------------------------------ quote */
.quote__inner { display: flex; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.quote__mark { width: 138px; height: 96px; flex: none; color: var(--paper); }
blockquote p { font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.16; text-transform: none; }
blockquote cite { display: block; margin-top: 1.6rem; font-style: normal; }
blockquote cite::before { content: ""; display: block; width: 78px; height: 2px; background: var(--paper); margin-bottom: 1rem; }

/* ------------------------------------------------------------------- form */
.form { display: grid; gap: 1.75rem; max-width: 660px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.field { display: grid; gap: .5rem; }
.field input, .field textarea, .field select {
  background: transparent; border: 0; border-bottom: 1.5px solid currentColor;
  padding: .6rem 0; border-radius: 0;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-bottom-color: var(--clay); }
.field textarea { resize: vertical; min-height: 5rem; }

/* ------------------------------------------------------------------ studio */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.frame { background: var(--paper-3); padding: 1rem; position: relative; }
.frame > img { border: 1px solid var(--gold); }
.facts { display: grid; gap: 0; margin-top: 2.2rem; }
.facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem;
  padding-block: 1rem; border-top: 1px solid var(--hair-ink); }
.section--ink .facts div { border-color: var(--hair); }
.facts dt { color: var(--clay); }
.section--ink .facts dt { color: var(--gold); }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--ink); color: var(--paper); padding-block: 4rem 2.5rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
.site-footer h2 { color: var(--gold); margin-bottom: .9rem; }
.site-footer li + li { margin-top: .55rem; }
.site-footer a:hover { color: var(--gold); }
.colophon { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline;
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--hair); }
.colophon__note { color: var(--paper-3); margin-right: auto; }

/* ------------------------------------------------------------- styleguide */
.swatch { display: grid; gap: .5rem; }
.swatch__chip { aspect-ratio: 1; border: 1px solid var(--hair-ink); }
.spec { border-top: 1px solid var(--hair-ink); padding-top: 1.2rem; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1040px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { justify-self: center; }
  .hero__art figcaption { display: none; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
/* The wordmark is the widest element in the bar. Cormorant plus wide tracking clipped
   "Afro" off the left edge at 360 px, so the whole lockup steps down twice. */
@media (max-width: 620px) {
  .brand { gap: .6rem; }
  .brand__mark { width: 44px; height: 30px; }
  .brand__name { font-size: 1rem; letter-spacing: .13em; }
  .brand__name--sub { font-size: .74rem; letter-spacing: .26em; }
  .brand__sub { font-size: .42rem; letter-spacing: .2em; }
}
@media (max-width: 400px) {
  .brand__mark { width: 38px; height: 26px; }
  .brand__name { font-size: .88rem; letter-spacing: .1em; }
  .brand__name--sub { font-size: .64rem; letter-spacing: .22em; }
  .brand__sub { display: none; }
}

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 76px 0 auto 0; background: var(--ink);
    flex-direction: column; gap: 0; padding: 1rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--hair); transform: translateY(-120%);
    transition: transform .38s var(--ease); z-index: 40;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { font-size: 1rem; padding-block: .9rem; border-bottom: 1px solid var(--hair); }
  .site-header .btn { display: none; }
  .form__row { grid-template-columns: 1fr; }
  .quote__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__grid { grid-template-columns: 1fr; }
}
@media print {
  .site-header, .ticker, .nav-toggle, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ===========================================================================
   WORDPRESS BLOCK BRIDGE
   ---------------------------------------------------------------------------
   Everything above this line is the static-site design system, shipped by the
   Afro Crown Beauty kit unmodified. Everything below exists ONLY because this
   design system is rendered by WordPress block markup rather than by the hand-
   written HTML it was authored against.

   Carried over verbatim from the outgoing artin.css, which had accumulated
   these fixes against real rendering bugs. Do not delete without reproducing
   the bug each one names.
   =========================================================================== */

/* ------------------------------------------------- block-editor nav bridge
   The core Navigation block renders its items inside a <ul class=
   "wp-block-navigation__container">, which this design system predates: .nav
   was written against a flat row of <a>. Desktop is unaffected (the container
   is already a flex row, which is what .nav wanted), but below 780px the
   mobile panel kept the links in a row instead of stacking them.
   Scoped under .nav so it cannot touch any other navigation on the site. */
@media (max-width: 780px) {
  .nav .wp-block-navigation__container { flex-direction: column; gap: 0; width: 100%; }
  .nav .wp-block-navigation-item,
  .nav .wp-block-navigation-item__content { display: block; width: 100%; }
}

/* --------------------------------------------- long German compound words
   German compounds are long and unbreakable: "Gestaltungssystem" measures
   407px in a 320px column at display sizes, and the browser default
   (overflow-wrap: normal) lets it punch straight through the container —
   the same class of overflow the port guide's section 8 already fixed twice
   with min-width: 0 and minmax(min(300px, 100%), 1fr).

   This is a WordPress bridge rule, not a design rule: the static kit set its
   own headline copy by hand and never overflowed. Under WordPress the same
   slots are filled at render time from post titles and post meta, so the copy
   is not known when the layout is authored.

   Applied to every display-type class, not just .h1: the dynamic-title slots
   render into .card__name, .display and .h3 as well.

   `anywhere` rather than `break-word` on purpose — only `anywhere` also
   shrinks the element's min-content size, which is what actually stops a
   grid/flex track from being forced wider than its container.

   Hyphenation is gated behind :lang(de) and is INERT TODAY: this install's
   locale is en_US, and `hyphens: auto` under an en-US root would apply
   English break rules to German words. The moment the site locale is set to
   German it engages and the breaks become linguistically correct. */
.display, .h1, .h2, .h3, .brand__name, .card__name, .price__fig {
  overflow-wrap: anywhere;
}
:lang(de) .display, :lang(de) .h1, :lang(de) .h2, :lang(de) .h3,
:lang(de) .card__name, :lang(de) .price__fig {
  hyphens: auto;
}

/* Every UA stylesheet renders <address> italic. The footer/Studio/Termin
   address is a real <address> element for semantics and for the schema.org
   markup, but it must look like the surrounding text.

   `.artin-address` is a TRANSITIONAL alias: patterns/contact-details.php still
   emits the old class name. It is safe to delete this selector once every
   pattern has been re-cut to .acb-address; until then, removing it silently
   returns the footer address to italic. */
.acb-address,
.artin-address { font-style: normal; }

/* ---------------------------------------------------------------------------
   DELIBERATELY NOT CARRIED OVER: the `.notation` rules.
   The outgoing ARTIN system typeset braid-group notation (sigma, subscript
   indices) in a bundled monospace face, because neither of its display faces
   carried those glyphs. Afro Crown Beauty ships no mono face and uses no typed
   mathematical notation at all — see section 4 of WORDPRESS-PORT-GUIDE.md.
   The SVG diagrams (relation.svg, gen-sigma*.svg, r1-r3.svg) are unaffected
   and still ship; it is the TYPED notation that is gone, not the artwork.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   PARENT-THEME INTEGRATION BRIDGE  (Lane C S1/S2, 2026-08-29)
   ---------------------------------------------------------------------------
   Three defects, all inherited from the ARTIN build and all caused by the same
   thing: this design system was authored as a standalone responsive site and
   then dropped onto the `arneiron` parent, whose own chrome makes different
   assumptions. None of these are style choices — each is a measured rendering
   bug with a named winning declaration.
   =========================================================================== */

/* ------------------------------------------- S1: the header at =< 782px
   `ds.css` §14b implements the PARENT's desktop/mobile header swap:

       .header-mobile.arneiron-mobile-bar          { display: none }
       @media (max-width: 782px) {
         .site-header:not(.header-mobile)          { display: none !important }
         .header-mobile.arneiron-mobile-bar        { display: block }
       }

   That swap exists because the parent's own desktop header is NOT responsive,
   so below 782px it is replaced wholesale by `parts/header-mobile.html`. This
   design system does not need replacing: it ships ONE responsive header with
   its own `.nav-toggle` and its own fixed `.nav` panel (see the =< 780px block
   above), which is how the kit was authored.

   The opt-out is the `header-mobile` class on the header itself, applied via
   the template-part className in all 7 templates. `:not(.header-mobile)` then
   no longer matches, so the header survives at every width, and because every
   OTHER parent rule keyed on that class requires the COMPOUND
   `.header-mobile.arneiron-mobile-bar` — verified by grepping all parent CSS,
   the bare class appears only inside the negation — adding it alone changes
   nothing else. No !important war, no second header in the DOM.

   These two rules close the 2px seam the opt-out opens: ds.css swapped at 782
   and this design system goes mobile at 780, so between 781 and 782 the header
   would render desktop-style with the toggle still hidden. Aligning the
   toggle's breakpoint to the parent's removes the gap. */
@media (max-width: 782px) {
  .site-header .nav-toggle { display: block; }
  .site-header .btn { display: none; }
}

/* ------------------------------------------------- S2: header/footer bleed
   Two independent parent constraints keep the header and footer off the
   viewport edges. Both were read from the CSSOM and sorted by specificity;
   neither is a WordPress layout width, so `"align":"full"` on the template
   parts would be inert (core's alignfull rule is :where()-wrapped, i.e.
   specificity 0, and cannot beat either of these):

     header, >= 900px : header-chrome.css
       body.arneiron-header-boxed .site-header { max-width: content-size }
       specificity (0,2,1) -> 1240px
     header residual AND footer, all widths : ds.css
       .site-header, .site-footer {
         width: min(100% - 2*var(--page-pad), wide-size); margin-inline: auto }
       specificity (0,1,0) -> 1376px at a 1440 viewport, 328px at 360

   The `body.arneiron-header-*` prefix below is REQUIRED, not decorative: a bare
   `.site-header` is (0,1,0) and loses the max-width to the boxed rule's (0,2,1),
   which clears the ds.css width but leaves the 1240 clamp — a silent half-fix
   that looks correct at 360 and is wrong at 1440. Both body classes are listed
   so the result is identical whichever way the parent's own switch is set.

   `.site-footer` alone is (0,1,0), the same as the ds.css rule it overrides, and
   wins on source order: acb.css is enqueued with a dependency on the LAST
   registered parent handle, so it always loads after ds.css.

   TRADE-OFF, recorded deliberately: this defeats the parent's supported
   `arneiron_header_full_width` option from the child, so flipping that option
   later will have no visible effect. Chosen anyway because a CSS bridge travels
   with the theme, whereas half the fix living in a DB option does not survive a
   redeploy into another environment — and because there is no parent switch for
   the footer at all, so the option could never have fixed more than half of it.

   Content stays measured: the inner `.wrap` still caps at 1240px and supplies
   the gutter, so only the background bands go full-bleed. */
body.arneiron-header-boxed .site-header,
body.arneiron-header-full  .site-header,
.site-footer {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* --------------------------------------------------- S2: 360px overflow
   `.facts div` is a two-column grid whose second track was `1fr`. A grid track
   defaults to min-width:auto, so an unbreakable token in the value column sets
   the track's floor: the e-mail address measures 181px as one word, which at
   360px pushed the document to scrollWidth 377 and produced 14px of horizontal
   scroll on the landing page. Measured offenders were the dd, the address and
   the mailto anchor — NOT the ticker, which is correctly clipped.

   Same class of bug as the two the port guide's section 8 already fixes with
   `min-width: 0` and `minmax(min(300px,100%), 1fr)`; same remedy. `minmax(0,…)`
   lets the track shrink below its content, and `overflow-wrap` then breaks the
   address rather than overflowing. Below 480px the 7.5rem label column is a
   third of the screen, so the pair stacks instead. */
.facts div { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); }
.facts dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .facts div { grid-template-columns: 1fr; gap: .3rem; }
}

/* -------------------------------------- S1 follow-up: the closed nav panel
   was painting over the brand lockup
   ---------------------------------------------------------------------------
   Making the header visible below 782px exposed a latent bug in the kit's own
   mobile panel that this install had never been able to show, because until
   then the whole header was display:none at those widths.

   The panel is `position: fixed; inset: 76px 0 auto 0` and hides itself with
   `transform: translateY(-120%)`. That percentage is of the panel's OWN height,
   so to clear the viewport it must travel 76px + its height, and -120% only
   travels 1.2x its height. It is sufficient only when the panel is at least
   380px tall. Measured here it is 278px, so it stops with its bottom edge at
   y=44.4 — INSIDE the 77px header — and because it is opaque (background:
   var(--ink)) and z-indexed above the non-positioned brand, it painted over
   the lockup:

       320/360/390  brand y=25.0..51.0  -> only  6.6px visible
       480/620      brand y=16.6..59.4  -> only 15.0px visible
       768          brand y=13.3..62.7  -> only 18.4px visible
       900+         nav is position:static and transparent -> all 49.5px visible

   The 900px correlation was a red herring: the real boundary is this design
   system's own 780px panel breakpoint, and 768/900 straddle it.

   Two independent guards, deliberately belt-and-braces, because this bug was
   invisible to a purely horizontal clipping test:
     1. an EXACT, height-independent offset — but ONLY once `margin: 0` is
        also set, which is why both are here. The panel is a core block group
        and arrives with a 24px block margin, so its used top was 100px, not
        the 76px the `inset` declares: measured `top: 76px` computed,
        untransformed top 100, needing -378.2 to clear while
        `calc(-100% - 80px)` supplies -358.2. It fell 20px short and left the
        bottom edge at y=20, i.e. still inside the header. Zeroing the margin
        makes the used top equal the inset, and then -(100% + 80px) clears a
        76px inset for ANY panel height, with no magic number to re-tune when
        a nav item is added. A fixed-position panel has no business carrying
        block-flow margin in the first place.
     2. `visibility: hidden` while closed, so a closed panel cannot paint even
        if the transform is ever overridden or fails. Transitioned at 0s with a
        delay on the way out so the slide-up animation still plays in full.

   Restated at 782px rather than the kit's 780px so this matches the breakpoint
   the toggle already uses above: the header is now one responsive unit that
   switches once, at the same width the parent's ds.css uses. */
@media (max-width: 782px) {
  .nav {
    position: fixed; inset: 76px 0 auto 0; background: var(--ink);
    flex-direction: column; gap: 0; padding: 1rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--hair); z-index: 40;
    margin: 0;
    transform: translateY(calc(-100% - 80px));
    visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s linear .38s;
  }
  .nav[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform .38s var(--ease), visibility 0s;
  }
  .nav a { font-size: 1rem; padding-block: .9rem; border-bottom: 1px solid var(--hair); }
}

/* ------------------------------- the booking CTA between 783px and 999px
   ---------------------------------------------------------------------------
   PRE-EXISTING, and outside the range the rig sampled (it tests 768 then jumps
   to 1440, so this band survived two full QA runs unmeasured).

   Below 783px the CTA is display:none by the kit's own design. From 1000px up
   it fits on one line. In between, the flex row runs out of room and SHRINKS
   the button below its single-line width, so the label wrapped to two lines,
   made the button 74px tall against a 77px header, and spilled 9.8px below the
   header's gold rule. At 783-800 the row additionally could not fit at all and
   the document overflowed horizontally by ~49px.

   Measured, all four combinations, true line boxes counted from a Range over
   the label text node rather than inferred from height:

     current            783: 2 lines, btn 147x74, y=13..87  scrollW 832/783
     scaled + shrink    783: 2 lines, btn  94x50, y=25..75  scrollW 783/783
     scaled + flex:none 783: 1 line,  btn 138x34, y=33..67  scrollW 823/783

   `flex: none` buys the single line by reintroducing horizontal overflow, which
   is the same trade as `white-space: nowrap` and is rejected for the same
   reason: "no horizontal overflow" is a stated QA criterion of the port guide,
   and a new class of breakage is worse than a contained wrap.

   So the button is scaled down and still allowed to shrink. That removes the
   spill at EVERY width in the band and also fixes the pre-existing horizontal
   overflow at 783-800. Nothing is removed and nothing semantic moves: the
   label, the arrow and the link are untouched, and >= 1000px is not affected.
   Residual, accepted knowingly: at 783-850 the label still wraps to two lines,
   but inside a 50px button centred in a 76px row, so it is contained. One line
   is not reachable there without either deleting the arrow or overflowing. */
@media (min-width: 783px) and (max-width: 999px) {
  .site-header .btn {
    padding: .5rem .7rem;
    font-size: .58rem;
    letter-spacing: .06em;
    gap: .35rem;
  }
}