/* CV Heap · direction B, the paper case file.
Written against tokens.css. Sizes, paddings and rotations are the
values measured off the Figma file, not approximations.
Plain CSS. No build step, no framework, no JavaScript. */

/* ---------- 0. the scale ---------------------------------------
Everything in both files is in rem, so the page is one drawing at
one scale. The root below is that scale, and rem rather than px
so a raised browser font size still gets through.              */

/* Grows with the width, but never past what the height can hold: a
sheet has to fit between the case line and the foot of the window
to take its place in the pile, and a wide, short window would blow
it past that on width alone. */
html {
  font-size: clamp(1rem, min(0.59rem + 0.55vw, 1.9vh), 1.25rem);

  /* so that a drawer can be animated to its own height, rather than
     to a number we would have to guess and keep in step */
  interpolate-size: allow-keywords;

  /* A tab slides the page to its sheet rather than cutting to it.
  Turned off for reduced motion in tokens.css. */
  scroll-behavior: smooth;
}

/* ---------- 1. reset and base ---------------------------------- */

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

body {
  margin: 0;
  padding: 0 0 3.5rem;
  background: var(--board);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

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

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--ink-invert);
  text-decoration: none;
  transition: top var(--duration) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* For text that has to be read aloud but not drawn. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 2. the board, the folder, the tabs ------------------ */

/* The tabs and the case line are the folder, not the paper in it.
Wrapped together so they also stop together. */
.file { position: relative; }

.tabs {
  position: sticky;
  top: 0;
  z-index: 6;
}

/* The colour goes on the row and not on the nav around it: a band
the width of the window cuts a straight line through the shadow
the folder casts on the board. */
.tabs__list {
  background: var(--board);
  display: flex;
  align-items: flex-end;   /* the tabs sit on the folder, not above it */
  gap: 0.25rem;
  width: min(100% - var(--page-pad) * 2, var(--page) - var(--page-pad) * 2);
  margin: 0 auto;
  padding: var(--board-top) 0 0 2.5rem;
  list-style: none;
}

/* The row has to be exactly --board-top + --tabs-h tall, because
that is where the case line is told to stop. Left to the font it
measured 2.30px over with the fallbacks and 2.52px with Courier
Prime loaded, and the case line jumped that far the first time it
pinned. The tab carries the height instead. */
.tab {
  display: flex;
  align-items: center;
  height: var(--tabs-h);
  padding: 0 1.125rem;
  background: var(--tab-rest);
  border-radius: var(--radius-tab) var(--radius-tab) 0 0;
  box-shadow: inset 0 1px 0 var(--tab-lit);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-tab);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration) var(--ease);
}
.tab:hover { background: var(--tab-hover); }

/* Not the tint above: that is what a closed tab looks like, and the
open one would read as having shut itself. It lifts instead. */
.tab[aria-current]:hover { background: var(--tab-open-hover); }

/* ---- the rest of the tabs -------------------------------------
The last three sections are the next three tabs in the row. Under
34rem the row has no space for them and the drawer in section 11
takes over. The row and the drawer are two controls and not one,
because a details that is closed hides its own contents, and the
only way to lay them back out in a row is a pseudo element browsers
only agreed on in 2025: on anything older the row came up with two
tabs and nothing after them. Whichever of the two the screen is not
using is display: none, so only one of them is ever in the page. */
.tabs__rest,
.tabs__more {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
}
.tabs__more { margin: 0; padding: 0; list-style: none; }
.tabs__drawer { display: none; }
.more__list { margin: 0; padding: 0; list-style: none; }

/* The open tab is cut from the same card as the folder. */
.tab[aria-current] {
  background: var(--folder);
  color: var(--ink);
  font-weight: 700;
  /* Two pixels taller and pulled down by two, so the seam is
     covered without the row growing. */
  height: calc(var(--tabs-h) + 2px);
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
}

/* The file casts one shadow and it never moves. The sheets used to
carry it one each, which is wrong in a pile: a shadow belonging to
a sheet travels with it, sliding up past the case line as the
sheet stops. It belongs to the folder now, cast sideways only so
nothing dark falls across the seam with the back cover. */
.folder {
  box-shadow:
    inset 0 1px 0 var(--edge-lit),
    -0.75rem 0 1.75rem -0.75rem rgb(var(--shadow) / 0.34),
     0.75rem 0 1.75rem -0.75rem rgb(var(--shadow) / 0.34);
  position: relative;
  width: min(100% - var(--page-pad) * 2, var(--page) - var(--page-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--folder-pad) var(--folder-pad);
  background: var(--folder);
  border-radius: 0 var(--radius-tab) 0 0;
}

.folder__head {
  position: sticky;
  top: calc(var(--board-top) + var(--tabs-h));
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  /* Both halves of the line sit on the same baseline. Without this the
  left one stretches to the row while the right one centres inside the
  group it shares with the switch, and the two ends of the same line
  end up 2.33px apart. */
  align-items: center;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  /* Out to the edges of the folder. Rotating a box makes it wider, up
  to two pixels a side, which is enough to show past a case line
  that stops at the paper. */
  margin-inline: calc(var(--folder-pad) * -1);
  padding: 0.4rem calc(0.5rem + var(--folder-pad));
  background: var(--folder);
  border-radius: 0 var(--radius-tab) 0 0;
}

.folder__meta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* The switch between the two themes, painted in the colours of the one
you are not in, so that what you see is where you are going. The word
does the same: in light it reads dark, in dark it reads light. */
.theme {
  flex: none;
  padding: 0.1875rem 0.5rem;
  background: var(--ink);
  color: var(--ink-invert);
  border: 0;
  border-radius: var(--radius-tab);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}
.theme:hover { background: var(--button-hover); }
.theme:active { transform: translateY(1px); }

.theme__word--light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme__word--dark  { display: none; }
  :root:not([data-theme="light"]) .theme__word--light { display: inline; }
}
:root[data-theme="dark"] .theme__word--dark  { display: none; }
:root[data-theme="dark"] .theme__word--light { display: inline; }

/* The folder holds the top of the window, so a link straight to a
heading would land it underneath. The target is a marker in the
flow just ahead of the sheet, offset by what the folder holds. */
.anchor {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--folder-hold) + 0.75rem);
}

/* ---------- 3. a sheet of paper --------------------------------- */

.sheet {
  position: relative;
  margin-bottom: 2rem;
  padding: var(--sheet-pad-y) var(--sheet-pad-x) 3.25rem var(--sheet-pad-left);
  background: var(--sheet);
  box-shadow:
    inset 0 1px 0 var(--edge-lit),
    0 0.875rem 1.75rem rgb(var(--shadow) / 0.30);
}
.sheet:last-child { margin-bottom: 0; }

main > .sheet:nth-of-type(1) { rotate: -0.3deg; }
main > .sheet:nth-of-type(2) { rotate:  0.22deg; }
main > .sheet:nth-of-type(3) { rotate: -0.26deg; }
main > .sheet:nth-of-type(4) { rotate:  0.24deg; }

/* The punched holes run down the spine of every sheet. */
.sheet::before {
  content: "";
  position: absolute;
  left: 1.625rem;
  top: 3.625rem;
  bottom: 3.625rem;
  width: 0.8125rem;
  background-image: radial-gradient(circle at 50% 0.4062rem, var(--hole) 0.4062rem, transparent 0.4062rem);
  background-size: 0.8125rem 5.25rem;
  background-repeat: repeat-y;
}


.sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem var(--gap-head);
  margin-bottom: 1.375rem;
}

/* ---------- 4. type --------------------------------------------- */

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, var(--t-hero));
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--ink);
  isolation: isolate;   /* keeps the marker behind its own words */
}
.display__line { display: inline; }
.display__line + .display__line { margin-top: 0.028em; }

/* Painted as a background on the inline element, so it follows the
text if it wraps. Two numbers control it and they are the only
ones to touch if it sits high or low against the real face:
--marker-h is how tall the pass is, --marker-y how far down it
starts from the top of the letters. */
.display mark {
  --marker-h: 0.22em;
  --marker-y: 0.67em;
  background-image: linear-gradient(var(--marker), var(--marker));
  background-repeat: no-repeat;
  background-size: 100% var(--marker-h);
  background-position: 0 var(--marker-y);
  padding: 0 0.07em;
  margin: 0 -0.07em;
  color: var(--ink);
}

.heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, var(--t-heading));
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}

.subheading {
  margin: 0 0 1.125rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, var(--t-subheading));
  line-height: var(--lh-sub);
  letter-spacing: var(--ls-sub);
  color: var(--ink);
}

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-wordmark);
  letter-spacing: var(--ls-wordmark);
  color: var(--ink);
}

.lede {
  max-width: 52ch;
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  color: var(--ink-2);
}
.lede--narrow { max-width: 74ch; font-size: var(--t-lead); line-height: var(--lh-lead); }

.sheet p { max-width: 66ch; }

.stamp-line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: var(--ls-filed);
  text-transform: uppercase;
  color: var(--brass);
}
.stamp-line--right {
  text-align: right;
  font-size: var(--t-mono-2xs);
  letter-spacing: var(--ls-meta);
  line-height: 1.7;
}

.sheet__head .stamp-line {
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-3);
}

.small-print {
  max-width: 60ch;
  font-family: var(--font-mono);
  font-size: var(--t-mono-md);
  line-height: var(--lh-mono-md);
  color: var(--ink-3);
}

mark {
  background: var(--marker);
  color: var(--ink);
  padding: 0 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Only the headline hands the strike to a drawn stroke. Everywhere
   else <del> keeps a mark of its own. */
.struck del { text-decoration: none; }

/* ---------- 5. the cover ---------------------------------------- */

.sheet--cover { padding-top: 3rem; }
.sheet--cover .sheet__head {
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 2.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--ink);
}
.wordmark { text-transform: uppercase; }
.sheet--cover .stamp-line--right { line-height: 1.3; }

/* The clip lives in the header, not the cover: it is the folder's
clip, so the sheets pass under it as they go by. */
.clip {
  position: absolute;
  /* anchored to the foot of the case line, so it hangs the same
     whether that line is one row or two */
  bottom: -2.5rem;
  left: 13.5rem;
  width: 2.125rem;
  height: 4rem;
  color: var(--clip);
  rotate: -6deg;
  filter: drop-shadow(1px 2px 2px rgb(var(--shadow) / 0.28));
}

.struck { position: relative; display: inline-block; }
.struck__pen {
  position: absolute;
  left: -2.56%;
  top: 47%;
  width: 104.4%;
  height: 0.257em;
  translate: 0 -50%;
  fill: var(--red);
  /* Lighter than the pen on the CV. 0.72 is the floor: below it the
  stroke drops under 3:1 against the paper and stops counting as a
  graphic anyone can see. */
  opacity: 0.72;
  pointer-events: none;
}

.sheet--cover .lede { max-width: 31.25rem; margin: 1.75rem 0 0; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-actions);
  margin-top: 2rem;
}

.button {
  display: inline-block;
  padding: 0.9375rem 1.5rem;
  background: var(--ink);
  color: var(--ink-invert);
  font-family: var(--font-strong);
  font-weight: 700;
  font-size: var(--t-ui);
  line-height: 1;
  text-decoration: none;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              background var(--duration) var(--ease);
  box-shadow: 0 1px 0 rgb(var(--shadow) / 0.25);
}
.button:hover  { background: var(--button-hover); box-shadow: 0 2px 0 rgb(var(--shadow) / 0.30); }
.button:active { transform: translateY(1px); box-shadow: none; }

.link {
  color: var(--link);
  font-size: var(--t-ui);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--duration) var(--ease),
              color var(--duration) var(--ease);
}
.link:hover  { text-decoration-thickness: 2px; }
.link:active { color: var(--red); }
.link--quiet { color: inherit; font-size: inherit; }
.link--plain { color: inherit; font-size: inherit; text-decoration-color: var(--line-loud); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.note {
  position: absolute;
  top: 8.6875rem;
  /* Its right edge lands on the edge of the sheet. Hanging past it
  read badly in the pile: a covered sheet still shows its sides. */
  right: 0;
  width: 11.9375rem;
  padding: 0.875rem 0.9375rem 1rem;
  background: var(--note);
  color: var(--ink);
  rotate: -2.2deg;
  box-shadow:
    inset 0 1px 0 var(--edge-lit),
    2px 0.3125rem 0.75rem rgb(var(--shadow) / 0.20);
}
.note p {
  margin: 0;
  max-width: none;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: var(--lh-mono);
}
.note__label {
  margin-bottom: 0.625rem !important;
  font-weight: 700;
  font-size: var(--t-mono-3xs) !important;
  letter-spacing: var(--ls-note);
  text-transform: uppercase;
  color: var(--note-label);
}

/* ---------- 6. the CV specimens --------------------------------- */

.split {
  display: grid;
  grid-template-columns: 32.25rem minmax(0, 1fr);
  gap: var(--gap-specimen);
  align-items: start;
}
.split--evidence { grid-template-columns: 33.75rem minmax(0, 1fr); }

/* Grid children are min-width:auto by default, so a wide table
   inside one pushes the whole page sideways instead of scrolling
   inside its own box. This is the line that stops that. */
.split > * { min-width: 0; }

.specimen { margin: 0; }

.cv {
  position: relative;
  padding: 1.5rem 1.625rem 1.875rem;
  background: var(--sheet-2);
  box-shadow:
    inset 0 1px 0 var(--edge-lit),
    0 0.625rem 1.25rem rgb(var(--shadow) / 0.26);
}

.cv__name {
  margin: 0;
  max-width: none;
  font-family: var(--font-strong);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--cv-text);
}
.cv__role {
  margin: 0.5625rem 0 1.125rem;
  max-width: none;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--cv-role);
}
.cv__line {
  margin: 0 0 0.5625rem;
  max-width: none;
  font-size: var(--t-cv);
  line-height: var(--lh-cv);
  color: var(--cv-text);
}

/* A wash over the words, not a line through them: you can still read
   what the filter threw away. The element stays <del>. */
.cv del {
  text-decoration: none;
  background: var(--wash-red);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.1em 0.14em;
  /* Faded, but still a readable 4.75:1 on the red wash. The grey it
     used to have measured 3.76 there, which is under the floor. */
  color: var(--ink-3);
}

.cv--kept mark { background: var(--wash-green); color: var(--green-ink); }
.cv--kept .cv__line { color: var(--green-ink); }
.cv__keyword { font-weight: 600; color: var(--cv-keyword); }
.cv--rejected mark { font-weight: 600; }

.pen-note {
  margin-left: 0.875rem;
  font-family: var(--font-mono);
  font-style: italic;
  font-size: var(--t-mono);
  color: var(--red);
}

.cv__disclaimer {
  margin: 0.875rem 0 0;
  max-width: none;
  font-family: var(--font-mono);
  font-size: var(--t-mono-2xs);
  letter-spacing: var(--ls-disclaimer);
  color: var(--cv-fine);
}

.verdict {
  position: absolute;
  right: 1.125rem;
  bottom: -1.375rem;
  margin: 0;
  padding: 0.4375rem 1rem;
  font-family: var(--font-display);
  font-size: var(--t-stamp);
  letter-spacing: var(--ls-stamp);
  text-transform: uppercase;
  line-height: 1.3;
  border: 3px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 3px;
  background: var(--verdict);
  rotate: -6deg;
}
.verdict--out { color: var(--red); }
.verdict--in  { color: var(--green); }

/* ---------- the filter's ticket --------------------------------- */

.ticket {
  max-width: 26.25rem;
  margin-top: 1.625rem;
  padding: 0.9375rem 1.125rem 1.0625rem;
  background: var(--folder);
  border: 1.5px dashed var(--ticket);
  font-family: var(--font-mono);
  font-size: var(--t-mono-md);
  color: var(--ink-2);
}
.ticket__label {
  margin: 0 0 0.625rem;
  max-width: none;
  font-weight: 700;
  font-size: var(--t-mono-2xs);
  letter-spacing: var(--ls-filed);
  text-transform: uppercase;
  color: var(--ink);
}
.ticket__list { margin: 0; padding: 0; list-style: none; }
.ticket__list li { margin-bottom: 0.3125rem; }
.ticket__answer { color: var(--ink-3); }
.ticket__answer::before { content: "  ·  "; }
.ticket__result {
  margin: 0.875rem 0 0;
  max-width: none;
  font-weight: 700;
  color: var(--red);
}

/* ---------- 7. the scorecard and the charter -------------------- */

.scorecard {
  width: 100%;
  border-collapse: collapse;
  background: var(--sheet-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 var(--edge-lit),
    0 2px 0.625rem rgb(var(--shadow) / 0.10);
}
.scorecard caption {
  padding: 1.5rem 1.5rem 0.875rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--ink-3);
}
.scorecard__label {
  display: block;
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}
.scorecard__note { display: block; margin-top: 0.5rem; }

.scorecard th, .scorecard td { padding: 0.6875rem 0.5rem; }
.scorecard thead th {
  font-family: var(--font-mono);
  font-size: var(--t-mono-2xs);
  font-weight: 400;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--ink-3);
}
.scorecard tbody th {
  text-align: left;
  padding-left: 1.5rem;
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--ink-2);
}
.scorecard tbody tr + tr th,
.scorecard tbody tr + tr td { border-top: 1px solid var(--line); }
.scorecard td { text-align: center; }
.scorecard tbody tr td:last-child { padding-right: 1.5rem; }
.scorecard abbr { text-decoration: none; }

.dot {
  display: inline-block;
  width: 0.5625rem; height: 0.5625rem;
  border-radius: var(--radius-pill);
  background: var(--green);
}
.dot--off { background: none; border: 1.5px solid var(--ink); opacity: 0.28; }

.charter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-charter);
  margin: 2.125rem 0 0;
  padding: 0;
  list-style: none;
}
.charter li {
  padding-top: 0.6875rem;
  border-top: 1px solid var(--ink);
}
.charter strong {
  display: block;
  margin-bottom: 0.4375rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-2xs);
  letter-spacing: var(--ls-rule);
  text-transform: uppercase;
  color: var(--red);
}
.charter span { font-size: var(--t-small); line-height: var(--lh-small); }

/* ---------- 8. the notebook page -------------------------------- */

.sheet--ruled {
  padding: 3rem 3.25rem 3.625rem var(--sheet-pad-left);
  background-color: var(--sheet);
  background-image:
    repeating-linear-gradient(to bottom, var(--rule-left) 0 1px, transparent 1px 2rem),
    repeating-linear-gradient(to bottom, var(--rule-right) 0 1px, transparent 1px 2rem),
    linear-gradient(var(--margin-red), var(--margin-red));
  background-size:
    var(--margin-x) 100%,
    calc(100% - var(--margin-x)) 100%,
    2px 100%;
  background-position: 0 3rem, var(--margin-x) 3rem, var(--margin-x) 0;
  background-repeat: no-repeat;
}
.sheet--ruled::before { left: 1.625rem; }

.sheet--ruled .lede {
  max-width: 64ch;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-lede-lg);
  line-height: var(--lh-lede-lg);
  color: var(--ink);
}
.sheet--ruled p { line-height: var(--lh-body-loose); }

.pull {
  margin: 1.625rem 0;
  max-width: none !important;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-lede-lg);
}
.pull mark { padding: 0.25rem 0.5rem; }

/* ---------- 9. the back cover ------------------------------------
A record card clipped to it, the pocket, the clip, the stamp.
---------------------------------------------------------------- */

.back-cover {
  box-shadow:
    inset 0 1px 0 var(--edge-lit),
    -0.75rem 0 1.75rem -0.75rem rgb(var(--shadow) / 0.34),
     0.75rem 0 1.75rem -0.75rem rgb(var(--shadow) / 0.34),
     0 0.75rem 1.5rem -0.5rem rgb(var(--shadow) / 0.34);
  position: relative;
  width: min(100% - var(--page-pad) * 2, var(--page) - var(--page-pad) * 2);
  margin: 0 auto;
  padding: 2.875rem 0.875rem 1.875rem;
  background: var(--folder);
  border-radius: 0 0 var(--radius-tab) var(--radius-tab);
}

/* The holes carry on down the back cover, three of them, punched at
the same pitch as the sheets. */
.back-cover::before {
  content: "";
  position: absolute;
  left: 1.625rem;
  top: 4.5rem;
  width: 0.8125rem;
  height: 11.4375rem;
  background-image: radial-gradient(circle at 50% 0.40625rem, var(--hole) 0.40625rem, transparent 0.40625rem);
  background-size: 0.8125rem 5.25rem;
  background-repeat: repeat-y;
}

.back-cover__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4.6875rem;
  padding-left: var(--sheet-pad-left);
}

/* ---- the record card ------------------------------------------- */

.record {
  position: relative;
  flex: 0 1 35rem;
  padding: 1.125rem 1.375rem 0.875rem;
  background: var(--sheet);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 var(--edge-lit),
    1px 3px 0.625rem rgb(var(--shadow) / 0.12);
  rotate: -1.2deg;
}

.record__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--brass-strong);
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brass);
}
.record__list {
  margin: 0;
  padding-top: 0.625rem;
  border-top: 1px solid var(--brass-soft);
  list-style: none;
}
.record__list li {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 0.5625rem 0;
  border-top: 1px solid var(--brass-faint);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--ink);
}
.record__list li:first-child { border-top: 0; }
.record__list li:last-child { border-bottom: 1px solid var(--brass-faint); }
.record__n { flex: 0 0 2.125rem; color: var(--red); }
.record__ref { margin-left: auto; color: var(--brass); }

/* ---- the pocket ------------------------------------------------- */

.pocket-area {
  position: relative;
  flex: 0 0 18.75rem;
  rotate: 0.8deg;
}

.pocket {
  position: relative;
  min-height: 10.25rem;
  padding: 5.125rem 1.5rem 1.375rem;
  background: var(--sheet);
  box-shadow:
    inset 0 1px 0 var(--edge-lit),
    1px 2px 0.5rem rgb(var(--shadow) / 0.10);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--ink-2);
}

/* The mouth is cut with an ellipse in the folder colour rather than
drawn as a path, so it survives any width. */
.pocket::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 7rem;
  height: 2.125rem;
  translate: -50% 0;
  background: var(--folder);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.pocket p { margin: 0 0 0.5rem; max-width: none; text-transform: uppercase; }
.pocket p:last-child { margin-bottom: 0; }
.pocket__label {
  font-size: var(--t-mono-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brass);
}
.pocket__quiet { color: var(--brass); }

/* ---- the clip and the stamp ------------------------------------- */

.clip--pocket {
  position: absolute;
  top: -1.375rem;
  left: 1.75rem;
  width: 2.125rem;
  height: 4rem;
  color: var(--clip);
  rotate: -14deg;
  filter: drop-shadow(1px 2px 2px rgb(var(--shadow) / 0.25));
  z-index: 2;
}

.verdict--filed {
  position: absolute;
  left: auto; top: auto;
  right: -1.5rem;
  bottom: -1.125rem;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono);
  letter-spacing: 0.04em;
  line-height: 1;
  border: 2px solid var(--red);
  outline: 0;
  background: none;
  color: var(--red);
  rotate: 7deg;
}

/* ---- the last line --------------------------------------------- */

.back-cover__print {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 2.5rem 0 0;
  padding-left: var(--sheet-pad-left);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--brass);
}
.leader { flex: 1; height: 1px; background: var(--brass-mid); }
.back-cover__print span:last-child { text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- 10. wide screens ------------------------------------
From here a whole sheet fits in the window, so the file can give up
a little air: more room above a heading, more between a sheet and
the charter under it, and a cover that fills the first screen.

The sheets used to pile up here, pinned with position: sticky, each
stopping a step below the last. It was dropped, and not because it
did not work: on a phone, which is where most of this page will be
read, a sheet runs three or four screens and the effect could not
exist at all. A centrepiece most readers never see is not a
centrepiece, it is a second page to keep in step with this one.
---------------------------------------------------------------- */

@media (min-width: 72rem) {
  main > .sheet { padding-top: 2.25rem; }
  main > .sheet .sheet__head { margin-bottom: 1rem; }
  main > .sheet .charter { margin-top: 1.5rem; }

  /* The cover fills the first screen, less a finger of folder so the
  next sheet shows. A minimum, so on a shorter window it goes back
  to its natural height and nothing is squeezed. */
  main > .sheet--cover {
    min-height: calc(100svh - var(--folder-hold) - 3rem);
    display: flex;
    flex-direction: column;
  }
  main > .sheet--cover .display  { margin-top: auto; }
  main > .sheet--cover .actions  { margin-bottom: auto; }
}
@keyframes drawer-down {
  from { opacity: 0; transform: translateY(-0.5rem); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none;                clip-path: inset(0 0 0 0); }
}

@keyframes card-out {
  from { opacity: 0; transform: translateY(-0.375rem) rotate(-0.6deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 11. narrow screens ----------------------------------
Only what cannot be solved by scaling: things that have to change
shape rather than size.
---------------------------------------------------------------- */

@media (min-width: 52rem) {
  .display__line { display: block; }
}

@media (max-width: 64rem) {
  .split,
  .split--evidence { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .cv { max-width: 34rem; }
  .ticket { max-width: none; }
  .charter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .back-cover__inner { gap: 2.5rem; }
  .verdict--filed { left: auto; right: 1.5rem; top: -1.25rem; bottom: auto; }
}

@media (max-width: 48rem) {
  body { padding: 0 0 2.5rem; }

  /* These labels are sized for a 20px root. Down here the root is
  pinned at 16 and they would land at nine and ten pixels. The three
  smallest steps come up; the table keeps its own, set further down,
  because its columns have no room to give. */
  :root {
    --t-mono-3xs: 0.6875rem;
    --t-mono-2xs: 0.6875rem;
    --t-mono-xs:  0.75rem;
  }

  /* Down here the tabs are the only thing holding the top of the
  window, and --folder-hold is that one row. */
  :root { --board-top: 0.625rem; --head-h: 3.9rem; --folder-hold: 3rem; }

  /* Five tabs do not fit across a phone, and a strip you push
  sideways hides half of them. Three go in a drawer. */
  .tabs__list {
    gap: 0.25rem;
    padding: var(--board-top) 0.625rem 0;
  }
  .tab {
    padding: 0.625rem 0.5rem;
    font-size: var(--t-mono-2xs);
    letter-spacing: 0.03em;
    border-radius: var(--radius-tab) var(--radius-tab) 0 0;
  }

  /* The case line goes back to being part of the paper. Two rows of
  tabs and a case line would hold a fifth of a phone screen
  permanently, which is too much rent for a folder to charge. */
  .folder__head { position: static; }

  .folder, .back-cover, .tabs__list { width: calc(100% - 1.5rem); }

  .sheet, .sheet--cover { padding: 2rem 1.5rem 2.25rem 3rem; }
  .sheet--ruled { --margin-x: 2.5rem; padding: 2rem 1.5rem 2.5rem 3.5rem; }
  .sheet::before { left: 0.9rem; top: 2rem; bottom: 2rem; }

  /* The sheets stop being tilted. At this width the rotation only
     costs horizontal room and reads as a mistake. */
  main > .sheet { rotate: none; }

  .note {
    position: static;
    width: auto;
    max-width: 22rem;
    margin: 1.5rem 0 0;
    rotate: -1deg;
  }

  .sheet--cover .sheet__head { margin-bottom: 1.5rem; }
  .sheet__head { margin-bottom: 1.25rem; }
  .actions { gap: 1rem; }
  .button { width: 100%; text-align: center; }

  /* A table you drag sideways is a table most people never read, so
  this one shrinks. overflow-x stays as a net for large text. */
  .split__aside { min-width: 0; overflow-x: auto; }
  .scorecard { min-width: 0; }
  .scorecard caption { padding: 1rem 0.75rem 0.75rem; }
  .scorecard th, .scorecard td { padding: 0.5rem 0.25rem; }
  .scorecard thead th { font-size: 0.5625rem; letter-spacing: 0.06em; }

  /* Nine pixels is what the four column names need on a 320 screen,
  and not a pixel more. */
  @media (min-width: 22.5rem) {
    .scorecard thead th { font-size: 0.625rem; }
  }
  .scorecard tbody th { padding-left: 0.75rem; font-size: 0.8125rem; }
  .scorecard tbody tr td:last-child { padding-right: 0.75rem; }

  .charter { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

  .back-cover { padding: 2rem 0.875rem 1.5rem; }
  .back-cover::before { display: none; }
  .back-cover__inner { padding-left: 0.75rem; gap: 2rem; }
  .back-cover__print { margin: 2rem 0 0; padding-left: 0.75rem; flex-wrap: wrap; }
  .leader { display: none; }
  .record { flex: 1 1 100%; rotate: none; }
  .pocket-area { flex: 1 1 100%; max-width: 22rem; rotate: none; }
  .verdict--filed { position: static; display: inline-block; margin-top: 1rem; }
  .clip--pocket { left: auto; right: 1.5rem; }

  /* The case line wraps to two rows on a phone and the clip has
  nowhere to sit that is not on top of a word. */
  .clip { display: none; }
}

@media (max-width: 34rem) {
  /* ---- the drawer ---------------------------------------------
  details and summary do the work, so there is no script and no
  state of ours to get out of step. The panel is a real element and
  not the content pseudo, on purpose: a pseudo takes only some
  properties, and where it takes none the drawer would land in the
  middle of the row and push the tabs about. */
  .tabs__rest { display: none; }
  .tabs__drawer { display: block; }
  .more { display: block; }

  .more > summary {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    list-style: none;
    cursor: pointer;
  }
  .more > summary::-webkit-details-marker { display: none; }
  .more[open] > summary {
    background: var(--folder);
    color: var(--ink);
    font-weight: 700;
  }

  .more__lines {
    display: block;
    width: 0.9375rem;
    height: 0.5rem;
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor);
    background-size: 100% 1.5px, 100% 1.5px, 60% 1.5px;
    background-position: 0 0, 0 50%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--duration) var(--ease);
  }
  .more[open] .more__lines { background-size: 60% 1.5px, 100% 1.5px, 100% 1.5px; }

  .more__list {
    position: absolute;
    top: 100%;
    left: 0.625rem;
    right: 0.625rem;
    z-index: 7;
    display: block;
    padding: 0.375rem;
    background: var(--folder);
    border-radius: 0 0 var(--radius-tab) var(--radius-tab);
    box-shadow: 0 0.875rem 1.75rem rgb(var(--shadow) / 0.34);
    animation: drawer-down var(--duration-drawer) var(--ease) both;
  }
  .more__list li + li { margin-top: 0.25rem; }
  .more__list .tab {
    display: block;
    background: var(--sheet);
    color: var(--ink);
    border-radius: 2px;
    padding: 0.75rem 0.75rem;
    box-shadow: 0 1px 0 rgb(var(--shadow) / 0.12);
  }
  .more__list .tab:hover { background: var(--sheet-2); }

  .more__list li {
    animation: card-out var(--duration-drawer) var(--ease) both;
  }
  .more__list li:nth-child(2) { animation-delay: 60ms; }
  .more__list li:nth-child(3) { animation-delay: 120ms; }
}

/* Under 360px the longest word in the headline runs to the edge of
the paper, so the headline takes one step down instead. */
@media (max-width: 22.5rem) {
  .display { font-size: clamp(2.1rem, 5.6vw, var(--t-hero)); }
}

@media (max-width: 30rem) {
  .sheet, .sheet--cover { padding: 1.75rem 1.125rem 2rem 2.5rem; }

  .sheet--ruled { padding: 1.75rem 1.125rem 2rem 3rem; --margin-x: 2rem; }
  .sheet::before { left: 0.65rem; }
  .folder__head { gap: 0.5rem; }
  .stamp-line--right { text-align: left; }
  .verdict { right: 0.75rem; font-size: 1rem; }
  .record__list li { flex-wrap: wrap; gap: 0 0.75rem; }
}

@media print {
  body { background: #fff; padding: 0; }
  .tabs, .skip-link { display: none; }
  .folder__head, main > .sheet { position: static; }
  .folder, .back-cover, .sheet, .cv, .record, .pocket { box-shadow: none; }
  main > .sheet, .record, .pocket-area, .note, .verdict { rotate: none; }
  .sheet { break-inside: avoid; }
}

/* ---------- 11b. the pen and the wrap ---------------------------
The pen is one drawn stroke, so it can only cross one line. Below
52rem the headline runs as one paragraph, the struck phrase can
break in two and the stroke ends up lying in the gap. So while
there is room the phrase is kept on one line, and when there is
not, the drawing hands over to a real line-through.

The changeover is measured on the real face: "condensed summary"
comes out 412px wide where "terse summary" was 299. If the
wording changes again, this gets measured again.
---------------------------------------------------------------- */

@media (max-width: 52rem) {
  .display .struck { white-space: nowrap; }
}

@media (max-width: 35rem) {
  .display .struck { white-space: normal; }
  .display .struck__pen { display: none; }
  .display .struck del {
    text-decoration: line-through;
    text-decoration-color: var(--red);
    text-decoration-thickness: 0.055em;
  }
}

/* ---------- 11c. short screens ----------------------------------
A phone turned sideways is wide enough for the desktop layout and far
too short for it. Measured at 932 by 430, the tabs and the case line
together hold 85 pixels, a fifth of the screen, where the same two
cost a tenth of a desktop window.

Section 11 already sends the case line back to the paper, and says
why: a fifth of a phone screen held permanently is too much rent for
a folder to charge. But it is keyed to width, and this was never a
question of width. So the same rule again, asked the right way.

The tabs stay. They are the navigation and they are worth their 48
pixels. It is the case line that has to go, and what anything
scrolling to a heading must clear shrinks with it.
---------------------------------------------------------------- */

@media (max-height: 30rem) {
  :root { --folder-hold: calc(var(--board-top) + var(--tabs-h)); }
  .folder__head { position: static; }
}

/* ---------- 12. a page that is not on file -----------------------
One more sheet of the same file, with the reference crossed out.
No back cover and no pocket: a dead end is one sheet long.
---------------------------------------------------------------- */

/* One sheet is not a pile. It does not pin, and the run-off the
   pile needs below it goes with it. */
.missing main > .sheet {
  position: relative;
  top: auto;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--folder-hold) - var(--folder-pad) - 3.5rem);
}
.missing main::after { content: none; }

/* There is no back cover to hand off to, so the folder closes. */
.missing .folder { border-radius: 0 var(--radius-tab) var(--radius-tab) var(--radius-tab); }

.missing .display     { margin-top: auto; }
.missing .small-print { margin-bottom: auto; }

/* The crossed-out reference, in em so it moves with the words under
it. Unlike the other lines it breaks at every width: the headline
may run on, the number never shares a line with a word. */
.display__line--code {
  display: block;
  font-size: 1.35em;
  margin-bottom: 0.1em;
}

.missing main .verdict { right: 2.75rem; }

@media (max-width: 48rem) {
  .missing main > .sheet { min-height: 0; display: block; }
  .missing main .verdict {
    position: static;
    display: inline-block;
    margin: 2rem 0 0;
  }
}