/* ── ARKISTO ──────────────────────────────────────────────────────────────
   Direction C. The lippukunta as a field record. Oswald set very tight and
   very large for the shouting, IBM Plex Mono for anything that is data
   (years, times, emails, plate numbers), Newsreader for reading. Newsprint
   paper, the scarf's blue as a block colour, its red edge as a 3px rule.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  --paper: #EDE9E0;
  --paper-2: #E2DCD0;
  --ink: #14151A;
  --ink-70: #4B4D55;
  --ink-40: #8E8F96;
  --rule: #C9C2B4;
  --blue: #10346B;
  --red: #B4362A;
  --pad: clamp(16px, 3.4vw, 44px);
}

body {
  background: var(--paper); color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 17px; line-height: 1.55; font-weight: 400;
}

.shell { max-width: 1560px; margin-inline: auto; padding-inline: var(--pad); }

/* ── type ─────────────────────────────────────────────────────────────── */
.shout {
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 700;
  text-transform: uppercase; line-height: 1.24; letter-spacing: -0.012em;
  font-size: clamp(44px, 10.6vw, 178px);
}
.shout-2 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600;
  text-transform: uppercase; line-height: 1.16; letter-spacing: -0.005em;
  font-size: clamp(30px, 5.2vw, 80px);
}
.shout-3 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 500;
  text-transform: uppercase; line-height: 1; letter-spacing: .005em;
  font-size: clamp(20px, 2.1vw, 30px);
}
.mono {
  font-family: 'PlexMono', ui-monospace, monospace; font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; font-weight: 400;
}
.mono-s { font-family: 'PlexMono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.read { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; }
.read-lg { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.45; font-weight: 300; }
.dim { color: var(--ink-70); }
.faint { color: var(--ink-40); }

/* ── masthead ─────────────────────────────────────────────────────────── */
.mast {
  position: sticky; top: 0; z-index: 60; background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.mast-in { display: flex; align-items: center; gap: 18px; padding-block: 9px; }
.mast .wm {
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 19px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
}
.mast nav { margin-left: auto; display: flex; gap: 18px; }
.mast nav a { text-decoration: none; }
.mast nav a:hover { color: var(--red); }
.mast .est { color: var(--ink-40); }
@media (max-width: 900px) { .mast .est, .mast nav a:nth-child(n+4) { display: none; } }

/* the red edge of the scarf, used as the page's one graphic device */
.edge { height: 3px; background: var(--red); }
.edge.blue { background: var(--blue); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.head { padding-top: clamp(22px, 3vw, 40px); }
.kicker { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 12px; }
.head .shout { margin-block: 0 6px; line-height: 1.24; }
.head .shout em { font-style: normal; color: var(--red); }
.headline-foot {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 30px; padding: 18px 0 26px; border-top: 1px solid var(--ink);
}
.headline-foot p { font-size: 16px; line-height: 1.45; }
.plate-hero { position: relative; }
.plate-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.plate-hero figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 8px; }
@media (max-width: 760px) { .plate-hero img { aspect-ratio: 4 / 3; } }

/* ── index / contents ─────────────────────────────────────────────────── */
.index { padding-block: clamp(40px, 6vw, 80px); }
.index a {
  display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 16px; align-items: baseline;
  padding-block: 14px; border-top: 1px solid var(--rule); text-decoration: none;
  transition: background .2s, padding-inline .2s;
}
.index a:last-child { border-bottom: 1px solid var(--rule); }
.index a:hover { background: var(--paper-2); padding-inline: 10px; }
.index a:hover .shout-3 { color: var(--red); }

/* ── section shell ────────────────────────────────────────────────────── */
section { padding-block: clamp(46px, 6.4vw, 96px); }
.sec-top { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid var(--ink); margin-bottom: clamp(26px, 4vw, 48px); }
.sec-top .n { color: var(--red); }
.sec-top h2 { margin-right: auto; }

/* ── history: dated entries ───────────────────────────────────────────── */
.entries { display: grid; gap: 0; }
.entry {
  display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(16px, 3vw, 44px); padding-block: clamp(22px, 3vw, 38px);
  border-top: 1px solid var(--rule); align-items: start;
}
.entry:first-child { border-top: 0; }
.entry h3 { max-width: 12ch; }
.entry figure { grid-column: 1 / -1; margin-top: 18px; }
@media (max-width: 820px) { .entry { grid-template-columns: 1fr; gap: 10px; } .entry h3 { max-width: none; } }

/* ── plates row ───────────────────────────────────────────────────────── */
.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px; }
.plates figure { background: var(--paper-2); }
.plates img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.plates figcaption { padding: 10px 2px 0; display: grid; gap: 3px; }

/* ── ages: a spec table ───────────────────────────────────────────────── */
.spec { width: 100%; }
.spec th {
  text-align: left; padding: 0 14px 10px 0; border-bottom: 2px solid var(--ink);
  font-family: 'PlexMono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400;
}
.spec td { padding: 16px 14px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 16px; }
.spec td.name { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(19px, 1.7vw, 26px); letter-spacing: 0; line-height: 1; white-space: nowrap; }
.spec td.num { font-family: 'PlexMono', monospace; font-size: 13px; color: var(--ink-70); white-space: nowrap; }
.spec .ideals { font-size: 15px; color: var(--ink-70); }
.spec .ideals span::after { content: ' · '; color: var(--ink-40); }
.spec .ideals span:last-child::after { content: ''; }
@media (max-width: 860px) {
  .spec, .spec tbody, .spec tr, .spec td { display: block; width: 100%; }
  .spec thead { display: none; }
  .spec tr { border-bottom: 1px solid var(--rule); padding-block: 16px; }
  .spec td { border: 0; padding: 2px 0; }
}

/* ── promise band ─────────────────────────────────────────────────────── */
.band { background: var(--blue); color: var(--paper); }
.band .shout-2 { max-width: 20ch; }
.band .mono { color: rgba(237,233,224,.62); }
.band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 4vw, 64px); align-items: start; }
.band p { color: rgba(237,233,224,.86); }

/* ── join ─────────────────────────────────────────────────────────────── */
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px; background: var(--rule); border: 1px solid var(--rule); }
.slot { background: var(--paper); padding: 20px 18px 24px; display: grid; gap: 8px; align-content: start; }
.slot .mono { color: var(--red); }
.big-cta {
  display: block; margin-top: clamp(34px, 5vw, 60px); text-decoration: none;
  background: var(--ink); color: var(--paper); padding: clamp(22px, 3.4vw, 44px) var(--pad);
  transition: background .2s;
}
.big-cta:hover { background: var(--red); }
.big-cta .shout-2 { display: block; }
.big-cta .mono { color: rgba(237,233,224,.6); }

/* ── roster ───────────────────────────────────────────────────────────── */
.roster { width: 100%; }
.roster td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.roster td:first-child { width: 34%; }
.roster a { color: var(--blue); text-decoration: none; }
.roster a:hover { text-decoration: underline; }
@media (max-width: 700px) { .roster, .roster tbody, .roster tr, .roster td { display: block; width: 100%; } .roster tr { padding-block: 12px; border-bottom: 1px solid var(--rule); } .roster td { border: 0; padding: 1px 0; } }

/* ── yell ─────────────────────────────────────────────────────────────── */
.huuto { background: var(--ink); color: var(--paper); text-align: center; }
.huuto .line { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 6.4vw, 98px); line-height: 1.24; letter-spacing: -0.01em; }
.huuto .line:nth-child(1), .huuto .line:nth-child(4) { color: var(--red); }

/* ── footer ───────────────────────────────────────────────────────────── */
footer { border-top: 3px solid var(--ink); padding-block: clamp(34px, 5vw, 60px) 26px; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.foot-cols h4 { margin-bottom: 10px; }
.foot-cols li, .foot-cols p { font-size: 15px; line-height: 1.5; padding-block: 2px; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { color: var(--red); }
.imprint { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 11px; line-height: 1.7; color: var(--ink-40); font-family: 'PlexMono', monospace; letter-spacing: .04em; }
.imprint a { color: var(--ink-70); }

.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); }
.rv.in { opacity: 1; transform: none; }