/* ==========================================================================
   Porto Pulse — design system v4
   Tokens → base → layout → components → pages → utilities
   ========================================================================== */
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-italic-var.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans-var.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}

:root{
  /* colour */
  --ink:#13212C; --ink-2:#2A3945; --ink-3:#4A5863; --muted:#66727B; --faint:#8D969C;
  --paper:#F7F3EC; --surface:#FFFFFF; --sand:#EFE7DA; --sand-2:#E6DBC9; --line:#E2D9CA; --line-2:#D3C7B4;
  --douro:#0F4C4F; --douro-2:#16676B; --douro-tint:#E3EEEC;
  --tile:#C4552D; --tile-2:#A6431F; --tile-tint:#F6E4DA;
  --night:#0C161E;
  /* type */
  --serif:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --step--2:clamp(.72rem,.7rem + .1vw,.78rem);
  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.08rem);
  --step-1:clamp(1.2rem,1.12rem + .35vw,1.38rem);
  --step-2:clamp(1.44rem,1.3rem + .7vw,1.8rem);
  --step-3:clamp(1.73rem,1.5rem + 1.15vw,2.4rem);
  --step-4:clamp(2.07rem,1.7rem + 1.9vw,3.2rem);
  --step-5:clamp(2.49rem,1.9rem + 3vw,4.3rem);
  --step-6:clamp(2.9rem,2rem + 4.6vw,5.9rem);
  /* space (4px grid) */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  --section:clamp(4rem,3rem + 5vw,8rem);
  --gutter:clamp(1.15rem,.6rem + 2.4vw,2.5rem);
  --max:1280px; --max-wide:1440px; --measure:40rem;
  /* shape & depth */
  --r-xs:4px; --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(19,33,44,.06),0 2px 8px rgba(19,33,44,.05);
  --shadow-2:0 10px 30px -12px rgba(19,33,44,.28),0 2px 6px rgba(19,33,44,.06);
  --shadow-3:0 30px 60px -24px rgba(12,22,30,.45);
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:160ms; --t:280ms; --t-slow:700ms;
  --header-h:72px;
}
@media (prefers-reduced-motion:reduce){:root{--t-fast:0ms;--t:0ms;--t-slow:0ms}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1.5rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--step-0);line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.015em;margin:0;color:var(--ink);font-optical-sizing:auto;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
::selection{background:var(--tile);color:#fff}
:focus-visible{outline:2px solid var(--tile);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:var(--r-sm);transition:top var(--t)}
.skip-link:focus{top:1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.icon{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:calc(var(--max-wide) + var(--gutter)*2)}
.section{padding-block:var(--section)}
.section-tight{padding-block:calc(var(--section)*.6)}
.bg-sand{background:var(--sand)} .bg-ink{background:var(--ink);color:var(--paper)} .bg-surface{background:var(--surface)}
.bg-ink h2,.bg-ink h3{color:var(--paper)}
.grid{display:grid;gap:var(--s-6) var(--s-5)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1020px){.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* ---------- type helpers ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-size:var(--step--2);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tile)}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.7}
.eyebrow.plain::before{display:none}
.on-dark .eyebrow,.bg-ink .eyebrow{color:#E9A182}
.display{font-size:var(--step-6);line-height:1;letter-spacing:-.025em;font-weight:450}
.h1{font-size:var(--step-5);letter-spacing:-.022em}
.h2{font-size:var(--step-4)}
.h3{font-size:var(--step-2)}
.lede{font-family:var(--serif);font-size:var(--step-1);line-height:1.5;color:var(--ink-3);font-weight:400}
em.accent,.accent{font-style:italic;font-weight:400;color:var(--tile)}
.muted{color:var(--muted)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--s-6);margin-bottom:var(--s-7)}
.section-head .h2{max-width:22ch;margin-top:.6rem}
.section-head p{max-width:34rem;color:var(--ink-3);margin:0}
@media (max-width:760px){.section-head{flex-direction:column;align-items:start}}

/* ---------- links & buttons ---------- */
.link{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--t) var(--ease)}
.link:hover{background-size:100% 1px}
.link .icon{transition:transform var(--t) var(--ease)} .link:hover .icon{transform:translateX(3px)}
.btn{--b:var(--ink);--c:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.8rem 1.35rem;border-radius:var(--r-pill);border:1px solid var(--b);background:var(--b);color:var(--c);font:600 var(--step--1)/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform var(--t-fast) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0)}
.btn .icon{width:1.1em;height:1.1em}
.btn-tile{--b:var(--tile);--c:#fff} .btn-tile:hover{--b:var(--tile-2)}
.btn-douro{--b:var(--douro)} .btn-douro:hover{--b:var(--douro-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-light{--b:var(--paper);--c:var(--ink)}
.btn-glass{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .btn-glass:hover{background:rgba(255,255,255,.22)}
.btn-sm{min-height:40px;padding:.6rem 1rem}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);color:var(--ink);transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease)}
.site-header .bar{height:100%;display:flex;align-items:center;gap:var(--s-6)}
.site-header.is-solid,.site-header:not(.over-hero){background:rgba(247,243,236,.92);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.site-header.over-hero:not(.is-solid){color:#fff}
.site-header.is-hidden{transform:translateY(-100%)}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:inherit;margin-right:auto}
.brand svg{height:34px;width:auto}
.brand .logo-dark{display:block} .brand .logo-light{display:none}
.over-hero:not(.is-solid) .brand .logo-dark{display:none} .over-hero:not(.is-solid) .brand .logo-light{display:block}
.nav{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}
.nav>li{position:relative}
.nav>li>a,.nav>li>button{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .8rem;border-radius:var(--r-pill);font:500 var(--step--1)/1 var(--sans);letter-spacing:.01em;text-decoration:none;color:inherit;background:none;border:0;cursor:pointer;transition:background var(--t-fast)}
.nav>li>a:hover,.nav>li>button:hover,.nav>li:focus-within>button{background:rgba(127,127,127,.12)}
.nav>li>a[aria-current="page"],.nav>li.is-current>button{box-shadow:inset 0 -2px 0 var(--tile);border-radius:0}
.nav .chev{width:.8em;height:.8em;transition:transform var(--t)}
.nav>li:hover .chev,.nav>li:focus-within .chev{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;width:min(640px,90vw);background:var(--surface);color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:var(--s-4);display:grid;grid-template-columns:1fr 1fr;gap:.35rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.mega::before{content:"";position:absolute;inset:-12px 0 auto;height:12px}
.nav>li:hover .mega,.nav>li:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega a{display:grid;grid-template-columns:64px 1fr;gap:.8rem;align-items:center;padding:.5rem;border-radius:var(--r);text-decoration:none;transition:background var(--t-fast)}
.mega a:hover{background:var(--paper)}
.mega img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.mega strong{display:block;font:500 1.05rem/1.2 var(--serif)}
.mega span{display:block;font-size:var(--step--2);color:var(--muted);line-height:1.35;margin-top:.15rem}
.nav-cta{margin-left:var(--s-3)}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;align-items:center;justify-content:center;cursor:pointer;opacity:.9}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;position:relative;transition:transform var(--t) var(--ease),opacity var(--t)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px} .menu-btn span::after{top:6px}
body.menu-open .menu-btn span{background:transparent}
body.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:45;background:var(--paper);padding:calc(var(--header-h) + 1rem) var(--gutter) 2rem;overflow:auto;opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility var(--t)}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
body.menu-open .site-header{color:var(--ink);background:var(--paper)}
body.menu-open .site-header .brand .logo-dark{display:block} body.menu-open .site-header .brand .logo-light{display:none}
.mobile-menu ul{list-style:none;margin:0;padding:0}
.mobile-menu>ul>li{border-bottom:1px solid var(--line)}
.mobile-menu>ul>li>a{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;font:500 1.7rem/1.1 var(--serif);text-decoration:none}
.mobile-menu .sub{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 0 1rem}
.mobile-menu .sub a{font-size:var(--step--1);padding:.45rem .8rem;border:1px solid var(--line-2);border-radius:var(--r-pill);text-decoration:none}
.mobile-menu .btn{margin-top:1.5rem;width:100%}
@media (max-width:1060px){.nav,.nav-cta{display:none}.menu-btn{display:inline-flex}}
.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--tile);z-index:60}

/* ---------- media primitives ---------- */
.media{position:relative;overflow:hidden;background:var(--sand-2)}
.media img{width:100%;height:100%;object-fit:cover}
.ratio-3x2{aspect-ratio:3/2} .ratio-4x3{aspect-ratio:4/3} .ratio-4x5{aspect-ratio:4/5} .ratio-16x9{aspect-ratio:16/9} .ratio-1{aspect-ratio:1} .ratio-21x9{aspect-ratio:21/9}
.credit{position:absolute;right:.75rem;bottom:.6rem;z-index:2;font:500 .68rem/1.2 var(--sans);letter-spacing:.02em;color:rgba(255,255,255,.78);text-shadow:0 1px 2px rgba(0,0,0,.45);text-decoration:none}
.credit:hover{color:#fff;text-decoration:underline}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(94vh,980px);display:flex;align-items:flex-end;color:#fff;isolation:isolate;overflow:hidden;background:var(--night)}
.hero .media{position:absolute;inset:0;z-index:-2;background:var(--night)}
.hero .media img{transform:scale(1.04);animation:heroIn 1.8s var(--ease-out) forwards}
@keyframes heroIn{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,22,30,.55) 0%,rgba(12,22,30,0) 26%,rgba(12,22,30,0) 42%,rgba(12,22,30,.72) 100%)}
.hero-inner{padding-block:calc(var(--header-h) + 3rem) clamp(3rem,6vw,6rem);width:100%}
.hero h1{color:#fff;max-width:15ch}
.hero .lede{color:rgba(255,255,255,.86);max-width:36rem;margin-top:var(--s-5)}
.hero .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-6)}
.hero .eyebrow{color:#F1B396}
.hero-meta{display:flex;gap:var(--s-6);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.22);max-width:44rem;flex-wrap:wrap}
.hero-meta div{font-size:var(--step--1);color:rgba(255,255,255,.75)}
.hero-meta strong{display:block;font:500 var(--step-2)/1 var(--serif);color:#fff;margin-bottom:.3rem}
.hero.hero-article{min-height:min(78vh,820px)}
.hero.hero-article h1{max-width:20ch;font-size:var(--step-5)}
.hero.hero-hub{min-height:min(70vh,720px)}
.scroll-cue{position:absolute;left:50%;bottom:1.2rem;translate:-50% 0;width:22px;height:36px;border:1.5px solid rgba(255,255,255,.6);border-radius:12px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(9px)}}
@media (max-width:760px){.scroll-cue{display:none}.hero{min-height:88vh}}

/* ---------- page header (no-photo pages) ---------- */
.page-head{padding:calc(var(--header-h) + clamp(2.5rem,5vw,5rem)) 0 clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--line)}
.page-head h1{font-size:var(--step-5);max-width:18ch;margin-top:var(--s-4)}
.page-head .lede{max-width:40rem;margin-top:var(--s-5)}

/* ---------- breadcrumbs ---------- */
.crumbs ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0;font-size:var(--step--2);font-weight:500;letter-spacing:.04em;color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center;gap:.35rem}
.crumbs li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink);text-decoration:underline}
.hero .crumbs ol{color:rgba(255,255,255,.75)} .hero .crumbs a:hover{color:#fff}
.hero .crumbs{margin-bottom:var(--s-5)}

/* ---------- welcome band ---------- */
.welcome{background:var(--ink);color:var(--paper)}
.welcome .grid{grid-template-columns:1.1fr 1fr 1fr;align-items:stretch;gap:var(--s-5)}
.welcome-intro{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);align-items:start;padding-right:var(--s-5)}
.welcome-intro p{color:rgba(247,243,236,.78);font-size:var(--step--1);margin:.4rem 0 1rem}
.welcome-intro h2{font-size:var(--step-2);color:var(--paper)}
@media (max-width:1020px){.welcome .grid{grid-template-columns:1fr 1fr}.welcome-intro{grid-column:1/-1;padding:0}}
@media (max-width:640px){.welcome .grid{grid-template-columns:1fr}}
.avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--douro);color:var(--paper);font:600 1rem/1 var(--sans);letter-spacing:.06em;flex:none;overflow:hidden}
.avatar svg{width:60%;height:60%}
.avatar.lg{width:88px;height:88px}
.avatar.sm{width:44px;height:44px;font-size:.8rem}

/* ---------- cards ---------- */
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.card .media img{transition:transform var(--t-slow) var(--ease-out)}
.card:hover .media img{transform:scale(1.045)}
.card-body{display:flex;flex-direction:column;gap:.55rem;padding:var(--s-5) var(--s-5) var(--s-6);flex:1}
.card-cat{font:600 var(--step--2)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--douro-2)}
.card h3{font-size:var(--step-2);line-height:1.12}
.card h3 a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--t) var(--ease)}
.card:hover h3 a{background-size:100% 1px}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card p{color:var(--ink-3);font-size:var(--step--1);margin:0}
.card-meta{display:flex;align-items:center;gap:.5rem;font-size:var(--step--2);color:var(--muted);margin-top:auto;padding-top:.6rem}
.card-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor}
.card .tag{position:absolute;top:.9rem;left:.9rem;z-index:2;background:rgba(247,243,236,.94);color:var(--ink);font:600 .68rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:.45rem .65rem;border-radius:var(--r-pill)}
.card.flat{background:transparent;box-shadow:none;border-radius:0}
.card.flat .media{border-radius:var(--r)}
.card.flat .card-body{padding:var(--s-4) 0 0}
.card.flat:hover{transform:none;box-shadow:none}
/* feature card: big image + text overlay */
.card-feature{grid-row:span 2;min-height:560px;color:#fff;justify-content:flex-end}
.card-feature .media{position:absolute;inset:0}
.card-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,22,30,0) 35%,rgba(12,22,30,.82));pointer-events:none}
.card-feature .card-body{position:relative;z-index:2;flex:0;padding:var(--s-6)}
.card-feature h3{color:#fff;font-size:var(--step-3)} .card-feature p{color:rgba(255,255,255,.82)} .card-feature .card-cat{color:#F1B396} .card-feature .card-meta{color:rgba(255,255,255,.72)}
.magazine{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:var(--s-5)}
.magazine .card-feature{grid-column:1;grid-row:1/3}
@media (max-width:1020px){.magazine{grid-template-columns:1fr 1fr}.magazine .card-feature{grid-column:1/-1;grid-row:auto;min-height:480px}}
@media (max-width:640px){.magazine{grid-template-columns:1fr}}

/* ---------- place tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(180px,18vw,260px);gap:var(--s-4)}
.tile{position:relative;border-radius:var(--r);overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;display:flex;align-items:flex-end;padding:var(--s-5)}
.tile .media{position:absolute;inset:0;z-index:-2}
.tile .media img{transition:transform 1s var(--ease-out)}
.tile:hover .media img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,22,30,0) 40%,rgba(12,22,30,.7));transition:opacity var(--t)}
.tile strong{display:block;font:italic 400 var(--step-3)/1 var(--serif);letter-spacing:-.01em}
.tile span{display:block;font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;font-weight:600;opacity:.85;margin-bottom:.45rem}
.tile .arrow{position:absolute;top:var(--s-4);right:var(--s-4);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);display:grid;place-items:center;transform:scale(.85);opacity:0;transition:all var(--t) var(--ease)}
.tile:hover .arrow{opacity:1;transform:none}
.t-a{grid-column:span 3;grid-row:span 2} .t-b{grid-column:span 3} .t-c{grid-column:span 2}.t-d{grid-column:span 1}
@media (max-width:860px){.tiles{grid-template-columns:1fr 1fr}.t-a,.t-b,.t-c,.t-d{grid-column:span 1;grid-row:span 1}.t-a{grid-column:1/-1}}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font:500 var(--step--1)/1 var(--sans);text-decoration:none;transition:all var(--t-fast) var(--ease)}
.chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.chip .icon{color:var(--tile)}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:center}
.split.reverse .split-media{order:2}
.split-media{position:relative}
.split-media .media{border-radius:var(--r-lg)}
.split-media .inset{position:absolute;width:44%;right:-6%;bottom:-10%;border:6px solid var(--paper);border-radius:var(--r);box-shadow:var(--shadow-2)}
.bg-sand .split-media .inset{border-color:var(--sand)}
.split-copy .h2{margin:.8rem 0 1.2rem}
.split-copy .lede{margin-bottom:1.5rem}
.list-check{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.7rem}
.list-check li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start}
.list-check .icon{color:var(--douro-2);margin-top:.2rem}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.reverse .split-media{order:0}.split-media .inset{display:none}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:var(--s-6) var(--s-5);border-left:1px solid var(--line)}
.stats div:first-child{border-left:0;padding-left:0}
.stats strong{display:block;font:400 var(--step-4)/1 var(--serif);letter-spacing:-.02em;color:var(--douro)}
.stats span{display:block;margin-top:.5rem;font-size:var(--step--1);color:var(--ink-3)}
.stats a{font-size:var(--step--2);color:var(--muted)}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(3){border-left:0;padding-left:0}.stats div{border-top:1px solid var(--line)}}

/* ---------- toolkit (partner resources) ---------- */
.toolkit{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2.5rem)}
.toolkit-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:var(--s-5);padding-bottom:var(--s-4);border-bottom:1px solid var(--line)}
.toolkit-head h2,.toolkit-head h3{font-size:var(--step-2)}
.toolkit-head small{font-size:var(--step--2);color:var(--muted)}
.toolkit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem}
.tool{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;padding:.9rem 1rem;border-radius:var(--r);text-decoration:none;border:1px solid transparent;transition:all var(--t-fast) var(--ease)}
.tool:hover{background:var(--paper);border-color:var(--line)}
.tool .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tile-tint);color:var(--tile)}
.tool .ico .icon{width:22px;height:22px}
.tool strong{display:block;font:600 var(--step--1)/1.25 var(--sans)}
.tool span{display:block;font-size:var(--step--2);color:var(--muted);margin-top:.15rem}
.tool .go{color:var(--faint);transition:transform var(--t) var(--ease),color var(--t)}
.tool:hover .go{transform:translateX(3px);color:var(--ink)}
.aff-note{font-size:var(--step--2);color:var(--muted);margin:var(--s-4) 0 0}
.aff-note a{color:inherit}
.partner-badge{display:inline-block;font:600 .62rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:.3rem .45rem;border-radius:4px;background:var(--sand);color:var(--ink-3);vertical-align:middle;margin-left:.35rem}

/* ---------- newsletter ---------- */
.newsletter{position:relative;overflow:hidden;background:var(--douro);color:var(--paper);border-radius:var(--r-lg);padding:clamp(2rem,5vw,4.5rem);display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-7);align-items:center;isolation:isolate}
.newsletter .deco{position:absolute;right:-60px;top:-60px;width:380px;opacity:.14;z-index:-1;color:var(--paper)}
.newsletter h2{color:var(--paper);font-size:var(--step-4)}
.newsletter p{color:rgba(247,243,236,.8)}
.newsletter form{display:grid;gap:.7rem}
.field{display:grid;gap:.35rem}
.field label{font-size:var(--step--2);letter-spacing:.08em;text-transform:uppercase;font-weight:600;opacity:.8}
.field input{height:52px;border-radius:var(--r-pill);border:1px solid rgba(247,243,236,.35);background:rgba(247,243,236,.08);color:var(--paper);padding:0 1.25rem;font:inherit;transition:border-color var(--t),background var(--t)}
.field input::placeholder{color:rgba(247,243,236,.5)}
.field input:focus{outline:none;border-color:var(--paper);background:rgba(247,243,236,.14)}
.newsletter .btn{width:100%}
.newsletter .fine{font-size:var(--step--2);opacity:.7;margin:.4rem 0 0}
.perks{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.5rem}
.perks li{display:flex;gap:.6rem;align-items:center;font-size:var(--step--1)}
.perks .icon{color:#F1B396}
@media (max-width:860px){.newsletter{grid-template-columns:1fr}}

/* ---------- article layout ---------- */
.article-top{border-bottom:1px solid var(--line);background:var(--surface)}
.article-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding-block:var(--s-5);flex-wrap:wrap}
.byline{display:flex;align-items:center;gap:.9rem}
.byline .who{font-size:var(--step--1);line-height:1.35}
.byline .who a{font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-2)}
.byline .who span{display:block;color:var(--muted);font-size:var(--step--2)}
.trust{display:flex;flex-wrap:wrap;gap:.5rem}
.trust span,.trust a{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--step--2);color:var(--ink-3);padding:.4rem .7rem;border:1px solid var(--line);border-radius:var(--r-pill);text-decoration:none;background:var(--paper)}
.trust .icon{width:1em;height:1em;color:var(--douro-2)}
.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,5vw,5rem);padding-block:clamp(2.5rem,5vw,4.5rem)}
.article-main{min-width:0}
.rail{position:relative}
.rail-inner{position:sticky;top:calc(var(--header-h) + 1.5rem);display:grid;gap:var(--s-5)}
@media (max-width:1060px){.article{grid-template-columns:1fr}.rail{display:none}}
.toc{border-left:1px solid var(--line);padding-left:var(--s-4)}
.toc h2{font:600 var(--step--2)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-4)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;counter-reset:toc}
.toc a{position:relative;display:block;padding:.4rem 0 .4rem 0;font-size:var(--step--1);line-height:1.35;color:var(--ink-3);text-decoration:none;transition:color var(--t-fast)}
.toc a::before{content:"";position:absolute;left:calc(-1 * var(--s-4) - 1px);top:0;bottom:0;width:2px;background:var(--tile);transform:scaleY(0);transition:transform var(--t) var(--ease)}
.toc a:hover{color:var(--ink)}
.toc a.is-active{color:var(--ink);font-weight:600}
.toc a.is-active::before{transform:scaleY(1)}
.toc-mobile{display:none;position:sticky;top:var(--header-h);z-index:30;background:rgba(247,243,236,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.toc-mobile details{padding:0 var(--gutter)}
.toc-mobile summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;font:600 var(--step--1)/1 var(--sans);cursor:pointer}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary .icon{transition:transform var(--t)} .toc-mobile details[open] summary .icon{transform:rotate(180deg)}
.toc-mobile ol{list-style:none;margin:0;padding:0 0 1rem;display:grid;gap:.2rem;max-height:55vh;overflow:auto}
.toc-mobile a{display:block;padding:.45rem 0;text-decoration:none;color:var(--ink-3);font-size:var(--step--1)}
@media (max-width:1060px){.toc-mobile{display:block}}
.rail-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-5)}
.rail-card h3{font-size:var(--step-1);margin-bottom:.4rem}
.rail-card p{font-size:var(--step--1);color:var(--ink-3)}
.rail-card .tool{padding:.6rem .5rem;grid-template-columns:auto 1fr}
.rail-card .tool .go{display:none}
.rail-card .tool .ico{width:36px;height:36px;border-radius:10px}

/* ---------- prose ---------- */
.prose{font-family:var(--serif);font-size:clamp(1.12rem,1.05rem + .25vw,1.24rem);line-height:1.68;color:var(--ink-2);font-variant-numeric:oldstyle-nums proportional-nums}
.prose>*{max-width:var(--measure)}
.prose>.wide,.prose>.keyfacts,.prose>.toolkit,.prose>.compare,.prose>figure.wide{max-width:none}
.prose h2{font-size:var(--step-3);margin:2.4em 0 .6em;color:var(--ink);scroll-margin-top:calc(var(--header-h) + 5rem)}
.prose h2 .num{display:block;font:600 var(--step--2)/1 var(--sans);letter-spacing:.16em;color:var(--tile);margin-bottom:.8rem}
.prose h3{font-size:var(--step-2);margin:1.8em 0 .5em;color:var(--ink)}
.prose p{margin:0 0 1.15em}
.prose a{color:var(--douro);text-decoration-color:rgba(15,76,79,.35);text-decoration-thickness:1px;transition:text-decoration-color var(--t-fast)}
.prose a:hover{text-decoration-color:currentColor}
.prose strong{font-weight:600;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.3em}
.prose li{margin-bottom:.45em;padding-left:.2em}
.prose ul li::marker{color:var(--tile)}
.prose>p:first-of-type::first-letter{float:left;font-size:3.7em;line-height:.82;padding:.08em .1em 0 0;color:var(--douro);font-weight:500}
.prose figure{margin:2.2em 0}
.prose figure .media{border-radius:var(--r)}
.prose figcaption{font-family:var(--sans);font-size:var(--step--2);color:var(--muted);margin-top:.7rem;display:flex;justify-content:space-between;gap:1rem}
.prose figcaption a{color:inherit}
.prose figure.wide{margin-inline:calc(-1 * clamp(0rem,4vw,4rem))}
@media (max-width:1060px){.prose figure.wide{margin-inline:0}}
.prose blockquote{margin:2em 0;padding:0 0 0 1.4em;border-left:2px solid var(--tile);font-size:1.32em;line-height:1.4;font-style:italic;color:var(--ink)}
.prose .callout{font-family:var(--sans);font-size:var(--step--1);line-height:1.6;background:var(--douro-tint);border-radius:var(--r);padding:1.1rem 1.25rem;margin:1.8em 0;display:grid;grid-template-columns:auto 1fr;gap:.85rem;color:var(--ink-2)}
.prose .callout .icon{color:var(--douro);width:1.35em;height:1.35em;margin-top:.1rem}
.prose .callout strong{display:block;margin-bottom:.15rem}
.prose .callout p{margin:0}
.prose .callout.warm{background:var(--tile-tint)} .prose .callout.warm .icon{color:var(--tile)}
.prose table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:var(--step--1);font-variant-numeric:lining-nums tabular-nums}
.compare{overflow-x:auto;margin:2em 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.compare table{min-width:620px}
.compare th,.compare td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
.compare thead th{font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--paper);font-weight:600}
.compare tbody th{font-weight:600;color:var(--ink);font-family:var(--serif);font-size:1.05rem}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:0}

/* ---------- key facts ---------- */
.keyfacts{font-family:var(--sans);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2rem);margin:0 0 2.6em;position:relative;overflow:hidden}
.keyfacts::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--douro),var(--tile))}
.keyfacts header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:var(--s-4);flex-wrap:wrap}
.keyfacts h2{font:600 var(--step--1)/1 var(--sans)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--douro);margin:0!important;display:flex;align-items:center;gap:.5rem}
.keyfacts .checked{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--step--2);color:var(--muted);background:var(--paper);border-radius:var(--r-pill);padding:.35rem .7rem}
.keyfacts ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.keyfacts li{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;padding:.85rem 0;border-top:1px solid var(--line);font-size:var(--step--1);line-height:1.5;color:var(--ink-2)}
.keyfacts li:first-child{border-top:0}
.keyfacts .src{font-size:var(--step--2);color:var(--muted);white-space:nowrap}
.keyfacts .src a{color:var(--douro);text-decoration:none;border-bottom:1px solid rgba(15,76,79,.3)}
@media (max-width:640px){.keyfacts li{grid-template-columns:1fr}.keyfacts .src{white-space:normal}}

/* ---------- partner CTA box (in prose) ---------- */
.partner{font-family:var(--sans);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem 1.25rem;padding:1.1rem 1.25rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);margin:1.8em 0;max-width:var(--measure);transition:border-color var(--t),box-shadow var(--t)}
.partner:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.partner .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--tile-tint);color:var(--tile)}
.partner strong{display:block;font-size:var(--step-0);color:var(--ink);line-height:1.3}
.partner span{display:block;font-size:var(--step--2);color:var(--muted)}
.partner .btn{white-space:nowrap}
@media (max-width:640px){.partner{grid-template-columns:auto 1fr}.partner .btn{grid-column:1/-1;width:100%}}

/* ---------- itinerary timeline ---------- */
.timeline{list-style:none;padding:0;margin:2em 0;position:relative;max-width:var(--measure)}
.timeline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:1px;background:var(--line-2)}
.timeline li{position:relative;padding:0 0 1.8em 3.4rem;margin:0}
.timeline .when{position:absolute;left:0;top:0;width:39px;height:39px;border-radius:50%;background:var(--paper);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--tile)}
.timeline .when .icon{width:18px;height:18px}
.timeline .slot{font:600 var(--step--2)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tile);display:block;margin:.6rem 0 .45rem}
.timeline h3{margin:0 0 .4rem!important;font-size:var(--step-1)!important}
.timeline p{margin:0 0 .6em}
.day-label{display:inline-flex;align-items:center;gap:.6rem;font:600 var(--step--2)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:.5rem .8rem;border-radius:var(--r-pill);margin-top:1.5em}

/* ---------- FAQ ---------- */
.faq{max-width:var(--measure);margin:2em 0 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.15rem 0;font:500 var(--step-1)/1.3 var(--serif);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);flex:none;transition:background var(--t),border-color var(--t)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:var(--ink);transition:transform var(--t) var(--ease)}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm{background:var(--ink);border-color:var(--ink)}
.faq details[open] summary .pm::before,.faq details[open] summary .pm::after{background:var(--paper)}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq .a{padding:0 0 1.2rem;font-size:.95em;color:var(--ink-3)}
.faq .a p{margin:0 0 .7em}

/* ---------- author box ---------- */
.author-box{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);padding:var(--s-6);margin:3em 0 0;background:var(--sand);border-radius:var(--r-lg);max-width:var(--measure);font-family:var(--sans)}
.author-box h2{font-size:var(--step-1)!important;margin:.2rem 0 .3rem!important}
.author-box .role{font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;color:var(--tile);font-weight:600}
.author-box p{font-size:var(--step--1);color:var(--ink-3);margin:.4rem 0 .8rem}
.placeholder-flag{display:inline-flex;align-items:center;gap:.4rem;font:600 .7rem/1.2 var(--sans);letter-spacing:.04em;color:#7A4A12;background:#FBEFD9;border:1px dashed #E2B66E;border-radius:6px;padding:.35rem .55rem}
.editor-note{font-family:var(--sans);font-size:var(--step--2);color:#7A4A12;background:#FBF3E4;border:1px dashed #E2B66E;border-radius:var(--r-sm);padding:.75rem 1rem;margin:2em 0;max-width:var(--measure)}

/* ---------- related ---------- */
.related{border-top:1px solid var(--line)}

/* ---------- hub intro ---------- */
.hub-intro{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,6vw,7rem);align-items:start}
.hub-intro .lede{font-size:var(--step-2);line-height:1.35;color:var(--ink)}
@media (max-width:900px){.hub-intro{grid-template-columns:1fr}}


/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- misc pages ---------- */
.narrow{max-width:46rem}
.credits-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s-5)}
.credits-list li{font-size:var(--step--2);color:var(--ink-3);line-height:1.45}
.credits-list .media{border-radius:var(--r-sm);margin-bottom:.6rem}
.credits-list a{color:var(--douro)}
.author-card{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);padding:var(--s-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:var(--s-5)}
.author-card h2{font-size:var(--step-2)}

/* ---- v4 audit refinements ---- */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,22,30,.62) 0%,rgba(12,22,30,.38) 38%,rgba(12,22,30,0) 72%)}
.hero h1,.hero .display,.hero .lede{text-shadow:0 1px 24px rgba(8,16,22,.35)}
.hero .accent{color:#F6C4A8}
.hero-meta{flex-wrap:nowrap;max-width:52rem}
.hero-meta div{flex:1 1 0;min-width:0}
@media (max-width:640px){.hero::before{background:linear-gradient(180deg,rgba(12,22,30,0) 20%,rgba(12,22,30,.55) 100%)}.hero-meta{gap:var(--s-4)}.hero-meta strong{font-size:var(--step-1)}}
.hub-intro>*,.split>*,.grid>*,.article-grid>*{min-width:0}
.newsletter .deco{right:-140px;top:auto;bottom:-170px;width:440px;opacity:.09}
.toolkit-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.interest{margin-top:var(--s-7);display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);align-items:center}
@media (max-width:860px){.t-d{grid-column:1/-1}}
@media (max-width:640px){.interest{grid-template-columns:1fr;gap:var(--s-3)}.card.flat .ratio-4x5{aspect-ratio:3/2}.hero-meta div{font-size:var(--step--2)}}
.util-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2rem,6vw,6rem);align-items:start}
.util-grid .narrow{margin-inline:0}
.util-aside{position:sticky;top:calc(var(--header-h) + 1.5rem);display:grid;gap:var(--s-4)}
.util-aside .media{border-radius:var(--r-lg);overflow:hidden}
@media (max-width:900px){.util-grid{grid-template-columns:1fr}.util-aside{position:static}}

/* ---------- footer (v5 editorial) ---------- */
.site-footer{--f-ink:rgba(247,243,236,.9);--f-mute:rgba(247,243,236,.62);--f-faint:rgba(247,243,236,.42);--f-line:rgba(247,243,236,.12);
  position:relative;background:var(--night);color:var(--f-mute);font-size:var(--step--1);overflow:hidden;isolation:isolate;margin-top:var(--s-7)}
.site-footer a{color:inherit;text-decoration:none;transition:color var(--t-fast) var(--ease)}
.site-footer :focus-visible{outline:2px solid #F1B396;outline-offset:3px;border-radius:4px}
/* photo band + letter */
.fband{position:relative;color:var(--paper);isolation:isolate;padding-block:clamp(4rem,9vw,7.5rem) clamp(3rem,6vw,5rem)}
.fband-media{position:absolute;inset:0;z-index:-2;border-radius:0}
.fband-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.fband::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,22,30,.78) 0%,rgba(12,22,30,.62) 45%,var(--night) 100%),linear-gradient(90deg,rgba(15,76,79,.55),rgba(15,76,79,0) 65%)}
.fband-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,6rem);align-items:end}
.fband .eyebrow{color:#F1B396}
.fband h2{color:var(--paper);font:400 var(--step-5)/1.02 var(--serif);letter-spacing:-.02em;margin:var(--s-4) 0 0;max-width:13ch;text-wrap:balance}
.fband h2 em{color:#F1B396;font-style:italic}
.fband-copy p{color:rgba(247,243,236,.78);max-width:34rem;margin:var(--s-5) 0 0;font-size:var(--step-0)}
.fband-form{display:grid;gap:var(--s-3)}
.ff-row{display:grid;grid-template-columns:1fr 1.3fr auto;gap:.5rem;padding:.5rem;background:rgba(247,243,236,.08);border:1px solid rgba(247,243,236,.18);border-radius:var(--r-pill);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ff-row input{min-width:0;font:inherit;font-size:var(--step-0);color:var(--paper);background:transparent;border:0;padding:.8rem 1.1rem;border-radius:var(--r-pill);transition:background var(--t-fast) var(--ease)}
.ff-row input::placeholder{color:rgba(247,243,236,.55)}
.ff-row input:focus{outline:none;background:rgba(247,243,236,.1)}
.ff-row input+label+input{border-left:1px solid rgba(247,243,236,.14);border-radius:0 var(--r-pill) var(--r-pill) 0}
.ff-row .btn{white-space:nowrap}
.fband .fine{display:flex;gap:.45rem;align-items:center;margin:0 0 0 1.1rem;font-size:var(--step--2);color:var(--f-faint)}
.fband .fine .icon{width:1em;height:1em}
.ff-row.ff-soon{grid-template-columns:auto 1fr auto;align-items:center;padding:.95rem 1.1rem .95rem 1.3rem;gap:.85rem}
.ff-soon-dot{width:.55rem;height:.55rem;border-radius:50%;background:#F1B396;box-shadow:0 0 0 4px rgba(241,179,150,.18)}
.ff-soon-t{font:500 var(--step-0)/1.2 var(--sans);color:var(--paper)}
.ff-soon-tag{font-size:var(--step--2);letter-spacing:.08em;text-transform:uppercase;color:rgba(247,243,236,.62);white-space:nowrap}
@media (max-width:760px){.ff-row.ff-soon{grid-template-columns:auto 1fr;border-radius:var(--r-lg);padding:.95rem 1.1rem;row-gap:.3rem;text-align:left}.ff-soon-tag{grid-column:2;white-space:normal}}
/* main */
.fmain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:clamp(2.5rem,6vw,6rem);padding-block:clamp(3rem,6vw,5rem);border-top:1px solid var(--f-line)}
.fbrand-logo{display:inline-block}
.fbrand-logo svg{height:38px;width:auto;display:block}
.fmission{font:400 var(--step-1)/1.4 var(--serif);color:var(--f-ink);max-width:22rem;margin:var(--s-5) 0 0}
.fbadges{list-style:none;padding:0;margin:var(--s-6) 0 0;display:grid;gap:.55rem}
.fbadges li{display:flex;align-items:center;gap:.6rem;font-size:var(--step--2);letter-spacing:.02em;color:var(--f-mute)}
.fbadges .icon{width:1.05em;height:1.05em;color:#F1B396}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}
.fcol-h{font:600 var(--step--2)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);margin:0 0 var(--s-5);padding-bottom:var(--s-4);border-bottom:1px solid var(--f-line);position:relative}
.fcol-h::after{content:"";position:absolute;left:0;bottom:-1px;width:24px;height:1px;background:var(--tile)}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.fcol a{display:inline-flex;align-items:center;gap:.4rem;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:1px;transition:color var(--t-fast) var(--ease),background-size var(--t) var(--ease)}
.fcol a:hover{color:var(--paper);background-size:100% 1px}
.fcol a.fcol-all{color:#F1B396;font-weight:500}
.fcol a .icon{width:.95em;height:.95em;transition:transform var(--t) var(--ease)}
.fcol a:hover .icon{transform:translateX(3px)}
/* legal + bottom bar */
.flegal{border-top:1px solid var(--f-line);padding-block:clamp(2rem,4vw,2.75rem) clamp(1.5rem,3vw,2rem);display:grid;gap:clamp(1.75rem,3.5vw,2.5rem)}
.fnote{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-5) clamp(2rem,6vw,6rem);align-items:baseline}
.fdisclosure,.fcredit{margin:0;font-size:var(--step--2);line-height:1.7;color:var(--f-mute)}
.fdisclosure{max-width:46rem}
.fcredit{color:var(--f-faint);white-space:nowrap}
.flegal a:not(.ftop):not(.fbar-logo){text-decoration:underline;text-decoration-color:rgba(247,243,236,.28);text-decoration-thickness:1px;text-underline-offset:.25em;color:var(--f-ink)}
.flegal a:not(.ftop):not(.fbar-logo):hover{color:var(--paper);text-decoration-color:currentColor}
.fbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--f-line);font-size:var(--step--2);color:var(--f-faint)}
.fbar-brand{display:flex;align-items:center;gap:1.1rem;min-width:0}
.fbar-logo{display:inline-flex;flex:none;opacity:.92;transition:opacity var(--t-fast) var(--ease)}
.fbar-logo:hover{opacity:1}
.fbar-logo svg{height:24px;width:auto;display:block}
.fbar-brand p{margin:0;padding-left:1.1rem;border-left:1px solid var(--f-line);letter-spacing:.01em}
.fbar-links ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:.35rem 1.75rem}
.flegal .fbar-links a:not(.ftop){text-decoration:none;color:var(--f-mute);letter-spacing:.02em}
.flegal .fbar-links a:not(.ftop):hover{color:var(--paper)}
.ftop{display:inline-flex;align-items:center;gap:.55rem;color:var(--f-ink);font-weight:500;letter-spacing:.02em}
.ftop-ico{display:grid;place-items:center;width:1.9rem;height:1.9rem;border:1px solid rgba(247,243,236,.22);border-radius:50%;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t) var(--ease)}
.ftop-ico .icon{width:.9rem;height:.9rem;transform:rotate(-90deg)}
.ftop:hover .ftop-ico{background:var(--tile);border-color:var(--tile);transform:translateY(-2px)}
.photo-note{display:flex;gap:.55rem;align-items:flex-start;font-family:var(--sans);font-size:var(--step--2);color:var(--muted,#5b6670);border-top:1px solid rgba(19,33,44,.1);padding-top:1rem;margin:2.5em 0 1.5em;max-width:var(--measure)}
.photo-note .icon{width:1.05em;height:1.05em;flex:none;margin-top:.2em}
@media (max-width:1020px){.fmain{grid-template-columns:1fr}.fcols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-7)}}
@media (max-width:860px){.fband-inner{grid-template-columns:1fr;align-items:start}}
@media (max-width:900px){.fnote{grid-template-columns:1fr;gap:var(--s-3)}.fcredit{white-space:normal}.fbar{flex-direction:column;align-items:flex-start}}
@media (max-width:640px){
  .fband{padding-block:var(--s-9) var(--s-7)}
  .ff-row{grid-template-columns:1fr;border-radius:var(--r-lg);padding:.6rem}
  .ff-row input{background:rgba(247,243,236,.06);border-radius:var(--r)}
  .ff-row input+label+input{border-left:0;border-radius:var(--r)}
  .ff-row .btn{width:100%;justify-content:center;border-radius:var(--r)}
  .fband .fine{margin-left:.2rem;align-items:flex-start}
  .fcols{gap:var(--s-6) var(--s-5)}
  .fnote{grid-template-columns:1fr;gap:var(--s-3)}
  .fcredit{white-space:normal}
  .fbar{flex-direction:column;align-items:flex-start;gap:var(--s-5)}
  .fbar-brand{flex-direction:column;align-items:flex-start;gap:.75rem}
  .fbar-brand p{padding-left:0;border-left:0}
  .fbar-links ul{gap:.75rem 1.4rem}
  .fbar-links li:last-child{flex-basis:100%;margin-top:.4rem}
}