/* =========================================================================
   Mary Nethery — "The Persuasive Letter"
   One continuous sheet of ruled composition paper. A red margin rule runs
   the full height of every document. Covers are tipped in under gummed
   paper tape. Credibility is stamped; detailed records are listed.
   ========================================================================= */

/* ---- 1. Tokens --------------------------------------------------------- */

:root {
  /* Paper + inks. Paper, then three inks, never a fourth. */
  --paper:        #EDEDE7;   /* composition stock — cool, not cream */
  --paper-step:   #E3E3DC;   /* one tonal step, for a filed sheet */
  --paper-lift:   #F4F4EF;   /* the sheet laid on top */

  --ink:          #23262B;   /* pencil — 12.9:1 on paper */
  --ink-soft:     #4E545C;   /* 6.5:1 on paper */

  --rule:         #B4C6D6;   /* the blue ruling */
  --rule-strong:  #9DB2C7;
  --margin-red:   #CE3B2F;   /* the margin rule. Decorative only — 4.2:1 */
  --red-text:     #B32E23;   /* when red must carry words — 5.4:1 */
  --stamp:        #960018;   /* carmine stamp — 7.7:1 on paper */
  --stamp-deep:   #740013;   /* pressed carmine — 10.2:1 on paper */
  --tape:         #D9C48F;   /* gummed paper tape */
  --sheen:        rgb(255 255 255 / .32);  /* the specular lift along a tape strip */

  /* Only used inside the inverted envelope field. */
  --well:         color-mix(in srgb, #000 12%, transparent);  /* a field sunk into the carmine */
  --well-focus:   color-mix(in srgb, #000 20%, transparent);
  --error:        #FFD9D5;   /* error text on the carmine field — 7.0:1 */
  --error-rule:   #FFC9C3;   /* the rule beside it, and the field's own underline */

  /* The ruled rhythm. Every vertical measure is a multiple of this. */
  --line: 32px;

  /* The margin column the red rule lives at the edge of. */
  /* Keep the paper margin from consuming the reading area as text grows. */
  --margin: clamp(44px, 7vw, 108px);
  --gutter: clamp(20px, 3.2vw, 44px);
  --measure: 68ch;
  --track: 1240px;

  /* Where the red rule falls: the track's own left margin, not the
     viewport's, so the rule and the writing stay in register at any width. */
  --rule-x: max(var(--margin), calc(50% - var(--track) / 2 + var(--margin)));

  --shadow-tip:  0 2px 3px rgb(35 38 43 / .10), 0 10px 22px -8px rgb(35 38 43 / .30);
  --shadow-lift: 0 3px 5px rgb(35 38 43 / .12), 0 18px 38px -12px rgb(35 38 43 / .38);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --press: cubic-bezier(.3, .95, .35, 1);   /* a stamp strikes and stops; it does not bounce back */

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-prose:   Faustina, Georgia, "Times New Roman", serif;
  --font-type:    "Courier Prime", ui-monospace, "Courier New", monospace;
}

/* ---- 2. Reset ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
/* <picture> only picks the format; it must not join the layout. */
picture { display: contents; }
button, input, textarea, select { font: inherit; color: inherit; }
:where(a) { color: inherit; }

/* ---- 3. Browser surfaces ----------------------------------------------
   The parts we did not draw still carry the design.                      */

::selection { background: color-mix(in srgb, var(--stamp) 26%, transparent); color: var(--ink); }
:root { accent-color: var(--stamp); caret-color: var(--margin-red); scrollbar-color: var(--rule-strong) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border: 3px solid var(--paper); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--stamp); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2.5px solid var(--stamp);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- 4. The sheet ------------------------------------------------------
   One ruled field, continuous behind every section. Sections never get
   their own opaque background — a tonal step is a translucent wash, so
   the ruling runs through unbroken.                                      */

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-prose);
  font-size: 1.125rem;
  line-height: max(var(--line), 1.5em);
  overflow-wrap: anywhere;
  font-synthesis-weight: none;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--line) - 1px),
    var(--rule) calc(var(--line) - 1px),
    var(--rule) var(--line)
  );
  background-position: 0 calc(var(--line) * -1);
}

/* The margin rule. Absolute, full document height, never interrupted. */
body::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: var(--rule-x);
  width: 2px;
  background: var(--margin-red);
  opacity: .85;
  z-index: 2;
  pointer-events: none;
}

.sheet {
  max-width: var(--track);
  margin-inline: auto;
  padding-left: calc(var(--margin) + var(--gutter));
  padding-right: var(--gutter);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--stamp); color: var(--paper);
  padding: .625rem 1rem; z-index: 99; font-family: var(--font-type);
}
.skip:focus { left: var(--gutter); top: var(--gutter); }

/* ---- 5. Typography ----------------------------------------------------- */

.statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.125rem, 5.6vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--line); }
.prose em { font-style: italic; }

.lede { font-size: clamp(1.1875rem, 1.7vw, 1.4375rem); line-height: max(calc(var(--line) * 1.25), 1.5em); }

/* The correspondence layer: dates, addresses, filed metadata, stamps.
   Typewriter because this world is typed, not because it is "technical". */
.typed {
  font-family: var(--font-type);
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.typed--plain { text-transform: none; letter-spacing: .01em; }

/* Ink laid over a printed rule: the halo clears the ruling around each glyph
   so a line crossing small type never reads as a strikethrough. */
.typed, .textlink, .action, .nav a, .field label, .folio__label, .noart p {
  text-shadow: 0 0 4px var(--paper), 0 0 2px var(--paper);
}
.envelope :where(.typed, .textlink, .action), .envelope .field label {
  text-shadow: 0 0 4px var(--stamp), 0 0 2px var(--stamp);
}
.action--solid { text-shadow: none; }

/* ---- 6. Letterhead ----------------------------------------------------- */

.letterhead {
  position: relative;
  z-index: 3;
  padding-block: calc(var(--line) * .75);
  border-bottom: 1px solid var(--rule-strong);
}
.letterhead__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gutter); flex-wrap: wrap; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  letter-spacing: -.03em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}
.wordmark:hover { color: var(--stamp); }

.nav { display: flex; align-items: baseline; gap: clamp(1rem, 2.4vw, 2rem); }
.nav a {
  font-family: var(--font-type);
  font-size: .875rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: .375rem;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav a:hover { color: var(--stamp); border-bottom-color: var(--stamp); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--margin-red); }

.nav-toggle { display: none; background: none; border: 1.5px solid var(--ink-soft); border-radius: 2px; padding: .5rem .75rem; font-family: var(--font-type); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }

/* ---- 7. The stamp -----------------------------------------------------
   The site's credibility device. A rubber stamp, inked unevenly, struck
   slightly off square. Real text, so it stays selectable and readable.  */

.stamp {
  --rot: -2.4deg;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-type);
  font-weight: 700;
  font-size: clamp(.75rem, 1.05vw, .8125rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 2px solid currentColor;
  border-radius: 2px;
  padding: .5rem .75rem;
  rotate: var(--rot);
  filter: url(#stamp-ink);
  background: color-mix(in srgb, var(--stamp) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stamp) 22%, transparent);
  transition: rotate .32s var(--press), color .2s var(--ease), scale .32s var(--press);
}
.stamp:nth-of-type(2n)   { --rot:  1.8deg; }
.stamp:nth-of-type(3n)   { --rot: -1.1deg; }
.stamp:nth-of-type(5n)   { --rot:  2.6deg; }

.stamp--lead {
  /* Struck on the sheet, across the jacket's lower corner — the way a
     FORTHCOMING mark actually lands on a page. Most of the ink is on paper,
     so it stays legible; the overlap multiplies into the artwork. */
  position: absolute;
  z-index: 3;
  left: -38%;
  bottom: -16%;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-size: clamp(.8125rem, 1.4vw, 1rem);
  padding: .75rem 1.125rem;
  border-width: 3px;
  --rot: -8deg;
  color: var(--stamp-deep);
  background: color-mix(in srgb, var(--stamp) 8%, transparent);
  mix-blend-mode: multiply;
}
.stamp--date { font-size: .75rem; letter-spacing: .12em; opacity: .8; margin-top: .1875rem; }

.stamp-row { display: flex; flex-wrap: wrap; gap: .75rem clamp(.75rem, 1.6vw, 1.25rem); align-items: center; }

/* ---- 8. Tipped-in artwork ---------------------------------------------
   Nothing floats. Every image is fastened to the sheet with a visible
   strip of gummed paper tape.                                           */

.tipin { position: relative; display: inline-block; --tilt: -1.4deg; }
.tipin img {
  width: 100%; height: auto;
  rotate: var(--tilt);
  box-shadow: var(--shadow-tip);
  transition: rotate .5s var(--ease), box-shadow .5s var(--ease);
}
.tipin::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -.5rem; left: 50%;
  width: clamp(4.5rem, 26%, 7.5rem); height: 1.625rem;
  translate: -50% 0;
  rotate: calc(var(--tilt) * .5 - 1.6deg);
  background:
    linear-gradient(105deg, var(--sheen) 0 18%, transparent 60%),
    color-mix(in srgb, var(--tape) 88%, transparent);
  box-shadow: 0 1px 2px rgb(35 38 43 / .18);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.tipin--right { --tilt: 1.6deg; }
.tipin--flat  { --tilt: 0deg; }
.tipin--corner::after {
  top: -.375rem;
  left: var(--tape-x, 12%);
  translate: 0 0;
  rotate: var(--tape-rot, -6deg);
  width: var(--tape-w, clamp(3.5rem, 20%, 5.5rem));
  max-width: calc(100% - var(--tape-x, 12%));
}
.entry:nth-of-type(2n) .tipin--corner { --tape-rot:  4.5deg; --tape-x: 54%; --tape-w: clamp(3rem, 17%, 4.75rem); }
.entry:nth-of-type(3n) .tipin--corner { --tape-rot: -2.5deg; --tape-x: 30%; --tape-w: clamp(4rem, 24%, 6.25rem); }
.entry:nth-of-type(4n) .tipin--corner { --tape-rot:  8deg;   --tape-x: 66%; --tape-w: clamp(3.25rem, 19%, 5rem); }
.entry:nth-of-type(5n) .tipin--corner { --tape-rot: -9.5deg; --tape-x:  6%; --tape-w: clamp(3.5rem, 21%, 5.5rem); }

.enclosure { display: block; }
.enclosure img { rotate: 0deg; box-shadow: none; }
.enclosure figcaption { margin-top: .5rem; }

/* ---- 9. The one authored moment ---------------------------------------
   A filed sheet is pressed: the tape darkens, the sheet settles square,
   and the stamp strikes once. Nothing loops, nothing slides in.         */

.filed {
  position: relative;
  transition: background-color .4s var(--ease);
}
.filed:hover .tipin img,
.filed:focus-within .tipin img { rotate: 0deg; box-shadow: var(--shadow-lift); }
.filed:hover .stamp,
.filed:focus-within .stamp { rotate: 0deg; scale: 1.04; opacity: 1; color: var(--stamp-deep); }

/* ---- 10. Actions ------------------------------------------------------- */

.action {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--font-type); font-weight: 700;
  font-size: .875rem; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none;
  padding: .8125rem 1.25rem;
  border: 2px solid var(--stamp);
  border-radius: 2px;
  color: var(--stamp);
  background: transparent;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), translate .18s var(--ease);
}
.action:hover { background: var(--stamp); color: var(--paper); translate: 0 -2px; }
.action--solid { background: var(--stamp); color: var(--paper); }
.action--solid:hover { background: var(--stamp-deep); border-color: var(--stamp-deep); }
.action__arrow { transition: translate .18s var(--ease); }
.action:hover .action__arrow { translate: 3px 0; }

.textlink {
  font-family: var(--font-type); font-size: .8125rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--stamp);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em;
  text-decoration-color: color-mix(in srgb, var(--stamp) 40%, transparent);
  transition: text-decoration-color .18s var(--ease);
}
.textlink:hover { text-decoration-color: currentColor; }

/* Links inside running prose stay in the prose voice. */
.prose a {
  color: var(--stamp);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, var(--stamp) 45%, transparent);
}
.prose a:hover { text-decoration-color: currentColor; }

/* ---- 11. Sections ------------------------------------------------------ */

.band { padding-block: clamp(calc(var(--line) * 1.5), 7vw, calc(var(--line) * 3)); position: relative; }
main > section + section { border-top: 1px solid var(--rule-strong); }

.band__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gutter); flex-wrap: wrap; margin-bottom: calc(var(--line) * 1.25); }

/* The hero. The only place the dashed penmanship midline appears — this is
   the one section whose subject is children's own writing. */
.opening {
  position: relative;
  padding-block: clamp(calc(var(--line) * 1.5), 8vw, calc(var(--line) * 3.5));
}
.opening::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--line) / 2 - 1px),
    color-mix(in srgb, var(--rule-strong) 60%, transparent) calc(var(--line) / 2 - 1px),
    color-mix(in srgb, var(--rule-strong) 60%, transparent) calc(var(--line) / 2)
  );
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 15px);
  mask-image: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 15px);
  background-position: 0 calc(var(--line) * -1);
  pointer-events: none;
}
.opening > * { position: relative; }

/* Printed stationery: the client's two-cat mark heads the first sheet in
   pencil-neutral ink. Multiply lets the ruling run through its whites, so it
   reads as printed on the paper rather than pasted over it. */
.masthead {
  display: flex;
  justify-content: center;
  margin-bottom: calc(var(--line) * 1.25);
}
.masthead img {
  width: clamp(15rem, 38vw, 27rem);
  height: auto;
  mix-blend-mode: multiply;
}

.opening__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas: "copy aside" "detail aside" "actions aside";
  grid-template-rows: auto auto 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.opening__copy    { grid-area: copy; }
.opening__detail  { grid-area: detail; }
.opening__aside   { grid-area: aside; }
.opening__actions { grid-area: actions; }
.opening__meta { margin-bottom: calc(var(--line) * .75); }
.opening__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  margin-top: calc(var(--line) * .75);
}
.opening__sub { font-style: italic; color: var(--ink-soft); font-size: 1.0625rem; }
/* Gaps do the separating, so a wrap can never strand a lone middot. */
.credits { display: flex; flex-wrap: wrap; gap: 0 clamp(1rem, 2.4vw, 1.75rem); }
.opening__actions { display: flex; flex-wrap: wrap; gap: .875rem; align-content: start; }
.opening__aside { display: grid; gap: var(--line); justify-items: center; }
.opening__cover { position: relative; max-width: 22rem; width: 100%; }

/* Remy and Ruby: enclosed with the letter, at real drawing scale. */
.enclosed { max-width: 15rem; width: 100%; }
.enclosed img { width: 100%; height: auto; }

/* ---- 12. The file: books ----------------------------------------------- */

.file { display: grid; gap: calc(var(--line) * 1.25); }

/* The paper supplies the index ruling; row borders would double its lines. */
.book-start { margin-top: calc(var(--line) * 1.5); }
.book-start__list { margin-top: calc(var(--line) * .5); }
.book-start__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0 var(--gutter);
  align-items: baseline;
  padding-block: calc(var(--line) * .375);
}
.book-start__list a {
  display: inline-block;
  padding-block: calc(var(--line) * .125);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--stamp);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-shadow: 0 0 4px var(--paper), 0 0 2px var(--paper);
}
.book-start__list a:hover { color: var(--stamp-deep); }
.book-start__list .typed { line-height: max(calc(var(--line) * .75), 1.5em); }
@media (max-width: 48rem) {
  .book-start__list li { grid-template-columns: minmax(0, 1fr); }
}

.entry {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: calc(var(--line) * .75);
}
.entry + .entry { border-top: 1px solid var(--rule-strong); }
.entry--lead { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
.entry__body > * + * { margin-top: calc(var(--line) * .5); }
.entry__title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.entry__title a { text-decoration: none; }
.entry__title a:hover { color: var(--stamp); }
.entry--lead .entry__title { font-size: clamp(1.5rem, 2.8vw, 2.125rem); }
.entry__sub { font-style: italic; color: var(--ink-soft); }
.entry__meta { display: flex; flex-wrap: wrap; gap: .375rem 1rem; }
/* Break between words, not inside them; a long value wraps under its label. */
.entry__meta > * { display: inline-flex; flex-wrap: wrap; gap: 0 .4375rem; overflow-wrap: break-word; }
.entry__meta dt { color: var(--ink-soft); opacity: .8; }
.entry__meta dd { margin: 0; color: var(--ink); }
.entry__foot { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--line) * .5); padding-top: .25rem; }
.entry__foot .stamp-row { width: 100%; }

/* A title with no cover art available is shown as an empty tipped-in slot,
   not omitted and not faked. */
.noart {
  position: relative;
  aspect-ratio: 3 / 4;
  display: grid; place-content: center; gap: .5rem; text-align: center;
  padding: 1.25rem;
  border: 1.5px dashed var(--rule-strong);
  background: color-mix(in srgb, var(--paper-lift) 70%, transparent);
  color: var(--ink-soft);
}
.noart::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -.375rem; left: 22%;
  width: clamp(3.5rem, 21%, 5.25rem); height: 1.625rem;
  rotate: 5.5deg;
  background:
    linear-gradient(105deg, var(--sheen) 0 18%, transparent 60%),
    color-mix(in srgb, var(--tape) 88%, transparent);
  box-shadow: 0 1px 2px rgb(35 38 43 / .18);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* ---- 13. The bio ------------------------------------------------------- */

.bio { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.bio__aside { display: grid; gap: var(--line); }
.bio__photo { width: 100%; max-width: 15rem; }
.bio__body > * + * { margin-top: var(--line); }
.bio--story { grid-template-rows: auto 1fr; row-gap: var(--line); }
.bio--story .bio__body { grid-column: 2; grid-row: 1 / span 2; }
.bio__enclosures { display: grid; gap: var(--line); grid-column: 1; grid-row: 2; }

/* A letter's enclosures sit at the end, beside the sign-off. */
.bio__close { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(1.25rem, 3vw, 2.5rem); }
.bio__close .enclosed { max-width: none; width: max-content; }
.bio__close .enclosed img { width: 10rem; }
.enclosure figcaption { text-wrap: balance; }

.record { border-top: 1px solid var(--rule-strong); padding-top: calc(var(--line) * .5); }
.record dt { color: var(--ink-soft); }
.record dd { margin: 0 0 calc(var(--line) * .5); }
.record--disclosure summary {
  width: fit-content;
  color: var(--stamp);
  font-family: var(--font-type);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--stamp) 40%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .3em;
  cursor: pointer;
}
.record--disclosure summary::marker { color: var(--stamp); }
.record--disclosure summary:hover { text-decoration-color: var(--stamp); }
.record--disclosure[open] summary { margin-bottom: calc(var(--line) * .5); }

/* ---- 14. The envelope: contact -----------------------------------------
   The one inverted field on the site. The ruling reverses out; the
   address block is set the way an envelope is addressed.               */

.envelope {
  background-color: var(--stamp);
  color: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--line) - 1px),
    color-mix(in srgb, var(--paper) 16%, transparent) calc(var(--line) - 1px),
    color-mix(in srgb, var(--paper) 16%, transparent) var(--line)
  );
  background-position: 0 calc(var(--line) * -1);
  border-top: 1px solid var(--rule-strong);
}
.envelope .typed { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.envelope .action { border-color: var(--paper); color: var(--paper); }
.envelope .action:hover { background: var(--paper); color: var(--stamp); }
.envelope .action--solid { background: var(--paper); color: var(--stamp); }
.envelope .action--solid:hover { background: var(--paper-lift); border-color: var(--paper-lift); }
.envelope :where(a, button):focus-visible { outline-color: var(--paper); }
.envelope .stamp { color: var(--paper); border-color: currentColor; background: color-mix(in srgb, var(--paper) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 20%, transparent); }

.envelope__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.address > * + * { margin-top: calc(var(--line) * .5); }
.address__line { font-family: var(--font-type); font-size: clamp(1rem, 1.8vw, 1.25rem); letter-spacing: .02em; }

/* ---- 14b. The letter form ---------------------------------------------
   Fields are ruled lines, not boxes. You write on the paper.           */

.letter { margin-top: calc(var(--line) * 1.25); max-width: 34rem; }
.field + .field { margin-top: var(--line); }
.field label {
  display: block;
  font-family: var(--font-type);
  font-size: .8125rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  margin-bottom: .375rem;
}
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--font-prose);
  font-size: 1.0625rem;
  line-height: max(var(--line), 1.5em);
  color: var(--paper);
  background: var(--well);
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--paper) 55%, transparent);
  border-radius: 2px 2px 0 0;
  padding: .5rem .75rem;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.field textarea { resize: vertical; min-height: calc(var(--line) * 5); }
.field select {
  font-family: var(--font-type); font-size: .9375rem; letter-spacing: .02em;
  padding-right: 2.25rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 1rem top 1.35rem, right .625rem top 1.35rem;
  background-repeat: no-repeat;
}
.field select option { color: var(--ink); background: var(--paper); }
.field :where(input, textarea, select):hover { border-bottom-color: var(--paper); }
.field :where(input, textarea, select):focus-visible {
  outline: 2.5px solid var(--paper);
  outline-offset: 2px;
  background-color: var(--well-focus);
}
/* 78% is the floor that still clears 4.5:1 on the carmine field. */
.field :where(input, textarea)::placeholder { color: color-mix(in srgb, var(--paper) 78%, transparent); }

.field__error {
  font-family: var(--font-type);
  font-size: .8125rem;
  letter-spacing: .02em;
  margin-top: .375rem;
  padding-left: .75rem;
  border-left: 2px solid var(--error-rule);
  color: var(--error);
}
.field[data-invalid="true"] :where(input, textarea, select) { border-bottom-color: var(--error-rule); }

.field--actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: calc(var(--line) * 1.25); }
.form__status { font-family: var(--font-type); font-size: .8125rem; letter-spacing: .02em; color: color-mix(in srgb, var(--paper) 86%, transparent); margin: 0; }
.form__status[data-state="error"] { color: var(--error); }
.form__fallback { display: none; margin-top: var(--line); }
.form__fallback:target { display: block; }
.form-trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

button[disabled], .action[aria-disabled="true"] { opacity: .55; cursor: not-allowed; translate: 0 !important; }

/* ---- 15. Sign-off ------------------------------------------------------ */

.signoff { padding-block: calc(var(--line) * 1.5); border-top: 1px solid var(--rule-strong); }
.signoff__row { display: flex; flex-wrap: wrap; gap: var(--line) var(--gutter); justify-content: space-between; align-items: end; }
.signoff__name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; }
.signoff__nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }

/* ---- 16. The margin annotation ----------------------------------------
   A sticky note in the margin saying where on the sheet you are.       */

.folio {
  position: fixed;
  left: calc(var(--rule-x) - var(--margin)); top: 50vh;
  width: var(--margin);
  z-index: 4;
  display: grid; justify-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.folio[data-visible="true"] { opacity: 1; }
.folio__label {
  writing-mode: vertical-rl;
  font-family: var(--font-type);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  padding: .75rem .25rem;
  white-space: nowrap;
}

/* ---- 17. Responsive ---------------------------------------------------- */

/* A grid item's content may wrap inside its track at enlarged text sizes. */
:where(.opening__grid, .opening__aside, .bio, .bio__aside, .entry, .envelope__grid) > * {
  min-width: 0;
}
.bio__close .enclosed { max-width: 100%; }

@media (min-width: 60.0625rem) and (max-width: 74rem) {
  /* The lead stamp reaches left of the jacket into the copy column; on a
     narrow two-column sheet, hold the story text clear of its ink. */
  .opening__detail { padding-inline-end: 6rem; }
}

@media (max-width: 60rem) {
  /* Put the books action directly after the title on a single-column sheet. */
  .opening__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "actions" "aside" "detail"; grid-template-rows: auto; }
  .opening__aside { justify-items: start; grid-auto-flow: column; align-items: end; gap: var(--gutter); }
  .opening__cover { max-width: 15rem; }
  /* There is no paper to the left of the jacket on a narrow sheet, so the
     mark is struck below it instead, still crossing the bottom edge. */
  .stamp--lead { left: 4%; bottom: -22%; --rot: -5deg; }
  /* Room for the mark struck below the jacket, clear of the story text. */
  .opening__cover { margin-bottom: 5.5rem; }
  .enclosed { max-width: 11rem; }
  .envelope__grid { grid-template-columns: 1fr; }
  .folio { display: none; }
}

@media (max-width: 48rem) {
  :root { --line: 30px; }
  .nav-toggle[data-enhanced="true"] { display: inline-flex; }
  .nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding-top: calc(var(--line) * .5);
  }
  .nav[data-enhanced="true"] { display: none; }
  .nav[data-enhanced="true"][data-open="true"] { display: flex; }
  .nav a { width: 100%; padding-block: .875rem; border-bottom: 1px solid var(--rule-strong); font-size: 1rem; }
  .nav a[aria-current="page"] { border-bottom-color: var(--margin-red); }
  .letterhead__row { align-items: center; }
  .bio { grid-template-columns: 1fr; }
  .bio--story { grid-template-rows: auto; }
  .bio--story .bio__body, .bio__enclosures { grid-column: auto; grid-row: auto; }
  .entry, .entry--lead { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); }
  .opening__aside { grid-auto-flow: row; justify-items: center; }
  .opening__cover { max-width: 18rem; }
  .enclosed { max-width: 13rem; }
}

@media (max-width: 30rem) {
  body { font-size: 1.0625rem; }
  .entry, .entry--lead { grid-template-columns: 1fr; gap: var(--line); }
  .entry .tipin, .entry .noart { max-width: 13rem; }
  .opening__actions .action { width: 100%; justify-content: center; }
}

/* ---- 18. Motion preference --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .filed:hover .tipin img, .filed:focus-within .tipin img { rotate: var(--tilt); }
  .filed:hover .stamp, .filed:focus-within .stamp { rotate: var(--rot); scale: 1; }
  .action:hover { translate: 0; }
}

@media print {
  body::before, .folio, .nav-toggle { display: none; }
  body { background-image: none; }
  .envelope { background: none; color: var(--ink); }
  /* Re-ink the inverted envelope for paper, including live form states.
     Ink clears 12:1 on paper and 15:1 on unprinted white. */
  .envelope .typed, .envelope .action, .envelope .stamp,
  .envelope .field label, .envelope .field__error,
  .envelope .form__status { color: var(--ink); text-shadow: none; }
  .envelope .action, .envelope .stamp {
    background: none;
    border-color: var(--ink);
    box-shadow: none;
  }
  .envelope .field :is(input, textarea, select) {
    color: var(--ink);
    background: none;
    border-bottom-color: var(--ink);
    outline: none;
  }
  .envelope .field :is(input, textarea)::placeholder { color: var(--ink-soft); opacity: 1; }
  .envelope .field__error { border-color: var(--ink); }
  .envelope .form__status[data-state="error"] { color: var(--ink); }
}

/* Book records and client-supplied reviews. */
ul.recognition-list { list-style: disc; padding-inline-start: 1.25em; }
.recognition-list li + li { margin-top: .25rem; }
.record > .stamp-row { display: grid; justify-items: start; }
.book-reviews { display: grid; gap: var(--line); }
.book-reviews blockquote { border-inline-start: 2px solid var(--stamp); padding-inline-start: 1rem; }
.book-reviews figcaption { margin-top: .5rem; }
.book-buy { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.tipin > figcaption { margin-top: 1rem; color: var(--stamp); }