/* ============================================================
   miris.monster — Mirabilia Monstrorum, Vol. XVII, Fasc. 3
   A goblin antiquarian's bestiary, rendered as a 1973 scholarly
   periodical. Specimen-tray bento. Sunset-warm goblincore.
   Six ink custom-properties flip for the 1974 corrected reprint.
   ============================================================ */

:root {
  /* ---- 1973 first printing (the six toggled inks + fixed colors) ---- */
  --ink-primary:  #3A2418;   /* iron-gall brown — body text, never pure black */
  --ink-faded:    #C25A2A;   /* burnt-amber — hairlines, ornament glyphs, signature */
  --accent-warm:  #E89B5A;   /* persimmon sunset — dividers, masthead underline, plate halo */
  --accent-deep:  #7A3416;   /* dried-blood-orange — italic specimen names, Latin headings */
  --bg-cell:      #FAF1DD;   /* bleached cream — inside specimen cells */
  --bg-page:      #F4E1C1;   /* dust-jacket cream — pageground */

  /* ---- fixed (never toggled) ---- */
  --accent-moss:  #5C7A3E;   /* moss-bottle green — footnote markers, goblin eye (<4% area) */
  --tarnish:      #A88860;   /* honeyed-tarnish — inactive marginalia, deckle shadow, grain undertint */

  --gap: 14px;
  --hair: 1px;
}

/* ---- 1974 corrected reprint: a slightly cooler ink everyone regretted ---- */
body.reprint-1974 {
  --ink-primary:  #34221C;
  --ink-faded:    #A8512E;
  --accent-warm:  #D89564;
  --accent-deep:  #6E3422;
  --bg-cell:      #F2EBDA;
  --bg-page:      #EADCBF;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-primary);
  background-color: var(--bg-page);
  /* very faint paper-grain undertint, flat — no gradients */
  background-image:
    repeating-linear-gradient(0deg, rgba(168,136,96,0.045) 0 1px, transparent 1px 3px);
  transition: background-color 480ms ease, color 480ms ease;
  -webkit-font-smoothing: antialiased;
}

i, em { font-style: italic; }
i[lang="la"], .cell-title i { color: var(--accent-deep); font-style: italic; }

sup.fn-mark, .fn-mark {
  color: var(--accent-moss);
  font-size: 0.7em;
  font-style: normal;
  vertical-align: super;
  letter-spacing: 0;
}

.fell-stamp {
  font-family: 'IM Fell DW Pica', 'EB Garamond', Georgia, serif;
}

/* ============================================================
   MASTHEAD — simply present, no entrance animation
   ============================================================ */
.fascicle { width: 100%; }

.masthead {
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 80px) clamp(20px, 3vw, 40px);
}

.masthead-rule {
  height: var(--hair);
  background: var(--ink-faded);
}
.masthead-rule--top { margin-bottom: clamp(16px, 2.4vw, 30px); }
.masthead-rule--bot {
  margin-top: clamp(14px, 2vw, 24px);
  background: var(--accent-warm);
  height: 2px; /* persimmon underline; still a single solid edge */
}

.masthead-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.42fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

.masthead-kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tarnish);
  font-variant: small-caps;
}

.masthead-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 5.8vw, 4.6rem);
  letter-spacing: 0.04em;
  line-height: 1.08;
  color: var(--accent-deep);
  margin: 0.18em 0 0.22em;
}

.masthead-sub {
  font-size: 1.0625rem;
  max-width: 52ch;
  color: var(--ink-primary);
}
.masthead-sub i { color: var(--ink-primary); }

.masthead-vol {
  margin-top: 0.7em;
  font-size: 0.92rem;
  color: var(--ink-primary);
}
.vol-roman {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--accent-deep);
  font-variant: small-caps;
}

.masthead-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 12px;
}
.masthead-goblin { color: var(--ink-faded); }
.masthead-goblin use { color: inherit; }

.masthead-pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pill {
  font-family: 'EB Garamond', serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink-primary);
  border: var(--hair) solid var(--ink-faded);
  padding: 4px 12px;
  border-radius: 999px;
  transition: background-color 220ms ease, color 220ms ease;
}
.pill:hover { background: var(--accent-warm); color: var(--bg-page); }

.masthead-price {
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: 30ch;
  color: var(--tarnish);
}
.masthead-price i { color: var(--tarnish); }

.masthead-foreword {
  margin-top: clamp(16px, 2.4vw, 28px);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 60ch;
  color: var(--ink-primary);
}
.masthead-foreword i { color: var(--accent-deep); }

/* ============================================================
   THE SPECIMENS SECTION — gutter marginalia + bento
   ============================================================ */
.specimens {
  display: grid;
  grid-template-columns: 3vw minmax(0, 1fr);
  gap: 0;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 80px) clamp(20px, 4vw, 56px);
}

.gutter {
  display: flex;
  flex-direction: column;
  gap: clamp(34px, 5.4vh, 88px);
  padding-top: 18px;
  align-items: center;
}
.gutter-num {
  font-family: 'IM Fell DW Pica', 'EB Garamond', serif;
  font-size: 0.95rem;
  color: var(--tarnish);
  cursor: pointer;
  transition: transform 220ms ease, color 220ms ease;
  transform-origin: center;
  user-select: none;
  text-decoration: none;
}
.gutter-num:hover { color: var(--ink-faded); }
.gutter-num.is-highlighted {
  transform: scale(1.18);
  color: var(--accent-deep);
  transition: transform 220ms ease;
}
.gutter-num.is-relaxing {
  transform: scale(1);
  transition: transform 460ms ease;
}
.gutter-fleuron { margin-top: 8px; color: var(--ink-faded); }

/* ---------- The bento: 12-col grid, 96px auto-rows ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 96px;
  gap: var(--gap);
  position: relative;
}

/* asymmetric specimen-tray placement — a Wunderkammer cabinet face */
.cell--c1 { grid-column: 1 / 4;   grid-row: 1 / 6;  }   /* tall narrow left */
.cell--c2 { grid-column: 4 / 13;  grid-row: 1 / 4;  }   /* wide lead plate */
.cell--c3 { grid-column: 4 / 7;   grid-row: 4 / 7;  }   /* trinket square */
.cell--c4 { grid-column: 7 / 10;  grid-row: 4 / 7;  }   /* trinket square */
.cell--c5 { grid-column: 10 / 13; grid-row: 4 / 7;  }   /* trinket square */
.cell--c6 { grid-column: 1 / 7;   grid-row: 7 / 12; }   /* deep footnote rect */
.cell--c7 { grid-column: 7 / 11;  grid-row: 7 / 12; }   /* deep footnote rect */
.cell--c8 { grid-column: 11 / 13; grid-row: 6 / 10; }   /* teacup */
.cell--c9 { grid-column: 11 / 13; grid-row: 10 / 12; }  /* postage-stamp 1x1-ish */

/* errata slip floats below cell V — sits in its own grid track */
.errata-slip { grid-column: 10 / 13; grid-row: 7 / 8; }

/* ---------- A single sealed exhibit ---------- */
.cell {
  position: relative;
  background: var(--bg-cell);
  border: var(--hair) solid var(--ink-faded);
  padding: clamp(20px, 2.4vw, 36px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 rgba(58, 36, 24, 0.06);
  transform: translateY(8px) scale(0.992);
  opacity: 0;
  transition:
    box-shadow 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.cell.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 540ms ease,
    transform 540ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--cell-index) * 70ms);
}
/* once revealed, hover takes over the transform/shadow timing */
.cell.is-revealed:hover {
  transform: scale(1.024);
  box-shadow: 0 12px 32px -8px rgba(58, 36, 24, 0.18);
  z-index: 5;
  transition:
    box-shadow 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cell-mark {
  font-size: 0.95rem;
  color: var(--tarnish);
  margin-bottom: 0.3em;
}
.cell-label {
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-variant: small-caps;
  color: var(--tarnish);
  margin-bottom: 0.45em;
}
.cell-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.0rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
  margin-bottom: 0.5em;
}
.cell-title i { color: var(--accent-deep); }

.cell-body {
  font-size: 1.0625rem;
  line-height: 1.62;
  max-width: 52ch;
  margin-bottom: 0.7em;
  color: var(--ink-primary);
}
.cell-body i { color: var(--accent-deep); }

.cell-foot {
  margin-top: auto;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--tarnish);
  border-top: var(--hair) solid var(--ink-faded);
  padding-top: 0.5em;
}
.cell-foot i { color: var(--accent-deep); }

.cell-foot-block {
  font-size: 0.86rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-primary);
  border-top: var(--hair) solid var(--ink-faded);
  padding-top: 0.55em;
  margin-bottom: 0.7em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.fn-line i { color: var(--accent-deep); font-style: italic; }

.catchword {
  align-self: flex-end;
  font-style: italic;
  font-size: 0.84rem;
  color: var(--ink-faded);
  margin-top: 0.4em;
}

/* ---------- The isometric specimen icon inside its case ---------- */
.cell-fig {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0.4em 0 0.9em;
}
.cell-fig--wide { margin: 0.2em 0 0.7em; }
.cell-fig--stamp { margin: 0.2em 0 0.4em; }

.iso-icon {
  width: clamp(100px, 14vw, 170px);
  height: auto;
  transform: scale(1) translateY(0);
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0ms;
}
.cell-fig--wide .iso-icon { width: clamp(160px, 28vw, 280px); }
.cell-fig--stamp .iso-icon { width: clamp(70px, 10vw, 110px); }

.cell.is-revealed:hover .iso-icon {
  transform: scale(1.06) translateY(-3px);
  transition-delay: 60ms;
}

/* single-stroke woodcut lines, 1.25px, burnt-amber on cream */
.iso-stroke {
  fill: none;
  stroke: var(--ink-faded);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.iso-hatch {
  fill: none;
  stroke: var(--ink-faded);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.7;
}
.shadow-disc {
  fill: var(--ink-faded);
  opacity: 0.1;
}

/* the persimmon halo behind the lead plate */
.plate-halo {
  position: absolute;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background: var(--accent-warm);
  opacity: 0.22;
  z-index: 0;
}
.cell-fig--wide .iso-icon { position: relative; z-index: 1; }

/* label tapes on Lots III */
.tape-label {
  position: absolute;
  top: 6%;
  right: 4%;
  font-size: 0.74rem;
  color: var(--accent-deep);
  background: var(--bg-page);
  border: var(--hair) solid var(--ink-faded);
  padding: 1px 6px;
  transform: rotate(-4deg);
  z-index: 2;
}

/* ---------- The postage-stamp cell IX ---------- */
.cell--c9 { align-items: center; text-align: center; }
.cell-stamp-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  color: var(--accent-deep);
  margin-top: 0.2em;
}
.cell-stamp-name i { color: var(--accent-deep); }
.stamp-goblin { color: var(--ink-faded); }
.cell-stamp-date {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--tarnish);
  margin-top: 0.1em;
}

/* ---------- The faux errata slip ---------- */
.errata-slip {
  background: var(--bg-page);
  border: var(--hair) solid var(--ink-faded);
  padding: 12px 16px;
  box-shadow: 0 4px 10px -4px rgba(58,36,24,0.16);
  transform: rotate(-1.4deg);
  align-self: start;
  font-size: 0.84rem;
  z-index: 6;
}
.errata-head {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ink-faded);
  margin-bottom: 0.35em;
}
.errata-list {
  list-style: none;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-primary);
}
.errata-list li { margin-bottom: 0.2em; }
.errata-list li::before { content: "— "; color: var(--ink-faded); font-style: normal; }
.errata-list i { color: var(--accent-deep); }

/* hairline ornament between mobile specimens — hidden on desktop */
.mobile-fleuron { display: none; }

/* ============================================================
   COLOPHON — simply present, no entrance animation
   ============================================================ */
.colophon {
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 80px) clamp(36px, 6vw, 88px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.colophon-rule {
  width: 100%;
  height: var(--hair);
  background: var(--accent-warm);
  margin-bottom: clamp(20px, 3vw, 36px);
}
.colophon-rule--end {
  margin-bottom: 0;
  margin-top: clamp(20px, 3vw, 36px);
  background: var(--ink-faded);
}
.colophon-goblin { color: var(--ink-faded); margin-bottom: 12px; }
.colophon-head {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: 0.02em;
  color: var(--accent-deep);
  margin-bottom: 0.5em;
}
.colophon-head i { color: var(--accent-deep); }
.colophon-body {
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-primary);
  margin-bottom: 1.4em;
}

.colophon-toggle-wrap {
  border: var(--hair) solid var(--ink-faded);
  background: var(--bg-cell);
  padding: clamp(16px, 2.4vw, 28px);
  max-width: 56ch;
  margin-bottom: 1.4em;
}
.colophon-state-label {
  font-size: 0.9rem;
  color: var(--tarnish);
  margin-bottom: 0.6em;
}
#impression-label { color: var(--accent-deep); }
.reprint-toggle {
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--bg-page);
  background: var(--accent-deep);
  border: var(--hair) solid var(--accent-deep);
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 380ms ease, color 380ms ease, transform 220ms ease;
}
.reprint-toggle:hover { transform: scale(1.024); }
body.reprint-1974 .reprint-toggle { background: var(--accent-warm); color: var(--ink-primary); border-color: var(--accent-warm); }
.colophon-note {
  margin-top: 0.9em;
  font-size: 0.86rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--tarnish);
}
.colophon-note i { color: var(--tarnish); }

.colophon-imprint {
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--tarnish);
}
.colophon-imprint i { color: var(--accent-deep); }

/* ============================================================
   RESPONSIVE — below 900px the bento relaxes to one column
   ============================================================ */
@media (max-width: 900px) {
  .specimens {
    grid-template-columns: 1fr;
    padding: clamp(18px, 4vw, 32px) clamp(16px, 5vw, 32px) clamp(24px, 6vw, 48px);
  }
  .gutter { display: none; }

  .bento {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .cell,
  .cell--c1, .cell--c2, .cell--c3, .cell--c4, .cell--c5,
  .cell--c6, .cell--c7, .cell--c8, .cell--c9 {
    grid-column: auto;
    grid-row: auto;
  }
  /* preserve each cell's character via aspect-ratio rather than reflow */
  .cell--c1 { aspect-ratio: 3 / 5; }
  .cell--c2 { aspect-ratio: 16 / 6; }
  .cell--c3, .cell--c4, .cell--c5, .cell--c8 { aspect-ratio: 1 / 1; }
  .cell--c6, .cell--c7 { aspect-ratio: 7 / 6; }
  .cell--c9 { aspect-ratio: 1 / 1; max-width: 220px; align-self: center; }

  .cell--c2 { aspect-ratio: auto; min-height: 280px; }
  .cell--c6, .cell--c7 { aspect-ratio: auto; }

  .errata-slip {
    grid-column: auto; grid-row: auto;
    order: 0;
    align-self: center;
    max-width: 320px;
  }

  /* inline Roman numeral at the head of each specimen, IM Fell, 0.86rem */
  .cell-mark { font-size: 0.86rem; }

  /* a centered hairline fleuron between every third specimen */
  .mobile-fleuron {
    display: block;
    text-align: center;
    font-size: 12pt;
    color: var(--ink-faded);
    margin: 4px 0;
  }

  /* on touch: scale-hover triggers on :active, faster (280ms) */
  .cell.is-revealed:hover { transform: none; box-shadow: 0 1px 0 rgba(58,36,24,0.06); }
  .cell.is-revealed:active {
    transform: scale(1.024);
    box-shadow: 0 12px 32px -8px rgba(58, 36, 24, 0.18);
    transition:
      box-shadow 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .cell.is-revealed:active .iso-icon {
    transform: scale(1.06) translateY(-3px);
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: 60ms;
  }

  .masthead-inner { grid-template-columns: 1fr; }
  .masthead-right { align-items: flex-start; text-align: left; }
  .masthead-pills { justify-content: flex-start; }
}

@media (max-width: 540px) {
  .masthead-title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .cell { padding: 20px; }
}