/* ============================================================
   THE DECORUM STANDARD — havesomedecorum.com

   ART DIRECTION: "The Monogram" over "The Register".

   The shell is B. A twelve column grid, type that starts at column
   two and never at column one, flush ruled rows instead of cards,
   and the engraved DS mark blown up and cropped by the page edge.
   The tension is deliberate: a Victorian blackletter mark holding
   still inside a flat modernist grid.

   The working pages are C. A ruled document, not a page. Density is
   the luxury. Whitespace is used where it means something and never
   as padding for comfort.

   THINGS THAT ARE BANNED HERE, because they are what a templated
   site looks like and this one has already drifted twice:
     - cards, boxes, rounded corners, drop shadows
     - a row of three equal tiles
     - fade-up-on-scroll
     - centred body copy
     - a heading, a paragraph and two buttons, repeated down the page

   Palette and type are lifted from the shipped card build
   (06-build-scripts/plates_lib.py, fonts.py). Lora reads, Poppins
   labels. That split is the same one used inside the guide PDFs.
   ============================================================ */

:root {
  --bone:   #f4efe6;
  --bone-2: #ede7da;
  --rule:   #d9d1c3;
  --rule-2: #c8bfad;   /* the heavier rule, used once per document */
  --camel:  #9c7b4a;
  --gold:   #c9a268;
  --char:   #26251f;
  --navy:   #13233f;
  --stone:  #8a8377;
  --set:    #4a473f;   /* body copy that is not display */

  --rule-navy: rgba(237, 231, 218, 0.24);

  /* THE SCALE. Six steps and nothing else. Every rule below points at one
     of these. If a new size feels necessary, one of the six is being used
     in the wrong place. There were twenty-two sizes here before this; that
     is what a page with too many fonts on it is actually made of. */
  --t-d1:    clamp(2.25rem, 1.3rem + 4vw, 4.5rem);      /* page title, one per page */
  --t-d2:    clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);   /* section title */
  --t-d3:    clamp(1.125rem, 1.05rem + 0.55vw, 1.4375rem); /* sub title, register row */
  --t-read:  1.125rem;                                  /* the one reading size */
  --t-meta:  0.9375rem;                                 /* short annotation, sans */
  --t-label: 0.6875rem;                                 /* uppercase label, sans */

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --pad:  clamp(1rem, 2.4vw, 2.25rem);   /* the document margin */
  --colgap: clamp(1rem, 1.6vw, 1.5rem);
  --read: 34rem;
}

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

/* The UA rule for [hidden] is display:none at specificity 0,1,0, so any author
   rule that sets display on the same element beats it. That is exactly what
   happened: .scrim { display: block } inside the phone media query left the
   scrim covering the whole viewport at z-index 90 while it was still hidden,
   and it swallowed every tap on the site. Nothing on mobile was clickable.
   This is the guard, not a style choice. */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip, not hidden: hidden on the root kills position: sticky, which the
     document head depends on. This is a backstop, not the fix. */
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0 var(--pad) var(--pad);
  background: var(--bone);
  color: var(--char);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;   /* document default, not a scale step */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--camel); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--bone-2); padding: 0.75rem 1.25rem; }
.skip:focus { left: 0; }

/* ============================================================
   1. DOCUMENT HEAD
   Three part masthead with the heavy rule under it, then the nav on
   its own hairline. Straight off the Lookbook card.
   ============================================================ */

.dochead { position: sticky; top: 0; z-index: 50; background: var(--bone); }

.dochead__top {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center;
  padding-block: 0.75rem 0.5rem; border-bottom: 2px solid var(--char);
}

.dochead__nav {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 0.5rem; border-bottom: 1px solid var(--rule);
}

.micro {
  margin: 0; font-size: var(--t-label); font-weight: 400; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--stone-ink); white-space: nowrap;
}

.micro--ink { color: var(--char); }
.micro--camel { color: var(--camel-ink); }
.dochead__top .r { text-align: right; }
.dochead__top .house b { font-weight: 500; color: var(--camel-ink); }

.dochead__nav a { font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--stone-ink); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.dochead__nav a:hover, .dochead__nav a[aria-current="page"] { color: var(--char); border-bottom-color: var(--camel); }
.dochead__nav .grp { display: flex; gap: clamp(0.875rem, 2.4vw, 2.25rem); flex-wrap: wrap; }

/* The three part masthead does not fit on a phone. The centre line and the
   register are both nowrap, so at 375px they pushed the document to 657px
   wide and the whole site scrolled sideways. Below tablet the head keeps the
   house name and the register only, and labels are allowed to wrap. */
@media (max-width: 46rem) {
  .dochead__top { grid-template-columns: 1fr auto; }
  .dochead__top .micro--ink { display: none; }
  .micro { white-space: normal; }
  .register__cap { flex-wrap: wrap; }
}

/* ============================================================
   2. GRID
   Twelve columns. Content starts at two. Column one is the margin
   the whole composition hangs off, and it stays empty.
   ============================================================ */

.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--colgap); }

/* on narrow screens the offset collapses, the grid does not */
.c2-12 { grid-column: 1 / -1; }
.c2-8  { grid-column: 1 / -1; }
.c7-13 { grid-column: 1 / -1; }
.c2-7  { grid-column: 1 / -1; }
.c8-13 { grid-column: 1 / -1; }

@media (min-width: 56rem) {
  .c2-12 { grid-column: 2 / 12; }
  .c2-8  { grid-column: 2 / 8; }
  .c7-13 { grid-column: 7 / 13; }
  .c2-7  { grid-column: 2 / 7; }
  .c8-13 { grid-column: 8 / 13; }
}

.band { padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.band--tight { padding-block: clamp(1.75rem, 3.5vw, 3rem); }

/* a navy strip runs the full width of the document, edge to edge */
.strip { margin-inline: calc(-1 * var(--pad)); padding: clamp(1.75rem, 4vw, 3.25rem) var(--pad); }
.strip .micro { color: var(--gold); }

/* ============================================================
   3. TYPE
   ============================================================ */

.kick { margin: 0 0 1rem; padding-top: 0.75rem; border-top: 1px solid var(--camel);
  font-size: var(--t-label); letter-spacing: 0.26em; text-transform: uppercase; color: var(--camel-ink);
  display: inline-block; }

.display {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: var(--t-d1); line-height: 0.99; letter-spacing: -0.028em;
}

.display em { font-style: italic; color: var(--camel-ink); }
.display--sm { font-size: var(--t-d2); line-height: 1.08; }
.display--xs { font-size: var(--t-d3); line-height: 1.25; }

.refuse { margin: 0; font-family: var(--serif); font-style: italic;
  font-size: var(--t-d3); color: var(--stone-ink); }

/* long form reads in Lora, the same as every finished guide */
.prose { max-width: var(--read); font-family: var(--serif); font-weight: 400;
  font-size: var(--t-read); line-height: 1.62; color: var(--char); }
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.125rem; }
.prose > h2 { margin-top: clamp(2.25rem, 4vw, 3rem); font-family: var(--serif); font-weight: 400;
  font-size: var(--t-d2); line-height: 1.14; letter-spacing: -0.015em; }
.prose > h3 { margin-top: 2rem; font-family: var(--sans); font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--camel-ink); }
.prose a { border-bottom: 1px solid var(--camel); }
.prose strong { font-weight: 500; }
.strip .prose, .navy .prose { color: var(--bone-2); }

/* the camel left rule. a definition, a quoted line, or a short list that
   is the spine of the section it sits in. */
.mark { border-left: 2px solid var(--camel); padding-left: clamp(1rem, 2vw, 1.5rem); }
.mark p { margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: var(--t-d3); line-height: 1.35; }
.mark p + p { margin-top: 0.625rem; }
.strip .mark, .navy .mark { border-left-color: var(--gold); }

/* the small set block. Poppins, tight, used for asides and specs */
/* short annotation only. two or three lines. anything longer reads badly in
   a sans at this width and belongs in .prose or .cols, which are Lora. */
.set { margin: 0; font-size: var(--t-meta); line-height: 1.6; color: var(--set); max-width: 40ch; }
.strip .set { color: rgba(237, 231, 218, 0.74); }

/* ============================================================
   4. THE WATERMARK

   The DS mark is a permanent watermark, not a decoration dropped on
   one section. It is painted as a fixed background layer, so it holds
   still in the viewport while the bands scroll over it, and each band
   reveals only the part of it that it currently covers.

   That is also what makes it change lighting on its own. Paper bands
   paint the charcoal cut, navy bands paint the bone cut, so the mark
   reads dark on bone and light on blue and appears to shift as a strip
   passes across it. No script, no second element.

   Opacity is the wash layer, not the file, so it is tuned here:
   a higher wash alpha means a fainter mark.
   ============================================================ */

:root {
  --wm-size: auto 128vh;                       /* taller than the viewport, so it always crops */
  --wm-pos: right -22vw center;                /* bleeds off the right edge, as it did before */
  /* The wash sets how faint the mark is: higher alpha, fainter mark. The
     target is that you can see it and know it is there, and it never
     competes with type. Navy is pushed furthest because a bone mark on a
     navy ground sits in the same tonal register as bone text, which is the
     worst case on the site. */
  --wm-paper: rgba(244, 239, 230, 0.955);      /* mark reads at ~4.5% */
  --wm-paper-2: rgba(237, 231, 218, 0.958);     /* ~4% */
  --wm-navy: rgba(19, 35, 63, 0.979);          /* ~2%, faintest of the three */
}

body {
  background-image: linear-gradient(var(--wm-paper), var(--wm-paper)), url("/assets/wm-dark.png");
  background-attachment: scroll, fixed;
  background-repeat: no-repeat, no-repeat;
  background-position: center, var(--wm-pos);
  background-size: cover, var(--wm-size);
}

/* .paper is the same ground as the document, so it stays transparent and
   lets the body watermark through rather than painting over it. */
.paper { background: transparent; }

/* The ground sets the text colour for everything inside it. This rule went
   missing in the watermark refactor and only showed up on headings, because
   every other element on navy happened to carry its own override. */
.strip, .navy { color: var(--bone-2); }

.paper-2 {
  background-color: var(--bone-2);
  background-image: linear-gradient(var(--wm-paper-2), var(--wm-paper-2)), url("/assets/wm-dark.png");
  background-attachment: scroll, fixed;
  background-repeat: no-repeat, no-repeat;
  background-position: center, var(--wm-pos);
  background-size: cover, var(--wm-size);
}

.strip, .navy {
  background-color: var(--navy);
  background-image: linear-gradient(var(--wm-navy), var(--wm-navy)), url("/assets/wm-light.png");
  background-attachment: scroll, fixed;
  background-repeat: no-repeat, no-repeat;
  background-position: center, var(--wm-pos);
  background-size: cover, var(--wm-size);
}

/* iOS Safari treats fixed attachment as scroll and repaints badly with it,
   so below tablet the mark rides with the page instead of holding still. */
@media (max-width: 52rem) {
  body, .paper-2, .strip, .navy { background-attachment: scroll, scroll; }
  :root { --wm-size: auto 90vh; --wm-pos: right -30vw center; }
}

/* The ghosted numeral. Same idea as the watermark, flattened into a single
   section rather than the whole document. .stage is the positioning context
   it needs; the two only ever appear together. */

.stage { position: relative; overflow: hidden; }
.stage > *:not(.bignum) { position: relative; z-index: 1; }

.bignum {
  position: absolute; right: -0.06em; bottom: -0.3em; margin: 0;
  /* exception: decorative, not read */
  font-family: var(--serif); font-size: clamp(11rem, 26vw, 22rem); line-height: 0.7;
  color: rgba(38, 37, 31, 0.055); pointer-events: none; user-select: none;
}

.strip .bignum, .navy .bignum { color: rgba(237, 231, 218, 0.07); }

/* ============================================================
   5. THE REGISTER
   The ruled index. This is the workhorse and it replaces every card
   grid on the site.
   ============================================================ */

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

.register__cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--char);
}

.reg { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.25rem 0.875rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }

.reg__n { margin: 0; font-size: var(--t-label); letter-spacing: 0.14em; color: var(--camel-ink); }
.reg__t { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-d3); line-height: 1.3; }
.reg__m { grid-column: 2; margin: 0; font-size: var(--t-label); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--stone-ink); }

@media (min-width: 46rem) {
  .reg { grid-template-columns: 2.5rem 1fr auto; gap: 0.875rem; }
  .reg__m { grid-column: 3; text-align: right; }
}

a.reg:hover { background: rgba(156, 123, 74, 0.07); }
a.reg:hover .reg__t { color: var(--camel-ink); }

.strip .register__cap, .navy .register__cap { border-bottom-color: var(--bone-2); }
.strip .reg, .navy .reg { border-bottom-color: var(--rule-navy); }
.strip .reg__n, .navy .reg__n { color: var(--gold); }
.strip .reg__t, .navy .reg__t { color: var(--bone-2); }
.strip .reg__m, .navy .reg__m { color: rgba(237, 231, 218, 0.66); }

/* the wide register, used where a row carries a full sentence */
.reg--wide { grid-template-columns: 2.25rem 1fr; }
@media (min-width: 56rem) {
  .reg--wide { grid-template-columns: 2.5rem 17rem 1fr; }
  .reg--wide .reg__m { grid-column: 3; text-align: left; font-size: var(--t-meta);
    letter-spacing: 0; text-transform: none; color: var(--set); max-width: 62ch; }
  .strip .reg--wide .reg__m, .navy .reg--wide .reg__m { color: rgba(237, 231, 218, 0.7); }
}

/* ============================================================
   6. RULED ROW
   The B footer device. Flush columns divided by vertical hairlines,
   never boxes.
   ============================================================ */

.ruled { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
@media (min-width: 52rem) { .ruled--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .ruled--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 52rem) { .ruled--2 { grid-template-columns: repeat(2, 1fr); } }

.ruled > * { padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 52rem) {
  .ruled > * { border-right: 1px solid var(--rule); border-bottom: 0; }
  .ruled > *:last-child { border-right: 0; }
  .ruled > * + * { padding-left: 1.5rem; }
}

.ruled h3 { margin: 0.625rem 0 0.375rem; font-family: var(--serif); font-weight: 400;
  font-size: var(--t-d3); }
.ruled p { margin: 0; font-size: var(--t-meta); color: var(--stone-ink); max-width: 36ch; }
.ruled a:hover h3 { color: var(--camel-ink); }
.strip .ruled, .navy .ruled { border-top-color: var(--rule-navy); }
.strip .ruled > *, .navy .ruled > * { border-right-color: var(--rule-navy); border-bottom-color: var(--rule-navy); }
.strip .ruled p, .navy .ruled p { color: rgba(237, 231, 218, 0.6); }

/* ============================================================
   7. LOOKBOOK
   Ten era sheets, scrolled left to right. Each sheet is a ruled
   document carrying its two finished cards.
   ============================================================ */

.deck { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }

@media (min-width: 62rem) {
  .deck {
    grid-auto-flow: column; grid-auto-columns: min(72rem, 86vw);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--pad)); padding: 0 var(--pad) 1.5rem;
    scrollbar-color: var(--rule) transparent;
  }
  .era { scroll-snap-align: start; }
}

.era { position: relative; overflow: hidden; }
.era__head { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: end;
  padding-bottom: 0.5rem; border-bottom: 2px solid var(--char); }
.era__sub { margin: 0.25rem 0 0; font-family: var(--serif); font-style: italic; color: var(--stone-ink); }

.era__cards { display: grid; gap: clamp(0.875rem, 2vw, 1.5rem); margin-top: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 46rem) { .era__cards { grid-template-columns: 1fr 1fr; } }

.card { margin: 0; }
.card img { width: 100%; height: auto; border: 1px solid var(--rule); background: var(--bone);
  transition: border-color 160ms ease; }
.card a:hover img { border-color: var(--camel); }
.card figcaption { margin-top: 0.5rem; font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-ink); }

/* ============================================================
   8. CONTROLS
   A rule and a word. No filled pills, no icons.
   ============================================================ */

.act {
  display: inline-block; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.24em;
  text-transform: uppercase; padding-bottom: 0.4375rem;
  border-bottom: 1px solid var(--camel); color: var(--char);
  transition: color 150ms ease, border-color 150ms ease;
}

.act:hover { color: var(--camel-ink); }
.act--solid { border: 1px solid var(--char); background: var(--char); color: var(--bone);
  padding: 0.875rem 1.5rem; }
.act--solid:hover { background: var(--camel); border-color: var(--camel); color: var(--bone); }
.strip .act, .navy .act { color: var(--bone-2); border-bottom-color: var(--gold); }
.strip .act:hover, .navy .act:hover { color: var(--gold); }
.strip .act--solid, .navy .act--solid { background: var(--bone-2); border-color: var(--bone-2); color: var(--navy); }
.strip .act--solid:hover, .navy .act--solid:hover { background: var(--gold); border-color: var(--gold); }

.acts { display: flex; gap: clamp(1.5rem, 3vw, 2.75rem); flex-wrap: wrap; align-items: center; }

.mailto { font-family: var(--serif); font-size: var(--t-d3);
  border-bottom: 1px solid var(--camel); padding-bottom: 3px; overflow-wrap: anywhere; }
.strip .mailto, .navy .mailto { border-bottom-color: var(--gold); }

/* ============================================================
   9. DOCUMENT FOOT
   ============================================================ */

.docfoot { border-top: 2px solid var(--char); padding-top: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.docfoot__cols { display: grid; gap: 1.75rem; }
@media (min-width: 52rem) { .docfoot__cols { grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 2rem; } }
.docfoot ul { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.docfoot li + li { margin-top: 0.4375rem; }
.docfoot a { font-size: var(--t-meta); color: var(--char); }
.docfoot a:hover { color: var(--camel-ink); }
.docfoot__base { margin-top: 2rem; padding-top: 0.875rem; border-top: 1px solid var(--rule);
  display: grid; gap: 0.625rem; }

.disclosure { margin: 0; font-size: var(--t-meta); line-height: 1.55; color: var(--stone-ink); max-width: 78ch; }

/* ============================================================
   10. UTILITIES
   These are declared last on purpose. .inset has the same specificity
   as the component rules it has to beat, so order is what decides it.
   ============================================================ */

/* Everything on a page shares one left and one right edge. The stage sets
   it at column two, so registers and ruled rows have to match or the eye
   reads two competing margins down the page.

   Doubled selector on purpose. This is a utility that has to beat component
   rules, and components keep getting appended below it, which at equal
   specificity means the component wins and the block silently goes flush
   left. That happened three times before this. .inset.inset is specificity
   0,2,0 and cannot be undone by a single class rule wherever it sits in the
   file, so ordering stops mattering. */
@media (min-width: 56rem) {
  /* one track plus one gap: the exact left edge of column two, derived from
     the same numbers the grid uses. 8.333% was close but not equal, so an
     inset block and a .c2-* block sat two pixels apart, and the gap moved
     with the viewport because one was a percentage and the other was not. */
  .inset.inset { margin-inline: calc((100% - 11 * var(--colgap)) / 12 + var(--colgap)); }
}

.flush-r { text-align: right; }
.hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.hr--heavy { border-top: 2px solid var(--char); }
.mt-1 { margin-top: 0.75rem; } .mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; } .mt-4 { margin-top: 3.25rem; }

/* ============================================================
   11. THE LOOKBOOK TIMELINE
   The century runs left to right. One rule, ten years on it, and the
   plates fan out from the year you are pointing at.
   ============================================================ */

.timeline {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  margin-inline: calc(-1 * var(--pad));
  padding: clamp(15rem, 34vh, 22rem) var(--pad) clamp(4rem, 8vh, 6rem);
  scrollbar-width: none;
}

.timeline::-webkit-scrollbar { display: none; }

.timeline__inner { position: relative; display: flex; align-items: flex-start; width: max-content; }

/* The century draws itself in from the left. Note the order: everything
   here is VISIBLE by default and only hidden once JS has armed it. If the
   script never runs, or the page loads in a background tab where the first
   frame never paints, the timeline is still fully readable. */
.timeline__rule {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--rule-2); transform-origin: left center;
}

.timeline.is-armed .timeline__rule { transform: scaleX(0); }

.timeline.is-drawn .timeline__rule {
  transform: scaleX(1);
  transition: transform 1100ms cubic-bezier(.22, .9, .24, 1);
}

/* a year on the rule */
.yr {
  position: relative;
  flex: none;
  width: clamp(15rem, 23vw, 22rem);
  padding-top: 2.25rem;
  scroll-snap-align: center;
  display: block;
}

.yr::before {
  content: "";
  position: absolute; left: 0; top: 0; width: 1px; height: 1.25rem;
  background: var(--camel); transform-origin: top center;
}

.timeline.is-armed .yr::before { transform: scaleY(0); }
.timeline.is-ready .yr::before { transform: scaleY(1); transition: transform 420ms ease-out; }

.yr__no    { margin: 0; font-size: var(--t-label); letter-spacing: 0.26em; text-transform: uppercase; color: var(--stone-ink); }
.yr__year  { margin: 0.375rem 0 0; font-family: var(--serif); font-weight: 400;
             font-size: var(--t-d2); line-height: 1; letter-spacing: -0.02em;
             transition: color 220ms ease; }
.yr__sub   { margin: 0.5rem 0 0; font-family: var(--serif); font-style: italic;
             font-size: var(--t-read); color: var(--stone-ink); max-width: 22ch;
             opacity: 0; transform: translateY(6px);
             transition: opacity 320ms ease, transform 320ms ease; }
.yr__enter { margin: 0.875rem 0 0; font-size: var(--t-label); letter-spacing: 0.26em;
             text-transform: uppercase; color: var(--camel-ink);
             opacity: 0; transition: opacity 320ms ease 60ms; }

/* without JS there is no hover state to reveal them, so show them outright */
.timeline:not(.is-armed) .yr__sub,
.timeline:not(.is-armed) .yr__enter { opacity: 1; transform: none; }

.yr:hover .yr__year, .yr.is-open .yr__year { color: var(--camel-ink); }
.timeline .yr.is-open > .yr__sub { opacity: 1; transform: none; }
.timeline .yr.is-open > .yr__enter { opacity: 1; transform: none; }

/* The years rise onto the rule in sequence, once armed. Scoped to <p> so it
   never touches .stills, whose own opacity is driven by the hover state. */
.timeline.is-armed .yr > p { opacity: 0; transform: translateY(14px); }
.timeline.is-ready .yr > .yr__no,
.timeline.is-ready .yr > .yr__year {
  opacity: 1; transform: none;
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.22,.9,.24,1);
}
.timeline.is-ready .yr > .yr__sub,
.timeline.is-ready .yr > .yr__enter { transform: none; }

.timeline.is-ready .yr:nth-child(1) > p  { transition-delay: 0ms; }
.timeline.is-ready .yr:nth-child(2) > p  { transition-delay: 70ms; }
.timeline.is-ready .yr:nth-child(3) > p  { transition-delay: 140ms; }
.timeline.is-ready .yr:nth-child(4) > p  { transition-delay: 210ms; }
.timeline.is-ready .yr:nth-child(5) > p  { transition-delay: 280ms; }
.timeline.is-ready .yr:nth-child(6) > p  { transition-delay: 350ms; }
.timeline.is-ready .yr:nth-child(7) > p  { transition-delay: 420ms; }
.timeline.is-ready .yr:nth-child(8) > p  { transition-delay: 490ms; }
.timeline.is-ready .yr:nth-child(9) > p  { transition-delay: 560ms; }
.timeline.is-ready .yr:nth-child(10) > p { transition-delay: 630ms; }

/* the plates, stacked above the rule until the year is pointed at */
.stills { position: absolute; left: 0; bottom: calc(100% + 1.5rem); width: clamp(9rem, 13vw, 12.5rem); }
.stills img {
  position: absolute; bottom: 0; left: 0; width: 100%; height: auto;
  border: 1px solid var(--rule); background: var(--bone);
  box-shadow: 0 1px 0 rgba(38,37,31,.06);
  opacity: 0; transform: translateY(26px) rotate(0deg);
  transition: opacity 480ms ease, transform 620ms cubic-bezier(.22,.9,.24,1);
}

.yr.is-open .stills img { opacity: 1; }
.yr.is-open .stills img:nth-child(1) { transform: translate(0, 0) rotate(-2.4deg); transition-delay: 0ms; }
.yr.is-open .stills img:nth-child(2) { transform: translate(5.5rem, -2.25rem) rotate(2.1deg); transition-delay: 90ms; }

.timeline__hint { display: flex; justify-content: space-between; gap: 1rem;
  padding-top: 0.75rem; border-top: 1px solid var(--rule); }

@media (max-width: 56rem) {
  .timeline { padding-top: clamp(11rem, 26vh, 15rem); }
  .yr { width: 14rem; }
  .stills { width: 7.5rem; }
}

/* ============================================================
   12. AN ERA PAGE
   The plate, at web scale. Set in that era's own typeface, because
   the decade's voice is part of what is being shown.
   ============================================================ */

.era-title {
  margin: 0; font-family: var(--era-display), var(--serif); font-weight: 400;
  /* exception: the decade's own face at its own plate size, one per page */
  font-size: clamp(2.5rem, 7vw, var(--era-size, 5.5rem)); line-height: 1;
  letter-spacing: var(--era-track, 0);
}

.era-sub { margin: 0.625rem 0 0; font-family: var(--serif); font-style: italic;
  font-size: var(--t-d3); color: var(--stone-ink); }

.era-body { font-family: var(--era-body), var(--sans); }

/* the record line under a plate */
.record { border-top: 1px solid var(--rule); padding-top: 0.875rem; }
.record__line { margin: 0.625rem 0 0; font-family: var(--era-display), var(--serif);
  font-size: var(--t-d3); line-height: 1.35; max-width: 34ch; }
.record__meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }

/* the lettered and numbered callouts, as they read on plate B */
.callout { list-style: none; margin: 0.875rem 0 0; padding: 0; }
.callout li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.875rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.callout .k { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.06em; color: var(--camel-ink); }
.callout .v { font-family: var(--era-body), var(--sans); font-size: var(--t-meta); color: var(--set); }

/* the six statements the room was making */
.statements { display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 46rem) { .statements { grid-template-columns: repeat(3, 1fr); } }
.statements > div { padding: 1.125rem 1.25rem 1.125rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 46rem) {
  .statements > div { border-right: 1px solid var(--rule); }
  .statements > div:nth-child(3n) { border-right: 0; }
  .statements > div:not(:nth-child(3n+1)) { padding-left: 1.25rem; }
}
.statements .l { margin: 0; font-size: var(--t-label); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--camel-ink); }
.statements .v { margin: 0.5rem 0 0; font-family: var(--era-display), var(--serif);
  font-size: var(--t-d3); line-height: 1.4; }

.plate-fig { margin: 0; }
.plate-fig img { width: 100%; height: auto; border: 1px solid var(--rule); background: var(--bone); }
.plate-fig figcaption { margin-top: 0.5rem; font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-ink); }

/* previous and next decade */
.eranav { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--char); }
.eranav a { padding: 1.5rem 0; }
.eranav a:last-child { text-align: right; padding-left: 1.5rem; }
.eranav .t { margin: 0.5rem 0 0; font-family: var(--serif); font-size: var(--t-d3); }
.eranav a:hover .t { color: var(--camel-ink); }

/* ============================================================
   13. COLUMNS
   Long form runs across the whole page in newspaper columns rather
   than sitting in one narrow strip with half the sheet empty. The
   column count is set by measure, not by number, so it lands on four
   on a wide screen and one on a phone without any breakpoints.
   ============================================================ */

.cols {
  /* A column always starts on a new paragraph, never mid-sentence. That is
     what break-inside does. The count is passed in per block as --cols and
     capped by column-width, so a three paragraph section makes three columns
     rather than four with one left empty, and a phone makes one. */
  column-count: var(--cols, 3);
  column-width: 15rem;
  column-gap: clamp(1.25rem, 2.4vw, 2.25rem);
  column-rule: 1px solid var(--rule);
  font-family: var(--era-body, var(--serif));
  font-size: var(--t-read);
  line-height: 1.6;
  color: var(--char);
}

.cols p { margin: 0 0 1.0625rem; break-inside: avoid; -webkit-column-break-inside: avoid; }
.cols p:last-child { margin-bottom: 0; }
.strip .cols { color: var(--bone-2); column-rule-color: var(--rule-navy); }

/* the serif reading variant, for pages with no era face of their own */
.cols--serif { font-family: var(--serif); }

/* ============================================================
   14. THE TIMELINE SCROLLBAR
   Always visible. Without it there is no way to know the century
   runs to the right, and a hidden native bar tells you nothing.
   Draggable, clickable, and it doubles as a progress read.
   ============================================================ */

.tlbar {
  position: relative;
  height: 3px;
  margin-top: 1.5rem;
  background: var(--rule);
  cursor: pointer;
  touch-action: none;
}

.tlbar__thumb {
  position: absolute; left: 0; top: -1px; height: 5px;
  background: var(--camel);
  min-width: 2.5rem;
  transition: background 150ms ease;
}

.tlbar:hover .tlbar__thumb, .tlbar.is-dragging .tlbar__thumb { background: var(--char); }

.tlbar__ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.625rem; }

/* ============================================================
   15. THE ROSE

   A four point navigation star, tall on the vertical axis, standing in
   the middle of the principles band with its north and south points
   breaking out through the top and bottom edges into the sections
   either side. The four principles sit close in around the waist.

   The layering is the whole trick. A section background paints early
   and a section's plain text paints just after it, and there is no
   z-index that lands between the two. So every section's content is
   lifted into a positioned layer at z-index 1, and the star sits at 0:
   above every background it crosses, below every word.

   Because the points cross both grounds, the star is drawn in gold on
   both halves rather than bone. Bone would be invisible the moment a
   point left the navy.
   ============================================================ */

main > section > * { position: relative; z-index: 1; }

.rose-band {
  position: relative;
  min-height: clamp(30rem, 68vh, 46rem);
  display: grid;
  align-content: center;
}

/* Equal arms. All four points leave the band: north and south through the
   top and bottom edges, east and west out past the text columns to the
   page edges. Sized by width so the horizontal reach is the fixed thing;
   the vertical bleed follows from it.

   An earlier version elongated the vertical axis so the horizontal points
   would not collide with the copy. That was solving a problem that does
   not exist here, because the star is already beneath every word on the
   page, and it produced a dagger rather than a compass. */
.rose__star {
  position: absolute;
  z-index: 0;
  left: 50%; top: 50%;
  width: min(104vw, 88rem);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* it covers a lot of ground now, so it carries less weight per square inch */
.rose__solid { fill: var(--gold); fill-opacity: 0.6; }
.rose__hair { fill: none; stroke: var(--gold); stroke-width: 2; stroke-opacity: 0.5; }

.rose {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}

.rose__q { align-content: start; }
.rose__q h3 { max-width: 17ch; }
.rose__q .set { max-width: 30ch; }

@media (max-width: 62rem) {
  /* no middle to stand in the middle of, so it goes behind the stack */
  .rose__star { width: 150vw; opacity: 0.4; top: 46%; }
}

@media (min-width: 62rem) {
  .rose {
    grid-template-columns: 1fr 1fr;
    /* equal tracks so the row boundary lands exactly on the rose's centre.
       Without this the taller quadrant sets row one's height, the boundary
       drifts off centre, and the horizontal arms cut through copy. */
    grid-template-rows: 1fr 1fr;
    column-gap: clamp(5.5rem, 10vw, 9.5rem);
    row-gap: clamp(4.5rem, 9vw, 8rem);
  }
  .rose__q--nw { grid-area: 1 / 1; }
  .rose__q--ne { grid-area: 1 / 2; }
  .rose__q--sw { grid-area: 2 / 1; }
  .rose__q--se { grid-area: 2 / 2; }

  /* Both sides have to hug the star equally. The columns are equal, but the
     copy inside them is left aligned, so without this the left blocks sit
     against the far edge of their column while the right blocks sit against
     the gap: one side a quarter of the page from the centre, the other
     touching it. The block is pushed to the column's inner edge; the text
     inside it stays left aligned, because that is about reading, not
     composition. */
  .rose__q--nw, .rose__q--sw { justify-self: end; }
  .rose__q--ne, .rose__q--se { justify-self: start; }
  .rose__q { max-width: 30ch; }
}

/* ============================================================
   16. THE DRAWER
   Phone navigation. Five items do not fit across a 393px screen, so
   below tablet the nav row is replaced by a burger and the menu slides
   in from the left.

   Sized for an iPhone 14 Pro, 393 x 852. Every target in here clears
   44px, which the desktop nav does not and cannot without wrecking the
   masthead.
   ============================================================ */

.burger, .drawer, .scrim { display: none; }

@media (max-width: 52rem) {
  .dochead__nav { display: none; }

  .burger {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; min-height: 3rem;
    padding: 0.5rem 0; margin: 0;
    background: none; border: 0; border-bottom: 1px solid var(--rule);
    color: var(--char); cursor: pointer;
    font-family: var(--sans); font-size: var(--t-label);
    letter-spacing: 0.24em; text-transform: uppercase;
  }

  .burger__bars { display: grid; gap: 4px; width: 1.125rem; }
  .burger__word { line-height: 1; }
  .burger__bars i { display: block; height: 1px; background: var(--char); transition: transform 260ms ease, opacity 200ms ease; }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] .burger__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .scrim {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(18, 22, 28, 0.5);
    opacity: 0; transition: opacity 320ms ease;
  }
  .scrim.is-open { opacity: 1; }

  /* left to right, and it holds its own scroll if the list ever grows */
  .drawer {
    display: flex; flex-direction: column;
    position: fixed; z-index: 95;
    top: 0; bottom: 0; left: 0;
    width: min(20rem, 86vw);
    padding: max(1.25rem, env(safe-area-inset-top)) 1.5rem
             max(1.5rem, env(safe-area-inset-bottom));
    background: var(--navy); color: var(--bone-2);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform 380ms cubic-bezier(.22, .9, .24, 1);
  }
  .drawer.is-open { transform: none; }
  .drawer:focus { outline: none; }

  .drawer__top { display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-navy); }
  .drawer__top .micro { color: var(--bone-2); white-space: nowrap; }
  .drawer__top .micro b { color: var(--gold); font-weight: 500; }

  .drawer__close { min-height: 2.75rem; padding: 0 0.25rem; background: none; border: 0;
    color: var(--gold); font-family: var(--sans); font-size: var(--t-label);
    letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; }

  .drawer__list { list-style: none; margin: 0; padding: 0; }
  .drawer__list a {
    display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; align-items: baseline;
    min-height: 3.5rem; padding: 1rem 0;
    border-bottom: 1px solid var(--rule-navy);
  }
  .drawer__n { font-family: var(--mono); font-size: var(--t-label); color: var(--gold); }
  .drawer__t { font-family: var(--serif); font-size: var(--t-d3); line-height: 1.2; }
  .drawer__list a[aria-current="page"] .drawer__t { color: var(--gold); }

  .drawer__guide { display: block; margin-top: auto; padding-top: 1.5rem; }
  .drawer__guide .micro { color: rgba(237, 231, 218, 0.66); }
  .drawer__guide-t { margin: 0.5rem 0 0.375rem; font-family: var(--serif);
    font-size: var(--t-d3); color: var(--bone-2); }

  /* the sequence runs off transitions, so honour the setting properly */
  @media (prefers-reduced-motion: reduce) {
    .drawer, .scrim, .burger__bars i { transition: none; }
  }
}

/* the page must not scroll behind an open drawer */
body.is-locked { overflow: hidden; }

/* ============================================================
   17. PHONE LEGIBILITY
   A phone gets read outdoors, one-handed, at whatever brightness the
   screen happens to be on. The mid tones that hold up on a monitor go
   milky in daylight, so the secondary text darkens below tablet.

   Tokens only. Nothing here changes a rule, so the composition is
   identical and only the ink gets heavier.
   ============================================================ */

@media (max-width: 52rem) {
  :root {
    --set: #33312b;        /* was #4a473f. 11.4:1 on bone, up from 8.0 */
    --stone-ink: #4f4b45;  /* was #6f6a5f. 7.6:1, up from 4.7 */
    --camel-ink: #5f4829;  /* was #7f6339. 7.5:1, up from 4.9 */
    --stone-lift: #b3ada0; /* secondary on navy, lifted for the same reason */
  }

  /* Poppins at 300 is thin on a phone. One step up costs nothing and it is
     the single biggest readability gain outdoors. */
  body { font-weight: 400; }
  .set, .ruled p, .disclosure, .reg--wide .reg__m { font-weight: 400; }
}