/* ============================================================================
   Tapestry Labs — Ink & Vermilion
   One stylesheet: webfonts, design tokens, element defaults, component classes.

     <link rel="stylesheet" href="tapestry.css">

   Ink on paper, one vermilion mark, gold at the edge.
   ========================================================================= */

/* ==== 1. Webfonts ======================================================== */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&family=Noto+Serif+KR:wght@400;600&family=Noto+Serif+SC:wght@400;600&family=Noto+Serif+Devanagari:wght@400;600&family=Noto+Serif+Tibetan:wght@400;600&display=swap');

:root{
  /* The non-Latin serif tail, shared by display and text so scripts stay in voice. */
  --font-scripts:'Noto Serif JP','Noto Serif KR','Noto Serif SC','Noto Serif Devanagari','Noto Serif Tibetan';

  --font-display:'Marcellus','Noto Serif JP','Noto Serif KR','Noto Serif SC','Noto Serif Devanagari','Noto Serif Tibetan','Iowan Old Style',Georgia,serif;
  --font-text:'Spectral','Noto Serif JP','Noto Serif KR','Noto Serif SC','Noto Serif Devanagari','Noto Serif Tibetan','Iowan Old Style',Georgia,serif;
  --font-mono:'IBM Plex Mono','Noto Sans Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Legacy aliases — the system has no sans. Body copy is Spectral everywhere. */
  --font-serif:var(--font-text);
  --font-sans:var(--font-text);
}

/* ==== 2. Colour ========================================================== */
:root{
  /* ---- Sumi 墨 : ink ---- */
  --sumi-950:#0B0B0C;
  --sumi-900:#16171A;
  --sumi-800:#22242A;
  --sumi-700:#33363E;
  --sumi-600:#4A4E58;
  --sumi-500:#666B77;
  --sumi-400:#8B9099;
  --sumi-300:#B4B8BF;
  --sumi-200:#D7D9DD;
  --sumi-100:#E9EAEC;
  --sumi-50:#F4F4F5;

  /* ---- Paper 紙 : warm near-white ---- */
  --paper-0:#FFFFFF;
  --paper-50:#FDFCF9;
  --paper-100:#F9F7F1;
  --paper-200:#F2EEE4;
  --paper-300:#E6E0D2;
  --paper-400:#D3CBB8;

  /* ---- Shu 朱 : vermilion, the seal ---- */
  --shu-700:#7E2718;
  --shu-600:#9C3122;
  --shu-500:#B93E2B;
  --shu-400:#CC6551;
  --shu-200:#EBC4BA;
  --shu-100:#F6E2DC;
  --shu-50:#FBF1EE;

  /* ---- Kin 金 : gold leaf ---- */
  --kin-700:#8A6E2F;
  --kin-600:#A98A45;
  --kin-500:#C4A657;
  --kin-400:#D8C089;
  --kin-200:#EADFC0;
  --kin-100:#F3ECD9;
  --kin-50:#F9F5EA;

  /* ---- Ai 藍 : indigo, the support hue ---- */
  --ai-800:#152238;
  --ai-700:#1E3050;
  --ai-600:#2A4470;
  --ai-500:#3A5C8F;
  --ai-400:#6B87B0;
  --ai-200:#C6D2E2;
  --ai-100:#DFE6EF;
  --ai-50:#F0F3F8;

  /* ---- Semantic status — pigment-derived, never fluorescent ---- */
  --success-500:#3F6B4E;
  --success-50:#EDF3EE;
  --warning-500:var(--kin-700);
  --warning-50:var(--kin-50);
  --danger-500:var(--shu-600);
  --danger-50:var(--shu-50);
  --info-500:var(--ai-500);
  --info-50:var(--ai-50);

  /* ================= Semantic aliases ================= */
  /* Brand */
  --brand-ink:var(--sumi-950);
  --brand-seal:var(--shu-500);
  --brand-leaf:var(--kin-500);
  --brand-support:var(--ai-600);
  --brand-primary:var(--sumi-950);
  --brand-secondary:var(--shu-500);
  --brand-tertiary:var(--kin-500);

  /* Surfaces */
  --bg-canvas:var(--paper-100);
  --bg-surface:var(--paper-0);
  --bg-subtle:var(--paper-200);
  --bg-inverse:var(--sumi-950);
  --bg-inverse-deep:#000000;
  --bg-seal-wash:var(--shu-50);
  --bg-leaf-wash:var(--kin-50);

  /* Text */
  --text-strong:var(--sumi-950);
  --text-body:var(--sumi-700);
  --text-muted:var(--sumi-500);
  --text-faint:var(--sumi-400);
  --text-inverse:var(--paper-100);
  --text-inverse-muted:rgba(249,247,241,0.62);
  --text-seal:var(--shu-600);
  --text-leaf:var(--kin-700);
  --text-brand:var(--sumi-950);
  --text-on-brand:var(--paper-100);

  /* Rules & borders — hairlines carry the structure in this system */
  --border-subtle:var(--sumi-100);
  --border-default:var(--sumi-200);
  --border-strong:var(--sumi-400);
  --border-ink:var(--sumi-950);
  --border-leaf:var(--kin-400);
  --border-inverse:rgba(249,247,241,0.16);

  /* Interactive */
  --focus-ring:var(--shu-500);
  --link:var(--sumi-950);
  --link-hover:var(--shu-600);
  --link-underline:var(--kin-500);

  /* ---- Grounds. No decorative gradients: a ground is flat, or it is paper. ---- */
  --ground-ink:linear-gradient(180deg,#16171A 0%,#0B0B0C 100%);/* @kind other */
  --ground-paper:linear-gradient(180deg,var(--paper-50) 0%,var(--paper-200) 100%);
  --ground-seal:radial-gradient(46% 46% at 50% 50%,var(--shu-500) 0%,var(--shu-600) 100%);/* @kind other */
}

/* ==== 3. Typography ====================================================== */
:root{
  /* Sizes */
  --fs-display-2xl:6.5rem;   /* 104 — state title, one line only */
  --fs-display-xl:4.5rem;    /* 72  — deck title */
  --fs-display-lg:3.25rem;   /* 52  — section opener */
  --fs-h1:2.5rem;            /* 40 */
  --fs-h2:1.875rem;          /* 30 */
  --fs-h3:1.375rem;          /* 22 */
  --fs-h4:1.125rem;          /* 18 */
  --fs-body-lg:1.1875rem;    /* 19 — lead paragraph */
  --fs-body:1.0625rem;       /* 17 — serif body reads a size smaller than sans */
  --fs-body-sm:0.9375rem;    /* 15 */
  --fs-caption:0.8125rem;    /* 13 */
  --fs-mono-label:0.6875rem; /* 11 — eyebrow, protocol reference, folio */

  /* Weights — Marcellus has one; Spectral supplies the rest */
  --fw-extralight:200;/* @kind font */
  --fw-light:300;/* @kind font */
  --fw-regular:400;/* @kind font */
  --fw-medium:500;/* @kind font */
  --fw-semibold:600;/* @kind font */
  --fw-bold:600;/* @kind font */ /* the system does not use 700 */

  /* Line heights */
  --lh-display:1.06;/* @kind font */
  --lh-tight:1.1;/* @kind font */
  --lh-snug:1.25;/* @kind font */
  --lh-heading:1.3;/* @kind font */
  --lh-body:1.65;/* @kind font */
  --lh-relaxed:1.85;/* @kind font */ /* long-form treaty text */

  /* Letter spacing. Marcellus capitals need air; Spectral needs none. */
  --ls-display:0.005em;/* @kind font */
  --ls-caps:0.09em;/* @kind font */ /* display set in caps */
  --ls-eyebrow:0.26em;/* @kind font */ /* mono label, always uppercase */
  --ls-tight:-0.01em;/* @kind font */
  --ls-normal:0;/* @kind font */
  --ls-wide:0.05em;/* @kind font */

  /* Measure — long-form legibility caps line length */
  --measure-narrow:34ch;/* @kind other */
  --measure:62ch;/* @kind other */
  --measure-wide:76ch;/* @kind other */
}

/* ==== 4. Spacing & layout ================================================ */
:root{
  --sp-0:0;/* @kind spacing */
  --sp-1:0.25rem;   /* 4 */
  --sp-2:0.5rem;    /* 8 */
  --sp-3:0.75rem;   /* 12 */
  --sp-4:1rem;      /* 16 */
  --sp-5:1.5rem;    /* 24 */
  --sp-6:2rem;      /* 32 */
  --sp-7:2.5rem;    /* 40 */
  --sp-8:3rem;      /* 48 */
  --sp-9:4rem;      /* 64 */
  --sp-10:6rem;     /* 96 */
  --sp-11:8rem;     /* 128 */
  --sp-12:12rem;    /* 192 */

  /* Containers */
  --container-sm:600px;/* @kind other */
  --container-md:780px;/* @kind other */
  --container-lg:1080px;/* @kind other */
  --container-xl:1320px;/* @kind other */

  /* Semantic rhythm */
  --gutter:var(--sp-6);
  --section-y:var(--sp-10);
  --card-pad:var(--sp-6);
  --page-margin:var(--sp-9);

  /* Asymmetric composition. The system sets a 12-column field and places
     content off-centre by default: text begins at column 2 and ends at 8,
     leaving the right third open. These are the two offsets that produces. */
  --offset-indent:8.3333%;/* @kind other */
  --offset-open:33.3333%;/* @kind other */
}

/* ==== 5. Geometry, motif, motion ========================================= */
:root{
  /* Radii — deliberately zero. Only pills and photographic masks curve. */
  --radius-xs:0;
  --radius-sm:0;
  --radius-md:0;
  --radius-lg:0;
  --radius-xl:0;
  --radius-pill:999px;
  --radius-circle:50%;/* @kind other */

  /* Rule weights. The hairline is the system's structural element. */
  --border-hair:1px;
  --border-thick:2px;
  --rule-heavy:3px;/* @kind other */

  /* Elevation — restrained to the point of near-flatness */
  --shadow-xs:none;/* @kind other */
  --shadow-sm:0 1px 2px rgba(11,11,12,0.04);
  --shadow-md:0 1px 2px rgba(11,11,12,0.04),0 10px 24px rgba(11,11,12,0.045);
  --shadow-lg:0 2px 4px rgba(11,11,12,0.05),0 20px 48px rgba(11,11,12,0.07);
  --shadow-xl:0 40px 80px rgba(11,11,12,0.10);
  --shadow-sheet:0 1px 0 var(--paper-300),0 12px 32px rgba(11,11,12,0.05);
  --shadow-plate:0 40px 80px rgba(11,11,12,0.10);

  /* ---- The woven line motif ----
     Replaces the former gradient. Warp and weft as crossed hairlines: a lattice
     for large fields, a two-thread rule for dividers. Ink by default, leaf for
     ceremonial use, and a light cut for dark grounds. */
  --motif-weave:repeating-linear-gradient(45deg,var(--sumi-200) 0 1px,transparent 1px 8px),repeating-linear-gradient(-45deg,var(--sumi-200) 0 1px,transparent 1px 8px);/* @kind other */
  --motif-weave-leaf:repeating-linear-gradient(45deg,var(--kin-200) 0 1px,transparent 1px 8px),repeating-linear-gradient(-45deg,var(--kin-200) 0 1px,transparent 1px 8px);/* @kind other */
  --motif-weave-inverse:repeating-linear-gradient(45deg,rgba(249,247,241,0.13) 0 1px,transparent 1px 8px),repeating-linear-gradient(-45deg,rgba(249,247,241,0.13) 0 1px,transparent 1px 8px);/* @kind other */
  --motif-weave-size:8px 8px;/* @kind other */

  /* Warp: the vertical thread field, for margins and spine columns */
  --motif-warp:repeating-linear-gradient(90deg,var(--sumi-100) 0 1px,transparent 1px 6px);/* @kind other */
  /* Weft: the divider rule — a broken thread rather than a solid line */
  --motif-weft:repeating-linear-gradient(90deg,var(--sumi-900) 0 7px,transparent 7px 11px);/* @kind other */
  --motif-weft-leaf:repeating-linear-gradient(90deg,var(--kin-500) 0 7px,transparent 7px 11px);/* @kind other */
  --motif-weft-inverse:repeating-linear-gradient(90deg,var(--paper-100) 0 7px,transparent 7px 11px);/* @kind other */

  /* Focus — the seal, as a square ring. No glow. */
  --focus-ring-width:2px;/* @kind other */
  --focus-ring-color:var(--shu-500);
  --focus-ring-offset:3px;/* @kind other */

  /* Motion — slow, weightless, no bounce. A state paper does not spring. */
  --ease-standard:cubic-bezier(0.32,0.08,0.24,1);/* @kind other */
  --ease-out:cubic-bezier(0.16,1,0.3,1);/* @kind other */
  --dur-fast:140ms;/* @kind other */
  --dur-base:280ms;/* @kind other */
  --dur-slow:520ms;/* @kind other */
}

/* ==== 6. Element defaults ================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text-body);
  background:var(--bg-canvas);
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--text-strong);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);
  font-weight:var(--fw-regular);
  margin:0 0 0.6em;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0 0 1em;text-wrap:pretty;max-width:var(--measure)}
strong{font-weight:var(--fw-semibold);color:var(--text-strong)}
em{font-style:italic}
blockquote{margin:var(--sp-6) 0;padding-left:var(--sp-5);border-left:var(--border-hair) solid var(--border-leaf);font-size:var(--fs-body-lg);font-style:italic;color:var(--text-strong)}
a{color:var(--link);text-decoration:underline;text-decoration-color:var(--link-underline);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-standard),text-decoration-color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--link-hover);text-decoration-color:var(--shu-500)}
code,kbd,samp{font-family:var(--font-mono);font-size:0.88em}
hr{border:0;height:1px;background:var(--border-default);margin:var(--sp-7) 0}
table{border-collapse:collapse;font-size:var(--fs-body-sm)}
th{font-family:var(--font-mono);font-size:var(--fs-mono-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);font-weight:var(--fw-medium);text-align:left;padding:var(--sp-3) var(--sp-4);border-bottom:var(--border-hair) solid var(--border-ink)}
td{padding:var(--sp-3) var(--sp-4);border-bottom:var(--border-hair) solid var(--border-subtle);font-variant-numeric:tabular-nums}
::selection{background:var(--kin-200);color:var(--sumi-950)}
:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}

/* ---- Brand utilities ---- */
/* The mono eyebrow: protocol line, reference number, date, folio. */
.tap-eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-mono-label);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:var(--fw-medium);
}
/* Display set in Roman capitals — the ceremonial voice. */
.tap-caps{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:var(--ls-caps);
  font-weight:var(--fw-regular);
}
/* The woven lattice as a background field. */
.tap-weave-field{background-image:var(--motif-weave);background-size:var(--motif-weave-size)}
.tap-weave-field--leaf{background-image:var(--motif-weave-leaf)}
.tap-weave-field--inverse{background-image:var(--motif-weave-inverse)}
/* Asymmetric measure: content off-centre, right third left open. */
.tap-offset{margin-left:var(--offset-indent);max-width:calc(100% - var(--offset-open))}

/* ==== 7. Components ====================================================== */
/* ---- Button ---- */
.tap-btn{--_bg:var(--sumi-950);--_fg:var(--paper-100);--_bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--font-display);font-weight:var(--fw-regular);
  text-transform:uppercase;letter-spacing:var(--ls-caps);
  border:var(--border-hair) solid var(--_bd);border-radius:0;
  background:var(--_bg);color:var(--_fg);cursor:pointer;white-space:nowrap;
  text-decoration:none;line-height:1;
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);}
.tap-btn:hover{text-decoration:none}
.tap-btn:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}
.tap-btn[disabled]{opacity:.38;cursor:not-allowed}
.tap-btn--sm{font-size:var(--fs-caption);padding:.62em 1em}
.tap-btn--md{font-size:var(--fs-body-sm);padding:.82em 1.5em}
.tap-btn--lg{font-size:var(--fs-body);padding:.95em 2em}
.tap-btn--block{width:100%}
.tap-btn--primary{--_bg:var(--sumi-950);--_fg:var(--paper-100)}
.tap-btn--primary:hover{--_bg:var(--sumi-800)}
.tap-btn--seal{--_bg:var(--shu-500);--_fg:var(--paper-50)}
.tap-btn--seal:hover{--_bg:var(--shu-600)}
.tap-btn--secondary{--_bg:transparent;--_fg:var(--sumi-950);--_bd:var(--sumi-300)}
.tap-btn--secondary:hover{--_bd:var(--sumi-950);background:var(--paper-200)}
.tap-btn--leaf{--_bg:transparent;--_fg:var(--kin-700);--_bd:var(--kin-400)}
.tap-btn--leaf:hover{--_bd:var(--kin-600);background:var(--kin-50)}
.tap-btn--ghost{--_bg:transparent;--_fg:var(--text-body)}
.tap-btn--ghost:hover{--_fg:var(--sumi-950);background:var(--paper-200)}
.tap-btn--inverse{--_bg:var(--paper-100);--_fg:var(--sumi-950)}
.tap-btn--inverse:hover{--_bg:var(--paper-0)}
.tap-btn--inverse-outline{--_bg:transparent;--_fg:var(--paper-100);--_bd:rgba(249,247,241,0.34)}
.tap-btn--inverse-outline:hover{--_bd:var(--paper-100)}
.tap-btn__icon{display:inline-flex;align-items:center;font-size:1em}

/* ---- Tag ---- */
.tap-tag{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);
  font-size:var(--fs-mono-label);font-weight:var(--fw-medium);line-height:1;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  padding:.5em .7em .45em;border-radius:0;border:var(--border-hair) solid transparent;
  white-space:nowrap;background:transparent}
.tap-tag--pill{border-radius:var(--radius-pill);padding:.5em .85em .45em}
.tap-tag__dot{width:.45em;height:.45em;border-radius:50%;background:currentColor;flex:none}
.tap-tag--neutral{color:var(--sumi-600);border-color:var(--sumi-200)}
.tap-tag--seal{color:var(--shu-600);border-color:var(--shu-200)}
.tap-tag--leaf{color:var(--kin-700);border-color:var(--kin-400)}
.tap-tag--indigo{color:var(--ai-600);border-color:var(--ai-200)}
.tap-tag--success{color:var(--success-500);border-color:#C4D6C9}
.tap-tag--warning{color:var(--kin-700);border-color:var(--kin-200)}
.tap-tag--danger{color:var(--shu-600);border-color:var(--shu-200)}
.tap-tag--ink{color:var(--paper-100);background:var(--sumi-950);border-color:var(--sumi-950)}
.tap-tag--solid{color:var(--paper-50);background:var(--shu-500);border-color:var(--shu-500)}
.tap-tag--inverse{color:var(--text-inverse-muted);border-color:var(--border-inverse)}

/* ---- Card ---- */
.tap-card{position:relative;display:block;border-radius:0;
  background:var(--bg-surface);border:var(--border-hair) solid var(--border-default);
  padding:var(--card-pad);color:var(--text-body);text-decoration:none;
  transition:border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard);}
.tap-card--elevated{box-shadow:var(--shadow-sheet);border-color:var(--paper-300)}
.tap-card--subtle{background:var(--bg-subtle);border-color:var(--paper-300)}
.tap-card--open{background:transparent;border-color:transparent;border-top:var(--border-hair) solid var(--border-ink);padding-left:0;padding-right:0}
.tap-card--weave{background-color:var(--paper-50);background-image:var(--motif-weave);background-size:var(--motif-weave-size)}
.tap-card--inverse{background:var(--bg-inverse);border-color:var(--border-inverse);color:var(--text-inverse-muted)}
.tap-card--inverse :where(h1,h2,h3,h4,h5,h6){color:var(--text-inverse)}
.tap-card--interactive{cursor:pointer}
.tap-card--interactive:hover{border-color:var(--sumi-950)}
.tap-card--inverse.tap-card--interactive:hover{border-color:var(--kin-400)}
.tap-card__accent{position:absolute;inset:-1px -1px auto -1px;height:2px;background:var(--shu-500)}
.tap-card__accent--leaf{background:var(--kin-500)}
.tap-card__accent--ink{background:var(--sumi-950)}
.tap-card--accent{padding-top:calc(var(--card-pad) + 2px)}
.tap-card :where(p):last-child{margin-bottom:0}

/* ---- Callout ---- */
.tap-callout{font-family:var(--font-text);border-left:var(--border-thick) solid var(--sumi-300);
  padding:var(--sp-4) var(--sp-5);background:transparent;color:var(--text-body);
  line-height:var(--lh-body);border-radius:0}
.tap-callout__label{font-family:var(--font-mono);font-size:var(--fs-mono-label);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
  font-weight:var(--fw-medium);margin-bottom:.6em}
.tap-callout__body>:last-child{margin-bottom:0}
.tap-callout__body{max-width:var(--measure)}
.tap-callout--note{border-left-color:var(--ai-500);background:var(--ai-50)}
.tap-callout--note .tap-callout__label{color:var(--ai-700)}
.tap-callout--ceremonial{border-left-color:var(--kin-500);background:var(--kin-50)}
.tap-callout--ceremonial .tap-callout__label{color:var(--kin-700)}
.tap-callout--caution{border-left-color:var(--shu-500);background:var(--shu-50)}
.tap-callout--caution .tap-callout__label{color:var(--shu-600)}
.tap-callout--quiet{border-left-color:var(--sumi-200);background:transparent}
.tap-callout--inverse{border-left-color:var(--kin-500);background:rgba(249,247,241,0.04);color:var(--text-inverse-muted)}
.tap-callout--inverse .tap-callout__label{color:var(--kin-400)}

/* ---- Input ---- */
.tap-field{display:flex;flex-direction:column;gap:.5em;font-family:var(--font-text)}
.tap-field__label{font-family:var(--font-mono);font-size:var(--fs-mono-label);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:var(--fw-medium);
  color:var(--text-muted)}
.tap-field__req{color:var(--shu-500);margin-left:.35em}
.tap-field__hint{font-size:var(--fs-caption);color:var(--text-muted);font-style:italic}
.tap-field__err{font-size:var(--fs-caption);color:var(--shu-600)}
.tap-input{font-family:var(--font-text);font-size:var(--fs-body);color:var(--text-strong);
  background:transparent;border:0;border-bottom:var(--border-hair) solid var(--sumi-300);
  border-radius:0;padding:.5em 0;width:100%;line-height:1.5;
  transition:border-color var(--dur-base) var(--ease-standard)}
.tap-input::placeholder{color:var(--text-faint);font-style:italic}
.tap-input:hover{border-bottom-color:var(--sumi-500)}
.tap-input:focus{outline:none;border-bottom-color:var(--shu-500);border-bottom-width:var(--border-thick);padding-bottom:calc(.5em - 1px)}
.tap-input[disabled]{color:var(--text-faint);cursor:not-allowed;border-bottom-style:dashed}
.tap-input--boxed{border:var(--border-hair) solid var(--sumi-200);background:var(--paper-0);padding:.6em .8em}
.tap-input--boxed:focus{border-color:var(--shu-500);border-width:var(--border-hair);padding:.6em .8em;box-shadow:inset 0 0 0 1px var(--shu-500)}
.tap-input--invalid{border-color:var(--shu-500);border-bottom-color:var(--shu-500)}
.tap-input__wrap{position:relative;display:flex;align-items:center}
.tap-input__icon{position:absolute;left:0;color:var(--text-faint);display:inline-flex;pointer-events:none}
.tap-input__wrap--icon .tap-input{padding-left:2em}
.tap-input__wrap--icon.tap-input__wrap--boxed .tap-input{padding-left:2.6em}
.tap-input__wrap--boxed .tap-input__icon{left:.8em}

/* ---- Seal ---- */
.tap-seal{width:56px;height:56px;flex:none;aspect-ratio:1;display:inline-grid;place-items:center;background:var(--shu-500);color:var(--paper-50);border-radius:0;font-family:var(--font-display);font-size:28px;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.tap-seal--circle{border-radius:50%}
.tap-seal--ink{background:var(--sumi-950)}
.tap-seal--leaf{background:var(--kin-500);color:var(--sumi-950)}
.tap-seal--outline{background:transparent;color:var(--shu-500);border:2px solid var(--shu-500)}
.tap-seal--pressed{transform:rotate(-2deg)}
.tap-seal svg{display:block;flex:none;width:68%;height:68%}

/* ---- Mark & wordmark ---- */
.tap-lockup{display:inline-flex;align-items:center;gap:.5em}
.tap-lockup svg{display:block;flex:none}
.tap-wordmark{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:26px;letter-spacing:.2em;line-height:1;text-transform:uppercase;color:var(--sumi-950);padding-right:.2em}
.tap-wordmark--inverse{color:var(--paper-100)}

/* ---- Metric ---- */
.tap-metric__value{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--fs-display-lg);line-height:var(--lh-display);letter-spacing:var(--ls-tight);color:var(--text-strong);font-feature-settings:"lnum" 1,"tnum" 1}
.tap-metric__value--seal{color:var(--shu-500)}
.tap-metric__value--leaf{color:var(--kin-600)}
.tap-metric__value--indigo{color:var(--ai-600)}
.tap-metric__value--inverse{color:var(--text-inverse)}
.tap-metric__label{font-family:var(--font-mono);font-size:var(--fs-mono-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:var(--fw-medium);color:var(--text-muted);margin-top:var(--sp-4)}
.tap-metric__caption{font-size:var(--fs-body-sm);line-height:var(--lh-snug);color:var(--text-muted);margin-top:var(--sp-3);max-width:28ch}

/* ---- WeaveRule ---- */
.tap-rule{height:1px;width:100%;flex:none;background-image:var(--motif-weft)}
.tap-rule--leaf{background-image:var(--motif-weft-leaf)}
.tap-rule--inverse{background-image:var(--motif-weft-inverse)}
.tap-rule--lattice{height:16px;background-image:var(--motif-weave);background-size:var(--motif-weave-size)}
.tap-rule--lattice.tap-rule--leaf{background-image:var(--motif-weave-leaf)}
.tap-rule--lattice.tap-rule--inverse{background-image:var(--motif-weave-inverse)}

/* ---- Plate: how images are mounted ---- */
.tap-plate{background:var(--paper-0);border:var(--border-hair) solid var(--paper-300);padding:var(--sp-5)}
.tap-plate--leaf{border-color:var(--border-leaf)}
.tap-plate img{display:block;width:100%;height:auto}
.tap-plate__caption{font-family:var(--font-mono);font-size:var(--fs-mono-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);margin-top:var(--sp-3)}

/* ---- Layout ---- */
.tap-container{max-width:var(--container-xl);margin:0 auto;padding-left:var(--sp-8);padding-right:var(--sp-8)}
.tap-section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.tap-field-12{display:grid;grid-template-columns:repeat(12,1fr)}
.tap-ground-ink{background:var(--bg-inverse);color:var(--text-inverse-muted)}
.tap-ground-ink :where(h1,h2,h3,h4,h5,h6){color:var(--text-inverse)}