/* underthewire.timberbay.se: spelets eget bildspråk (crates/app/ui/theme.slint): papper, bläck, blyerts och
   rödpenna, Special Elite i rubrikerna, Source Serif 4 i det man läser, Courier Prime för det maskinskrivna och
   Caveat för handskriften. Sidhuvud och sidfot är Timberbay Designs (design/web/chrome.css), i Archivo. */

:root {
  --paper: #e8dfca;
  --paper-light: #f3ecdc;
  --panel: #ddd3bc;
  --ink: #2b2925;
  --report-ink: #1f2a44;
  --pencil: #5a5448;
  --red: #a81f2a;
  --stamp: #5b3f7d;
  --line: rgba(43, 41, 37, .18);
  --display: "Special Elite", "Courier New", monospace;
  --typed: "Courier Prime", "Courier New", monospace;
  --body: "Source Serif 4", Georgia, serif;
  --hand: "Caveat", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.6 var(--body); }
a { color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--red); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; }

/* Sidhuvudet ligger över fotot: ljus text, som spelets splash */
.site-header { --text: var(--paper-light); }
.site-header nav a:hover, .site-header nav a:focus-visible { background: rgba(243, 236, 220, .12); }

/* Toppen: splashens foto (brunnen), mörkare nedtill så att texten går att läsa */
.hero { position: relative; min-height: min(760px, 92vh); min-height: min(760px, 92svh); display: flex; flex-direction: column;
  justify-content: flex-end; color: var(--paper-light);
  background: #1d1a16 url(images/hero.webp) center 40% / cover; }
.hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(29, 26, 22, .55), rgba(29, 26, 22, .15) 30%, rgba(29, 26, 22, .35) 55%, rgba(29, 26, 22, .92)); }
.hero-top { position: absolute; inset: 0 0 auto; z-index: 1; }
.hero-text { position: relative; z-index: 1; max-width: 1040px; width: 100%; margin: 0 auto; padding: 0 20px 64px; }
/* Ikonen är mörk och försvinner mot fotot; den står vid Status i stället */
.status-section h2 { display: flex; align-items: center; gap: 16px; }
.status-section .icon { width: 56px; height: 56px; }
.hero h1 { font-size: clamp(44px, 8vw, 88px); margin: 0; letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.hero .sub { font-family: var(--display); font-size: clamp(20px, 2.6vw, 28px); margin: 4px 0 20px; color: #d9cdb2; }
.hero .lede { font-size: clamp(18px, 2vw, 22px); max-width: 40ch; margin: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 72px 20px 0; }
.wrap h2 { font-size: clamp(30px, 4vw, 40px); margin: 0 0 24px; }
.wrap > p { max-width: 68ch; }

.intro p { font-size: 21px; margin: 0; }
.intro .hand { font-family: var(--hand); font-size: 34px; line-height: 1.2; color: var(--red); margin-top: 24px; transform: rotate(-1deg); transform-origin: left; }

/* Stämpeln, som veckans stämpel i spelet ("WEEK 4 – AUTUMN 1961"): violett bläck på en papperslapp, lätt lutad,
   med ojämnt bläck genom filtret #stamp-ink i index.html */
svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero .stamp { margin: 26px 0 0; }
.hero .stamp > span { display: inline-block; padding: 6px 12px 4px; background: var(--paper-light); color: var(--stamp);
  font-family: var(--display); font-size: clamp(15px, 1.6vw, 19px); letter-spacing: .06em; text-transform: uppercase;
  border: 2.5px solid var(--stamp); border-radius: 3px; outline: 1px solid rgba(91, 63, 125, .45); outline-offset: -6px;
  transform: rotate(-1.6deg); transform-origin: left; filter: url(#stamp-ink); box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
/* Stämpeln bryts bara mellan sina två delar, och i smal bredd står de på varsin rad utan tankstrecket */
.hero .stamp .part { white-space: nowrap; }
@media (max-width: 559px) {
  .hero .stamp .part { display: block; }
  .hero .stamp .dash { display: none; }
}

/* Ärendefilen: fem skärmbilder ur spelet, bara beskurna, med text bredvid och en rödpenneanteckning ovanpå.
   Bilderna växlar sida. */
.file { max-width: 1180px; margin: 0 auto; padding: 88px 20px 0; }
.file-head { max-width: 1000px; margin: 0 auto 8px; }
.file-head h2 { font-size: clamp(30px, 4vw, 40px); margin: 0 0 10px; }
.file-head p { margin: 0; color: var(--pencil); font-style: italic; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { counter-increment: step; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px 56px; align-items: center;
  padding: 56px 0; border-bottom: 1px dashed var(--line); }
.step:last-child { border-bottom: 0; }
.step:nth-child(even) { grid-template-columns: 340px minmax(0, 1fr); }
.step:nth-child(even) figure { order: 2; }
.step figure { margin: 0; justify-self: center; width: 100%; }
.step:nth-child(odd) figure { justify-self: start; }
.step:nth-child(even) figure { justify-self: end; }
.shot { position: relative; max-width: var(--w, 100%); }
.step:nth-child(even) .shot { margin-left: auto; }
.shot a { display: block; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); box-shadow: 0 3px 14px rgba(43, 41, 37, .22); }
.shot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Rödpennan: samma röda som spelets rödpenneringar, Caveat för handen */
.shot .ring, .shot .arrow { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.shot .arrow { color: var(--red); marker-end: url(#pen-arrow); stroke-width: 2.5; }
.shot text { font-family: var(--hand); font-size: 34px; font-weight: 700; fill: var(--red); }
.text .entry { font-family: var(--display); font-size: 21px; margin: 0 0 14px; letter-spacing: .01em; }
.text .entry::before { content: counter(step) ". "; color: var(--red); }
.text p { margin: 0 0 12px; font-size: 17.5px; }
.text p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .step, .step:nth-child(even) { grid-template-columns: minmax(0, 1fr); padding: 40px 0; }
  .step:nth-child(even) figure { order: 0; }
  .step figure { justify-self: stretch; }
}

.status-section { padding-bottom: 96px; }
.status-section .soon { font-family: var(--typed); font-size: 19px; font-weight: 700; margin-top: 24px; }

/* Platshållare för material som saknas: syns tydligt, och deploy vägrar ladda upp sidan medan de finns */
.ph { border: 1.5px dashed var(--red); color: var(--red); font-size: 14px; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 12px; }
.ph-inline { border-bottom: 1.5px dashed var(--red); color: var(--red); }

@media (max-width: 600px) {
  body { font-size: 17px; }
  .intro p { font-size: 19px; }
  .hero-text { padding-bottom: 40px; }
}