/* ============================================================================
   DEPOU — sistemul vizual v5 pentru Muzeul CFR. INTERN, nepublicat.

   Direcţia: nu „site de muzeu", ci cultura vizuală feroviară 1869-1939 pe care
   muzeul chiar o expune. Tablă emailată de gară, mersul trenurilor tipărit,
   biletul Edmondson de carton, lampa de semnal, funinginea din depou.

   Trei decizii care ţin totul:
   1. Archivo are axă de lăţime (62-125%). Titlurile stau la 62%, versale,
      cu tracking negativ: exact proporţia literelor de pe tabla de gară.
      Nu am descărcat niciun font nou, sunt cele deja pe disc.
   2. Fundalul e cărbune CALD (hue 60), nu gri neutru. Un depou noaptea are
      lumină de lampă cu petrol în el, nu lumină de birou.
   3. Cifrele sunt întotdeauna Plex Mono tabular. Ore, preţuri, ani, scări:
      într-o gară, cifra e un obiect grafic, nu text.
   ========================================================================== */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900;
  font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900;
  font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Plex"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/plexmono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  /* „Oţel fumuriu": gri-albăstrui, hue 245 cu chroma mică. Depoul dimineaţa,
     în ceaţă, nu noaptea la lampă. Rămân CALDE doar obiectele fizice —
     biletul de carton, lampa de semnal, alama: contrastul lor face tema.
     (Paleta „cărbune cald" explorată iniţial e în istoricul git.) */
  --carbune:    oklch(16% 0.014 245);
  --carbune-2:  oklch(20.5% 0.016 245);
  --fum:        oklch(27% 0.016 245);
  --muchie:     oklch(35% 0.018 245);
  --muchie-2:   oklch(45% 0.022 245);

  --creta:      oklch(94% 0.008 240);
  --creta-2:    oklch(79% 0.012 240);
  --creta-3:    oklch(64% 0.014 240);

  --bilet:      oklch(89% 0.042 84);   /* carton de bilet Edmondson */
  --bilet-2:    oklch(82% 0.052 78);

  --semnal:     oklch(76% 0.165 65);   /* lampă de semnal, accentul principal */
  --semnal-viu: oklch(85% 0.155 78);
  --stop:       oklch(60% 0.205 27);
  --liber:      oklch(72% 0.145 152);
  --alama:      oklch(74% 0.095 88);

  --fs-micro: .6875rem;
  --fs-mic:   .8125rem;
  --fs-text:  1.0625rem;
  --fs-lead:  clamp(1.15rem, 1.6vw, 1.375rem);
  --fs-s:     clamp(1.2rem, 2vw, 1.5rem);
  --fs-m:     clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-l:     clamp(2.4rem, 6vw, 4.6rem);
  --fs-xl:    clamp(3.2rem, 11.5vw, 10.5rem);
  --fs-cifra: clamp(3.5rem, 9vw, 8rem);

  --s0: 4px;  --s1: 8px;  --s2: 12px; --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 72px; --s8: 112px; --s9: 160px;

  --banda: 1280px;
  --pad: clamp(20px, 5vw, 56px);
  --masura: 62ch;

  --tranz: 320ms cubic-bezier(.2, .7, .2, 1);
  /* Mecanic, nu elastic: un macaz nu are bounce. */
  --tranz-scurt: 160ms cubic-bezier(.3, .8, .3, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--carbune);
  color: var(--creta-2);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--fs-text);
  line-height: 1.62;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, iframe, svg { max-width: 100%; display: block; }
/* Fără height:auto, atributele width/height din HTML devin indicaţie
   prezentaţională: fotografiile din 1944 se întindeau la 1175px înălţime.
   Acelaşi bug prins şi la portrete; aici e închis pentru toate imaginile. */
img { height: auto; }
a { color: inherit; }

::selection { background: var(--semnal); color: var(--carbune); }

:where(a, button, summary, details):focus-visible {
  outline: 2px solid var(--semnal-viu);
  outline-offset: 3px;
  border-radius: 1px;
}

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

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

/* ---------- Funingine: grain pe tot ecranul, SVG inline, fără fişiere ------ */
.funingine {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 60; opacity: .34;
  mix-blend-mode: overlay;
}

/* ---------- Tipografie --------------------------------------------------- */
/* Titlurile: Archivo la lăţime 62%, versale, tracking negativ. Litera de pe
   tabla emailată de gară e îngustă fiindcă numele staţiei trebuie să încapă. */
.tabla {
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.015em;
  color: var(--creta);
  margin: 0;
  text-wrap: balance;
}
h1.tabla { font-size: var(--fs-xl); letter-spacing: -.025em; }
h2.tabla { font-size: var(--fs-l); }
h3.tabla { font-size: var(--fs-m); }
h4.tabla { font-size: var(--fs-s); font-stretch: 75%; letter-spacing: 0; }

/* Micro-eticheta mono: „ora de plecare" de pe tabelele tipărite */
.fisa {
  font-family: "Plex", ui-monospace, monospace;
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--semnal);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.fisa--stins { color: var(--creta-3); }

.text { font-size: var(--fs-text); line-height: 1.62; color: var(--creta-2); max-width: var(--masura); text-wrap: pretty; margin: 0; }
.text strong, .lead strong { color: var(--creta); font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--creta); max-width: 52ch; text-wrap: pretty; margin: 0; font-weight: 400; }
.marunt { font-size: var(--fs-mic); line-height: 1.6; color: var(--creta-3); max-width: 58ch; margin: 0; }
.marunt strong { color: var(--creta-2); }

/* linie de cale ferată: două şine + traverse, doar din gradienţi */
.sina {
  height: 9px; border: 0; margin: 0;
  background:
    repeating-linear-gradient(90deg, var(--muchie) 0 3px, transparent 3px 13px) center/auto 100% no-repeat,
    linear-gradient(var(--muchie-2) 0 0) top/100% 1px no-repeat,
    linear-gradient(var(--muchie-2) 0 0) bottom/100% 1px no-repeat;
  opacity: .55;
}

/* ---------- Bara de sus + navigaţie -------------------------------------- */
.sus {
  background: var(--carbune-2);
  border-bottom: 1px solid var(--muchie);
  font-family: "Plex", monospace;
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--creta-3);
  position: relative; z-index: 40;
}
.sus .banda { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 40px; flex-wrap: wrap; }
.sus a { color: var(--creta-2); text-decoration: none; transition: color var(--tranz-scurt); }
.sus a:hover { color: var(--semnal-viu); }
.sus-contact { display: flex; gap: var(--s3); align-items: center; }

/* Lampa de semnal: starea muzeului ca aspect de semafor, nu ca text colorat */
.lampa { display: inline-flex; align-items: center; gap: var(--s2); }
.lampa::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--stop); box-shadow: 0 0 0 3px oklch(60% 0.205 27 / .16), 0 0 12px 2px oklch(60% 0.205 27 / .55);
  flex: 0 0 auto;
}
.lampa.deschis::before {
  background: var(--liber);
  box-shadow: 0 0 0 3px oklch(72% 0.145 152 / .16), 0 0 12px 2px oklch(72% 0.145 152 / .55);
  animation: puls 3.2s ease-in-out infinite;
}
@keyframes puls { 0%, 100% { opacity: 1 } 50% { opacity: .62 } }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: oklch(15% 0.014 62 / .88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--muchie);
}
.nav .banda { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 68px; }

.sigla { display: flex; align-items: center; gap: var(--s2); text-decoration: none; flex: 0 0 auto; }
/* varianta desenată pentru fundal închis; invert(1) aplatiza sigla
   într-o siluetă albă în care aripile şi conturul nu se mai distingeau */
.sigla img { width: 46px; height: auto; opacity: .95; }
.sigla b {
  display: block; font-stretch: 62%; font-weight: 800; text-transform: uppercase;
  font-size: 1.0625rem; letter-spacing: .01em; color: var(--creta); line-height: 1;
}
.sigla span span {
  display: block; font-family: "Plex", monospace; font-size: .5625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--creta-3); margin-top: 3px;
}

.meniu { display: flex; align-items: center; gap: var(--s4); }
.meniu a {
  font-family: "Plex", monospace; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .13em; color: var(--creta-2); text-decoration: none;
  padding: 6px 0; position: relative; transition: color var(--tranz-scurt); white-space: nowrap;
}
.meniu a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--semnal); transition: right var(--tranz);
}
.meniu a:hover { color: var(--creta); }
.meniu a:hover::after, .meniu a.aici::after { right: 0; }
.meniu a.aici { color: var(--semnal); }

.bilet-buton {
  border: 1px solid var(--semnal); color: var(--semnal) !important;
  padding: 8px 16px !important; transition: background var(--tranz-scurt), color var(--tranz-scurt);
}
.bilet-buton::after { display: none; }
.bilet-buton:hover { background: var(--semnal); color: var(--carbune) !important; }
.limba { border: 1px solid var(--muchie-2); padding: 7px 10px !important; }
.limba::after { display: none; }

.burger { display: none; background: none; border: 1px solid var(--muchie-2); width: 42px; height: 38px; cursor: pointer; padding: 0; }
.burger i, .burger i::before, .burger i::after {
  display: block; width: 17px; height: 1.5px; background: var(--creta); margin-inline: auto; transition: transform var(--tranz), opacity var(--tranz-scurt);
}
.burger i::before, .burger i::after { content: ""; position: relative; }
.burger i::before { top: -5.5px; }
.burger i::after { top: 4px; }
.nav.deschis .burger i { background: transparent; }
.nav.deschis .burger i::before { transform: translateY(5.5px) rotate(45deg); }
.nav.deschis .burger i::after { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Frontispiciu: tabla de plecări ------------------------------- */
.frontispiciu { position: relative; overflow: hidden; background: var(--carbune); }
.frontispiciu-foto { position: absolute; inset: 0; z-index: 0; }
.frontispiciu-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
  filter: grayscale(.75) contrast(1.12) brightness(.5) sepia(.05);
}
/* lumina de lampă (caldă) cade din dreapta-sus, discretă în aerul rece */
.frontispiciu-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 12%, oklch(76% 0.165 65 / .12), transparent 58%),
    linear-gradient(to right, var(--carbune) 4%, oklch(16% 0.014 245 / .78) 44%, oklch(16% 0.014 245 / .30) 100%),
    linear-gradient(to top, var(--carbune) 2%, transparent 42%);
}
.frontispiciu .banda { position: relative; z-index: 1; padding-block: clamp(var(--s8), 17vh, 190px) var(--s7); }

.frontispiciu h1 { margin-block: var(--s4) var(--s5); }
/* „ROMÂNE" pe rând propriu, la altă lăţime: face titlul să pară compus, nu turnat */
.frontispiciu h1 .rand2 { display: block; font-stretch: 88%; font-weight: 500; color: var(--semnal); }
.frontispiciu .lead { margin-bottom: var(--s6); }

/* Tabelul de sub titlu: mersul trenurilor, patru coloane cu hairline */
.plecari {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--muchie-2); margin: 0; max-width: 940px;
}
.plecari > div { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid transparent; }
.plecari dt {
  font-family: "Plex", monospace; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .15em; color: var(--creta-3); margin-bottom: var(--s1);
}
.plecari dd {
  margin: 0; font-family: "Plex", monospace; font-weight: 500;
  font-size: clamp(.95rem, 1.5vw, 1.15rem); color: var(--creta);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.plecari dd em { font-style: normal; color: var(--semnal); }

/* ---------- Structura secţiunilor ---------------------------------------- */
.sectiune { padding-block: clamp(var(--s7), 9vw, var(--s9)); position: relative; }
.sectiune--dens { background: var(--carbune-2); }

.cap { margin-bottom: var(--s7); max-width: 62ch; }
.cap .fisa { margin-bottom: var(--s3); }
.cap h2 { margin-bottom: var(--s4); }

/* numărul mare de secţiune, în fundal, tăiat de marginea benzii */
.sectiune[data-nr]::before {
  content: attr(data-nr);
  position: absolute; top: clamp(24px, 4vw, 56px); right: 0;
  font-family: "Plex", monospace; font-weight: 500;
  font-size: clamp(6rem, 17vw, 15rem); line-height: .7;
  color: var(--creta); opacity: .034; pointer-events: none;
  letter-spacing: -.04em; z-index: 0;
}
.sectiune > .banda { position: relative; z-index: 1; }

/* ---------- Exponate: grilă editorială asimetrică ------------------------ */
.exponate { display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(12, 1fr); }
.exponat { position: relative; display: flex; flex-direction: column; }
/* primul ocupă 7 coloane, al doilea 5: ritm de revistă, nu de galerie */
.exponat:nth-child(1) { grid-column: span 7; }
.exponat:nth-child(2) { grid-column: span 5; }
.exponat:nth-child(3) { grid-column: span 5; }
.exponat:nth-child(4) { grid-column: span 7; }
/* al doilea şi al treilea coboară puţin: rupe linia dreaptă a grilei */
.exponat:nth-child(2), .exponat:nth-child(3) { margin-top: var(--s6); }

.exponat figure { margin: 0; }
.exponat .rama {
  position: relative; overflow: hidden; background: var(--fum);
  border: 1px solid var(--muchie);
}
.exponat img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10;
  filter: grayscale(.42) contrast(1.06) brightness(.92);
  transition: transform 800ms cubic-bezier(.2,.7,.2,1), filter var(--tranz);
}
.exponat:hover img { transform: scale(1.035); filter: grayscale(0) contrast(1.04) brightness(1); }
.exponat:nth-child(2) img, .exponat:nth-child(3) img { aspect-ratio: 4 / 3; }

/* numărul exponatului: pastilă de alamă călare pe muchia fotografiei */
.exponat .nr {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: "Plex", monospace; font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1;
  padding: var(--s2) var(--s3) var(--s2) var(--s3);
  background: var(--semnal); color: var(--carbune);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.exponat figcaption { padding-top: var(--s4); }
.exponat h3 { margin-bottom: var(--s2); }
.exponat .text { font-size: 1rem; }

/* specificaţiile: şir de valori mono despărţite prin hairline vertical */
.spec { display: flex; flex-wrap: wrap; gap: var(--s1) 0; margin: var(--s3) 0 0; padding: 0; list-style: none; }
.spec li {
  font-family: "Plex", monospace; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .1em; color: var(--creta-3); padding-inline: var(--s3);
  border-left: 1px solid var(--muchie-2); font-variant-numeric: tabular-nums;
}
.spec li:first-child { padding-left: 0; border-left: 0; }

/* ---------- Povestea + lista de experienţă ------------------------------- */
.poveste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7) var(--s6); align-items: start; }
.poveste .text + .text { margin-top: var(--s4); }
/* coloana narativă: textul creşte o treaptă, ca cele două coloane să se
   termine cam la acelaşi nivel (lista „Experienţa" e mai înaltă) */
.poveste-text .text { font-size: clamp(1.1875rem, 1.75vw, 1.4375rem); line-height: 1.78; max-width: 52ch; }
.poveste-text .text + .text { margin-top: var(--s6); }

.trepte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* NU grid pe li: nodurile de text de după <b> ar deveni celule anonime în
   coloana numărului şi s-ar rupe cuvânt cu cuvânt. Numărul stă absolut. */
.trepte li {
  position: relative; padding: var(--s4) 0 var(--s4) 3.2rem;
  border-top: 1px solid var(--muchie);
  font-size: 1rem; color: var(--creta-2); line-height: 1.55;
}
.trepte li:last-child { border-bottom: 1px solid var(--muchie); }
.trepte li::before {
  content: counter(t, decimal-leading-zero); counter-increment: t;
  position: absolute; left: 0; top: calc(var(--s4) + .18em);
  font-family: "Plex", monospace; font-size: var(--fs-mic); color: var(--semnal);
  letter-spacing: .06em;
}
.trepte { counter-reset: t; }
.trepte b { color: var(--creta); font-weight: 600; display: block; margin-bottom: 3px; }

/* ---------- Program: tabla de plecări mare ------------------------------- */
.orar { border-top: 2px solid var(--semnal); }
.orar > div {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--muchie); align-items: baseline;
}
.orar dt { font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--creta); font-size: 1.0625rem; }
.orar dd {
  margin: 0; font-family: "Plex", monospace; font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); color: var(--creta);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.orar .zi-inchisa dt, .orar .zi-inchisa dd { color: var(--creta-3); }
.orar .zi-inchisa dd { color: var(--stop); font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .1em; }

/* ---------- Biletul Edmondson ------------------------------------------- */
.bilete { display: grid; gap: var(--s4); }
/* Talonul de preţ: --talon e lăţimea capătului care „se rupe". Preţul stă
   INTEGRAL în dreapta perforaţiei, ca pe un bilet Edmondson adevărat. */
.tichet {
  --talon: 132px;
  position: relative; background: var(--bilet); color: oklch(24% 0.03 62);
  padding: var(--s4);
  display: grid; grid-template-columns: 1fr var(--talon); align-items: center;
  border-radius: 2px;
  box-shadow: 0 1px 0 oklch(100% 0 0 / .35) inset, 0 14px 30px -18px oklch(0% 0 0 / .9);
  transition: transform var(--tranz), box-shadow var(--tranz);
}
/* dunga verticală şi perforaţia: cartonul are un capăt care se rupe */
.tichet::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--talon) + var(--s4)); width: 1px;
  background: repeating-linear-gradient(oklch(24% 0.03 62 / .42) 0 4px, transparent 4px 9px);
}
.tichet::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: repeating-linear-gradient(var(--stop) 0 9px, var(--bilet-2) 9px 18px);
}
.tichet:hover { transform: translateY(-3px) rotate(-.35deg); box-shadow: 0 1px 0 oklch(100% 0 0 / .35) inset, 0 22px 40px -20px oklch(0% 0 0 / .95); }
.tichet-ruta {
  font-family: "Plex", monospace; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .16em; color: oklch(45% 0.05 60); margin: 0 0 var(--s1);
}
.tichet-nume { font-stretch: 75%; font-weight: 700; text-transform: uppercase; font-size: 1.0625rem; letter-spacing: .01em; margin: 0; color: oklch(20% 0.03 62); line-height: 1.2; padding-right: var(--s5); }
.tichet-pret {
  margin: 0; text-align: right; font-family: "Plex", monospace; font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: .95; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: oklch(20% 0.03 62);
}
.tichet-pret small { display: block; font-size: .5625rem; letter-spacing: .13em; text-transform: uppercase; color: oklch(45% 0.05 60); margin-top: 5px; white-space: nowrap; }

/* ---------- Acces: hartă + trasee ---------------------------------------- */
.acces { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.harta { border: 1px solid var(--muchie); background: var(--fum); }
.harta iframe { width: 100%; height: 420px; border: 0; filter: grayscale(.5) contrast(.95) brightness(.85); }
.harta-sub { font-family: "Plex", monospace; font-size: var(--fs-micro); color: var(--creta-3); padding: var(--s2) var(--s3); border-top: 1px solid var(--muchie); margin: 0; letter-spacing: .06em; }
.harta-sub a { color: var(--creta-2); }

.adresa { font-style: normal; font-stretch: 75%; font-weight: 700; text-transform: uppercase; font-size: 1.125rem; line-height: 1.45; color: var(--creta); letter-spacing: .01em; margin-bottom: var(--s5); }

.trasee { margin: 0; border-top: 1px solid var(--muchie); }
.trasee > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--muchie); align-items: baseline; }
.trasee dt { font-family: "Plex", monospace; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--semnal); }
.trasee dd { margin: 0; font-size: .9375rem; color: var(--creta-2); line-height: 1.5; }
.trasee dd b { color: var(--creta); font-weight: 600; }

.avertisment {
  margin-top: var(--s5); padding: var(--s4); border-left: 3px solid var(--stop);
  background: oklch(60% 0.205 27 / .07); font-size: .9375rem; color: var(--creta-2); line-height: 1.55;
}
.avertisment strong { color: var(--creta); }

/* ---------- Arhiva 1944 --------------------------------------------------- */
.arhiva { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.arhiva-col { display: grid; gap: var(--s5); }
.doc { margin: 0; }
.doc img { width: 100%; filter: grayscale(1) contrast(1.18) brightness(.86); border: 1px solid var(--muchie); }
.doc figcaption { font-size: var(--fs-mic); color: var(--creta-3); line-height: 1.5; padding-top: var(--s2); }
.doc figcaption b { display: block; color: var(--creta-2); font-stretch: 75%; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-micro); margin-bottom: 4px; }

.pierderi { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--muchie); }
.pierderi li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--muchie); font-size: .9375rem; color: var(--creta-2); }
.pierderi em {
  font-style: normal; font-family: "Plex", monospace; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: .16em; color: var(--stop); flex: 0 0 auto;
}

/* ---------- Oameni -------------------------------------------------------- */
.oameni { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.om { position: relative; }
.om img {
  /* height:auto e obligatoriu: altfel atributul height din HTML devine
     indicaţie prezentaţională şi aspect-ratio nu se mai aplică */
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%;
  filter: grayscale(1) contrast(1.14) brightness(.88); border: 1px solid var(--muchie);
  transition: filter var(--tranz);
}
.om:hover img { filter: grayscale(.25) contrast(1.06) brightness(1); }
.om .ani { font-family: "Plex", monospace; font-size: var(--fs-micro); letter-spacing: .12em; color: var(--semnal); margin: var(--s3) 0 var(--s0); font-variant-numeric: tabular-nums; }
.om h3 { margin-bottom: var(--s2); }
.om p:last-child { font-size: .9375rem; color: var(--creta-3); line-height: 1.55; margin: 0; }

/* ---------- Întrebări ----------------------------------------------------- */
.intrebari { border-top: 1px solid var(--muchie); max-width: 900px; }
.q { border-bottom: 1px solid var(--muchie); }
.q summary {
  list-style: none; cursor: pointer; padding: var(--s4) var(--s6) var(--s4) 0; position: relative;
  font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: var(--creta); font-size: 1.0625rem; transition: color var(--tranz-scurt);
}
.q summary::-webkit-details-marker { display: none; }
.q summary:hover { color: var(--semnal); }
.q summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 13px; height: 13px;
  border-right: 1.5px solid var(--semnal); border-bottom: 1.5px solid var(--semnal);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--tranz);
}
.q[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.q .a { padding: 0 var(--s6) var(--s4) 0; margin: 0; font-size: 1rem; color: var(--creta-2); max-width: 68ch; }

/* ---------- Chemare ------------------------------------------------------- */
.chemare { padding-block: clamp(var(--s7), 8vw, var(--s8)); background: var(--carbune-2); border-top: 1px solid var(--muchie); border-bottom: 1px solid var(--muchie); }
.chemare .banda { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: center; }
.butoane { display: flex; gap: var(--s3); flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none;
  font-family: "Plex", monospace; font-size: var(--fs-mic); text-transform: uppercase;
  letter-spacing: .12em; padding: 15px 26px; transition: background var(--tranz-scurt), color var(--tranz-scurt), border-color var(--tranz-scurt);
  white-space: nowrap;
}
.btn-plin { background: var(--semnal); color: var(--carbune); font-weight: 500; }
.btn-plin:hover { background: var(--semnal-viu); }
.btn-gol { border: 1px solid var(--muchie-2); color: var(--creta); }
.btn-gol:hover { border-color: var(--semnal); color: var(--semnal); }

/* ---------- Subsol -------------------------------------------------------- */
.subsol { padding-block: var(--s7) var(--s5); background: var(--carbune); }
.subsol-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr auto; gap: var(--s6); }
.subsol h4 { font-family: "Plex", monospace; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .16em; color: var(--semnal); margin: 0 0 var(--s3); font-weight: 500; }
.subsol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.subsol ul a { font-size: .9375rem; color: var(--creta-2); text-decoration: none; transition: color var(--tranz-scurt); }
.subsol ul a:hover { color: var(--semnal); }
.subsol .despre { font-size: var(--fs-mic); color: var(--creta-3); margin: var(--s3) 0 0; max-width: 42ch; line-height: 1.6; }
.subsol-jos {
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--muchie);
  font-family: "Plex", monospace; font-size: var(--fs-micro); letter-spacing: .08em; color: var(--creta-3);
}
.grai svg { width: 72px; height: 72px; display: block; }

/* utilitare de spaţiere: fără niciun style= inline, ca CSP-ul (style-src
   'self') să rămână valabil şi pentru v5 dacă ajunge vreodată live */
.jos-3 { margin-bottom: var(--s3); }
.jos-4 { margin-bottom: var(--s4); }
.sus-3 { margin-top: var(--s3); }
.sus-4 { margin-top: var(--s4); }
.sus-5 { margin-top: var(--s5); }
.titlu-mijloc { margin: var(--s6) 0 var(--s4); }

/* ---------- Apariţii la derulare ----------------------------------------- */
.apare { opacity: 0; transform: translateY(22px); }
.js-apare .apare { transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
.apare.vazut { opacity: 1; transform: none; }

/* intrarea frontispiciului, în trepte */
.intra > * { animation: intrare 900ms cubic-bezier(.2,.7,.2,1) backwards; }
.intra > *:nth-child(1) { animation-delay: 80ms; }
.intra > *:nth-child(2) { animation-delay: 190ms; }
.intra > *:nth-child(3) { animation-delay: 300ms; }
.intra > *:nth-child(4) { animation-delay: 410ms; }
@keyframes intrare { from { opacity: 0; transform: translateY(26px); } }

/* ---------- Adaptare ------------------------------------------------------ */
@media (max-width: 1080px) {
  .exponat:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .oameni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subsol-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 940px) {
  .meniu {
    display: none; position: fixed; inset: 108px 0 auto 0; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--carbune-2);
    border-block: 1px solid var(--muchie); padding: var(--s2) var(--pad) var(--s5);
  }
  .nav.deschis .meniu { display: flex; }
  .meniu a { padding: 14px 0; font-size: var(--fs-mic); border-bottom: 1px solid var(--muchie); }
  .meniu a::after { display: none; }
  .bilet-buton, .limba { text-align: center; margin-top: var(--s3); border-bottom: 1px solid var(--semnal) !important; }
  .burger { display: block; }
  .poveste, .acces, .arhiva, .chemare .banda { grid-template-columns: 1fr; }
  .plecari { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .exponat:nth-child(n) { grid-column: span 12; }
  .oameni, .subsol-grid { grid-template-columns: 1fr; }
  .trepte li { grid-template-columns: 2.4rem 1fr; gap: var(--s3); }
  .harta iframe { height: 320px; }
  .sus .banda { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .apare { opacity: 1; transform: none; }
}