/* Z-129 v2 — документ, типографика, шапка, меню, футер. Токены — tokens.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--paper);
  scroll-padding-top:calc(var(--header-h) + 12px)}      /* липкая шапка не закрывает якорь и фокус */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;background:var(--tone);color:var(--ink);font:400 var(--fs-text)/var(--lh-text) var(--font-text);
  -webkit-font-smoothing:antialiased;overflow-x:clip;font-kerning:normal}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--font-display);margin:0;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:900;letter-spacing:-.03em}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:800;letter-spacing:-.02em}
h3{font-size:var(--fs-h3);line-height:1.1;font-weight:800;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:var(--measure);text-wrap:pretty}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.muted{color:var(--muted)}
.num,.tnum{font-variant-numeric:lining-nums tabular-nums}
.skip{position:absolute;left:var(--gutter);top:-80px;z-index:70;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:6px}
.skip:focus{top:10px}
main:focus{outline:none}                               /* цель skip-link: фокус без рамки */

/* движение: прячем только под .motion (ставит motion.js после загрузки vendor; страховка 2,5 с) */
.motion [data-reveal]:not(.is-in){opacity:0}
@media print{[data-reveal],main [style*="visibility: hidden"],.roster>li,.berth,.stop-card,.crew-head-text>*,.free-trio>li{opacity:1!important;visibility:visible!important;transform:none!important}
  .pin-spacer{height:auto!important;padding:0!important;margin:0!important;max-height:none!important}}   /* печать без прокрутки: не прятать непоказанное (GSAP autoAlpha ставит inline opacity/visibility) */

/* ───────── шапка: белая полоса, линия акцента снизу ───────── */
.bar{position:sticky;top:0;z-index:50;height:var(--header-h);display:flex;align-items:center;gap:12px;
  padding:0 var(--gutter);background:var(--paper);color:var(--ink);border-bottom:2px solid var(--accent)}
.brand{font:800 1.08rem/1 var(--font-display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;margin-right:auto}
.bar .brand{padding:10px 0}
.nav{display:none;align-items:center;gap:2px;font-size:.92rem}
.nav a{text-decoration:none;padding:10px 9px;border-radius:4px;white-space:nowrap;color:var(--muted)}
.nav a:hover{color:var(--ink);text-decoration:underline}
.nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:3px;text-underline-offset:.45em}
.lang{display:inline-flex;align-items:center;gap:2px;font-size:.85rem;color:var(--muted);font-variant-numeric:lining-nums}
.lang a{text-decoration:none;padding:10px 5px;min-width:32px;text-align:center;letter-spacing:.04em}
.lang a:hover{color:var(--ink);text-decoration:underline}
.lang a[aria-current=true]{color:var(--ink);font-weight:700}
.lang--bar{display:none}
.menu-btn{font:600 .95rem/1 var(--font-text);color:var(--ink);background:none;border:1.5px solid var(--ink);border-radius:999px;
  min-height:40px;padding:0 16px;cursor:pointer}
.menu-btn:hover,.menu-close:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}  /* контрастно в обеих темах */
@media (min-width:900px){
  .nav{display:flex}
  .lang--bar{display:inline-flex;margin-left:4px}
  .menu-btn{display:none}
  .bar .brand{margin-right:auto}
}
@media (min-width:900px) and (max-width:1099px){.nav a{padding:10px 6px;font-size:.88rem}.bar{gap:8px}}
/* телефон: лого + талон + «Меню» помещаются в 360 px без горизонтального скролла */
@media (max-width:899px){.bar{gap:8px}.menu-btn{padding:0 12px}}
@media (max-width:420px){.bar{padding:0 12px}.bar .brand{font-size:.95rem}.bar .ticket--mini .t-main{padding:4px 9px}}
@media (max-width:379px){.bar .brand{white-space:normal;line-height:1.05;max-width:6.5em;padding:6px 0}}

/* ───────── меню на телефоне: диалог на весь экран ───────── */
.menu{width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;padding:0 var(--gutter) 32px;
  background:var(--paper);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.menu::backdrop{background:var(--ink);opacity:.4}
.menu-top{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);border-bottom:2px solid var(--accent);margin-bottom:12px}
.menu-close{font:600 .95rem/1 var(--font-text);color:var(--ink);background:none;border:1.5px solid var(--ink);border-radius:999px;min-height:40px;padding:0 16px;cursor:pointer}
.menu-links{list-style:none;margin:0 0 24px;padding:0}
.menu-links a{display:block;padding:10px 0;font:800 clamp(2rem,9vw,3rem)/1.05 var(--font-display);letter-spacing:-.02em;text-decoration:none}
.menu-links a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:.15em}
.lang--menu{font-size:1.05rem;margin-left:-5px}

/* ───────── заглушки страниц (до Task 1–9) ───────── */
.page-head{max-width:var(--wrap);margin:0 auto;padding:clamp(64px,10vw,150px) var(--gutter) clamp(56px,8vw,110px)}
.page-head .lede{margin-top:20px;font:italic 400 clamp(1.2rem,1vw + 1rem,1.7rem)/1.3 var(--font-display);color:var(--muted)}

/* ───────── футер ───────── */
.foot{border-top:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:clamp(40px,6vw,80px) var(--gutter) 40px;font-size:var(--fs-small)}
.foot-in{max-width:var(--wrap);margin:0 auto;display:grid;gap:32px 48px}
.foot-brand{font:900 clamp(2.2rem,5vw,4.5rem)/.95 var(--font-display);letter-spacing:-.03em;margin:0}
.foot-dates{font:italic 400 1.15rem/1.3 var(--font-display);color:var(--muted);margin:10px 0 0}
.foot-col h2{font:600 .95rem/1.2 var(--font-text);letter-spacing:0;margin:0 0 10px;color:var(--muted)}
.foot-col ul{list-style:none;margin:0 0 12px;padding:0}
.foot-col li a{display:inline-block;padding:6px 0;font-size:1rem;text-decoration:none}
.foot-col li a:hover,.foot-col li a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--accent)}
.foot-col .lang{margin-left:-5px}
.foot-note{color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
.foot-note p{margin:0 0 .4em}
.credits{margin-top:12px}                         /* кредиты фото (partials/credits.j2) */
.credits summary{cursor:pointer;display:inline-block;padding:8px 0;color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:.2em}
.credits-lede{margin:6px 0 10px}
.credits-list{margin:0;padding:0 0 0 1.6em;columns:22rem 3;column-gap:40px;font-size:.85rem;line-height:1.5}
.credits-list li{break-inside:avoid;margin:0 0 .35em;overflow-wrap:anywhere}
.credits-list a{color:var(--ink)}
@media (min-width:760px){.foot-in{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}.foot-note{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.bar,.menu,.skip{display:none}.foot{border-top:1px solid #000}}
