/* shinnlok.com · hand-written. Layers: tokens, base, shell, home, log, post, search, motion. */

@layer tokens, base, shell, home, log, books, post, search, motion;

@layer tokens {
  /* Black ink on white paper. Vermilion for emphasis, blue for links. Dark: navy, cream, brass. */
  :root {
    --bg: #0d1626;
    --bg-2: #132038;
    --bg-3: #1b2b47;
    --ink: #efe8d8;
    --ink-2: #b9b2a2;
    --muted: #9a9584;
    --line: rgb(239 232 216 / 0.12);
    --line-2: rgb(239 232 216 / 0.22);
    --accent: #e0ad48;
    --accent-text: #e8b957;
    --accent-dim: rgb(224 173 72 / 0.14);
    --accent-glow: rgb(224 173 72 / 0.5);
    --link: #8fd3c7;
    --sky: rgb(70 120 180 / 0.26);
    --sun: rgb(224 173 72 / 0.34);
    --sand: rgb(224 173 72 / 0.07);
    --peach: rgb(224 120 72 / 0.2);
    --haze: rgb(143 211 199 / 0.1);
    --glass: rgb(17 24 38 / 0.55);
    --glass-edge: rgb(255 255 255 / 0.14);
    --glass-hi: rgb(255 255 255 / 0.1);
    --glass-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.6);
    --sea: #8fd3c7;
    --shadow: 0 30px 80px -20px rgb(0 0 0 / 0.6);
    --grain-opacity: 0.05;
    --grain-blend: overlay;
    --spot: rgb(224 173 72 / 0.07);

    --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 6.5c8-5 12 4.5 20 0s12-5 19.5-.5 12.5 5 20 .5 12-5 19.5-.5 12.5 4.5 20 .5 9-3.5 17-1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --wrap: 76rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    color-scheme: dark;
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg: #fbfaf6;
      --bg-2: #f1efe8;
      --bg-3: #e6e3da;
      --ink: #0e0e0e;
      --ink-2: #3d3d3b;
      --muted: #5c5b57;
      --line: rgb(14 14 14 / 0.12);
      --line-2: rgb(14 14 14 / 0.24);
      --accent: #d9381e;
      --accent-text: #c22f17;
      --accent-dim: rgb(217 56 30 / 0.09);
      --accent-glow: rgb(217 56 30 / 0.45);
      --link: #0f6fa8;
      --sky: rgb(15 111 168 / 0.18);
      --sun: rgb(255 176 72 / 0.42);
      --sand: rgb(230 160 60 / 0.3);
      --peach: rgb(255 150 100 / 0.22);
      --haze: rgb(15 111 168 / 0.12);
      --glass: rgb(255 255 255 / 0.5);
      --glass-edge: rgb(14 14 14 / 0.08);
      --glass-hi: rgb(255 255 255 / 0.85);
      --glass-shadow: 0 6px 20px -12px rgb(14 14 14 / 0.25);
      --sea: #0f6fa8;
      --shadow: 0 30px 80px -24px rgb(14 14 14 / 0.25);
      --grain-opacity: 0.05;
      --grain-blend: multiply;
      --spot: rgb(217 56 30 / 0.045);
    color-scheme: light;
    }
  }
  :root[data-theme="light"] {
    --bg: #fbfaf6;
    --bg-2: #f1efe8;
    --bg-3: #e6e3da;
    --ink: #0e0e0e;
    --ink-2: #3d3d3b;
    --muted: #5c5b57;
    --line: rgb(14 14 14 / 0.12);
    --line-2: rgb(14 14 14 / 0.24);
    --accent: #d9381e;
    --accent-text: #c22f17;
    --accent-dim: rgb(217 56 30 / 0.09);
    --accent-glow: rgb(217 56 30 / 0.45);
    --link: #0f6fa8;
    --sky: rgb(15 111 168 / 0.18);
    --sun: rgb(255 176 72 / 0.42);
    --sand: rgb(230 160 60 / 0.3);
    --peach: rgb(255 150 100 / 0.22);
    --haze: rgb(15 111 168 / 0.12);
    --glass: rgb(255 255 255 / 0.5);
    --glass-edge: rgb(14 14 14 / 0.08);
    --glass-hi: rgb(255 255 255 / 0.85);
    --glass-shadow: 0 6px 20px -12px rgb(14 14 14 / 0.25);
    --sea: #0f6fa8;
    --shadow: 0 30px 80px -24px rgb(14 14 14 / 0.25);
    --grain-opacity: 0.05;
    --grain-blend: multiply;
    --spot: rgb(217 56 30 / 0.045);
    color-scheme: light;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 5.5rem;
    scrollbar-gutter: stable;
  }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    min-height: 100svh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss01', 'cv11';
    transition: background-color 0.35s ease, color 0.35s ease;
    overflow-x: clip;
  }
  ::selection { background: var(--accent); color: var(--bg); }
  a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 0.18em; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
  a:hover { color: var(--link); text-decoration-color: currentColor; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  img, svg { display: block; max-width: 100%; }
  ul, ol { padding: 0; }
  h1, h2, h3, h4 { font-weight: 500; line-height: 1.1; text-wrap: balance; letter-spacing: -0.015em; }
  p { text-wrap: pretty; }
  kbd { font-family: var(--mono); font-size: 0.7em; padding: 0.15em 0.4em; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); }
  code { font-family: var(--mono); font-size: 0.88em; }
  .wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--ink); color: var(--bg); border-radius: 6px; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip:focus { top: 1rem; }
  body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: var(--grain-opacity);
    mix-blend-mode: var(--grain-blend);
  }
  .kicker {
    font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  }
  .kicker a { text-decoration: none; }
  .kicker a:hover { color: var(--link); }
  .kicker .sep { color: var(--line-2); }
  .pulse { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd98a, var(--accent) 65%); box-shadow: 0 0 0.5em var(--sun); }
  .display {
    font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.8rem); letter-spacing: -0.02em; line-height: 1;
    font-variation-settings: 'opsz' 144;
  }
  .display em, .hero-title em { font-style: italic; color: var(--accent); font-variation-settings: 'opsz' 144; }
  .section-sub { color: var(--ink-2); font-size: 1.15rem; max-width: 46ch; margin-top: 1rem; line-height: 1.55; }
  .tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.22em 0.55em; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
  .btn {
    display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.3rem; border: 1px solid var(--line-2); border-radius: 999px;
    text-decoration: none; font-weight: 500; transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
  }
  .btn:hover { border-color: var(--accent); background: var(--accent-dim); color: var(--ink); }
  .btn-arrow { display: inline-block; transition: translate 0.3s var(--ease-out); color: var(--accent); }
  .btn:hover .btn-arrow { translate: 4px 0; }
}

@layer shell {
  .top { position: sticky; top: 0.75rem; z-index: 40; padding: 0 0 0.75rem; }
  .top::after { display: none; }
  .nav {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 3.6rem; padding: 0 0.6rem 0 1.25rem; position: relative;
    background: var(--glass); border-radius: 999px;
    -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
    box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
    transition: box-shadow 0.4s ease, background-color 0.4s ease;
  }
  /* A thin horizon runs along the capsule's underside. */
  .nav::after { content: ''; position: absolute; left: 1.6rem; right: 1.6rem; bottom: 0; height: 1px; border-radius: 1px; opacity: 0; background: linear-gradient(90deg, transparent, var(--sea) 20%, var(--accent) 50%, var(--sand) 80%, transparent); pointer-events: none; }
  .mark { display: inline-flex; align-items: baseline; gap: 0.35rem; text-decoration: none; font-family: var(--display); font-style: italic; font-size: 1.35rem; font-variation-settings: 'opsz' 48; letter-spacing: -0.01em; }
  .mark:hover { color: var(--ink); }
  .mark-dot { width: 0.46em; height: 0.46em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd98a, var(--accent) 65%); box-shadow: 0 0 0.7em var(--sun); translate: 0 -0.05em; transition: scale 0.3s var(--ease-out), box-shadow 0.3s ease; }
  .mark:hover .mark-dot { scale: 1.4; box-shadow: 0 0 1.1em var(--sun); }
  .nav-links { display: flex; gap: 2rem; list-style: none; font-size: 1rem; font-weight: 500; letter-spacing: 0.005em; }
  .nav-links a { text-decoration: none; color: var(--ink); position: relative; padding: 0.3rem 0; opacity: 0.86; transition: opacity 0.2s ease; }
  .nav-links a::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: -3px; height: 6px; background: var(--sea); -webkit-mask: var(--squiggle) center / 100% 100% no-repeat; mask: var(--squiggle) center / 100% 100% no-repeat; scale: 0 1; transform-origin: left; transition: scale 0.35s var(--ease-out); }
  .nav-links a:hover, .nav-links a[aria-current] { opacity: 1; }
  .nav-links a:hover::after, .nav-links a[aria-current]::after { scale: 1 1; }
  .nav-tools { display: flex; align-items: center; gap: 0.35rem; }
  .tool:active, .chip:active, .btn:active, .search-close:active { scale: 0.96; transition-duration: 0.05s; }
  .row-link:active::before { opacity: 1; }
  .post-end-tags a, .foot-links a, .contact-links a, .kicker a { padding-block: 0.4rem; }
  @media (max-width: 760px) { .tool, .search-close { min-height: 44px; min-width: 44px; } }
  .tool { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.7rem; border-radius: 999px; color: var(--ink-2); transition: background 0.2s ease, color 0.2s ease; }
  .tool:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink); }
  .tool kbd { border: 1px solid var(--line); border-bottom-width: 1px; padding: 0.1em 0.35em; }
  .theme .moon { display: none; }
  @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .theme .sun { display: none; } :root:not([data-theme="dark"]) .theme .moon { display: block; } }
  :root[data-theme="light"] .theme .sun { display: none; }
  :root[data-theme="light"] .theme .moon { display: block; }
  :root[data-theme="dark"] .theme .sun { display: block; }
  :root[data-theme="dark"] .theme .moon { display: none; }
  .menu { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.25rem; padding: 0; }
  .menu span { display: block; width: 18px; height: 1.5px; background: currentColor; margin-inline: auto; transition: translate 0.3s var(--ease-out), rotate 0.3s var(--ease-out); }
  @media (max-width: 760px) {
    .nav-links { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; flex-direction: column; gap: 0; padding: 0.5rem 1.25rem 0.75rem; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); border-radius: 1.4rem; box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-hi), var(--glass-shadow); display: none; font-size: 1.15rem; }
    .nav-links a { display: block; padding: 0.75rem 0; }
    .nav-links a::after { display: none; }
    body.menu-open .nav-links { display: flex; }
    body.menu-open .menu span:first-child { translate: 0 3.25px; rotate: 45deg; }
    body.menu-open .menu span:last-child { translate: 0 -3.25px; rotate: -45deg; }
    .menu { display: flex; }
    .tool kbd { display: none; }
  }
  .foot { margin-top: clamp(5rem, 10vw, 9rem); padding: 2rem 0 2.5rem; border-top: 1px solid var(--line-2); position: relative; background: var(--bg); font-size: 0.85rem; color: var(--muted); }
  .foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 2rem; }
  .foot-links { display: flex; gap: 1.5rem; }
  .foot-links a { text-decoration: none; }
  .nf { padding: clamp(4rem, 9vw, 8rem) 0 2rem; }
  .nf-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
  .nf-actions { margin-top: 2rem; }
  .nf-doodle { width: 100%; max-width: 15rem; justify-self: center; overflow: visible; }
  .nf-box { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nf-hand { fill: var(--muted); font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; font-weight: 600; font-size: 24px; }
  .nf-label { margin-top: clamp(3.5rem, 7vw, 5rem); font-weight: 500; line-height: 1.6; }
  .nf .rows { margin-top: 1rem; }
  @media (max-width: 760px) { .nf-grid { grid-template-columns: 1fr; } .nf-doodle { max-width: 11rem; justify-self: start; } }
}

@layer home {
  .hero { position: relative; min-height: calc(100svh - 4.25rem); display: flex; flex-direction: column; justify-content: center; padding: 4rem 0 5rem; isolation: isolate; }
  /* Late light: sky, a peach band at the horizon, sand below. A low sun follows the pointer; two washes drift against each other. */
  .hero::before, .log-head::before {
    content: ''; position: absolute; inset: -4.25rem calc(50% - 50vw) 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(9rem 9rem at 82% 40%, var(--sun), transparent 58%),
      radial-gradient(44rem 28rem at 82% 40%, color-mix(in oklab, var(--sun) 50%, transparent), transparent 65%),
      linear-gradient(to bottom, var(--sky), transparent 38%, var(--peach) 64%, var(--sand) 100%);
    transition: opacity 0.6s ease;
  }
  .hero::after, .log-head::after {
    content: ''; position: absolute; inset: -4.25rem calc(50% - 50vw) 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(40rem 22rem at 20% 20%, var(--haze), transparent 70%) no-repeat,
      radial-gradient(56rem 20rem at 80% 90%, var(--sand), transparent 70%) no-repeat;
    background-size: 130% 100%, 130% 100%;
    background-position: 0% 0%, 100% 100%;
    animation: swell 18s ease-in-out infinite alternate;
  }
  @keyframes swell { to { background-position: 100% 0%, 0% 100%; } }
  .log-head { position: relative; isolation: isolate; }
  .log-head::before, .log-head::after { inset: -4.25rem calc(50% - 50vw) -9rem; }
  .log-head::before { background: linear-gradient(to bottom, var(--sky), transparent 40%, var(--peach) 62%, var(--sand) 78%, transparent 100%); }
  .log-head::after { -webkit-mask: linear-gradient(to bottom, #000 70%, transparent); mask: linear-gradient(to bottom, #000 70%, transparent); }
  .hero-title {
    font-family: var(--display); font-weight: 400; font-size: clamp(2.7rem, 7.6vw, 6.6rem); line-height: 0.98; letter-spacing: -0.03em;
    max-width: 15ch; margin-top: 1.75rem; font-variation-settings: 'opsz' 144;
  }
  .hero-title em { position: relative; display: inline-block; }
  .scribble { position: absolute; left: -0.04em; right: -0.04em; bottom: -0.06em; width: calc(100% + 0.08em); height: 0.22em; overflow: visible; pointer-events: none; }
  .scribble path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: end; margin-top: 3rem; }
  .hero-lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ink-2); max-width: 52ch; line-height: 1.55; }
  .now { display: grid; gap: 0.6rem; font-size: 0.95rem; border-left: 1px solid var(--line-2); padding-left: 1.25rem; }
  .now div { display: grid; grid-template-columns: 5.75rem 1fr; gap: 1rem; }
  .now dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 0.2em; }
  .now dd { color: var(--ink-2); }
  .now a { color: var(--ink); text-decoration-color: var(--line-2); }
  .now a:hover { color: var(--link); }
  @media (max-width: 760px) { .hero { min-height: 0; padding: 3rem 0 3.5rem; } .hero-grid { grid-template-columns: 1fr; gap: 2rem; } .now div { grid-template-columns: 5.5rem 1fr; } }


  section.work, section.how, section.contact { padding-top: clamp(5rem, 10vw, 9rem); }
  .section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
  .section-head .section-sub { margin-top: 0; }


  .rows { list-style: none; margin-top: 2rem; border-top: 1px solid var(--line); }
  .row { border-bottom: 1px solid var(--line); }
  .row-link { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; padding: 1.6rem 0; text-decoration: none; color: inherit; align-items: start; position: relative; }
  .row-link::before { content: ''; position: absolute; inset: 0 -1rem; border-radius: 10px; background: var(--bg-2); opacity: 0; transition: opacity 0.25s ease; z-index: -1; }
  .row-link:hover { color: inherit; }
  .row-link:hover::before { opacity: 1; }
  .row-meta { display: grid; gap: 0.45rem; align-content: start; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); padding-top: 0.35rem; white-space: nowrap; }
  .len { display: grid; gap: 0.3rem; justify-items: start; }
  .len-label { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .len-bar { display: block; width: calc(var(--w, 0) * 5rem + 0.5rem); height: 2px; border-radius: 2px; background: var(--line-2); }
  .row-link:hover .len-bar { background: var(--accent); }
  .row-main { display: grid; gap: 0.5rem; }
  .row-title { display: block; font-weight: 400; font-family: var(--display); font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.015em; font-variation-settings: 'opsz' 48; transition: color 0.2s ease; text-wrap: balance; }
  .row-link:hover .row-title { color: var(--link); }
  .row-summary { color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; max-width: 62ch; }
  .row-tail { display: flex; flex-wrap: wrap; justify-content: end; align-items: start; gap: 0.4rem; max-width: 17rem; padding-top: 0.3rem; }
  .row-tail .row-min { flex-basis: 100%; text-align: right; }
  .row-min { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; padding: 0.22em 0; white-space: nowrap; }
  .row-big .row-link { padding: 2.2rem 0; grid-template-columns: 8rem minmax(0, 1fr) auto; }
  .row-big .row-title { font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-variation-settings: 'opsz' 96; }
  .row-big .row-summary { font-size: 1.05rem; }
  @media (max-width: 900px) { .row-link, .row-big .row-link { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } .row-meta, .len { grid-auto-flow: column; justify-content: start; align-items: center; gap: 1rem; padding-top: 0; } .len { gap: 0.6rem; } .row-tail { justify-content: start; max-width: none; } .row-tail .row-min { flex-basis: auto; } }
  .more { margin-top: 2.5rem; }

  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem 5rem; }
  .split-side { position: sticky; top: 6rem; align-self: start; }
  .timeline { list-style: none; border-top: 1px solid var(--line); }
  .timeline li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
  .t-when { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; color: var(--muted); padding-top: 0.5rem; }
  .timeline h3 { font-family: var(--display); font-size: 1.6rem; font-variation-settings: 'opsz' 48; }
  .t-note { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-left: 0.5rem; vertical-align: middle; }
  .t-role { color: var(--accent-text); font-size: 0.95rem; margin: 0.25rem 0 0.75rem; }
  .timeline p { color: var(--ink-2); line-height: 1.55; max-width: 58ch; }
  @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2rem; } .split-side { position: static; } .timeline li { grid-template-columns: 1fr; gap: 0.25rem; } }

  .principles { list-style: none; margin-top: 3rem; border-top: 1px solid var(--line); }
  .principles li { display: grid; grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 1rem 3rem; padding: 2rem 0; border-bottom: 1px solid var(--line); align-items: start; transition: background 0.3s ease; }
  .p-n { font-family: var(--mono); font-size: 0.74rem; color: var(--accent-text); letter-spacing: 0.1em; padding-top: 0.55rem; }
  .principles h3 { font-family: var(--display); font-size: clamp(1.4rem, 2vw, 1.75rem); font-variation-settings: 'opsz' 72; max-width: 22ch; }
  .principles p { color: var(--ink-2); font-size: 1rem; line-height: 1.6; max-width: 56ch; padding-top: 0.35rem; }
  @media (max-width: 760px) { .principles li { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.5rem 0; } .p-n { padding-top: 0; } }

  .contact { position: relative; isolation: isolate; }
  .contact::before { content: ''; position: absolute; inset: -4rem calc(50% - 50vw) -6rem; z-index: -1; pointer-events: none; background: radial-gradient(60rem 24rem at 30% 100%, var(--sand), transparent 70%), radial-gradient(40rem 20rem at 90% 80%, var(--haze), transparent 70%); }
  .contact .big-mail {
    display: inline-block; margin-top: 1.25rem; font-family: var(--display); font-size: clamp(1.8rem, 6vw, 4.6rem); letter-spacing: -0.03em; line-height: 1.05;
    text-decoration: none; overflow-wrap: anywhere; font-variation-settings: 'opsz' 144;
    background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 0 2px; transition: background-size 0.5s var(--ease-out), color 0.2s ease; padding-bottom: 0.1em;
  }
  .contact .big-mail:hover { background-size: 100% 2px; color: var(--ink); }
  .contact-note { margin-top: 1.5rem; color: var(--ink-2); max-width: 52ch; font-size: 1.1rem; }
  .contact-links { display: flex; gap: 2rem; margin-top: 2rem; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em; }
  .contact-links a { text-decoration: none; color: var(--ink-2); }
  .contact-links a::before { content: '↗ '; color: var(--accent); }
}

@layer log {
  .log-head { padding: clamp(3rem, 7vw, 6rem) 0 2rem; }
  .log-head .display { font-size: clamp(2.7rem, 7.6vw, 6.6rem); margin-top: 1rem; }
  .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; }
  .log-head .kicker a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.25em; }
  .log-head .kicker a:hover { text-decoration-color: currentColor; }
  .chip { display: inline-flex; align-items: baseline; gap: 0.5em; flex: none; white-space: nowrap; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.5rem 0.9rem; border: 0; border-radius: 999px; color: var(--ink-2); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
  .chip-n { font-size: 0.9em; color: var(--muted); font-variant-numeric: tabular-nums; }
  .chip[aria-pressed="true"] .chip-n { color: inherit; opacity: 0.7; }
  @media (max-width: 760px) {
    .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.5rem; scrollbar-width: none; overscroll-behavior-x: contain; }
    .filters::-webkit-scrollbar { display: none; }
  }
  .chip:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
  .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
  .pinned-label { margin: 1rem 0 0.9rem; font-weight: 500; line-height: 1.6; }
  .pinned-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd98a, var(--accent) 65%); }
  .pinned .rows { margin-top: 0; border-top: 1px solid var(--line-2); }
  .years { padding-top: 1rem; }
  .year { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 4fr); gap: 0 3rem; padding: 1.5rem 0 3rem; }
  .year[hidden] { display: none; }
  .year-side { position: sticky; top: 5.5rem; align-self: start; display: grid; gap: 0.25rem; padding-top: 2rem; }
  .year-num {
    font-family: var(--display); font-size: clamp(3.5rem, 7.5vw, 7rem); line-height: 1; letter-spacing: -0.04em; font-variation-settings: 'opsz' 144;
    color: transparent; -webkit-text-stroke: 1px var(--line-2); transition: color 0.4s ease, -webkit-text-stroke-color 0.4s ease;
  }
  .year:hover .year-num, .year:focus-within .year-num { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
  .year-count { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .year .rows { margin-top: 0; }
  .row[hidden] { display: none; }
  .empty { color: var(--muted); padding: 3rem 0; }
  @media (max-width: 760px) { .year { grid-template-columns: 1fr; gap: 0; padding-bottom: 2rem; } .year-side { position: static; grid-auto-flow: column; align-items: baseline; justify-content: start; gap: 1rem; padding: 1rem 0 0.75rem; } .year-num { font-size: 2.5rem; color: var(--ink); -webkit-text-stroke: 0; } }
}

@layer post {
  .progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; scale: 0 1; z-index: 60; }
  @supports (animation-timeline: scroll()) {
    .progress { animation: progress linear both; animation-timeline: scroll(root); }
    @keyframes progress { from { scale: 0 1; } to { scale: 1 1; } }
  }
  /* One centered reading column: kicker, title, deck, body, and the end matter share its left edge. */
  .col { width: min(var(--measure), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .reading { --measure: 36rem; }
  .post-head { padding: clamp(3rem, 7vw, 6rem) 0 2.25rem; border-bottom: 1px solid var(--line); }
  .post-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing: -0.02em; line-height: 1.04; margin-top: 1.25rem; font-variation-settings: 'opsz' 144; }
  .post-deck { font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.45rem); color: var(--ink-2); margin-top: 1.25rem; line-height: 1.4; font-variation-settings: 'opsz' 48; }
  .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin-top: 1.5rem; }
  .short .post-head { padding: clamp(2.5rem, 5vw, 4rem) 0 1.75rem; }
  .short .post-title { font-size: clamp(2rem, 4vw, 3rem); }
  .short .prose { font-size: 1.25rem; }
  .toc { padding-top: 1.5rem; font-size: 0.9rem; }
  .toc-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
  .toc ol { list-style: none; display: grid; gap: 0.1rem; border-left: 1px solid var(--line); }
  .toc a { display: block; padding: 0.4rem 0 0.4rem 1rem; color: var(--muted); text-decoration: none; margin-left: -1px; border-left: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; line-height: 1.35; }
  .toc a:hover { color: var(--ink); }
  .toc a.active { color: var(--ink); border-left-color: var(--accent); }
  .prose { font-size: 1.125rem; line-height: 1.62; padding-top: 2rem; }
  .prose > * + * { margin-top: 1.3em; }
  .prose p.dropcap::first-letter { font-family: var(--display); font-size: 3.1em; float: left; line-height: 0.82; padding: 0.06em 0.1em 0 0; color: var(--ink); font-weight: 400; font-variation-settings: 'opsz' 144; }
  @supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
    .prose p.dropcap::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; margin-right: 0.08em; -webkit-initial-letter: 3; initial-letter: 3; }
  }
  .prose h2 { font-family: var(--display); font-size: 1.85rem; margin-top: 2.6em; letter-spacing: -0.02em; font-variation-settings: 'opsz' 72; }
  .prose h3 { font-family: var(--display); font-size: 1.35rem; margin-top: 2em; }
  .prose h2 + *, .prose h3 + * { margin-top: 0.8em; }
  .prose .anchor { text-decoration: none; color: inherit; }
  .prose .anchor:hover { color: inherit; }
  .prose .anchor:hover::after { content: ' #'; color: var(--accent); font-weight: 300; }
  .prose a:not(.anchor) { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-decoration-thickness: 1px; }
  .prose a:not(.anchor):hover { text-decoration-color: currentColor; }
  .prose ul, .prose ol { padding-left: 1.25rem; }
  .prose li + li { margin-top: 0.5em; }
  .prose li::marker { color: var(--accent); }
  .prose blockquote { border-left: 2px solid var(--accent); padding: 0.25rem 0 0.25rem 1.25rem; color: var(--ink-2); font-family: var(--display); font-style: italic; font-size: 1.2em; line-height: 1.5; font-variation-settings: 'opsz' 48; }
  .prose pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.25rem; overflow-x: auto; font-size: 0.86rem; line-height: 1.55; font-variant-ligatures: none; }
  .prose :not(pre) > code { font-size: 0.82em; background: var(--bg-3); border-radius: 4px; padding: 0.12em 0.35em; }
  .prose hr { border: 0; height: 12px; width: 120px; margin: 3em auto; background-color: var(--sea); opacity: 0.6; -webkit-mask: var(--squiggle) center / 100% 100% no-repeat; mask: var(--squiggle) center / 100% 100% no-repeat; }
  .prose strong { font-weight: 600; color: var(--ink); }
  .prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
  .prose th, .prose td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
  .prose th { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
  /* Figures: inline SVG drawn with theme tokens so they follow light and dark. */
  .prose .fig { margin: 2.75em 0; }
  .prose .fig svg { display: block; width: 100%; height: auto; max-width: 40rem; margin: 0 auto; overflow: visible; }
  .prose .fig figcaption { margin-top: 0.9rem; font-family: var(--display); font-style: italic; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); text-align: center; }
  /* Sketch figures follow the theme. */
  .prose .fig:not(.fig-shot) svg text { fill: var(--ink-2); stroke: none; font-family: var(--sans); }
  .prose .fig:not(.fig-shot) svg .t-ink { fill: var(--ink); }
  .prose .fig:not(.fig-shot) svg .t-mute { fill: var(--muted); }
  .prose .fig:not(.fig-shot) svg .t-acc { fill: var(--accent); }
  .prose .fig svg .s-ink { stroke: var(--ink); }
  .prose .fig svg .s-mute { stroke: var(--muted); }
  .prose .fig svg .s-line { stroke: var(--line-2); }
  .prose .fig svg .s-acc { stroke: var(--accent); }
  .prose .fig svg .f-bg { fill: var(--bg); }
  .prose .fig svg .f-acc { fill: var(--accent); }
  .prose .fig svg .f-dim { fill: var(--accent-dim); }
  .prose .fig svg .f-ink { fill: var(--ink); }
  .prose .fig svg .f-line { fill: color-mix(in srgb, var(--muted) 55%, transparent); }
  .prose .fig svg text.hand { font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; font-weight: 600; }
  /* Screenshot figures keep the colors of the tool they came from, like a pasted image. */
  .prose .fig-shot .shot { background: #fff; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -12px rgb(0 0 0 / 0.25); }
  .prose .fig-shot .shot svg { max-width: none; }
  :root[data-theme="dark"] .prose .fig-shot .shot { filter: brightness(0.92); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prose .fig-shot .shot { filter: brightness(0.92); } }
  .prose .fig-ascii pre { font-size: clamp(0.62rem, 1.9vw, 0.82rem); line-height: 1.35; white-space: pre; font-variant-ligatures: none; }
  .end-mark { display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.3em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd98a, var(--accent) 65%); vertical-align: baseline; translate: 0 -0.02em; }
  .post-end { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); }
  .post-end > a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-underline-offset: 0.3em; }
  .post-end-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .post-end-tags a { text-decoration: none; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; padding: 0.22em 0.6em; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
  .post-end-tags a:hover { border-color: var(--link); color: var(--link); }
  .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: clamp(2.5rem, 6vw, 4rem); border: 1px solid var(--line); background: var(--line); }
  .pn { display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem; background: var(--bg); text-decoration: none; transition: background 0.25s ease; }
  .pn:hover { background: var(--bg-2); color: inherit; }
  .pn.newer { text-align: right; }
  .pn-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .pn-title { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; font-variation-settings: 'opsz' 48; transition: color 0.2s ease; }
  .pn.back .pn-title { font-style: italic; color: var(--ink-2); }
  .pn:hover .pn-title { color: var(--link); }
  @media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } .pn.newer { text-align: left; } }
}

@layer search {
  .search { margin: 10vh auto 0; width: min(40rem, 92vw); padding: 0; border: 0; border-radius: 1.4rem; background: color-mix(in oklab, var(--bg) 70%, transparent); color: var(--ink); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-hi), var(--shadow); overflow: hidden; }
  .search::backdrop { background: rgb(14 14 14 / 0.25); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
  .search[open] { animation: pop 0.22s var(--ease-out); }
  @keyframes pop { from { opacity: 0; translate: 0 8px; scale: 0.985; } }
  .search-box { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--muted); }
  .search-box input { flex: 1; font: inherit; font-size: 1.05rem; background: none; border: 0; color: var(--ink); outline: none; }
  .search-box input::placeholder { color: var(--muted); }
  .search-box input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
  .search-results { list-style: none; max-height: 50vh; overflow-y: auto; padding: 0.4rem; }
  .search-results:empty { display: none; }
  .search-results a { display: grid; gap: 0.2rem; padding: 0.7rem 0.8rem; text-decoration: none; border-radius: 8px; }
  .search-results a[aria-selected="true"], .search-results a:hover { background: var(--bg-3); color: inherit; }
  .search-close { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; color: var(--muted); transition: background 0.2s ease, color 0.2s ease; }
  .search-close:hover { background: var(--bg-3); color: var(--ink); }
  .search-empty[hidden] { display: none; }
  .sr-title { font-family: var(--display); font-size: 1.1rem; font-variation-settings: 'opsz' 48; }
  .sr-meta { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); }
  .sr-title mark, .sr-meta mark { background: var(--accent-dim); color: var(--accent-text); border-radius: 2px; }
  .search-empty { padding: 1.25rem 1rem; color: var(--muted); font-size: 0.95rem; }
  .search-hint { display: flex; gap: 0.35rem; padding: 0.6rem 1rem 0.8rem; border-top: 1px solid var(--line); font-size: 0.74rem; color: var(--muted); font-family: var(--mono); }
}

@layer motion {
  html.js .reveal { opacity: 0; translate: 0 18px; transition: opacity 0.7s ease, translate 0.9s var(--ease-out); }
  html.js .reveal.in { opacity: 1; translate: 0 0; }
  @media print { html.js .reveal { opacity: 1; translate: none; } .top, .progress { display: none; } }
  .reveal-now { animation: rise 0.9s var(--ease-out) both; }
  .reveal-now:nth-child(2) { animation-delay: 0.1s; }
  .reveal-now:nth-child(3) { animation-delay: 0.2s; }
  .hero-grid .reveal-now:nth-child(1) { animation-delay: 0.55s; }
  .hero-grid .reveal-now:nth-child(2) { animation-delay: 0.7s; }
  @keyframes rise { from { opacity: 0; translate: 0 18px; } }
  /* The headline is in the page from the first paint; it only eases up. */
  .hero-title { animation: rise 0.8s var(--ease-out) 0.05s both; }
  .scribble path { stroke-dashoffset: 1; animation: draw 0.7s var(--ease-out) forwards; }
  .hero-title em:nth-of-type(1) .scribble path { animation-delay: 0.6s; }
  .hero-title em:nth-of-type(2) .scribble path { animation-delay: 0.8s; }
  .hero-title em:nth-of-type(3) .scribble path { animation-delay: 1s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 0.16s ease-out both vt-out; }
  ::view-transition-new(root) { animation: 0.28s ease-out both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; } }
  .top { view-transition-name: top-bar; }

  @supports (animation-timeline: scroll()) {
    .nav::after { animation: nav-line linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    @keyframes nav-line { to { opacity: 1; } }
    .year-num { animation: year-fade linear both; animation-timeline: view(); animation-range: exit 10% exit 60%; }
    @keyframes year-fade { to { opacity: 0.25; translate: 0 -10px; } }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
    html.js .reveal { opacity: 1; translate: 0 0; }
    .scribble path { animation: none !important; stroke-dashoffset: 0; }
    .hero::after, .log-head::after { animation: none !important; }
    .year-num, .nav::after { animation: none !important; }
    .nav::after { opacity: 1; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
}

@layer books {
  .shelf-side { gap: 0.5rem; }
  .shelf-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: 'opsz' 96; text-wrap: balance; }
  .shelf-note { color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; max-width: 24ch; }
  .book { border-bottom: 1px solid var(--line); padding: 1.6rem 0; display: grid; gap: 0.4rem; }
  .book-title { font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.015em; font-variation-settings: 'opsz' 48; text-wrap: balance; }
  .book-by { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); }
  .book-note { font-size: 1.02rem; line-height: 1.55; max-width: 62ch; color: var(--ink-2); margin-top: 0.2rem; }
  .book-note a { color: var(--link); }
  .filters a.chip { text-decoration: none; color: var(--ink-2); }
  .shelf { scroll-margin-top: 4.5rem; }
  @media (max-width: 760px) { .shelf-side { grid-auto-flow: row; } .shelf-note { max-width: none; } }
}
@layer books {
  .book-title a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
  .book-title a:hover { color: var(--link); text-decoration-color: currentColor; }
}