/* taitzdesign.com design tokens. Generated from tokens.json. Do not edit by hand; edit tokens.json. */
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400..600;1,7..72,400&family=Instrument+Sans:wght@400;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --color-paper: #F7F5F0;
  --color-mat: #ECE8DF;
  --color-mat-hover: #E4E0D7;
  --color-row-hover: #F0EDE6;
  --color-raised: #FFFFFF;
  --color-ink: #16181D;
  --color-body: #3A3F47;
  --color-muted: #5F6670;
  --color-rule: #D8D3C7;
  --color-rule-ui: #8C8A84;
  --color-accent: #0B6E77;
  --color-private-ink: #7A4E00;
  --color-private-bg: #F3E6C8;
  --color-error: #A3302A;
  --color-success: #2E6A3B;
  --color-band: #121417;
  --color-band-mat: #1D2026;
  --color-band-mat-hover: #191C21;
  --color-band-ink: #F2EFE8;
  --color-band-muted: #A4AAB2;
  --color-band-rule: #2E333A;
  --color-band-rule-ui: #666C75;
  --color-band-accent: #6CCAD2;
  --color-scrim: rgba(18,20,23,.92);
  --color-hairline: rgba(22,24,29,.10);
  --color-stripe: rgba(22,24,29,.06);

  --font-serif: Literata, Georgia, 'Times New Roman', serif;
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --type-display-size: clamp(48px, 6.2vw, 88px);
  --type-display-line: 1.02;
  --type-display-weight: 500;
  --type-display-tracking: -0.02em;
  --type-h1-size: clamp(38px, 4.5vw, 64px);
  --type-h1-line: 1.08;
  --type-h1-weight: 500;
  --type-h1-tracking: -0.015em;
  --type-h2-size: clamp(30px, 2.8vw, 40px);
  --type-h2-line: 1.15;
  --type-h2-weight: 500;
  --type-h2-tracking: -0.01em;
  --type-statement-size: clamp(28px, 3.4vw, 48px);
  --type-statement-line: 1.18;
  --type-statement-weight: 500;
  --type-statement-tracking: -0.015em;
  --type-fact-size: clamp(36px, 3.4vw, 48px);
  --type-fact-line: 1.08;
  --type-fact-weight: 500;
  --type-fact-tracking: -0.01em;
  --type-tile-title-size: clamp(24px, 2.1vw, 30px);
  --type-tile-title-line: 1.2;
  --type-tile-title-weight: 500;
  --type-tile-title-tracking: -0.01em;
  --type-row-title-size: clamp(21px, 1.7vw, 24px);
  --type-row-title-line: 1.25;
  --type-row-title-weight: 500;
  --type-row-title-tracking: -0.01em;
  --type-grid-title-size: 22px;
  --type-grid-title-line: 1.25;
  --type-grid-title-weight: 500;
  --type-grid-title-tracking: -0.01em;
  --type-wordmark-size: 20px;
  --type-wordmark-weight: 500;
  --type-wordmark-tracking: -0.01em;
  --type-h3-size: clamp(21px, 1.7vw, 24px);
  --type-h3-line: 1.25;
  --type-h3-weight: 600;
  --type-h4-size: 18px;
  --type-h4-line: 26px;
  --type-h4-weight: 600;
  --type-lead-size: clamp(19px, 1.6vw, 22px);
  --type-lead-line: 1.55;
  --type-lead-weight: 400;
  --type-body-size: clamp(17px, 1.3vw, 18px);
  --type-body-line: 1.68;
  --type-body-weight: 400;
  --type-body-s-size: 17px;
  --type-body-s-line: 28px;
  --type-body-s-weight: 400;
  --type-caption-size: 15px;
  --type-caption-line: 22px;
  --type-caption-weight: 400;
  --type-nav-size: 15px;
  --type-nav-line: 22px;
  --type-meta-size: 13px;
  --type-meta-line: 18px;
  --type-meta-weight: 500;
  --type-meta-tracking: 0.06em;
  --type-meta-s-size: 12px;
  --type-meta-s-line: 16px;
  --type-meta-s-weight: 500;
  --type-meta-s-tracking: 0.06em;
  --type-artifact-size: 12px;
  --type-artifact-line: 18px;
  --type-artifact-weight: 500;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  --layout-max: 1280px;
  --layout-margin: clamp(20px, 5.5vw, 80px);
  --layout-gutter: 24px;
  --layout-section-gap: clamp(72px, 9vw, 128px);
  --layout-hero-pad-top: clamp(40px, 6vw, 88px);
  --layout-hero-pad-bottom: clamp(48px, 6vw, 80px);
  --layout-label-col: clamp(200px, 22%, 300px);
  --layout-tile-art: clamp(340px, 36vw, 500px);
  --layout-case-hero-art: clamp(420px, 46vw, 640px);
  --layout-row-min: 64px;
  --layout-mat-pad: clamp(24px, 4vw, 48px);

  --radius-phone: 13% / 6%;
  --radius-phone-screen: 10.5% / 4.9%;
  --radius-tablet: 16px;
  --radius-tablet-screen: 6px;
  --radius-laptop: 8px;
  --radius-web: 6px;
  --radius-pill: 999px;

  --shadow-soft: 0 24px 40px -24px rgba(22,24,29,.35);
  --shadow-glow: 0 0 0 1px rgba(242,239,232,.16), 0 0 56px 10px rgba(242,239,232,.26);

  --motion-press: 100ms;
  --motion-hover: 150ms;
  --motion-open: 200ms;
  --motion-move: 300ms;
  --motion-page: 500ms;              /* the work-to-case transition only (400ms read as a blink, Kevin 2026-10-23) */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-move: cubic-bezier(.5, .3, 0, 1);
  --ease-linear: linear;             /* scroll-linked progress only */
  --motion-lightbox: var(--motion-open) ease-out;   /* alias */
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Type roles */
.t-display { font-family: var(--font-serif); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); font-variation-settings: 'opsz' 72; }
.t-h1 { font-family: var(--font-serif); font-size: var(--type-h1-size); line-height: var(--type-h1-line); font-weight: var(--type-h1-weight); letter-spacing: var(--type-h1-tracking); font-variation-settings: 'opsz' 72; }
.t-h2 { font-family: var(--font-serif); font-size: var(--type-h2-size); line-height: var(--type-h2-line); font-weight: var(--type-h2-weight); letter-spacing: var(--type-h2-tracking); }
.t-statement { font-family: var(--font-serif); font-size: var(--type-statement-size); line-height: var(--type-statement-line); font-weight: var(--type-statement-weight); letter-spacing: var(--type-statement-tracking); font-variation-settings: 'opsz' 72; }
.t-fact { font-family: var(--font-serif); font-size: var(--type-fact-size); line-height: var(--type-fact-line); font-weight: var(--type-fact-weight); letter-spacing: var(--type-fact-tracking); font-variant-numeric: lining-nums tabular-nums; }
.t-tile-title { font-family: var(--font-serif); font-size: var(--type-tile-title-size); line-height: var(--type-tile-title-line); font-weight: var(--type-tile-title-weight); letter-spacing: var(--type-tile-title-tracking); }
.t-row-title { font-family: var(--font-serif); font-size: var(--type-row-title-size); line-height: var(--type-row-title-line); font-weight: var(--type-row-title-weight); letter-spacing: var(--type-row-title-tracking); }
.t-grid-title { font-family: var(--font-serif); font-size: var(--type-grid-title-size); line-height: var(--type-grid-title-line); font-weight: var(--type-grid-title-weight); letter-spacing: var(--type-grid-title-tracking); }
.t-wordmark { font-family: var(--font-serif); font-size: var(--type-wordmark-size); font-weight: var(--type-wordmark-weight); letter-spacing: var(--type-wordmark-tracking); }
.t-h3 { font-family: var(--font-sans); font-size: var(--type-h3-size); line-height: var(--type-h3-line); font-weight: var(--type-h3-weight); }
.t-h4 { font-family: var(--font-sans); font-size: var(--type-h4-size); line-height: var(--type-h4-line); font-weight: var(--type-h4-weight); }
.t-lead { font-family: var(--font-sans); font-size: var(--type-lead-size); line-height: var(--type-lead-line); font-weight: var(--type-lead-weight); color: var(--color-ink); }
.t-body { font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--type-body-weight); color: var(--color-body); max-width: 68ch; }
.t-body-s { font-family: var(--font-sans); font-size: var(--type-body-s-size); line-height: var(--type-body-s-line); font-weight: var(--type-body-s-weight); }
.t-caption { font-family: var(--font-sans); font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: var(--type-caption-weight); color: var(--color-muted); }
.t-nav { font-family: var(--font-sans); font-size: var(--type-nav-size); line-height: var(--type-nav-line); color: var(--color-ink); }
.t-meta { font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--type-meta-line); font-weight: var(--type-meta-weight); letter-spacing: var(--type-meta-tracking); text-transform: uppercase; color: var(--color-muted); }
.t-meta-s { font-family: var(--font-mono); font-size: var(--type-meta-s-size); line-height: var(--type-meta-s-line); font-weight: var(--type-meta-s-weight); letter-spacing: var(--type-meta-s-tracking); text-transform: uppercase; }
.t-artifact { font-family: var(--font-mono); font-size: var(--type-artifact-size); line-height: var(--type-artifact-line); font-weight: var(--type-artifact-weight); }

/* Components */
a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--motion-hover); }
a:hover { color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.section-open { border-top: 1px solid var(--color-ink); padding-top: var(--space-5); }
.lane-open { border-top: 2px solid var(--color-ink); padding-top: 14px; }
.row-rule { border-bottom: 1px solid var(--color-rule); }
.mat { background: var(--color-mat); padding: var(--layout-mat-pad); }
.mat--band { background: var(--color-band-mat); }
.phone { padding: 5px; background: var(--color-ink); border-radius: var(--radius-phone); display: flex; position: relative; }
.phone > img { height: 100%; width: auto; border-radius: var(--radius-phone-screen); }
.phone__island { position: absolute; top: 2.4%; left: 50%; transform: translateX(-50%); width: 27%; height: 2.6%; border-radius: var(--radius-pill); background: var(--color-ink); }
.mat .phone { box-shadow: var(--shadow-soft); }
.mat--band .phone { box-shadow: var(--shadow-glow); }
.tablet { background: var(--color-ink); border-radius: var(--radius-tablet); padding: 3.2%; box-shadow: var(--shadow-soft); }
.tablet > img { width: 100%; height: auto; border-radius: var(--radius-tablet-screen); }
.laptop { display: flex; flex-direction: column; align-items: center; }
.laptop__lid { width: 100%; background: var(--color-ink); border-radius: var(--radius-laptop) var(--radius-laptop) 0 0; padding: 3.5% 3.5% 3%; box-shadow: var(--shadow-soft); }
.laptop__screen { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-raised); }
.laptop__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.laptop__base { width: 116%; height: 9px; background: var(--color-rule); border-top: 1px solid var(--color-rule-ui); border-radius: 0 0 var(--radius-laptop) var(--radius-laptop); position: relative; }
.laptop__base::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16%; height: 4px; background: var(--color-rule-ui); border-radius: 0 0 4px 4px; }
.chip-private { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-private-ink); background: var(--color-private-bg); padding: 2px 6px; }
.flag { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-error); border: 1px dashed var(--color-error); padding: 2px 6px; }
.text-button { all: unset; cursor: pointer; font: 500 13px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); text-underline-offset: 6px; }
.text-button[aria-pressed="true"] { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.placeholder { background: var(--color-mat) repeating-linear-gradient(135deg, var(--color-stripe) 0 1px, transparent 1px 9px); display: flex; align-items: center; justify-content: center; text-align: center; }