/* Header + menu (menu 4, text size 3) — built from the layout studies */
/* Study: 4 header text sizes (t1–t4) × 4 menu models (m1–m4). Chosen by classes on <html>. */
.navs > nav{display:none}
html.m1 .navs .n1, html.m2 .navs .n2, html.m3 .navs .n3, html.m4 .navs .n4{display:block}

/* ---------- Header text in the lockup colours (manual 2.1) ---------- */
.lk{margin:0;display:inline-block;text-align:left;white-space:nowrap;font-family:var(--font);line-height:1;font-size:min(var(--lk,48px),11vw)}
.lk > span{display:block}
.lk__1{font-weight:bold;letter-spacing:.005em}
.lk__1 .b{color:#012169}
.lk__1 .r{color:#EE1C25}
.lk__2{color:#019654;font-weight:normal;font-size:.823em;margin-top:.08em}
.lk__3{color:#019654;font-weight:normal;font-size:.778em;margin-top:.1em;letter-spacing:0}
html.t1{--lk:36px} html.t2{--lk:48px} html.t3{--lk:64px} html.t4{--lk:84px}
.hero__band{padding-bottom:clamp(8px,1.5vw,24px)}
.hero__foot{background:var(--green);text-align:center;padding:6px 24px 38px}
.hero__foot p{margin:0 auto;max-width:640px;color:#fff;font-size:clamp(16px,1.5vw,20px);line-height:1.55}

/* ---------- Menu 2 · white bar, full-colour logo ---------- */
.n2{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--divider)}
.n2 .in,.n4 .main .in{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:28px}
.n2 .brand img,.n4 .brand img{height:52px;width:auto}
.n2 .nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.lk-links{display:flex;gap:24px;list-style:none;margin:0;padding:0;align-items:center}
.lk-links a{white-space:nowrap;color:var(--green);text-decoration:none;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent}
.lk-links a:hover{border-bottom-color:var(--green)}
.btn-green{display:inline-block;white-space:nowrap;background:var(--green);color:#fff !important;font-weight:bold;letter-spacing:1px !important;padding:10px 20px !important;border:0 !important;text-decoration:none;font-size:13px;text-transform:uppercase}
.btn-green:hover{background:#244426}
.lang--dark{border-color:var(--green)}
.lang--dark a{color:var(--green)}
.lang--dark a+a{border-left-color:var(--green)}
.lang--dark a[aria-current="true"]{background:var(--green);color:#fff}
.lang--dark a:not([aria-current="true"]):hover{background:#eef2ee}

/* ---------- Menu 3 · centred, newspaper masthead ---------- */
.n3{background:#fff;border-bottom:1px solid var(--divider)}
.n3 .top{max-width:1180px;margin:0 auto;padding:16px 24px 6px;position:relative;text-align:center}
.n3 .top .brand img{height:64px;width:auto;margin:0 auto}
.n3 .top .lang{position:absolute;right:24px;top:22px}
.n3 .row{position:sticky;top:0;border-top:1px solid var(--divider);padding:10px 24px;display:flex;justify-content:center}
.n3 .row .lk-links{gap:40px}

/* ---------- Menu 4 · two tiers ---------- */
.n4{position:sticky;top:0;z-index:20}
.n4 .util{background:var(--green)}
.n4 .util .in{max-width:1180px;margin:0 auto;padding:6px 24px;display:flex;justify-content:flex-end;align-items:center;gap:22px}
.n4 .util a{color:#fff;text-decoration:none;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}
.n4 .util a:hover{text-decoration:underline}
.n4 .util .sep{width:1px;height:14px;background:rgba(255,255,255,.4)}
.n4 .util .lg a{margin-left:12px;opacity:.75}
.n4 .util .lg a[aria-current="true"]{opacity:1;font-weight:bold;text-decoration:underline;text-underline-offset:4px}
.n4 .main{background:#fff;border-bottom:1px solid var(--divider)}
.n4 .main .tagline{margin:0;color:var(--muted);font-size:13px;line-height:18px;max-width:340px}
.n4 .main .btn{margin-left:auto;white-space:nowrap}

@media (max-width:640px){
  .n2 .in,.n4 .main .in{padding:10px 16px;gap:12px;flex-wrap:wrap}
  .n2 .brand img,.n4 .brand img{height:40px}
  .n2 .nav{margin-left:0;width:100%;justify-content:space-between;gap:10px}
  .lk-links{gap:12px}
  .lk-links a,.btn-green{font-size:11px;letter-spacing:.6px}
  .btn-green{padding:8px 10px !important}
  .n3 .top{padding-top:12px}
  .n3 .top .brand img{height:46px}
  .n3 .top .lang{position:static;display:inline-flex;margin-top:10px}
  .n3 .row .lk-links{gap:20px}
  .n4 .util .in{padding:6px 16px;justify-content:space-between;gap:10px}
  .n4 .main .tagline{display:none}
  .n4 .main .btn{padding:10px 14px;font-size:12px}
}


/* Menu study 2 — header text size 3 fixed. Four menu models chosen by html.m1..m4.
   Brand rules kept: full-colour lockup only on light grounds, reversed lockup on green,
   square-cornered CTA in #C7B37E / #151512, Arial stack, uppercase 13px labels with tracking. */
html{--lk:64px}
.navs > .nv{display:none}
html.m1 .nv1, html.m2 .nv2, html.m3 .nv3, html.m4 .nv4{display:block}
html.m1 .hero__wave{display:none}
html.m1 .hero__band{padding-top:clamp(120px,11vw,170px)}
html.m2 .hero__band{padding-top:clamp(130px,11vw,170px)}
html.m4 .hero__wave{height:clamp(30px,4vw,64px)}

/* shared bits */
.nv a{text-decoration:none}
.nv .lnk{position:relative;white-space:nowrap;font-size:13px;line-height:20px;letter-spacing:1.4px;text-transform:uppercase;padding:6px 0}
.nv .lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nv .lnk:hover::after,.nv .lnk:focus-visible::after{transform:scaleX(1)}
.nv .cta{display:inline-block;white-space:nowrap;background:var(--cta);color:var(--cta-text);font-weight:bold;font-size:13px;line-height:20px;letter-spacing:1px;text-transform:uppercase;padding:11px 22px;transition:background .2s}
.nv .cta:hover{background:#b9a46b}
.nv .burger{display:none;align-items:center;gap:10px;background:none;border:0;cursor:pointer;font:bold 13px/20px var(--font);letter-spacing:1.4px;text-transform:uppercase;padding:8px 0}
.burger i{display:block;width:22px;height:2px;background:currentColor;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor}
.burger i::before{top:-7px}.burger i::after{top:7px}

/* language dropdown */
.ld{position:relative}
.ld summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:13px;line-height:20px;letter-spacing:1.2px;text-transform:uppercase;padding:6px 2px;white-space:nowrap}
.ld summary::-webkit-details-marker{display:none}
.ld summary svg{width:16px;height:16px}
.ld summary .car{width:10px;height:10px;transition:transform .2s}
.ld[open] summary .car{transform:rotate(180deg)}
.ld .dd{position:absolute;right:0;top:calc(100% + 10px);min-width:170px;background:#fff;box-shadow:0 12px 32px rgba(21,21,18,.18);padding:6px 0;z-index:40}
.ld .dd a{display:flex;justify-content:space-between;gap:16px;padding:10px 16px;color:var(--text);font-size:14px;line-height:20px}
.ld .dd a:hover{background:#F2F4EF}
.ld .dd a[aria-current="true"]{color:var(--green);font-weight:bold}
.ld .dd a small{color:var(--muted);font-size:12px}

/* ---------- M1 · transparent over the hero, solid bar with logo after scrolling ---------- */
.nv1{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .3s, box-shadow .3s}
.nv1 .in{max-width:1180px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;gap:36px;transition:padding .3s}
.nv1 .brand{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;pointer-events:none}
.nv1 .brand img{height:44px;width:auto}
.nv1 .links{display:flex;gap:34px;margin-left:auto;align-items:center}
.nv1 .lnk,.nv1 .ld summary,.nv1 .burger{color:var(--green)}
html.scrolled .nv1{background:#fff;box-shadow:0 1px 0 var(--divider),0 8px 24px rgba(21,21,18,.06)}
html.scrolled .nv1 .in{padding-top:10px;padding-bottom:10px}
html.scrolled .nv1 .brand{opacity:1;transform:none;pointer-events:auto}

/* ---------- M2 · floating bar over the wave ---------- */
.nv2{position:fixed;top:18px;left:0;right:0;z-index:30;padding:0 24px;pointer-events:none}
.nv2 .in{pointer-events:auto;max-width:1120px;margin:0 auto;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(21,21,18,.14);padding:10px 12px 10px 22px;display:flex;align-items:center;gap:30px}
.nv2 .brand img{height:42px;width:auto}
.nv2 .links{display:flex;gap:30px;margin-left:auto;align-items:center}
.nv2 .lnk,.nv2 .ld summary,.nv2 .burger{color:var(--green)}
.nv2 .sep{width:1px;height:26px;background:var(--divider)}

/* ---------- M3 · magazine: Menu button · centred logo · Subscribe ---------- */
.nv3{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--divider)}
.nv3 .in{max-width:1180px;margin:0 auto;padding:10px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nv3 .burger{display:inline-flex;color:var(--green);justify-self:start}
.nv3 .brand img{height:50px;width:auto}
.nv3 .right{justify-self:end;display:flex;align-items:center;gap:22px}
.nv3 .ld summary{color:var(--green)}

/* ---------- M4 · split navigation, centred reversed logo, merged into the green wave ---------- */
.nv4{position:sticky;top:0;z-index:30;background:var(--green)}
.nv4 .in{max-width:1180px;margin:0 auto;padding:14px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nv4 .l{display:flex;gap:34px;align-items:center}
.nv4 .r{display:flex;gap:26px;align-items:center;justify-self:end}
.nv4 .brand img{height:56px;width:auto}
.nv4 .lnk,.nv4 .ld summary,.nv4 .burger{color:#fff}
.nv4 .lnk::after{background:var(--cta)}

/* ---------- full-screen menu panel (M3 on all sizes, every model on phones) ---------- */
.panel{position:fixed;inset:0;z-index:60;background:var(--green);color:#fff;display:none;flex-direction:column;padding:22px 24px 40px;overflow:auto}
html.menu-open .panel{display:flex}
html.menu-open{overflow:hidden}
.panel .top{display:flex;align-items:center;justify-content:space-between}
.panel .top img{height:46px;width:auto}
.panel .close{background:none;border:0;color:#fff;font:bold 13px/20px var(--font);letter-spacing:1.4px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:10px}
.panel .close span{font-size:28px;line-height:20px;font-weight:normal}
.panel nav{margin:auto 0;max-width:1180px;width:100%;align-self:center;padding:40px 0}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{border-top:1px solid rgba(255,255,255,.18)}
.panel li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.panel li a{display:flex;justify-content:space-between;align-items:baseline;color:#fff;text-decoration:none;font-size:clamp(28px,5vw,56px);line-height:1.2;font-weight:bold;padding:18px 0}
.panel li a small{font-size:15px;font-weight:normal;color:var(--f-accent)}
.panel li a:hover{color:var(--f-accent)}
.panel .langs{display:flex;gap:10px;margin-top:30px}
.panel .langs a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.5);padding:8px 16px;font-size:14px;letter-spacing:1px}
.panel .langs a[aria-current="true"]{background:#fff;color:var(--green);font-weight:bold}
.panel .foot{color:var(--f-legal);font-size:13px;margin-top:26px}

@media (max-width:760px){
  .nv .links,.nv4 .l,.nv3 .right .ld,.nv4 .r .ld,.nv2 .sep{display:none !important}
  .nv .burger{display:inline-flex}
  .nv1 .brand{opacity:1;transform:none;pointer-events:auto}
  .nv1 .in{padding:12px 16px}
  .nv1 .links-m{margin-left:auto}
  html.m1 .nv1{background:#fff;box-shadow:0 1px 0 var(--divider)}
  html.m1 .hero__band{padding-top:96px}
  .nv2{top:10px;padding:0 10px}
  .nv2 .in{padding:8px 10px 8px 14px;gap:12px}
  .nv2 .brand img{height:34px}
  .nv2 .links-m{margin-left:auto}
  html.m2 .hero__band{padding-top:96px}
  .nv3 .in{padding:8px 16px;grid-template-columns:auto 1fr auto;gap:10px}
  .nv3 .burger b{display:none}
  .nv3 .brand{justify-self:center}
  .nv3 .brand img{height:38px}
  .nv .cta{padding:9px 12px;font-size:12px}
  .nv4 .in{grid-template-columns:auto 1fr auto;padding:10px 16px;gap:10px}
  .nv4 .brand{grid-column:2;justify-self:center;grid-row:1}
  .nv4 .brand img{height:40px}
  .nv4 .m-left{grid-column:1;grid-row:1}
  .nv4 .r{grid-column:3;grid-row:1}
  .nv1 .brand img{height:36px}
}
@media (min-width:761px){ .links-m,.m-left{display:none !important} }

/* fixed bars for M3/M4 (sticky can't escape the header box) */
.nv3,.nv4{position:fixed;top:0;left:0;right:0}
html.m3 .hero,html.m4 .hero{padding-top:var(--navh,72px)}
html.scrolled .nv4{box-shadow:0 6px 20px rgba(0,0,0,.18)}
html.scrolled .nv3{box-shadow:0 6px 20px rgba(21,21,18,.08)}

/* mobile: logo left · Subscribe centre · Menu right */
@media (max-width:760px){
  .nv4 .in{grid-template-columns:1fr auto 1fr;gap:8px}
  .nv4 .brand{grid-column:1;justify-self:start}
  .nv4 .r{grid-column:2;justify-self:center}
  .nv4 .m-left{grid-column:3;grid-row:1;justify-self:end}
  .nv4 .burger{flex-direction:row-reverse}
}
@media (max-width:360px){ .nv4 .burger b{display:none} .nv4 .brand img{height:34px} }
@media (max-width:760px){
  .nv4 .in{display:flex;justify-content:space-between;align-items:center}
  .nv4 .brand{order:1}.nv4 .r{order:2}.nv4 .m-left{order:3}
}

/* desktop menu: logo left · topics of the month centred · language + Subscribe right */
@media (min-width:761px){
  .nv4 .in{grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr)}
  .nv4 .brand{grid-column:1;grid-row:1;justify-self:start}
  .nv4 .l{grid-column:2;grid-row:1;justify-content:center;gap:30px}
  .nv4 .r{grid-column:3;grid-row:1}
  .nv4 .brand img{height:50px}
  .nv4 .lnk[aria-current="true"]::after{transform:scaleX(1)}
}
@media (min-width:761px) and (max-width:1100px){
  .nv4 .in{gap:16px;padding:12px 18px}
  .nv4 .l{gap:16px}
  .nv4 .lnk{font-size:12px;letter-spacing:.6px}
  .nv4 .r{gap:14px}
  .nv4 .brand img{height:40px}
}
@media (min-width:761px) and (max-width:900px){ .nv4 .r .ld{display:none} }
/* topic anchors land below the fixed menu */
.acc[id^="sec-"]{scroll-margin-top:calc(var(--navh,80px) + 24px)}
.panel .p-links a[aria-current="true"] .t{color:var(--cta)}

/* more breathing room in the menu */
@media (min-width:761px){
  .nv4 .in{padding-top:22px;padding-bottom:22px}
  html.scrolled .nv4 .in{padding-top:16px;padding-bottom:16px}
  .nv4 .in{transition:padding .3s ease}
}
@media (min-width:761px) and (max-width:1100px){ .nv4 .in{padding-top:18px;padding-bottom:18px} }
@media (max-width:760px){ .nv4 .in{padding-top:14px;padding-bottom:14px} }

/* reading-progress bar: fills as the page scrolls */
.nv-progress{position:absolute;left:0;right:0;top:0;height:3px;background:transparent;pointer-events:none;z-index:2}
.nv-progress i{display:block;height:100%;background:var(--cta,#C8B27E);transform:scaleX(0);transform-origin:left center;will-change:transform}

/* scroll reveal (only when JS is on and motion is allowed) */
html.rv-on .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.rv-on .rv.in{opacity:1;transform:none}
html.rv-on .hero__horizon.rv{transform:translateY(40px) scale(.98);transition-duration:1.1s}
html.rv-on .hero__horizon.rv.in{transform:none}
html.rv-on .lk-wrap.rv{transition-delay:.1s}
html.rv-on .acc.rv ul li{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
html.rv-on .acc.rv.in ul li{opacity:1;transform:none}
html.rv-on .acc.rv.in ul li:nth-child(2){transition-delay:.06s}
html.rv-on .acc.rv.in ul li:nth-child(3){transition-delay:.12s}
html.rv-on .acc.rv.in ul li:nth-child(4){transition-delay:.18s}
html.rv-on .acc.rv.in ul li:nth-child(5){transition-delay:.24s}
html.rv-on .acc.rv.in ul li:nth-child(n+6){transition-delay:.3s}
html.rv-on .subscribe .f-lead.rv{transition-delay:.08s}
html.rv-on .subscribe .form.rv{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){ html.rv-on .rv, html.rv-on .rv li{opacity:1!important;transform:none!important;transition:none!important} }
