/* ==========================================================================
   Cilke Tech — cilketech.com — styles.css
   Direction: precision instrument. Cool slate neutrals, one electric-blue
   accent, an 8px rhythm, hairline rules, monospace labels, and a serif
   italic for the "deck" lines and taglines. System fonts only; the page
   makes no external requests. Light and dark follow the visitor's setting.

   Every text/background pairing was computed for WCAG AA (4.5:1 body text,
   3:1 large text and UI edges) in BOTH themes, including the five product
   hues (chip text on chip, numeral on card, labels over the corner wash) and
   the inverted Products panel. If you change a token, re-check its pairings.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  color-scheme: light dark;

  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eaeef4;
  --ink: #101720;
  --muted: #4c5665;
  --line: #d8dee7;
  --line-strong: #6f7a8b;
  --accent: #0b57ff;
  --accent-ink: #0846cc;
  --accent-strong: #0044d6;
  --accent-soft: #e6eeff;
  --on-accent: #ffffff;
  --ph: #fff1a8;
  --ph-ink: #4a3a00;

  /* the Products panel is inverted: dark on the light theme, light on dark */
  --inv-bg: #101720;
  --inv-ink: #f4f6f9;
  --inv-muted: #aab4c3;
  --inv-line: #2b3646;
  --inv-accent: #8db3ff;
  --inv-hover: rgba(255, 255, 255, 0.06);

  /* per-product hues: -h for numerals and dots, -ink for text, -soft for chips and washes */
  --blue: #0b57ff;   --blue-ink: #0846cc;   --blue-soft: #e6eeff;
  --coral: #d6472a;  --coral-ink: #a0341a;  --coral-soft: #fbe3dc;
  --violet: #6f4fe0; --violet-ink: #5236c4; --violet-soft: #ebe6fb;
  --teal: #158f7c;   --teal-ink: #11665a;   --teal-soft: #d6f0ea;
  --gold: #a37507;   --gold-ink: #6e4d00;   --gold-soft: #f9ecc6;

  --grid-dot: rgba(16, 23, 32, 0.16);
  --grid-dot-soft: rgba(16, 23, 32, 0.09);
  --grid-line: rgba(16, 23, 32, 0.07);
  --shadow-1: 0 1px 2px rgba(16, 23, 32, 0.06);
  --shadow-2: 0 12px 28px -14px rgba(16, 23, 32, 0.28), 0 2px 6px -2px rgba(16, 23, 32, 0.08);
  --shadow-menu: 0 24px 48px -20px rgba(16, 23, 32, 0.45), 0 2px 8px -2px rgba(16, 23, 32, 0.16);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Mono", "Liberation Mono", monospace;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

  --radius: 6px;
  --radius-lg: 10px;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s8: 64px;
  --s10: 80px;
  --s12: 96px;

  --wrap: 1120px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f15;
    --surface: #111721;
    --surface-2: #161d28;
    --ink: #e7ecf3;
    --muted: #a4afbd;
    --line: #253040;
    --line-strong: #7a8698;
    --accent: #5b92ff;
    --accent-ink: #8db3ff;
    --accent-strong: #7aa7ff;
    --accent-soft: #15223a;
    --on-accent: #0b0f15;
    --ph: #4a3a00;
    --ph-ink: #ffe08a;

    --inv-bg: #e7ecf3;
    --inv-ink: #101720;
    --inv-muted: #4c5665;
    --inv-line: #c3ccd8;
    --inv-accent: #0846cc;
    --inv-hover: rgba(16, 23, 32, 0.06);

    --blue: #5b92ff;   --blue-ink: #8db3ff;   --blue-soft: #15223a;
    --coral: #ff8a66;  --coral-ink: #ffa688;  --coral-soft: #3a2018;
    --violet: #a48dff; --violet-ink: #c2b3ff; --violet-soft: #28224a;
    --teal: #47c9b5;   --teal-ink: #7fe0d0;   --teal-soft: #14302d;
    --gold: #e9b84a;   --gold-ink: #f3cd78;   --gold-soft: #362a10;

    --grid-dot: rgba(231, 236, 243, 0.14);
    --grid-dot-soft: rgba(231, 236, 243, 0.08);
    --grid-line: rgba(231, 236, 243, 0.06);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 12px 28px -14px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
    --shadow-menu: 0 24px 48px -20px rgba(0, 0, 0, 0.85), 0 2px 8px -2px rgba(0, 0, 0, 0.6);
  }
}

@media (min-width: 720px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}

/* The active hue. Defaults to the brand accent; a .hue-* class on a card or
 * menu row switches it for everything inside (chip, dot, numeral, wash). */
:root { --h: var(--accent); --h-ink: var(--accent-ink); --h-soft: var(--accent-soft); }
.hue-blue   { --h: var(--blue);   --h-ink: var(--blue-ink);   --h-soft: var(--blue-soft); }
.hue-coral  { --h: var(--coral);  --h-ink: var(--coral-ink);  --h-soft: var(--coral-soft); }
.hue-violet { --h: var(--violet); --h-ink: var(--violet-ink); --h-soft: var(--violet-soft); }
.hue-teal   { --h: var(--teal);   --h-ink: var(--teal-ink);   --h-soft: var(--teal-soft); }
.hue-gold   { --h: var(--gold);   --h-ink: var(--gold-ink);   --h-soft: var(--gold-soft); }

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 720px) {
  body { font-size: 1.0625rem; }
}

[hidden] { display: none !important; }

a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

p { margin: 0; }
p + p { margin-top: var(--s2); }

ul, ol { margin: 0; padding: 0; }

svg { display: block; }

.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-feature-settings: "tnum" 1, "zero" 1;
}

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

.skip {
  position: absolute;
  top: -200px;
  left: var(--s2);
  z-index: 50;
  padding: var(--s1) var(--s2);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}
.skip:focus { top: var(--s2); }

/* ---------- 3. dotted-grid backgrounds ---------- */
.grid-bg { position: relative; }
.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1.6px);
  background-size: 24px 24px;
  background-position: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 30%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 30%, #000 30%, transparent 100%);
}
.grid-bg > * { position: relative; z-index: 1; }

/* ---------- 4. header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1) var(--s2);
  min-height: 64px;
  padding-top: var(--s1);
  padding-bottom: var(--s1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand .mark { width: 28px; height: 28px; flex: none; }
.mark .mk-bg { fill: var(--accent); }
.mark .mk-fg { fill: none; stroke: var(--on-accent); }
.mark .mk-dot { fill: var(--on-accent); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
@media (max-width: 419px) {
  .site-head .wrap { column-gap: var(--s1); }
  .nav { gap: 6px; }
  .nav > a, .nav .menu-btn, .nav .menu-summary { font-size: 0.875rem; }
  .brand { font-size: 1rem; gap: 8px; }
}
/* Only on very narrow screens (below 340px, i.e. narrower than any current
 * phone) does the wordmark give way to the mark alone; the link keeps its
 * accessible name. At 360px and up the full header fits on one row. */
@media (max-width: 339px) {
  .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.nav > a,
.nav .menu-btn,
.nav .menu-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 2px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ink);
  font: 500 0.9375rem/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav > a:hover,
.nav .menu-btn:hover,
.nav .menu-summary:hover,
.nav > a[aria-current="page"],
.nav .menu-btn[aria-expanded="true"],
details.menu-static[open] > .menu-summary {
  border-bottom-color: var(--accent);
  color: var(--ink);
}
.nav > a:focus-visible,
.nav .menu-btn:focus-visible,
.nav .menu-summary:focus-visible { outline-offset: 2px; }

.menu-btn .chev,
.menu-summary .chev {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.18s ease;
}
.menu-btn[aria-expanded="true"] .chev,
details.menu-static[open] > .menu-summary .chev { transform: rotate(180deg); }

/* The button exists only for script-enabled visitors (site.js marks <html class="js">
 * before the body renders). Without scripting the <details> inside <noscript> shows. */
.nav .menu-btn { display: none; }
html.js .nav .menu-btn { display: inline-flex; }
.menu-summary { list-style: none; }
.menu-summary::-webkit-details-marker { display: none; }

/* ---------- 5. products menu: a fixed-size table of contents on an inverted surface ---------- */
.menu-holder { position: static; }
@media (min-width: 720px) {
  .menu-holder { position: relative; }
}

.menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  /* max-height, not height: the panel fits its rows and only caps (then the list
     scrolls). A fixed 320px left the two current rows (one wraps) 5-8px short, so the
     list scrolled and showed a scrollbar. Re-check the cap when a product is added. */
  max-height: min(400px, calc(100vh - 80px));
  background: var(--inv-bg);
  color: var(--inv-ink);
  border-top: 1px solid var(--inv-line);
  border-bottom: 1px solid var(--inv-line);
  box-shadow: var(--shadow-menu);
  text-align: left;
  animation: menu-in 0.18s ease-out;
}
@media (min-width: 720px) {
  .menu {
    top: calc(100% + 10px);
    left: auto;
    right: 0;
    width: 360px;
    max-height: min(400px, calc(100vh - 80px));
    border: 1px solid var(--inv-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.menu-head,
.menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 12px 18px;
  flex: none;
}
.menu-head { border-bottom: 1px solid var(--inv-line); }
.menu-foot { border-top: 1px solid var(--inv-line); }
.menu-title {
  margin: 0;
  font-weight: 650;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--inv-ink);
}
.menu-count { color: var(--inv-muted); font-variant-numeric: tabular-nums; }
.menu-foot p {
  color: var(--inv-muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
}
.menu-foot a { color: var(--inv-accent); font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.menu-foot a:hover { color: var(--inv-ink); }

.menu-list {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--inv-muted) transparent;
}
.menu-item + .menu-item { border-top: 1px solid var(--inv-line); }

.menu-link {
  display: block;
  padding: 11px 10px 12px;
  border-radius: var(--radius);
  color: var(--inv-ink);
  text-decoration: none;
  transition: background 0.12s ease;
}
.menu-link:hover { background: var(--inv-hover); color: var(--inv-ink); text-decoration: none; }
.menu-link:focus-visible { outline: 2px solid var(--inv-accent); outline-offset: -2px; }
.menu-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.menu-idx { flex: none; color: var(--inv-accent); }
.menu-name { flex: 0 1 auto; min-width: 0; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.menu-leader {
  flex: 1 1 12px;
  min-width: 12px;
  align-self: stretch;
  border-bottom: 1px dotted var(--inv-muted);
  transform: translateY(-0.55em);
  opacity: 0.7;
}
.menu-row .chip { flex: none; margin-left: auto; }
.menu-tagline {
  display: block;
  margin-top: 4px;
  padding-left: 28px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--inv-muted);
}

/* ---------- 6. status dots and chips ---------- */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--h);
}
.dot-dev,
.chip-dev .dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--h);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--h-soft);
  color: var(--h-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}

/* ---------- 7. buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: 600 0.9375rem/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  background: var(--accent-strong);
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.btn:active { transform: none; box-shadow: none; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--surface);
  border-color: var(--ink);
  color: var(--ink);
}
.btn-sm { padding: 8px 14px; font-size: 0.875rem; }
.btn .arrow { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ---------- 8. hero ---------- */
.hero { padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .hero { padding: var(--s10) 0; } }
@media (min-width: 1024px) { .hero { padding: var(--s12) 0; } }

.hero-grid {
  display: grid;
  gap: var(--s5);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s8); }
}

/* status line above the headline, pointed at the first product people can use today */
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 0 var(--s3);
  padding: 6px 12px 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hero-status:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); text-decoration: none; }
.hero-status > span:not(.dot) { min-width: 0; }
.hero-status .dot { box-shadow: 0 0 0 3px var(--accent-soft); }
.hero-status .arrow { width: 14px; height: 14px; flex: none; stroke: currentColor; stroke-width: 2; fill: none; transition: transform 0.15s ease; }
.hero-status:hover .arrow { transform: translateX(3px); }

.eyebrow {
  margin: 0 0 var(--s3);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--accent);
}

.hero h1 {
  font-size: clamp(2.5rem, 1.45rem + 4.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 13ch;
}
/* the second clause of the headline turns serif italic in the accent colour */
.hero h1 em,
.page-head h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--accent-ink);
}
.lead {
  margin: var(--s3) 0 0;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 54ch;
  text-wrap: pretty;
}
@media (min-width: 720px) { .lead { font-size: 1.25rem; } }

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--s4);
}

.hero-meta {
  margin: var(--s5) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  color: var(--muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }

.hero-visual {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.hero-visual svg { width: 100%; height: auto; }

/* hero figure parts */
.hv-surface { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.hv-grid { stroke: var(--grid-line); stroke-width: 1; }
.hv-fine { stroke: var(--line); stroke-width: 1; fill: none; }
.hv-line { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.hv-acc { stroke: var(--accent); fill: none; }
.hv-fill { fill: var(--accent); }
.hv-node { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.hv-text {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hv-ticks { transform-origin: 176px 208px; animation: hv-spin 120s linear infinite; }
.hv-pulse { transform-origin: 440px 88px; animation: hv-pulse 2.8s ease-out infinite; }
.hv-trace { stroke-dasharray: 900; stroke-dashoffset: 0; animation: hv-draw 2.4s ease-out 1; }

@keyframes hv-spin { to { transform: rotate(360deg); } }
@keyframes hv-pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes hv-draw {
  from { stroke-dashoffset: 900; }
  to { stroke-dashoffset: 0; }
}

/* ---------- 9. sections ---------- */
.section { padding: var(--s8) 0; }
@media (min-width: 720px) { .section { padding: var(--s10) 0; } }
@media (min-width: 1024px) { .section { padding: var(--s12) 0; } }
.section-alt { background: var(--surface); }
.section:not(.section-alt) + .section-alt { border-top: 1px solid var(--line); }

/* every section head hangs from a hairline rule: index, ruler, title, serif deck */
.sec-head {
  margin-bottom: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-strong);
}
.sec-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--s3);
  color: var(--muted);
}
.sec-index .num { color: var(--accent-ink); }
.sec-index .ruler {
  flex: 0 1 96px;
  height: 8px;
  background-image:
    repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px 40px);
  background-size: 100% 4px, 100% 8px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
  opacity: 0.8;
}
.sec-head h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.sub {
  margin-top: var(--s2);
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.45;
  max-width: 52ch;
  text-wrap: pretty;
}
@media (min-width: 720px) { .sub { font-size: 1.25rem; } }

/* ---------- 10. product cards (portfolio plates) ---------- */
.cards {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.section-alt .card { background: var(--bg); }

.card.product { position: relative; overflow: hidden; }
/* a faint wash of the product's hue in the top-right corner */
.card.product::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 42% at 100% 0%, var(--h-soft) 0%, transparent 72%);
  opacity: 0.9;
}
.card.product > * { position: relative; }
.card.product:hover {
  transform: translateY(-2px);
  border-color: var(--h);
  box-shadow: var(--shadow-2);
}
.card.product:focus-within { border-color: var(--accent); }

.plate {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: var(--s3) var(--s3) 0;
}
.plate .idx,
.card-more .idx {
  font-size: clamp(4rem, 3rem + 3vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  font-weight: 700;
  color: var(--h);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.plate .sector { padding-top: 6px; color: var(--muted); text-align: right; }

.card-body { padding: var(--s4) var(--s3) var(--s1); }
.card-body.is-last { padding-bottom: var(--s3); }
.card-name {
  margin-top: 12px;
  font-size: 1.625rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.card-tagline {
  margin-top: var(--s1);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.card-summary { margin-top: 12px; color: var(--muted); font-size: 1rem; text-wrap: pretty; }
.card-foot {
  margin: auto var(--s3) 0;
  padding: var(--s2) 0 var(--s3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.card-foot .note { font-weight: 600; }
.card-foot .stores {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.card-more {
  border: 1px dashed var(--line-strong);
  background-color: transparent;
  box-shadow: none;
  padding: var(--s3);
  justify-content: space-between;
  gap: var(--s5);
  min-height: 240px;
  background-image: radial-gradient(circle, var(--grid-dot-soft) 1px, transparent 1.4px);
  background-size: 8px 8px;
  background-position: 4px 4px;
}
.card-more .idx { color: var(--line-strong); }
.card-more .more-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--ink);
}
.card-more .more-sub { margin-top: var(--s1); color: var(--muted); font-size: 1rem; text-wrap: pretty; }

/* the no-script product list: lives OUTSIDE the grid and gets no display override */
.plain-list { list-style: none; display: grid; gap: var(--s2); }
.plain-list li {
  padding: var(--s2) var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------- 11. principles (hairline grid) ---------- */
.tiles {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile {
  background: var(--bg);
  padding: var(--s3);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 0.15s ease;
}
.section-alt .tile { background: var(--surface); }
.tile:hover { background: var(--surface-2); }
.tile-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.tile svg { width: 28px; height: 28px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile h3 { font-size: 1.125rem; letter-spacing: -0.015em; margin-top: var(--s1); }
.tile p { color: var(--muted); font-size: 1rem; text-wrap: pretty; }

/* ---------- 12. two-column blocks ---------- */
.two {
  display: grid;
  gap: var(--s5);
  align-items: start;
}
@media (min-width: 860px) {
  .two { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s8); }
}
.two .sec-head { margin-bottom: 0; }
.two .prose { margin-top: var(--s3); }

/* ---------- 13. register (definition list) ---------- */
.register-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.section-alt .register-box { background: var(--bg); }
.register-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-weight: 650;
  font-size: 0.9375rem;
}
.register-title .mono { color: var(--muted); }
.register {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
}
.register dt,
.register dd {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.register dt:first-of-type,
.register dd:first-of-type { border-top: 0; }
.register dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 15px;
}
.register dd { overflow-wrap: anywhere; }

/* ---------- 14. prose ---------- */
.prose { max-width: 66ch; }
.prose p, .prose li { text-wrap: pretty; }
.prose h2 {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  margin-top: var(--s6);
  margin-bottom: var(--s2);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 .num { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--accent-ink); font-weight: 500; flex: none; }
.prose h3 { font-size: 1.125rem; margin-top: var(--s4); margin-bottom: var(--s1); }
.prose ul { padding-left: 1.2em; margin-top: var(--s2); }
.prose li + li { margin-top: var(--s1); }
.prose strong { font-weight: 650; }

.principle-list { list-style: none; padding: 0; margin-top: var(--s3); display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.principle-list li { margin: 0; background: var(--bg); padding: var(--s2) var(--s3); display: grid; grid-template-columns: max-content 1fr; gap: var(--s2); }
.principle-list .num { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--accent-ink); padding-top: 4px; }
.principle-list strong { display: block; margin-bottom: 2px; }
.principle-list span.text { color: var(--muted); }

/* ---------- 15. inner pages ---------- */
.page-head { padding: var(--s6) 0 var(--s5); border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .page-head { padding: var(--s10) 0 var(--s8); } }
.page-head h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.page-body { padding: var(--s6) 0 var(--s10); }
@media (min-width: 720px) { .page-body { padding: var(--s8) 0 var(--s12); } }

.page-grid {
  display: grid;
  gap: var(--s5);
  align-items: start;
}
@media (min-width: 900px) {
  .page-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s8); }
}
.aside { display: grid; gap: var(--s3); }
/* the aside only sticks when the viewport is tall enough to show all of it */
@media (min-width: 900px) and (min-height: 700px) {
  .aside { position: sticky; top: 88px; }
}

.meta { color: var(--muted); margin-top: var(--s2); display: inline-flex; align-items: center; gap: 10px; }
.meta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

address { font-style: normal; }
mark.ph {
  background: var(--ph);
  color: var(--ph-ink);
  padding: 0 0.35em;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.875em;
}

/* contact cards: one column on phones, two on small tablets, three from 800px */
.contact-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
@media (min-width: 800px) {
  .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.contact-card { padding: var(--s3); gap: var(--s2); }
.contact-card h2 { font-size: 1.25rem; letter-spacing: -0.02em; }
.contact-card .plate-line { display: flex; align-items: center; justify-content: space-between; color: var(--muted); margin-bottom: var(--s1); }
.contact-card p, .contact-card address { overflow-wrap: anywhere; }
.contact-card .big { font-size: 1rem; font-weight: 600; }
@media (min-width: 1024px) { .contact-card .big { font-size: 1.125rem; } }
.contact-card .note { color: var(--muted); font-size: 1rem; }
.contact-card .foot-note { margin-top: auto; padding-top: var(--s2); color: var(--muted); font-size: 0.9375rem; }

/* ---------- 16. home: contact strip ---------- */
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.section-alt .strip { background: var(--bg); }
.strip .text { max-width: 60ch; }
.strip h2 { font-size: 1.5rem; letter-spacing: -0.025em; }
.strip p { color: var(--muted); margin-top: var(--s1); }
.strip .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 17. footer ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding: var(--s6) 0 var(--s8);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.875rem;
}
.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.foot-nav a { color: var(--ink); text-decoration: none; font-weight: 500; padding: 4px 0; border-bottom: 2px solid transparent; }
.foot-nav a:hover { border-bottom-color: var(--accent); }
.legal { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); color: var(--ink); }
.marks { margin-top: var(--s2); max-width: 96ch; font-size: 0.875rem; line-height: 1.6; display: grid; gap: 4px; }
.marks li { list-style: none; }

/* ---------- 18. motion, high contrast, print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card.product:hover, .btn:hover, .hero-status:hover { transform: none; }
  .hero-status:hover .arrow { transform: none; }
}

@media (forced-colors: active) {
  .chip, .btn, .card, .menu, .register-box, .tile, .hero-status, .strip, .plain-list li, .principle-list li { border: 1px solid CanvasText; }
  .dot { background: CanvasText; box-shadow: none; }
  .dot-dev, .chip-dev .dot { background: transparent; box-shadow: inset 0 0 0 2px CanvasText; }
  .menu-leader { border-bottom-color: CanvasText; }
  .card.product::before { display: none; }
}

@media print {
  .site-head .nav, .menu, .cta, .skip, .strip .actions, .hero-status { display: none !important; }
  .site-head { position: static; }
  body { background: #fff; color: #000; }
}