/* ==========================================================================
   FROTH INDUSTRIES · house style
   Palette: soot, brick, brass & gold, sepia, oxidized green, cream paper.
   Light = the Works by day. Dark = the Works by night, windows lit.
   ========================================================================== */

@font-face { font-family: "Rye"; src: url("fonts/rye.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("fonts/imfell-roman.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IM Fell English"; font-style: italic; src: url("fonts/imfell-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IM Fell English SC"; src: url("fonts/imfell-sc.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: light dark;
  --paper: #f3e8cf;
  --paper-2: #e9d9b6;
  --paper-card: #f7eed8;
  --ink: #241a13;
  --ink-soft: #4d3b2c;
  --brick: #9b3a24;
  --brick-d: #7a2c1b;
  --brass: #b98a2f;
  --gold: #d9ae4a;
  --sepia: #a07a52;
  --verd: #4d8a76;
  --soot: #2a2420;
  --soot-2: #3d3530;
  --cream: #f6ecd6;
  --rule: rgba(77, 138, 118, .32);
  --shadow: rgba(52, 30, 12, .28);
  --tape: rgba(185, 138, 47, .55);

  /* scene */
  --sky: #efe2c4; --sky-2: #e8d4ad; --sky-3: #dfc79d;
  --hill-1: #cdb187; --far: #b99a73; --hill-2: #a98c63;
  --ground: #6d5a42; --grass: #5d7d5a; --ravine: #4a3d30;
  --water: #4d8a76; --ripple: rgba(246, 236, 214, .55); --fore: #2a2420;
  --win: #e6dcc4; --win-glow: transparent; --lamp: #f3e2b0;
  --cloud: #f8f0de; --smoke: #d8cfc0; --coal: #151211;
  --timber: #5b4330; --timber-d: #463326;
  --sun: #d9ae4a; --moon: #f3ead2;
  --day: 1; --night: 0;
  --grain-o: .9;

  /* title */
  --title-fill: #9b3a24;
  --title-edge: #f7eed8;
  --title-drop: #2a2420;
  --wall-a: #3e1c16; --wall-b: #4a241b;

  --focus: #9b3a24;
  --wrap: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1713;
    --paper-2: #231c17;
    --paper-card: #eadcbb;
    --ink: #efe3c8;
    --ink-soft: #d6c6a6;
    --brick: #8a3421;
    --brick-d: #612418;
    --brass: #9d7428;
    --gold: #e0b653;
    --sepia: #5e4935;
    --verd: #335f52;
    --soot: #141110;
    --soot-2: #2a2420;
    --cream: #d8caa8;
    --shadow: rgba(0, 0, 0, .5);

    --sky: #121a29; --sky-2: #172135; --sky-3: #1d283c;
    --hill-1: #242b37; --far: #2b3140; --hill-2: #2d323b;
    --ground: #2a231d; --grass: #22322a; --ravine: #19150f;
    --water: #1d3834; --ripple: rgba(224, 182, 83, .35); --fore: #0d0b0a;
    --win: #ffcc57; --win-glow: rgba(255, 196, 70, .28); --lamp: #fff1b0;
    --cloud: #273046; --smoke: #545663; --coal: #070606;
    --timber: #3a2b20; --timber-d: #2b2019;
    --day: 0; --night: 1;
    --grain-o: .55;

    --title-fill: #e0b653;
    --title-edge: #2a1c12;
    --title-drop: #000;
    --wall-a: #1f0f0b; --wall-b: #29140f;
    --focus: #e0b653;
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper) url("img/grain.png");
  color: var(--ink);
  font: 1.125rem/1.6 "IM Fell English", "Iowan Old Style", Georgia, serif;
  overflow-x: hidden;
}
html, body { overflow-x: clip; }
.works, .chairman, .about { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px dashed var(--focus); outline-offset: 4px; border-radius: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--soot); color: var(--cream); padding: .5rem 1rem;
}
.skip:focus { top: 1rem; }
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }

h2 {
  font: 400 clamp(1.9rem, 6vw, 2.9rem)/1.1 "Rye", "IM Fell English", serif;
  margin: 0 0 .25em;
  letter-spacing: .02em;
}
.kicker {
  font-family: "IM Fell English SC", "IM Fell English", serif;
  letter-spacing: .12em;
  font-size: 1rem;
  margin: 0 0 .4rem;
  color: var(--ink-soft);
}

/* torn paper edge on top of a section, drawn in the section's own colour */
.torn { position: relative; }
.torn::before {
  content: ""; position: absolute; left: 0; right: 0; top: -21px; height: 24px;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cpath d='M0,24 0,12 3,7.1 7,13.9 15,16.6 18,10.3 21,7.7 27,5.4 31,14.4 38,8.6 44,17.1 47,17.2 55,10.7 58,19.4 63,7.3 67,17.8 74,17 81,12.9 90,10.3 96,16.2 103,16.1 109,13.4 113,6.5 117,4 122,4 126,11.1 132,7 136,5.2 145,10 151,3 159,2.6 164,14 171,7.8 178,11.8 185,3.3 189,4.6 193,3.3 202,13.1 207,10.3 212,14.2 218,5.6 222,10 227,10.7 235,8.8 240,17.5 246,5.3 249,5.8 256,15.9 261,6 267,19.3 273,19.3 281,6.1 288,15.5 294,9.7 301,7.4 307,12.1 316,17.6 320,12.1 324,17.6 333,8.5 339,12.3 343,14.1 350,13.8 356,2.4 361,2.3 369,13.7 377,5.2 381,13 389,1.5 395,1.1 403,10.7 406,6.7 413,3.7 421,6.1 425,7.9 433,3.5 438,14.9 444,7.6 451,3.6 455,6.9 461,5.9 466,4.1 473,6.8 481,16.3 484,7.8 491,8 495,18.3 502,12.1 509,17.1 513,7.3 519,11.9 525,16.2 532,19.7 535,11.5 541,17.7 545,8.2 551,11.1 555,8.4 564,10.6 572,11.4 575,17.5 583,16.4 592,14 596,8.6 600,12 600,24Z'/%3E%3C/svg%3E") 0 0 / 600px 24px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cpath d='M0,24 0,12 3,7.1 7,13.9 15,16.6 18,10.3 21,7.7 27,5.4 31,14.4 38,8.6 44,17.1 47,17.2 55,10.7 58,19.4 63,7.3 67,17.8 74,17 81,12.9 90,10.3 96,16.2 103,16.1 109,13.4 113,6.5 117,4 122,4 126,11.1 132,7 136,5.2 145,10 151,3 159,2.6 164,14 171,7.8 178,11.8 185,3.3 189,4.6 193,3.3 202,13.1 207,10.3 212,14.2 218,5.6 222,10 227,10.7 235,8.8 240,17.5 246,5.3 249,5.8 256,15.9 261,6 267,19.3 273,19.3 281,6.1 288,15.5 294,9.7 301,7.4 307,12.1 316,17.6 320,12.1 324,17.6 333,8.5 339,12.3 343,14.1 350,13.8 356,2.4 361,2.3 369,13.7 377,5.2 381,13 389,1.5 395,1.1 403,10.7 406,6.7 413,3.7 421,6.1 425,7.9 433,3.5 438,14.9 444,7.6 451,3.6 455,6.9 461,5.9 466,4.1 473,6.8 481,16.3 484,7.8 491,8 495,18.3 502,12.1 509,17.1 513,7.3 519,11.9 525,16.2 532,19.7 535,11.5 541,17.7 545,8.2 551,11.1 555,8.4 564,10.6 572,11.4 575,17.5 583,16.4 592,14 596,8.6 600,12 600,24Z'/%3E%3C/svg%3E") 0 0 / 600px 24px repeat-x;
}

/* washi tape */
.tape {
  position: absolute; width: 7.5rem; height: 1.7rem; z-index: 2;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 12px),
    var(--tape);
  clip-path: polygon(2% 0, 98% 4%, 100% 20%, 97% 45%, 100% 70%, 97% 100%, 3% 96%, 0 78%, 3% 52%, 0 30%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  pointer-events: none;
}
.tape.green { background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 4px, transparent 4px 10px), rgba(77, 138, 118, .6); }
.tape.red { background: repeating-linear-gradient(45deg, rgba(255,255,255,.2) 0 5px, transparent 5px 10px), rgba(155, 58, 36, .55); }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  background: var(--sky);
  text-align: center;
  overflow: hidden;
}
.hero-title { position: relative; z-index: 1; padding: clamp(2rem, 6vw, 3.5rem) 1rem 0; }
.est {
  position: relative; display: inline-block;
  font-family: "IM Fell English SC", serif; font-size: clamp(.95rem, 2.6vw, 1.15rem);
  letter-spacing: .22em;
  color: var(--cream); background: var(--brick);
  padding: .3rem 1.6rem .35rem;
  margin: 0 0 .8rem;
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
  filter: drop-shadow(2px 3px 0 var(--shadow));
  transform: rotate(-1.5deg);
}
h1 {
  margin: 0;
  font-family: "Rye", "IM Fell English", serif; font-weight: 400;
  line-height: .95;
  color: var(--title-fill);
  -webkit-text-stroke: .09em var(--title-edge);
  paint-order: stroke fill;
  text-shadow: .045em .055em 0 var(--title-drop);
}
h1 .l1 { display: block; font-size: clamp(3.9rem, 19vw, 9.5rem); letter-spacing: .03em; }
h1 .l2 { display: block; font-size: clamp(1.7rem, 8.4vw, 4.3rem); letter-spacing: .12em; margin-top: .15em; }
h1 .l1 span { display: inline-block; }
h1 .l1 span:nth-child(odd) { transform: rotate(-2deg) translateY(.02em); }
h1 .l1 span:nth-child(even) { transform: rotate(1.6deg); }
.tagline {
  font-style: italic; font-size: clamp(1.15rem, 3.6vw, 1.6rem); line-height: 1.3;
  max-width: 34rem; margin: 1rem auto .5rem; color: var(--ink);
}
.motto {
  font-family: "IM Fell English SC", serif; letter-spacing: .14em;
  font-size: clamp(.95rem, 2.8vw, 1.1rem); margin: 0; color: var(--ink-soft);
}
.motto .dot { color: var(--brick); padding: 0 .35em; }
.motto .nw { white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .hero-title { background: radial-gradient(1.5px 1.5px at 12% 30%, #f3ead2 60%, transparent 70%),
    radial-gradient(1.5px 1.5px at 83% 22%, #f3ead2 60%, transparent 70%),
    radial-gradient(1px 1px at 64% 12%, #f3ead2 60%, transparent 70%),
    radial-gradient(1px 1px at 30% 70%, #f3ead2 60%, transparent 70%),
    radial-gradient(1.5px 1.5px at 92% 64%, #f3ead2 60%, transparent 70%); }
  .tagline { color: var(--ink); }
  .motto .dot { color: var(--gold); }
}

.scene-wrap { position: relative; aspect-ratio: 2 / 1; margin-top: -1.5rem; }
.scene { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 700px) { .scene-wrap { aspect-ratio: 4 / 3; margin-top: 0; } }
@media (max-width: 420px) { .scene-wrap { aspect-ratio: 1 / 1; } }

/* scene paint (classes emitted by tools/make_scene.py) */
.scene .sh { fill: var(--shadow); }
.scene .sky { fill: var(--sky); } .scene .sky2 { fill: var(--sky-2); } .scene .sky3 { fill: var(--sky-3); }
.scene .hill1 { fill: var(--hill-1); } .scene .far { fill: var(--far); } .scene .hill2 { fill: var(--hill-2); }
.scene .ground { fill: var(--ground); } .scene .grass { fill: var(--grass); } .scene .ravine { fill: var(--ravine); }
.scene .water { fill: var(--water); } .scene .fore { fill: var(--fore); }
.scene .ripple { fill: none; stroke: var(--ripple); stroke-width: 2; stroke-linecap: round; }
.scene .brick { fill: var(--brick); } .scene .brick-d { fill: var(--brick-d); }
.scene .brass { fill: var(--brass); } .scene .gold { fill: var(--gold); }
.scene .sepia { fill: var(--sepia); } .scene .verd { fill: var(--verd); }
.scene .soot { fill: var(--soot); } .scene .soot2 { fill: var(--soot-2); }
.scene .cream { fill: var(--cream); } .scene .coal { fill: var(--coal); }
.scene .timber { fill: var(--timber); } .scene .timber-d { fill: var(--timber-d); }
.scene .win { fill: var(--win); stroke: var(--win-glow); stroke-width: 7; paint-order: stroke; }
.scene .lamp { fill: var(--lamp); stroke: var(--win-glow); stroke-width: 10; paint-order: stroke; }
.scene .mullion { fill: none; stroke: var(--soot-2); stroke-width: 2.5; }
.scene .mullion-b { fill: none; stroke: var(--brass); stroke-width: 2; }
.scene .rail { fill: none; stroke: var(--sepia); stroke-width: 3; }
.scene .rod, .scene .coupler { fill: none; stroke: var(--brass); stroke-width: 4; stroke-linecap: round; }
.scene .coupler { stroke: var(--soot); }
.scene .spoke { fill: none; stroke: var(--soot); stroke-width: 2.2; }
.scene .cloud { fill: var(--cloud); } .scene .smoke { fill: var(--smoke); }
.scene .sun { fill: var(--sun); } .scene .moon { fill: var(--moon); }
.scene .moon-crater { fill: #d9ccab; }
.scene .star { fill: #f3ead2; }
.scene .day-only { opacity: var(--day); } .scene .night-only { opacity: var(--night); }
.scene .grain { opacity: var(--grain-o); pointer-events: none; }
.scene .plaque { font: 15px "Rye", serif; fill: var(--gold); }
.scene .car-text { font: 17px "Rye", serif; fill: var(--cream); letter-spacing: 1px; }

/* motion: slow, gentle, and entirely optional */
.scene .gear-big { transform-origin: 420px 440px; animation: spin 48s linear infinite; }
.scene .gear-small { transform-origin: 560px 322px; animation: spin 28s linear infinite reverse; }
.scene .sun-rays { transform-origin: 1330px 165px; animation: spin 140s linear infinite; }
.scene .cloud { animation: drift 70s ease-in-out infinite alternate; }
.scene .c1 .cloud { animation-duration: 90s; animation-delay: -30s; }
.scene .c2 .cloud { animation-duration: 55s; animation-delay: -12s; }
.scene .puff { transform-box: fill-box; transform-origin: 50% 100%; animation: puff 9.6s linear infinite; opacity: 0; }
.scene .lpuff { transform-box: fill-box; transform-origin: 50% 100%; animation: lpuff 2.2s linear infinite; opacity: 0; }
.scene .train { animation: train 34s linear infinite; animation-delay: -9s; }
.scene .spin-wheel { animation: spin .9s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translateX(60px); } }
@keyframes puff {
  0% { transform: translate(0, 0) scale(.35); opacity: 0; }
  12% { opacity: .95; }
  70% { opacity: .55; }
  100% { transform: translate(90px, -170px) scale(1.9); opacity: 0; }
}
@keyframes lpuff {
  0% { transform: translate(0, 0) scale(.5); opacity: .95; }
  100% { transform: translate(-140px, -60px) scale(2.1); opacity: 0; }
}
@keyframes train {
  0% { transform: translateX(-700px); }
  55%, 100% { transform: translateX(1960px); }
}

/* ------------------------------------------------------------------ market strip */
.ticker {
  background: var(--soot); color: var(--cream);
  font-family: "IM Fell English SC", serif; letter-spacing: .1em;
  font-size: 1rem; text-align: center; padding: .7rem 1rem .8rem;
}
.ticker p { margin: 0; }
.ticker b { font-weight: 400; color: var(--gold); }

/* ------------------------------------------------------------------ works & holdings */
.works { background: var(--paper-2) url("img/grain.png"); padding: 3.5rem 0 4.5rem; }
.works-head { text-align: center; margin-bottom: 2rem; }
.works-head p.sub { font-style: italic; margin: 0; color: var(--ink-soft); }

.ledger {
  position: relative;
  max-width: 50rem; margin: 0 auto;
  color: #241a13;
  background:
    linear-gradient(90deg, transparent 3.1rem, rgba(155, 58, 36, .5) 3.1rem 3.2rem, transparent 3.2rem 3.45rem, rgba(155, 58, 36, .5) 3.45rem 3.55rem, transparent 3.55rem),
    repeating-linear-gradient(transparent 0 2.15rem, var(--rule) 2.15rem calc(2.15rem + 1px)),
    url("img/grain.png"),
    var(--paper-card);
  padding: 1.5rem 1.25rem 1.75rem 4.4rem;
  box-shadow: 4px 6px 0 var(--shadow), 0 18px 30px -18px rgba(0, 0, 0, .45);
  transform: rotate(-.35deg);
}
.ledger .tape:first-of-type { top: -.8rem; left: -1.6rem; transform: rotate(-32deg); }
.ledger .tape:nth-of-type(2) { top: -.7rem; right: -1.4rem; transform: rotate(28deg); }
.ledger-title {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: "IM Fell English SC", serif; letter-spacing: .12em; font-size: .95rem;
  color: #6b4e33; border-bottom: 3px double #6b4e33; padding-bottom: .35rem; margin-bottom: .5rem;
}
.divisions { list-style: none; margin: 0; padding: 0; }
.division {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem 1rem;
  padding: 1rem 0 1.1rem;
  border-bottom: 1px dashed rgba(107, 78, 51, .45);
}
.division:last-child { border-bottom: 0; }
.division-no {
  position: absolute; left: -3.9rem; top: 1.15rem; width: 2.9rem; text-align: center;
  font-family: "IM Fell English SC", serif; color: #9b3a24; font-size: .95rem; line-height: 1.1;
}
.division-no b { display: block; font: 1.5rem/1 "Rye", serif; }
.division h3 { margin: 0; font: 400 1.35rem/1.2 "Rye", serif; letter-spacing: .02em; }
.division h3 a { text-decoration: none; }
.division h3 a:hover { text-decoration: underline; }
.division .desc { margin: .2rem 0 0; font-style: italic; }
.division .meta { margin: .15rem 0 0; font-family: "IM Fell English SC", serif; letter-spacing: .08em; font-size: .9rem; color: #6b4e33; }

.stamp {
  display: inline-block; justify-self: end;
  font-family: "Rye", serif; font-size: clamp(.95rem, 3.2vw, 1.15rem); letter-spacing: .08em;
  color: #a3301c; text-transform: uppercase; white-space: nowrap;
  border: 3px solid currentColor; border-radius: 6px;
  outline: 1.5px solid currentColor; outline-offset: 3px;
  padding: .25rem .6rem .15rem;
  transform: rotate(-9deg);
  opacity: .82;
  -webkit-mask: url("img/stamp-mask.png") 0 0 / 120px 120px;
          mask: url("img/stamp-mask.png") 0 0 / 120px 120px;
}
.division:nth-child(2) .stamp { transform: rotate(6deg); }
.division:nth-child(3) .stamp { transform: rotate(-4deg) translateX(-.5rem); }
.stamp.open { color: #2f6b58; }
.ledger-foot { margin: 1rem 0 0; font-size: .95rem; font-style: italic; color: #6b4e33; text-align: right; }

@media (max-width: 560px) {
  .ledger { padding-left: 3.6rem; padding-right: 1rem; background-size: auto; }
  .ledger { background:
    linear-gradient(90deg, transparent 2.5rem, rgba(155, 58, 36, .5) 2.5rem 2.6rem, transparent 2.6rem),
    repeating-linear-gradient(transparent 0 2.15rem, var(--rule) 2.15rem calc(2.15rem + 1px)),
    url("img/grain.png"), var(--paper-card); }
  .division { grid-template-columns: 1fr; }
  .division-no { left: -3.35rem; width: 2.5rem; }
  .stamp { justify-self: start; margin-top: .4rem; }
}

/* ------------------------------------------------------------------ the chairman */
.chairman {
  color: #f3e8cf;
  background:
    url("img/grain.png"),
    repeating-linear-gradient(90deg, var(--wall-a) 0 2.2rem, var(--wall-b) 2.2rem 2.4rem, var(--wall-a) 2.4rem 4.6rem),
    var(--wall-a);
  padding: 4rem 0 4.5rem;
  text-align: center;
}
.chairman h2 { color: #e9c768; text-shadow: 2px 3px 0 rgba(0, 0, 0, .45); }
.chairman .kicker { color: #d8c7a3; }
.portrait-link { display: inline-block; text-decoration: none; color: inherit; margin-top: 3.4rem; }
.portrait-link:hover .portrait, .portrait-link:focus-visible .portrait { transform: rotate(0deg) scale(1.015); }
.portrait-link:focus-visible { outline-offset: 10px; outline-color: #e9c768; }
.portrait {
  position: relative; margin: 0 auto;
  width: min(20rem, 78vw); aspect-ratio: 4 / 5;
  transform: rotate(-.8deg);
  transition: transform .4s ease;
  filter: drop-shadow(6px 10px 8px rgba(0, 0, 0, .5));
}
.portrait::before { /* the picture wire and nail */
  content: ""; position: absolute; left: 50%; top: -2.4rem; width: 46%; height: 3.2rem;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 8%, #d9ae4a 0 5px, #6b4e1a 6px, transparent 7px),
    linear-gradient(to bottom right, transparent calc(50% - 1px), #8c7a55 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), #8c7a55 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 100% 0 / 50% 100% no-repeat;
}
.portrait img, .portrait picture {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: ellipse(41.5% 43.2% at 50% 50%);
}
.portrait .frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nameplate {
  position: relative; display: inline-block; margin-top: 1.4rem;
  padding: .55rem 2.2rem .6rem;
  color: #3a2810;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 40%, rgba(0, 0, 0, .15)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #a87b2a, #e7c46b 30%, #c99a3e 55%, #f0d489 75%, #a87b2a);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(80, 55, 15, .6), inset 0 0 0 4px rgba(255, 240, 200, .25), 3px 5px 0 rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(255, 244, 210, .7), 0 -1px 0 rgba(60, 40, 10, .35);
}
.nameplate::before, .nameplate::after { /* screws */
  content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f6e2a4, #8a6421 70%);
  box-shadow: inset 0 0 0 1px rgba(60, 40, 10, .5);
}
.nameplate::before { left: .7rem; } .nameplate::after { right: .7rem; }
.nameplate .name { display: block; font: 1.45rem/1.15 "IM Fell English SC", serif; letter-spacing: .08em; }
.nameplate .title { display: block; font: italic 1rem/1.3 "IM Fell English", serif; letter-spacing: .06em; }
.portrait-link:hover .nameplate .name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.chairman .aside { max-width: 30rem; margin: 1.4rem auto 0; font-style: italic; color: #d8c7a3; font-size: 1rem; }

/* ------------------------------------------------------------------ about */
.about { background: var(--paper) url("img/grain.png"); padding: 4rem 0 4.5rem; }
.about .wrap { max-width: 40rem; }
.about p { margin: 0 0 1.1em; }
.about .lede::first-letter {
  float: left; font: 3.6em/.8 "Rye", serif; color: var(--brick);
  padding: .08em .1em 0 0;
}
@media (prefers-color-scheme: dark) { .about .lede::first-letter { color: var(--gold); } }
.signoff {
  margin-top: 2rem !important; padding-top: 1.1rem;
  border-top: 3px double var(--sepia);
  font-family: "IM Fell English SC", serif; letter-spacing: .06em; text-align: center;
}

/* ------------------------------------------------------------------ footer */
.site-foot {
  background: var(--soot) url("img/grain.png"); color: #e9dcc0;
  text-align: center; padding: 2.6rem 1rem 2.2rem; font-size: 1rem;
}
@media (prefers-color-scheme: dark) { .site-foot { background-color: #0d0b0a; } }
.site-foot p { margin: .3rem 0; }
.site-foot .official { font-family: "IM Fell English SC", serif; letter-spacing: .1em; font-size: 1.05rem; color: #e9c768; }
.site-foot .gearmark { width: 2.2rem; height: 2.2rem; margin: 0 auto .8rem; color: #b98a2f; }

/* ------------------------------------------------------------------ reduced motion: everything holds still */
@media (prefers-reduced-motion: reduce) {
  .scene *, .scene { animation-play-state: paused !important; }
  .portrait { transition: none; }
  html { scroll-behavior: auto; }
}