/* ==========================================================================
   INMA — Iraq National Museum of Architecture
   Built from the Brand Identity Guide (the .ai, 26 pages): Kufic mark + wordmark and pattern, monoline
   illustrations, ivory / ink / emerald / patina / stone palette, square-cornered UI, thin arrows.
   Direction: logical properties throughout, so AR (RTL) and EN (LTR) mirror for free.
   ========================================================================== */

/* ---------- fonts ----------
   Guide p.5: Latin set in Madani Arabic, Arabic set in Aktiv Grotesk Ex. One family name, two sources,
   split by unicode-range, so every element just says font-family:'INMA'.
   NB: Aktiv Grotesk files supplied are the Demo/Trial licence — buy the licence before public launch. */
@font-face{font-family:'INMA';font-weight:300;font-display:swap;src:url(/fonts/madani-light.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:'INMA';font-weight:400;font-display:swap;src:url(/fonts/madani-regular.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:'INMA';font-weight:500;font-display:swap;src:url(/fonts/madani-medium.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:'INMA';font-weight:600;font-display:swap;src:url(/fonts/madani-semi-bold.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:'INMA';font-weight:700;font-display:swap;src:url(/fonts/madani-bold.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:'INMA';font-weight:300;font-display:swap;src:url(/fonts/aktiv-ex-lt.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'INMA';font-weight:400;font-display:swap;src:url(/fonts/aktiv-ex-rg.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'INMA';font-weight:500;font-display:swap;src:url(/fonts/aktiv-ex-md.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'INMA';font-weight:600;font-display:swap;src:url(/fonts/aktiv-ex-sbd.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'INMA';font-weight:700;font-display:swap;src:url(/fonts/aktiv-ex-bd.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ---------- tokens ---------- */
:root{
  --emerald:#0F4E4A; --emerald-deep:#082E2C; --patina:#7BA89C; --patina-soft:#C5D8D0;
  --bone:#F5EFE0; --bone-soft:#FAF6EC; --bone-deep:#EDE5D0;
  --ink:#0A0A0A; --ink-soft:#1A1A1A; --stone:#6B6B6B; --stone-light:#9A9A9A;
  --line:#D4CDB8; --line-soft:#E5DFCE;

  --f-display:'INMA',system-ui,sans-serif;
  --f-body:'INMA',system-ui,sans-serif;
  --f-label:'INMA',system-ui,sans-serif;
  --f-en-display:'INMA',system-ui,sans-serif;

  --gutter:clamp(18px,4.6vw,80px);
  --maxw:1440px;
  --hdr:76px;
  --r:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --bar-h:68px;
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--f-body);font-weight:300;font-size:15.5px;line-height:1.9;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
html[lang="en"] body{line-height:1.7;font-weight:300}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:600;text-wrap:balance}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{font-weight:600;letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
.on-dark :focus-visible,.menu :focus-visible,.visitbar :focus-visible{outline-color:var(--patina)}
::selection{background:var(--emerald);color:var(--bone)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;inset-block-start:-60px;inset-inline-start:16px;z-index:200;background:var(--ink);color:var(--bone);padding:10px 18px;text-decoration:none;transition:inset-block-start .2s}
.skip:focus{inset-block-start:12px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* English subtitle: Arabic leads, English accompanies (plain Madani, as in the guide’s bilingual lines). Hidden when the page itself is English. */
.sub{display:block;font-family:var(--f-body);font-style:normal;font-weight:400;letter-spacing:.01em;direction:ltr;unicode-bidi:isolate;text-align:start;color:var(--stone)}
html[dir="rtl"] .sub{text-align:right}
html[lang="en"] [data-only="ar"]{display:none!important}
html[lang="ar"] [data-only="en"]{display:none!important}

/* Tracked UI labels */
.label{font-family:var(--f-label);font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;direction:ltr;unicode-bidi:isolate;line-height:1.5}
.num{font-variant-numeric:tabular-nums}

/* ---------- reveal on scroll ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 28px;font-family:var(--f-body);font-size:15px;font-weight:500;text-decoration:none;border:1px solid currentColor;background:transparent;transition:background .25s,color .25s,border-color .25s;line-height:1.2;white-space:nowrap}
html[lang="en"] .btn{font-size:14px;letter-spacing:.02em}
.btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
html[dir="rtl"] .btn svg.arr,html[dir="rtl"] .vb svg.arr{transform:scaleX(-1)}
.btn:hover svg.arr{transform:translateX(4px)}
html[dir="rtl"] .btn:hover svg.arr{transform:scaleX(-1) translateX(4px)}
.btn--bone{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn--bone:hover{background:var(--emerald);color:var(--bone);border-color:var(--emerald)}
.btn--ghost{color:var(--bone);border-color:rgba(245,239,224,.6)}
.btn--ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn--ink{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn--ink:hover{background:var(--emerald);border-color:var(--emerald)}
.btn--line{color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--bone)}
.stroke{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}


/* ==========================================================================
   HEADER — as the guide's website page (p.24): logo at the start edge, centred links, language + emerald button.
   Transparent over the hero; ivory once scrolled.
   ========================================================================== */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;color:var(--ink);background:var(--bone);box-shadow:0 1px 0 var(--line);transition:box-shadow .35s}
.hdr__bar{display:flex;align-items:center;gap:clamp(14px,2.6vw,44px);height:var(--hdr);padding-inline:var(--gutter);transition:height .35s var(--ease)}
.hdr.is-solid .hdr__bar{height:68px}
.hdr__logo{display:block;color:inherit;line-height:0;flex:none;padding:6px 0}
.hdr__logo svg{width:184px;height:42.4px;transition:width .35s var(--ease),height .35s var(--ease)}
.hdr.is-solid .hdr__logo svg{width:160px;height:36.9px}
.hdr__nav{display:flex;justify-content:center;gap:clamp(16px,2.2vw,38px);margin-inline:auto}
.hdr__nav a{position:relative;text-decoration:none;font-size:14.5px;font-weight:400;padding-block:8px;white-space:nowrap}
html[lang="en"] .hdr__nav a{font-size:13.5px;font-weight:500}
.hdr__nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:var(--o,right);transition:transform .35s var(--ease)}
html[dir="ltr"] .hdr__nav a::after{--o:left}
.hdr__nav a:hover::after,.hdr__nav a[aria-current="true"]::after{transform:scaleX(1)}
.hdr__end{display:flex;align-items:center;gap:10px;flex:none}
.hbtn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:12px;cursor:pointer;font-size:13px;font-weight:500;letter-spacing:.06em;transition:opacity .2s}
.hbtn:hover{opacity:.7}
.hbtn:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
.hbtn--lang{border-inline-end:1px solid var(--line);border-radius:0;padding-inline-end:18px;margin-inline-end:4px}
.hbtn--lang svg{width:16px;height:16px}
.menu-btn{display:none}
.burger{width:22px;height:12px;position:relative;display:block}
.burger i{position:absolute;inset-inline:0;height:1.5px;background:currentColor}
.burger i:first-child{top:0}.burger i:last-child{top:10px}
.pill{display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:22px;border-radius:var(--r);background:var(--emerald);color:var(--bone);border:1px solid var(--emerald);font-size:14px;font-weight:500;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
html[lang="en"] .pill{font-size:13px;letter-spacing:.03em}
.pill:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.progress{position:absolute;inset:auto 0 0 0;height:2px;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--emerald);transform:scaleX(var(--p,0));transform-origin:var(--o,right)}
html[dir="ltr"] .progress i{--o:left}
@media (max-width:1120px){
  .hdr__nav{display:none}
  .hdr__end{margin-inline-start:auto}
  .menu-btn{display:inline-flex;order:3}
  .hdr__bar,.hdr.is-solid .hdr__bar{height:68px}
  .hdr__logo svg,.hdr.is-solid .hdr__logo svg{width:150px;height:34.6px}
}
@media (max-width:640px){
  .pill{display:none}
  .hbtn__t{display:none}
  .hbtn{padding-inline:8px}
  .hbtn--lang{border-inline-end:none;padding-inline-end:8px;margin:0}
  .hdr__logo svg,.hdr.is-solid .hdr__logo svg{width:136px;height:31.4px}
}
:root{--hdr:76px}
@media (max-width:1120px){:root{--hdr:68px}}

/* ==========================================================================
   FULL-SCREEN MENU (phones and tablets)
   ========================================================================== */
.menu{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--bone);display:grid;grid-template-columns:1.1fr 1fr;visibility:hidden;opacity:0;transition:opacity .45s var(--ease),visibility 0s .45s}
.menu.is-open{visibility:visible;opacity:1;transition:opacity .45s var(--ease)}
.menu__main{display:flex;flex-direction:column;padding:clamp(18px,3vw,40px) var(--gutter) clamp(24px,4vw,56px)}
.menu__top{display:flex;justify-content:space-between;align-items:center;min-height:64px}
.menu__x{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:12px;height:44px;padding-inline:14px;margin-inline:-14px;font-size:14px;font-weight:500}
.menu__x:focus-visible{outline:2px solid var(--patina);outline-offset:-2px}
.menu__x svg{width:20px;height:20px}
.menu ol{list-style:none;margin:auto 0;padding:0}
.menu li{overflow:hidden;border-bottom:1px solid rgba(245,239,224,.14)}
.menu li:first-child{border-top:1px solid rgba(245,239,224,.14)}
.menu li a{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:16px;padding:clamp(10px,1.8vh,20px) 0;text-decoration:none;font-family:var(--f-display);font-size:clamp(28px,5vh,54px);line-height:1.25;font-weight:500;transform:translateY(110%);transition:transform .8s var(--ease),color .25s;transition-delay:calc(var(--i)*.045s + .1s)}
.menu.is-open li a{transform:none}
.menu li a .n{font-size:11px;letter-spacing:.2em;color:var(--patina);direction:ltr}
.menu li a .en{font-size:.36em;color:var(--patina);font-weight:400;direction:ltr;letter-spacing:.02em}
html[lang="en"] .menu li a .en{display:none}
.menu li a:hover,.menu li a:focus-visible{color:var(--patina)}
.menu__foot{display:flex;flex-wrap:wrap;gap:12px 36px;font-size:14px;color:var(--patina-soft);padding-top:24px}
.menu__foot a{text-decoration:none;border-bottom:1px solid rgba(197,216,208,.3)}
.menu__foot a:hover{color:var(--bone);border-color:var(--bone)}
.menu__side{position:relative;overflow:hidden;background:var(--bone)}
.menu__side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease),transform 1.4s var(--ease);transform:scale(1.06)}
.menu__side img.is-on{opacity:1;transform:scale(1)}
.menu__side img.line{mix-blend-mode:multiply}
@media (max-width:860px){.menu{grid-template-columns:1fr}.menu__side{display:none}
  .menu li a{font-size:clamp(24px,4.2vh,36px);padding-block:clamp(8px,1.5vh,16px);grid-template-columns:36px 1fr auto}
  .menu li a .en{font-size:.5em}}

/* ==========================================================================
   HERO — the guide's website layout (p.24): photograph with a flat emerald panel carrying the headline
   ========================================================================== */
.hero{position:relative;margin-top:var(--hdr);height:calc(100svh - var(--hdr));min-height:620px;max-height:1000px;color:var(--bone);background:var(--ink);overflow:hidden;isolation:isolate}
.hero__slides{position:absolute;inset:0;z-index:-2}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease);margin:0}
.slide.is-on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.slide.is-on img{animation:kb 11s linear forwards}
.slide[data-fx="b"].is-on img{animation-name:kb2}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12)}}
@keyframes kb2{from{transform:scale(1.12) translateX(-1.5%)}to{transform:scale(1.02) translateX(0)}}
.hero.is-paused .slide img{animation-play-state:paused}
.hero__panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(52%,800px);background:var(--emerald);display:flex;flex-direction:column;justify-content:center;padding:40px clamp(28px,4.4vw,72px) calc(var(--bar-h) + 110px);z-index:1}
.hero__strip{position:absolute;inset-inline-start:0;bottom:var(--bar-h);width:min(52%,800px);height:60px;background:var(--patina);opacity:.5;-webkit-mask:url(/img/inma-pattern.svg) 0 0/531px auto repeat-x;mask:url(/img/inma-pattern.svg) 0 0/531px auto repeat-x;z-index:2}
.hero__eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:clamp(16px,3vh,28px);color:var(--patina-soft)}
.hero__eyebrow::before{content:"";width:40px;height:1px;background:currentColor}
.hero__eyebrow.label{direction:inherit}
.hero__eyebrow span{direction:ltr;unicode-bidi:isolate}
.hero h1{font-size:clamp(36px,4.8vw,80px);line-height:1.28;font-weight:700;max-width:11em}
html[lang="en"] h1{font-size:clamp(40px,5.4vw,92px);line-height:1.04;max-width:9em;font-weight:600}
.hero h1 em{font-style:normal;color:var(--patina)}
.hero__lede{margin-top:clamp(14px,2.4vh,26px);max-width:27em;font-size:clamp(15px,1.25vw,18px);color:var(--patina-soft);line-height:1.8}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,4vh,40px)}
.hero__ctrl{position:absolute;inset-inline:var(--gutter);bottom:calc(var(--bar-h) + 22px);display:flex;align-items:center;justify-content:flex-end;gap:20px;pointer-events:none;z-index:2}
.hero__ctrl>*{pointer-events:auto}
.hero__cap{margin-inline-start:auto;margin-inline-end:0;font-size:12.5px;color:var(--bone);max-width:34ch;display:none;text-shadow:0 1px 14px rgba(10,10,10,.7)}
.dots{display:flex;gap:8px}
.dots button{all:unset;box-sizing:border-box;width:38px;height:24px;position:relative;cursor:pointer}
.dots button::before{content:"";position:absolute;inset-inline:0;top:11px;height:2px;background:rgba(245,239,224,.4)}
.dots button i{position:absolute;inset-inline:0;top:11px;height:2px;background:var(--bone);transform:scaleX(0);transform-origin:var(--o,right)}
html[dir="ltr"] .dots button i{--o:left}
.dots button.is-on i{animation:fill 7s linear forwards}
.hero.is-paused .dots button.is-on i{animation-play-state:paused}
.dots button:focus-visible{outline:2px solid var(--patina);outline-offset:2px}
@keyframes fill{to{transform:scaleX(1)}}
.pp{all:unset;box-sizing:border-box;width:44px;height:44px;border:1px solid rgba(245,239,224,.7);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .25s;background:rgba(10,10,10,.18)}
.pp:hover{background:rgba(245,239,224,.2)}
.pp:focus-visible{outline:2px solid var(--patina);outline-offset:3px}
.pp svg{width:14px;height:14px}
.pp .i-play{display:none}.hero.is-paused .pp .i-play{display:block}.hero.is-paused .pp .i-pause{display:none}
@media (min-width:1000px){.hero__cap{display:block}}
@media (max-width:900px){
  .hero{min-height:720px}
  .hero__panel{inset-block:auto 0;width:100%;padding:36px var(--gutter) calc(var(--bar-h) + 76px)}
  .hero__strip{width:100%;bottom:var(--bar-h);height:44px;-webkit-mask-size:400px auto;mask-size:400px auto}
  .hero__ctrl{inset-block:14px auto;bottom:auto;justify-content:space-between}
  .hero__cap{display:none}
  .hero h1{max-width:none}
}
@media (max-width:640px){.hero__cta .btn{padding:13px 20px;font-size:14px}.dots button{width:26px}}
@media (prefers-reduced-motion:reduce){.slide.is-on img{animation:none}.dots button.is-on i{animation:none;transform:scaleX(1)}}

/* ---------- sticky "Prepare your visit" bar ---------- */
.visitbar{position:fixed;inset:auto 0 0 0;z-index:50;height:var(--bar-h);background:var(--ink);color:var(--bone);display:flex;align-items:center;gap:clamp(14px,3vw,40px);padding-inline:var(--gutter);transition:transform .5s var(--ease);border-top:1px solid rgba(245,239,224,.12)}
.visitbar.is-away{transform:translateY(105%)}
.visitbar__t{font-size:17px;font-weight:600;line-height:1.2;white-space:nowrap}
html[lang="en"] .visitbar__t{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.visitbar__sep{width:1px;align-self:stretch;margin-block:14px;background:rgba(245,239,224,.2)}
.visitbar__s{font-size:13.5px;color:var(--patina-soft);line-height:1.5}
.visitbar__s b{display:block;color:var(--bone);font-weight:500;font-size:14.5px}
.visitbar__end{margin-inline-start:auto;display:flex;gap:10px}
.vb{display:inline-flex;align-items:center;gap:10px;height:42px;padding-inline:20px;border-radius:var(--r);text-decoration:none;font-size:13.5px;font-weight:500;border:1px solid transparent;transition:background .25s,color .25s}
.vb svg{width:16px;height:16px;flex:none}
.vb--solid{background:var(--emerald);color:var(--bone)}
.vb--solid:hover{background:var(--patina);color:var(--ink)}
.vb--line{border-color:rgba(245,239,224,.4)}
.vb--line:hover{background:var(--bone);color:var(--ink)}
@media (max-width:760px){
  :root{--bar-h:60px}
  .visitbar__t,.visitbar__sep{display:none}
  .visitbar__s{font-size:12px}.visitbar__s b{font-size:13px}
  .vb{padding:0;width:42px;justify-content:center}.vb span{display:none}
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{position:relative;padding-block:clamp(80px,11vw,168px);border-bottom:1px solid var(--line)}
.sec--bone-soft{background:var(--bone-soft)}
.sec--deep{background:var(--bone-deep)}
.sec--ink{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.sec--emerald{background:var(--emerald);color:var(--bone);border-color:var(--emerald)}
.marker{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3vw,40px);color:var(--emerald)}
.marker .label::before{content:attr(data-n);margin-inline-end:14px;color:var(--stone)}
.marker::after{content:"";width:72px;height:1px;background:currentColor;opacity:.45}
.sec--ink .marker,.sec--emerald .marker{color:var(--patina)}
.sec--ink .marker .label::before,.sec--emerald .marker .label::before{color:var(--patina-soft)}
.h2{font-size:clamp(34px,5vw,80px);line-height:1.14}
html[lang="en"] .h2{font-size:clamp(40px,5.6vw,92px);line-height:1.02}
.h2 + .sub{font-size:clamp(18px,2vw,28px);margin-top:12px}
.sec--ink .sub,.sec--emerald .sub{color:var(--patina)}
.sec-head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(40px,6vw,88px)}
.sec-head p{color:var(--ink-soft);max-width:34em;font-size:clamp(16px,1.25vw,18px)}
.sec--ink .sec-head p,.sec--emerald .sec-head p{color:var(--patina-soft)}
@media (max-width:900px){.sec-head{grid-template-columns:1fr}}
.grid-bg{background-color:var(--bone-soft);background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:28px 28px}

/* ---------- 01 statement ---------- */
.statement{padding-block:clamp(88px,12vw,180px) clamp(64px,8vw,110px)}
.statement__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.46fr);gap:clamp(32px,6vw,120px);align-items:end}
.statement__lead{font-family:var(--f-display);font-size:clamp(28px,3.9vw,60px);line-height:1.4;font-weight:400;max-width:20em;text-wrap:balance}
html[lang="en"] .statement__lead{font-size:clamp(32px,4.4vw,68px);line-height:1.12}
.statement__lead em{font-style:normal;color:var(--emerald);font-weight:600}
html[lang="en"] .statement__lead em{font-style:normal;font-weight:600}
.statement__aside{font-size:16px;color:var(--ink-soft);display:grid;gap:26px;justify-items:start}
@media (max-width:900px){.statement__body{grid-template-columns:1fr}}

/* title block = drawing-sheet stats */
.titleblock{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(56px,8vw,120px);border-top:1px solid var(--ink)}
.titleblock>div{padding:26px 28px 6px;border-inline-start:1px solid var(--line);min-width:0}
.titleblock>div:first-child{border-inline-start:none;padding-inline-start:0}
.titleblock b{display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(46px,6.4vw,104px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--emerald)}
.titleblock span{display:block;margin-top:12px;font-size:14px;color:var(--stone);line-height:1.5}
@media (max-width:760px){
  .titleblock{grid-template-columns:repeat(2,1fr)}
  .titleblock>div:nth-child(3){border-inline-start:none;padding-inline-start:0}
  .titleblock>div:nth-child(n+3){border-top:1px solid var(--line);margin-top:24px}
}

/* ---------- 02 plan → built ---------- */
.plan{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center}
.plan__text p{margin-top:28px;color:var(--ink-soft);max-width:30em;font-size:17px}
.plan__legend{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--ink)}
.plan__legend li{display:grid;grid-template-columns:32px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.plan__legend .n{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;color:var(--emerald);padding-top:5px;direction:ltr}
.reveal{position:relative;background:var(--bone-soft);border:1px solid var(--line);aspect-ratio:1700/1601;overflow:hidden;user-select:none;direction:ltr;touch-action:pan-y}
.reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;pointer-events:none}
.reveal .built{clip-path:inset(0 0 0 var(--cut,50%))}
.reveal__rule{position:absolute;inset-block:0;left:var(--cut,50%);width:1px;background:var(--emerald);pointer-events:none}
.reveal__knob{position:absolute;top:50%;left:var(--cut,50%);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--bone);border:1px solid var(--emerald);display:grid;place-items:center;pointer-events:none;color:var(--emerald);box-shadow:0 8px 30px rgba(10,10,10,.12);transition:transform .25s var(--ease)}
.reveal:hover .reveal__knob,.reveal.is-drag .reveal__knob{transform:scale(1.08)}
.reveal__knob svg{width:20px;height:20px}
.reveal input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.reveal:focus-within{outline:2px solid var(--emerald);outline-offset:3px}
.reveal__tag{position:absolute;top:14px;padding:5px 12px;background:var(--bone);border:1px solid var(--line);color:var(--ink);font-size:10px;pointer-events:none}
.reveal__tag--l{left:14px}.reveal__tag--r{right:14px}
.figcap{display:flex;justify-content:space-between;gap:16px;margin-top:14px;color:var(--stone);font-size:13px;line-height:1.5}
.figcap .label{font-size:10px;white-space:nowrap}
@media (max-width:900px){.plan{grid-template-columns:1fr}}

/* ---------- 03 manifesto + pillars ---------- */
.manifesto ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,3vw,44px)}
.manifesto li{font-family:var(--f-display);font-size:clamp(28px,4.6vw,76px);line-height:1.34;font-weight:400;max-width:20em}
html[lang="en"] .manifesto li{font-size:clamp(34px,5.4vw,88px);line-height:1.06}
.manifesto li em{font-style:normal;color:var(--patina);font-weight:600}
html[lang="en"] .manifesto li em{font-style:normal;font-weight:600}
.manifesto .closing{margin-top:clamp(40px,6vw,80px);font-style:normal;font-weight:400;letter-spacing:.01em;font-size:clamp(16px,1.6vw,22px);color:var(--patina-soft);max-width:34em;direction:ltr;text-align:start}
html[dir="rtl"] .manifesto .closing{text-align:right}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.pillar{padding:clamp(36px,4vw,64px) clamp(24px,3vw,48px) clamp(36px,4vw,56px);border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;transition:background .35s}
.pillar:first-child{border-inline-start:none;padding-inline-start:0}
.pillar:hover{background:var(--bone-soft)}
.pillar svg{width:72px;height:72px;margin-bottom:32px;color:var(--emerald)}
.pillar h3{font-size:clamp(28px,2.6vw,38px);line-height:1.2}
.pillar .sub{font-size:19px;margin:4px 0 20px}
.pillar p{font-size:15.5px;color:var(--ink-soft);max-width:26em}
@media (max-width:900px){.pillars{grid-template-columns:1fr}.pillar{border-inline-start:none;padding-inline:0}}

/* ---------- 04 the building — sticky narrative ---------- */
.bld{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.bld__stage{position:sticky;top:calc(var(--hdr) + 28px);height:calc(100svh - var(--hdr) - 56px);min-height:420px;max-height:820px}
.bld__frame{position:relative;height:100%;overflow:hidden;background:var(--bone-deep);border:1px solid var(--line)}
.bld__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);transition:opacity .9s var(--ease),transform 1.6s var(--ease)}
.bld__frame img.is-on{opacity:1;transform:scale(1)}
.bld__tag{position:absolute;inset-block-end:16px;inset-inline-start:16px;background:var(--bone);padding:6px 14px;color:var(--ink);font-size:10px}
.bld__steps{display:grid}
.bld__intro{padding-bottom:clamp(24px,4vw,56px)}
.bld__intro p{margin-top:28px;color:var(--ink-soft);font-size:17px;max-width:30em}
.step{min-height:68svh;display:flex;flex-direction:column;justify-content:center;padding-block:32px;border-top:1px solid var(--line);opacity:.34;transition:opacity .6s var(--ease)}
.step.is-on{opacity:1}
.step .n{font-family:var(--f-label);font-size:12px;letter-spacing:.2em;color:var(--emerald);margin-bottom:18px;direction:ltr}
.step h3{font-size:clamp(30px,3.4vw,52px);line-height:1.15}
.step .sub{font-size:20px;margin:6px 0 20px}
.step p{font-size:16.5px;color:var(--ink-soft);max-width:28em}
.bld__m{display:none}
@media (max-width:900px){
  .bld{grid-template-columns:1fr}
  .bld__stage{display:none}
  .step{min-height:0;opacity:1;padding-block:28px}
  .bld__m{display:block;margin:6px 0 20px;aspect-ratio:4/3;width:100%;object-fit:cover;border:1px solid var(--line)}
}

/* ---------- 05 ten landmarks ---------- */
.lm-bar{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-bottom:28px;border-top:1px solid var(--ink);padding-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 18px;border:1px solid var(--line);border-radius:999px;font-size:14px;transition:background .25s,color .25s,border-color .25s}
html[lang="en"] .chip{font-size:12.5px;letter-spacing:.06em}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.arrows{display:flex;gap:8px}
.arrow{all:unset;box-sizing:border-box;width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,opacity .25s}
.arrow svg{width:18px;height:18px}
.arrow--prev svg{transform:scaleX(-1)}
html[dir="rtl"] .arrow--prev svg{transform:none}
html[dir="rtl"] .arrow:not(.arrow--prev) svg{transform:scaleX(-1)}
.arrow:hover:not(:disabled){background:var(--ink);color:var(--bone)}
.arrow:disabled{opacity:.28;cursor:default}
.arrow:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
.on-dark .arrow{border-color:var(--bone)}
.on-dark .arrow:hover:not(:disabled){background:var(--bone);color:var(--ink)}
.on-dark .arrow:focus-visible{outline-color:var(--patina)}
.scroller{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:20px;padding-block:4px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);cursor:grab}
.scroller::-webkit-scrollbar{display:none}
.scroller.is-drag{cursor:grabbing;scroll-snap-type:none}
.scroller.is-drag *{pointer-events:none}
.card{position:relative;flex:0 0 clamp(270px,27vw,400px);scroll-snap-align:start;background:var(--bone-soft);border:1px solid var(--line);display:flex;flex-direction:column;cursor:pointer;transition:border-color .3s,transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{border-color:var(--ink);transform:translateY(-6px);box-shadow:0 22px 50px -24px rgba(10,10,10,.28)}
.card__btn{all:unset;cursor:pointer;display:block}
.card__btn::after{content:"";position:absolute;inset:0;z-index:2}
.card:has(.card__btn:focus-visible){outline:2px solid var(--emerald);outline-offset:4px}
.card.is-off{display:none}
.card__art{position:relative;aspect-ratio:1.57;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bone)}
.card__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .8s var(--ease)}
.card:hover .card__art img{transform:scale(1.07)}
.card__no{position:absolute;inset-block-start:14px;inset-inline-start:16px;font-family:var(--f-label);font-size:10px;letter-spacing:.24em;color:var(--stone)}
.card__body{padding:22px 24px 26px;display:grid;gap:4px}
.card__body h3{font-size:clamp(21px,1.8vw,26px);line-height:1.3}
.card__body .sub{font-size:16px}
.card__meta{margin-top:12px;font-size:13px;color:var(--stone);line-height:1.5;display:flex;gap:6px 14px;flex-wrap:wrap}
.card__meta span{display:inline-flex;align-items:center;gap:8px}
.card__meta span::before{content:"";width:5px;height:5px;background:var(--emerald)}
.card__more{margin-top:16px;font-size:13px;color:var(--emerald);display:inline-flex;gap:8px;align-items:center;font-weight:500}
.card__more svg{width:14px;height:14px}
html[dir="rtl"] .card__more svg{transform:scaleX(-1)}
.sbar{height:2px;background:var(--line);margin-top:28px;position:relative}
.sbar i{position:absolute;inset-block:0;inset-inline-start:0;width:var(--w,30%);background:var(--ink);transform:translateX(var(--x,0))}
html[dir="rtl"] .sbar i{transform:translateX(calc(var(--x,0) * -1))}
.on-dark .sbar{background:rgba(245,239,224,.2)}.on-dark .sbar i{background:var(--bone)}

/* landmark dialog */
dialog.lmd{border:none;padding:0;margin:auto;width:min(1240px,calc(100% - 28px));max-height:calc(100svh - 28px);background:var(--bone);color:var(--ink);overflow:hidden;opacity:0;transform:translateY(24px) scale(.985);transition:opacity .4s var(--ease),transform .5s var(--ease),overlay .4s allow-discrete,display .4s allow-discrete}
dialog.lmd[open]{opacity:1;transform:none;display:block}
@starting-style{dialog.lmd[open]{opacity:0;transform:translateY(24px) scale(.985)}}
dialog.lmd::backdrop{background:rgba(10,10,10,.72);backdrop-filter:blur(4px)}
.lmd__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);max-height:calc(100svh - 28px)}
.lmd__art{position:relative;min-height:340px;border-inline-end:1px solid var(--line);display:grid;place-items:center;padding:clamp(24px,4vw,56px);background:var(--bone)}
.lmd__art img{width:100%;aspect-ratio:1.57;max-height:70svh;object-fit:cover;object-position:50% 0}
.lmd__art .label{position:absolute;inset-block-start:18px;inset-inline-start:20px;font-size:10px;color:var(--stone)}
.lmd__txt{padding:clamp(28px,4vw,56px);overflow-y:auto;display:flex;flex-direction:column;gap:20px;max-height:calc(100svh - 28px)}
.lmd__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lmd__x{all:unset;box-sizing:border-box;width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s}
.lmd__x:hover{background:var(--ink);color:var(--bone)}
.lmd__x:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
.lmd__x svg{width:16px;height:16px}
.lmd h3{font-size:clamp(30px,3.4vw,50px);line-height:1.15}
.lmd .sub{font-size:21px;margin-top:6px}
.lmd__meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--stone)}
.lmd__meta span{display:inline-flex;align-items:center;gap:8px}
.lmd__meta span::before{content:"";width:6px;height:6px;background:var(--emerald)}
.lmd__blk{border-top:1px solid var(--line);padding-top:18px}
.lmd__blk h4{font-family:var(--f-label);font-size:10.5px;font-weight:600;letter-spacing:.26em;color:var(--emerald);margin-bottom:10px;text-transform:uppercase}
.lmd__theme{font-family:var(--f-display);font-size:clamp(22px,2vw,28px);font-weight:500;line-height:1.35}
.lmd__blk p{font-size:16px;color:var(--ink-soft)}
.lmd__nav{display:flex;gap:8px;margin-top:auto;padding-top:12px}
@media (max-width:860px){
  .lmd__grid{grid-template-columns:1fr;overflow-y:auto}
  .lmd__art{min-height:0;border-inline-end:none;border-bottom:1px solid var(--line);padding:24px}
  .lmd__art img{max-height:34svh}
  .lmd__txt{overflow:visible;max-height:none}
}

/* ---------- 06 halls ---------- */
.halls__hero{position:relative;margin-inline:calc(var(--gutter) * -1);aspect-ratio:21/9;overflow:hidden;background:#111}
.halls__hero img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.halls__cap{position:absolute;inset-block-end:18px;inset-inline-start:var(--gutter);background:var(--bone);color:var(--ink);padding:6px 14px;font-size:10px}
.mosaic{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(12px,1.6vw,24px);margin-top:clamp(12px,1.6vw,24px)}
.mosaic figure{margin:0;overflow:hidden;position:relative;aspect-ratio:4/5;background:#111}
.mosaic figure:first-child{aspect-ratio:auto}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.mosaic figure:hover img{transform:scale(1.05)}
.craft{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,7vw,110px);border-top:1px solid rgba(245,239,224,.2)}
.craft>div{padding:clamp(28px,3vw,44px) clamp(20px,3vw,44px) 0;border-inline-start:1px solid rgba(245,239,224,.16);min-width:0}
.craft>div:first-child{border-inline-start:none;padding-inline-start:0}
.craft .n{font-family:var(--f-label);font-size:11px;letter-spacing:.24em;color:var(--patina);direction:ltr;display:block;margin-bottom:16px}
.craft b{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(26px,2.4vw,36px);line-height:1.2;margin-bottom:4px}
html[lang="en"] .craft b{font-weight:500}
.craft .sub{font-size:18px;margin-bottom:16px;color:var(--patina)}
.craft p{font-size:15.5px;color:var(--patina-soft);max-width:24em}
@media (max-width:900px){
  .halls__hero{aspect-ratio:4/3}
  .mosaic{grid-template-columns:1fr 1fr}.mosaic figure:first-child{grid-column:1/-1;aspect-ratio:16/10}
  .craft{grid-template-columns:1fr}.craft>div{border-inline-start:none;padding-inline:0;padding-bottom:28px;border-bottom:1px solid rgba(245,239,224,.14)}
}

/* ---------- 07 eras — deep-time ruler ---------- */
.era{all:unset;box-sizing:border-box;flex:0 0 clamp(236px,20vw,290px);scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;padding:26px 24px 24px;min-height:340px;border-inline-start:1px solid var(--line);cursor:inherit}
.era:first-child{border-inline-start:none}
.era .n{font-family:var(--f-display);font-size:clamp(48px,5vw,76px);font-weight:500;line-height:1;color:var(--emerald);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
html[lang="en"] .era .n{font-weight:400}
.era b{font-family:var(--f-display);font-weight:600;font-size:clamp(18px,1.5vw,21px);line-height:1.45}
html[lang="en"] .era b{font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.2}
.era .d{margin-top:auto;font-size:13px;color:var(--stone);font-variant-numeric:tabular-nums;line-height:1.5}
.era .sub-en{font-style:normal;font-size:13.5px;color:var(--stone);direction:ltr;text-align:start;line-height:1.3}
html[dir="rtl"] .era .sub-en{text-align:right}
html[lang="en"] .era .sub-en{display:none}
.ruler{position:relative;height:6px;background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 9px);border-bottom:1px solid var(--line)}
.ruler i{position:absolute;inset-block:0;inset-inline-start:var(--l);width:var(--w);min-width:3px;background:var(--emerald)}
.ruler--all i{inset-inline:0;width:auto;background:repeating-linear-gradient(to right,var(--emerald) 0 6px,transparent 6px 10px)}
.era--now{background:var(--emerald);color:var(--bone)}
.era--now .n{color:var(--patina)}.era--now .d,.era--now .sub-en{color:var(--patina-soft)}
.era--now .ruler{background:repeating-linear-gradient(to right,rgba(245,239,224,.3) 0 1px,transparent 1px 9px);border-color:rgba(245,239,224,.3)}
.era--now .ruler i{background:var(--bone)}
.eras-frame{border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.eras-frame .scroller{gap:0;margin-inline:0;padding-inline:0;scroll-padding-inline:0}
.eras-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;align-items:center;margin-top:22px;color:var(--stone);font-size:13px}
.axis{display:flex;justify-content:space-between;font-family:var(--f-label);font-size:10px;letter-spacing:.2em;color:var(--stone);direction:ltr;margin-top:10px}

/* ---------- 08 pioneers ---------- */
.pio{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(32px,5vw,96px);border-top:1px solid var(--ink)}
.pio li{border-bottom:1px solid var(--line)}
.pio button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:8px 18px;align-items:baseline;padding:22px 0;cursor:pointer;transition:color .25s}
.pio button:hover{color:var(--emerald)}
.pio button:focus-visible{outline:2px solid var(--emerald);outline-offset:-2px}
.pio .n{font-family:var(--f-label);font-size:11px;letter-spacing:.2em;color:var(--emerald);direction:ltr}
.pio b{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.2vw,32px);line-height:1.25;display:block;transition:color .25s}
html[lang="en"] .pio b{font-weight:500}
.pio .sub{font-size:16px;margin-top:0}
.pio .y{font-size:13.5px;color:var(--stone);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:end}
.pio .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease);color:var(--ink-soft);font-size:15.5px;padding-inline-start:66px}
.pio .more>div{overflow:hidden}
.pio .more p{padding-top:12px;max-width:38em}
.pio .role{display:block;font-family:var(--f-label);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.pio li.is-open .more{grid-template-rows:1fr;padding-bottom:26px}
.pio li.is-open b{color:var(--emerald)}
@media (max-width:900px){.pio{grid-template-columns:1fr}}

/* ---------- 09 prize ---------- */
.prize{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(36px,7vw,120px);align-items:center}
.prize__card{width:min(340px,100%);aspect-ratio:.7;background:var(--ink);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px;gap:10px;color:var(--bone);transition:transform .8s var(--ease)}
.prize__card:hover{transform:rotate(-1.2deg) translateY(-6px)}
.prize__card::before{content:"";position:absolute;inset:12px;border:1px solid var(--patina)}
.prize__card svg{width:210px;height:48.4px}
.prize__card b{font-family:var(--f-display);font-size:28px;font-weight:600;line-height:1.3;margin-top:20px}
html[lang="en"] .prize__card b{font-weight:500;font-size:30px}
.prize__card .sub{color:var(--patina);font-size:16px;text-align:center}
.prize__card .rule{width:30px;height:1px;background:var(--patina);margin:8px 0}
.prize__card .label{color:var(--patina);font-size:9px}
.prize p.lead{color:var(--patina-soft);max-width:32em;font-size:clamp(17px,1.4vw,20px);margin-top:30px}
.prize .note{margin-top:30px;padding-top:22px;border-top:1px solid rgba(245,239,224,.24);font-size:14.5px;color:var(--patina-soft);max-width:34em}
@media (max-width:900px){.prize{grid-template-columns:1fr}.prize__card{margin-inline:auto}}

/* ---------- 10 visit ---------- */
.visit{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.visit>div{padding:clamp(28px,3vw,44px) clamp(20px,3vw,44px) clamp(32px,3vw,48px);border-bottom:1px solid var(--line);min-width:0}
.visit>div:first-child{padding-inline-start:0}
.visit>div+div{border-inline-start:1px solid var(--line)}
.visit .n{font-family:var(--f-label);font-size:11px;letter-spacing:.24em;color:var(--emerald);direction:ltr;display:block;margin-bottom:20px}
.visit h3{font-size:clamp(26px,2.4vw,34px);line-height:1.2;margin-bottom:12px}
.visit p{font-size:15.5px;color:var(--ink-soft);max-width:24em}
.clines{display:grid;gap:12px;margin-top:20px;justify-items:start}
.cline{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.cline code{font-family:var(--f-label);font-size:15px;direction:ltr;unicode-bidi:isolate;user-select:all;background:var(--bone-soft);border:1px solid var(--line);padding:8px 12px}
.copy{all:unset;cursor:pointer;font-size:13px;color:var(--emerald);border-bottom:1px solid var(--emerald);padding-bottom:1px;font-weight:500}
.copy:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
.ext{font-family:var(--f-label);direction:ltr;unicode-bidi:isolate;text-decoration:none;border-bottom:1px solid var(--line);font-size:15px;padding-bottom:2px;transition:border-color .2s,color .2s}
.ext:hover{border-color:var(--emerald);color:var(--emerald)}
.visit__cta{margin-top:clamp(36px,5vw,64px);display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.visit{grid-template-columns:1fr}.visit>div{padding-inline:0!important}.visit>div+div{border-inline-start:none}}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--bone);padding-block:clamp(64px,8vw,120px) 40px;position:relative;overflow:hidden}
.foot__big{font-family:var(--f-display);font-size:clamp(34px,6.4vw,110px);line-height:1.15;font-weight:500;max-width:14em;margin-bottom:clamp(48px,7vw,100px);text-wrap:balance}
html[lang="en"] .foot__big{line-height:1.02;font-size:clamp(40px,7vw,120px)}
.foot__big em{font-style:normal;color:var(--patina)}
html[lang="en"] .foot__big em{font-style:normal}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);padding-block:48px;border-block:1px solid rgba(245,239,224,.14)}
.foot__top>div:first-child svg{width:190px;height:73px;color:var(--bone);margin-bottom:22px}
.foot__name{font-size:14.5px;color:var(--patina-soft);line-height:1.6}
.foot h4{margin:0 0 18px;color:var(--patina);font-family:var(--f-label);font-size:10.5px;font-weight:600;letter-spacing:.26em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--patina-soft)}
.foot ul a{text-decoration:none}
.foot ul a:hover{color:var(--bone)}
.foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:28px;font-size:13px;color:var(--stone-light);line-height:1.7}
.foot__bottom strong{color:var(--patina-soft);font-weight:400}
@media (max-width:900px){.foot__top{grid-template-columns:1fr 1fr}.foot__top>div:first-child{grid-column:1/-1}}
@media (max-width:520px){.foot__top{grid-template-columns:1fr}}
.foot{padding-bottom:calc(40px + var(--bar-h))}

.totop{position:fixed;inset-block-end:calc(var(--bar-h) + 18px);inset-inline-end:var(--gutter);z-index:45;width:46px;height:46px;border-radius:50%;background:var(--bone);border:1px solid var(--ink);display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s var(--ease),background .25s,color .25s}
.totop.is-on{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--ink);color:var(--bone)}
.totop svg{width:16px;height:16px}
.visitbar.is-away ~ .totop{inset-block-end:18px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .js .rv{opacity:1;transform:none}
}
@media print{.hdr,.visitbar,.totop,.menu{display:none!important}}

/* Arabic must never be letter-spaced (it breaks the joins): neutralise tracked-label styling on Arabic text */
html[lang="ar"] .lmd__blk h4,html[lang="ar"] .pio .role{letter-spacing:0;text-transform:none;font-family:var(--f-ar-body);font-size:13.5px;font-weight:600}

/* tracked Latin labels sitting in block flow must follow the page direction (not jump to the opposite edge) */
.craft .n,.visit .n,.step .n,.foot h4.label,.pio .n{direction:inherit;unicode-bidi:isolate}
.foot h4.label{text-align:start}

.hbtn svg,.menu__x svg,.btn svg,.vb svg,.pill svg{flex:none}
@media (max-width:860px){
  .menu li a{font-size:clamp(24px,4.2vh,36px);padding-block:clamp(8px,1.5vh,16px);grid-template-columns:36px 1fr auto}
  .menu li a .en{font-size:.5em}
}


/* ==========================================================================
   BRAND PATTERN — the Kufic pattern from the guide (pp. 3–4), used as a mask so it takes any palette colour
   ========================================================================== */
.strip{height:60px;background:var(--emerald);-webkit-mask:url(/img/inma-pattern.svg) 0 0/531px auto repeat-x;mask:url(/img/inma-pattern.svg) 0 0/531px auto repeat-x}
.strip--patina{background:var(--patina);opacity:.55}
.strip--bone{background:var(--bone)}
@media (max-width:640px){.strip{height:44px;-webkit-mask-size:400px auto;mask-size:400px auto}}

/* pillars: a tile of the pattern in place of an icon */
.pillar .ico{display:block;width:84px;height:84px;margin-bottom:32px;background:var(--emerald);-webkit-mask:url(/img/inma-pattern.svg) var(--mx,0) var(--my,0)/420px auto no-repeat;mask:url(/img/inma-pattern.svg) var(--mx,0) var(--my,0)/420px auto no-repeat}

/* manifesto: pattern as a quiet field behind the lines */
.manifesto{overflow:hidden}
.manifesto::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:min(44%,620px);background:var(--patina);opacity:.1;-webkit-mask:url(/img/inma-pattern.svg) center/cover no-repeat;mask:url(/img/inma-pattern.svg) center/cover no-repeat;pointer-events:none}
.manifesto .wrap{position:relative}

/* prize card + footer carry the pattern too */
.prize__card::after{content:"";position:absolute;inset-inline:12px;bottom:12px;height:58px;background:var(--patina);opacity:.8;-webkit-mask:url(/img/inma-pattern.svg) 0 0/400px auto repeat-x;mask:url(/img/inma-pattern.svg) 0 0/400px auto repeat-x}
.prize__card{padding-bottom:84px}
.foot::before{content:"";display:block;height:60px;margin-top:calc(clamp(64px,8vw,120px) * -1);margin-bottom:clamp(48px,6vw,88px);background:var(--patina);opacity:.3;-webkit-mask:url(/img/inma-pattern.svg) 0 0/531px auto repeat-x;mask:url(/img/inma-pattern.svg) 0 0/531px auto repeat-x}
.foot__top>div:first-child svg{width:230px;height:53px}
.hdr__logo svg,.foot svg{display:block}

/* the logo lockup is drawn without a fill so it takes the surrounding text colour (ink on ivory, ivory on ink) */
svg[viewBox="0 0 242.21 55.82"]{fill:currentColor}

/* ==========================================================================
   FILM — the identity motion piece
   ========================================================================== */
.film{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center}
.film__frame{position:relative;margin:0;aspect-ratio:1;max-width:560px;width:100%;background:#FDFDFD;border:1px solid var(--line);overflow:hidden;justify-self:center}
.film__frame video{display:block;width:100%;height:100%;object-fit:cover;background:#FDFDFD}
.film__play{all:unset;box-sizing:border-box;position:absolute;inset:auto auto 20px 20px;width:68px;height:68px;border-radius:50%;background:var(--ink);color:var(--bone);display:grid;place-items:center;cursor:pointer;transition:background .25s,transform .35s var(--ease),opacity .25s}
html[dir="rtl"] .film__play{inset:auto 20px 20px auto}
.film__play:hover{background:var(--emerald);transform:scale(1.07)}
.film__play:focus-visible{outline:2px solid var(--emerald);outline-offset:4px}
.film__play svg{width:20px;height:20px;margin-inline-start:3px}
.film__frame.is-playing .film__play{opacity:0;pointer-events:none}
.film__text p{margin-top:28px;color:var(--ink-soft);max-width:28em;font-size:17px}
@media (max-width:900px){.film{grid-template-columns:1fr}}

/* ==========================================================================
   PIONEERS — black-and-white portrait gallery
   ========================================================================== */
.pgal{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,26px) clamp(12px,1.4vw,22px)}
.pc{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;cursor:pointer;min-width:0}
.pc__ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bone-deep);margin-bottom:10px}
.pc__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:grayscale(1) contrast(1.02);transition:transform 1s var(--ease),filter .5s}
.pc:hover .pc__ph img{transform:scale(1.045)}
.pc:focus-visible{outline:2px solid var(--emerald);outline-offset:6px}
.pc__no{position:absolute;inset-block-start:12px;inset-inline-start:14px;z-index:2;font-size:11px;letter-spacing:.22em;color:var(--bone);mix-blend-mode:difference;direction:ltr}
.pc__ph--empty{background:var(--emerald)}
.pc__ph--empty::before{content:"";position:absolute;inset:0;background:var(--patina);opacity:.22;-webkit-mask:url(/img/inma-pattern.svg) center/cover no-repeat;mask:url(/img/inma-pattern.svg) center/cover no-repeat}
.pc__ph--empty .pc__no{mix-blend-mode:normal;color:var(--patina-soft)}
.pc__name{font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.35vw,21px);line-height:1.3;transition:color .25s}
html[lang="en"] .pc__name{font-weight:600;font-size:clamp(16px,1.25vw,19px)}
.pc:hover .pc__name{color:var(--emerald)}
.pc .sub{font-size:13.5px}
.pc__y{font-size:13px;color:var(--stone);font-variant-numeric:tabular-nums}
@media (max-width:1100px){.pgal{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.pgal{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.pgal{grid-template-columns:repeat(2,1fr)}}
.pid__art{padding:0;place-items:stretch}
.pid__art img{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:50% 14%;filter:grayscale(1)}
.pid__art img[hidden],.pid__empty[hidden]{display:none}
.pid__empty{display:grid;place-items:center;min-height:340px;background:var(--emerald);color:var(--patina-soft);font-size:clamp(80px,12vw,160px);font-weight:600;letter-spacing:-.03em;position:relative}
.pid__empty::before{content:"";position:absolute;inset:0;background:var(--patina);opacity:.16;-webkit-mask:url(/img/inma-pattern.svg) center/cover no-repeat;mask:url(/img/inma-pattern.svg) center/cover no-repeat}
.pid__art .label{z-index:2;color:var(--bone);mix-blend-mode:difference}
@media (max-width:860px){.pid__art img{max-height:46svh}}

/* ==========================================================================
   SERIES — 32 episodes
   ========================================================================== */
.eps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-inline-start:1px solid var(--line)}
.ep{padding:clamp(22px,2.2vw,34px) clamp(20px,2.2vw,32px) clamp(26px,2.4vw,38px);border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0;background:transparent;transition:background .3s}
.ep:hover{background:var(--bone-soft)}
.ep.is-off{display:none}
.ep__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.ep__n{font-size:clamp(40px,4vw,60px);font-weight:500;line-height:1;color:var(--emerald);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ep__k{font-size:11px;letter-spacing:.14em;color:var(--stone);border:1px solid var(--line);padding:3px 10px;white-space:nowrap}
html[lang="ar"] .ep__k{letter-spacing:0;font-size:12.5px}
.ep--person .ep__k{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.ep h3{font-size:clamp(20px,1.7vw,25px);line-height:1.35}
html[lang="en"] .ep h3{font-size:clamp(19px,1.5vw,23px)}
.ep .sub{font-size:13.5px;line-height:1.5}
.ep__d{font-size:13px;color:var(--stone);margin-top:6px;font-variant-numeric:tabular-nums}
.ep__h{font-size:14.5px;color:var(--ink-soft);margin-top:10px;line-height:1.85}
.ep__h strong{font-weight:600;color:var(--ink)}
@media (max-width:1000px){.eps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.eps{grid-template-columns:1fr}}

/* ---------- "From the collection": the black-and-white object studies ---------- */
.objs__t{margin-top:clamp(56px,7vw,100px);margin-bottom:24px;font-size:clamp(22px,2vw,30px);color:var(--patina-soft)}
.objs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,18px)}
.objs figure{margin:0}
.objs img{width:100%;aspect-ratio:4/5;object-fit:contain;background:#fff;padding:7%;transition:transform .8s var(--ease)}
.objs li{overflow:hidden}
.objs li:hover img{transform:scale(1.04)}
.objs figcaption{font-size:13.5px;color:var(--patina-soft);padding-top:10px;line-height:1.5}
.objs__n{margin-top:18px;font-size:13px;color:var(--stone-light)}
@media (max-width:900px){.objs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.objs{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   SUB-PAGES: breadcrumbs, detail pages, indexes, prev/next
   ========================================================================== */
.dp{padding-top:var(--hdr);min-height:70svh}
.dp--wide{padding-top:var(--hdr)}
.crumbs ol{list-style:none;margin:0;padding:26px 0 6px;display:flex;flex-wrap:wrap;gap:6px 0;font-size:13px;color:var(--stone)}
.crumbs li+li::before{content:"/";margin-inline:10px;opacity:.5}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--emerald);border-color:var(--emerald)}
.crumbs [aria-current]{color:var(--ink)}
.dp__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:start;padding-block:clamp(24px,4vw,56px) clamp(48px,7vw,100px)}
.dp__grid--pt{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}
.dp__fig{margin:0;position:sticky;top:calc(var(--hdr) + 24px)}
.dp__fig img{width:100%;height:auto;background:var(--bone);border:1px solid var(--line)}
.dp__fig--pt img{aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;filter:grayscale(1)}
.dp__fig figcaption{margin-top:12px;font-size:12.5px;color:var(--stone);line-height:1.6}
.dp__k{color:var(--emerald)}
.dp__h{font-size:clamp(34px,5vw,76px);line-height:1.18;margin-top:10px}
html[lang="en"] .dp__h{line-height:1.04}
.dp__sub{font-size:clamp(17px,1.8vw,24px);margin-top:10px}
.dp__meta{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--stone)}
.dp__meta li{display:inline-flex;gap:8px;align-items:center}
.dp__meta li::before{content:"";width:6px;height:6px;background:var(--emerald)}
.dp__label{margin:34px 0 10px;color:var(--emerald)}
.dp__theme{font-family:var(--f-display);font-size:clamp(22px,2.2vw,32px);font-weight:500;line-height:1.4}
.dp__p{font-size:clamp(16px,1.2vw,18px);color:var(--ink-soft);max-width:36em;line-height:1.95}
.dp__hook{border-inline-start:2px solid var(--emerald);padding-inline-start:20px}
.dp__rel{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:10px}
.dp__rel a{display:grid;gap:2px;text-decoration:none;padding:12px 16px;border:1px solid var(--line);transition:border-color .25s,background .25s}
.dp__rel a:hover{border-color:var(--ink);background:var(--bone-soft)}
.dp__rel b{font-weight:600;font-size:16px}
.dp__rel a span{font-size:13.5px;color:var(--stone)}
.dp__act{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.dp__ep{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;padding-block:clamp(24px,4vw,56px) clamp(48px,7vw,100px)}
.dp__epn{font-size:clamp(90px,16vw,240px);line-height:.85;font-weight:500;color:var(--emerald);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:0}
.pn-wrap{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);margin-bottom:clamp(48px,6vw,88px)}
.pn{display:grid;gap:4px;padding:26px 0;text-decoration:none;transition:color .25s}
.pn b{font-family:var(--f-display);font-weight:600;font-size:clamp(18px,1.8vw,26px);line-height:1.3}
.pn:hover{color:var(--emerald)}
.pn.next{text-align:end;justify-items:end;border-inline-start:1px solid var(--line);padding-inline-start:24px}
.pn.prev{padding-inline-end:24px}
html[lang="ar"] .dp .label,html[lang="ar"] .foot__index h4,html[lang="ar"] .pn .label{letter-spacing:0;text-transform:none;font-family:var(--f-body);font-size:13.5px;font-weight:600}
.ixh{padding-block:clamp(20px,3vw,48px) clamp(28px,4vw,56px);max-width:52em}
.ixg{list-style:none;margin:0;padding:0 0 clamp(56px,7vw,110px);display:grid;gap:clamp(14px,1.6vw,26px)}
.ixg--3{grid-template-columns:repeat(3,1fr)}.ixg--5{grid-template-columns:repeat(5,1fr)}
.ix{display:flex;flex-direction:column;gap:5px;text-decoration:none;height:100%;padding:0 0 18px;border-bottom:1px solid var(--line);transition:border-color .3s}
.ix:hover{border-color:var(--ink)}
.ix__art{display:block;aspect-ratio:1.6;overflow:hidden;background:var(--bone);border:1px solid var(--line);margin-bottom:10px}
.ix__art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ix:hover .ix__art img{transform:scale(1.05)}
.ix__art--pt{aspect-ratio:4/5}.ix__art--pt img{object-position:50% 12%;filter:grayscale(1)}
.ix__art--empty{background:var(--emerald)}
.ix__n{font-size:11px;letter-spacing:.2em;color:var(--emerald);direction:ltr;display:block}
.ix b{font-family:var(--f-display);font-weight:600;font-size:clamp(18px,1.6vw,23px);line-height:1.35}
.ix span:not(.ix__art):not(.ix__n){font-size:13.5px;color:var(--stone);line-height:1.6}
.ix--ep{padding:22px 22px 24px;border:1px solid var(--line);margin:0}
.ix--ep .ix__n{font-size:clamp(34px,3.4vw,52px);letter-spacing:-.03em;letter-spacing:0;color:var(--emerald)}
.ix__d{margin-top:6px;font-variant-numeric:tabular-nums}
@media (max-width:1000px){.ixg--3{grid-template-columns:repeat(2,1fr)}.ixg--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.dp__grid,.dp__grid--pt{grid-template-columns:1fr}.dp__fig{position:static}.dp__ep{grid-template-columns:1fr}.pn-wrap{grid-template-columns:1fr}.pn.next{border-inline-start:none;border-top:1px solid var(--line);text-align:start;justify-items:start;padding-inline-start:0}}
@media (max-width:560px){.ixg--3{grid-template-columns:1fr}.ixg--5{grid-template-columns:repeat(2,1fr)}}

/* captions under existing images */
.pc__cap{font-size:11.5px;color:var(--stone-light);letter-spacing:.02em}
.mosaic figure{position:relative}
.mosaic figcaption{position:absolute;inset-inline-start:0;inset-block-end:0;background:var(--bone);color:var(--ink);font-size:11.5px;padding:6px 12px;max-width:92%;line-height:1.5}
.ep h3 a{text-decoration:none;color:inherit}
.ep{position:relative}
.ep h3 a::after{content:"";position:absolute;inset:0}
.ep:hover h3 a{color:var(--emerald)}

/* crawlable footer index */
.foot__index{padding-block:36px 8px;border-bottom:1px solid rgba(245,239,224,.14);margin-bottom:26px}
.foot__index-t{margin:0 0 18px;color:var(--patina)}
.foot__index-g{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.foot__index h4{margin:0 0 10px;color:var(--patina);font-size:10.5px;letter-spacing:.26em}
.foot__index ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13px}
.foot__index a{text-decoration:none;color:var(--patina-soft)}
.foot__index a:hover{color:var(--bone)}
@media (max-width:900px){.foot__index-g{grid-template-columns:repeat(2,1fr)}}

/* newsletter */
.sub-form{margin-top:34px;max-width:34em}
.sub-form__l{display:block;font-weight:600;margin-bottom:10px;font-size:15px}
.sub-form__row{display:flex;gap:10px;flex-wrap:wrap}
.sub-form input[type=email]{flex:1 1 240px;min-width:0;height:50px;padding-inline:16px;border:1px solid var(--ink);background:var(--bone);font:inherit;font-size:15px;border-radius:var(--r);color:var(--ink)}
.sub-form input[type=email]:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.sub-form__hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.sub-form .btn{height:50px;padding-block:0}
.sub-form__n{margin-top:10px;font-size:12.5px;color:var(--stone)}
.sub-form__msg{margin-top:8px;font-size:14px;min-height:1.6em}
.sub-form__msg.is-ok{color:var(--emerald)}.sub-form__msg.is-bad{color:#9a2a1f}

/* ==========================================================================
   MAP
   ========================================================================== */
.map{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(20px,3vw,48px);align-items:start}
.map__stage{position:relative;background:var(--bone-soft);border:1px solid var(--line);overflow:hidden}
.map__stage{touch-action:none;cursor:grab;user-select:none;perspective:2400px}
.map__stage:active{cursor:grabbing}
.map__tilt{position:relative;transform-style:preserve-3d;backface-visibility:visible}
.map__base{display:block;width:100%;height:auto;aspect-ratio:811/835}
.map__slab{position:absolute;inset:0;pointer-events:none;display:none}
.map--3d .map__slab{display:block}
.map__slab svg{display:block;width:100%;height:100%}
.map__ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.map__ov .map__pin,.map__ov .map__cl{pointer-events:auto}
.map--3d .map__stage{background:radial-gradient(130% 95% at 50% 18%,#17625c 0%,#0b3a37 55%,#061f1e 100%);border-color:var(--emerald-deep)}
.map--3d .map__hint{color:var(--patina-soft)}
.map--3d .map__land{filter:drop-shadow(0 0 0 transparent)}
.map__land{fill:var(--bone);stroke:var(--ink);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.map__rivers{fill:none;stroke:var(--patina);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.map__pin,.map__cl{cursor:pointer;outline:none;transition:opacity .6s,filter .6s}
.pin__b{transition:transform .38s var(--ease)}
.map__pin:hover .pin__b,.map__pin:focus-visible .pin__b,.map__cl:hover .pin__b{transform:scale(1.18)}
.map__pin.is-sel .pin__b{transform:scale(1.34)}
.pin__h{filter:drop-shadow(0 4px 5px rgba(10,10,10,.3))}
.pin__f{animation:mapFloat 3.6s ease-in-out infinite alternate;animation-delay:calc(var(--i,0)*-.55s)}
.map__pin.is-sel .pin__f{animation:mapBob 1.5s ease-in-out infinite}
.map__pin .rim{fill:var(--bone);stroke:var(--emerald);stroke-width:2.6;transition:stroke .3s}
.map__pin .bg{fill:var(--bone)}
.map__pin .tail{fill:var(--emerald);transition:fill .3s}
.map__pin .stem{stroke:var(--emerald);stroke-width:2;stroke-linecap:round}
.map__pin .ring{fill:none;stroke:var(--emerald);stroke-width:1.4;stroke-dasharray:3 5;opacity:0;transition:opacity .3s;transform-origin:0 0}
.map__pin:hover .ring,.map__pin:focus-visible .ring,.map__pin.is-sel .ring{opacity:.9;animation:mapSpin 9s linear infinite}
.map__pin:hover .rim,.map__pin:focus-visible .rim{stroke:var(--ink)}
.map__pin.is-sel .rim{stroke:var(--ink);stroke-width:3.2}
.map__pin.is-sel .tail{fill:var(--ink)}.map__pin.is-sel .stem{stroke:var(--ink)}
.gnd{fill:#0a0a0a;opacity:.26}
.pulse{fill:none;stroke:var(--emerald);stroke-width:1.6;opacity:0;animation:mapPulse 3s ease-out infinite;animation-delay:calc(var(--i,0)*.41s)}
.map__pin.is-sel .pulse{stroke:var(--ink);animation-duration:1.7s}
.map__cl .cl__o{fill:none;stroke:var(--emerald);stroke-width:1.4;stroke-dasharray:3 5;animation:mapSpin 12s linear infinite;transform-origin:0 0}
.map__cl .cl__c{fill:var(--ink);stroke:var(--bone);stroke-width:2.4}
.map__cl text{font-family:var(--f-body);font-size:16px;font-weight:600;fill:var(--bone);pointer-events:none}
.map__cl .stem{stroke:var(--ink);stroke-width:2}
.map__cl:focus-visible .cl__c{stroke:var(--emerald)}
.map__pin.is-future,.map__cl.is-future{opacity:.25;filter:grayscale(1)}
.map__pin .lab{font-family:var(--f-body);font-size:12.5px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--bone);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.map__city circle{fill:var(--stone);opacity:.7}
.map__city text{font-family:var(--f-body);font-size:11px;fill:var(--stone);paint-order:stroke;stroke:var(--bone);stroke-width:3px;pointer-events:none}
#map-cities{opacity:0;transition:opacity .5s;pointer-events:none}#map-cities.is-on{opacity:1}
.map__hatch{pointer-events:none}
.map__route{stroke:var(--emerald);stroke-linecap:round;stroke-linejoin:round;transition:stroke-dasharray 4.6s cubic-bezier(.45,0,.25,1),opacity .6s;pointer-events:none;opacity:0}
.map__trace{fill:none;stroke:var(--emerald);stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:1;stroke-linejoin:round;stroke-linecap:round;pointer-events:none;opacity:0}
.map__flow{fill:none;stroke:var(--bone);stroke-opacity:.9;stroke-width:1.6;stroke-dasharray:2 14;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none;opacity:0}
.map--wait .map__land,.map--wait .map__hatch,.map--wait .map__rivers{opacity:0}
.map--in .map__land,.map--in .map__hatch{animation:mapIn 1.4s 1.3s both}
.map--in .map__rivers{animation:mapIn 1s 2.2s both}
.map--in .map__flow{animation:mapIn 1s 3.2s both,mapFlow 3.4s linear infinite}
.map--in .map__trace{opacity:1}
.map--in .map__trace--land{animation:mapDraw 2.6s cubic-bezier(.5,0,.2,1) both,mapOut .9s 2.7s forwards}
.map--in .map__trace--riv{animation:mapDraw 2.6s .5s cubic-bezier(.5,0,.2,1) both,mapOut .9s 3.3s forwards}
@keyframes mapDraw{to{stroke-dashoffset:0}}
@keyframes mapOut{to{opacity:0}}
@keyframes mapIn{from{opacity:0}to{opacity:1}}
@keyframes mapFlow{to{stroke-dashoffset:-32}}
@keyframes mapPulse{0%{transform:scale(1);opacity:.55}75%,100%{transform:scale(4.2);opacity:0}}
@keyframes mapFloat{to{transform:translateY(-3.5px)}}
@keyframes mapBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mapSpin{to{transform:rotate(360deg)}}
@keyframes mapDrop{0%{transform:translateY(-90px) scale(.3);opacity:0}50%{opacity:1}62%{transform:translateY(6px) scale(1.1)}80%{transform:translateY(-4px) scale(.97)}100%{transform:none;opacity:1}}
@keyframes mapPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.35);opacity:1}100%{transform:scale(1);opacity:1}}
.map--wait .pin__b{opacity:0}
.pin--pop{animation:mapDrop .95s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d,0s)}
.map__ctl{position:absolute;inset-block-start:14px;inset-inline-end:14px;display:grid;gap:6px}
.map__ctl button{all:unset;box-sizing:border-box;width:40px;height:40px;display:grid;place-items:center;background:var(--bone);border:1px solid var(--ink);cursor:pointer;font-size:20px;line-height:1;transition:background .25s,color .25s}
.map__ctl button:hover{background:var(--ink);color:var(--bone)}
.map__ctl button:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.map__ctl svg{width:16px;height:16px}
.map__ctl .map__3d{font-size:12px;font-weight:700;letter-spacing:.04em}
.map__ctl .map__3d[aria-pressed="true"]{background:var(--emerald);color:var(--bone);border-color:var(--emerald)}
.map__hint{position:absolute;inset-block-end:12px;inset-inline-start:14px;font-size:9.5px;color:var(--stone);pointer-events:none;margin:0}
.map__side{display:grid;gap:18px}
.map__info{min-height:230px;border:1px solid var(--line);background:var(--bone-soft)}
.map__pick{padding:24px;color:var(--stone);font-size:15px}
.map__card{display:grid;gap:4px;text-decoration:none;padding:0 0 20px}
.map__img{display:block;aspect-ratio:1.6;overflow:hidden;border-bottom:1px solid var(--line);margin-bottom:12px}
.map__img img{width:100%;height:100%;object-fit:cover}
.map__card>span:not(.map__img),.map__card>b{padding-inline:20px}
.map__card b{font-family:var(--f-display);font-size:clamp(20px,1.8vw,26px);font-weight:600;line-height:1.3}
.map__card span{font-size:13.5px;color:var(--stone)}
.map__n{color:var(--emerald)!important;font-size:10px!important}
.map__go{display:inline-flex;gap:8px;align-items:center;color:var(--emerald)!important;font-weight:500;margin-top:8px}
.map__go svg{width:14px;height:14px}
html[dir="rtl"] .map__go svg{transform:scaleX(-1)}
.map__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.map__item{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:34px 1fr;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .2s,padding .3s var(--ease)}
.map__item:hover{background:var(--bone-soft);padding-inline-start:12px}
.map__item:focus-visible{outline:2px solid var(--emerald);outline-offset:-2px}
.map__item[aria-current="true"]{background:var(--ink);color:var(--bone);padding-inline-start:12px}
.map__item .n{font-size:11px;letter-spacing:.16em;color:var(--emerald);padding-top:4px;direction:ltr}
.map__item[aria-current="true"] .n,.map__item[aria-current="true"] small{color:var(--patina-soft)}
.map__item b{font-weight:600;font-size:15px;display:block;line-height:1.4}
.map__item small{font-size:12.5px;color:var(--stone)}

.map__main{min-width:0;display:grid;gap:0}
.map__bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:0 0 14px}
.map__chips{display:flex;flex-wrap:wrap;gap:6px}
.map__chip{all:unset;box-sizing:border-box;padding:7px 15px;border:1px solid var(--line);font-size:13px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.map__chip:hover{border-color:var(--ink)}
.map__chip[aria-pressed="true"]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.map__chip:focus-visible,.map__tour:focus-visible,.map__rail button:focus-visible,.map__acts button:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.map__tour{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;padding:8px 18px;background:var(--emerald);color:var(--bone);font-size:13.5px;font-weight:500;cursor:pointer;transition:background .25s}
.map__tour:hover{background:var(--ink)}
.map__tour svg{width:13px;height:13px;fill:currentColor}
.map__tour .i-pause,.map__tour .t-stop{display:none}
.map__tour[aria-pressed="true"] .i-pause,.map__tour[aria-pressed="true"] .t-stop{display:inline}
.map__tour[aria-pressed="true"] .i-play,.map__tour[aria-pressed="true"] .t-start{display:none}
.map__tip{position:absolute;z-index:3;transform:translate(-50%,-100%);pointer-events:none;background:var(--ink);color:var(--bone);padding:7px 12px;display:grid;gap:0;text-align:center;white-space:nowrap;animation:mapCard .25s var(--ease)}
.map__tip[hidden]{display:none}
.map__tip b{font-weight:600;font-size:13px;line-height:1.5}.map__tip span{font-size:11px;color:var(--patina-soft)}
.map__tip::after{content:"";position:absolute;inset-inline-start:50%;inset-block-start:100%;margin-inline-start:-5px;border:5px solid transparent;border-block-start-color:var(--ink)}
.map__rail{list-style:none;margin:0;padding:22px 0 4px;display:flex;justify-content:space-between;position:relative;overflow-x:auto;scrollbar-width:thin}
.map__rail::before,.map__rail::after{content:"";position:absolute;inset-inline-start:0;inset-block-start:31px;height:2px;background:var(--line);width:100%}
.map__rail::after{background:var(--emerald);width:var(--p,0%);transition:width 4.6s cubic-bezier(.45,0,.25,1)}
.map__rail li{flex:1 0 66px;display:flex;justify-content:center;position:relative;z-index:1}
.map__rail li[hidden]{display:none}
.map__rail button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;gap:8px;padding:0 3px;text-align:center}
.map__rail i{width:19px;height:19px;border-radius:50%;background:var(--bone);border:2px solid var(--stone);transition:transform .3s var(--ease),background .3s,border-color .3s}
.map__rail b{font-weight:400;font-size:11px;line-height:1.35;color:var(--stone);max-width:78px;transition:color .3s}
.map__rail button:hover i{transform:scale(1.25);border-color:var(--ink)}
.map__rail button.is-done i{background:var(--emerald);border-color:var(--emerald)}
.map__rail button[aria-current="true"] i{background:var(--ink);border-color:var(--ink);transform:scale(1.35)}
.map__rail button[aria-current="true"] b{color:var(--ink);font-weight:600}
.map__card{animation:mapCard .55s var(--ease)}
.map__img img{animation:mapKb 10s var(--ease) both}
.map__f{font-size:12.5px;color:var(--emerald)!important}
.map__acts{display:flex;align-items:center;gap:8px;padding:0 20px 16px;border-top:1px solid var(--line);padding-block-start:12px}
.map__acts button{all:unset;box-sizing:border-box;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);cursor:pointer;transition:background .25s,color .25s}
.map__acts button:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.map__acts button svg{width:14px;height:14px}
html[dir="rtl"] .map__acts button:not(.map__pv) svg{transform:scaleX(-1)}
html:not([dir="rtl"]) .map__pv svg{transform:scaleX(-1)}
.map__acts .map__rk{flex:1;text-align:center;font-size:12.5px;color:var(--stone)}
.map__acts .map__copy{width:auto;padding:0 12px;font-size:12px}
@keyframes mapCard{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mapKb{from{transform:scale(1.14)}to{transform:scale(1)}}
.is-tour .map__stage{box-shadow:inset 0 0 0 2px var(--emerald)}
@media (prefers-reduced-motion:reduce){.map__flow,.map__pin .pulse,.map__cl .pulse,.map__trace{display:none}.pin__f,.map__pin.is-sel .pin__f,.map__pin .ring,.map__cl .cl__o{animation:none}.map--in .map__land,.map--in .map__hatch,.map--in .map__rivers,.pin--pop,.map__card,.map__img img,.map__tip{animation:none}.map__route,.map__rail::after,.pin__b{transition:none}}

.map__land,.map__rivers{pointer-events:none}
.map__govs{pointer-events:auto}
.map__gv{fill:rgba(15,78,74,0);stroke:var(--stone);stroke-opacity:.5;stroke-width:.9;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .3s,stroke .3s}
.map__gv.is-h{fill:rgba(15,78,74,.10)}
.map__gv.is-sel{fill:rgba(15,78,74,.17);stroke:var(--emerald);stroke-opacity:1;stroke-dasharray:none;stroke-width:1.8}
.map--nogov .map__govs,.map--nogov #map-gov,.map--nopl #map-places{display:none}
.map__gl text{font-family:var(--f-body);font-size:10.5px;font-weight:500;fill:var(--stone);paint-order:stroke;stroke:var(--bone);stroke-width:3px;stroke-linejoin:round;pointer-events:none;transition:fill .3s}
html[lang="en"] .map__gl text{letter-spacing:.14em;text-transform:uppercase;font-size:9px}
.map__gl.is-h text,.map__gl.is-sel text{fill:var(--emerald);font-weight:700}
.map__pl{cursor:pointer;outline:none}
.pl__b{transition:transform .3s var(--ease)}
.map__pl:hover .pl__b,.map__pl:focus-visible .pl__b{transform:scale(1.4)}
.pl__hit{fill:transparent}
.pl__s{fill:var(--patina);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;transition:fill .3s}
.map__pl--shrine .pl__s{fill:var(--bone)}
.map__pl--nature .pl__s{fill:var(--patina-soft)}
.map__pl.is-sel .pl__s{fill:var(--ink)}
.pl__pulse{fill:none;stroke:var(--ink);stroke-width:1.4;opacity:0}
.map__pl.is-sel .pl__pulse{animation:mapPulse 1.8s ease-out infinite}
.map__pl:focus-visible .pl__s{stroke:var(--emerald);stroke-width:2.5}
.map__pl .lab{font-family:var(--f-body);font-size:11px;font-weight:500;fill:var(--ink);paint-order:stroke;stroke:var(--bone);stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.map__layers{display:flex;gap:6px;flex-wrap:wrap}
.map__chip--l[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:var(--bone)}
.map__gcard{padding:22px 24px 20px;display:grid;gap:4px;animation:mapCard .5s var(--ease)}
.map__gcard>b{display:block;font-family:var(--f-display);font-size:clamp(22px,2vw,28px);font-weight:600;line-height:1.3}
.map__gcard>span{font-size:13.5px;color:var(--stone)}
.map__gcard>.map__n{color:var(--emerald);font-size:10px}
.map__gcard p{margin:6px 0 0;font-size:14px;color:var(--stone);line-height:1.8}
.map__gh{margin-top:12px;font-size:11px!important;letter-spacing:.14em;color:var(--emerald)!important}
.map__gcard ul{list-style:none;margin:2px 0 0;padding:0;display:grid}
.map__gcard li button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px;transition:color .2s,padding .3s var(--ease)}
.map__gcard li button:hover{color:var(--emerald);padding-inline-start:8px}
.map__gcard li button:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}

/* ---- visit experience ---- */
.xp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,2.4vw,34px) clamp(14px,2vw,28px)}
.xp__f{margin:0;display:grid;gap:12px;align-content:start}
.xp__f--1{grid-column:span 7}.xp__f--2{grid-column:span 5}.xp__f--3{grid-column:span 5}.xp__f--4{grid-column:span 7}
.xp__f img,.xp-c img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--bone-deep);transition:transform 1.2s var(--ease)}
.xp__f img{aspect-ratio:auto;height:clamp(230px,29vw,410px)}
.xp__f,.xp-c figure{overflow:hidden}
.xp__f:hover img,.xp-c:hover img{transform:scale(1.035)}
.xp__f figcaption,.xp-c figcaption{display:grid;gap:3px}
.xp__f figcaption b,.xp-c figcaption b{font-family:var(--f-display);font-weight:600;font-size:clamp(18px,1.6vw,23px);line-height:1.35}
.xp__f figcaption span,.xp-c figcaption span{font-size:13.5px;color:var(--stone);line-height:1.8;max-width:56ch}
.xp__n{margin:clamp(22px,3vw,36px) 0 0;font-size:12.5px;color:var(--stone);max-width:70ch}
.xp__cta{margin-top:20px}
.xp-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,52px) clamp(18px,2.4vw,36px)}
.xp-c figure{margin:0;display:grid;gap:14px}
.xp-c__n{font-size:11px;letter-spacing:.16em;color:var(--emerald)!important;direction:ltr;justify-self:start}
.xp-c__t{font-style:normal;font-size:11px;letter-spacing:.08em;color:var(--stone);border:1px solid var(--line);padding:2px 10px;justify-self:start;margin-top:6px}
@media (max-width:900px){.xp__f img{height:auto;aspect-ratio:3/2}.xp{grid-template-columns:1fr}.xp__f--1,.xp__f--2,.xp__f--3,.xp__f--4{grid-column:auto}.xp-g{grid-template-columns:1fr}}
@media (max-width:900px){.map{grid-template-columns:1fr}}