@layer reset,tokens,base,layout,components,plate,utilities;@layer reset{*, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
  img, picture, svg { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  button { font: inherit; cursor: pointer; }
  :focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 3px;
    border-radius: 1px;
  }
  ::selection {
    background: color-mix(in oklch, var(--terracotta) 25%, transparent);
    color: var(--ink);
  }
}@layer tokens{:root {
    color-scheme: light dark;

    
    --paper:        light-dark(oklch(0.97 0.008 80),  oklch(0.18 0.012 250));
    --paper-deep:   light-dark(oklch(0.94 0.010 80),  oklch(0.15 0.012 250));
    --ink:          light-dark(oklch(0.22 0.015 80),  oklch(0.92 0.010 80));
    --ink-muted:    light-dark(oklch(0.45 0.012 80),  oklch(0.70 0.010 80));
    --ink-faint:    light-dark(oklch(0.65 0.010 80),  oklch(0.55 0.010 80));
    --rule:         light-dark(oklch(0.85 0.010 80),  oklch(0.32 0.012 250));
    --rule-strong:  light-dark(oklch(0.70 0.012 80),  oklch(0.45 0.012 250));
    --terracotta:   light-dark(oklch(0.55 0.15  35),  oklch(0.68 0.14  35));
    --patina:       light-dark(oklch(0.50 0.08 220),  oklch(0.62 0.07 220));

    
    --font-display: "Petrona", "EB Garamond", "Hoefler Text", "Iowan Old Style", Georgia, serif;
    --font-body:    "Hanken Grotesk", "Helvetica Neue", -apple-system, system-ui, sans-serif;
    --font-meta:    "PT Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    
    --t-meta:       0.75rem;       
    --t-meta-lg:    0.8125rem;     
    --t-body-sm:    0.9375rem;     
    --t-body:       1.0625rem;     
    --t-body-lg:    1.1875rem;     

    --t-h4: clamp(1.125rem, 0.95rem + 0.6vw, 1.4rem);
    --t-h3: clamp(1.4rem,   1.1rem  + 1.2vw, 2rem);
    --t-h2: clamp(1.85rem,  1.3rem  + 2.2vw, 2.95rem);
    --t-h1: clamp(2.5rem,   1.6rem  + 3.8vw, 4.7rem);
    --t-display: clamp(3.2rem, 1.6rem + 6.4vw, 7rem);

    
    --w-body:    400;
    --w-medium:  500;
    --w-semi:    600;
    --w-bold:    700;

    
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    
    --measure: 65ch;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --page-max: 78rem;

    
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);    
    --t-fast:   140ms;
    --t-med:    260ms;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}@layer base{html {
    font-family: var(--font-body);
    font-size: 100%;
    line-height: 1.55;
    background: var(--paper);
    color: var(--ink);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "kern", "liga", "calt", "ss01";
    font-variant-numeric: oldstyle-nums proportional-nums;
  }
  body {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
  
  @media (prefers-color-scheme: dark) {
    html { line-height: 1.62; }
  }

  p, li {
    font-size: var(--t-body);
    max-width: var(--measure);
  }
  p + p { margin-top: var(--sp-4); }

  a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--terracotta);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: text-decoration-thickness var(--t-fast) var(--ease-out),
                text-underline-offset var(--t-fast) var(--ease-out);
  }
  a:hover {
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: var(--w-medium);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--ink);
  }
  h1 { font-size: var(--t-h1); line-height: 1.05; }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); }
  h4 { font-size: var(--t-h4); }

  hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: var(--sp-8) 0;
  }

  blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--t-body-lg);
    color: var(--ink);
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin: var(--sp-8) 0;
    max-width: var(--measure);
  }

  code, kbd, samp {
    font-family: var(--font-meta);
    font-size: 0.92em;
    background: var(--paper-deep);
    padding: 0.1em 0.4em;
    border: 1px solid var(--rule);
  }
  pre {
    font-family: var(--font-meta);
    font-size: var(--t-body-sm);
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    padding: var(--sp-4);
    overflow-x: auto;
    line-height: 1.5;
  }
  pre code { background: none; border: none; padding: 0; }

  ul, ol { padding-left: 1.4em; }
  li + li { margin-top: var(--sp-2); }
}@layer layout{.ohm-grid {
    display: grid;
    grid-template-columns:
      [edge-l] var(--gutter)
      [margin-l] minmax(0, 1fr)
      [main-l] minmax(0, 60ch)
      [main-r] minmax(0, 1fr)
      [margin-r] var(--gutter) [edge-r];
    column-gap: var(--gutter);
  }
  @media (max-width: 720px) {
    .ohm-grid {
      grid-template-columns: var(--gutter) [margin-l main-l] 1fr [main-r margin-r] var(--gutter);
    }
  }

  .ohm-page {
    max-width: var(--page-max);
    margin-inline: auto;
    width: 100%;
  }

  
  .span-margin-l { grid-column: margin-l / main-l; }
  .span-main     { grid-column: main-l / main-r; }
  .span-margin-r { grid-column: main-r / margin-r; }
  .span-content  { grid-column: margin-l / margin-r; }
  .span-full     { grid-column: edge-l / edge-r; }

  @media (max-width: 720px) {
    .span-margin-l, .span-margin-r { grid-column: main-l / main-r; }
  }
}@layer components{.meta-strip {
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--rule);
  }
  .meta-strip__breadcrumb {
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    flex-wrap: wrap;
  }
  .meta-strip__breadcrumb a { text-decoration: none; }
  .meta-strip__breadcrumb a:hover { color: var(--ink); }
  .meta-strip__sep::before {
    content: "·";
    margin-inline: var(--sp-2);
    color: var(--ink-faint);
  }
  .meta-strip__plate-no {
    color: var(--ink-faint);
    white-space: nowrap;
  }
  .meta-strip__plate-no b {
    color: var(--ink-muted);
    font-weight: var(--w-body);
  }

  
  .nav {
    padding-block: var(--sp-4);
    display: flex;
    align-items: baseline;
    gap: var(--sp-8);
    flex-wrap: wrap;
  }
  .nav__brand {
    font-family: var(--font-display);
    font-weight: var(--w-semi);
    font-size: 1.0625rem;
    text-decoration: none;
    letter-spacing: -0.005em;
    white-space: nowrap;
  }
  .nav__brand .ohm-mark {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    background: var(--terracotta);
    margin-right: 0.5em;
    vertical-align: 0.05em;
    transform: rotate(45deg);
  }
  .nav__list {
    display: flex;
    gap: var(--sp-6);
    list-style: none;
    padding: 0;
    margin: 0 0 0 auto;
    flex-wrap: wrap;
  }
  .nav__list a {
    font-family: var(--font-meta);
    font-size: var(--t-meta-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: var(--ink-muted);
    padding-block: var(--sp-1);
    transition: color var(--t-fast) var(--ease-out);
  }
  .nav__list a:hover { color: var(--ink); }
  .nav__list a[aria-current="true"] {
    color: var(--ink);
    position: relative;
  }
  .nav__list a[aria-current="true"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--terracotta);
  }
  .nav__list .ext::after {
    content: " ↗";
    color: var(--ink-faint);
    font-size: 0.85em;
    margin-left: 0.15em;
  }

  
  .footer {
    margin-top: var(--sp-24);
    padding-block: var(--sp-8) var(--sp-12);
    border-top: 1px solid var(--rule-strong);
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .footer__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-8);
  }
  .footer__col h5 {
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    font-weight: var(--w-body);
    margin-bottom: var(--sp-3);
  }
  .footer__col ul { list-style: none; padding: 0; }
  .footer__col li { margin-top: var(--sp-2); }
  .footer__col a { text-decoration: none; color: var(--ink-muted); }
  .footer__col a:hover { color: var(--ink); }
  .footer__colophon {
    margin-top: var(--sp-12);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.6;
    color: var(--ink-faint);
    max-width: 65ch;
  }
  .footer__colophon a {
    color: var(--ink-muted);
    text-decoration-color: var(--rule-strong);
  }

  
  .summaries {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--sp-6);
    border-top: 1px solid var(--rule);
  }
  .summary {
    display: grid;
    grid-template-columns: 6rem 1fr auto;
    gap: var(--sp-6);
    padding-block: var(--sp-6);
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
  }
  @media (max-width: 600px) {
    .summary {
      grid-template-columns: 1fr;
      gap: var(--sp-2);
    }
  }
  .summary__plate-no {
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    align-self: start;
    padding-top: 0.4rem;
  }
  .summary__title {
    font-family: var(--font-display);
    font-size: var(--t-h4);
    font-weight: var(--w-medium);
    line-height: 1.15;
    margin: 0;
  }
  .summary__title a { text-decoration: none; }
  .summary__title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--terracotta);
  }
  .summary__meta {
    margin-top: var(--sp-2);
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
  }
  .summary__meta span + span::before {
    content: "·";
    margin-inline: 0.4em;
    color: var(--ink-faint);
  }
  .summary__excerpt {
    margin-top: var(--sp-2);
    font-size: var(--t-body-sm);
    color: var(--ink-muted);
    max-width: 60ch;
  }
  .summary__year {
    font-family: var(--font-meta);
    font-size: var(--t-h4);
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums lining-nums;
    align-self: start;
    padding-top: 0.4rem;
  }
  @media (max-width: 600px) {
    .summary__year { display: none; }
  }

  
  .prose {
    max-width: var(--measure);
    font-size: var(--t-body);
  }
  .prose > * + * { margin-top: var(--sp-4); }
  .prose > h2 { margin-top: var(--sp-12); margin-bottom: var(--sp-2); }
  .prose > h3 { margin-top: var(--sp-8);  margin-bottom: var(--sp-2); }
  .prose ul, .prose ol { margin-top: var(--sp-4); }
  .prose li::marker { color: var(--terracotta); }
  .prose strong { font-weight: var(--w-semi); }
  .prose em { font-style: italic; }
  .prose img,
  .prose figure { margin-top: var(--sp-6); margin-bottom: var(--sp-6); }
  .prose figcaption {
    margin-top: var(--sp-2);
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  
  .article-head {
    padding-block: var(--sp-8) var(--sp-12);
    display: grid;
    gap: var(--sp-6);
  }
  .article-head__title {
    font-size: var(--t-h1);
    font-weight: var(--w-medium);
    letter-spacing: -0.015em;
  }
  .article-head__lede {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--w-body);
    font-size: var(--t-body-lg);
    color: var(--ink-muted);
    max-width: var(--measure);
    line-height: 1.4;
  }
  .article-head__byline {
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-6);
  }
  .article-head__byline dt {
    color: var(--ink-faint);
    margin-right: var(--sp-2);
    display: inline;
  }
  .article-head__byline dd {
    display: inline;
    margin: 0;
  }
  .article-head__byline div { display: inline-block; }
  .article-head__byline a { text-decoration-color: var(--rule-strong); }

  
  .home-hero {
    padding-block: var(--sp-12) var(--sp-16);
    display: grid;
    gap: var(--sp-8);
  }
  .home-hero__title {
    font-size: var(--t-display);
    font-weight: var(--w-medium);
    letter-spacing: -0.025em;
    line-height: 0.95;
    text-wrap: balance;
  }
  .home-hero__title em {
    font-style: italic;
    font-weight: var(--w-body);
    color: var(--ink-muted);
  }
  .home-hero__lede {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--w-body);
    font-size: clamp(1.25rem, 0.95rem + 1vw, 1.6rem);
    color: var(--ink-muted);
    max-width: 38ch;
    line-height: 1.35;
  }
  .home-hero__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
  }
  .home-hero__link {
    font-family: var(--font-meta);
    font-size: var(--t-body-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: var(--ink);
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-3);
    width: max-content;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--rule);
    transition: border-color var(--t-fast) var(--ease-out),
                gap var(--t-med) var(--ease-out);
  }
  .home-hero__link::before {
    content: "→";
    color: var(--terracotta);
    font-family: var(--font-body);
    transition: transform var(--t-med) var(--ease-out);
  }
  .home-hero__link:hover {
    border-color: var(--terracotta);
    gap: var(--sp-4);
  }

  
  .section-rule {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-16);
    margin-bottom: var(--sp-6);
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
  }
  .section-rule::before,
  .section-rule::after {
    content: "";
    height: 1px;
    background: var(--rule-strong);
  }
  .section-rule::before { width: var(--sp-6); }

  
  .tag-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-8);
  }
  .tag-list a {
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    text-decoration: none;
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--rule);
    transition: border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
  }
  .tag-list a:hover {
    border-color: var(--terracotta);
    color: var(--ink);
  }

  
  .theme-toggle {
    background: none;
    border: 1px solid var(--rule);
    color: var(--ink-muted);
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--sp-1) var(--sp-3);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  }
  .theme-toggle:hover { border-color: var(--ink-muted); color: var(--ink); }
  .theme-toggle__sun { display: none; }
  .theme-toggle__moon { display: inline; }
  :root[data-theme="dark"] .theme-toggle__sun { display: inline; }
  :root[data-theme="dark"] .theme-toggle__moon { display: none; }

  
  .skip-link {
    position: absolute;
    left: var(--sp-4);
    top: var(--sp-4);
    background: var(--ink);
    color: var(--paper);
    padding: var(--sp-2) var(--sp-3);
    text-decoration: none;
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transform: translateY(-200%);
    transition: transform var(--t-med) var(--ease-out);
    z-index: 100;
  }
  .skip-link:focus { transform: translateY(0); }
}@layer plate{.plate-block {
    padding-block: var(--sp-8) var(--sp-12);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-8) var(--sp-12);
    align-items: end;
  }
  @media (max-width: 860px) {
    .plate-block {
      grid-template-columns: 1fr;
      gap: var(--sp-6);
    }
  }

  .plate {
    position: relative;
    background: var(--paper-deep);
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .plate img,
  .plate picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 800ms var(--ease-out);
  }
  .plate:hover img { transform: scale(1.015); }

  
  .plate::before,
  .plate::after,
  .plate > .tick-tl,
  .plate > .tick-br {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--ink-muted);
    border-style: solid;
    border-width: 0;
    pointer-events: none;
  }
  .plate::before {
    top: -6px; left: -6px;
    border-top-width: 1px; border-left-width: 1px;
  }
  .plate::after {
    top: -6px; right: -6px;
    border-top-width: 1px; border-right-width: 1px;
  }
  .plate > .tick-bl {
    content: ""; position: absolute; width: 12px; height: 12px;
    bottom: -6px; left: -6px;
    border-bottom: 1px solid var(--ink-muted);
    border-left: 1px solid var(--ink-muted);
  }
  .plate > .tick-br {
    bottom: -6px; right: -6px;
    border-bottom-width: 1px; border-right-width: 1px;
  }

  .plate-block__type {
    display: grid;
    gap: var(--sp-4);
  }
  .plate-block__title {
    font-size: var(--t-h1);
    font-weight: var(--w-medium);
    letter-spacing: -0.015em;
    line-height: 1.02;
  }
  .plate-block__lede {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--w-body);
    font-size: var(--t-body-lg);
    color: var(--ink-muted);
    max-width: 36ch;
    line-height: 1.4;
  }
  .plate-block__caption {
    font-family: var(--font-meta);
    font-size: var(--t-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    border-top: 1px solid var(--rule);
    padding-top: var(--sp-3);
    margin-top: var(--sp-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
  }
  .plate-block__caption strong {
    color: var(--ink-faint);
    font-weight: var(--w-body);
    margin-right: var(--sp-2);
  }
}@layer utilities{.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;
  }
  .stack-2 > * + * { margin-top: var(--sp-2); }
  .stack-4 > * + * { margin-top: var(--sp-4); }
  .stack-6 > * + * { margin-top: var(--sp-6); }
  .stack-8 > * + * { margin-top: var(--sp-8); }
}