/* creature.blog — one stylesheet, no build step.
   Type: Crimson Text (self-hosted, latin + latin-ext), Georgia metric-matched
   fallback. One theme only: warm cream paper, as on creatureinsight.com.
   Layout: 160px nav column + 80px gap + reading column, stacking under 720px. */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/crimson-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/crimson-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/crimson-400i.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/crimson-400i-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/crimson-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/crimson-600i.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/crimson-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/crimson-700i.woff2') format('woff2');
}

/* Georgia, scaled and re-boxed to sit on Crimson Text's metrics so the swap
   doesn't reflow. Measured in the browser with the real font in place:
   CT x-height .4238 / asc .949 / desc .351 em; Georgia x-height .4814.
   .4238/.4814 = .880, advance ratio .923 -> 90% is the honest compromise
   (matching x-height exactly would overshoot the line lengths). */
@font-face {
  font-family: 'Crimson Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 90%;
  ascent-override: 105.4%;
  descent-override: 39%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- tokens */

:root {
  /* One theme. The site follows creatureinsight.com: cream paper, no dark
     variant, so the ground never changes under the photographs. */
  color-scheme: only light;

  --paper: #faf7f0;        /* the cream; og.png's ground is a hair lighter */
  --paper-sunk: #f2ece1;   /* code blocks */
  --ink: #1a1a1a;
  --ink-muted: #6b625a;    /* warmed off neutral grey so it sits on cream */
  --rule: #ded6c6;
  --accent: #c1512e;       /* the brand orange: wordmark, marks, ornaments */
  --accent-text: #b94a28;  /* a shade deeper, so link-size text clears AA */
  --accent-hover: #9e3f20;
  --accent-wash: #dfb4a2;  /* underlines and the blockquote rule */
  --mark: rgba(193, 81, 46, 0.16);

  --serif: 'Crimson Text', 'Crimson Fallback', Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  /* 22px, not 21: real Crimson's x-height is .424em against Georgia's .481,
     so everything the fallback made look right came out a size small. */
  --body-size: 1.375rem;
  /* In rem, not em: it is applied to elements at several font sizes (prose,
     footnotes, headings) and they all have to share one right-hand edge.
     560px is ~68 characters at 22px Crimson — 680px was 83. */
  --measure: 35rem;
  --nav-width: 160px;
  --gutter: 80px;
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  font-family: var(--serif);
  font-size: var(--body-size);
  line-height: 1.52;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: oldstyle-nums proportional-nums;
  hanging-punctuation: first last;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--mark);
}

/* Plain by default, as on creatureinsight.com: colour carries the link and
   the underline arrives on hover. Running prose turns it on permanently. */
a {
  color: var(--accent-text);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--accent-wash);
  transition: color 0.2s;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-line: underline;
  text-decoration-color: currentColor;
}

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

/* The router moves focus to the new view's heading so a screen reader hears
   where it landed. That is a programmatic focus, not something the reader
   aimed at, so it gets no ring — a box drawn round the title of every page
   you navigate to reads as a fault. Real focus targets keep theirs. */
.main[tabindex='-1']:focus,
.main[tabindex='-1']:focus-visible,
.view h1[tabindex='-1']:focus,
.view h1[tabindex='-1']:focus-visible {
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* Digits in dates, footnote numbers and code want to stay lining. */
code,
kbd,
pre,
samp {
  font-variant-numeric: normal;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--paper);
  color: var(--accent-text);
  font-size: 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rule);
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- layout */

/* The original site's proportions: a 160px nav, an 80px gap, one reading
   column, 60px of air above. The column is set to the measure rather than
   to 680px, because 680px of 22px Crimson is 83 characters to a line. */
.layout {
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, var(--measure));
  gap: var(--gutter);
  justify-content: center;
  max-width: calc(var(--nav-width) + var(--gutter) + var(--measure) + 80px);
  margin: 0 auto;
  padding: 3.75rem 2.5rem 6rem;
}

.masthead {
  align-self: start;
  /* Sticky so the three sections stay reachable inside a long essay. It adds
     nothing to look at; it only stops the nav scrolling away. */
  position: sticky;
  top: 3.75rem;
  /* Measured with the real font, per view: the first line of the column wants
     the wordmark 1.9px (contents) to 3.5px (about) lower than its own box top.
     2.4px splits the difference, so the cap-heights line up on every view to
     within about a pixel. */
  padding-top: 0.15rem;
}

.wordmark {
  display: block;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
}

.wordmark:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

/* The nav is one list, so it is leaded like one: 17px on a 31px line (1.85),
   no gaps between items — close enough to read as a group, open enough to
   point at (a 31px pitch). The size and leading live on the <ul>, not the links: an
   inline-block link inside an <li> that still carried the body's 22px/1.55
   strut was being spaced by a 34px line it never used. The wordmark is the
   list's heading, so it stands off by about one and a half lines (48px
   baseline to baseline against the 31px pitch). */
.nav {
  margin-top: 1.25rem;
}

.nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  font-size: 1.0625rem;
  line-height: 1.85;
}

/* inline-block, not block: a block would stretch to the full 160px column and
   the focus ring would draw a box round the empty half of it. */
.nav a {
  display: inline-block;
  position: relative;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* The deeper orange, not the wordmark's: at 17px the label is body-size text
   and #c1512e on cream is 4.38:1, just under AA. */
.nav a:hover,
.nav a[aria-current='page'] {
  color: var(--accent-text);
  text-decoration: none;
}

/* The current section is marked with the same inline caret the original site
   used. It is laid out for every item and only shown on one, so the labels
   keep a single left edge with the wordmark above them. */
.nav a::before {
  content: '\25B8';
  position: absolute;
  right: calc(100% + 0.32em);
  top: 0.06em;
  color: var(--accent);
  font-size: 0.8em;
  visibility: hidden;
}

.nav a[aria-current='page']::before {
  visibility: visible;
}

.main {
  min-width: 0;
}

/* ---------------------------------------------------------------- states */

.notice {
  color: var(--ink-muted);
  font-style: italic;
}

.notice a {
  font-style: normal;
}

/* ------------------------------------------------------------ contents */

.index-list {
  list-style: none;
}

.index-item + .index-item {
  margin-top: 2.5rem;
}

/* The whole entry is one link, so the description and date are part of the
   target rather than decoration beside it. */
.index-item > a {
  display: block;
  color: inherit;
}

.index-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.24;
  color: var(--ink);
  text-wrap: balance;
  transition: color 0.2s;
}

/* Only the title answers the hover. Underlining the whole entry — title,
   description and date together — would be a lot of rules for one link. */
.index-item > a:hover {
  text-decoration: none;
}

.index-item > a:hover .index-title,
.index-item > a:focus-visible .index-title {
  color: var(--accent-text);
}

.index-desc {
  display: block;
  max-width: 26em;
  margin-top: 0.3rem;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.index-date {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* Few pieces: let each one take more room, so three entries read as a
   composed contents page rather than a stub feed. */
.index-list[data-density='sparse'] .index-item + .index-item {
  margin-top: 3.75rem;
}

.index-list[data-density='sparse'] .index-title {
  font-size: 2rem;
  line-height: 1.16;
  letter-spacing: -0.006em;
}

.index-list[data-density='sparse'] .index-date {
  margin-top: 0.6rem;
}

.index-year {
  margin: 3.75rem 0 1.4rem;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}

/* Not :first-child — the view opens with a visually-hidden <h1>, so the first
   year heading is never the first child and used to inherit the 3.75rem. */
.index-year:first-of-type {
  margin-top: 0;
}

/* ------------------------------------------------------------- article */

.article-header {
  margin-bottom: 2.1rem;
}

.article-title {
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.006em;
  text-wrap: balance;
}

.article-date {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* ---- prose -------------------------------------------------------- */

.prose > * {
  max-width: var(--measure);
}

.prose p {
  margin-bottom: 1.1em;
  text-wrap: pretty;
  /* No automatic hyphens at this measure — they only add noise, and they
     look wrong in the larger settings. Narrow screens turn them on below. */
  hyphens: manual;
  overflow-wrap: break-word;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose h2 {
  max-width: 22em;
  margin: 2.2em 0 0.6em;
  font-size: 1.6875rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.004em;
  text-wrap: balance;
}

/* Set apart by italic rather than by size, so it can sit at reading size
   and still read as subordinate to an h2. */
.prose h3 {
  max-width: 22em;
  margin: 1.9em 0 0.45em;
  font-size: 1.375rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  text-wrap: balance;
}

.prose h2 + h3 {
  margin-top: 1.1em;
}

/* Inside an essay a link has to be visible mid-sentence, so in running text
   the underline is permanent. The back-links in the notes are navigation, so
   they are left plain. */
.prose a,
.footnotes p a {
  text-decoration-line: underline;
}

.prose strong {
  font-weight: 600;
}

.prose ul,
.prose ol {
  margin: 0 0 1.1em;
  padding-left: 1.5em;
}

/* Wider than the line gap, or the items read as one paragraph. */
.prose li {
  margin-bottom: 0.45em;
  text-wrap: pretty;
}

.prose li > ul,
.prose li > ol {
  margin: 0.45em 0 0.2em;
}

.prose ul {
  list-style-type: '\2013\2003';
}

.prose ul ul {
  list-style-type: '\2022\2003';
}

.prose ol {
  list-style-type: decimal;
}

.prose ol ol {
  list-style-type: lower-alpha;
}

.prose li::marker {
  color: var(--ink-muted);
  font-variant-numeric: oldstyle-nums;
}

.prose blockquote {
  margin: 1.8em 0;
  padding-left: 1.3em;
  border-left: 2px solid var(--accent-wash);
}

.prose blockquote p {
  margin-bottom: 0.75em;
}

.prose blockquote p:last-of-type {
  margin-bottom: 0;
}

.prose blockquote footer {
  margin-top: 0.65em;
  font-size: 1rem;
  color: var(--ink-muted);
}

.prose code {
  font-family: var(--mono);
  font-size: 0.76em;
  background: var(--paper-sunk);
  padding: 0.1em 0.32em;
  border-radius: 2px;
  overflow-wrap: break-word;
}

/* Size and leading belong on the <pre>: left on the inner <code> they lose
   to the block's own 22px strut and the lines drift apart. */
.prose pre {
  max-width: var(--measure);
  margin: 1.8em 0;
  padding: 1rem 1.15rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow-x: auto;
}

.prose pre code {
  font-size: 1em;
  background: none;
  padding: 0;
  border-radius: 0;
  white-space: pre;
}

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

.prose figure img {
  display: block;
  width: 100%;
  border-radius: 2px;
}

.prose figcaption {
  max-width: 30em;
  margin-top: 0.6rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* Section break: three small squares, the favicon's mark, spaced out. */
.prose .break {
  max-width: var(--measure);
  margin: 2.5em auto;
  border: 0;
  height: 4px;
  width: 42px;
  background-image: radial-gradient(
    circle at center,
    var(--accent) 0 1.6px,
    transparent 1.7px
  );
  background-size: 14px 4px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.75;
}

/* End mark, set inline after the last paragraph. */
.endmark {
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  margin-left: 0.35em;
  border-radius: 1.5px;
  background: var(--accent);
  vertical-align: 0.02em;
}

/* ---- footnotes ---------------------------------------------------- */

.prose sup a,
.footnotes li a.fn-back {
  font-variant-numeric: lining-nums;
}

.prose sup {
  font-size: 0.64em;
  line-height: 0;
  vertical-align: super;
}

.prose sup a {
  padding: 0 0.1em;
}

.footnotes {
  max-width: var(--measure);
  margin-top: 3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
}

.footnotes h2 {
  max-width: none;
  margin: 0 0 0.8rem;
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  color: var(--ink-muted);
}

.footnotes ol {
  margin: 0;
  padding-left: 1.6em;
  font-size: 1.125rem;
  line-height: 1.5;
}

.footnotes li {
  margin-bottom: 0.65em;
  scroll-margin-top: 2rem;
}

.footnotes p {
  display: inline;
  margin: 0;
}

.fn-back {
  margin-left: 0.3em;
  font-size: 0.9em;
}

.prose sup[id] {
  scroll-margin-top: 4rem;
}

/* ---- article footer ----------------------------------------------- */

/* One way back, and nothing else. The end mark has already closed the piece,
   so there is no rule and no next/previous apparatus under it. */
.article-footer {
  max-width: var(--measure);
  margin-top: 3.25rem;
  font-size: 1rem;
}

/* The lone way home on the not-found and error views. */
.back-link {
  margin-top: 2.5rem;
  font-size: 1rem;
}

/* -------------------------------------------------------------- about */

/* A few short sentences are set plainly, as on the original site: reading
   size, one sentence group per line, no paragraph gaps. Anything longer falls
   back to ordinary prose. */
.colophon[data-brief] p {
  line-height: 1.5;
  margin-bottom: 0;
  hyphens: manual;
}

/* ------------------------------------------------------------ creature */

/* The stage is sized from the column, not from the photograph, so swapping
   creatures never moves the text below it. 4:3 because that is the commonest
   shape in the set — those fill the stage exactly, left and right edges flush
   with the measure — and because it holds at every column width without a
   breakpoint. No frame: portraits would sit in wide empty bands. */
.creature-stage {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  aspect-ratio: 4 / 3;
  max-height: 420px;
  margin-bottom: 1.6rem;
}

.creature-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 2px;
  opacity: 1;
  transition: opacity 0.22s ease;
}

.creature-stage img.is-loading {
  opacity: 0;
}

.creature-name {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.004em;
  text-wrap: balance;
}

.creature-desc {
  max-width: var(--measure);
  margin-top: 0.85rem;
  text-wrap: pretty;
}

.creature-actions {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
}

/* A button that has to pass for one of the site's links. */
.another {
  font-family: inherit;
  font-size: inherit;
  color: var(--accent-text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color 0.2s;
}

.another:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .layout {
    --gutter: 56px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 720px) {
  :root {
    --body-size: 1.25rem;    /* 20px */
    --measure: 100%;
  }

  body {
    line-height: 1.56;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: 2.5rem 1.375rem 3.5rem;
  }

  /* Wordmark on its own line, sections in a row beneath it — the same
     arrangement as the desktop column, just turned. */
  .masthead {
    position: static;
    padding-top: 0;
  }

  .nav {
    margin-top: 1rem;
  }

  .nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 1.5rem;
  }

  /* 44px of height to press, without 44px of visible gap. */
  .nav a {
    padding: 0.7rem 0;
  }

  /* Turned into a row there is no left gutter to hang the marker in — on the
     first item it would fall off the edge of the screen — so here it sits
     inline in front of the word, as it does on creatureinsight.com. */
  .nav a::before {
    position: static;
    display: none;
    margin-right: 0.2em;
    visibility: visible;
  }

  .nav a[aria-current='page']::before {
    display: inline;
  }

  .article-title {
    font-size: 1.8125rem;
  }

  .index-list[data-density='sparse'] .index-title {
    font-size: 1.5rem;
  }

  .index-title {
    font-size: 1.375rem;
  }

  .index-desc {
    font-size: 1.0625rem;
  }

  .prose h2 {
    font-size: 1.5rem;
  }

  .prose h3 {
    font-size: 1.25rem;
  }

  .creature-name {
    font-size: 1.5rem;
  }

  .creature-actions {
    margin-top: 0.5rem;
  }

  .another {
    display: inline-block;
    padding: 0.7rem 0;
  }

  /* The measure is short enough here that hyphenation earns its keep. */
  .prose p,
  .prose li {
    hyphens: auto;
  }

  .prose blockquote {
    padding-left: 1.1em;
  }
}

/* ------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------- print */

@page {
  margin: 18mm;
}

@media print {
  :root {
    --paper: #fff;
    --paper-sunk: #fff;
    --ink: #000;
    --ink-muted: #333;
    --rule: #bbb;
    --accent: #000;
    --accent-text: #000;
    --accent-wash: #bbb;
    /* In rem the measure is pinned to a 16px root and would run to ~97
       characters at 11.5pt. Restated in mm it stays a book measure. */
    --measure: 112mm;
  }

  body {
    font-size: 11.5pt;
    line-height: 1.45;
    background: #fff;
    color: #000;
  }

  .layout {
    display: block;
    max-width: none;
    padding: 0;
  }

  .masthead,
  .skip-link,
  .article-footer,
  .creature-actions {
    display: none;
  }

  /* The measure is kept on paper too — it fits inside A4 margins and the
     text stays readable instead of running the full width of the sheet. */

  .prose a {
    color: #000;
  }

  /* Spell out destinations that won't survive the paper. */
  .prose a[href^='http']::after {
    content: ' <' attr(href) '>';
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }

  .prose h2,
  .prose h3,
  .article-title {
    break-after: avoid;
  }

  .prose blockquote,
  .prose figure,
  .prose pre {
    break-inside: avoid;
  }
}