/* Civic Stage — a quiet editorial system, with photography at its centre. */
  :root  {
    --color-ink:#141413;
    --color-ink-soft:#222220;
    --color-ink-line:#363633;
    --color-paper:#f7f6f2;
    --color-paper-strong:#fff;
    --color-red:#e62b1e;
    --color-red-dark:#bb2319;
    --color-line:#dcdad3;
    --color-muted:#62625c;
    --color-muted-on-ink:#b8b8b0;
    --font-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
    --font-text:'DM Sans',Arial,sans-serif;
    --container:1280px;
    --gutter:48px;
    --ease:cubic-bezier(.22,1,.36,1);
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-6:24px;
    --space-8:32px;
    --space-12:48px;
    --space-16:64px;
    --space-24:96px;
  }
  *,*::before,*::after {
    box-sizing:border-box
  }
  * {
    margin:0
  }
  html {
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
    scroll-padding-top:100px
  }
  body {
    font-family:var(--font-text);
    font-size:16px;
    line-height:1.65;
    color:var(--color-ink);
    background:var(--color-paper);
    -webkit-font-smoothing:antialiased
  }
  img {
    display:block;
    max-width:100%
  }
  a {
    color:inherit
  }
  ul,ol {
    padding:0;
    list-style:none
  }
  button {
    font:inherit;
    color:inherit;
    background:none;
    border:0;
    cursor:pointer
  }
  figure {
    margin:0
  }
  ::selection {
    background:var(--color-red);
    color:white
  }
  :focus-visible {
    outline:3px solid var(--color-red);
    outline-offset:5px
  }
  .on-ink :focus-visible {
    outline-color:white
  }
  .sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
  }
  .skip-link {
    position:fixed;
    top:12px;
    left:12px;
    z-index:100;
    padding:12px 20px;
    background:var(--color-paper);
    color:var(--color-ink);
    transform:translateY(-160%)
  }
  .skip-link:focus {
    transform:none
  }
  .container {
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:var(--gutter)
  }
  .grid-12 {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:40px;
    align-items:start
  }
  .grid-12>* {
    min-width:0
  }
  .span-4 {
    grid-column:span 4
  }
  .span-5 {
    grid-column:span 5
  }
  .span-7 {
    grid-column:span 7
  }
  .span-8 {
    grid-column:span 8
  }
  .section {
    padding-block:100px
  }
  .on-ink {
    background:var(--color-ink);
    color:var(--color-paper)
  }
  .on-paper {
    background:var(--color-paper);
    color:var(--color-ink)
  }
  .label {
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--color-muted);
    font-size:11px;
    line-height:1.4;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-bottom:22px
  }
  .label::before {
    content:'';
    width:22px;
    height:2px;
    background:var(--color-red);
    flex:none
  }
  .on-ink .label {
    color:var(--color-muted-on-ink)
  }
  .title-md {
    font-family:var(--font-text);
    font-size:clamp(30px,3.3vw,44px);
    font-weight:600;
    line-height:1.12;
    letter-spacing:-.045em;
    text-wrap:balance;
    max-width:15ch
  }
  p {
    text-wrap:pretty
  }
  .lead {
    font-size:19px;
    max-width:42ch
  }
  .muted {
    color:var(--color-muted)
  }
  .on-ink .muted {
    color:var(--color-muted-on-ink)
  }
  .btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--color-red);
    color:#fff;
    font-size:14px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:-.01em;
    text-decoration:none;
    padding:17px 24px;
    min-height:48px;
    border-radius:3px;
    transition:background .25s ease,transform .25s var(--ease)
  }
  .btn:hover {
    background:var(--color-red-dark);
    transform:translateY(-2px)
  }
  .btn:active {
    transform:translateY(1px)
  }
  .link-arrow {
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:var(--color-ink);
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    text-decoration:none;
    padding-block:10px;
    min-height:44px;
    transition:color .25s ease
  }
  .link-arrow svg {
    color:var(--color-red);
    transition:transform .35s var(--ease)
  }
  .link-arrow:hover {
    color:var(--color-red-dark)
  }
  .link-arrow:hover svg {
    transform:translateX(4px)
  }
  .on-ink .link-arrow {
    color:var(--color-paper)
  }
  .on-ink .link-arrow:hover {
    color:white
  }
  .icon {
    width:24px;
    height:24px;
    flex:none
  }
  .site-header {
    position:sticky;
    top:0;
    z-index:60;
    border-bottom:1px solid #ffffff14;
    background:#141413;
    transition:background .25s ease
  }
  .site-header.is-scrolled {
    background:rgba(20,20,19,.96);
    backdrop-filter:blur(14px)
  }
  .site-header .container {
    display:flex;
    align-items:center;
    gap:30px;
    min-height:88px
  }
  .site-logo {
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    margin-right:auto;
    flex-shrink:0
  }
  .site-logo img {
    width:196px;
    height:auto
  }
  .site-nav ul {
    display:flex;
    align-items:center;
    gap:24px
  }
  .site-nav a {
    display:block;
    color:#d0d0c9;
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
    text-decoration:none;
    padding-block:12px;
    transition:color .25s ease
  }
  .site-nav a:hover {
    color:white
  }
  .site-nav a[aria-current="page"] {
    color:white;
    text-decoration:underline;
    text-decoration-color:var(--color-red);
    text-decoration-thickness:3px;
    text-underline-offset:8px
  }
  .site-header .btn {
    font-size:12px;
    padding:14px 18px;
    min-height:44px;
    white-space:nowrap
  }
  .nav-toggle {
    display:none;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px
  }
  .nav-toggle .icon-close {
    display:none
  }
  .nav-toggle[aria-expanded=true] .icon-open {
    display:none
  }
  .nav-toggle[aria-expanded=true] .icon-close {
    display:block
  }
  .hero {
    position:relative;
    isolation:isolate;
    overflow:hidden
  }
  .hero-grid {
    display:grid;
    grid-template-columns:5fr 7fr;
    min-height:650px;
    max-width:1600px;
    margin-inline:auto
  }
  .hero-copy {
    align-self:center;
    position:relative;
    z-index:2;
    padding:68px 30px 80px max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)))
  }
  .hero-title {
    font-family:var(--font-display);
    font-size:clamp(72px,7.7vw,112px);
    font-weight:600;
    line-height:.94;
    letter-spacing:-.025em
  }
  .hero-title .line,.hero-title .line-inner {
    display:block
  }
  .dot-red {
    color:var(--color-red)
  }
  .hero-sub {
    margin-top:28px;
    font-size:17px;
    line-height:1.7;
    color:var(--color-muted-on-ink);
    max-width:33ch
  }
  .hero-actions {
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 24px
  }
  .hero-eyebrow {
    margin-bottom:26px;
    font-size:10px
  }
  .hero-media {
    position:relative;
    min-height:100%;
    overflow:hidden
  }
  .hero-media img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:65% 45%
  }
  .hero-media::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#141413 0%,rgba(20,20,19,.35) 14%,transparent 40%),linear-gradient(0deg,rgba(20,20,19,.25),transparent 35%);
    pointer-events:none
  }
  .frame {
    display:block;
    overflow:hidden;
    background:var(--color-ink-soft);
    border-radius:3px
  }
  .frame img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .65s var(--ease)
  }
  .frame-hover:hover .frame img,a.frame-hover:hover img {
    transform:scale(1.035)
  }
  section[aria-labelledby=next-event-title] .grid-12 {
    align-items:center
  }
  .event-details {
    display:grid;
    gap:14px;
    margin-top:26px
  }
  .event-details li {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:16px;
    color:var(--color-muted)
  }
  .event-details .icon {
    width:19px;
    height:19px;
    color:var(--color-muted)
  }
  .event-panel .btn {
    margin-top:30px
  }
  .event-panel .title-md {
    max-width:12ch
  }
  .event-media {
    aspect-ratio:16/10
  }
  .impact-section {
    padding-block:64px;
    background:#eeede7;
    border-block:1px solid var(--color-line)
  }
  .impact-section .title-md {
    font-size:32px
  }
  .impact-stats {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px
  }
  .impact-stats>div {
    border-left:1px solid #cccac1;
    padding-left:24px
  }
  .impact-stats .icon {
    display:none
  }
  .impact-stats dd,.impact-stats dt {
    margin:0
  }
  .stat-value {
    display:block;
    font-family:var(--font-display);
    font-size:48px;
    font-weight:600;
    line-height:1;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums
  }
  .stat-fixed {
    display:inline;
    font:500 13px var(--font-text);
    letter-spacing:0
  }
  .stat-label {
    display:block;
    font-size:13px;
    font-weight:600;
    margin-top:12px!important
  }
  .stat-note {
    font-size:13px;
    line-height:1.65;
    color:var(--color-muted);
    max-width:25ch;
    margin-top:14px!important
  }
  .impact-stats .link-arrow {
    margin-top:14px
  }
  .talk-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px
  }
  .talk-card .frame {
    aspect-ratio:1/1
  }
  .talk-card h3 {
    margin-top:22px;
    font-size:24px;
    line-height:1.22;
    font-weight:600;
    letter-spacing:-.035em;
    max-width:24ch;
    text-wrap:balance
  }
  .speaker {
    margin-top:10px;
    font-size:14px;
    color:var(--color-muted)
  }
  .talk-card .link-arrow {
    margin-top:13px
  }
  .purpose {
    display:grid;
    grid-template-columns:5fr 7fr;
    overflow:hidden
  }
  .purpose-copy {
    align-self:center;
    padding:88px 48px 94px max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)))
  }
  .purpose-copy .title-md {
    font-size:clamp(38px,4vw,56px)
  }
  .purpose-copy p {
    margin-top:28px;
    font-size:17px;
    line-height:1.8;
    color:var(--color-muted-on-ink);
    max-width:38ch
  }
  .purpose-media {
    position:relative;
    min-height:480px
  }
  .purpose-media img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 60%
  }
  .route-list {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px
  }
  .route {
    border-top:1px solid var(--color-line);
    padding-top:24px;
    display:flex;
    flex-direction:column;
    align-items:flex-start
  }
  .route>.icon {
    color:var(--color-red);
    width:24px;
    height:24px;
    margin-bottom:22px
  }
  .route h3 {
    font-size:22px;
    font-weight:500;
    letter-spacing:-.03em
  }
  .route p {
    margin-top:10px;
    font-size:14px;
    line-height:1.75;
    color:var(--color-muted);
    max-width:28ch;
    flex:1
  }
  .route .link-arrow {
    margin-top:20px;
    font-size:13px;
    gap:8px
  }
  .news-section {
    padding-top:0
  }
  .news-section>.container {
    padding-top:72px;
    position:relative
  }
  .news-section>.container::before {
    content:'';
    position:absolute;
    top:0;
    left:var(--gutter);
    right:var(--gutter);
    height:1px;
    background:var(--color-line)
  }
  .news-list {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px
  }
  .news-card .frame {
    aspect-ratio:4/3
  }
  .news-card time {
    display:block;
    margin-top:20px;
    font-size:11px;
    color:var(--color-muted)
  }
  .news-card h3 {
    margin-top:8px;
    font-size:18px;
    font-weight:500;
    letter-spacing:-.025em;
    line-height:1.4;
    text-wrap:balance
  }
  .news-card .link-arrow {
    margin-top:12px;
    font-size:13px
  }
  section[aria-labelledby=sponsor-title] {
    background:#eeede7;
    padding-block:64px
  }
  .sponsor-mark {
    background:var(--color-ink);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    border-radius:3px
  }
  .sponsor-mark img {
    width:220px;
    height:auto
  }
  .sponsor-note {
    font-size:15px;
    color:var(--color-muted);
    max-width:36ch
  }
  .sponsor-block {
    width:100%
  }
  #sponsor-title {
    font-size:32px
  }
  .footer-main {
    display:grid;
    grid-template-columns:5fr 4fr 3fr;
    gap:56px;
    padding-block:72px 56px
  }
  .footer-brand img {
    width:210px;
    height:auto
  }
  .footer-brand p {
    margin-top:22px;
    font-size:13px;
    line-height:1.8;
    color:var(--color-muted-on-ink);
    max-width:36ch
  }
  .footer-heading {
    font-size:10px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--color-muted-on-ink);
    margin-bottom:16px
  }
  .footer-nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 24px
  }
  .footer-nav a {
    display:inline-block;
    text-decoration:none;
    color:#deded8;
    font-size:13px;
    padding-block:3px
  }
  .footer-nav a:hover,.footer-legal a:hover {
    color:white;
    text-decoration:underline;
    text-underline-offset:4px
  }
  .social-list {
    display:flex;
    gap:8px
  }
  .social-list a {
    display:inline-flex;
    width:38px;
    height:44px;
    align-items:center;
    justify-content:center;
    color:#deded8;
    transition:color .25s ease
  }
  .social-list a:hover {
    color:var(--color-red)
  }
  .social-list svg {
    width:18px;
    height:18px
  }
  .footer-legal {
    border-top:1px solid var(--color-ink-line);
    padding-block:24px 32px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:space-between;
    align-items:center;
    font-size:11px;
    color:var(--color-muted-on-ink)
  }
  .footer-legal nav ul {
    display:flex;
    gap:24px
  }
  .footer-legal a {
    text-decoration:none
  }
  .license {
    flex-basis:100%;
    order:3
  }
  /* Content remains visible if enhancement cannot initialise. */
  .reveal {
    opacity:1;
    transform:none
  }
  .reveal.is-pending {
    opacity:0;
    transform:translateY(16px)
  }
  .reveal.is-ready {
    transition:opacity .65s var(--ease),transform .65s var(--ease)
  }
  @media(min-width:1600px) {
    .hero-copy {
      padding-left:calc((1600px - var(--container))/2 + var(--gutter))
    }
  }
  @media(max-width:1150px) {
    :root {
      --gutter:32px
    }
    .site-header .container {
      gap:22px
    }
    .site-nav ul {
      gap:16px
    }
    .site-logo img {
      width:174px
    }
    .site-header .btn {
      font-size:11px;
      padding-inline:14px
    }
    .grid-12 {
      gap:28px
    }
    .hero-grid {
      min-height:600px
    }
    .hero-title {
      font-size:90px
    }
    .hero-actions {
      align-items:flex-start;
      flex-direction:column
    }
    .stat-value {
      font-size:40px
    }
    .impact-stats {
      gap:16px
    }
    .impact-stats>div {
      padding-left:16px
    }
  }
  @media(max-width:1000px) {
    .js .nav-toggle {
      display:inline-flex
    }
    .js .site-nav ul {
      display:none;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      padding:16px var(--gutter) 24px;
      background:var(--color-ink);
      border-top:1px solid var(--color-ink-line)
    }
    .js .site-nav ul.is-open {
      display:flex
    }
    .site-nav a {
      padding-block:14px
    }
    .site-nav li {
      border-bottom:1px solid var(--color-ink-line)
    }
    .site-header .container {
      min-height:76px
    }
    .site-header .btn {
      font-size:12px
    }
    .hero-title {
      font-size:80px
    }
    .hero-copy {
      padding-right:16px
    }
    .hero-eyebrow {
      font-size:9px
    }
    .hero-sub {
      font-size:16px
    }
    .section {
      padding-block:76px
    }
    .grid-12 {
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:40px
    }
    .span-4,.span-8 {
      grid-column:1/-1
    }
    .span-5,.span-7 {
      grid-column:span 1
    }
    .title-md {
      max-width:22ch
    }
    .impact-section {
      padding-block:52px
    }
    .impact-stats {
      gap:32px
    }
    .stat-value {
      font-size:48px
    }
    .news-section {
      padding-top:0
    }
    .purpose-copy {
      padding:64px 32px
    }
    .purpose-copy p {
      font-size:16px
    }
    .purpose-media {
      min-height:440px
    }
    .footer-main {
      grid-template-columns:1.2fr 1fr;
      gap:36px
    }
    .footer-main>div:last-child {
      grid-column:2;
      grid-row:2
    }
    .sponsor-block {
      max-width:350px
    }
    section[aria-labelledby=sponsor-title] .grid-12 {
      grid-template-columns:1fr 1fr
    }
    section[aria-labelledby=sponsor-title] .span-4:first-child {
      grid-column:1/-1
    }
    section[aria-labelledby=sponsor-title] .span-4:not(:first-child) {
      grid-column:span 1
    }
    html:not(.js) .site-header .container {
      flex-wrap:wrap;
      padding-block:18px
    }
    html:not(.js) .site-nav {
      order:3;
      width:100%
    }
    html:not(.js) .site-nav ul {
      flex-wrap:wrap
    }
  }
  @media(max-width:700px) {
    :root {
      --gutter:24px
    }
    .hero-grid {
      grid-template-columns:1fr;
      min-height:0
    }
    .hero-copy {
      padding:56px var(--gutter) 40px
    }
    .hero-title {
      font-size:clamp(64px,14vw,90px);
      line-height:.94
    }
    .hero-title .line:nth-child(1),.hero-title .line:nth-child(2) {
      display:inline-block
    }
    .hero-title .line:nth-child(1) {
      margin-right:.12em
    }
    .hero-sub {
      max-width:37ch;
      margin-top:24px
    }
    .hero-eyebrow {
      font-size:10px;
      margin-bottom:24px
    }
    .hero-actions {
      flex-direction:row;
      align-items:center;
      gap:10px 24px;
      margin-top:24px
    }
    .hero-media {
      min-height:0;
      aspect-ratio:16/11
    }
    .hero-media img {
      object-position:64% 48%
    }
    .hero-media::after {
      background:linear-gradient(180deg,#141413 0%,transparent 24%)
    }
    .section {
      padding-block:64px
    }
    .grid-12 {
      grid-template-columns:1fr;
      gap:32px
    }
    .span-5,.span-7 {
      grid-column:1/-1
    }
    .title-md {
      font-size:34px
    }
    .event-panel .title-md {
      max-width:20ch
    }
    .event-media {
      aspect-ratio:16/10
    }
    .impact-section {
      padding-block:48px
    }
    .impact-stats {
      grid-template-columns:1fr;
      gap:24px
    }
    .impact-stats>div {
      position:relative;
      padding:0 0 24px;
      border-left:0;
      border-bottom:1px solid var(--color-line)
    }
    .impact-stats>div:last-child {
      border:0;
      padding-bottom:0
    }
    .stat-value {
      font-size:48px
    }
    .stat-fixed {
      display:inline;
      font-size:16px
    }
    .stat-note {
      max-width:40ch
    }
    .talk-list {
      gap:24px
    }
    .talk-card h3 {
      font-size:21px
    }
    .talk-card .frame {
      aspect-ratio:4/5
    }
    .purpose {
      grid-template-columns:1fr
    }
    .purpose-copy {
      padding:60px var(--gutter)
    }
    .purpose-copy .title-md {
      font-size:46px
    }
    .purpose-media {
      min-height:0;
      aspect-ratio:16/10
    }
    .route-list {
      grid-template-columns:1fr;
      gap:24px
    }
    .route {
      display:grid;
      grid-template-columns:32px 1fr;
      column-gap:16px;
      padding-top:24px
    }
    .route>.icon {
      grid-row:1/4;
      margin:3px 0 0
    }
    .route p {
      max-width:40ch
    }
    .route .link-arrow {
      margin-top:12px;
      justify-self:start
    }
    .news-section {
      padding-top:0
    }
    .news-section>.container {
      padding-top:48px
    }
    .news-list {
      grid-template-columns:1fr;
      gap:32px
    }
    .news-card .frame {
      aspect-ratio:16/9
    }
    .news-card h3 {
      font-size:22px
    }
    .news-card time {
      margin-top:16px
    }
    section[aria-labelledby=sponsor-title] .grid-12 {
      grid-template-columns:1fr
    }
    section[aria-labelledby=sponsor-title] .span-4:not(:first-child) {
      grid-column:1/-1
    }
    .sponsor-note {
      max-width:44ch
    }
    .footer-main {
      grid-template-columns:1fr;
      gap:36px;
      padding-block:56px 40px
    }
    .footer-main>div:last-child {
      grid-column:auto;
      grid-row:auto
    }
    .footer-brand p {
      max-width:42ch
    }
    .footer-nav {
      max-width:330px
    }
    .footer-legal {
      flex-direction:column;
      align-items:flex-start;
      gap:16px
    }
    .footer-legal nav ul {
      flex-wrap:wrap
    }
    .site-logo img {
      width:174px
    }
    .site-header .container {
      gap:12px;
      min-height:72px
    }
    .site-header .btn {
      font-size:11px;
      padding:12px;
      min-height:42px
    }
    .site-header .site-nav {
      margin-left:auto
    }
    .site-logo {
      margin-right:0
    }
    .btn {
      font-size:13px
    }
    .link-arrow {
      font-size:13px
    }
  }
  @media(max-width:420px) {
    :root {
      --gutter:20px
    }
    .site-header .container>.btn {
      display:none
    }
    .talk-list {
      grid-template-columns:1fr;
      gap:36px
    }
    .talk-card .frame {
      aspect-ratio:1/1
    }
    .talk-card h3 {
      font-size:25px
    }
    .hero-actions {
      gap:6px 18px
    }
    .hero-eyebrow {
      font-size:9px
    }
  }
  @media(prefers-reduced-motion:reduce) {
    html {
      scroll-behavior:auto
    }
    *,*::before,*::after {
      animation:none!important;
      transition:none!important
    }
    .reveal.is-pending {
      opacity:1;
      transform:none
    }
    .frame-hover:hover .frame img,a.frame-hover:hover img,.btn:hover,.btn:active {
      transform:none
    }
  }
  /* Shared card actions align even when titles wrap. */
  .news-list>li {
    display:flex
  }
  .news-card {
    display:flex;
    flex-direction:column;
    width:100%
  }
  .news-card h3 {
    flex:1
  }
  .news-card .link-arrow {
    align-self:flex-start
  }