/* Declaring Our Tech Futures — page layout. Every colour, type, radius and shadow comes from ds/dotf/tokens.css. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg)}

.s-page{min-height:100%;overflow-x:clip}
.s-wrap{box-sizing:border-box;width:100%;max-width:1312px;margin:0 auto;padding-inline:48px}
.s-anchor{scroll-margin-top:112px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.s-skip{position:absolute;left:16px;top:-80px;z-index:50;padding:12px 20px;border-radius:var(--radius-pill);background:var(--black-kite);color:var(--morning-snow);font:var(--text-button);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.s-skip:focus{top:16px;outline:3px solid var(--focus);outline-offset:3px}
.s-link{color:var(--accent-text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.s-link:hover{color:var(--text)}
.s-link:focus-visible,.s-namelink:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.s-ext{display:inline-block;width:.7em;height:.7em;margin-left:.25em;vertical-align:.05em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Header */
.s-header{position:sticky;top:0;z-index:30;padding:16px 0 0}
.s-nav{flex-wrap:nowrap;gap:24px;padding:8px 8px 8px 24px}
.s-brand{display:inline-flex;align-items:center;gap:12px;flex:none}
.s-brand:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.s-mark{display:block;flex:none;height:34px;width:auto;aspect-ratio:1351.07/1351.46}
.s-brand .s-mark{color:var(--deep)}
.s-nav__end{display:flex;align-items:center;gap:8px;flex:none}
.s-btn-deep{background:var(--deep);color:var(--on-deep)}
.s-btn-deep:hover{background:var(--black-kite);color:var(--morning-snow)}
.s-menu-btn{display:none}
.s-menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.s-menu{margin-top:8px;padding:8px;border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-md)}
.s-menu ul{margin:0;padding:0;list-style:none}
.s-menu a{display:flex;align-items:center;min-height:48px;padding:0 20px;border-radius:var(--radius-pill);color:var(--text);text-decoration:none;font:var(--text-label);letter-spacing:.14em;text-transform:uppercase}
.s-menu a:hover{background:var(--surface)}
.s-menu a:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}

/* Type */
.s-h1{margin:0;font:400 112px/100px var(--font-display);letter-spacing:-.025em;text-wrap:balance;max-width:11ch}
.s-h1 em,.s-h2 em{font-style:italic;color:var(--accent-text)}
.s-tagline{margin:0;font:var(--text-quote-lg);letter-spacing:-.01em;max-width:20ch;text-wrap:balance}
.s-h2{margin:0;font:400 72px/70px var(--font-display);letter-spacing:-.015em;text-wrap:balance}
.s-h2--md{font:var(--text-display-md);letter-spacing:-.01em}
.s-lead{margin:0;font:var(--text-lead);max-width:34em}
.s-body{margin:0;font:var(--text-body-lg);max-width:36em}
.s-prose{display:flex;flex-direction:column;gap:24px}

/* Hero */
.s-hero{position:relative;padding:112px 0 128px}
.s-hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:32px;max-width:680px}
.s-hero__copy{display:flex;flex-direction:column;gap:20px;max-width:60ch}
.s-hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.s-hero__art{position:absolute;right:48px;top:72px;width:520px;height:560px;pointer-events:none}
.s-art{position:absolute;display:block}
.s-art--ring{left:20px;top:10px;width:460px;height:460px;border-radius:50%;border:1.5px solid var(--line)}
.s-art--disc{left:150px;top:70px;width:330px;height:330px;border-radius:50%;background:var(--accent-cool)}
.s-art--pill{left:70px;top:150px;width:150px;height:380px;border-radius:var(--radius-pill);background:var(--accent);transform:rotate(-28deg)}
.s-art--dot{left:390px;top:400px;width:110px;height:110px;border-radius:50%;background:var(--deep)}
.s-art--bar{left:250px;top:470px;width:220px;height:1.5px;background:var(--text)}

/* Bands */
.s-band{padding:96px 0}
.s-band--surface{background:var(--surface)}
.s-band--deep{background:var(--deep);color:var(--on-deep)}
.s-band--deep .s-h2 em{color:var(--accent)}
.s-band--deep :focus-visible{outline-color:var(--aqua-mist)!important}
.s-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:start}
.s-callout{margin-top:72px;padding:48px;border-radius:var(--radius-lg);background:var(--bg)}
.s-section-head{margin-bottom:48px}

/* Who we are */
.s-lead-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.s-steward{display:grid;grid-template-columns:184px minmax(0,1fr);gap:32px;align-items:start;padding:40px}
.s-steward__text{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.s-h3-lg{margin:0;font:var(--text-heading);letter-spacing:-.005em}

/* Placeholders */
.s-ph{box-sizing:border-box;display:grid;place-items:center;padding:12px;background:var(--accent-cool);color:var(--on-accent-cool);text-align:center;font:var(--text-caption);letter-spacing:.04em;text-transform:uppercase}
.s-ph--portrait{aspect-ratio:4/5;border-radius:var(--radius-md);width:100%}
.s-ph--round{width:96px;height:96px;border-radius:50%;font-size:10px;line-height:14px;padding:8px}
.s-pending{box-sizing:border-box;width:100%;padding:16px 20px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-md);color:var(--text-muted);font:var(--text-caption);letter-spacing:.04em;text-transform:uppercase}

/* Advisors */
.s-adv-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.s-adv{flex:0 1 calc((100% - 48px) / 3);min-width:0}
.s-adv__top{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.s-adv__name{margin:0;font:400 28px/34px var(--font-display);letter-spacing:-.005em}
.s-namelink{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1.5px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:2px}
.s-namelink:hover{color:var(--accent-text)}
.s-role{margin:0;font:var(--text-caption);letter-spacing:.04em;color:var(--text-muted)}
.s-pq{margin:8px 0 0;padding:24px 0 0;border-top:1.5px solid var(--line)}
.s-pq__mark{display:block;height:36px;font:400 72px/72px var(--font-display);color:var(--accent-text)}
.s-pq p{margin:0;font:italic 400 26px/34px var(--font-display);letter-spacing:-.005em;text-wrap:pretty}
.s-readbio{min-height:44px;margin-top:4px}

/* Coalition */
.s-center{display:flex;flex-direction:column;align-items:center;gap:32px;max-width:720px;margin:0 auto;text-align:center}
.s-center .s-body{max-width:34em}
.s-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;width:100%}
.s-logo{box-sizing:border-box;display:grid;place-items:center;width:240px;height:128px;padding:24px;border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-md);text-decoration:none;transition:box-shadow .18s ease,transform .18s ease}
.s-logo img{display:block;max-width:100%}
.s-logo:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}

/* Advisor carousel dots (phones only) */
.s-dots{display:none}
.s-dot{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.s-dot::before{content:"";display:block;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--border-strong);opacity:.45;transition:width .18s ease,background-color .18s ease,opacity .18s ease}
.s-dot[aria-current="true"]::before{width:28px;background:var(--accent);opacity:1}
.s-dot:focus-visible{outline:3px solid var(--focus);outline-offset:-6px;border-radius:var(--radius-pill)}
.s-logo:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Form section */
.s-form-col{display:flex;flex-direction:column;gap:40px;max-width:640px}

/* Donate */
.s-donate__cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:16px}
.s-band--deep .dotf-btn:hover{background:var(--black-kite);color:var(--morning-snow)}
.s-tbc{font:var(--text-caption);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-cool)}
.s-widget{box-sizing:border-box;display:grid;place-items:center;width:100%;max-width:560px;min-height:160px;margin-top:16px;padding:24px;border:1.5px dashed rgba(245,244,237,.45);border-radius:var(--radius-lg);color:var(--accent-cool);font:var(--text-caption);letter-spacing:.04em;text-transform:uppercase;text-align:center}

/* Donate: hero-scale band, orange action card */
#donate.s-band{padding:128px 0}
.s-donate{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 96px;align-items:center}
.s-donate__intro{display:flex;flex-direction:column;gap:28px}
.s-donate__title{font-size:104px;line-height:96px;letter-spacing:-.025em}
.s-give-wrap{position:relative}
.s-give__disc{position:absolute;right:-56px;top:-72px;width:240px;height:240px;border-radius:50%;background:var(--accent-cool)}
.s-give__ring{position:absolute;left:-48px;bottom:-56px;width:200px;height:200px;border-radius:50%;border:1.5px solid rgba(245,244,237,.4)}
.s-give{position:relative;z-index:1;box-sizing:border-box;display:flex;flex-direction:column;gap:28px;padding:56px;border-radius:var(--radius-lg);background:var(--accent);color:var(--on-accent);box-shadow:0 40px 80px -32px rgba(0,0,0,.55)}
.s-give__lead{margin:0;font:400 40px/46px var(--font-display);letter-spacing:-.01em;text-wrap:balance}
.s-give__btn{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:80px;padding:0 16px 0 36px;border-radius:var(--radius-pill);background:var(--black-kite);color:var(--morning-snow);font:500 16px/20px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background-color .18s ease}
.s-give__btn svg{flex:none;width:48px;height:48px;padding:12px;box-sizing:border-box;border-radius:50%;background:var(--accent);color:var(--on-accent);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.s-give__btn:hover{background:var(--deep)}
.s-give__btn:hover svg{transform:translate(2px,-2px)}
.s-band--deep .s-give :focus-visible{outline:3px solid var(--black-kite)!important;outline-offset:4px}
.s-give__tbc{margin-top:-12px;font:var(--text-caption);letter-spacing:.04em;text-transform:uppercase;color:var(--on-accent)}
.s-give__widget{box-sizing:border-box;display:grid;place-items:center;min-height:120px;padding:20px;border:1.5px dashed rgba(53,30,28,.5);border-radius:var(--radius-md);font:var(--text-caption);letter-spacing:.04em;text-transform:uppercase;text-align:center;color:var(--on-accent)}

/* Footer */
.s-footer{padding:48px 0;background:var(--black-kite);color:var(--morning-snow)}
.s-footer__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.s-footer__brand{display:inline-flex;align-items:center;gap:14px;font:var(--text-subheading);color:var(--morning-snow);text-decoration:none}
.s-footer__brand .s-mark{height:44px;color:var(--accent)}
.s-footer__brand:focus-visible{outline:3px solid var(--aqua-mist);outline-offset:4px;border-radius:8px}
.s-footer__legal{margin:0;font:var(--text-caption);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-cool)}

/* Dialog */
.s-scrim{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:rgba(53,30,28,.62)}
.s-dialog{box-sizing:border-box;position:relative;width:100%;max-width:760px;max-height:calc(100vh - 48px);overflow:auto;padding:48px;border-radius:var(--radius-lg);background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-lg)}
.s-dialog:focus-visible{outline:3px solid var(--focus);outline-offset:-6px}
.s-dialog__head{display:flex;align-items:center;gap:20px;padding-right:56px;margin-bottom:32px}
.s-dialog__title{margin:0;font:var(--text-heading);letter-spacing:-.005em}
.s-dialog__close{position:absolute;top:24px;right:24px;display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--border-strong);border-radius:50%;background:transparent;color:var(--text);cursor:pointer;transition:background-color .18s ease}
.s-dialog__close:hover{background:var(--surface)}
.s-dialog__close:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.s-dialog__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.s-dialog .s-prose{gap:20px}

/* Form */
.s-form{box-sizing:border-box;display:flex;flex-direction:column;gap:28px;width:100%;padding:40px;border-radius:var(--radius-lg);background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-md)}
.s-form .dotf-field__label{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.s-opt{font:var(--text-caption);letter-spacing:.04em;text-transform:none;color:var(--text-muted)}
.s-check{display:flex;align-items:flex-start;gap:14px;min-height:44px;font:var(--text-body);cursor:pointer}
.s-check input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--deep);cursor:pointer}
.s-check input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.s-form .dotf-btn{align-self:flex-start;min-width:160px}
.s-form__note{margin:-12px 0 0;font:var(--text-caption);color:var(--text-muted)}
/* Spam honeypot: kept off-screen (not display:none, which some bots skip) */
.s-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.s-success{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%;padding:48px 40px;border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-md)}
.s-success:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.s-success__icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent-cool);color:var(--on-accent-cool)}
.s-success__icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.s-success p{margin:0;font:var(--text-heading);letter-spacing:-.005em;text-wrap:balance}

/* Responsive */
@media (max-width:1100px){
  .s-hero__art{display:none}
  .s-lead-grid{grid-template-columns:minmax(0,1fr)}
  .s-adv{flex-basis:calc((100% - 24px) / 2)}
  .s-donate{grid-template-columns:minmax(0,1fr);gap:56px}
  .s-donate__title{font-size:80px;line-height:76px}
}
@media (max-width:760px){
  .s-wrap{padding-inline:20px}
  .s-anchor{scroll-margin-top:96px}
  .s-header{padding-top:12px}
  .s-nav{gap:8px;padding:6px 6px 6px 18px}
  .s-brand-text{display:none}
  .s-brand .s-mark{height:32px}
  .s-nav__end{gap:6px}
  .s-nav .dotf-btn--sm{padding:0 14px;font-size:11px;letter-spacing:.1em}
  .s-hero{padding:64px 0 72px}
  .s-hero__inner{gap:24px}
  .s-h1{font-size:56px;line-height:56px}
  .s-tagline{font-size:32px;line-height:38px}
  .s-hero__actions{flex-direction:column;align-items:stretch;width:100%}
  .s-hero__actions .dotf-btn{width:100%}
  .s-band{padding:64px 0}
  .s-split{grid-template-columns:minmax(0,1fr);gap:24px}
  .s-h2{font-size:44px;line-height:46px}
  .s-h2--md{font-size:36px;line-height:40px}
  .s-lead{font-size:20px;line-height:30px}
  .s-body{font-size:17px;line-height:27px}
  .s-callout{margin-top:48px;padding:28px 24px}
  .s-section-head{margin-bottom:32px}
  .s-steward{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px 24px}
  .s-steward .s-ph--portrait{max-width:200px}
  .s-adv-grid{flex-wrap:nowrap;justify-content:flex-start;gap:16px;margin-inline:-20px;padding:8px 20px 32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}
  .s-adv-grid::-webkit-scrollbar{display:none}
  .s-adv-grid::after{content:"";flex:0 0 4px}
  .s-adv{flex:0 0 84%;scroll-snap-align:start}
  .s-adv.dotf-card{padding:28px 24px}
  .s-dots{display:flex;justify-content:center;margin-top:-8px}
  .s-logo{width:calc(50% - 12px);height:112px}
  .s-form{padding:28px 20px}
  .s-form .dotf-btn,.s-donate__cta .dotf-btn{align-self:stretch;width:100%}
  .s-donate__cta{align-items:stretch}
  .s-success{padding:36px 24px}
  .s-success p{font-size:28px;line-height:34px}
  .s-scrim{padding:12px;align-items:end}
  .s-dialog{max-height:calc(100vh - 24px);padding:28px 24px}
  .s-dialog__close{top:16px;right:16px}
  .s-dialog__head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:24px}
  .s-footer__row{flex-direction:column;align-items:flex-start}
  #donate.s-band{padding:80px 0 88px}
  .s-donate{gap:48px}
  .s-donate__title{font-size:56px;line-height:56px}
  .s-give{padding:32px 24px;gap:24px}
  .s-give__lead{font-size:30px;line-height:36px}
  .s-give__btn{min-height:72px;padding:0 12px 0 24px;font-size:14px;letter-spacing:.1em}
  .s-give__btn svg{width:44px;height:44px}
  .s-give__disc{width:150px;height:150px;right:-36px;top:-48px}
  .s-give__ring{width:140px;height:140px;left:-36px;bottom:-40px}
}