/* ==========================================================================
   DeskLane Studio — Final · "Modern studio / quiet-technical"
   Single stylesheet. No build step, no framework, no external request.
   Typeface is self-hosted (Instrument Sans, SIL OFL — see assets/fonts/OFL.txt).
   Dark and light are drawn as two separate rooms, not one inverted.
   ========================================================================== */

/* --- 0. Typeface --------------------------------------------------------- */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  color-scheme: dark light;

  /* Dark — the primary room. Cool near-monochrome, one signal colour. */
  --bg:          #0a0c10;
  --bg-deep:     #07080b;
  --surface:     #10141a;
  --surface-2:   #161b22;
  --surface-3:   #1d232c;

  --ink:         #eceff4;   /* on --bg: 16.2:1 */
  --ink-soft:    #aab4c0;   /*           8.3:1 */
  --ink-faint:   #828c99;   /*           5.3:1 */

  --line:        #212831;
  --line-strong: #333c48;
  --line-hair:   #171c23;

  --accent:      #7fc9c4;   /* Petrol aufgehellt, auf --bg: 10.4:1 */
  --accent-2:    #a8deda;
  --accent-ink:  #06201f;   /* Text auf Petrol-Flaechen */
  --accent-dim:  rgba(127, 201, 196, .12);
  --accent-line: rgba(127, 201, 196, .32);

  --glow:        radial-gradient(58% 52% at 72% 8%, rgba(127,201,196,.11), transparent 72%);
  --plate:       linear-gradient(162deg, #1b212a 0%, #0f1319 64%);
  --sheen:       linear-gradient(200deg, rgba(255,255,255,.055), rgba(255,255,255,0) 46%);

  /* Depth: contact shadow + ambient cast, never a flat halo. */
  --lift-1: 0 1px 1px rgba(0,0,0,.34), 0 6px 16px -8px rgba(0,0,0,.55);
  --lift-2: 0 2px 3px rgba(0,0,0,.36), 0 18px 44px -20px rgba(0,0,0,.66);
  --lift-3: 0 4px 6px rgba(0,0,0,.38), 0 38px 84px -30px rgba(0,0,0,.78);

  /* Type */
  --font-sans: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --step--1: clamp(.8125rem, .80rem + .08vw, .875rem);
  --step-0:  clamp(1rem,     .975rem + .12vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.06rem + .30vw, 1.3125rem);
  --step-2:  clamp(1.3125rem, 1.19rem + .58vw, 1.6875rem);
  --step-3:  clamp(1.8125rem, 1.49rem + 1.42vw, 2.75rem);
  --step-4:  clamp(2.3rem,   1.70rem + 2.65vw, 3.9rem);
  --step-5:  clamp(2.7rem,   1.68rem + 4.5vw,  4.9rem);

  /* Spacing scale — 4px base, used everywhere for vertical rhythm */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --sec:       clamp(4.25rem, 9.5vw, 8rem);   /* section rhythm */
  --sec-tight: clamp(3rem, 6vw, 5rem);

  --maxw:       1180px;
  --maxw-prose: 66ch;

  --radius:    4px;
  --radius-lg: 7px;

  --ease:     cubic-bezier(.22, .61, .36, 1);   /* exponential-ish ease-out */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* the authored entrance */
}

@media (prefers-color-scheme: light) {
  :root {
    /* Light — its own room: cool paper, near-black ink, denser rules,
       shadows that read as paper on paper rather than dimmed dark values. */
    --bg:          #f6efe4;   /* Sand */
    --bg-deep:     #efe6d8;
    --surface:     #ffffff;
    --surface-2:   #fbf6ef;
    --surface-3:   #f1e9dc;

    --ink:         #1f2a2e;   /* Tinte, auf --bg: 13.1:1 */
    --ink-soft:    #4a5459;   /*           7.9:1 */
    --ink-faint:   #5e666b;   /* auf Sand: 5.1:1 */

    --line:        #e2d8c8;
    --line-strong: #cfc2ad;
    --line-hair:   #ebe2d5;

    --accent:      #2e6e6e;   /* Petrol, auf --bg: 5.4:1 */
    --accent-2:    #1f5151;
    --accent-ink:  #ffffff;
    --accent-dim:  rgba(46, 110, 110, .075);
    --accent-line: rgba(46, 110, 110, .28);

    --glow:        radial-gradient(58% 52% at 72% 8%, rgba(46,110,110,.06), transparent 72%);
    --plate:       linear-gradient(162deg, #fffdf9 0%, #efe6d8 70%);
    --sheen:       linear-gradient(200deg, rgba(255,255,255,.7), rgba(255,255,255,0) 44%);

    --lift-1: 0 1px 1px rgba(16,20,28,.05), 0 5px 14px -8px rgba(16,20,28,.16);
    --lift-2: 0 1px 2px rgba(16,20,28,.06), 0 16px 38px -20px rgba(16,20,28,.24);
    --lift-3: 0 2px 4px rgba(16,20,28,.07), 0 34px 72px -32px rgba(16,20,28,.32);
  }
}

/* --- 2. Base ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;

  /* Browser surfaces belong to the design, not to the browser. */
  accent-color: var(--accent);
  caret-color: var(--accent);
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg-deep);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The visible structure: two hairlines marking the measure of the whole site. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  margin-inline: auto;
  max-width: var(--maxw);
  border-inline: 1px solid var(--line-hair);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1259px) { body::before { display: none; } }

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.026em;
  margin: 0 0 var(--s4);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -.034em; }
h2 { font-size: var(--step-3); letter-spacing: -.03em; }
h3 { font-size: var(--step-2); letter-spacing: -.02em; line-height: 1.21; }
h4 { font-size: var(--step-1); letter-spacing: -.014em; line-height: 1.32; }

p { margin: 0 0 var(--s4); max-width: 70ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-skip-ink: auto;
  transition: color .15s var(--ease);
}
a:hover { color: var(--accent-2); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
/* A second, background-coloured ring so focus survives on accent fills. */
.btn:focus-visible, .site-nav a:focus-visible, .skip-link:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--bg);
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }

::selection { background: var(--accent); color: var(--accent-ink); text-shadow: none; }

/* --- 3. Layout ----------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
  position: relative;
  z-index: 2;
}
@media (min-width: 720px)  { .container { padding-inline: 40px; } }
@media (min-width: 1000px) { .container { padding-inline: 56px; } }

.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: var(--sec-tight); }
.section--rule { border-top: 1px solid var(--line); }
.section--tint { background: var(--surface); border-block: 1px solid var(--line); }

.prose { max-width: var(--maxw-prose); }
.prose > h2 { margin-top: 2.5em; font-size: var(--step-2); }
.prose > h2:first-of-type { margin-top: 1.5em; }
.prose > h3 { margin-top: 2em; font-size: var(--step-1); }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 var(--s5); }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--accent); }

.center { text-align: center; }

/* The one small-label style on the site. Grotesk, tracked, with a raster tick
   — not a monospace costume and not an eyebrow above a heading. */
.label,
.head__idx,
.crumbs,
.hero__meta,
.spec__k,
.plate__tag,
.row__tag,
.site-footer h2,
.btn--bare,
.site-nav a:not(.btn),
.nav-toggle {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .085em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Section head: label left, statement centre, context right — the visible raster. */
.head {
  display: grid;
  gap: var(--s4) var(--s6);
  align-items: start;
  padding-bottom: var(--s6);
  margin-bottom: var(--s7);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) {
  .head { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 19rem); gap: var(--s6) var(--s7); }
  .head__aside { grid-column: 3; grid-row: 1 / span 2; padding-top: .5rem; }
}
.head__idx {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .7rem;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: .5rem 0 0;
}
.head__idx::before {
  content: "";
  flex: 0 0 1.35rem;
  height: 1px;
  background: var(--accent);
}
.head h1, .head h2 { margin: 0; max-width: 20ch; }
.head__aside p { color: var(--ink-soft); font-size: var(--step-0); margin: 0; max-width: 42ch; }

.lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; max-width: 62ch; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: .8rem 1.2rem; font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--accent-ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 4. Buttons / links -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: .8rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: -.004em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease), box-shadow .16s var(--ease),
              transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--lift-1); }
.btn--primary:hover { background: var(--accent-2); color: var(--accent-ink); box-shadow: var(--lift-2); }
@media (prefers-color-scheme: light) {
  .btn--primary:hover { color: var(--accent-ink); }
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.btn--bare {
  min-height: 0; padding: 0; border: 0; background: none;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
}
.btn--bare::after {
  content: "";
  width: .82em; height: .82em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-.05em, .05em);
  transition: transform .18s var(--ease);
}
.btn--bare:hover::after { transform: rotate(45deg) translate(.13em, -.13em); }
.btn--bare:active { transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* --- 5. Header ----------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand img {
  /* Das Markenzeichen ist ein freigestelltes rundes Rondell (E16, 21.09.2026).
     Kein Rahmen und keine Ecken-Rundung: beides stammte vom alten Kachel-Logo
     und haette um ein transparentes Quadrat gelegen. */
  /* 44px statt der 30px des alten Kachel-Logos: das Rondell ist filigran,
     darunter verliert das Monogramm seine Lesbarkeit. */
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
}
.brand__name {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.018em;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .45rem .85rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: .7rem;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 16px; height: 1px; background: currentColor; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: currentColor;
  transition: transform .2s var(--ease);
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after  { top:  5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5px) rotate(-45deg); }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav a:not(.btn) {
  display: block;
  padding: .85rem 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .72rem;
  border-bottom: 1px solid var(--line-hair);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.site-nav a:not(.btn):hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav a.btn { border-bottom: 0; }
.site-nav a.btn--primary, .site-nav a.btn--primary:hover { color: var(--accent-ink); }

/* Sprachumschalter: ein abgesetztes Segment-Paar mit Rahmen, damit es sich
   deutlich vom uebrigen Menue abhebt. Aktive Sprache gefuellt, andere als Link. */
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap;
  /* folgt Hell/Dunkel, aber kraeftig genug, dass der Rahmen sichtbar traegt */
  border: 1px solid color-mix(in srgb, var(--ink-faint) 88%, transparent);
  border-radius: 999px;
  padding: 2px;
  background: var(--surface-2);
}
.lang-switch__item {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .3rem .62rem;
  line-height: 1;
  border-radius: 999px;
}
.lang-switch__sep { display: none; }
.site-nav .lang-switch a.lang-switch__item {
  display: inline-block;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 0;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.site-nav .lang-switch a.lang-switch__item:hover {
  color: var(--ink);
  background: var(--surface-3);
  border-bottom: 0;
}
.lang-switch__item[aria-current="true"] {
  color: var(--accent-ink);
  background: var(--accent);
}

@media (max-width: 899px) {
  .site-nav { display: none; padding-bottom: var(--s5); border-top: 1px solid var(--line); }
  .site-nav.is-open { display: block; }
  .site-nav .btn { width: 100%; margin-top: var(--s4); }
  .site-nav .lang-switch { align-self: flex-start; margin: .85rem 0; }
}
@media (min-width: 900px) {
  .site-header .container {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
  }
  .site-header__inner { flex: 0 0 auto; }
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
  .site-nav ul { flex-direction: row; align-items: center; gap: var(--s5); }
  .site-nav a:not(.btn) { padding: .4rem 0; border-bottom: 1px solid transparent; }
  .site-nav a:not(.btn):hover { border-bottom-color: var(--accent); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--accent-line); }
  .site-nav .btn { margin-left: var(--s2); min-height: 40px; padding: .5rem 1.05rem; }
}

/* --- 6. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--glow);
  pointer-events: none;
}
/* Fine technical texture: a 44px grid, almost invisible, fading downward. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-hair) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 76%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 76%);
  pointer-events: none;
}

.hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.18fr .82fr; } }

.hero h1 {
  font-size: var(--step-5);
  line-height: 1.01;
  letter-spacing: -.04em;
  margin: 0 0 var(--s5);
  max-width: 16ch;
}
.hero h1 .dim { color: var(--ink-faint); }
.hero__sub { font-size: var(--step-1); color: var(--ink-soft); max-width: 46ch; line-height: 1.52; }
.hero .btn-row { margin-top: var(--s6); }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  margin: var(--s6) 0 0; padding: 0; list-style: none;
  font-size: .68rem;
  color: var(--ink-faint);
}
.hero__meta li { display: flex; align-items: center; gap: 1.1rem; }
.hero__meta li + li::before { content: ""; width: 1px; height: 10px; background: var(--line-strong); }

/* Stacked, perspectival product plates instead of one flat screenshot. */
.stackart {
  position: relative;
  aspect-ratio: 1 / .94;
  perspective: 1500px;
}
.stackart__plate {
  position: absolute;
  margin: 0;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--lift-2);
  transform-style: preserve-3d;
}
/* A single light source, so the stack reads as objects and not as layers. */
.stackart__plate::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--sheen);
  pointer-events: none;
}
.stackart__plate img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.stackart__plate--a { /* back left: bookkeeping */
  left: 0; top: 6%; width: 44%; aspect-ratio: 636 / 900;
  transform: rotateY(9deg) rotateX(2deg) rotateZ(-2.5deg);
  filter: saturate(.82) brightness(.94);
}
.stackart__plate--b { /* back right: invoice */
  right: 1%; top: 0; width: 42%; aspect-ratio: 636 / 900;
  transform: rotateY(-10deg) rotateX(2deg) rotateZ(2deg);
  filter: saturate(.82) brightness(.94);
}
.stackart__plate--c { /* front: the kit */
  left: 14%; bottom: 0; width: 72%; aspect-ratio: 1 / 1;
  transform: rotateX(4deg);
  box-shadow: var(--lift-3);
}
.stackart__tag {
  position: absolute;
  right: 0; top: 46%;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  writing-mode: vertical-rl;
  padding-left: .65rem;
  border-left: 1px solid var(--line);
}
@media (max-width: 599px) {
  .stackart { aspect-ratio: 1 / .86; }
  .stackart__tag { display: none; }
}

/* --- 7. Spec strip ------------------------------------------------------- */

.spec { border-bottom: 1px solid var(--line); background: var(--surface); }
.spec ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
}
@media (min-width: 900px) { .spec ul { grid-template-columns: repeat(4, 1fr); } }
.spec li {
  padding: var(--s5) var(--s4) var(--s5) 0;
  border-right: 1px solid var(--line-hair);
  border-bottom: 1px solid var(--line-hair);
}
.spec li:nth-child(2n) { padding-left: var(--s4); border-right: 0; }
@media (min-width: 900px) {
  .spec li { border-bottom: 0; padding-left: var(--s5); }
  .spec li:first-child { padding-left: 0; }
  .spec li:nth-child(2n) { border-right: 1px solid var(--line-hair); }
  .spec li:last-child { border-right: 0; }
}
.spec__k {
  display: block;
  font-size: .66rem;
  color: var(--accent);
  margin-bottom: .5rem;
}
.spec__v { display: block; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.45; }

/* --- 8. Plate grid (featured work) --------------------------------------- */

.plates {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 760px) { .plates { grid-template-columns: repeat(2, 1fr); } }

.plate {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: var(--s5);
  transition: background-color .22s var(--ease);
  min-width: 0;
}
.plate:hover { background: var(--surface); }
@media (min-width: 760px) {
  .plate { padding: var(--s6); }
  .plate--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--s7); }
  .plate--wide .plate__fig { flex: 0 0 46%; margin-bottom: 0; }
  .plate--wide .plate__body { flex: 1; }
  .plate--wide h3 { font-size: var(--step-3); letter-spacing: -.03em; }
  .plate--wide .plate__text { font-size: var(--step-1); max-width: 40ch; }
}

.plate__fig {
  position: relative;
  margin: 0 0 var(--s5);
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: grid;
  place-items: end center;
  padding: var(--s5) var(--s5) 0;
}
.plate__fig img {
  width: min(58%, 210px);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  box-shadow: var(--lift-2);
  transform: translateY(0) rotate(-1.2deg);
  transform-origin: bottom center;
  transition: transform .34s var(--ease), box-shadow .34s var(--ease);
  aspect-ratio: 636 / 900;
  object-fit: cover;
  object-position: top center;
}
.plate:hover .plate__fig img { transform: translateY(-7px) rotate(-1.2deg); box-shadow: var(--lift-3); }
.plate--wide .plate__fig { aspect-ratio: 5 / 4; }
.plate--wide .plate__fig img { width: min(62%, 300px); }

.plate__tag {
  position: absolute; right: var(--s4); top: var(--s4);
  font-size: .62rem;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: .22rem .6rem;
  background: var(--accent-dim);
}
@supports (backdrop-filter: blur(4px)) {
  .plate__tag { backdrop-filter: blur(6px); }
}
.plate__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.plate h3 { font-size: var(--step-2); margin-bottom: var(--s3); }
.plate__text { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; max-width: 46ch; }
.plate__foot { margin-top: auto; padding-top: var(--s5); }

/* --- 9. Catalogue rows (products page) ----------------------------------- */

.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  gap: var(--s4) var(--s6);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 860px) {
  .row {
    grid-template-columns: 13rem minmax(0, 1fr) 11rem;
    align-items: center;
    gap: var(--s7);
  }
}
.row__fig {
  margin: 0;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: end center;
  padding: .9rem .9rem 0;
  max-width: 280px;
}
.row__fig img {
  width: min(62%, 120px);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  aspect-ratio: 636 / 900;
  object-fit: cover;
  object-position: top center;
  box-shadow: var(--lift-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.row:hover .row__fig img { transform: translateY(-5px); box-shadow: var(--lift-2); }
/* Products without artwork get a typographic plate, not an empty box. */
.row__fig--type {
  place-items: center;
  padding: .9rem;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}
.row__body { min-width: 0; }
.row__body h3 { font-size: var(--step-2); margin-bottom: var(--s2); }
.row__body p { color: var(--ink-soft); font-size: var(--step--1); margin: 0; max-width: 54ch; }
.row__tag {
  display: inline-block;
  font-size: .62rem;
  color: var(--accent);
  margin-bottom: .5rem;
}
.row__act { justify-self: start; }
@media (min-width: 860px) { .row__act { justify-self: end; } }

/* --- 10. Steps ----------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.steps > li {
  display: grid;
  gap: var(--s3) var(--s6);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) {
  .steps > li { grid-template-columns: 8.5rem minmax(0, 18rem) minmax(0, 1fr); align-items: baseline; gap: var(--s7); }
}
/* A real sequence, so the numeral earns its place — set in the data face. */
.steps__num {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  letter-spacing: .02em;
}
.steps h3 { margin: 0; font-size: var(--step-2); }
.steps p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); max-width: 52ch; }

/* --- 11. Panel / freebie ------------------------------------------------- */

.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--lift-1);
}
/* Corner marks instead of a coloured bar. */
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--accent);
  pointer-events: none;
}
.panel::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.panel::after  { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

.panel__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .panel__grid { grid-template-columns: 1.1fr .9fr; } }

/* Sample page and contents sit side by side, so the panel fills evenly
   instead of leaving a void beside the form. */
@media (min-width: 560px) {
  .freebie__col {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: var(--s6);
    align-items: start;
  }
  .freebie__col .freebie__fig { margin-bottom: 0; }
  .freebie__col .checklist { margin-bottom: 0; }
  .freebie__col .fineprint { grid-column: 1 / -1; margin-top: var(--s5); }
}

.freebie__fig {
  margin: 0 0 var(--s5);
  max-width: 200px;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem .9rem 0;
}
.freebie__fig img {
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  box-shadow: var(--lift-1);
}

.checklist { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.checklist li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .6rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

.embed-slot {
  border: 1px dashed var(--accent-line);
  background: var(--accent-dim);
  border-radius: var(--radius);
  padding: var(--s5);
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.embed-slot strong { color: var(--ink); }

.fineprint { font-size: .8125rem; color: var(--ink-faint); line-height: 1.55; margin-top: var(--s4); max-width: 62ch; }

/* --- 12. Q&A ------------------------------------------------------------- */

.qa { border-top: 1px solid var(--line); }
.qa > div {
  display: grid;
  gap: var(--s2) var(--s6);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s5);
}
@media (min-width: 800px) { .qa > div { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--s7); } }
.qa h3 { font-size: var(--step-1); margin: 0; letter-spacing: -.016em; }
.qa p { color: var(--ink-soft); margin: 0; font-size: var(--step--1); max-width: 58ch; }

/* --- 13. Legal pages ----------------------------------------------------- */

.legal-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 3vw, 2rem);
  margin-bottom: var(--s6);
}
.legal-block h3 { margin-top: 1.8em; font-size: var(--step-1); }
.legal-block h3:first-of-type { margin-top: 0; }
.legal-block address { font-style: normal; color: var(--ink-soft); }
.legal-block p, .legal-block li { color: var(--ink-soft); }

.todo {
  display: block;
  position: relative;
  background: var(--surface-2);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
  font-size: var(--step--1);
  line-height: 1.55;
}
/* Corner tick rather than a coloured bar down the side. */
.todo::before {
  content: "";
  position: absolute; left: -1px; top: -1px;
  width: 12px; height: 12px;
  border-left: 1px solid var(--accent);
  border-top: 1px solid var(--accent);
}
.todo strong { color: var(--ink); letter-spacing: .02em; }

mark.ph {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 500;
  padding: 0 .3em;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .88em;
}

/* --- 14. Contact --------------------------------------------------------- */

.contact-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 800px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-card {
  background: var(--bg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  transition: background-color .22s var(--ease);
}
.contact-card:hover { background: var(--surface); }
.contact-card h2 { font-size: var(--step-2); margin-bottom: var(--s4); }
.contact-card p { color: var(--ink-soft); font-size: var(--step--1); }
.contact-card__mail {
  font-size: var(--step-2);
  letter-spacing: -.024em;
  word-break: break-word;
  margin-bottom: var(--s4);
}
.contact-card__mail a { text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.contact-card__mail a:hover { border-bottom-color: var(--accent); }
.contact-card .btn-row { margin-top: auto; padding-top: var(--s5); }

/* --- 15. Breadcrumb ------------------------------------------------------ */

.crumbs {
  font-size: .68rem;
  color: var(--ink-faint);
  margin-bottom: var(--s6);
}
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-hidden] { padding: 0 .5rem; color: var(--line-strong); }

/* --- 16. Closing CTA ----------------------------------------------------- */

.cta {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--sec);
  overflow: clip;
}
.cta::before { content: ""; position: absolute; inset: 0; background: var(--glow); pointer-events: none; }
.cta h2 { font-size: var(--step-4); max-width: 17ch; letter-spacing: -.036em; }
.cta__grid { display: grid; gap: var(--s6); align-items: end; }
@media (min-width: 860px) { .cta__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); } }

/* --- 17. Footer ---------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  padding-block: var(--s8) var(--s6);
  font-size: var(--step--1);
}
.site-footer__grid { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr; gap: var(--s7); } }
.site-footer h2 {
  font-size: .66rem;
  font-weight: 500;
  color: var(--ink-faint);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  letter-spacing: .14em;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer p { color: var(--ink-faint); }
.site-footer__bottom {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: .78rem;
  max-width: none;
}

/* --- 18. 404 ------------------------------------------------------------- */

.notfound { padding-block: clamp(4rem, 13vw, 9rem); }
.notfound__code {
  font-family: var(--font-mono);
  font-size: clamp(4.5rem, 18vw, 9.5rem);
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--accent);
  margin: 0 0 var(--s5);
  font-variant-numeric: tabular-nums;
}

/* --- 19. Motion ---------------------------------------------------------- */

/* One authored moment: the hero settles once on load, staged left to right.
   Sections below get a quiet lift, not a repeat of the same entrance. */
.js .hero__grid > *:first-child { animation: settle .9s var(--ease-out) both; }
.js .stackart__plate--a { animation: dealLeft 1.05s var(--ease-out) .18s both; }
.js .stackart__plate--b { animation: dealRight 1.05s var(--ease-out) .26s both; }
.js .stackart__plate--c { animation: dealFront 1.15s var(--ease-out) .34s both; }

@keyframes settle {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes dealLeft {
  from { opacity: 0; transform: rotateY(9deg) rotateX(2deg) rotateZ(-2.5deg) translate3d(-18px, 22px, 0); }
  to   { opacity: 1; transform: rotateY(9deg) rotateX(2deg) rotateZ(-2.5deg); }
}
@keyframes dealRight {
  from { opacity: 0; transform: rotateY(-10deg) rotateX(2deg) rotateZ(2deg) translate3d(18px, 22px, 0); }
  to   { opacity: 1; transform: rotateY(-10deg) rotateX(2deg) rotateZ(2deg); }
}
@keyframes dealFront {
  from { opacity: 0; transform: rotateX(4deg) translate3d(0, 34px, 0) scale(.97); }
  to   { opacity: 1; transform: rotateX(4deg); }
}

/* Hidden only once JS has taken over, so the page is complete without it. */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* Rows and plates arrive in sequence rather than as one block. */
.js .reveal.is-in > * { animation: fadeUp .5s var(--ease-out) both; }
.js .reveal.is-in > *:nth-child(2) { animation-delay: .05s; }
.js .reveal.is-in > *:nth-child(3) { animation-delay: .1s; }
.js .reveal.is-in > *:nth-child(4) { animation-delay: .15s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
  /* Plates keep their authored 3-D placement; only the entrance is dropped. */
  .js .hero__grid > *, .js .stackart__plate { animation: none !important; opacity: 1 !important; }
  .js .reveal.is-in > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* --- 20. Forced colours and high contrast -------------------------------- */

@media (forced-colors: active) {
  .btn { border-color: currentColor; }
  .head__idx::before, .panel::before, .panel::after, .todo::before { forced-color-adjust: none; }
}

/* --- 21. Print ----------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .btn, .embed-slot, .stackart { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}