:root{
    --ink:#0b1420;
    --ink-2:#122032;
    --ink-3:#1b2c42;
    --paper:#f7f6f3;
    --paper-2:#ffffff;
    --text:#1a2532;
    --muted:#5b6878;
    --muted-dark:#9fb0c4;
    --gold:#c8a44d;
    --gold-soft:#e0c281;
    --rule:#e2ded6;
    --rule-dark:rgba(255,255,255,.12);
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wrap: 1120px;
    --pad: clamp(1.25rem, 5vw, 3rem);
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *{animation:none !important; transition:none !important}
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font-family:var(--sans);
    font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;height:auto;display:block}
  a{color:inherit}
  h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.15; letter-spacing:-.015em; margin:0}
  p{margin:0}

  .wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
  .eyebrow{
    font-size:.72rem; text-transform:uppercase; letter-spacing:.18em;
    font-weight:600; color:var(--muted);
  }
  .eyebrow--gold{color:var(--gold)}
  .rule{height:1px; background:var(--rule); border:0; margin:0}

  /* ---------- Header ---------- */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:rgba(11,20,32,.92);
    backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--rule-dark);
  }
  .site-header .wrap{
    display:flex; align-items:center; justify-content:space-between;
    gap:1.5rem; min-height:72px;
  }
  .brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff}
  .brand svg{flex:none}
  .brand-name{font-family:var(--serif); font-size:1.15rem; font-weight:600; letter-spacing:.01em}
  .brand-sub{
    display:block; font-family:var(--sans); font-size:.62rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.16em; color:var(--muted-dark); margin-top:2px;
  }
  .nav{display:flex; align-items:center; gap:1.75rem}
  .nav a{
    color:#d9e2ec; text-decoration:none; font-size:.875rem; font-weight:500;
    letter-spacing:.01em; padding:.35rem 0; border-bottom:1px solid transparent;
    transition:color .2s ease, border-color .2s ease;
  }
  .nav a:hover{color:#fff; border-bottom-color:var(--gold)}
  @media (max-width:860px){ .nav{display:none} }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-family:var(--sans); font-size:.85rem; font-weight:600; letter-spacing:.02em;
    padding:.7rem 1.35rem; border-radius:2px; text-decoration:none;
    border:1px solid transparent; cursor:pointer; white-space:nowrap;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  }
  .btn--gold{background:var(--gold); color:#121a25; border-color:var(--gold)}
  .btn--gold:hover{background:var(--gold-soft); border-color:var(--gold-soft)}
  .btn--ghost{background:transparent; color:#e8eef5; border-color:rgba(255,255,255,.28)}
  .btn--ghost:hover{border-color:var(--gold); color:#fff}
  .btn--dark{background:var(--ink); color:#fff; border-color:var(--ink)}
  .btn--dark:hover{background:var(--ink-3); border-color:var(--ink-3)}
  .btn--lg{padding:.95rem 1.9rem; font-size:.9rem}

  /* ---------- Hero ---------- */
  .hero{
    position:relative; overflow:hidden; color:#fff;
    background:
      radial-gradient(1100px 520px at 78% -8%, rgba(200,164,77,.16), transparent 62%),
      radial-gradient(760px 420px at 8% 108%, rgba(90,140,200,.14), transparent 60%),
      linear-gradient(180deg, #0b1420 0%, #101d2e 60%, #0d1826 100%);
  }
  .hero::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
    background-size:100% 6px; opacity:.6;
  }
  .hero .wrap{position:relative; z-index:1; padding-block:clamp(4.5rem, 11vw, 8.5rem)}
  .hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2.5rem,6vw,5rem); align-items:center}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:3rem} }
  .hero .eyebrow{color:var(--gold); margin-bottom:1.35rem}
  .hero h1{
    font-size:clamp(2.15rem, 1.3rem + 3.6vw, 4rem);
    letter-spacing:-.025em; margin-bottom:1.5rem; text-wrap:balance;
  }
  .hero h1 span{display:block}
  .hero h1 .accent{color:var(--gold-soft)}
  .hero-lede{
    font-size:clamp(1.05rem, 1rem + .35vw, 1.22rem);
    color:#c3d0de; max-width:52ch; margin-bottom:2.25rem;
  }
  .hero-actions{display:flex; flex-wrap:wrap; gap:.85rem}
  .hero-emblem{display:flex; justify-content:center}
  .hero-emblem svg{width:min(300px, 70%); height:auto; opacity:.95}
  @media (max-width:900px){ .hero-emblem{display:none} }

  .ticker{
    border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark);
    background:rgba(0,0,0,.22); position:relative; z-index:1;
  }
  .ticker .wrap{
    display:flex; flex-wrap:wrap; gap:.75rem 2.5rem; padding-block:1.1rem;
    font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
    color:var(--muted-dark);
  }
  .ticker span{display:inline-flex; align-items:center; gap:.6rem}
  .ticker span::before{content:""; width:5px; height:5px; background:var(--gold); border-radius:50%; flex:none}

  /* ---------- Sections ---------- */
  section,[id]{scroll-margin-top:96px}

  /* Deep-link anchors */
  .anchor{
    margin-left:.45em; padding:0 .1em; text-decoration:none; color:var(--gold);
    font-family:var(--sans); font-size:.62em; font-weight:700; letter-spacing:0;
    vertical-align:middle; opacity:0; transition:opacity .18s ease;
  }
  h2:hover > .anchor, h3:hover > .anchor,
  .pillar:hover .anchor, .tool:hover .anchor, .role:hover .anchor, .tactics li:hover .anchor,
  .anchor:focus-visible{opacity:1}
  .anchor:hover{color:var(--gold-soft)}
  @media (hover:none){ .anchor{opacity:.5} }
  :target{scroll-margin-top:96px}
  .band{padding-block:clamp(4rem, 9vw, 7rem)}
  .band--paper{background:var(--paper)}
  .band--white{background:var(--paper-2); border-block:1px solid var(--rule)}
  .band--ink{background:var(--ink); color:#e8eef5}
  .band--ink h2,.band--ink h3{color:#fff}

  .sec-head{max-width:64ch; margin-bottom:clamp(2.5rem,5vw,3.5rem)}
  .sec-head .eyebrow{margin-bottom:1rem}
  .sec-head h2{font-size:clamp(1.75rem, 1.3rem + 1.9vw, 2.65rem); margin-bottom:1.15rem; text-wrap:balance}
  .sec-head p{color:var(--muted); font-size:clamp(1rem,.97rem + .25vw,1.1rem)}
  .band--ink .sec-head p{color:var(--muted-dark)}

  .statement{
    font-family:var(--serif); font-size:clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
    line-height:1.5; letter-spacing:-.01em; max-width:60ch; color:var(--text);
    border-left:3px solid var(--gold); padding-left:clamp(1.25rem,3vw,2rem);
    margin-bottom:clamp(2.75rem,5vw,3.75rem);
  }

  /* Mission cards */
  .pillars{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
  @media (min-width:720px){ .pillars{grid-template-columns:repeat(2,1fr)} }
  @media (min-width:1000px){ .pillars{grid-template-columns:repeat(3,1fr)} }
  .pillar{
    background:var(--paper-2); padding:clamp(1.6rem,3vw,2.1rem);
    display:flex; flex-direction:column; gap:.7rem;
    transition:background-color .25s ease;
  }
  .pillar:hover{background:#fbfaf7}
  .pillar-num{
    font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.16em;
    color:var(--gold);
  }
  .pillar h3{font-size:1.2rem}
  .pillar p{color:var(--muted); font-size:.95rem}
  .pillar--cta{
    background:var(--ink); color:#e8eef5; justify-content:space-between; gap:1.5rem;
  }
  .pillar--cta:hover{background:var(--ink-2)}
  .pillar--cta h3{color:#fff}
  .pillar--cta p{color:var(--muted-dark)}

  /* Why CUP */
  .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,6vw,4.5rem); align-items:start}
  @media (max-width:900px){ .split{grid-template-columns:1fr} }
  .prose p + p{margin-top:1.1rem}
  .prose{color:var(--muted-dark)}
  .band--ink .prose strong{color:#fff; font-weight:600}

  .tactics{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dark)}
  .tactics li{
    display:grid; grid-template-columns:auto 1fr; gap:1rem;
    padding:1.15rem 0; border-bottom:1px solid var(--rule-dark);
  }
  .tactics .mark{
    font-family:var(--serif); color:var(--gold); font-size:1.05rem; line-height:1.5;
  }
  .tactics strong{display:block; color:#fff; font-weight:600; font-size:1rem}
  .tactics span.desc{color:var(--muted-dark); font-size:.92rem}

  /* Tools */
  .tools{display:grid; gap:clamp(1.5rem,3vw,2.25rem)}
  @media (min-width:760px){ .tools{grid-template-columns:repeat(2,1fr)} }
  .tool{
    background:var(--paper-2); border:1px solid var(--rule); border-top:2px solid var(--ink);
    padding:clamp(1.6rem,3vw,2.1rem); display:flex; gap:1.25rem; align-items:flex-start;
    transition:border-top-color .25s ease, transform .25s ease;
  }
  .tool:hover{border-top-color:var(--gold); transform:translateY(-2px)}
  .tool .icon{flex:none; color:var(--ink)}
  .tool h3{font-size:1.15rem; margin-bottom:.45rem}
  .tool p{color:var(--muted); font-size:.95rem}

  /* Structure */
  .roles{display:grid; gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark)}
  @media (min-width:900px){ .roles{grid-template-columns:repeat(3,1fr)} }
  .role{background:var(--ink); padding:clamp(1.6rem,3vw,2rem); display:flex; flex-direction:column; gap:.65rem}
  .role .eyebrow{color:var(--gold)}
  .role h3{font-size:1.15rem}
  .role p{color:var(--muted-dark); font-size:.93rem}

  /* Closing */
  .closing{
    background:linear-gradient(180deg,#0d1826 0%, #0b1420 100%);
    color:#fff; text-align:center; position:relative; overflow:hidden;
  }
  .closing::before{
    content:""; position:absolute; inset:auto 0 -40% 0; height:80%;
    background:radial-gradient(600px 300px at 50% 100%, rgba(200,164,77,.16), transparent 70%);
    pointer-events:none;
  }
  .closing .wrap{position:relative; z-index:1; padding-block:clamp(4.5rem,10vw,7.5rem); max-width:820px}
  .closing .cup{margin:0 auto 2rem; color:var(--gold)}
  .quote{
    font-family:var(--serif); font-size:clamp(1.55rem, 1.15rem + 1.9vw, 2.6rem);
    line-height:1.28; letter-spacing:-.02em; margin-bottom:1.5rem; text-wrap:balance;
  }
  .quote em{font-style:normal; color:var(--gold-soft)}
  .closing p.sub{color:#c3d0de; max-width:56ch; margin:0 auto 2.5rem; font-size:1.05rem}
  .closing-actions{display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center}

  /* Footer */
  .site-footer{background:#08111b; color:var(--muted-dark); border-top:1px solid var(--rule-dark)}
  .footer-top{
    display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem);
    padding-block:clamp(3rem,6vw,4.5rem);
  }
  @media (max-width:760px){ .footer-top{grid-template-columns:1fr} }
  .footer-top p{font-size:.95rem; max-width:46ch; margin-top:1.1rem}
  .footer-contact .eyebrow{color:var(--gold); margin-bottom:1rem; display:block}
  .footer-contact a.mail{
    font-family:var(--serif); font-size:clamp(1.15rem,1rem + .6vw,1.5rem); color:#fff;
    text-decoration:none; border-bottom:1px solid rgba(200,164,77,.5); padding-bottom:3px;
    transition:border-color .2s ease, color .2s ease; word-break:break-word;
  }
  .footer-contact a.mail:hover{color:var(--gold-soft); border-bottom-color:var(--gold)}
  .footer-links{list-style:none; margin:1.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 1.75rem}
  .footer-links a{font-size:.85rem; text-decoration:none; color:var(--muted-dark); transition:color .2s ease}
  .footer-links a:hover{color:#fff}
  .footer-bottom{
    border-top:1px solid var(--rule-dark); padding-block:1.6rem;
    display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
    font-size:.78rem; letter-spacing:.02em;
  }

  :focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}
  .skip{
    position:absolute; left:-9999px; top:0; background:var(--gold); color:#121a25;
    padding:.7rem 1.2rem; font-size:.85rem; font-weight:600; z-index:100;
  }
  .skip:focus{left:0}

  /* ---------- Inner pages (/about/, /gda/) ---------- */
  .page-hero{
    color:#fff;
    background:
      radial-gradient(900px 420px at 80% -10%, rgba(200,164,77,.16), transparent 62%),
      linear-gradient(180deg, #0b1420 0%, #101d2e 70%, #0d1826 100%);
  }
  .page-hero .wrap{padding-block:clamp(3.5rem, 8vw, 6rem); max-width:860px}
  .page-hero .eyebrow{margin-bottom:1.25rem}
  .page-hero h1{font-size:clamp(2rem, 1.3rem + 3vw, 3.4rem); letter-spacing:-.025em; margin-bottom:1.25rem; text-wrap:balance}
  .page-hero .lede{font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem); color:#c3d0de; max-width:60ch}
  .key-dates{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark); margin-top:2.25rem}
  .key-dates > div{background:rgba(255,255,255,.03); padding:1rem 1.1rem}
  .key-dates .k{display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); margin-bottom:.3rem}
  .key-dates .v{display:block; color:#fff; font-weight:600; font-size:.95rem}
  .prose--dark{color:var(--text); max-width:68ch}
  .prose--dark p + p{margin-top:1.1rem}
  .facts{list-style:none; margin:0; padding:0; counter-reset:fact}
  .facts > li{counter-increment:fact; position:relative; padding:1.75rem 0 1.75rem 4rem; border-top:1px solid var(--rule); max-width:76ch}
  .facts > li:last-child{border-bottom:1px solid var(--rule)}
  .facts > li::before{content:counter(fact, decimal-leading-zero); position:absolute; left:0; top:1.6rem; font-family:var(--serif); font-size:1.6rem; color:var(--gold); line-height:1}
  .facts h3{font-size:1.2rem; margin-bottom:.65rem}
  .facts p{color:var(--text)}
  .facts p + p{margin-top:.75rem}
  .facts .src, .note{font-size:.85rem; color:var(--muted)}
  .facts .src a, .note a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px}
  .note{max-width:76ch; margin-top:2rem; padding:1rem 1.2rem; border-left:3px solid var(--gold); background:rgba(200,164,77,.08)}
  .band--ink .prose{margin-top:1.75rem}
  .questions{margin:0; padding:0 0 0 1.6rem; max-width:76ch; color:#d9e2ec}
  .questions li{padding:.6rem 0 .6rem .4rem; border-top:1px solid var(--rule-dark)}
  .questions li::marker{color:var(--gold); font-weight:600}
  .timeline{display:grid; grid-template-columns:max-content 1fr; gap:.9rem 1.5rem; margin:0; max-width:76ch}
  .timeline dt{font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); padding-top:.2rem; white-space:nowrap}
  .timeline dd{margin:0; color:var(--text); padding-bottom:.9rem; border-bottom:1px solid var(--rule)}
  @media (max-width:560px){ .timeline{grid-template-columns:1fr; gap:.2rem} .timeline dd{margin-bottom:.8rem} }
  .pillars--4{grid-template-columns:repeat(4, minmax(0,1fr))}
  @media (max-width:980px){ .pillars--4{grid-template-columns:repeat(2, minmax(0,1fr))} }
  @media (max-width:560px){ .pillars--4{grid-template-columns:1fr} }
  .pillar p a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px}