/* Story Forum Basel — shared stylesheet
   Design tokens
   ink   #142B2B  — near-black teal, body text
   paper #F6F5F1  — warm off-white background
   dim   #EDEAE2  — card / section background
   deep  #1C3B3B  — primary brand teal
   mid   #4A6060  — secondary teal
   sage  #9EADAD  — muted tertiary teal
   gold  #C9A227  — signature accent (Basel bridgehead)
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#142B2B;
  --paper:#F6F5F1;
  --dim:#EDEAE2;
  --deep:#1C3B3B;
  --mid:#4A6060;
  --sage:#9EADAD;
  --gold:#C9A227;
  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo', -apple-system, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Archivo', -apple-system, sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0 0 0.4em;
}
h1{font-size:clamp(2.4rem,5vw,4.4rem); line-height:1.0; font-weight:800;}
h2{font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.08; font-weight:800;}
h3{font-size:1.25rem; line-height:1.25; font-weight:700;}

p{margin:0 0 1em;}
a{color:inherit;}

.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.02em;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--mid);
  margin-bottom:0.9em;
  display:block;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 1.6rem;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,245,241,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(20,43,43,0.08);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.wordmark{
  font-family:'IBM Plex Mono', monospace;
  font-weight:500;
  font-size:0.92rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
}
.wordmark span{color:var(--gold);}

nav.main-nav{display:flex; gap:2.2rem; align-items:center;}
nav.main-nav a{
  text-decoration:none;
  font-size:0.95rem;
  color:var(--mid);
  transition:color .15s ease;
}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--ink);}

.lang-switch{
  display:flex; gap:0.5rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.04em;
}
.lang-switch a{
  color:var(--sage); text-decoration:none; padding:0.15rem 0.3rem;
}
.lang-switch a.active{color:var(--ink); font-weight:600; border-bottom:1.5px solid var(--gold);}
.lang-switch a:hover{color:var(--ink);}
.photo-hero .lang-switch a{color:rgba(255,255,255,0.55);}
.photo-hero .lang-switch a.active{color:#fff;}

.nav-toggle{display:none;}

@media (max-width:720px){
  nav.main-nav{
    position:absolute; top:74px; left:0; right:0;
    background:var(--paper);
    flex-direction:column; gap:0;
    border-bottom:1px solid rgba(20,43,43,0.08);
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  nav.main-nav.open{max-height:280px;}
  nav.main-nav a{padding:1rem 1.6rem; border-top:1px solid rgba(20,43,43,0.06);}
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer;
    font-family:'IBM Plex Mono',monospace; font-size:0.85rem; letter-spacing:0.1em;
    color:var(--ink); text-transform:uppercase;
  }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:5.5rem 0 4rem;
  overflow:hidden;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:3rem;
  align-items:center;
}
.hero-copy p.lede{
  font-size:1.15rem;
  color:var(--mid);
  max-width:46ch;
}
.hero-map{position:relative;}
.hero-map svg{width:100%; height:auto; display:block;}
.hero-map .country{
  fill:none;
  stroke:var(--sage);
  stroke-width:1.4;
  opacity:0.85;
}
.hero-map .country.che{stroke:var(--deep); stroke-width:1.8;}
.hero-map .basel-dot{fill:var(--gold);}
.hero-map .basel-ring{fill:none; stroke:var(--gold); stroke-width:1.6; opacity:0.6;}
.hero-map .basel-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:15px;
  fill:var(--ink);
  letter-spacing:0.04em;
}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-map{order:-1; max-width:280px; margin:0 auto;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5em;
  padding:0.85rem 1.5rem;
  border-radius:2px;
  text-decoration:none;
  font-size:0.95rem;
  font-weight:500;
  border:1px solid var(--ink);
  transition:background .15s ease, color .15s ease;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--deep);}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-ghost:hover{background:rgba(20,43,43,0.06);}
.btn-row{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem;}

/* ---------- Sections ---------- */
section{padding:4.5rem 0;}
section.tight{padding:3rem 0;}
.section-head{max-width:60ch; margin-bottom:2.6rem;}
.section-head p{color:var(--mid); font-size:1.05rem;}

.bg-dim{background:var(--dim);}
.bg-deep{background:var(--deep); color:var(--paper);}
.bg-deep h1,.bg-deep h2,.bg-deep h3{color:var(--paper);}
.bg-deep .eyebrow{color:var(--sage);}

hr.rule{
  border:none; border-top:1px solid rgba(20,43,43,0.14);
  margin:0;
}

/* ---------- Stat row ---------- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(20,43,43,0.14);
  border-top:1px solid rgba(20,43,43,0.14);
  border-bottom:1px solid rgba(20,43,43,0.14);
}
.stat{
  background:var(--paper);
  padding:2rem 1.2rem;
  text-align:center;
}
.stat .num{
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:500;
  color:var(--deep);
  display:block;
}
.stat .label{font-size:0.9rem; color:var(--mid); margin-top:0.3em;}
@media (max-width:720px){.stat-row{grid-template-columns:repeat(2,1fr);}}

.proof-note{
  font-size:0.95rem; color:var(--mid); margin-top:1.4rem; max-width:56ch;
}

/* ---------- Card grid ---------- */
.grid{
  display:grid;
  gap:1.4rem;
}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}
}

.card{
  background:var(--paper);
  border:1px solid rgba(20,43,43,0.12);
  padding:1.6rem;
}
.card .num{
  font-family:'IBM Plex Mono', monospace;
  color:var(--gold);
  font-size:0.85rem;
  display:block;
  margin-bottom:0.6em;
}
.card h3{margin-bottom:0.4em; font-size:1.15rem;}
.card p{color:var(--mid); font-size:0.95rem; margin:0;}

/* ---------- Quote ---------- */
.quote{
  max-width:70ch;
  font-family:'Archivo', sans-serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.7rem);
  line-height:1.45;
  color:var(--ink);
}
.bg-deep .quote{color:var(--paper);}
.bg-deep .quote cite{color:var(--sage);}
.quote cite{
  display:block; margin-top:1.2rem;
  font-family:'IBM Plex Mono', monospace;
  font-style:normal; font-size:0.85rem; color:var(--mid);
}

/* ---------- Footer ---------- */
footer{
  padding:3rem 0 2.4rem;
  border-top:1px solid rgba(20,43,43,0.12);
}
footer .wrap{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:1.4rem;
}
footer .fmark{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase;
}
footer .flinks{display:flex; gap:1.6rem; font-size:0.9rem; color:var(--mid);}
footer .flinks a{text-decoration:none;}
footer .flinks a:hover{color:var(--ink);}
footer .fmeta{font-size:0.82rem; color:var(--sage); margin-top:0.6rem;}

/* ---------- Page header (non-home pages) ---------- */
.page-head{padding:3.5rem 0 2.5rem; border-bottom:1px solid rgba(20,43,43,0.1);}
.page-head p.lede{color:var(--mid); font-size:1.1rem; max-width:60ch;}

/* ---------- Photo Hero (cinematic, full-bleed) ---------- */
.photo-hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.photo-hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
}
.photo-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,43,43,0.15) 0%, rgba(20,43,43,0.55) 55%, rgba(10,20,20,0.92) 100%);
}
.photo-hero .wrap{position:relative; z-index:2; padding-bottom:4.5rem; padding-top:3rem;}
.photo-hero .eyebrow{color:var(--gold);}
.photo-hero h1{color:#fff; max-width:20ch;}
#rotating-headline{
  transition:opacity .7s ease, transform .7s ease;
  min-height:2.2em;
}
#rotating-headline.fading{opacity:0; transform:translateY(10px);}
@media (prefers-reduced-motion: reduce){
  #rotating-headline{transition:none;}
}
.photo-hero .lede{color:#E3E0D6; max-width:48ch; font-size:1.15rem;}
.photo-hero .credit{
  position:absolute; z-index:2; right:1.6rem; bottom:1rem;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  color:rgba(255,255,255,0.55); letter-spacing:0.03em;
}

/* ---------- Photo Break (full-bleed statement moment) ---------- */
.photo-break{
  position:relative;
  min-height:64vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.photo-break img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.photo-break::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,20,20,0.05) 40%, rgba(10,20,20,0.88) 100%);
}
.photo-break .wrap{position:relative; z-index:2; padding-bottom:3.2rem;}
.photo-break .eyebrow{color:var(--gold);}
.photo-break h2{color:#fff; max-width:22ch; font-size:clamp(1.8rem,3.4vw,2.7rem);}
.photo-break p.sub{color:#D8D5CA; max-width:52ch; font-size:1.02rem;}
.photo-break .credit{
  position:absolute; z-index:2; right:1.6rem; bottom:1rem;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  color:rgba(255,255,255,0.5);
}

/* ---------- Signature map card (dark, cinematic) ---------- */
.map-card{
  background:var(--ink);
  color:var(--paper);
  padding:3rem;
  position:relative;
  overflow:hidden;
}
.map-card .country{fill:none; stroke:rgba(158,173,173,0.45); stroke-width:1.6;}
.map-card .country.che{stroke:var(--sage); stroke-width:2.2;}
.map-card .basel-dot{fill:var(--gold);}
.map-card .basel-ring{fill:none; stroke:var(--gold); stroke-width:1.6; opacity:0.7;}
.map-card .basel-label{font-family:'IBM Plex Mono', monospace; font-size:15px; fill:#fff;}
.map-card-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:2.5rem; align-items:center;}
.map-card-grid h2{color:#fff;}
.map-card-grid p{color:#C9C6BB;}
.map-card .eyebrow{color:var(--gold);}
@media (max-width:860px){.map-card-grid{grid-template-columns:1fr;}}

/* ---------- Credits strip (film-credits style stat row) ---------- */
.credits-strip{
  background:var(--ink);
  color:var(--paper);
  padding:3.5rem 0;
}
.credits-strip .eyebrow{color:var(--sage); text-align:center;}
.credits-strip .stat-row{
  background:none; border:none;
  gap:0;
}
.credits-strip .stat{background:none; border-left:1px solid rgba(255,255,255,0.14);}
.credits-strip .stat:first-child{border-left:none;}
.credits-strip .stat .num{color:var(--gold);}
.credits-strip .stat .label{color:#C9C6BB;}
.credits-strip .proof-note{color:#C9C6BB; text-align:center; margin:1.6rem auto 0;}

.muted{color:var(--mid);}
.center{text-align:center;}
ul.plain{list-style:none; margin:0; padding:0;}
ul.plain li{padding:0.6rem 0; border-top:1px solid rgba(20,43,43,0.1);}
ul.plain li:first-child{border-top:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}