/* ---- Menu (2026-09-30): a crisp two-line toggle and a full-screen panel with large type. ----
   Loaded last on every page; `:root body` outranks the older per-page menu rules without !important. */
:root body .menu-toggle{display:block;position:relative;width:44px;height:44px;flex:0 0 44px;margin:0;padding:0;border:1px solid #ffffff2e;border-radius:14px;background:#ffffff10;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .3s,border-color .3s}
:root body .menu-toggle span{position:absolute;left:50%;top:50%;display:block;width:18px;height:2px;margin:0;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.65,0,.35,1),width .45s cubic-bezier(.65,0,.35,1)}
:root body .menu-toggle span:first-child{transform:translate(-50%,-4px)}
:root body .menu-toggle span:last-child{width:12px;transform:translate(calc(-50% + 3px),3px)}
:root body .menu-toggle:hover{border-color:#ffffff5c}
:root body .menu-toggle[aria-expanded=true]{background:#e51936;border-color:#ff5c77}
:root body .menu-toggle[aria-expanded=true] span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
:root body .menu-toggle[aria-expanded=true] span:last-child{width:18px;transform:translate(-50%,-50%) rotate(-45deg)}
@media(max-width:420px){:root body .menu-toggle{width:40px;height:40px;flex-basis:40px;border-radius:12px}}

/* One navigation breakpoint for the journey and inner pages. Reset the old panel
   geometry explicitly so it cannot leak into the inline desktop navigation. */
:root body .header .nav:not(.open){display:none}
@media(min-width:1381px){
 :root body .header .nav:not(.open){display:flex;position:static;inset:auto;flex:1;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(12px,1.25vw,26px);width:auto;height:auto;max-height:none;margin:0;padding:0;border:0;background:transparent;font-size:13px;white-space:nowrap}
 :root body .header .nav:not(.open)>a{flex-shrink:0;padding:12px 0}
 :root body .header .menu-toggle{display:none}
}
/* With script, app.js measures the real widths: the inline menu shows whenever it fits beside the brand and the
   actions (any width, zoom or language), otherwise the toggle does; the breakpoint above is the no-script fallback. */
:root body .header:is(.nav-fits,.nav-probe) .nav:not(.open){display:flex;position:static;inset:auto;flex:1;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(12px,1.25vw,26px);width:auto;height:auto;max-height:none;margin:0;padding:0;border:0;background:transparent;font-size:13px;white-space:nowrap}
:root body .header:is(.nav-fits,.nav-probe) .nav:not(.open)>a{flex-shrink:0;padding:12px 0}
:root body .header.nav-probe .nav:not(.open){min-width:0;overflow:hidden;justify-content:flex-start}
:root body .header:is(.nav-fits,.nav-probe) .menu-toggle{display:none}
:root body .header.nav-tight .nav:not(.open){display:none}
:root body .header.nav-tight .menu-toggle{display:block}
:root body .header.nav-tight .header-actions{margin-left:auto}
/* The data-saver home keeps its compact document header at every width. */
:root:not([data-home-experience="desktop"]) body.home-page .header .nav:not(.open){display:none}
:root:not([data-home-experience="desktop"]) body.home-page .header .menu-toggle{display:block}

/* The header turns solid while the panel is open, so both read as one surface; the page behind stays still. */
html.menu-open{overflow:hidden;scrollbar-gutter:stable}
html.menu-open body .header{z-index:1000;background:#07090c;-webkit-backdrop-filter:none;backdrop-filter:none}

.nav-extra{display:none}
:root body .header .nav.open{position:fixed;inset:var(--menu-top,78px) 0 0;z-index:5;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;width:auto;height:auto;max-height:none;margin:0;padding:clamp(14px,3.5vh,34px) max(24px,calc((100vw - 680px)/2)) calc(24px + env(safe-area-inset-bottom));border:0;border-radius:0;background:radial-gradient(120% 55% at 100% 0%,#e519361f,transparent 62%),radial-gradient(90% 45% at 0% 100%,#18283a66,transparent 70%),#07090c;-webkit-backdrop-filter:none;backdrop-filter:none;overflow-y:auto;overscroll-behavior:contain;counter-reset:menu;font-size:16px;white-space:normal;animation:menu-panel .38s cubic-bezier(.2,.8,.2,1) both}
:root body .header .nav.open.is-closing{animation:menu-panel-out .18s ease-in both}
:root body .header .nav.open>a{position:relative;display:flex;align-items:center;gap:16px;margin:0;padding:12px 0;color:#9ba4ac;font:600 clamp(26px,7.4vw,38px)/1.15 Manrope,Arial,sans-serif;letter-spacing:-.02em;white-space:normal;opacity:0;transform:translateY(18px);animation:menu-link .55s cubic-bezier(.2,.8,.2,1) forwards;transition:color .25s}
:root body .header .nav.open>a::before{counter-increment:menu;content:counter(menu,decimal-leading-zero);flex:none;width:24px;color:#e51936;font:600 12px/1 Rajdhani,RajdhaniFallback,RajdhaniAndroid,Manrope,sans-serif;letter-spacing:.14em;transform:translateY(-.7em)}
:root body .header .nav.open>a::after{content:'';position:static;display:block;flex:none;width:8px;height:8px;border-radius:50%;background:#e51936;box-shadow:0 0 14px #e51936;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
:root body .header .nav.open>a:is(:hover,:focus-visible,[aria-current=page]){color:#fff}
:root body .header .nav.open>a[aria-current=page]::after{transform:scale(1)}
:root body .header .nav.open>a:nth-child(2){animation-delay:.04s}
:root body .header .nav.open>a:nth-child(3){animation-delay:.08s}
:root body .header .nav.open>a:nth-child(4){animation-delay:.12s}
:root body .header .nav.open>a:nth-child(5){animation-delay:.16s}
:root body .header .nav.open>a:nth-child(6){animation-delay:.2s}
:root body .header .nav.open>a:nth-child(7){animation-delay:.24s}

/* Contact shortcuts at the foot of the panel. */
:root body .header .nav.open .nav-extra{display:block;margin-top:auto;padding-top:26px;opacity:0;transform:translateY(18px);animation:menu-link .55s cubic-bezier(.2,.8,.2,1) .3s forwards}
.nav-extra p{margin:0 0 12px;color:#8a939b;font:600 11px/1.2 Rajdhani,RajdhaniFallback,RajdhaniAndroid,Manrope,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.nav-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
:root body .header .nav.open .nav-contact a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:66px;margin:0;padding:10px 6px;border:1px solid #ffffff1f;border-radius:14px;background:#ffffff0b;color:#eef1f3;font:600 13px/1.2 Manrope,Arial,sans-serif;letter-spacing:0;white-space:nowrap;transition:border-color .25s,background .25s}
:root body .header .nav.open .nav-contact a::after{display:none}
:root body .header .nav.open .nav-contact a:hover{border-color:#ffffff4d}
:root body .header .nav.open .nav-contact .nav-call{background:linear-gradient(145deg,#ef173d,#ac0b29);border-color:#f55a77;color:#fff}
:root body .header .nav.open .nav-contact .nav-wa{background:#0e2419;border-color:#25d36659;color:#dfffea}
.nav-contact svg{width:20px;height:20px}

@keyframes menu-panel{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes menu-panel-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes menu-link{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){:root body .header .nav.open,:root body .header .nav.open>a,:root body .header .nav.open .nav-extra{animation:none;opacity:1;transform:none}:root body .menu-toggle span{transition:none}}

/* Phones: building a press is the main action, so the header keeps a readable label (and its icon where there is room).
   A soft light passes over the button a few times after the page opens; the mobile performance rules otherwise keep
   button effects still. */
@media(max-width:600px){
 :root body .header .header-actions{gap:6px}
 :root body .header .create-press-link{min-height:42px;padding:0 11px;gap:6px;font:700 12px/1 Manrope,Arial,sans-serif;letter-spacing:0;box-shadow:0 6px 18px #e5193652,inset 0 1px 0 #ffffff33}
 :root body .header .create-press-link svg{display:block;flex:none;width:16px;height:16px}
 :root body .header .create-press-link span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
 :root body .header .header-actions{flex:0 1 auto;min-width:0}
 /* Longer translations wrap onto two lines instead of pushing the menu button off the screen. */
 :root body .header .header-actions .create-press-link{flex:0 1 auto;width:auto;min-width:0}
 :root body .header .create-press-link span{white-space:normal;line-height:1.12;text-align:start}
 /* With the language menu in the header (site server pages), the plan button shrinks to its icon and keeps the count as a badge. */
 :root body .header:has(.locale-picker) .header-actions .create-press-link svg{display:none}
 :root body .header:has(.locale-picker) .header-plan-control{position:relative;width:40px;padding:0;justify-content:center}
 :root body .header:has(.locale-picker) .header-plan-control .plan-count{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;font-size:10px;line-height:16px}
}
@media(max-width:600px) and (prefers-reduced-motion:no-preference){
 :root body .header .create-press-link::before{background:linear-gradient(110deg,transparent 40%,#ffffff47 50%,transparent 60%);animation:header-build-light 7s ease-in-out .8s 3!important}
}
@media(max-width:400px){:root body:not(.home-page) .header .brand img{width:84px;height:auto}}
@media(max-width:374px){
 :root body:not(.home-page) .header .create-press-link{padding:0 10px}
 :root body:not(.home-page) .header .create-press-link svg{display:none}
}
@keyframes header-build-light{0%{transform:translateX(-100%)}28%,100%{transform:translateX(100%)}}
/* Gallery dock (source/gallery-chrome.mjs): a side tab on wide screens whose prints fan out on hover, and a round
   button opposite the contact buttons on phones. */
.gallery-dock{position:fixed;left:0;top:50%;z-index:44;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 10px 18px 9px;border:1px solid #ffffff2e;border-left:0;border-radius:0 14px 14px 0;background:linear-gradient(160deg,#1c2127f2,#0e1114f2);box-shadow:0 12px 34px #0008,inset 3px 0 0 #da1638;color:#fff;text-decoration:none;transform:translateY(-50%);transition:padding .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background .45s}
.gallery-dock-icon{width:22px;height:22px;fill:none;stroke:#ff5b78;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gallery-dock-label{writing-mode:vertical-rl;transform:rotate(180deg);font:600 13px/1 Rajdhani,RajdhaniFallback,RajdhaniAndroid,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.gallery-dock-fan{position:absolute;left:calc(100% + 18px);top:50%;width:120px;height:90px;pointer-events:none}
.gallery-dock-fan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:4px solid #f3f1ec;border-radius:2px;box-shadow:0 10px 24px #000a;opacity:0;transform:translate(-36px,-50%) scale(.7);transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s}
.gallery-dock:is(:hover,:focus-visible){padding-left:14px;background:linear-gradient(160deg,#252b33f5,#11151af5);box-shadow:0 16px 42px #000a,inset 4px 0 0 #ff2f53}
.gallery-dock:focus-visible{outline:2px solid #fff;outline-offset:3px}
.gallery-dock:is(:hover,:focus-visible) .gallery-dock-fan img{opacity:1}
.gallery-dock:is(:hover,:focus-visible) .gallery-dock-fan img:nth-child(1){transform:translate(-4px,-60%) rotate(-10deg)}
.gallery-dock:is(:hover,:focus-visible) .gallery-dock-fan img:nth-child(2){transform:translate(14px,-50%) rotate(2deg);transition-delay:.05s}
.gallery-dock:is(:hover,:focus-visible) .gallery-dock-fan img:nth-child(3){transform:translate(32px,-40%) rotate(12deg);transition-delay:.1s}
/* The home page keeps its chapter rail on the left edge, so the tab waits in the lower corner there. */
@media(min-width:900px){.home-page .gallery-dock{top:auto;bottom:32px;transform:none}}
@media(max-width:899px){
 .gallery-dock{top:auto;left:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:46px;height:46px;padding:0;justify-content:center;border:1px solid #ffffff55;border-radius:50%;background:linear-gradient(145deg,#232930,#0f1216);box-shadow:0 6px 22px #0008,inset 0 0 0 2px #da163866;transform:none}
 .gallery-dock:is(:hover,:focus-visible){padding:0}
 .gallery-dock-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;writing-mode:horizontal-tb;transform:none}
 .gallery-dock-fan{display:none}
}
/* On the home page the lower corners hold the scroll cue and the reduce-motion control (the latter at the left in right-to-left
   languages): the round button waits above them instead of covering them. */
@media(max-width:899px){.home-page .gallery-dock{bottom:calc(66px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){.gallery-dock,.gallery-dock-fan img{transition:none}}
@media print{.gallery-dock{display:none}}