/* 2026 layout for the 1996 krazykat poetry site.
   No build step, no JavaScript, no network requests beyond one 10 KB webfont.
   Palette is the original's: navy #000040, paper #fff, lime #ccff00. */

/* Self-hosted fangsong, subset to Latin + punctuation so Linux and Android see
   the same verse as Windows and macOS. Source: FandolFang-Regular.otf from
   CTAN, (c) the Fandol team, GPL + font exception. See assets/fonts/COPYING. */
@font-face {
  font-family: "Fandol Fang";
  src: url("fonts/fandol-fang-latin.22b14a0123.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A1-00FF, U+2010-2027, U+2030-205E, U+20AC;
}

@layer base, layout, components, print;

@layer base {
  :root {
    color-scheme: light dark;

    --ink:       light-dark(#000040, #e6e6f2);
    --paper:     light-dark(#ffffff, #08081a);
    --band:      light-dark(#000040, #01010c);
    --band-ink:  light-dark(#ffffff, #e6e6f2);
    --accent:    #ccff00;
    --on-accent: #000040;
    --rule:      color-mix(in oklab, currentColor 18%, transparent);

    --measure: 64ch;
    --pad:     clamp(1rem, 3vw, 2.5rem);

    --ui:    ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

    /* Decision: fangsong verse, monospace chrome -- the archival reading.
       Mono is ~0.6em per glyph, and the widest label in the archive is
       "Until - A three part process" (28 chars) => a 17.6rem nav item, so the
       column is 18rem and the two-column layout waits until 60rem. */
    --nav:   18rem;

    /* Verse: the self-hosted subset first, so every platform agrees, then the
       system fangsong for anything the subset lacks, then a serif. */
    --fang-sys: "FangSong", "仿宋", "STFangsong", fangsong, serif;
    --fang:     "Fandol Fang", var(--fang-sys);
    --verse:    var(--fang);
  }

  * { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 2;
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--paper);
    color: var(--ink);
    font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.0625rem) / 1.6 var(--ui);
    text-rendering: optimizeLegibility;
  }

  a {
    color: inherit;
    text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
    text-underline-offset: 0.18em;
  }
  a:hover { text-decoration-color: currentColor; }

  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
  }

  h1, h2 { line-height: 1.2; text-wrap: balance; }
}

@layer layout {
  .band {
    background: var(--band);
    color: var(--band-ink);
    padding: 0.85rem var(--pad);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1.5rem;
  }
  .band p { margin: 0; }
  .band a { color: var(--accent); text-decoration: none; }
  .band a:hover { text-decoration: underline; }

  .shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: var(--pad);
    align-items: start;
  }

  @media (min-width: 60rem) {
    .shell {
      grid-template-columns: var(--nav) minmax(0, var(--measure));
      justify-content: start;      /* range left, not centred */
    }
  }

  /* Sticky only when the whole 26-item list fits the viewport. Deliberately no
     inner scroll container: a wheel over the list must scroll the page, not a
     nested box (max-height + overflow + overscroll-behavior: contain swallowed
     every wheel event). */
  @media (min-width: 60rem) and (min-height: 62rem) {
    .works {
      position: sticky;
      top: 1rem;
      align-self: start;
    }
  }

  main { min-width: 0; }
}

@layer components {
  .skip {
    position: absolute;
    left: -9999px;
  }
  .skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    padding: 0.6rem 1rem;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
  }

  .site { font-weight: 600; letter-spacing: 0.01em; }
  .tag { font-size: 0.8rem; opacity: 0.75; }

  .works summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-block: 0.35rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0.6rem;
    color: color-mix(in oklab, var(--ink) 72%, transparent);
  }
  .works summary::-webkit-details-marker { display: none; }
  .works summary::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.12em;
    transition: rotate 0.15s ease;
  }
  .works details[open] summary::before { rotate: 135deg; translate: 0 0.1em; }
  @media (prefers-reduced-motion: reduce) {
    .works summary::before { transition: none; }
  }
  .works .count {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
    letter-spacing: 0;
  }

  .works ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.05rem;
    counter-reset: poem;
  }
  .works li { counter-increment: poem; }
  .works a {
    display: flex;
    gap: 0.6rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.35rem;
    text-decoration: none;
    font-size: 0.9rem;
  }
  .works a::before {
    content: counter(poem, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    opacity: 0.45;
    padding-top: 0.35em;
  }
  .works a:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); }
  .works a[aria-current="page"] {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
  }
  .works a[aria-current="page"]::before { opacity: 0.7; }

  article > h1 {
    font: 600 clamp(1.6rem, 1.15rem + 1.7vw, 2.4rem) / 1.15 var(--ui);
    margin: 0 0 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
  }

  .verse {
    font-family: var(--verse);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
    line-height: 1.5;
  }
  .verse p {
    margin: 0 0 1.5em;
    text-wrap: pretty;
  }
  .verse a { color: inherit; }

  /* Concrete poems: the indentation is the poem, so the text is verbatim.
     `pre` (not `pre-wrap`): the shape is preserved exactly and the column
     scrolls sideways when a phone cannot fit it. */
  .verse pre.concrete {
    margin: 0 0 1.5em;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    font-size: clamp(0.78rem, 0.7rem + 0.45vw, 0.95rem);
    line-height: 1.6;
    tab-size: 8;
    white-space: pre;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0.35rem;
  }

  /* Poems that used nested <MENU> as a staircase keep their shape. Depth is a
     class rather than inline styling, and the step scales with the viewport
     instead of the fixed 40px of a 1996 <MENU>. */
  .verse.layout { --step: clamp(0.65rem, 1.05vw + 0.4rem, 2.1rem); }
  .verse.layout p { margin: 0; }
  .verse.layout p.brk { margin-top: 1.5em; }
  .verse.layout p.brk2 { margin-top: 2.7em; }
  .verse.layout p.d1  { padding-inline-start: calc(var(--step) * 1); }
  .verse.layout p.d2  { padding-inline-start: calc(var(--step) * 2); }
  .verse.layout p.d3  { padding-inline-start: calc(var(--step) * 3); }
  .verse.layout p.d4  { padding-inline-start: calc(var(--step) * 4); }
  .verse.layout p.d5  { padding-inline-start: calc(var(--step) * 5); }
  .verse.layout p.d6  { padding-inline-start: calc(var(--step) * 6); }
  .verse.layout p.d7  { padding-inline-start: calc(var(--step) * 7); }
  .verse.layout p.d8  { padding-inline-start: calc(var(--step) * 8); }
  .verse.layout p.d9  { padding-inline-start: calc(var(--step) * 9); }
  .verse.layout p.d10 { padding-inline-start: calc(var(--step) * 10); }

  .prose { max-width: var(--measure); }
  .prose p { margin: 0 0 1.25em; }

  .subtitle {
    margin: -1.25rem 0 1.5rem;
    font-size: 0.9rem;
    color: color-mix(in oklab, var(--ink) 70%, transparent);
  }

  .parts { display: grid; gap: 3rem; }
  .parts > section > h2 {
    font: 600 1.1rem / 1.3 var(--ui);
    letter-spacing: 0.02em;
    margin: 0 0 1.25rem;
  }

  .pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 0.82rem;
  }
  .pager a {
    text-decoration: none;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--rule);
    border-radius: 0.4rem;
  }
  .pager a:hover { border-color: currentColor; }
  .pager .next { margin-left: auto; }
}

@layer print {
  @media print {
    .band, .works, .pager, .skip { display: none !important; }
    body {
      display: block;
      background: #fff;
      color: #000;
      font-size: 11pt;
    }
    .shell { display: block; padding: 0; }
    article > h1 { border: 0; margin-bottom: 1.5rem; }
    .verse { font-size: 12pt; line-height: 1.5; }
    .verse p { break-inside: avoid; }
    a { color: #000; text-decoration: none; }
  }
}