:root{
    --ink:#05122A; --plum:#3B0A3A; --paper:#EBEBEB; --paper-dim:#AFB3BC;
    --amber:#D97706; --line:rgba(235,235,235,.13);
    --header-h:4.1rem;
    --shell:min(1240px, 92vw);
    --e-out:cubic-bezier(.16,1,.3,1);
    --e-inout:cubic-bezier(.76,0,.24,1);
    --ease:cubic-bezier(.33,1,.68,1);
    --f-display:"Anton","Arial Narrow",sans-serif;
    --f-label:"Bebas Neue","Oswald",sans-serif;
    --f-body:"Inter","Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box; margin:0; min-width:0}
  html{scroll-padding-top:5rem; -webkit-text-size-adjust:100%; scrollbar-width:none; -ms-overflow-style:none}
  html::-webkit-scrollbar{width:0; height:0; display:none}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:smooth} }
  a,button,input,label,summary{-webkit-tap-highlight-color:transparent}
  /* ---- Lenis smooth scroll (required by the library) ---------------------
     Without these, Lenis hijacks the wheel while the browser still runs its own
     native scroll underneath — which is exactly what makes it feel janky. */
  html.lenis, html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto !important}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
  .lenis.lenis-stopped{overflow:hidden}
  .lenis.lenis-smooth iframe{pointer-events:none}

  /* removes the ~300ms double-tap delay on touch, and keeps the tap highlight ours */
  a,button,summary,label,input[type=submit],.btn{touch-action:manipulation}


  .skip{position:fixed; top:0; left:0; z-index:200; background:var(--amber); color:var(--ink);
    padding:.85em 1.25em; font-family:var(--f-label); letter-spacing:.11em; text-transform:uppercase;
    text-decoration:none; transform:translateY(-130%); transition:transform .2s ease}
  .skip:focus{transform:none; outline:2px solid var(--ink); outline-offset:-4px}
  html,body{overflow-x:clip; max-width:100%}
  body{background:var(--ink); color:var(--paper); font-family:var(--f-body);
    font-size:clamp(1rem,.5vw + .9rem,1.12rem); line-height:1.7; -webkit-font-smoothing:antialiased}
  body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:
    radial-gradient(120% 75% at 12% -5%, rgba(59,10,58,.32), transparent 58%),
    radial-gradient(95% 65% at 92% 105%, rgba(59,10,58,.26), transparent 55%), var(--ink)}
  body::after{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.055;
    mix-blend-mode:overlay; background-repeat:repeat; background-size:150px 150px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  img{max-width:100%; height:auto; display:block}
  a{color:inherit}
  ::selection{background:var(--amber); color:var(--ink)}
  a:focus-visible,button:focus-visible,summary:focus-visible,
  input:focus-visible,textarea:focus-visible,.btn:focus-visible{
    outline:3px solid var(--amber); outline-offset:3px}
  /* press feedback — small, but it's what makes a UI feel responsive rather than flat */
  .btn:active{transform:translateY(1px)}

  h1{font-family:var(--f-display); font-weight:400; text-transform:uppercase; line-height:.94;
    letter-spacing:.005em; font-size:clamp(2.6rem,7vw,4.6rem); text-wrap:balance}
  h2{font-family:var(--f-display); font-weight:400; text-transform:uppercase; line-height:.96;
    font-size:clamp(1.9rem,4.5vw,3rem)}
  p{max-width:56ch; text-wrap:pretty}

  .shell{width:var(--shell); margin-inline:auto}

  .btn{font-family:var(--f-label); letter-spacing:.13em; text-transform:uppercase; font-size:1.08rem;
    text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
    padding:1.1em 2.1em; min-height:52px; border:1.5px solid var(--amber); color:var(--amber); background:transparent;
    transition:background-color .3s var(--ease),color .3s var(--ease)}
  .btn:hover,.btn:focus-visible{background-color:var(--amber); color:var(--ink); outline:none}
  .btn--solid{background-color:var(--amber); color:var(--ink)}

  /* NOTE: never put url(#filter) in backdrop-filter — Chrome drops the whole
     declaration, leaving a see-through bar. See index.html for the full note. */
  .site-header{position:sticky; top:0; z-index:40; isolation:isolate;
    background:rgba(5,18,42,.94);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    backdrop-filter:blur(18px) saturate(1.4);
    border-bottom:1px solid rgba(235,235,235,.22);
    box-shadow:inset 0 1px 0 rgba(235,235,235,.26), inset 0 -1px 0 rgba(235,235,235,.05),
      0 1px 0 rgba(5,18,42,.5), 0 12px 30px -14px rgba(5,18,42,.5)}
  .site-header .logo,.site-header .nav a{filter:drop-shadow(0 1px 3px rgba(5,18,42,.6))}
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .site-header{background:rgba(5,18,42,.94)}
  }
  /* The WordPress admin bar is position:fixed at the top of the viewport; a sticky header
     at top:0 sticks underneath it and clips. Start it below the bar (32px / 46px phone). */
  body.admin-bar .site-header{top:32px}
  @media screen and (max-width:782px){
    body.admin-bar .site-header{top:46px}
  }
  .site-header__in{position:relative; z-index:1; width:var(--shell); margin-inline:auto;
    display:flex; justify-content:space-between; align-items:center;
    min-height:var(--header-h); padding-block:.55rem}
  .logo{height:26px; width:auto}
  /* The logo image is 26px tall, so the link around it was a 26px-high target. Grow the
     hit area to 44px without changing how the logo looks. */
  .site-header__in > a:has(> .logo){display:inline-flex; align-items:center; min-height:44px}
  .nav{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem 1.6rem;
    font-family:var(--f-label); letter-spacing:.11em; text-transform:uppercase; font-size:1rem}
  .nav a{position:relative; text-decoration:none; opacity:.8; transition:opacity .15s; padding-bottom:.15em}
  .nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--amber);
    transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease)}
  .nav a:hover{opacity:1}
  .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
  .nav a[aria-current="page"]{opacity:1}
  /* 44x44 is the smallest comfortable thumb target; the bars stay 22px wide. */
  .nav__toggle{display:none; background:none; border:0; padding:.5rem; margin:-.5rem -.5rem -.5rem 0;
    cursor:pointer; color:var(--paper); position:relative; z-index:62;
    min-width:44px; min-height:44px; flex-direction:column; align-items:center; justify-content:center}
  .nav__toggle span{display:block; width:22px; height:2px; background:currentColor; transition:transform .3s var(--e-out),opacity .2s}
  .nav__toggle span + span{margin-top:5px}
  .nav__toggle:hover span{background:var(--amber)}
  .nav__toggle:focus-visible{outline:3px solid var(--amber); outline-offset:2px}
  body.nav-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav__toggle span:nth-child(2){opacity:0}
  body.nav-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav__scrim{position:fixed; inset:0; z-index:60; background:rgba(5,18,42,.6);
    opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s}
  @media (max-width:720px){
    .nav__toggle{display:flex}
    .nav{position:fixed; top:0; right:0; z-index:61; width:min(80vw,320px);
      height:100vh; height:100dvh;
      flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:stretch; gap:0;
      background:var(--ink); border-left:1px solid var(--line); padding:5.2rem 1.6rem 2rem;
      font-size:1.2rem; transform:translateX(100%); transition:transform .4s var(--e-out);
      overflow-y:auto}
    .nav a{padding:1rem 0; border-bottom:1px solid var(--line); opacity:1}
    .nav a::after{display:none}
    body.nav-open .nav{transform:none}
    body.nav-open .nav__scrim{opacity:1; visibility:visible}
    /* The header is a stacking context (isolation:isolate) at z-index:40, and the slide-in
       panel lives inside it — so the page-level scrim at z-index:60 was painting over the
       panel and eating every tap. Lift the whole header above the scrim while the menu is
       open; the scrim still covers the page behind it. */
    body.nav-open .site-header{z-index:70}
    body.nav-open{overflow:hidden}
  }
  .pagex{position:fixed; inset:0; z-index:120; overflow:hidden; pointer-events:none;
    display:grid; place-items:center; will-change:opacity, transform;
    background:rgba(7,20,42,.6);
    -webkit-backdrop-filter:blur(26px) saturate(1.65) brightness(1.03);
    backdrop-filter:blur(26px) saturate(1.65) brightness(1.03);
    box-shadow:inset 0 0 140px 20px rgba(5,18,42,.55);
    opacity:1; transform:scale(1.015);
    transition:opacity 1.15s cubic-bezier(.4,0,.2,1), transform 1.5s cubic-bezier(.33,1,.68,1)}
  /* Failsafe: if the script ever fails to run, CSS alone clears the overlay. A stuck
     page-transition makes the whole site unusable, so this is not left to JS. */
  @keyframes pagex-failsafe{to{opacity:0; visibility:hidden}}
  .pagex{animation:pagex-failsafe .4s linear 3s forwards}
  .pagex.leave{opacity:0; visibility:hidden; transform:scale(1.04);
    transition:opacity 1.15s cubic-bezier(.4,0,.2,1), transform 1.5s cubic-bezier(.33,1,.68,1),
      visibility 0s linear 1.15s}
  .pagex__waves{position:absolute; inset:0; width:100%; height:100%}
  .pagex__w{fill:none; stroke:var(--amber); stroke-width:1.6; vector-effect:non-scaling-stroke;
    transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}
  .pagex__w2{opacity:.6}
  .pagex__w3{opacity:.42}
  .pagex__logo{position:relative; width:min(280px,58vw); height:auto;
    filter:drop-shadow(0 3px 18px rgba(5,18,42,.7));
    opacity:0; transform:translateY(14px) scale(.98);
    transition:opacity 1s ease .35s, transform 1.3s var(--e-out) .35s}
  .pagex:not(.leave) .pagex__logo{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){ .pagex{display:none} }

  .intro{padding-top:clamp(8rem,16vw,11rem); padding-bottom:clamp(3rem,7vw,5rem)}
  @media (max-width:600px){
    h1{font-size:clamp(2.4rem,11vw,3.4rem)}
    .intro{padding-top:clamp(2.5rem,9vw,4rem)}
    .intro p{font-size:1.02rem; line-height:1.6}
    .gallery{gap:1.8rem}
    .g-item figure{transform:none}
    .cta-band{padding-block:clamp(3.5rem,12vw,6rem)}
    .cta-band .lead{font-size:1.02rem}
    .site-footer__grid{gap:2.2rem}
  }
  .intro p{margin-top:1.4rem; color:var(--paper-dim)}

  .gallery{padding-bottom:clamp(5rem,11vw,9rem);
    display:grid; grid-template-columns:1fr; gap:2.6rem}
  @media (min-width:640px){ .gallery{grid-template-columns:1fr 1fr; gap:3rem 2.6rem} }
  @media (min-width:1040px){ .gallery{grid-template-columns:1fr 1fr 1fr; gap:3.4rem 2.8rem} }
  .g-item figure{margin:0; overflow:hidden; background:#0b1c3a; transition:transform .5s var(--ease)}
  .g-item:nth-child(3n+1) figure{transform:rotate(-.5deg)}
  .g-item:nth-child(3n+2) figure{transform:rotate(.45deg)}
  .g-item:nth-child(3n) figure{transform:rotate(.3deg)}
  .g-item img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .6s var(--ease)}
  @media (hover:hover){
    .g-item:hover figure{transform:rotate(0)}
    .g-item:hover img{transform:scale(1.02)}
  }
  .g-item figcaption{font-family:var(--f-label); letter-spacing:.14em; text-transform:uppercase;
    font-size:.9rem; color:var(--paper-dim); margin-top:.95rem; text-align:center}

  .cta-band{background:radial-gradient(100% 78% at 50% -8%, #33103A 0%, var(--ink) 58%);
    padding-block:clamp(4.5rem,10vw,8rem); text-align:center}
  .cta-band h2{max-width:16ch; margin:0 auto 1.1rem}
  .cta-band .lead{color:var(--paper-dim)}

  .voices-band{padding-block:clamp(3rem,8vw,6rem); border-top:1px solid var(--line)}
  .voices-band h2{text-align:center; margin:0 0 clamp(2rem,5vw,3rem)}
  .voices{display:grid; gap:1.4rem}
  @media (min-width:640px){ .voices{grid-template-columns:repeat(3,1fr); gap:1.6rem} }
  .voice{margin:0; border:1px solid var(--line); padding:clamp(1.5rem,3.2vw,2rem);
    display:flex; flex-direction:column; gap:1.15rem}
  .voice p{margin:0; font-size:1.03rem; line-height:1.62; color:var(--paper)}
  .voice p::before{content:"\201C"; color:var(--amber); margin-right:.1em}
  .voice p::after{content:"\201D"; color:var(--amber); margin-left:.05em}
  .voice__by{margin-top:auto; font-family:var(--f-label); letter-spacing:.08em;
    text-transform:uppercase; font-size:.82rem; color:var(--paper-dim)}
  .voice__by b{display:block; font-weight:400; font-size:1rem; letter-spacing:.06em; color:var(--amber); margin-bottom:.15rem}

  .site-footer{position:relative; isolation:isolate;
    background:linear-gradient(180deg, rgba(20,38,72,.52), rgba(7,19,42,.78));
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    backdrop-filter:blur(14px) saturate(1.4);
    border-top:1px solid rgba(235,235,235,.18);
    box-shadow:inset 0 1px 0 rgba(235,235,235,.22);
    padding-block:clamp(3.5rem,8vw,5.5rem) 1.8rem}
  .site-footer__grid{position:relative; z-index:1; width:var(--shell); margin-inline:auto;
    display:grid; gap:2.8rem; grid-template-columns:1fr}
  @media (min-width:900px){ .site-footer__grid{grid-template-columns:1.5fr 1fr 1.1fr; gap:3rem} }
  .ft-brand p{color:var(--paper-dim); margin-top:1.2rem; max-width:34ch; font-size:.97rem; line-height:1.6}
  .ft-col{display:flex; flex-direction:column; gap:.75rem}
  .ft-h{font-family:var(--f-label); letter-spacing:.17em; text-transform:uppercase; color:var(--paper);
    font-size:.9rem; margin-bottom:.35rem}
  .ft-col a{color:var(--paper-dim); text-decoration:none; font-size:.97rem}
  .ft-col a:hover{color:var(--paper)}

  /* Touch targets — same treatment as the home page. On a phone these footer rows were
     26px; accurate tapping needs about 44px. Scoped to touch/small screens so the desktop
     layout is unchanged. Links inside a sentence are left alone: padding them would break
     the line spacing of the paragraph around them. */
  @media (max-width:720px), (pointer:coarse){
    /* The links carry their own height now, so the column gap drops to near zero and the
       non-link items keep their breathing room explicitly. */
    .ft-col{gap:.1rem}
    .ft-col a{display:flex; align-items:center; min-height:44px}
    .ft-col .ft-h{margin-bottom:.5rem}
    .ft-col > span:not(.ft-h){margin-top:.55rem}
    .ft-legal + a{display:inline-flex; align-items:center; min-height:44px}
  }
  .site-footer__base{position:relative; z-index:1; width:var(--shell); margin-inline:auto;
    display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center;
    margin-top:clamp(3.5rem,8vw,5.5rem); padding-top:1.6rem; border-top:1px solid var(--line)}
  .site-footer__base small{color:var(--paper-dim); font-size:.85rem}
  .site-footer__base a{font-family:var(--f-label); letter-spacing:.11em; text-transform:uppercase;
    font-size:.9rem; text-decoration:none; opacity:.78}
  .ft-legal{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.3rem; margin:0}
  .ft-legal a{font-family:var(--f-body); letter-spacing:normal; text-transform:none; color:var(--paper-dim);
    text-decoration:none; font-size:.85rem; opacity:1; border-bottom:1px solid transparent; transition:color .15s, border-color .15s}
  .ft-legal a:hover{color:var(--paper); border-color:var(--amber)}

  .rw{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em}
  .rw > span{display:inline-block; transform:translateY(106%); transition:transform .7s var(--ease)}
  .in .rw > span, .reveal.in .rw > span{transform:none}
  @media (prefers-reduced-motion:reduce){ .rw > span{transform:none} }

  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0; transform:translateY(14px); transition:opacity .8s ease,transform .85s var(--ease)}
    .reveal.in{opacity:1; transform:none}
  }

  /* ---- phone / touch tuning — same reasoning as the home page ----------------
     The sticky header re-blurs its strip on every scroll frame while sitting at
     94% opaque, so the blur costs frames and shows almost nothing. Drop it, take
     the background to 97%, and give the footer and transition pane the same
     treatment. */
  @media (pointer:coarse), (max-width:720px){
    .site-header{background:rgba(5,18,42,.97);
      -webkit-backdrop-filter:none; backdrop-filter:none}
    .site-footer{-webkit-backdrop-filter:none; backdrop-filter:none}
    .pagex{-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  }