/* =========================================================================
   audreyfleming.com
   A literary journal that is slightly haunted.

   The restraint is the point: cream stock, ink type, hairline rules, real
   margins. The strangeness is structural rather than decorative — Fraunces
   carries a WONK axis, so headlines physically warp on approach instead of
   merely changing colour.
   ========================================================================= */

:root {
  /* Paper & ink */
  --paper:        #f5f1e8;
  --paper-deep:   #ece5d6;
  --paper-edge:   #e0d8c6;
  --ink:          #16130f;
  --ink-soft:     #514a3f;
  --ink-faint:    #8b8171;

  /* Two riso plates, misregistered on purpose */
  --red:          #c8452b;
  --blue:         #24417c;

  --rule:         rgba(22, 19, 15, 0.16);
  --rule-strong:  rgba(22, 19, 15, 0.42);

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Measure & rhythm */
  --measure: 34rem;
  --gutter:  clamp(1.25rem, 5vw, 4.5rem);
  --stack:   clamp(3rem, 7vw, 6rem);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The night edition. Same journal, printed after dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #14120f;
    --paper-deep:  #1c1915;
    --paper-edge:  #26221c;
    --ink:         #efe9dc;
    --ink-soft:    #b3a996;
    --ink-faint:   #7d7364;
    --red:         #ef7256;
    --blue:        #8fadf0;
    --rule:        rgba(239, 233, 220, 0.18);
    --rule-strong: rgba(239, 233, 220, 0.45);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.02rem, 0.55vw + 0.92rem, 1.16rem);
  font-optical-sizing: auto;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Paper grain. Fixed, so the page appears to slide beneath the stock. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  .grain { mix-blend-mode: screen; opacity: 0.2; }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 10000;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.skip:focus { left: 0; }

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

/* ── Links ─────────────────────────────────────────────────────────────── */

a { color: inherit; }

.prose a,
.foot a {
  text-decoration: none;
  background-image: linear-gradient(var(--red), var(--red));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 0.08em;
  transition: background-size 0.35s var(--ease), color 0.35s var(--ease);
}
.prose a:hover,
.foot a:hover {
  color: var(--red);
  background-size: 100% 2px;
}

.link-arrow {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--ink);
  border: 0 !important;
  background: none !important;
}
.link-arrow::after {
  content: "→";
  transition: transform 0.35s var(--ease);
}
.link-arrow:hover { color: var(--red); }
.link-arrow:hover::after { transform: translateX(0.45em); }

/* ── Rules ─────────────────────────────────────────────────────────────── */

.rule { height: 1px; background: var(--rule-strong); }
.rule--double {
  height: 4px;
  background: none;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

hr.ornament {
  border: 0;
  margin: 3rem auto;
  text-align: center;
  overflow: visible;
}
hr.ornament::before {
  content: "❦";
  color: var(--ink-faint);
  font-size: 1.15rem;
}

/* ── Masthead ──────────────────────────────────────────────────────────── */

.masthead { padding-top: clamp(1.25rem, 3vw, 2.25rem); }

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  /* The bottom padding is sized to hold the nav's hover annotations clear of
     the rule below, not just to space the masthead. */
  padding: 0 var(--gutter) clamp(1.5rem, 3vw, 2.75rem);
  max-width: 84rem;
  margin: 0 auto;
}

.wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.015em;
  text-decoration: none;
  line-height: 1;
  font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 0;
  transition: font-variation-settings 0.6s var(--ease);
}
.wordmark__last { font-style: italic; color: var(--red); }
.wordmark:hover { font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1; }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 2.5vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  position: relative;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 0.35rem;
  transition: color 0.3s var(--ease);
}
.nav a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav a:hover, .nav a.is-current { color: var(--ink); }
.nav a:hover::before, .nav a.is-current::before { transform: scaleX(1); }

/* The nav's private annotations, visible only on approach. */
.nav__note {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 0;
  white-space: nowrap;
  font-family: var(--body);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.nav a:hover .nav__note { opacity: 1; transform: translateY(0); }

@media (max-width: 620px) {
  .nav__note { display: none; }
  .masthead__inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ── Display type ──────────────────────────────────────────────────────── */

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  transition: font-variation-settings 0.7s var(--ease);
}
.display:hover { font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1; }

.display--xl { font-size: clamp(3rem, 11vw, 8.5rem); }
.display--l  { font-size: clamp(2.4rem, 7vw, 5rem); }
.display--m  { font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.02; }

.display em { font-style: italic; color: var(--red); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.4rem;
}

.lede {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.48;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 30ch;
}

/* ── Layout primitives ─────────────────────────────────────────────────── */

.wrap {
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.prose {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.prose--centered { text-align: center; }
.prose--centered .lede { margin-inline: auto; }

.gap-top    { padding-top: var(--stack); }
.gap-bottom { padding-bottom: var(--stack); }

section { padding-block: var(--stack); }

/* ── Home: the specimen ────────────────────────────────────────────────── */
/* The front page is a type specimen. One word, set as large as the page will
   take, with the running head above it and everything informational below the
   rule. The WONK axis is the subject, not the garnish. */

/* Registered so the axes can be interpolated — and so JS can drive them from
   the cursor's distance without fighting the transition. */
@property --soft { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --wonk { syntax: "<number>"; initial-value: 0; inherits: false; }

.specimen {
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4.5vw, 3.25rem) var(--gutter) clamp(2rem, 4vw, 3rem);
}

/* Sized to the word rather than the viewport: --len is the character count, so
   short greetings hit the ceiling and long ones step down to fit the measure. */
.specimen__word {
  font-size: clamp(3.5rem, calc(187vw / var(--len, 12)), 18rem);
  /* Only bites on small screens, where a long greeting wraps rather than
     shrinking to nothing. Loose enough that the descenders clear the line
     below — the tighter setting collided. */
  line-height: 1.02;
  letter-spacing: -0.035em;
  width: fit-content;
  max-width: 100%;
  text-wrap: balance;
  font-variation-settings: "opsz" 144, "SOFT" var(--soft), "WONK" var(--wonk);
  transition: font-variation-settings 0.45s var(--ease);
  animation: rise 1s var(--ease) 0.05s backwards;
}

/* The keyboard and no-JS path. With app.js running, the inline properties it
   sets take over and the warp tracks the cursor instead. */
.specimen__word:hover,
.specimen__word:focus-visible { --soft: 100; --wonk: 1; }

/* Following a pointer wants a shorter tail than a hover does. */
.specimen__word.is-live { transition-duration: 0.3s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(0.12em) rotate(-1.2deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.standing {
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: fade 1.2s var(--ease) 0.35s backwards;
}
/* Each label and its value wrap as one unit, so a narrow screen never leaves
   "last set" stranded above its date. */
.standing > div { display: flex; align-items: baseline; gap: 0.7rem; }
.standing dt { color: var(--ink-faint); }
.standing dd { margin: 0; color: var(--ink-soft); }

/* Desktop puts the word and the description side by side with a hairline
   between them; the description centres against the word so neither end of
   the column is left hanging. Below that they stack and the rule lies flat. */
.specimen__body {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.specimen__side {
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  animation: fade 1.2s var(--ease) 0.5s backwards;
}
.specimen__side p { margin: 0 0 1rem; max-width: 34rem; color: var(--ink-soft); }
.specimen__side .specimen__more { margin: 1.25rem 0 0; }

@media (min-width: 1001px) {
  .specimen__body {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: stretch;
  }
  /* Stretched so the rule runs the full height of the word, with the prose
     centred inside it rather than pinned to an end. */
  .specimen__side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 0;
    border-left: 1px solid var(--rule);
    padding: 0 0 0 clamp(1.25rem, 2.5vw, 2rem);
  }
  /* Narrower column, so the word is sized to it rather than to the page.
     Centred in the row, so whichever column is taller the other sits level
     against its middle. */
  .specimen__word {
    align-self: center;
    font-size: clamp(3rem, calc(121vw / var(--len, 12)), 11rem);
  }
}

/* ── Index listing (journal) ───────────────────────────────────────────── */

.index { list-style: none; margin: 0; padding: 0; }

.index__item { border-top: 1px solid var(--rule); }
.index__item:last-child { border-bottom: 1px solid var(--rule); }

.index__link {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) 0;
  text-decoration: none;
  position: relative;
  transition: color 0.4s var(--ease);
}
.index__link::before {
  content: "";
  position: absolute;
  inset: 0 -1.25rem;
  background: var(--paper-deep);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  z-index: -1;
}
.index__link:hover::before { opacity: 1; }
.index__link:hover .index__title { color: var(--red); }

.index__num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.index__title {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
  transition: font-variation-settings 0.6s var(--ease), color 0.35s var(--ease);
}
.index__link:hover .index__title {
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
}
.index__excerpt { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.index__date {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  white-space: nowrap;
}
/* A post's topic or mood. The accent earns its keep here — it is the one mark
   on a row that says what kind of thing you are about to read. */
.tag { color: var(--red); white-space: nowrap; }
.eyebrow__sep { margin: 0 0.55em; color: var(--ink-faint); }

/* Standing above the title on an index row, the way a kicker does in print.
   The eyebrow supplies this typography on a post page; a row has none. */
.index__tag {
  display: block;
  margin: 0 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.index__thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-top: 0.9rem;
  filter: saturate(0.9) contrast(1.02);
}

@media (max-width: 700px) {
  .index__link { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .index__date { grid-column: 2; }
}

/* ── Article ───────────────────────────────────────────────────────────── */

.article__head {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--stack) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

.article__body { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

.article__body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.9em;
  line-height: 0.78;
  padding: 0.06em 0.09em 0 0;
  color: var(--red);
  font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 1;
}

.article__body h2, .article__body h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 2.6rem 0 0.85rem;
}
.article__body h2 { font-size: 1.7rem; }
.article__body h3 { font-size: 1.32rem; font-style: italic; }

.article__body p { margin: 0 0 1.35rem; }

.article__body blockquote {
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--red);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

.article__body img {
  width: 100%;
  height: auto;
  margin: 2rem 0;
}

.article__body code {
  font-family: var(--mono);
  font-size: 0.87em;
  background: var(--paper-deep);
  padding: 0.15em 0.35em;
}
.article__body pre {
  background: var(--paper-deep);
  padding: 1.15rem 1.35rem;
  overflow-x: auto;
  border-left: 2px solid var(--rule-strong);
  font-size: 0.86rem;
}
.article__body pre code { background: none; padding: 0; }

.article__body ul, .article__body ol { padding-left: 1.35rem; margin: 0 0 1.35rem; }
.article__body li { margin-bottom: 0.45rem; }

/* Marginalia — set into the gutter on wide screens, inline on narrow ones. */
.marginalia {
  font-family: var(--body);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-faint);
  line-height: 1.4;
}
@media (min-width: 1180px) {
  .marginalia {
    position: absolute;
    left: calc(100% + 2.5rem);
    width: 13rem;
    text-align: left;
    border-top: 1px solid var(--rule);
    padding-top: 0.4rem;
    transform: translateY(-0.35em);
  }
  .article__body { position: relative; }
  .article__body p { position: static; }
}
@media (max-width: 1179px) {
  .marginalia {
    display: block;
    border-left: 1px solid var(--rule);
    padding-left: 0.9rem;
    margin: 1.1rem 0;
  }
}

/* Media */
.figure { margin: 2.25rem 0; }
.figure img { width: 100%; height: auto; display: block; }
.figure figcaption {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin-top: 0.6rem;
  letter-spacing: 0.03em;
}

.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 2.25rem 0;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Obsessions ────────────────────────────────────────────────────────── */

.collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start; /* bare and pictured cards coexist without stretching */
  list-style: none;
  margin: 0;
  padding: 0;
}

.card { position: relative; }
.card__frame {
  background: var(--paper-deep);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 0.9rem;
}
.card__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
  filter: saturate(0.85);
}
.card:hover .card__frame img { transform: scale(1.04); filter: saturate(1.05); }

/* Cards without a picture stand on their type instead of holding an empty
   box open. A small mark and a rule carry the weight. */
.card--bare {
  border-top: 1px solid var(--rule-strong);
  padding-top: 0.9rem;
}
.card__mark {
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--red);
  margin-bottom: 0.75rem;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.card--bare .card__title { font-size: 1.45rem; }

.card__cat {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card__title {
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 400;
  margin: 0.3rem 0 0.4rem;
  letter-spacing: -0.015em;
}
.card__note { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 0.55rem; }
.card__rating { font-size: 0.85rem; letter-spacing: 0.12em; color: var(--red); }

/* ── Guestbook ─────────────────────────────────────────────────────────── */

.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.entry {
  background: var(--paper-deep);
  padding: 1.35rem 1.5rem;
  border-left: 2px solid var(--rule-strong);
}
.entry:nth-child(3n+1) { transform: rotate(-0.32deg); }
.entry:nth-child(3n+2) { transform: rotate(0.24deg); }
.entry__msg { margin: 0 0 0.7rem; }
.entry__by {
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.entry__by strong { color: var(--ink-soft); font-weight: 500; }

/* ── Forms ─────────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: 1.35rem; }
.field > span {
  display: block;
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

input[type="text"], input[type="url"], input[type="number"], textarea, select {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0.6rem 0;
  transition: border-color 0.3s var(--ease);
}
textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-bottom-color: var(--red);
}

.btn {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.85rem 1.7rem;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--danger { border-color: var(--red); color: var(--red); background: transparent; }
.btn--danger:hover { background: var(--red); color: var(--paper); }

.notice {
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.85rem 1.1rem;
  border-left: 2px solid var(--red);
  background: var(--paper-deep);
  margin-bottom: 1.5rem;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.foot { margin-top: var(--stack); }
.foot__inner {
  max-width: 84rem;
  margin: 0 auto;
  padding: 1.75rem var(--gutter) 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.foot p { margin: 0; }
.foot em { font-family: var(--body); font-size: 0.85rem; }
.foot__meta { display: flex; gap: 0.7rem; align-items: center; }

/* ── The Oracle ────────────────────────────────────────────────────────── */

.oracle__answer { min-height: 9rem; margin-top: 2.5rem; }

.oracle__q {
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

.oracle__thinking {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.oracle__thinking::after {
  content: "…";
  animation: ellipsis 1.4s steps(4, end) infinite;
}
@keyframes ellipsis {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

.oracle__said {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  min-height: 1.2em;
  font-variation-settings: "opsz" 100, "SOFT" 40, "WONK" 1;
}
.oracle__said::after {
  content: "▌";
  color: var(--red);
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.oracle__again {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

/* ── Scroll reveal ─────────────────────────────────────────────────────── */

.will-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.is-revealed { opacity: 1; transform: none; }

/* ── Admin ─────────────────────────────────────────────────────────────── */

.admin {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
}

.admin__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}
.admin__nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.admin__nav a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}
.admin__nav a:hover { color: var(--red); }

.admin__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.admin__who { color: var(--ink-faint); margin: 0 0 2rem; }

.admin__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 900px) { .admin__cols { grid-template-columns: 1fr; } }

.admin__panel {
  background: var(--paper-deep);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--rule);
}
.admin__h2 {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.25rem;
  font-weight: 400;
}

.admin__row { display: flex; align-items: flex-end; gap: 1rem; margin-top: 1.25rem; }
.admin__row .field { margin-bottom: 0; }

.admin__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.admin__inline input[type="text"] { flex: 1 1 8rem; min-width: 0; }

.admin__check { display: flex; align-items: center; gap: 0.6rem; }
.admin__check input { width: auto; }

.admin__table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.admin__table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule-strong);
}
.admin__table td { padding: 0.85rem 0.75rem 0.85rem 0; border-bottom: 1px solid var(--rule); }
.admin__table td:first-child { font-family: var(--display); font-size: 1.1rem; }
.admin__table a { color: inherit; text-decoration: none; }
.admin__table a:hover { color: var(--red); }

.mono { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); }

.btn--tiny { padding: 0.4rem 0.85rem; font-size: 0.68rem; }

.media { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.9rem; }
.media__item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.media__thumb {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  background: var(--paper-edge);
}
.media__thumb--yt {
  display: grid;
  place-items: center;
  color: var(--red);
  font-size: 1.1rem;
}
.media__meta p { margin: 0 0 0.35rem; }
.media__alt { display: flex; gap: 0.5rem; }
.media__alt input { font-size: 0.85rem; }

input[type="file"] {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  width: 100%;
}

/* ── Reorderable obsessions ────────────────────────────────────────────── */

.rank__hint { color: var(--ink-faint); margin: 0; }

.rank__list {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s var(--ease);
}
.rank__list.is-saving { opacity: 0.55; }
.rank__list.is-saved .rank__num { color: var(--red); }
.rank__list.is-failed { outline: 2px solid var(--red); outline-offset: 6px; }

.rank {
  display: grid;
  grid-template-columns: 1.5rem 2rem 3.25rem minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
.rank.is-dragging {
  opacity: 0.45;
  background: var(--paper-edge);
}

.rank__grip {
  cursor: grab;
  background: none;
  border: 0;
  padding: 0.2rem;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink-faint);
  transition: color 0.25s var(--ease);
}
.rank__grip:hover { color: var(--ink); }
.rank__grip:active { cursor: grabbing; }

.rank__num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--ease);
}

.rank__pic {
  width: 3.25rem;
  height: 3.25rem;
  background: var(--paper-edge);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.rank__pic img { width: 100%; height: 100%; object-fit: cover; }
.rank__pic--none {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-align: center;
}

.rank__fields { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rank__fields input[type="text"] { flex: 1 1 7rem; min-width: 0; font-size: 0.9rem; }

.rank__acts { display: flex; gap: 0.4rem; align-items: center; }

/* A file input disguised as a button. */
.rank__file { position: relative; overflow: hidden; display: inline-block; }
.rank__file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}
.rank__file span {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.rank__file:hover span { background: var(--ink); color: var(--paper); }

@media (max-width: 780px) {
  .rank {
    grid-template-columns: 1.5rem 2rem 3.25rem minmax(0, 1fr);
    row-gap: 0.6rem;
  }
  .rank__acts { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

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