
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/BricolageGrotesque-var.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/Archivo-var.woff2) format('woff2');}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/SplineSansMono-var.woff2) format('woff2');}

:root{
  --bg:#FBFAF8; --ink:#16141A; --verm:#C1301C; --lapis:#24439B; --gold:#A87B00;
  --lac:#191412; --bone:#F3EFE9; --line:#E3E0DA; --mut:#524E47; --card:#FAF9F7;
  --disp:'Bricolage Grotesque','Arial Black',sans-serif;
  --body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#191412; --ink:#F3EFE8; --verm:#FF7757; --lapis:#A9BDFF; --gold:#E5C15C;
    --line:#3A332C; --mut:#BBB3A8; --card:#211B16; --lac:#110E0B; }
}
:root[data-theme="light"]{ --bg:#FBFAF8; --ink:#16141A; --verm:#C1301C; --lapis:#24439B;
  --gold:#A87B00; --line:#E3E0DA; --mut:#524E47; --card:#FAF9F7; --lac:#191412; }
:root[data-theme="dark"]{ --bg:#191412; --ink:#F3EFE8; --verm:#FF7757; --lapis:#A9BDFF;
  --gold:#E5C15C; --line:#3A332C; --mut:#BBB3A8; --card:#211B16; --lac:#110E0B; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.08rem;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--lapis);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--verm);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}
p{margin:0 0 1.05em}
.wrap{max-width:74rem;margin:0 auto;padding:0 clamp(1.1rem,4vw,3rem)}
.prose{max-width:64ch}

/* milestone bar */
.bar{position:sticky;top:0;z-index:50;background:var(--lac);color:var(--bone);
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;padding:.55rem 0;text-transform:uppercase}
.bar .wrap{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.bar .mk-ico{color:#FF7757;flex:0 0 auto}
.bar b{font-weight:700;color:#FF9E85}
.bar a{color:#F3EFE9;margin-left:auto}

/* board ribbon */
.ribbon{border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding:.5rem 0}
.ribbon .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* nav */
nav.site{border-bottom:2px solid var(--ink);background:var(--bg)}
nav.site .wrap{display:flex;align-items:center;gap:1.4rem;padding-top:.8rem;padding-bottom:.8rem;flex-wrap:wrap}
.nav-mark{display:flex;align-items:center;gap:.5rem;font-family:var(--disp);font-weight:800;font-size:1rem;letter-spacing:.02em;color:var(--ink);text-decoration:none;text-transform:uppercase}
.nav-mark svg{color:var(--verm)}
nav.site ul{display:flex;gap:1.2rem;list-style:none;margin:0 0 0 auto;padding:0;flex-wrap:wrap}
nav.site ul a{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
nav.site ul a:hover{border-bottom-color:var(--verm);color:var(--verm)}
nav.site ul a.cta{color:var(--verm);font-weight:700}

.mk-ico{width:1.4em;height:1.4em;vertical-align:-.32em}

/* ============ HERO ============ */
.hero{padding:clamp(2.4rem,5.5vw,4.4rem) 0 0;text-align:left}
.hero{position:relative}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url(../img/hero-texture-light.jpg);background-size:cover;background-position:center;opacity:.6;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(#000 40%,transparent 92%);mask-image:linear-gradient(#000 40%,transparent 92%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero-bg{background-image:url(../img/hero-texture-dark.jpg);mix-blend-mode:screen}}
:root[data-theme="dark"] .hero-bg{background-image:url(../img/hero-texture-dark.jpg);mix-blend-mode:screen}
:root[data-theme="light"] .hero-bg{background-image:url(../img/hero-texture-light.jpg);mix-blend-mode:multiply}
.hero .wrap{position:relative;z-index:1}
.hero-top{display:grid;grid-template-columns:1fr minmax(300px,430px);gap:clamp(2rem,4vw,4.5rem);align-items:center;margin-bottom:1.8rem}
.hero-plate{position:relative;justify-self:end;display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:430px}





.hero-plate .cat{position:absolute;top:-1.5rem;right:.2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--mut)}
@media (max-width:56rem){.hero-top{grid-template-columns:1fr}.hero-plate{display:none}}

.kicker{font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:0 0 1.2rem}
h1.word{font-family:var(--disp);font-weight:800;font-size:clamp(2.7rem,9vw,7.4rem);
  line-height:.92;letter-spacing:-.02em;margin:0 0 1.4rem;text-transform:uppercase}
h1.word .w-past,h1.word .w-fut{display:block}
.w-past{color:var(--ink);text-shadow:.045em .04em 0 var(--verm)}
.w-meets{color:var(--verm);display:flex;align-items:center;gap:.18em;font-size:.42em;letter-spacing:.06em;margin:.18em 0}
.w-meets svg{width:.95em;height:.95em}
.w-fut{color:var(--ink);text-shadow:-.045em .04em 0 var(--lapis)}
@media (prefers-reduced-motion: no-preference){
  .w-past{animation:regP 1.1s cubic-bezier(.22,1,.36,1) both}
  .w-fut{animation:regF 1.1s cubic-bezier(.22,1,.36,1) both}
  @keyframes regP{from{text-shadow:.22em .16em 0 var(--verm)}to{text-shadow:.045em .04em 0 var(--verm)}}
  @keyframes regF{from{text-shadow:-.22em .16em 0 var(--lapis)}to{text-shadow:-.045em .04em 0 var(--lapis)}}
}
.hero-sub{font-size:clamp(1.1rem,2.1vw,1.35rem);line-height:1.5;max-width:46ch;margin:0 0 1.8rem}
.venueline{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-weight:700;font-size:1.06rem;margin-bottom:.4rem}
.venueline .mk-ico{color:var(--verm)}
.venue-note{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 2rem}

/* fact tiles */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink);border:2px solid var(--ink);margin-bottom:1.6rem}
.fact{background:var(--bg);padding:1.1rem 1.2rem 1.2rem}
.fact .fl{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:.45rem}
.fact .fv{font-family:var(--disp);font-weight:750;font-size:clamp(1.15rem,2.2vw,1.65rem);line-height:1.08;display:block}
.fact .fn{font-family:var(--mono);font-size:.68rem;color:var(--mut);display:block;margin-top:.45rem;letter-spacing:.04em}
.fact.hot .fv{color:var(--verm)}
.ctarow{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.6rem}
.btn{display:inline-block;font-family:var(--mono);font-weight:700;font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.95rem 1.5rem;text-decoration:none;border-radius:4px}
.btn.p{background:#C1301C;color:#fff;border:2px solid #C1301C}
.btn.p:hover{background:#A32615;border-color:#A32615}
.btn.s{background:none;color:var(--ink);border:2px solid var(--ink)}
.btn.s:hover{color:var(--verm);border-color:var(--verm)}

/* task band (hero) */
.taskband{margin-top:2.4rem;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:1rem 0;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;line-height:2.1;color:var(--ink)}
.taskband .x{color:var(--verm);padding:0 .55rem}

/* ============ SECTIONS ============ */
section.s{padding:clamp(3rem,7vw,5rem) 0 0}
.shead{display:flex;align-items:baseline;gap:1rem;border-top:3px solid var(--gold);padding-top:.75rem;margin-bottom:2rem;flex-wrap:wrap}
.shead h2{font-family:var(--disp);font-weight:750;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.01em;margin:0;text-transform:uppercase}
.shead .no{font-family:var(--mono);font-size:.74rem;color:var(--verm);letter-spacing:.12em}
.shead .right{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--mut);letter-spacing:.08em;text-transform:uppercase}

/* about */
.rqs{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.8rem}
.rq{border-left:3px solid var(--lapis);padding-left:1.2rem}
.rq .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--lapis);text-transform:uppercase;display:block;margin-bottom:.4rem}
.rq p{font-size:1.02rem;margin:0;line-height:1.6}

/* challenges */
.chal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.chal{border:1px solid var(--line);border-top:3px solid var(--lapis);padding:1.2rem 1.3rem}
.chal.bridge{border-top-color:var(--verm);background:var(--card);grid-column:1/-1}
.chal h3{font-family:var(--disp);font-weight:750;font-size:1.05rem;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.01em;line-height:1.2}
.chal .cq{font-size:.95rem;font-style:italic;margin:0 0 .7rem;line-height:1.5}
.chal .ci{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--mut);margin:0;line-height:1.9;text-transform:uppercase}
@media (max-width:60rem){.chal-grid{grid-template-columns:1fr 1fr}}
@media (max-width:40rem){.chal-grid{grid-template-columns:1fr}}
/* CFP */
.cfp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:2rem}
@media (max-width:60rem){.cfp-grid{grid-template-columns:1fr 1fr}}
.fmt{border:2px solid var(--ink);padding:1.3rem 1.4rem}
.fmt .fh{font-family:var(--disp);font-weight:750;font-size:1.15rem;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.01em}
.fmt .fm{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--verm);text-transform:uppercase;display:block;margin-bottom:.7rem}
.fmt p{font-size:.92rem;color:var(--mut);margin:0;line-height:1.55}
.cfp-facts{font-family:var(--mono);font-size:.85rem;line-height:2.3;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1rem 0;margin-bottom:1.6rem}
.cfp-facts b{color:var(--verm);font-weight:700}
.seal{display:inline-block;font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:#C1301C;padding:.32rem .6rem;border-radius:4px}

/* dates ledger */
table.ledger{width:100%;border-collapse:collapse;font-size:1rem}
.ledger th{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--mut);font-weight:500;border-bottom:2px solid var(--ink);padding:.5rem .8rem .5rem 0}
.ledger td{border-bottom:1px solid var(--line);padding:.9rem .8rem .9rem 0;vertical-align:middle}
.ledger .d{font-family:var(--mono);font-size:.85rem;white-space:nowrap}
.ledger .st{font-family:var(--mono);font-size:.8rem;white-space:nowrap}
.st-done{color:var(--lapis)}
.st-pend{color:var(--mut)}

/* organizers */
.orgs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.org{border:1px solid var(--line);padding:1.15rem 1.3rem}
.org .on{font-weight:700;font-size:1.06rem;line-height:1.3}
.org .on a{color:var(--ink);text-decoration-color:var(--lapis)}
.org .on a:hover{color:var(--lapis)}
.org .oa{font-size:.88rem;color:var(--mut);line-height:1.45;margin:.15rem 0 .35rem}
.org a{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

/* venue */
.venue-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3rem)}
.vfact{border-top:1px solid var(--line);padding:.8rem 0;display:grid;grid-template-columns:9rem 1fr;gap:1rem}
.vfact dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);line-height:2}
.vfact dd{margin:0;font-size:.98rem;line-height:1.6}

/* editions */
.ed-row{display:grid;grid-template-columns:4rem 5rem 1fr auto;gap:1.2rem;align-items:baseline;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.ed-row:first-of-type{border-top:1px solid var(--ink)}
.ed-row .no{font-family:var(--mono);font-size:.78rem;color:var(--mut)}
.ed-row .yr{font-family:var(--disp);font-weight:750;font-size:1.4rem}
.ed-row .what{font-size:1rem}
.ed-row .what small{display:block;color:var(--mut);font-size:.85rem}
.ed-row.pending{color:var(--mut)}
.ed-row .tag{justify-self:end}
@media (max-width:40rem){
  .ed-row{grid-template-columns:auto auto 1fr;grid-template-areas:"no yr tag" "what what what";gap:.3rem 1rem;padding:.95rem 0;align-items:center}
  .ed-row .no{grid-area:no}
  .ed-row .yr{grid-area:yr;font-size:1.25rem}
  .ed-row .tag{grid-area:tag;justify-self:end}
  .ed-row .what{grid-area:what}
}

/* appendix */
.appx{background:var(--card);border-top:3px solid var(--ink);margin-top:clamp(3rem,7vw,5rem)}
.appx-head{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);padding:1.1rem 0 0}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.6rem,1fr));gap:1rem}
.swx{border:1px solid var(--line);background:var(--bg)}
.swx-chip{height:4.2rem;border-bottom:1px solid var(--line)}
.swx-b{padding:.6rem .7rem}
.swx-n{font-weight:700;font-size:.86rem}
.swx-m{font-family:var(--mono);font-size:.62rem;color:var(--mut);line-height:1.7}
.swx-r{font-size:.76rem;color:var(--mut);line-height:1.45;margin-top:.2rem}
.two-ink{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3rem);margin-bottom:2.2rem}
.ink-card{border-left:4px solid var(--verm);padding-left:1.2rem}
.ink-card.l{border-left-color:var(--lapis)}
.ink-card h3{font-family:var(--disp);font-weight:750;font-size:1.1rem;margin:0 0 .4rem;text-transform:uppercase}
.ink-card p{font-size:.92rem;color:var(--mut);margin:0;line-height:1.6}
.spec{border-top:1px solid var(--line);padding:1.3rem 0;display:grid;grid-template-columns:11rem 1fr;gap:1.4rem;align-items:baseline}
.spec-l{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--mut);text-transform:uppercase;line-height:1.9}
.pm{border-top:1px solid var(--line)}
.pm-row{display:grid;grid-template-columns:2.4rem 1fr 1.2fr;gap:1.3rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.pm-row .n{font-family:var(--disp);font-weight:800;font-size:1.3rem;color:var(--verm);line-height:1}
.pm-row h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .35rem}
.pm-row p{font-size:.86rem;color:var(--mut);margin:0;line-height:1.55}
.pm-row .mit h3{color:var(--lapis)}

footer.colo{background:var(--lac);color:var(--bone);margin-top:clamp(3rem,6vw,4.5rem);padding:clamp(2.4rem,5vw,3.6rem) 0}
footer.colo h2{font-family:var(--disp);font-weight:750;font-size:1.15rem;text-transform:uppercase;margin:0 0 1.2rem}
footer.colo p,footer.colo li{font-family:var(--mono);font-size:.73rem;line-height:1.95;opacity:.92}
footer.colo ul{padding-left:1.1rem;margin:0 0 1.2rem}
footer.colo a{color:#FF9E85}

/* minimal footer (2026-07-08 pre-mortem): the footer's only unique jobs are
   the identity stamp and the rights line with the site's one colophon link */
.f-id{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .5rem}
.f-rights{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;opacity:.75;line-height:1.9;margin:0}

@media (max-width:60rem){
  .facts{grid-template-columns:repeat(2,1fr)}
  .gallery .g3,.gallery .g4,.gallery .g5,.gallery .g7{grid-column:span 6}
  .gt .gim,.gt.tall .gim{height:240px}
  .cfp-grid{grid-template-columns:1fr}
  .orgs{grid-template-columns:1fr 1fr}
  .rqs,.venue-grid,.two-ink{grid-template-columns:1fr}
  .pm-row{grid-template-columns:1fr;gap:.4rem}
  .pm-row .n{font-size:1rem}
}
@media (max-width:40rem){
  .gallery .g3,.gallery .g4,.gallery .g5,.gallery .g7{grid-column:span 12}
  .gt .gim,.gt.tall .gim{height:min(52vh,300px)}
  .orgs{grid-template-columns:1fr}
}

/* hero rotating plate */
.hp-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.hp-lbl{color:var(--verm);font-weight:700}
.hp-ctl2{display:inline-flex;align-items:center;gap:.7rem}
.hp-stage{position:relative;min-height:540px;transform:rotate(-1.6deg)}
/* the reading event: boxes draw in after the artifact lands */
.hp-slide .sbx,.hp-slide .ssw{opacity:0;transform:scale(.94);transition:opacity .45s ease,transform .45s ease}
.hp-slide.on .sbx,.hp-slide.on .ssw{opacity:1;transform:none}
.hp-slide.on .sbx:nth-of-type(1){transition-delay:.55s}
.hp-slide.on .sbx:nth-of-type(2){transition-delay:.85s}
.hp-slide.on .sbx:nth-of-type(3){transition-delay:1.15s}
.hp-slide.on .ssw{transition-delay:.85s}
@media (prefers-reduced-motion:reduce){.hp-slide .sbx,.hp-slide .ssw{opacity:1!important;transform:none!important;transition:none!important}}
.hp-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none;display:flex;flex-direction:column;justify-content:center}
.hp-slide.on{opacity:1;pointer-events:auto;position:relative}
.hp-slide figure,.hp-slide{margin:0}
.hp-slide{background:#FFFFFF;border:1px solid var(--line);padding:14px 14px 12px;box-shadow:0 14px 42px rgba(22,20,26,.16)}
:root[data-theme="dark"] .hp-slide{background:#F3EFE9;border-color:#F3EFE9}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hp-slide{background:#F3EFE9;border-color:#F3EFE9}}
.hp-im{height:420px;display:flex;align-items:center;justify-content:center}
.hp-in{position:relative;max-height:420px}
.hp-in img{max-height:420px;width:auto;max-width:100%;display:block}
.sbx{position:absolute;border:2px solid #C1301C;box-shadow:0 0 0 2px rgba(255,255,255,.7);display:block}
.sbx.blue{border-color:#24439B}
.sbx.dash{border-style:dashed}
.ssw{position:absolute;display:flex;gap:4px}
.ssw i{width:20px;height:20px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.hp-slide figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:#524E47;padding-top:.55rem;text-transform:uppercase;line-height:1.7}
.hp-slide figcaption b{color:#16141A;font-size:.78rem}
.hp-btn{border:1px solid var(--line);background:none;color:var(--mut);font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:4px;cursor:pointer;min-height:30px}
.hp-btn:hover{color:var(--verm);border-color:var(--verm)}

/* polish pass */
section.s{padding-bottom:clamp(2.6rem,5vw,4rem)}
section.s:last-of-type{padding-bottom:clamp(3rem,6vw,4.5rem)}
.hero .kicker + .word{margin-top:.2rem}
.s .btn{margin:1.2rem 0 .5rem}
.cfp-facts{margin-top:2rem}
.rqs{margin-top:2.2rem}
.rqs + p{margin-top:1.4rem}
header.hero .hero-sub{margin-bottom:1rem}

/* a11y + theme toggle */
.hp-btn{min-height:44px;min-width:44px}
nav.site ul{align-items:center}
nav.site a[aria-current="page"]{border-bottom-color:var(--verm);color:var(--verm)}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;background:none;
  border:1.5px solid var(--line);color:var(--ink);width:40px;height:40px;padding:0;border-radius:50%;cursor:pointer}
/* icon reflects the TARGET theme: moon in light, sun in dark */
.theme-btn .ico-sun{display:none}
:root[data-theme="dark"] .theme-btn .ico-sun{display:block}
:root[data-theme="dark"] .theme-btn .ico-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .ico-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .ico-moon{display:none}
}
.theme-btn:hover{border-color:var(--verm);color:var(--verm)}

/* burger (mobile only; display gated in the 48rem media block) */
.nav-burger{display:none;align-items:center;justify-content:center;background:none;
  border:1.5px solid var(--line);color:var(--ink);width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer}
.nav-burger:hover{border-color:var(--verm);color:var(--verm)}
.nav-burger .ico-close{display:none}
nav.site.open .nav-burger .ico-burger{display:none}
nav.site.open .nav-burger .ico-close{display:block}

/* organizer feedback pass (2026-07-07) */
.kicker .k3{color:var(--verm);font-weight:700}
.venueline a{color:var(--ink);text-decoration-color:var(--verm);text-decoration-thickness:2px;text-underline-offset:4px}
.venueline a:hover{color:var(--verm)}
.org{display:flex;gap:1.05rem;align-items:center}
.org .op{width:76px;height:76px;object-fit:cover;flex:0 0 auto;border-radius:3px;filter:grayscale(1) contrast(1.04)}
ul.topics{margin:0 0 1.4rem;padding-left:1.15rem}
ul.topics li{margin-bottom:.5rem;line-height:1.55}

/* subpage hero fact rows */
.hfacts{margin:1.7rem 0 0;max-width:44rem}
.hfacts>div{display:grid;grid-template-columns:10rem 1fr;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line)}
.hfacts>div:last-child{border-bottom:1px solid var(--line)}
.hfacts dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);line-height:2.1}
.hfacts dd{margin:0;font-size:1.02rem;line-height:1.65;overflow-wrap:break-word}
.hfacts dd b{color:var(--verm)}
@media (max-width:40rem){.hfacts>div{grid-template-columns:1fr;gap:.05rem;padding:.65rem 0}.hfacts dt{line-height:1.8}}

/* mobile design (2026-07-08): dedicated phone layout, not just reflow */
.mob{display:none}
@media (min-width:48rem){html{scroll-padding-top:3.4rem}}
.vfact dd{overflow-wrap:break-word}

@media (max-width:48rem){
  /* milestone bar: one line, and static on phones (it scrolls away
     instead of permanently claiming viewport; sticky stays on desktop) */
  .dsk{display:none}
  .mob{display:inline}
  .bar{position:static;font-size:.66rem;letter-spacing:.05em;padding:.5rem 0}
  .bar .wrap{flex-wrap:nowrap;gap:.9rem;justify-content:space-between}
  .bar span,.bar a{white-space:nowrap}
  /* nav: brand + theme toggle + burger on one row; links in a dropdown panel */
  nav.site .wrap{padding-top:.65rem;padding-bottom:.65rem;row-gap:0}
  .nav-mark{order:0;margin-right:auto}
  .theme-btn{order:1;width:38px;height:38px}
  .nav-burger{display:inline-flex;order:2}
  nav.site ul{order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;margin:.55rem 0 .15rem;text-align:left}
  .js nav.site ul{display:none}
  .js nav.site.open ul{display:flex}
  nav.site ul li{border-top:1px solid var(--line)}
  nav.site ul a{display:block;padding:.95rem .1rem;font-size:.78rem;letter-spacing:.1em;border-bottom:none}
  nav.site a[aria-current="page"]{border-bottom:none}
}

@media (max-width:40rem){
  /* tighter vertical rhythm on phones */
  section.s{padding-top:2.4rem}
  section.s,section.s:last-of-type{padding-bottom:1.9rem}
  .hero{padding-top:1.7rem}
  .hero .kicker{margin-bottom:.9rem}
  h1.word{margin-bottom:1rem}
  header.hero .hero-sub{margin-bottom:.8rem}
  .venue-note{margin-bottom:1.5rem}
  /* section-head side labels drop under the title, left-aligned */
  .shead{margin-bottom:1.4rem;row-gap:.3rem}
  .shead .right{flex-basis:100%;margin-left:0}
  /* full-width tap-friendly CTAs */
  .ctarow{gap:.7rem}
  .ctarow .btn{flex:1 1 100%;text-align:center}
  .vfact{grid-template-columns:1fr;gap:.1rem;padding:.7rem 0}
  .vfact dt{line-height:1.7}
}

@media (max-width:23rem){
  .bar{font-size:.6rem;letter-spacing:.03em}
  .bar .wrap{gap:.6rem}
}

/* colophon credit register */
.credits{border-top:1px solid var(--line)}
.cr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:1.4rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.cr b{font-size:1rem;line-height:1.45}
.cr b a{color:var(--ink);text-decoration-color:var(--lapis)}
.cr b a:hover{color:var(--lapis)}
.cr span{font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--mut);line-height:1.8}
@media (max-width:56rem){.cr{grid-template-columns:1fr;gap:.3rem}}

/* Supported By: VT's official full-colour logo, unaltered, on a white card
   (2026-07-08). VT maroon/orange stay exact and the mark keeps its required
   white ground; a hairline card seats it so it no longer floats, while the
   page stays gallery-light and the lacquer footer remains the sole dark
   anchor at the foot of the page (no competing dark band). The white card
   also reads as a bright plate in dark mode. */
.supports{display:flex;flex-wrap:wrap;gap:1.4rem}
.support-plate{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:5px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  padding:clamp(1.2rem,3.2vw,1.9rem) clamp(1.6rem,4.5vw,2.8rem)}
.support-plate img{display:block;width:auto;height:auto;max-width:100%;max-height:58px}
.support-plate:hover{border-color:var(--verm);box-shadow:0 0 0 1px var(--verm)}
@media (max-width:40rem){
  .supports{display:block}
  .support-plate{display:flex;width:100%;padding:1.2rem 1.1rem}
  .support-plate img{max-height:44px}
}

/* Challenge-map: live Miro board embed (2026-07-09). The board was made
   public view-only so participants can pan/zoom it in the browser. If a
   visitor's network blocks miro.com, the "open in Miro" caption link and the
   named topic clusters above stand in; a cross-origin iframe error can't be
   detected, so there is no image fallback (it would only be an unused fetch). */
.mapfig{margin:3rem 0 0}
figure.mapfig{padding:0}
.mapembed{position:relative;width:100%;height:clamp(300px,42vh,440px);
  border:1px solid var(--line);background:var(--card);overflow:hidden;border-radius:2px}
.mapembed iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
figure.mapfig figcaption{font-family:var(--mono);font-size:.76rem;color:var(--mut);
  margin-top:.55rem;letter-spacing:.05em}
figure.mapfig figcaption a{color:var(--lapis);text-decoration-thickness:1px;text-underline-offset:2px}

/* Co-located conference marks in the footer (2026-07-09): "workshop
   organized at" HCOMP 2026 and CI 2026. The footer is always dark, so the
   monochrome CI mark is reversed to white; HCOMP keeps its gradient. Sized
   to the same height so the two marks read as peers. */
.f-orgs{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem 1.5rem;
  margin-bottom:1.4rem;padding-bottom:1.3rem;border-bottom:1px solid rgba(243,239,233,.15)}
.f-orgs-lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.72}
.f-orgs a{display:inline-flex;align-items:center}
.f-orgs a:hover{opacity:.72}
.f-logo{display:block;width:auto;height:34px}
.f-logo.cimono{height:34px;filter:invert(1)}
/* phones: label on its own line, both marks together on the next line */
@media (max-width:30rem){
  .f-orgs{gap:.55rem 1.1rem}
  .f-orgs-lbl{flex-basis:100%}
  .f-logo,.f-logo.cimono{height:30px}
}
