/* ============================================================
   CZINEGE ALEXANDRA — TE CINEMA DESIGN SYSTEM
   Shared styles for landing page (index.html) and project
   detail page (project.html).
   Requires: League Gothic (variable wdth 75–100), Newsreader
   (variable opsz), Inter (400, 500).
   ============================================================ */

/* — TOKENS — */
:root {
  --steel: #E5E5E5;
  --snow: #F5F5F5;
  --orange: #F05A24;
  --yellow: #F4D438;
  --ink: #000000;
  --graphite: #0F0E12;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100%; background: var(--steel); color: var(--ink); overflow: hidden }
body {
  font-family: "Newsreader", Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 24;
}
img { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; user-select: none }
a { color: inherit; text-decoration: none }
.svg-defs { position: fixed; width: 0; height: 0; pointer-events: none }

/* Keyboard focus — visible ring on every interactive element, mouse clicks unaffected */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* — SPROCKET PROGRESS — */
.sprocket {
  position: fixed; inset: 0 0 auto 0; height: 34px; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--orange);
  pointer-events: auto;
  padding: 0 24px;
}
.sprocket .hole {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; color: var(--ink); opacity: .55;
  letter-spacing: .14em;
  cursor: pointer;
  transition: opacity .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.sprocket .hole:hover { opacity: 1 }
.sprocket .hole.active { color: var(--ink); opacity: 1; transform: translateY(1px) scale(1.15) }

/* — VIEWPORT / REEL — */
.viewport { position: fixed; inset: 0; overflow: hidden }
.reel {
  position: absolute; top: 0; left: 0; height: 100%;
  display: flex; align-items: stretch;
  will-change: transform;
}
.panel {
  position: relative; height: 100vh; height: 100svh; flex: 0 0 auto;  /* svh = small viewport height: never hidden under iOS browser chrome, no layout shift */
  display: flex; flex-direction: column; justify-content: center;
  padding: 8vh 5vw; overflow: hidden;
  border-right: 1px solid rgba(15,14,18,0.10);
}
.panel.w1  { width: 100vw }
.panel.w15 { width: 150vw }
.panel.w2  { width: 200vw }

/* — FRAME (image container, transparent backdrop) — */
.frame {
  position: relative; isolation: isolate; overflow: hidden;
  background: transparent;
  box-shadow: 0 12px 40px rgba(15,14,18,.10);
}
.frame .grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.94  0 0 0 0 0.35  0 0 0 0 0.14  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .55; mix-blend-mode: overlay;
}
.frame img {
  width: 100%; height: 100%; object-fit: contain;
  filter: saturate(1.04) contrast(1.02);
}

/* — VIEWPORT CURSOR — */
.viewport { cursor: grab }
.viewport.dragging { cursor: grabbing }

/* — EDGE ARROWS — */
.edge-arrow {
  border: 0;                       /* real <button> now — strip UA chrome */
  position: fixed; top: 50%; z-index: 60;
  transform: translateY(-50%);
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 18px; color: var(--orange);
  background: rgba(15,14,18,.06);
  width: 44px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
  cursor: pointer;
}
.edge-arrow.visible { opacity: 1; pointer-events: auto }
.edge-arrow:hover { background: rgba(240,90,36,.12) }
.edge-arrow.left { left: 16px }
.edge-arrow.right { right: 16px }

/* — EDGE GRADIENTS — */
.edge-grad {
  position: fixed; top: 0; bottom: 0; width: 60px; z-index: 55;
  pointer-events: none;
  opacity: 0; transition: opacity .35s var(--ease);
}
.edge-grad.visible { opacity: 1 }
.edge-grad.left { left: 0; background: linear-gradient(to right, rgba(15,14,18,.10), transparent) }
.edge-grad.right { right: 0; background: linear-gradient(to left, rgba(15,14,18,.10), transparent) }


/* — TICKER — */
.ticker {
  position: fixed; left: 0; right: 0; bottom: 0; height: 42px;
  background: var(--graphite);
  border-top: 1px solid rgba(240,90,36,.4);
  overflow: hidden; z-index: 40; pointer-events: none;
}
.ticker-track {
  position: absolute; top: 0; left: 0; height: 100%;
  display: flex; align-items: center; gap: 40px; white-space: nowrap;
  animation: ticker-run 38s linear infinite;
  padding-left: 100vw;
}
.ticker-item {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--steel); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 14px;
}
.ticker-item .red { color: var(--orange) }
.ticker-item .dot { color: var(--yellow); font-size: 10px }
@keyframes ticker-run {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}

/* — COUNTDOWN LEADER — */
.leader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--steel); pointer-events: none;
}
.leader .wipe {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--orange) 0%, var(--orange) 50%, var(--steel) 50%, var(--steel) 100%);
  background-size: 200% 100%; background-position: 100% 0;
  animation: wipe 700ms var(--ease) forwards;
}
.leader .num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: clamp(220px, 28vw, 520px);
  color: var(--graphite); mix-blend-mode: multiply;
}
@keyframes wipe {
  0%   { background-position: 100% 0 }
  100% { background-position: 0% 0 }
}
.leader.gone { opacity: 0; transition: opacity .3s ease; pointer-events: none }

/* — BLACKOUT — */
.blackout { position: fixed; inset: 0; z-index: 250; pointer-events: none }
.blackout .bar {
  position: absolute; left: 0; right: 0; height: 50vh;
  background: var(--graphite);
  transform: scaleY(0); transform-origin: top;
  transition: transform 400ms var(--ease);
}
.blackout .bar.top { top: 0 }
.blackout .bar.bot { bottom: 0; transform-origin: bottom }
.blackout.active .bar { transform: scaleY(1) }

/* — SHARED TYPOGRAPHY — */
.inter-label {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
}
.league-title {
  font-family: "League Gothic", sans-serif;
  text-transform: uppercase;
}
.newsreader-body {
  font-family: "Newsreader", serif;
  font-variation-settings: "opsz" 24;
}
.hr-gold { height: 1px; background: var(--orange); opacity: .5; width: 60%; border: 0; margin: 6px 0 }

/* ---- LANDING: COVER ---- */
.cover {
  background:
    radial-gradient(circle at 18% 30%, rgba(245,245,245,.95), transparent 55%),
    radial-gradient(circle at 90% 80%, rgba(244,212,56,.18), transparent 55%),
    var(--steel);
}
.cover .leadblock {
  position: relative; z-index: 2; max-width: 80vw;
  display: grid; grid-template-columns: auto 1fr; gap: 3vw; align-items: flex-start;
}
.cover .bignum {
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 75;
  color: var(--orange);
  font-size: clamp(280px, 30vw, 460px);
  line-height: .78; letter-spacing: -0.03em;
  text-shadow: 0 22px 60px rgba(15,14,18,.22);
  animation: wdth-pulse 4200ms var(--ease) infinite;
}
@keyframes wdth-pulse {
  0%, 100% { font-variation-settings: "wdth" 75 }
  50%      { font-variation-settings: "wdth" 100 }
}
.cover .name {
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 90;
  font-size: clamp(72px, 9vw, 168px);
  line-height: .95; letter-spacing: -0.01em;
  color: var(--ink); text-transform: uppercase;
}
.cover .name .slash { color: var(--orange); margin: 0 .15em }

/* Role + credits fade in just as the leader clears */
.cover .role    { animation: bottom-arrive 0.6s 0.80s var(--ease) backwards }
.cover .credits { animation: bottom-arrive 0.6s 0.95s var(--ease) backwards }
@keyframes bottom-arrive {
  0%   { opacity: 0; transform: translateY(6px) }
  100% { opacity: 1; transform: translateY(0) }
}

.cover .role {
  margin-top: 1.2vh;
  font-family: "Newsreader", serif; font-style: italic;
  font-variation-settings: "opsz" 24;
  font-size: 22px; line-height: 32px; color: var(--graphite);
  max-width: 42ch;
}
.cover .role::before {
  content: ""; display: inline-block; width: 42px; height: 1px;
  background: var(--orange); vertical-align: middle; margin-right: 14px;
  transform: translateY(-4px);
}
.cover .credits {
  margin-top: 3vh;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--ink); text-transform: uppercase;
}
.cover .credits .red { color: var(--orange) }
/* Cover "RÉSZLETEK" is a real control (advances the reel), styled as the old inline label */
button.cover-cta {
  border: 0; background: none; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--orange); cursor: pointer;
}
button.cover-cta:hover { text-decoration: underline; text-underline-offset: 3px }

/* Contact links + email copy button (about / end panel) */
.about .contact a.contact-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.about .contact a.contact-link:hover { color: var(--orange) }
.about .contact .copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 0;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  color: var(--graphite);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.18s ease, color 0.18s ease;
  vertical-align: middle;
}
.about .contact .copy-btn:hover { opacity: 1; color: var(--orange) }
.about .contact .copy-btn.copied { opacity: 1; color: var(--orange) }
.about .contact .copy-btn svg { display: block; width: 12px; height: 12px }
.about .contact .copy-btn .ico-check { display: none }
.about .contact .copy-btn.copied .ico-copy { display: none }
.about .contact .copy-btn.copied .ico-check { display: block }
.slate-tl {
  position: absolute; top: 46px; left: 5vw; z-index: 5;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--ink); text-transform: uppercase;
}
.slate-br {
  position: absolute; bottom: 84px; right: 5vw; z-index: 5;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--graphite); text-transform: uppercase; text-align: right;
}

/* ---- LANDING: PROJECT PANEL ---- */
.project {
  display: grid; grid-template-columns: minmax(360px, 1.1fr) 1fr;
  gap: 4vw; align-items: center; padding: 9vh 5vw 11vh;
}
.project .hero { position: relative; height: 74vh; border-radius: 0 }
.project .meta {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 18px; max-width: 46ch;
}
.project .year {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--orange); text-transform: uppercase;
}
.project h2 {
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: clamp(86px, 9vw, 168px);
  line-height: .95; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--ink);
}
.project h2 .accent { color: var(--orange) }
.project-subtitle {
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: clamp(38px, 4vw, 72px);
  line-height: 1.05; letter-spacing: -0.005em;   /* >1 so HU accents clear the prev line when the subtitle wraps (mobile) */
  text-transform: uppercase; color: var(--ink);
  margin-top: 0.12em;   /* was -4px — positive, font-relative gap so HU diacritics (Ő Ű Á É) clear the cap line above */
}
.project-subtitle .accent,
.project-subtitle .gold { color: var(--orange) }
.project .sub {
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 80;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1; letter-spacing: .01em;
  color: var(--graphite); text-transform: uppercase;
}
.project .quote {
  font-family: "Newsreader", serif; font-style: italic;
  font-variation-settings: "opsz" 24;
  font-size: 22px; line-height: 32px; color: var(--ink);
  max-width: 38ch; padding-left: 18px;
  border-left: 1px solid var(--orange);
}
.project .ornament {
  display: flex; align-items: center; gap: 14px;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--orange); text-transform: uppercase;
}
.project .ornament::before,
.project .ornament::after {
  content: ""; flex: 0 0 28px; height: 1px; background: var(--orange); opacity: .7;
}
.project .credits {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--graphite); text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 14px;
  border-top: 1px dashed rgba(240,90,36,.4); padding-top: 14px;
}
.project .credits span { display: inline-flex; gap: 8px; align-items: baseline }
.project .credits .dot { color: var(--orange) }
.numeral {
  position: absolute; left: 3vw; bottom: 6vh;
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: clamp(180px, 22vw, 360px);
  color: var(--orange); line-height: .78; opacity: .92; z-index: 1;
  pointer-events: none; letter-spacing: -0.02em;
  text-shadow: 0 14px 40px rgba(15,14,18,.18);
  will-change: transform;
}
.cta {
  display: inline-flex; align-items: center; gap: 14px;
  align-self: flex-start;
  background: var(--orange); color: var(--ink);
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: 32px; line-height: 1; letter-spacing: .04em;
  padding: 18px 26px 16px; text-transform: uppercase; cursor: pointer;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  box-shadow: 0 10px 30px rgba(240,90,36,.35), inset 0 0 0 1px rgba(15,14,18,.18);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(240,90,36,.55), inset 0 0 0 1px rgba(15,14,18,.24) }
.cta .arrow {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 12px; letter-spacing: .14em; color: var(--ink);
}
.cta.disabled { background: transparent; color: var(--graphite); box-shadow: inset 0 0 0 1px rgba(15,14,18,.28); cursor: pointer }

/* triptych */
.triptych {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr;
  gap: 1.5vw; height: 74vh; align-self: center;
}
.triptych .frame { height: 100% }

/* ---- LANDING: ABOUT / END SLATE ---- */
.about { background: var(--snow); padding: 9vh 6vw }
.about .top {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--orange); text-transform: uppercase;
}
.about h2 {
  margin-top: 2vh;
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 90;
  font-size: clamp(76px, 7vw, 130px);
  line-height: .95; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--ink); max-width: 18ch;
}
.about h2 .gold { color: var(--orange) }
.about .body {
  margin-top: 3vh;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; max-width: 84ch;
}
.about p {
  font-family: "Newsreader", serif;
  font-variation-settings: "opsz" 24;
  font-size: 18px; line-height: 28px; color: var(--ink);
}
.about p em { color: var(--orange); font-style: italic }
.about .contact {
  margin-top: 3vh;
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--graphite); text-transform: uppercase;
}
.about .contact .gold { color: var(--orange) }
.about .contact.contact-meta {
  margin-top: 1.4vh;
  font-size: 9px;
  gap: 14px;
  opacity: 0.65;
}
.about .contact-meta .wd-email {
  text-transform: none; letter-spacing: .04em;
  opacity: 0; transition: opacity .2s ease;
}
.about .contact-meta:hover .wd-email,
.about .contact-meta:focus-within .wd-email { opacity: 1 }
@media (hover: none) { .about .contact-meta .wd-email { opacity: 1 } }
.about .signoff {
  margin-top: 3vh;
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 80;
  font-size: clamp(36px, 4vw, 72px);
  color: var(--orange); line-height: .95; letter-spacing: .01em;
  text-transform: uppercase;
}

/* ---- LANDING: FRONT PANELS (Magamról + Munkafolyamat) ----
   Reuse the .about slate look; long copy scrolls inside [data-scroll]
   columns (the engine hands the wheel over while they have room). */
.front-panel h2 { max-width: none }
.front-magamrol .body { max-width: 96ch }
@media (min-width: 769px) {
  .front-panel .front-scroll,
  .front-process .stage {
    max-height: 58vh; overflow-y: auto;
    scrollbar-width: none; padding-bottom: 56px;
    /* bottom fade hints that the column scrolls */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
  }
  /* Columns whose content fits (engine marks them .fits) drop the scroll
     affordances so the wheel goes straight to the reel. */
  .front-panel .front-scroll.fits,
  .front-process .stage.fits,
  .title-card .tc-body.fits {
    overflow-y: visible; padding-bottom: 0;
    mask-image: none; -webkit-mask-image: none;
  }
}
.front-process .process-grid {
  margin-top: 3vh;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5vw;
}
.front-process .stage-num {
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 80;
  font-size: clamp(58px, 5vw, 96px);
  color: var(--orange); line-height: .8; letter-spacing: -0.02em;
}
.front-process .stage h3 {
  margin: 1.2vh 0 2vh;
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 90;
  font-size: clamp(26px, 2.2vw, 40px);
  line-height: 1; letter-spacing: .01em;
  text-transform: uppercase; color: var(--ink);
}
.front-process .step { margin-bottom: 2.4vh }
.front-process .step-title {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--orange); text-transform: uppercase;
  margin-bottom: 6px;
}
.front-process .step p {
  font-size: 15px; line-height: 24px;
}
@media (max-width: 768px) {
  .front-process .process-grid { grid-template-columns: 1fr; gap: 3vh }
  .front-panel h2 { font-size: clamp(52px, 13vw, 90px) }
  .front-process .stage-num { font-size: 15vw }
}

/* ---- PROJECT PAGE: TITLE CARD ---- */
.title-card {
  display: grid; grid-template-columns: auto 1fr; gap: 4vw;
  align-items: flex-start; padding-top: 14vh;
}
/* Long ledes used to clip at the panel edge (overflow: hidden) on short
   screens; the text column now scrolls, and the engine hands the wheel to
   any [data-scroll] element that still has room. */
@media (min-width: 769px) {
  .title-card .tc-body { max-height: 72vh; overflow-y: auto; scrollbar-width: none; padding-bottom: 2vh }
}
@media (min-width: 769px) and (max-height: 850px) {
  .title-card { padding-top: 9vh }
  .title-card h1 { font-size: clamp(56px, 7vw, 118px) }
  .title-card .bignum { font-size: clamp(160px, 20vw, 300px) }
  .title-card .quote { margin-top: 2.2vh; font-size: 19px; line-height: 27px }
  .title-card .lede { font-size: 16px; line-height: 24px }
}
.title-card .bignum {
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 80;
  font-size: clamp(220px, 26vw, 380px);
  color: var(--orange); line-height: .78; letter-spacing: -0.02em;
  text-shadow: 0 22px 60px rgba(15,14,18,.22);
}
.title-card h1 {
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 95;
  font-size: clamp(68px, 8.4vw, 148px);
  line-height: .95; letter-spacing: -0.01em;
  color: var(--ink); text-transform: uppercase;
  margin-top: 0.14em;   /* clearance so KÖNYVTÁR's accents (Ö Á) don't touch the .slate line above */
}
.title-card h1 .gold { color: var(--orange) }
.title-card .sub {
  margin-top: 2.4vh;
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 80;
  font-size: clamp(26px, 2.2vw, 38px);
  line-height: 1; letter-spacing: .01em;
  color: var(--graphite); text-transform: uppercase;
}
.title-card .slate {
  margin-top: 3vh;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--orange); text-transform: uppercase;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.title-card .quote {
  margin-top: 3.6vh;
  font-family: "Newsreader", serif; font-style: italic;
  font-variation-settings: "opsz" 24;
  font-size: 24px; line-height: 34px; color: var(--ink);
  max-width: 36ch; padding-left: 18px;
  border-left: 1px solid var(--orange);
}
.title-card .lede {
  margin-top: 2.4vh;
  font-family: "Newsreader", serif;
  font-variation-settings: "opsz" 24;
  font-size: 18px; line-height: 28px; color: var(--ink); max-width: 42ch;
}

/* ---- PROJECT PAGE: FRAME PANELS ---- */
.frame-panel {
  display: flex; flex-direction: column; justify-content: center;
  align-items: stretch; gap: 24px;
}
.frame-panel .pic { position: relative; height: 72vh }
.frame-panel .pic.tall { height: 74vh }
.frame-panel .caption {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.frame-panel .caption .left {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--orange); text-transform: uppercase;
}
.frame-panel .caption .right {
  font-family: "Newsreader", serif; font-style: italic;
  font-variation-settings: "opsz" 14;
  font-size: 14px; line-height: 22px; color: var(--graphite);
  max-width: 44ch; text-align: right;
}
.frame-panel .roman {
  position: absolute; top: 6vh; left: 5vw;
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: clamp(120px, 16vw, 260px);
  color: var(--orange); opacity: .18; line-height: .8;
  z-index: 0; pointer-events: none; will-change: transform;
}

/* wide pair layout */
.wide-trio {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 1.5vw; height: 74vh; align-self: center; width: 100%;
}
.wide-trio .frame { height: 100% }

/* ---- PROJECT PAGE: END SLATE ---- */
.end-slate {
  background: var(--snow); padding: 9vh 6vw;
  display: flex; flex-direction: column; gap: 20px; justify-content: center;
}
.end-slate .top {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--orange); text-transform: uppercase;
}
.end-slate h2 {
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 90;
  font-size: clamp(72px, 7vw, 128px);
  line-height: .95; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--ink); max-width: 18ch;
}
.end-slate h2 .gold { color: var(--orange) }
.end-slate .grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3vw; max-width: 86ch; margin-top: 2vh;
}
.end-slate .col h3 {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--orange); text-transform: uppercase; margin-bottom: 14px;
}
.end-slate .col ul { list-style: none }
.end-slate .col li {
  font-family: "Newsreader", serif;
  font-variation-settings: "opsz" 14;
  font-size: 14px; line-height: 22px; color: var(--ink);
  display: flex; gap: 10px; padding: 4px 0;
  border-bottom: 1px dashed rgba(15,14,18,.18);
}
.end-slate .col li::before {
  content: "\25C9"; color: var(--orange);
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 10px;
}
.end-slate .credit-block {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--graphite); text-transform: uppercase;
  margin-top: 2vh; padding-top: 2vh;
  border-top: 1px solid rgba(240,90,36,.4);
}
.end-slate .credit-block .gold { color: var(--orange) }
.end-slate .back-cta {
  display: inline-flex; align-items: center; gap: 14px;
  align-self: flex-start; margin-top: 2vh;
  background: var(--orange); color: var(--ink);
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: 30px; line-height: 1; letter-spacing: .04em;
  padding: 18px 26px 16px; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 10px 30px rgba(240,90,36,.35), inset 0 0 0 1px rgba(15,14,18,.18);
  transition: transform 280ms var(--ease);
}
.end-slate .back-cta:hover { transform: translateY(-2px) }
.end-slate .back-cta .arrow {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 12px; letter-spacing: .14em;
}

/* corner slates for project page */
.frame-counter {
  position: fixed; top: 46px; right: 5vw; z-index: 50;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--ink); text-transform: uppercase;
}
.back-slate {
  position: fixed; top: 46px; left: 5vw; z-index: 50;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--ink); text-transform: uppercase;
}
.back-slate a { color: var(--ink); cursor: pointer }
.back-slate a:hover { color: var(--graphite); text-decoration: underline }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  body { overflow: auto }
  html, body { overflow-x: auto; overflow-y: hidden; height: 100vh; height: 100svh }
  .edge-arrow, .edge-grad { display: none }
  .viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch }
  .reel { position: relative; transform: none !important }
  .panel {
    scroll-snap-align: start;
    width: 100vw !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1vh;           /* no ticker on mobile = minimal bottom padding */
    scrollbar-width: none;          /* Firefox: hide scrollbar */
  }
  .panel::-webkit-scrollbar { display: none }
  .panel.w15, .panel.w2 { width: 100vw !important }
  .triptych { grid-template-columns: 1fr; height: auto }
  .project { grid-template-columns: 1fr !important; padding: 3vh 6vw 1vh 6vw }  /* no sprocket on mobile = no top-padding-for-clearance needed */
  .sprocket, .ticker, .slate-tl, .slate-br { display: none }   /* drop editorial chrome on mobile */
  .project .hero { height: 22vh }
  .project .meta { gap: 10px }
  .project .quote { font-size: 18px; line-height: 26px }
  .triptych .frame:not(:first-child) { display: none }   /* show only the first triptych image on phones; full set lives on the project detail page */
  .triptych .frame:first-child { height: 22vh }
  .numeral { font-size: 22vw; opacity: 0.18; bottom: auto; top: 22vh; right: 4vw; left: auto }
  .cover .bignum { font-size: 46vw }
  .cover .credits { font-size: 10px; letter-spacing: .10em } /* keep line from orphaning RÉSZLETEK */
  .cover .role { font-size: 18px; line-height: 26px }
  .title-card { grid-template-columns: 1fr; padding-top: 8vh }
  .title-card .bignum { display: none }   /* drop the big "I." on mobile project view */
  .wide-trio { grid-template-columns: 1fr; height: auto }
  .frame-panel .pic { height: 60vh }
  .frame-panel .caption { flex-direction: column; align-items: flex-start }
  .about .body { grid-template-columns: 1fr; margin-top: 2vh }    /* single column on mobile */
  .about { padding: 3vh 6vw 1vh 6vw }
  .about h2 { font-size: clamp(64px, 7vw, 110px) }
  .about .signoff { margin-top: 2vh }
  .about .contact { margin-top: 2vh }

  /* Touch targets: sprocket dots — visual stays small, hit-area expanded */
  .sprocket { height: 44px; gap: 0 }
  .sprocket .hole { padding: 14px 10px; font-size: 13px }

  /* Touch target: copy button — visual icon stays 12px, hit area 44x44 */
  .about .contact .copy-btn { width: 44px; height: 44px; margin-left: 4px }

  /* Triptych on Könyvtár: cap each image so the panel doesn't become a marathon */
  .triptych .frame { height: 32vh }

  /* Project page back link + frame counter — moved up now that sprocket is hidden */
  .back-slate, .frame-counter { font-size: 10px; top: 14px }
}

/* — MOBILE SWIPE HINT — */
.swipe-hint {
  display: none;
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 45; pointer-events: none;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--snow); background: rgba(15,14,18,.85);
  padding: 10px 16px; border-radius: 999px;
  transition: opacity .5s var(--ease);
}
.swipe-hint .arrow { color: var(--orange) }
.swipe-hint.gone { opacity: 0 }
@media (max-width: 768px) {
  .swipe-hint { display: inline-flex; gap: 8px; align-items: center; animation: hint-nudge 1.6s var(--ease) infinite }
}
@keyframes hint-nudge {
  0%, 100% { transform: translateX(-50%) }
  50%      { transform: translateX(calc(-50% + 8px)) }
}

/* — 404 — */
.nf-card { text-align: center; padding: 0 6vw }
.nf-top {
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em;
  color: var(--orange); text-transform: uppercase;
}
.nf-num {
  font-family: "League Gothic", sans-serif;
  font-variation-settings: "wdth" 90;
  font-size: clamp(160px, 30vw, 380px);
  line-height: .9; color: var(--ink);
}
.nf-text {
  font-family: "Newsreader", serif; font-style: italic;
  font-variation-settings: "opsz" 24;
  font-size: 20px; line-height: 30px; color: var(--graphite);
  margin: 2vh 0 4vh;
}
.nf-card .cta { align-self: center }

/* — REDUCED MOTION — */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; padding-left: 24px }
  .cover .bignum { animation: none }
  .cover .role, .cover .credits { animation: none }
  .leader .wipe { animation: none }
  .blackout .bar { transition: none }
  .swipe-hint { animation: none }
  .cta, .back-cta, .edge-arrow, .sprocket .hole { transition: none }
}

::-webkit-scrollbar { display: none }

/* — PRIVACY / LEGAL PAGE (adatvedelem) — normal document scroll, unlike the reel */
html.legal, html.legal body { height: auto; overflow: auto }
.legal-page {
  max-width: 680px; margin: 0 auto; padding: 110px 5vw 80px;
  font-family: "Inter", ui-sans-serif, sans-serif; font-size: 15px; line-height: 1.65; color: var(--ink);
}
.legal-page .top {
  font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
}
.legal-page h1 {
  font-family: "League Gothic", Impact, sans-serif; font-weight: 400;
  font-size: clamp(40px, 7vw, 64px); line-height: 1; text-transform: uppercase; margin: 14px 0 28px;
}
.legal-page h2 {
  font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  margin: 32px 0 8px; padding-top: 14px; border-top: 1px solid rgba(240,90,36,.4);
}
.legal-page p { margin: 0 0 12px }
.legal-page ul { margin: 0 0 12px; padding-left: 20px }
.legal-page li { margin-bottom: 4px }
.legal-page a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange) }
.legal-page a:hover { color: var(--orange) }
.legal-page .updated { margin-top: 40px; font-size: 12px; opacity: .6 }
.legal .back-slate { position: absolute }