/* SlitSpace projektoldal — a tokeneket, navigációt, láblécet a stilus.css adja.
   Itt csak az oldal saját szerkezete: a vörös vonalra fűzött állomások.

   Kétzónás háttér: a vörös vonaltól balra meleg világos tónus (sötét
   szöveggel), jobbra marad a site sötét alapja. Ez a blokk KIZÁRÓLAG ezen
   az oldalon érvényesül — a stilus.css és minden más oldal érintetlen.

   A TELJES oldal (nav, fejrész, állomások, triptichon, linkek, lábléc)
   egyetlen közös body-gradiensből él — nincs külön "patch"-elt sötét/világos
   alblokk sehol; a jóváhagyott látványterv szerint. */

  :root{
    /* a világos zóna tónusa: meleg, visszafogott pergamen — nem vakító
       fehér, illik a --accent (arany) és --slit (vörös) tokenek mellé */
    --sp-light: #ece4d5;

    /* sötét szövegszínek a világos zónához, kontraszt-ellenőrizve
       (WCAG-számítással, a világos #ece4d5 alapon):
         --sp-dark        12.95:1  — főcím, állomás-cím
         --sp-dark-muted    6.93:1  — leadin, állomás-szöveg (test)
         --sp-dark-faint    4.48:1  — mono címkék (kód, kicker)
         --sp-dark-accent   3.10:1  — sötétített arany, csak nagy/kiemelt szöveghez */
    --sp-dark: #241f18;
    --sp-dark-muted: #55493a;
    --sp-dark-faint: #6f6656;
    --sp-dark-accent: #9c7c3d;

    /* a vonal X-pozíciója — ugyanaz a képlet, mint a .sp-lista::before left-je,
       de itt a body szintjén is elérhető, a wrap közepre-igazítását (széles
       monitoron megjelenő margót) is beleszámolva, hogy a háttérváltás
       pontosan a vonalra essen bármilyen nézetszélességen. */
    --sp-spine: clamp(230px, 26vw, 360px);
    --sp-margin: max(0px, calc((100vw - var(--maxw)) / 2));
    --sp-split: calc(var(--sp-margin) + var(--pad) + var(--sp-spine));
  }
  @media(max-width:900px){:root{--sp-spine:200px}}
  @media(max-width:760px){:root{--sp-spine:0px}}

  /* A háttérváltás: sokkal lágyabb, aszimmetrikus átmenet — a világos oldal
     élesen tart a vonalig, a sötétbe olvadás pedig hosszan, fokozatosan fut
     ki. Tisztán vízszintes gradiens, ezért magától végigfut a teljes
     oldalmagasságon — a nav, a fejrész, az állomások, a triptichon, a
     linksor és a lábléc mind ugyanebből a gradiensből él, nincs sehol külön
     "world light" panel. */
  body{background:linear-gradient(90deg,
    var(--sp-light) 0%, var(--sp-light) calc(var(--sp-split) - 60px),
    var(--bg) calc(var(--sp-split) + 260px), var(--bg) 100%)}
  @media(max-width:760px){body{background:var(--bg)}}

  /* ── nav — a bal oldali blokk mindig a világos zóna felett él (a nav a
     viewport bal szélétől indul, a fix pozíció miatt), ezért egyszerűen
     sötét szöveget kap, pill/háttér nélkül; mobilon (ahol a body egyszínű
     sötét) visszavált a site normál (világos) nav-színeire. ── */
  .nav-l .nav-name{color:var(--sp-dark)}
  .nav-l a{color:var(--sp-dark-faint)}
  .nav-l a:hover{color:var(--sp-dark-accent)}
  @media(max-width:760px){
    .nav-l .nav-name{color:var(--text)}
    .nav-l a{color:var(--muted)}
    .nav-l a:hover{color:var(--accent)}
  }

  /* ── fejrész ── (betűméretek az idővonal .hero h1 / .hero-lede értékeivel) */
  .sp-hero{padding:clamp(3.5rem,9vw,7rem) 0 clamp(1.6rem,3vw,2.4rem)}
  /* a fejléc mindig a világos zónában él, ezért itt a sötét szövegskála megy */
  .sp-kicsi{font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sp-dark-faint)}
  .sp-hero h1{font-family:var(--ff-disp);font-weight:300;font-size:clamp(2.4rem,6vw,4.6rem);
    line-height:1;letter-spacing:-.01em;margin:.7rem 0 0;color:var(--sp-dark)}
  .sp-hero h1 em{font-style:italic;color:var(--sp-dark-accent)}
  /* max-width most csak a 2 sorra töréshez van, NEM a zóna-határhoz igazítva —
     ez az egyetlen szövegelem, ami szabadon átérhet a sötét oldalra */
  .sp-lede{font-family:var(--ff-disp);font-style:italic;font-size:clamp(1rem,1.7vw,1.25rem);
    color:var(--sp-dark-muted);max-width:64ch;line-height:1.55;margin-top:1.5rem}
  @media(max-width:760px){
    .sp-kicsi{color:var(--muted)}
    .sp-hero h1{color:var(--text)}
    .sp-hero h1 em{color:var(--accent)}
    .sp-lede{color:var(--muted-2);max-width:56ch}
  }

  /* ── a vonal és az állomások ──
     Ugyanaz a szerkezet, mint az idővonalé: a vonal a bal hasáb jobb szélén
     fut, a pontok arra lógnak rá. A spine itt szélesebb, mert főcím és
     bekezdés kerül a bal oldalra, nem csak évszám. */
  .sp-lista{--spine:clamp(230px,26vw,360px);
    position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,5vw,3.5rem) var(--pad) 0}
  /* a vonal halvány világos halo-t kap, hogy az átmeneti sávban (ahol a
     vörös a középszürke háttéren kontrasztot veszítene) is jól látszódjon */
  .sp-lista::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--pad) + var(--spine));width:1px;
    background:linear-gradient(var(--slit) 0%,rgba(224,54,47,.72) 55%,rgba(224,54,47,.42) 100%);
    box-shadow:0 0 9px 1.5px rgba(236,228,213,.6)}

  .sp-allomas{position:relative;display:grid;grid-template-columns:var(--spine) 1fr;
    gap:clamp(1.6rem,4vw,3rem);align-items:start;padding:clamp(2rem,4vw,3.5rem) 0}

  .sp-bal{position:relative;text-align:right;padding-right:1.6rem}
  .sp-bal::after{content:'';position:absolute;right:-5.5px;top:.7rem;
    width:11px;height:11px;border-radius:50%;background:var(--slit);
    box-shadow:0 0 7px 1.5px rgba(236,228,213,.65)}
  /* balra a szöveg mindig a világos zónában van (a spine-on belül) */
  .sp-kod{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.04em;color:var(--sp-dark-faint)}
  .sp-cim{font-family:var(--ff-disp);font-weight:300;font-size:clamp(1.7rem,3.6vw,2.7rem);
    line-height:1.1;margin:.25rem 0 .15rem;color:var(--sp-dark)}
  .sp-cim em{font-style:italic;color:var(--sp-dark-accent)}
  /* font-family most Cormorant (--ff-disp), mint a .card.text p az idővonalon —
     eddig hiányzott, ezért a sans-serif body-betűt örökölte */
  .sp-szoveg{font-family:var(--ff-disp);font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.55;color:var(--sp-dark-muted)}
  @media(max-width:760px){
    .sp-lista::before{box-shadow:none}
    .sp-bal::after{box-shadow:none}
    .sp-kod{color:var(--muted)}
    .sp-cim{color:var(--text)}
    .sp-cim em{color:var(--accent)}
    .sp-szoveg{color:var(--muted-2)}
  }

  /* ── a médium ── */
  .sp-media{position:relative;border:.5px solid var(--border);border-radius:3px;
    overflow:hidden;background:var(--surface);max-width:660px}
  .sp-media img,.sp-media video,.sp-media canvas{display:block;width:100%;height:auto}
  .sp-media .kepkocka{position:relative;aspect-ratio:16/9}
  .sp-media .kepkocka canvas{width:100%;height:100%;object-fit:cover;opacity:.55}
  .sp-jatszik{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:58px;height:58px;border:.5px solid var(--accent);border-radius:50%;color:var(--accent);
    display:flex;align-items:center;justify-content:center;font-size:.95rem;background:rgba(10,10,11,.45)}
  .sp-felirat{font-family:var(--ff-mono);font-size:9px;letter-spacing:.04em;color:var(--muted);
    padding:.55rem .7rem;border-top:.5px solid var(--border);line-height:1.6}
  /* önálló hangfelvétel lejátszója a borítókép alatt */
  .sp-media audio{display:block;width:100%;padding:.6rem .7rem;background:var(--surface)}

  /* ── negyedik, halványabb pont: átvezetés a teljes statementre ──
     Nincs jobb oldali médiuma (ellentétben 1-3-mal), ezért ugyanazt a
     grid-template-columns-t kapja, mint a .sp-allomas: a felirat+link
     kizárólag a bal, spine-szélességű oszlopba kerül, jobbra zárva a
     vonalhoz; a jobb (sötét) oszlop üresen marad, semmi nem kerül bele. */
  .sp-atvezet{position:relative;display:grid;grid-template-columns:var(--spine) 1fr;
    padding:clamp(1.6rem,3vw,2.4rem) 0 clamp(3rem,6vw,5rem)}
  .sp-atvezet .sp-bal{padding-right:1.6rem}
  /* a pont itt üreges/halvány karika, NEM tömör piros, mint az 1-3. állomásé —
     vizuálisan visszafogottabb, kevésbé hangsúlyos negyedik pont */
  .sp-atvezet .sp-bal::after{background:transparent;border:1px solid rgba(224,54,47,.55);
    width:7px;height:7px;right:-4.5px;top:.45rem;
    box-shadow:0 0 5px 1px rgba(236,228,213,.4)}
  @media(max-width:760px){.sp-atvezet .sp-bal::after{box-shadow:none}}
  /* egyetlen elem maradt itt: a link maga. A hangsúlyt kizárólag a méret és
     az arany szín adja — nincs bold (a site sehol nem használ boldot), nincs
     uppercase/mono-kisbetűzés, nincs aláhúzás/keret; a Cormorant Garamond
     könnyű (300-as) vágása a karakter, kb. 1,5×-e a korábbi kis feliratnak. */
  .sp-atvezet a{font-family:var(--ff-disp);font-weight:300;font-style:normal;
    font-size:clamp(.85rem,1.5vw,1.15rem);line-height:1.3;
    color:var(--sp-dark-accent);display:block;transition:color .15s}
  .sp-atvezet a:hover{color:var(--sp-dark)}
  @media(max-width:760px){
    .sp-atvezet a{color:var(--accent)}
    .sp-atvezet a:hover{color:var(--accent)}
  }

  /* ── záró sáv: a triptichon és a linkek ugyanabból a body-gradiensből
     élnek, mint minden más — nincs külön, egyenletes világos alap alattuk.
     A vonaltól függetlenek (nincs pont, nincs jobbra-igazítás): a lap
     tipográfiai zárásaként a bal zóna margójához igazítva, ugyanahhoz a bal
     szélhez, mint a fejrész címe/lede-je. ── */
  .sp-zaras{position:relative;padding-top:clamp(1rem,3vw,2rem)}

  /* ── záró triptichon: két sor — az első hangsúlyos (telített, arany), a
     második halványabb lecsengés. Mindkettő sötét-szín-családból jön, sosem
     világos, mert a blokk mindig a világos zónában marad. ── */
  .sp-trip{padding:clamp(2.5rem,5vw,4rem) 0 0;max-width:60ch}
  .sp-trip .sor1{display:block;font-family:var(--ff-disp);font-style:italic;font-weight:400;
    color:var(--sp-dark-accent);font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.35}
  .sp-trip .sor2{display:block;font-family:var(--ff-disp);font-style:italic;font-weight:300;
    color:var(--sp-dark-faint);font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.5;margin-top:.5rem}

  /* ── linkek ── */
  .sp-linkek{display:flex;flex-wrap:wrap;gap:.6rem 2rem;max-width:calc(var(--sp-spine) + 3rem);
    padding:clamp(1rem,2vw,1.5rem) 0 clamp(3rem,7vw,5rem)}
  .sp-linkek a{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--sp-dark-muted);border-bottom:.5px solid rgba(36,31,24,.3);padding-bottom:.3rem;
    transition:color .15s,border-color .15s}
  .sp-linkek a:hover{color:var(--sp-dark);border-color:var(--sp-dark)}

  @media(max-width:760px){
    .sp-trip{max-width:none}
    .sp-trip .sor1{color:var(--accent)}
    .sp-trip .sor2{color:var(--muted)}
    .sp-linkek{max-width:none}
    .sp-linkek a{color:var(--muted-2);border-color:var(--border-2)}
    .sp-linkek a:hover{color:var(--accent);border-color:var(--accent)}
  }

  /* ── lábléc — ugyanabból a body-gradiensből él, mint a fejrész: a bal
     oldali "Hegyes Sándor" a világos zónában sötét szöveget kap, a jobb
     oldali kapcsolat-adatok maradnak a normál (világos-on-sötét) színükön,
     mert azok mindig a sötét zóna felett esnek. ── */
  .foot-mark{color:var(--sp-dark)}
  .foot-mark em{color:var(--sp-dark-accent)}
  @media(max-width:760px){
    .foot-mark{color:var(--text)}
    .foot-mark em{color:var(--accent)}
  }

  /* ── keskeny kijelző: a vonal elmarad, minden egy hasábban ── */
  @media(max-width:900px){.sp-lista{--spine:200px}}
  @media(max-width:760px){
    .sp-lista{--spine:0px}
    .sp-lista::before{display:none}
    .sp-allomas,.sp-atvezet{grid-template-columns:1fr;gap:1.1rem}
    .sp-bal{text-align:left;padding-right:0}
    .sp-bal::after{display:none}
  }