/* ============================================================
   pages.css — the paper, and everything printed on it

   Every page in this book is exactly 100cqi wide and 138.889cqi
   tall. That never changes: the aspect ratio is locked in
   book.css and it is the same in both layouts. So everything in
   here is sized in cqi, or in em and % which are relative to it,
   and nothing is sized in rem or px.

   That is what makes fitting a design decision rather than a
   hope. Because the page is always the same shape, cqi scaling
   is uniform — the line breaks fall in the same places at every
   size — so a page that fits once fits always, and no page needs
   to scroll. The budget is 86cqi across by 126.4cqi down, less
   whatever the heading takes.
   ============================================================ */

.sheet {
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(60% 40% at 2% 12%,   rgba(140, 100, 50, 0.10), transparent 70%),
    radial-gradient(45% 30% at 99% 72%,  rgba(140, 100, 50, 0.11), transparent 70%),
    radial-gradient(40% 24% at 70% 101%, rgba(120, 85, 40, 0.10), transparent 70%),
    linear-gradient(180deg,
      rgba(243, 234, 217, 0.88) 0%,
      rgba(239, 226, 203, 0.88) 55%,
      rgba(228, 212, 184, 0.88) 100%),
    var(--fibre);
  background-size: auto, auto, auto, auto, 400px 400px;
}

/* ---------- other stocks ---------- */

.sheet--dim {
  background-color: var(--paper-warm);
  background-image:
    radial-gradient(50% 32% at 4% 88%, rgba(140, 100, 50, 0.12), transparent 70%),
    linear-gradient(170deg,
      rgba(239, 226, 203, 0.9), rgba(230, 214, 186, 0.9) 60%, rgba(221, 201, 166, 0.9)),
    var(--fibre);
  background-size: auto, auto, 400px 400px;
}

.sheet--blank {
  background-color: #faf4e8;
  background-image:
    radial-gradient(45% 30% at 97% 8%, rgba(140, 100, 50, 0.08), transparent 70%),
    linear-gradient(180deg,
      rgba(250, 244, 232, 0.9), rgba(241, 230, 208, 0.9) 70%, rgba(232, 217, 189, 0.9)),
    var(--fibre);
  background-size: auto, auto, 400px 400px;
}

/* feint ruled, for signing */
.sheet--ruled {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 5cqi, rgba(93, 116, 144, 0.1) 5cqi 5.15cqi),
    linear-gradient(180deg,
      rgba(250, 244, 232, 0.9), rgba(241, 230, 208, 0.9) 70%, rgba(232, 217, 189, 0.9)),
    var(--fibre);
  background-size: auto, auto, 400px 400px;
}

.sheet--note {
  background-color: #ece2cd;
  background-image:
    linear-gradient(180deg, rgba(236, 226, 205, 0.92), rgba(221, 208, 179, 0.92)),
    var(--fibre);
  background-size: auto, 400px 400px;
}

/* ─────────────────────────────  OBITUARY  ───────────────────────────── */

.obit__eyebrow {
  margin: 0;
  padding: 1.4cqi 0;
  font-family: var(--label);
  font-weight: 300;
  font-size: 1.95cqi;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  border-top: 1px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.obit__name {
  margin: 3.8cqi 0 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 7.2cqi;
  line-height: 1;
  letter-spacing: -0.02em;
}

.obit__dates {
  margin: 1.8cqi 0 0;
  text-align: center;
  font-family: var(--label);
  font-weight: 300;
  font-size: 2.1cqi;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.obit__rule {
  width: 11cqi;
  margin: 3.2cqi auto 4.2cqi;
  border: 0;
  border-top: 3px double var(--ink);
}

.dropcap {
  float: left;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 3.4em;
  line-height: 0.78;
  padding: 0.06em 0.1em 0 0;
  color: var(--oxblood);
}

.obit__close {
  font-style: italic;
  text-align: center;
  color: var(--ink-soft);
  border-top: var(--rule);
  padding-top: 0.9em;
}

/* ──────────────────────────  A PAGE OF PROSE  ───────────────────────── */

/* The obituary set the house style for a page that is mostly words: one
   justified column, a drop cap, and exactly one thing to look at. Five
   pages use it now, so it lives here rather than in the obituary.
   A page holds about twenty lines of this; a heading costs three and a
   half, and whatever you put in to look at costs three or four more. */
.prose {
  font-size: 0.95em;
  text-align: justify;
  hyphens: auto;
  line-height: 1.66;
  color: #342b23;
}

.prose p { margin: 0 0 0.9em; }
.prose p:last-child { margin-bottom: 0; }

.prose em { font-style: italic; color: var(--oxblood); }

.prose code {
  font-size: 0.86em;
  background: rgba(42, 35, 29, 0.07);
  padding: 0.05em 0.3em;
  border-radius: 2px;
}

/* a time of day, inside the sentence it belongs to */
.clock {
  font-family: var(--mono);
  font-size: 0.82em;
  color: var(--oxblood);
}

/* one line lifted out and given the room it deserves */
.pullquote {
  margin: 3.6cqi 0;
  padding: 2.2cqi 0;
  border-top: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 4.2cqi;
  line-height: 1.35;
  color: var(--oxblood);
}

/* something somebody printed out and taped up */
.sign {
  max-width: 52cqi;
  margin: 5cqi auto 0;
  padding: 2.5cqi 4cqi;
  text-align: center;
  rotate: -1.8deg;
  border: 0.4cqi double #a4342a;
  background: #fffdf4;
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.6);
  font-family: var(--mono);
  font-size: 2.4cqi;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a4342a;
}

.sign p { margin: 0; }

/* the card you punched coming in and going home */
.timecard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2cqi;
  align-items: center;
  margin: 5cqi 0 0;
  padding: 2.5cqi 3cqi;
  border: 1px solid rgba(42, 35, 29, 0.4);
  background-color: #fdfaf0;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 5cqi, rgba(42, 35, 29, 0.06) 5cqi 5.1cqi);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.5);
  text-align: center;
  font-family: var(--mono);
}

.timecard p { margin: 0; }

.timecard__k {
  display: block;
  font-family: var(--label);
  font-weight: 300;
  font-size: 1.6cqi;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.timecard__v {
  display: block;
  font-size: 3.4cqi;
  color: var(--ink);
}

.timecard__stamp {
  justify-self: center;
  padding: 0.5cqi 1.2cqi;
  rotate: -6deg;
  border: 1px solid #a4342a;
  font-size: 2.2cqi;
  letter-spacing: 0.1em;
  color: #a4342a;
}

/* ─────────────────────────────  TIMELINE  ───────────────────────────── */

.timeline {
  /* --rail is where the vertical line sits, measured from the list's left
     edge; --gutter-w is where the text starts. The year lives between. */
  --rail: 11cqi;
  --gutter-w: 15cqi;

  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--gutter-w);
}

.timeline::before {
  content: "";
  position: absolute;
  left: var(--rail);
  top: 1.2cqi;
  bottom: 3.4cqi;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--ink-faint) 6%, var(--ink-faint) 92%, transparent);
}

.timeline__item {
  position: relative;
  padding: 0 0 2.8cqi;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--rail) - var(--gutter-w) - 0.85cqi);
  top: 1.5cqi;
  width: 1.7cqi;
  height: 1.7cqi;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink-soft);
}

.timeline__item--last::before {
  background: var(--oxblood);
  border-color: var(--oxblood);
  box-shadow: 0 0 0 0.8cqi rgba(124, 47, 37, 0.14);
}

.timeline__year {
  position: absolute;
  left: calc(-1 * var(--gutter-w));
  top: 0.4cqi;
  width: calc(var(--rail) - 2.2cqi);
  text-align: right;
  font-family: var(--label);
  font-weight: 400;
  font-size: 2.6cqi;
  letter-spacing: 0.06em;
  color: var(--oxblood);
}

.timeline__body h3 {
  margin: 0 0 0.3em;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.3cqi;
  line-height: 1.22;
}

.timeline__body p {
  margin: 0;
  color: #3d342b;
  font-size: 0.94em;
  line-height: 1.48;
}

.aside {
  display: inline-block;
  margin-top: 1.4cqi;
  font-family: var(--hand);
  font-size: 1.35em;
  line-height: 1.2;
  color: var(--faded-blue);
  transform: rotate(var(--tilt, -2deg));
}

/* ─────────────────  SCHOOL LIFE — clubs, societies, jokes  ──────────── */

.clubs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4cqi 5cqi;
}

.club {
  padding-top: 2.2cqi;
  border-top: 1px solid rgba(42, 35, 29, 0.28);
}

.club h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.1cqi;
  line-height: 1.2;
}

.club__years {
  margin: 0.6cqi 0 1.2cqi !important;
  font-family: var(--label);
  font-weight: 300;
  font-size: 1.85cqi;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.club p {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.48;
  color: #3d342b;
}

.club code {
  font-size: 0.86em;
  background: rgba(42, 35, 29, 0.07);
  padding: 0.05em 0.3em;
  border-radius: 2px;
}

/* the last one gets the weight it deserves */
.club--last { border-top-color: var(--oxblood); }
.club--last h3 { font-style: italic; }

/* A line in somebody's handwriting at the foot of a page. Three pages
   want one, so there is one rule for it. */
.handnote {
  margin: 5cqi auto 0;
  text-align: center;
  font-family: var(--hand);
  font-size: 4.6cqi;
  line-height: 1.3;
  color: var(--faded-blue);
  transform: rotate(var(--tilt, 0deg));
}

/* the rest of the class, named rather than photographed */
.classlist {
  margin: 4.5cqi 0 0;
  text-align: center;
  font-size: 0.9em;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ────────────────────────────  WHITEBOARD  ──────────────────────────── */

.whiteboard {
  position: relative;
  margin: 0 0 4cqi;
  padding: 2.5cqi 3cqi;
  border: 0.7cqi solid #b9a98c;
  border-radius: 0.6cqi;
  background: linear-gradient(170deg, #fcfcfa, #f1f1ec 70%, #e7e7e0);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    0 16px 30px -18px rgba(0, 0, 0, 0.55);
  font-family: var(--mono);
  font-size: 2cqi;
  line-height: 1.6;
  color: #2b4f80;
}

.whiteboard pre { margin: 0; white-space: pre-wrap; }

/* the thing written in the corner of every whiteboard that ever was */
.whiteboard__warning {
  position: absolute;
  top: 0.6cqi;
  right: 2cqi;
  margin: 0;
  font-family: var(--hand);
  font-size: 3cqi;
  color: #a4342a;
  rotate: -3deg;
}

/* ───────────────────────────  THINGS WE LOST  ───────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5cqi;
  align-items: start;
}

.card {
  position: relative;
  margin: 0;
  padding: 3cqi 3cqi 3.4cqi;
  background: #fffdf4;
  color: #332b23;
  font-size: 0.95em;
  line-height: 1.4;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 9px 18px -11px rgba(0,0,0,0.55);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.card::before {
  content: "";
  position: absolute;
  top: -1.3cqi;
  left: 3.2cqi;
  width: 7.5cqi;
  height: 2.9cqi;
  rotate: -5deg;
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,0.45) 0 3px, rgba(255,255,255,0) 3px 6px),
    rgba(222, 208, 164, 0.8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.card:hover {
  transform: rotate(var(--tilt, 0deg)) translateY(-3px) scale(1.015);
  box-shadow: 0 16px 28px -14px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.card--mono {
  font-family: var(--mono);
  font-size: 0.82em;
  background: #2b2a26;
  color: #e8dcc0;
  box-shadow: 0 9px 18px -11px rgba(0, 0, 0, 0.8);
}
.card--mono::before { background: rgba(200, 186, 142, 0.6); }

.card--shout { color: var(--highlighter); font-weight: 500; }

.card--hand {
  font-family: var(--hand);
  font-size: 1.4em;
  line-height: 1.2;
  background: #f6ef92;
  box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.6);
}
.card--hand::before { display: none; }

.card em { font-style: italic; color: var(--oxblood); }
.card--mono em, .card--hand em { color: inherit; }

/* ───────────────────────────  SUPERLATIVES  ─────────────────────────── */

.supers { margin: 0; }

.supers__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4cqi 4cqi;
  align-items: baseline;
  padding: 2.4cqi 0;
  border-bottom: 1px dotted rgba(42, 35, 29, 0.3);
}

.supers__row dt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.1cqi;
  line-height: 1.4;
  color: var(--ink);
}

.supers__row dd {
  margin: 0;
  text-align: right;
  font-family: var(--hand);
  font-size: 4cqi;
  line-height: 1.2;
  color: var(--oxblood);
}

/* ────────────────────────────  SIGNATURES  ──────────────────────────── */

.sigs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6cqi 4cqi;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.sig {
  margin: 0;
  line-height: 1.12;
  transform: rotate(var(--tilt, 0deg));
}

.sig span {
  display: block;
  margin-top: 0.35em;
  font-size: 0.72em;
  opacity: 0.8;
}

.sig--a { font-family: var(--hand);   font-size: 4.2cqi; color: #2f4f7a; font-weight: 600; }
.sig--b { font-family: var(--hand-2); font-size: 3cqi;   color: var(--oxblood); }
.sig--c { font-family: var(--hand);   font-size: 4.4cqi; color: #3e6b4a; font-weight: 700; }
.sig--d { font-family: var(--hand);   font-size: 4.2cqi; color: #5b3f7a; }

/* ──────────────────────────  CLASS NOTES  ───────────────────────────── */

.notes { margin: 0; }

/* The name runs into the note, the way an alumni column does, so the
   entries read as prose rather than as a table. The single space the
   markup leaves between dt and dd is the space you see. */
.notes__item {
  margin: 0 0 2.2cqi;
  padding-bottom: 2.2cqi;
  border-bottom: 1px dotted rgba(42, 35, 29, 0.26);
  font-size: 0.94em;
  line-height: 1.5;
  color: #3d342b;
}

.notes__item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.notes__who {
  display: inline;
  font-family: var(--label);
  font-weight: 400;
  font-size: 0.8em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.notes__item dd {
  display: inline;
  margin: 0;
}

/* ──────────  THE NOTE — green-bar continuous-feed stationery  ────────── */

.fanfold {
  position: relative;
  padding: 5cqi 8cqi;
  color: #2f2b22;
  font-family: var(--mono);
  font-size: 2.2cqi;
  /* the line box IS the green bar, so the two are one number */
  line-height: 3.8cqi;
  background-color: #fbfaf1;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(140, 176, 136, 0.2) 0 3.8cqi,
    rgba(255, 255, 255, 0) 3.8cqi 7.6cqi
  );
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 20px 40px -20px rgba(0, 0, 0, 0.6);
}

/* the sprocket strips, punched through to the dark behind */
.fanfold::before,
.fanfold::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4cqi;
  background-color: #f4f1e4;
  background-image: radial-gradient(circle, #0e1620 0 0.45cqi, transparent 0.48cqi);
  background-size: 100% 2.9cqi;
  background-position: center 0.8cqi;
}

.fanfold::before { left: 0;  border-right: 1px dashed rgba(0, 0, 0, 0.2); }
.fanfold::after  { right: 0; border-left:  1px dashed rgba(0, 0, 0, 0.2); }

.fanfold p { margin: 0 0 3.8cqi; }

.fanfold em { font-style: italic; color: var(--oxblood); }

.fanfold__head {
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #4b6b46;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  padding-bottom: 1cqi;
}

.fanfold__punch {
  color: var(--oxblood);
  font-weight: 500;
}

.fanfold__sign {
  margin-bottom: 0 !important;
  padding-top: 3.8cqi;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.fanfold__sign span {
  color: var(--ink-faint);
  font-size: 0.86em;
}

/* ─────────────────────────────  CLOSING  ────────────────────────────── */

.sheet--closing {
  display: grid;
  align-content: safe center;
  justify-items: center;
  text-align: center;
  background-color: var(--paper-warm);
  background-image:
    radial-gradient(90% 70% at 50% 40%,
      rgba(251, 245, 232, 0.92), rgba(239, 226, 203, 0.92) 55%, rgba(228, 212, 184, 0.92)),
    var(--fibre);
  background-size: auto, 400px 400px;
}

.closing { padding: 4cqi 0; }

.closing__mark {
  margin: 0 0 4.5cqi;
  font-size: 4cqi;
  color: var(--gold-deep);
  opacity: 0.8;
}

.closing__lyric {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

.closing__lyric span {
  display: block;
  font-size: 4.4cqi;
  line-height: 1.42;
}

.closing__lyric--big {
  font-size: 7.4cqi !important;
  line-height: 1.16 !important;
  font-weight: 600;
  margin-top: 0.3em;
}

.closing__ded {
  margin: 7cqi 0 0;
  font-family: var(--hand);
  font-size: 4.2cqi;
  line-height: 1.32;
  color: var(--oxblood);
}

.closing__sig {
  margin: 4cqi 0 0;
  font-family: var(--label);
  font-weight: 300;
  font-size: 1.9cqi;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ────────────────────────────  COLOPHON  ────────────────────────────── */

.colophon {
  text-align: center;
  color: rgba(198, 162, 74, 0.55);
}

.colophon__head {
  margin: 0 0 4.5cqi !important;
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: 4cqi !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: rgba(232, 205, 132, 0.8);
}

.colophon p {
  margin: 0 0 1.8cqi;
  font-family: var(--label);
  font-weight: 200;
  font-size: 1.85cqi;
  line-height: 1.6;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.colophon__fine {
  margin: 4cqi auto 0 !important;
  font-family: var(--book) !important;
  font-style: italic;
  font-size: 2.9cqi !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(232, 205, 132, 0.4);
  line-height: 1.6;
}

.colophon__fine--last { color: rgba(232, 205, 132, 0.3); }

.colophon__set {
  margin-top: 6cqi !important;
  padding-top: 4cqi;
  border-top: 1px solid rgba(198, 162, 74, 0.18);
  font-size: 1.7cqi !important;
  line-height: 2;
  color: rgba(198, 162, 74, 0.4);
}