:root{
  --ico-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ico-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
  --ico-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
  --ico-ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --ico-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
  /* one scale, used everywhere: sm for chips inside menus, r for cards and
     panels, lg for media blocks, pill for anything round-ended */
  --r-sm:4px; --r:8px; --r-lg:14px; --r-pill:100px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.07);
  --shadow-lg:0 2px 6px rgba(0,0,0,.06), 0 22px 60px rgba(0,0,0,.12);
  --lift:-3px; --tall-w:430px;
  --max:1180px; --read:66ch; --col:37rem;
  --ease:cubic-bezier(.22,.61,.36,1);
  --glass-bg:color-mix(in srgb,var(--raise) 66%,transparent);
  --glass-line:color-mix(in srgb,var(--hair) 70%,transparent);
  --btn-ink:var(--ink);
  --font-body:"Noto Sans TC","PingFang TC","Hiragino Sans",system-ui,sans-serif;
  --font-head:"Noto Serif TC",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--body);
  font-family:var(--font-body);
  font-weight:300; font-size:16.5px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--brick); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
address{font-style:normal}
:focus-visible{outline:2px solid var(--brick); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-9999px; top:0; z-index:99; background:var(--ink);
  color:var(--ground); padding:10px 16px; border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,4vw,32px)}
.read{max-width:var(--read)}
.glass{background:var(--glass-bg); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5)}

/* ── icons ──
   Arrows are drawn, not typed, so every "go on" link and every outward link
   carries the same mark at the same size and moves the same way on hover.
   A mask, so the icon takes the colour of its text. */
.go::after,.more>a::after,.sec-head a::after,.btn::after,.hero-links a::after,
.foot-up::after,.zone-b .go::after,.artefact .go::after{
  content:""; display:inline-block; width:1em; height:1em; margin-left:.4em; vertical-align:-.14em;
  background:currentColor; -webkit-mask:var(--ico-arrow) center/contain no-repeat; mask:var(--ico-arrow) center/contain no-repeat;
  transition:transform .2s var(--ease)}
.go:hover::after,.more>a:hover::after,.sec-head a:hover::after,.btn:hover::after,.hero-links a:hover::after{transform:translateX(3px)}
.foot-up::after{--ico-arrow:var(--ico-up)}
/* one step back, one step on */
.post-nav a::before,.post-nav .nx a::after{content:""; display:inline-block; width:1em; height:1em; vertical-align:-.14em;
  background:currentColor; -webkit-mask:var(--ico-back) center/contain no-repeat; mask:var(--ico-back) center/contain no-repeat;
  transition:transform .2s var(--ease)}
.post-nav a::before{margin-right:.4em}
.post-nav .nx a::before{content:none}
.post-nav .nx a::after{margin-left:.4em; --ico-back:var(--ico-arrow); -webkit-mask-image:var(--ico-arrow); mask-image:var(--ico-arrow)}
.post-nav a:hover::before{transform:translateX(-3px)}
.post-nav .nx a:hover::after{transform:translateX(3px)}
a[target="_blank"]:not(.foot-soc a):not(.soc)::after{
  content:""; display:inline-block; width:.92em; height:.92em; margin-left:.35em; vertical-align:-.08em;
  background:currentColor; -webkit-mask:var(--ico-ext) center/contain no-repeat; mask:var(--ico-ext) center/contain no-repeat}
.foot-soc a::after,.soc::after,.soc .go::after{content:none!important}
.m-card a>span[aria-hidden]{display:inline-block; width:1em; height:1em; background:currentColor;
  -webkit-mask:var(--ico-chev) center/contain no-repeat; mask:var(--ico-chev) center/contain no-repeat; font-size:0}

/* ── loader ── */
/* A full-screen curtain with the logo and a bar on the first page of a
   session; a thin bar along the top on every page after that. Hidden outright
   without JS, and gone within 3s regardless, so nobody is ever stuck behind it. */
.loader{position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background:color-mix(in srgb,var(--ground) 82%,transparent); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  transition:opacity .45s var(--ease),visibility .45s; animation:loader-out .4s 3s var(--ease) forwards}
.loader img{width:clamp(72px,10vw,110px); height:auto; animation:loader-breathe 1.6s ease-in-out infinite}
.loader .bar{width:min(240px,60vw); height:3px; background:var(--hair); border-radius:3px; overflow:hidden}
.loader .bar span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brick),var(--btn)); border-radius:3px;
  animation:loader-fill 1.4s var(--ease) forwards}
.loader .t{font-size:11.5px; letter-spacing:.24em; color:var(--muted)}
.loader.is-done{opacity:0; visibility:hidden; animation:none}
.loader.is-done .bar span{width:100%; animation:none; transition:width .25s var(--ease)}
.loader.is-slim{inset:0 0 auto; height:3px; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; display:block; gap:0}
.loader.is-slim img,.loader.is-slim .t{display:none}
.loader.is-slim .bar{width:100%; height:3px; background:none; border-radius:0}
.loader.is-slim .bar span{background:var(--btn)}
@keyframes loader-fill{0%{width:0}60%{width:62%}100%{width:88%}}
@keyframes loader-breathe{0%,100%{opacity:.85; transform:scale(1)}50%{opacity:1; transform:scale(1.04)}}
@keyframes loader-out{to{opacity:0; visibility:hidden}}

/* ── nav ── */
.nav{position:sticky; top:0; z-index:40; border-bottom:1px solid var(--glass-line)}
.nav-in{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,4vw,32px);
  height:72px; display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
.brand{display:flex; align-items:center; gap:11px; flex:0 1 auto; min-width:0; color:var(--ink); line-height:1.15}
.brand:hover{text-decoration:none}
.brand img{height:40px; width:auto; flex:none}
.brand-t{display:flex; flex-direction:column; min-width:0}
.brand-zh{font-family:var(--font-head); font-weight:700; font-size:16.5px; letter-spacing:.02em; white-space:nowrap}
.brand-en{font-size:9.5px; letter-spacing:.12em; color:var(--muted); white-space:nowrap; margin-top:2px}
.brand.is-wordmark img{height:38px}
.nav-links{display:flex; gap:clamp(10px,1.6vw,24px); margin-left:auto; min-width:0}
.nav-links a{font-size:14.5px; color:var(--muted); white-space:nowrap; padding:4px 0 2px;
  border-bottom:2px solid transparent; transition:color .2s var(--ease),border-color .2s var(--ease)}
.nav-links a:hover{color:var(--ink); text-decoration:none}
.nav-links a.is-active{color:var(--ink); border-bottom-color:var(--btn)}
.nav-right{display:flex; align-items:center; gap:10px; flex:none}

/* language menu: a <details>, so it works with no JS at all */
.lang{position:relative}
.lang summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--muted); border:1px solid var(--hair); border-radius:var(--r-pill); padding:6px 12px 4px; white-space:nowrap}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{color:var(--ink); border-color:var(--muted)}
.lang summary svg{flex:none; opacity:.75}
.lang summary .caret{font-size:8px; opacity:.7}
.lang[open] summary{color:var(--ink); border-color:var(--muted)}
.lang-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:178px; z-index:45;
  border:1px solid var(--glass-line); border-radius:var(--r); box-shadow:var(--shadow-lg); overflow:hidden; padding:5px}
.lang-menu a{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:8px 12px; border-radius:var(--r-sm); font-size:14px; color:var(--ink)}
.lang-menu a:hover{background:var(--wash); text-decoration:none}
.lang-menu a .c{font-size:11px; color:var(--muted); letter-spacing:.1em}
.lang-menu a[aria-current]{color:var(--brick)}

.nav-cta{flex:none; font-size:14px; font-weight:500; color:var(--btn-ink);
  background:var(--btn); padding:10px 18px 8px; border-radius:var(--r-pill); white-space:nowrap;
  transition:transform .2s var(--ease),filter .2s var(--ease)}
.nav-cta:hover{transform:translateY(-1px); filter:brightness(1.05); text-decoration:none}
.nav-burger{display:none; flex:none; width:40px; height:40px;
  background:none; border:0; cursor:pointer; padding:10px 8px}
.nav-burger span{display:block; height:1.5px; background:var(--ink); margin:4px 0; border-radius:2px}
.m-menu{display:none}
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-right{margin-left:auto}
  .nav-burger{display:block}
  .m-menu{display:block; position:fixed; inset:72px 0 auto; z-index:39;
    padding:14px clamp(20px,4vw,32px) 20px; opacity:0; visibility:hidden;
    transform:translateY(-8px); transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
  .m-menu.is-open{opacity:1; visibility:visible; transform:none}
  .m-card{border:1px solid var(--glass-line); border-radius:var(--r);
    box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 104px); overflow-y:auto}
  .m-card a{display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; color:var(--ink); font-size:16px; border-bottom:1px solid var(--glass-line)}
  .m-card a span{color:var(--muted)}
  .m-h{font-size:11px; letter-spacing:.2em; color:var(--muted); padding:14px 18px 6px}
  .m-langs{display:flex; flex-wrap:wrap; gap:8px; padding:4px 18px 18px}
  .m-langs a{border:1px solid var(--hair); border-radius:var(--r-pill); padding:6px 14px 4px; font-size:14px; color:var(--body)}
  .m-langs a[aria-current]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
  .m-cta{background:var(--btn); color:var(--btn-ink)!important; justify-content:center!important;
    border-bottom:0!important; font-weight:500}
}
@media (max-width:600px){
  .brand-en{display:none}
  .brand img{height:34px}
  .brand-zh{white-space:normal; font-size:14px; line-height:1.25}
  .lang summary{padding:6px 10px 4px}
  .lang summary .lbl{display:none}
}
/* the gallery keeps its old black header; the words on it go pale */
.dark-chrome .nav{--ink:#FFFFFF; --ground:#0A0500; --muted:#C9C9C9; --hair:rgba(255,255,255,.2); --wash:rgba(255,255,255,.12); --brick:#FFB4A8;
  --glass-bg:rgba(10,5,0,.74); --glass-line:rgba(255,255,255,.12); color:var(--muted)}
.dark-chrome .nav .lang-menu{background:rgba(16,10,6,.95)}
.dark-chrome .m-menu{--ink:#FFFFFF; --ground:#0A0500; --muted:#C9C9C9; --hair:rgba(255,255,255,.2); --wash:rgba(255,255,255,.12);
  --glass-bg:rgba(10,5,0,.92); --glass-line:rgba(255,255,255,.12)}

/* ── hero ── */
/* A hero is a photograph edge to edge; the padding every other section gets
   would show as a black band above and below it. */
.hero{position:relative; padding:0; border-bottom:1px solid var(--hair); background:#0a0500; overflow:hidden}
.hero-img{position:relative; width:100%; height:clamp(420px,72vh,680px); overflow:hidden; background:#0a0500}
.hero-img img,.hero-img video{width:100%; height:100%; object-fit:cover; object-position:center 38%}
.hero-img img.is-loading{filter:blur(14px)}
/* A slideshow: the picture is never quite still, and the frames cross-fade.
   The drift runs on every frame all the time, not only on the one showing.
   Tying it to the visible frame meant that when a frame stopped being the
   visible one its animation was taken away with the class, and its transform
   snapped from part-way back to nothing — a visible flinch, right in the middle
   of the fade, in the image and in the headline sitting over it. Now only the
   opacity changes when the slide changes, and nothing jumps. */
.hero-img.slides img{position:absolute; inset:0; opacity:0;
  transition:opacity 1.6s var(--ease); will-change:opacity;
  animation:kenburns 40s linear infinite alternate}
.hero-img.slides img.is-on{opacity:1}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.13)}}
@media (prefers-reduced-motion:reduce){.hero-img.slides img{animation:none}}
/* a surveyor's mesh over the photograph, and a little dust in the light */
.hero-mesh{position:absolute; inset:0; pointer-events:none; opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:clamp(56px,7vw,96px) clamp(56px,7vw,96px);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 30%,#000 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 30%,#000 100%)}
.hero-dust{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.hero-dust i{position:absolute; display:block; width:3px; height:3px; border-radius:50%;
  background:rgba(255,255,255,.75); filter:blur(.4px); opacity:0; animation:drift linear infinite}
@keyframes drift{
  0%{opacity:0; transform:translate3d(0,20px,0) scale(.6)}
  12%{opacity:.7}
  88%{opacity:.5}
  100%{opacity:0; transform:translate3d(14px,-120px,0) scale(1.1)}}
/* the headline holds several of the programme's own lines and moves between them */
.rot{display:grid}
.rot>span{grid-area:1/1; opacity:0; transform:translateY(10px); transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rot>span.is-on{opacity:1; transform:none}
.hero-veil{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,5,0,.32) 0%,rgba(10,5,0,.42) 45%,rgba(10,5,0,.76) 100%)}
.hero-grain{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.26; mix-blend-mode:screen; pointer-events:none}
.hero-body{position:absolute; inset:0; display:flex; align-items:center; padding:72px 0 clamp(26px,4vw,44px)}
.hero-body .wrap{width:100%}
.hero.center .hero-body .wrap{text-align:center; display:flex; flex-direction:column; align-items:center}
.hero-eyebrow{font-family:var(--font-head); font-size:clamp(14px,1.5vw,18px); letter-spacing:.2em; color:rgba(255,255,255,.9); margin-bottom:14px}
.hero-h{font-family:var(--font-head); font-weight:700; color:#fff;
  font-size:clamp(32px,5.6vw,64px); line-height:1.16; letter-spacing:.02em; text-wrap:balance;
  text-shadow:0 2px 28px rgba(0,0,0,.45)}
.hero-p{color:rgba(255,255,255,.94); font-size:clamp(14.5px,1.5vw,17.5px); margin-top:18px; max-width:52ch; text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero-links{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px}
.hero.center .hero-links{justify-content:center}
.hero-links a{color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:var(--r-pill); padding:12px 24px 10px;
  font-size:14.5px; font-weight:500; background:rgba(255,255,255,.1); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:background .2s var(--ease),transform .2s var(--ease)}
.hero-links a:hover{background:rgba(255,255,255,.22); text-decoration:none; transform:translateY(-1px)}
.hero-links a.primary{background:var(--btn); border-color:var(--btn); color:var(--btn-ink)}
.hero-links a.primary:hover{background:var(--btn); filter:brightness(1.06)}
/* a strip of facts under the hero */
.facts{border-bottom:1px solid var(--hair); background:var(--raise)}
/* auto-fit was leaving a spare empty track at the end of the row, so the last
   fact sat short of the right edge and the whole strip read as crooked. One
   column per fact instead, however many there are. */
.facts .wrap{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px clamp(20px,4vw,44px); padding-top:26px; padding-bottom:26px}
@media (min-width:760px){.facts .wrap{grid-template-columns:none;
  grid-auto-flow:column; grid-auto-columns:minmax(0,1fr)}}
.facts dl{margin:0}
.facts dt{font-family:var(--font-head); font-size:clamp(24px,3vw,34px); font-weight:700; color:var(--ink); line-height:1.2; font-variant-numeric:tabular-nums}
.facts dt .plus{color:var(--brick)}
.facts dd{margin:4px 0 0; font-size:13.5px; color:var(--muted)}
.facts .wrap>div{position:relative}
@media (min-width:760px){.facts .wrap>div + div::before{content:""; position:absolute; left:calc(-1 * clamp(10px,2vw,22px)); top:4px; bottom:4px; width:1px; background:var(--hair)}}

/* ── the front door's two ways in ── */
/* The same card as everywhere else, but the picture is the point, so it fills
   the top of the card and leans in a little when the pointer is over it. */
.door{display:block; background:var(--raise); border:1px solid var(--hair); border-radius:var(--r-lg);
  overflow:hidden; color:inherit; transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.door:hover{text-decoration:none; transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); border-color:var(--muted)}
.door .plate{border-radius:0}
.door .plate img{transition:transform .6s var(--ease)}
.door:hover .plate img{transform:scale(1.04)}
.door-b{padding:22px clamp(20px,2.4vw,26px) 26px}
.door-mark{height:36px; width:auto; margin-bottom:10px}
.door .n{font-family:var(--font-head); font-size:clamp(9.5px,1vw,11.5px); letter-spacing:.12em;
  color:var(--brick); white-space:nowrap}
.door h3{font-family:var(--font-head); font-size:clamp(19px,2.2vw,23px); margin:6px 0 8px}
.door p{font-size:15px; color:var(--muted); line-height:1.75}
.door .go{margin-top:12px; color:var(--brick); font-size:14px}

/* A row of pictures, all one shape, filling the row whatever it holds — the
   count comes from the markup as --n, so three pictures make three wide ones
   rather than three narrow ones and half a row of nothing. */
.strip{display:grid; gap:clamp(8px,1.2vw,14px); grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:620px){.strip{grid-template-columns:repeat(min(3,var(--n,3)),minmax(0,1fr))}}
@media (min-width:980px){.strip{grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}}
.strip .plate{border-radius:var(--r-sm)}
.strip .plate img{transition:transform .6s var(--ease)}
.strip .plate:hover img{transform:scale(1.05)}

/* ── page head ── */
.phead{padding:clamp(42px,6vw,74px) 0 clamp(24px,3vw,34px); border-bottom:1px solid var(--hair)}
.eyebrow{font-size:11.5px; letter-spacing:.22em; color:var(--brick); margin-bottom:11px}
.phead h1{font-family:var(--font-head); font-weight:700; color:var(--ink);
  font-size:clamp(27px,4vw,42px); line-height:1.28; text-wrap:balance; letter-spacing:-.01em}
.phead p{margin-top:14px; color:var(--muted); font-size:16.5px; max-width:52ch}
.phead .meta{margin-top:12px; font-size:13.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 14px}
.phead .meta a{color:var(--brick)}

/* ── sections ── */
section{padding:clamp(40px,5.5vw,68px) 0}
section + section{border-top:1px solid var(--hair)}
section.band + section,section + section.band{border-top:0}
h2{font-family:var(--font-head); font-weight:700; color:var(--ink);
  font-size:clamp(21px,2.6vw,29px); line-height:1.38; text-wrap:balance; margin-bottom:8px}
h2 small{font-family:var(--font-body); font-weight:300; font-size:.56em; color:var(--muted); letter-spacing:.1em; margin-left:12px}
h3{font-weight:700; color:var(--ink); font-size:17px; line-height:1.5}
.lede{font-size:17.5px; color:var(--body)}
p + p{margin-top:14px}
.dim{color:var(--muted)}
.sec-intro{max-width:var(--read); margin-bottom:clamp(22px,3vw,34px)}
.sec-intro.read{margin-inline:auto}
.more.center{text-align:center}
.sec-intro.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:clamp(18px,2.6vw,28px)}
.sec-head h2{margin:0}
.sec-head a{font-size:14.5px; white-space:nowrap}
.sec-head.center{justify-content:center; text-align:center; flex-direction:column; align-items:center; gap:6px}
.more{margin-top:clamp(18px,2.6vw,26px); font-size:15px}
.band{background:var(--wash)}

/* ── grids ── */
.grid{display:grid; gap:clamp(16px,2.2vw,26px)}
.grid>*{min-width:0}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media (min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
/* the front door holds four sites; auto-fit would leave one of them alone on
   a second row, so they are held to two across and fill both rows */
.doors{grid-template-columns:1fr}
@media (min-width:720px){.doors{grid-template-columns:repeat(2,1fr)}}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media (min-width:1000px){.g4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid; gap:clamp(24px,4vw,54px); align-items:center; grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.card{background:var(--raise); border:1px solid var(--hair); border-radius:var(--r); padding:24px 24px 26px}
.card .n{font-family:var(--font-head); font-size:13px; color:var(--brick); letter-spacing:.1em}
.card h3{margin:10px 0 7px}
.card p{font-size:15px; color:var(--muted)}
a.card,.nc,.soc,.zone,.artefact{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
a.card:hover,.nc:hover,.soc:hover,.zone:hover,.artefact:hover{text-decoration:none; transform:translateY(var(--lift)); box-shadow:var(--shadow); border-color:var(--muted)}
a.card{display:block; color:inherit}
a.card h3{color:var(--ink)}
.card .go{font-size:13.5px; color:var(--brick); margin-top:12px}
/* the six capabilities: one numbered board rather than six loose boxes */
.board{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media (min-width:900px){.board{grid-template-columns:repeat(3,1fr)}}
.board>div{background:var(--raise); padding:26px 26px 30px; transition:background .25s var(--ease)}
.board>div:hover{background:var(--wash)}
.board .n{font-family:var(--font-head); font-size:26px; line-height:1; color:var(--brick)}
.board h3{margin:14px 0 8px; font-size:17.5px}
.board p{font-size:15px; color:var(--muted)}

/* a set of related items reads as a list, not as separate cards */
.rows{border-top:1px solid var(--hair)}
.row{display:grid; grid-template-columns:minmax(86px,150px) minmax(0,1fr); gap:clamp(14px,2.4vw,30px);
  padding:18px 0; border-bottom:1px solid var(--hair); align-items:start}
.row-k{font-size:13px; color:var(--brick); letter-spacing:.06em; padding-top:3px; font-variant-numeric:tabular-nums}
.row h3,.row .row-v{margin-bottom:5px}
.row-v{font-weight:700; color:var(--ink); font-size:17px; line-height:1.5}
.row p{font-size:15.5px; color:var(--muted)}
.row h3 a{color:var(--ink)}

/* ── the class creed: three words, said properly ── */
/* 真誠、忍耐、團結 have no explanatory copy behind them and should not be given
   any. Three cards with a number and a word in each looked like content that
   had gone missing; set large and ruled, the three words are the statement. */
/* The three words sit on the photograph rather than beside it. Set beside it
   they repeated the motto that is already at the top of the page and said
   nothing the reader did not have; over it they are the statement, and the
   picture is doing something. */
.creed-band{position:relative; overflow:hidden; background:#0A0500; isolation:isolate;
  padding:clamp(56px,9vw,110px) 0}
.creed-band > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 32%; z-index:-2}
.creed-veil{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(10,5,0,.62) 0%,rgba(10,5,0,.5) 40%,rgba(10,5,0,.78) 100%)}
.creed-band .eyebrow{color:rgba(255,255,255,.78)}
.creed-band .motto{font-family:var(--font-head); color:#fff; margin:0;
  font-size:clamp(26px,4vw,44px); letter-spacing:.08em; text-shadow:0 2px 24px rgba(0,0,0,.5)}

.creed{list-style:none; display:grid; gap:0; border-top:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(255,255,255,.28); margin:clamp(26px,3.4vw,40px) 0 0}
@media (min-width:760px){.creed{grid-auto-flow:column; grid-auto-columns:1fr}}
.creed li{display:flex; align-items:baseline; gap:clamp(12px,1.6vw,18px);
  padding:clamp(20px,2.6vw,30px) clamp(4px,2vw,26px); border-bottom:1px solid rgba(255,255,255,.28)}
.creed li:last-child{border-bottom:0}
@media (min-width:760px){
  .creed li{border-bottom:0; border-left:1px solid rgba(255,255,255,.28); justify-content:center}
  .creed li:first-child{border-left:0}}
.creed-n{font-family:var(--font-head); font-size:12.5px; letter-spacing:.18em; color:rgba(255,255,255,.7); flex:none}
.creed-w{font-family:var(--font-head); font-weight:700; color:#fff;
  font-size:clamp(30px,4.6vw,46px); letter-spacing:.14em; line-height:1.1;
  text-shadow:0 2px 20px rgba(0,0,0,.5)}

/* ── what a photograph says when you right-click it ── */
/* Blocking the menu outright would stop nobody: the picture is already on the
   reader's machine by the time they can click it, and the browser will hand it
   over half a dozen other ways. What this does instead is answer the question
   the click is usually asking — may I use this, and on what terms. Text keeps
   its ordinary menu, because quoting is exactly what the licence allows. */
.pnote{position:fixed; z-index:80; max-width:min(340px,calc(100vw - 32px));
  background:var(--raise); color:var(--ink); border:1px solid var(--hair);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:18px 20px 16px;
  font-size:14px; line-height:1.7; opacity:0; transform:translateY(6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease)}
.pnote.is-on{opacity:1; transform:none}
.pnote h2{font-family:var(--font-head); font-size:15px; margin:0 0 8px; color:var(--ink)}
.pnote p{margin:0 0 8px; color:var(--muted)}
.pnote p:last-of-type{margin-bottom:12px}
.pnote a{color:var(--brick)}
.pnote-x{appearance:none; background:none; border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:5px 14px; font:inherit; font-size:13px; color:var(--muted); cursor:pointer}
.pnote-x:hover{border-color:var(--muted); color:var(--ink)}
@media (prefers-reduced-motion:reduce){.pnote{transition:none}}
/* a photograph is not something to drag out of the page, and a long press on a
   phone should ask the same question a right-click does */
.pnote-site main img{-webkit-user-drag:none; -webkit-touch-callout:none}

/* ── something from elsewhere, loaded when it is asked for ── */
.embed{position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:#0A0500}
.embed img{width:100%; height:100%; object-fit:cover; opacity:.55}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.embed-go{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:10px; padding:13px 24px; cursor:pointer;
  background:var(--btn); color:var(--btn-ink); border:0; border-radius:var(--r-pill);
  font:inherit; font-weight:700; font-size:15px; box-shadow:var(--shadow-lg);
  transition:transform .2s var(--ease)}
.embed-go::after{content:""; width:16px; height:16px; background:currentColor;
  -webkit-mask:var(--ico-arrow) center/contain no-repeat; mask:var(--ico-arrow) center/contain no-repeat}
.embed-go:hover{transform:translate(-50%,-50%) scale(1.04)}
.embed-go:focus-visible{outline:2px solid #fff; outline-offset:3px}

/* ── the front of a page about a person ── */
/* Light, like the rest of this site. The portrait is the only dark thing on
   it, which is enough to hold the eye without turning the page into a
   different site for one section. */
.me{background:var(--wash); border-bottom:1px solid var(--hair)}
.me .wrap{padding-top:clamp(44px,6vw,84px); padding-bottom:clamp(38px,5vw,68px)}
.me-in{display:grid; gap:clamp(24px,4vw,54px); align-items:center}
@media (min-width:820px){.me-in{grid-template-columns:minmax(0,270px) minmax(0,1fr)}}
/* Several portraits, one shown. Which one is decided when the page opens, so
   coming back gives a different picture; without JavaScript the first stays.
   They are stacked rather than swapped by src, so the change is a fade and
   never a flash of a half-loaded image. */
.me-face{position:relative; width:min(240px,58vw); aspect-ratio:4/5; border-radius:var(--r-lg);
  overflow:hidden; background:var(--raise); box-shadow:var(--shadow)}
.me-face img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 30%; opacity:0; transition:opacity .5s var(--ease)}
.me-face img:first-child,.me-face img.is-on{opacity:1}
.me-face.picked img:first-child:not(.is-on){opacity:0}
@media (prefers-reduced-motion:reduce){.me-face img{transition:none}}
.me-eyebrow{font-family:var(--font-head); font-size:11.5px; letter-spacing:.22em;
  color:var(--brick); margin-bottom:12px}
.me h1{font-family:var(--font-head); color:var(--ink);
  font-size:clamp(34px,5.4vw,58px); line-height:1.12; letter-spacing:.04em; margin:0}
.me-name{display:block; font-family:var(--font-head); font-size:clamp(14px,1.5vw,17px);
  font-weight:400; letter-spacing:.14em; color:var(--muted); margin-top:12px}
.me-lede{color:var(--body); font-size:clamp(15px,1.6vw,17.5px); line-height:1.9;
  margin:18px 0 0; max-width:52ch}
.me-edu{display:inline-flex; align-items:center; gap:9px; margin-top:20px; padding:8px 16px;
  border:1px solid var(--hair); background:var(--raise); border-radius:var(--r-pill);
  font-size:13.5px; color:var(--ink)}
.me-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.me-links a{display:inline-flex; align-items:baseline; gap:8px; padding:9px 16px;
  border-radius:var(--r-pill); background:var(--raise); color:var(--ink);
  border:1px solid var(--hair); font-size:13.5px; text-decoration:none;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.me-links a:hover{border-color:var(--muted); transform:translateY(-2px); text-decoration:none}
.me-links .h{color:var(--muted); font-size:12.5px}

/* a wall of films: two across where there is room, one where there is not */
.films{display:grid; gap:clamp(14px,2vw,22px); margin-top:clamp(24px,3vw,38px);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.films{grid-template-columns:repeat(2,minmax(0,1fr))}}
.films .cap{margin-top:9px; font-size:13.5px; color:var(--muted); line-height:1.65}

/* one thing leading to the next, which is what learning a tool looks like */
.steps{list-style:none; display:grid; gap:clamp(14px,2vw,20px); margin:clamp(26px,3.4vw,38px) 0 0;
  max-width:44rem; margin-inline:auto}
.steps li{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  padding:16px 20px; background:var(--raise); border:1px solid var(--hair); border-radius:var(--r-lg)}
.steps b{font-family:var(--font-head); font-weight:700; font-size:clamp(15px,1.7vw,18px); color:var(--ink)}
.steps b + b::before{content:""; display:inline-block; width:14px; height:14px; margin-right:12px;
  vertical-align:-2px; background:var(--muted);
  -webkit-mask:var(--ico-arrow) center/contain no-repeat; mask:var(--ico-arrow) center/contain no-repeat}
.steps b:last-child{color:var(--brick)}

/* A name that is also a way there. Not named door — that class already belongs
   to the two big cards on the entry page, and an inline link inherited the
   whole card: 592 pixels wide, in the middle of a sentence. */
a.thru{color:inherit; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px; text-decoration-color:var(--btn);
  transition:text-decoration-color .2s var(--ease),color .2s var(--ease)}
a.thru:hover{color:var(--brick); text-decoration-color:var(--brick)}

/* ── a life told in sections ── */
/* A reading column centred in a wide page leaves both margins empty and stacks
   every picture under the words. These sections put the words and the picture
   beside each other and swap sides as you go down, so the page uses its width
   and the eye has somewhere to go. A section with several pictures keeps the
   words at a reading width and spreads the pictures under them; a section with
   none becomes a wider, larger line — a beat rather than a gap. */
.life{border-bottom:1px solid var(--hair)}
.life:last-of-type{border-bottom:0}
.life .wrap{padding-top:clamp(40px,5vw,72px); padding-bottom:clamp(40px,5vw,72px)}
.life-row{display:grid; gap:clamp(22px,3.4vw,52px); align-items:center}
@media (min-width:900px){
  .life-row{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .life-row.flip > .life-t{order:2}
}
.life-t h2{font-family:var(--font-head); font-size:clamp(21px,2.6vw,30px); margin:0 0 14px}
.life-t p{font-size:17px; line-height:1.9; color:var(--body); margin:0 0 14px}
.life-t p:last-child{margin-bottom:0}
.life-i{display:grid; gap:clamp(10px,1.4vw,16px)}
.life-i.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.life-i figure{margin:0}
.life-i a.lb{display:block; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--wash)}
.life-i a.lb img{width:100%; height:100%; object-fit:cover}
.life-i figcaption{margin-top:8px; font-size:12.5px; color:var(--muted)}

/* a section whose words carry it alone */
.life-say{max-width:44rem; margin-inline:auto; text-align:center}
.life-say h2{font-family:var(--font-head); font-size:clamp(22px,3vw,34px); margin:0 0 16px}
.life-say p{font-size:clamp(17px,1.9vw,20px); line-height:1.9; color:var(--body); margin:0 0 14px; text-wrap:pretty}
.life-say p:last-child{margin-bottom:0}

/* and one with more pictures than fit beside it */
.life-wide .life-t{max-width:var(--col); margin-inline:auto; text-align:center}
.life-grid{display:grid; gap:clamp(10px,1.4vw,16px); margin-top:clamp(24px,3vw,38px);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.life-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.life-grid figure{margin:0}
.life-grid a.lb{display:block; aspect-ratio:3/2; border-radius:var(--r); overflow:hidden; background:var(--wash)}
.life-grid a.lb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.life-grid a.lb:hover img{transform:scale(1.04)}
.life-grid figcaption{margin-top:7px; font-size:12.5px; color:var(--muted)}

/* ── a deck you can push sideways ── */
/* Slides are meant to be gone through, not stacked. This is a row that scrolls
   sideways: a swipe on a phone, a trackpad push or the two buttons on a
   desktop, and the arrow keys once a slide has focus. Scroll snapping stops it
   between slides rather than halfway across one. */
.deck{position:relative}
.deck-strip{display:flex; gap:clamp(10px,1.4vw,16px); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding-bottom:12px; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--hair) transparent}
.deck-strip::-webkit-scrollbar{height:8px}
.deck-strip::-webkit-scrollbar-thumb{background:var(--hair); border-radius:100px}
.deck-slide{flex:0 0 min(86%,620px); scroll-snap-align:center; margin:0}
.deck-slide a.lb{display:block; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:var(--wash); border:1px solid var(--hair)}
.deck-slide a.lb img{width:100%; height:100%; object-fit:cover}
.deck-slide figcaption{margin-top:9px; font-size:13px; color:var(--muted); line-height:1.6}
.deck-nav{display:flex; gap:8px; justify-content:flex-end; margin-top:6px}
.deck-nav button{appearance:none; width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid var(--hair); background:var(--raise); color:var(--ink);
  display:grid; place-items:center; transition:border-color .2s var(--ease)}
.deck-nav button::before{content:""; width:15px; height:15px; background:currentColor;
  -webkit-mask:var(--ico-arrow) center/contain no-repeat; mask:var(--ico-arrow) center/contain no-repeat}
.deck-nav button.prev::before{transform:rotate(180deg)}
.deck-nav button:hover{border-color:var(--muted)}
.deck-nav button:disabled{opacity:.35; cursor:default}
@media (prefers-reduced-motion:reduce){.deck-strip{scroll-behavior:auto}}

/* ── figures ── */
figure{margin:0}
/* Two rules, and which applies depends on where the picture is.

   In a grid every tile is the same shape and the picture is cropped to fill it,
   because a row of tiles that steps up and down is worse than a crop. A
   standing photograph is cropped from nearer the top, where the faces are.

   A picture standing on its own is never cropped. It keeps the shape it was
   taken in, and a standing one is held to a column's width so it does not run
   the whole measure and push everything else off a desktop screen. */
.plate{border-radius:var(--r); overflow:hidden; background:var(--wash)}
.plate.tile{aspect-ratio:3/2}
.plate.tile img{height:100%; object-fit:cover}
.plate img{width:100%; height:auto; display:block}
.plate[style*="aspect-ratio"] img{height:100%; object-fit:cover}
img.is-tall{object-position:center 28%}
figure.is-tall > a.lb,figure.is-tall > .plate,
figure.is-tall > figcaption{max-width:min(100%,var(--tall-w)); margin-inline:auto}
/* inside a grid the tile decides, not the picture */
.mosaic figure.is-tall > a.lb,.photos figure.is-tall > a.lb,.split figure.is-tall > a.lb,
.chap .pics:not(.one) figure.is-tall > a.lb,.artefact figure.is-tall > .plate{max-width:none}
figcaption{margin-top:9px; font-size:13px; color:var(--muted); line-height:1.6}
.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(14px,2vw,20px)}
.duo>*{min-width:0}
a.lb{display:block; border-radius:var(--r); overflow:hidden; background:var(--wash)}
a.lb img{width:100%; transition:transform .5s var(--ease)}
a.lb:hover img{transform:scale(1.02)}
a.lb:focus-visible{outline-offset:2px}

/* ── chronology (compact list) ── */
.tl{border-top:1px solid var(--hair)}
.tl-i{display:grid; grid-template-columns:minmax(70px,96px) minmax(0,1fr); gap:clamp(16px,2.6vw,32px);
  padding:20px 0; border-bottom:1px solid var(--hair)}
.tl-y{font-family:var(--font-head); font-size:19px; color:var(--brick);
  font-variant-numeric:tabular-nums; padding-top:1px}
.tl-i h3{margin-bottom:5px}
.tl-i p{font-size:15.5px; color:var(--muted)}
.tl-i p + p{margin-top:8px}

/* ── timeline (the gallery's dated chapters: a line, a dot per date) ── */
.tml{position:relative; padding-left:clamp(28px,4vw,40px); margin:8px 0 10px}
.tml::before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:var(--hair)}
.tml-i{position:relative; padding-bottom:clamp(26px,3.5vw,40px)}
.tml-i:last-child{padding-bottom:6px}
.tml-i::before{content:""; position:absolute; left:calc(-1 * clamp(28px,4vw,40px) + 2px); top:9px; width:12px; height:12px; border-radius:50%;
  background:var(--btn); box-shadow:0 0 0 4px var(--ground)}
.tml-d{font-family:var(--font-head); color:var(--brick); font-size:clamp(17px,1.9vw,20px); letter-spacing:.06em; margin-bottom:10px; line-height:1.5}
.tml-i .body{max-width:var(--read); font-size:17px}
.tml-i .body p{margin:0 0 16px}
.tml-i .body p:last-child{margin-bottom:0}
.tml-i .pics{margin:18px 0 0}
.tml-i aside{margin:18px 0 0}
@media (min-width:900px){
  .tml{padding-left:0}
  .tml::before{left:118px}
  .tml-i{display:grid; grid-template-columns:96px minmax(0,1fr); gap:44px}
  .tml-i::before{left:113px; top:10px}
  .tml-d{text-align:right; margin:0; padding-top:1px}
}

/* ── faq ── */
.faq{border-top:1px solid var(--hair); max-width:var(--read)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer; list-style:none; padding:17px 30px 17px 0; position:relative;
  font-weight:500; color:var(--ink); font-size:16.5px; line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:16px; color:var(--brick);
  font-size:19px; line-height:1; transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px; color:var(--muted); font-size:15.5px}

/* ── cta ── */
.cta{background:var(--wash); border-top:1px solid var(--hair)}
.cta-in{padding:clamp(38px,5vw,60px) 0; display:flex; flex-wrap:wrap; gap:20px 40px;
  align-items:center; justify-content:space-between}
.cta h2{margin-bottom:6px}
.btn{display:inline-flex; align-items:center; gap:9px; background:var(--btn); color:var(--btn-ink);
  padding:13px 24px 11px; border-radius:var(--r-pill); font-weight:500; font-size:15.5px; flex:none;
  transition:transform .2s var(--ease),filter .2s var(--ease)}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05); text-decoration:none}

/* ── news cards ── */
.chips{position:sticky; top:72px; z-index:5; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(20px,3vw,30px); padding:10px 12px;
  border:1px solid var(--glass-line); border-radius:var(--r)}
.chips button{font:inherit; font-size:13.5px; color:var(--body); background:color-mix(in srgb,var(--raise) 70%,transparent); border:1px solid var(--hair);
  border-radius:var(--r-pill); padding:6px 14px 4px; cursor:pointer; line-height:1.6}
.chips button[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.chips button:hover{border-color:var(--muted)}
.news{display:grid; gap:clamp(16px,2.2vw,26px); grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.news>*{min-width:0}
.news[data-empty]::after{content:attr(data-empty); color:var(--muted); font-size:15px}
.nc{display:flex; flex-direction:column; background:var(--raise); border:1px solid var(--hair); border-radius:var(--r);
  overflow:hidden; color:inherit}
.nc[hidden]{display:none}
.nc-img{aspect-ratio:3/2; background:var(--wash); overflow:hidden}
.nc-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.nc:hover .nc-img img{transform:scale(1.03)}
.nc-img.is-blank{display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; letter-spacing:.2em}
.nc-b{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1}
.nc-k{font-size:12px; color:var(--brick); letter-spacing:.08em; display:flex; gap:10px; flex-wrap:wrap}
.nc-k time{color:var(--muted); letter-spacing:0; font-variant-numeric:tabular-nums}
.nc h3{font-size:16px; line-height:1.5; color:var(--ink)}
.nc p{font-size:14px; color:var(--muted); line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.nc-c{margin-top:auto}

/* a compact facts row, for use inside a column */
.mini-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:18px clamp(16px,2vw,28px); margin-top:24px}
.mini-facts dl{margin:0}
.mini-facts dt{font-family:var(--font-head); font-size:clamp(22px,2.4vw,28px); font-weight:700; color:var(--ink); line-height:1.2; font-variant-numeric:tabular-nums}
.mini-facts dd{margin:4px 0 0; font-size:13px; color:var(--muted); line-height:1.5}

/* ── core: the six aims, illustrated ── */
.aims{display:grid; gap:clamp(16px,2.2vw,24px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media (min-width:960px){.aims{grid-template-columns:repeat(3,1fr)}}
.aim{position:relative; display:block; overflow:hidden; border-radius:var(--r); background:#0A0500; color:#fff; isolation:isolate}
.aim img{width:100%; aspect-ratio:4/3; object-fit:cover; opacity:.62; transition:transform .6s var(--ease),opacity .4s var(--ease)}
.aim:hover img{transform:scale(1.05); opacity:.72}
.aim .b{position:absolute; inset:auto 0 0 0; padding:20px 22px 22px;
  background:linear-gradient(180deg,rgba(10,5,0,0),rgba(10,5,0,.78) 42%,rgba(10,5,0,.94))}
.aim .n{font-family:var(--font-head); font-size:12px; letter-spacing:.18em; color:rgba(255,255,255,.72)}
.aim h3{color:#fff; font-family:var(--font-head); font-size:20px; margin:6px 0 8px}
.aim p{font-size:14.5px; color:rgba(255,255,255,.9); line-height:1.75}

/* ── community ── */
.community{display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:minmax(0,1fr)}
@media (min-width:920px){.community{grid-template-columns:500px minmax(0,1fr)}}
.soc-list{display:grid; gap:14px; align-content:start}
.soc{display:flex; align-items:center; gap:16px; padding:18px 20px; background:var(--raise);
  border:1px solid var(--hair); border-radius:var(--r); color:inherit}
.soc-i{display:flex; flex:none; width:46px; height:46px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; color:#fff}
.soc-i.ig{background:linear-gradient(45deg,#F09433,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888)}
.soc-i.fb{background:#1877F2}
.soc-i.yt{background:#FF0000}
.soc-t{min-width:0; flex:1; display:block}
.soc-t .h{display:block; font-size:11px; letter-spacing:.16em; color:var(--muted)}
.soc-t .nm{display:block; margin:2px 0; font-size:16px; font-weight:700; color:var(--ink); line-height:1.5}
.soc-t .d{display:block; font-size:13.5px; color:var(--muted); line-height:1.6}
.soc .go{flex:none; font-size:13px; color:var(--brick); white-space:nowrap}
/* The Facebook timeline is a column of posts, not a 16:9 frame, so it is a
   kind of its own. These rules were once written for bare .embed and reached
   every click-to-load video on every site: the iframe came out 620px tall
   inside a 16:9 box and the picture sat cut off, low in its frame. */
.embed.feed{border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; background:var(--raise); box-shadow:var(--shadow); aspect-ratio:auto}
.embed.feed .h{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--hair); background:var(--wash)}
.embed.feed .h span{font-size:13px; color:var(--muted); letter-spacing:.06em}
.embed.feed .h .dot{width:9px; height:9px; border-radius:50%; background:var(--btn); flex:none}
.embed.feed iframe{position:static; display:block; width:100%; max-width:100%; height:620px; border:0}
.soc-list{gap:16px}

/* ── article ── */
.post{max-width:var(--read); margin-inline:auto; font-size:17px; overflow-wrap:anywhere}
.post p{margin:0 0 18px}
.post h2{font-size:clamp(19px,2.2vw,24px); margin:30px 0 10px}
.post ul,.post ol{margin:0 0 18px; padding-left:1.4em}
.post li{margin:4px 0}
.post hr{border:0; border-top:1px solid var(--hair); margin:26px 0}
.post figure{margin:22px 0}
.post figure img{width:100%}
.post .gal{columns:3 170px; column-gap:10px; margin:22px 0}
.post .gal figure{margin:0 0 10px; break-inside:avoid}
.post .gal a.lb img{width:100%; height:auto}
.post .video{position:relative; aspect-ratio:16/9; background:#000; border-radius:var(--r); overflow:hidden; margin:22px 0}
.post .video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.post .ext a,.post .file a{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:8px 16px 6px; font-size:14.5px; background:var(--raise)}
.post .ext a:hover,.post .file a:hover{text-decoration:none; border-color:var(--muted)}
.note{background:var(--wash); border:1px solid var(--hair); border-left:3px solid var(--btn); border-radius:var(--r); padding:12px 16px;
  font-size:14.5px; color:var(--muted); margin-bottom:26px; max-width:var(--read)}
.post-tags{margin-top:30px; display:flex; flex-wrap:wrap; gap:8px}
.post-tags span{font-size:12.5px; color:var(--muted); border:1px solid var(--hair); border-radius:var(--r-pill); padding:3px 10px 2px}
.post-nav{margin-top:clamp(30px,4vw,44px); padding-top:22px; border-top:1px solid var(--hair);
  display:grid; grid-template-columns:1fr 1fr; gap:20px; font-size:14.5px}
.post-nav a{display:block}
.post-nav .k{font-size:11.5px; letter-spacing:.18em; color:var(--muted); margin-bottom:4px}
.post-nav .nx{text-align:right}

/* ── legal pages ── */
.legal{max-width:var(--read); margin-inline:auto; font-size:16.5px}
.legal h2{font-size:clamp(18px,2vw,22px); margin:32px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 16px; color:var(--body)}
.legal .upd{font-size:14px; color:var(--muted); margin-top:30px; padding-top:16px; border-top:1px solid var(--hair)}

/* ── exhibition: zone cards, artefact strip, mosaic, quote panel ── */
.zones{display:grid; gap:clamp(16px,2.2vw,26px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media (min-width:960px){.zones{grid-template-columns:repeat(3,1fr)}}
.zone{position:relative; display:flex; flex-direction:column; overflow:hidden; color:inherit;
  background:var(--raise); border:1px solid var(--hair); border-radius:var(--r)}
.zone-i{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--wash)}
.zone-i img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.zone:hover .zone-i img{transform:scale(1.04)}
.zone-n{position:absolute; left:14px; top:14px; z-index:2; font-family:var(--font-head); font-size:12px; letter-spacing:.18em;
  color:#fff; background:rgba(10,5,0,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25); border-radius:var(--r-pill); padding:5px 12px 3px}
.zone-b{padding:20px 22px 24px; display:flex; flex-direction:column; gap:6px; flex:1}
.zone-b h3{font-family:var(--font-head); font-size:19px}
.zone-b p{font-size:14.5px; color:var(--muted)}
.zone-b .go{margin-top:auto; padding-top:10px; font-size:13.5px; color:var(--brick)}

.mosaic{display:grid; gap:clamp(8px,1.2vw,14px); grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(110px,auto)}
@media (min-width:700px){.mosaic{grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto)}
  .mosaic>*:nth-child(1){grid-column:span 2; grid-row:span 2}
  .mosaic>*:nth-child(6){grid-column:span 2}}
.mosaic figure{margin:0; height:100%}
.mosaic a.lb{height:100%}
.mosaic a.lb img{height:100%; object-fit:cover; object-position:center 40%}
.mosaic figcaption{display:none}

.panel{position:relative; overflow:hidden; background:#0A0500; color:#fff; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.panel .bgimg{position:absolute; inset:0; opacity:.28}
.panel .bgimg img{width:100%; height:100%; object-fit:cover}
.panel .wrap{position:relative; z-index:1; padding-top:clamp(52px,7vw,92px); padding-bottom:clamp(52px,7vw,92px); text-align:center}
.panel .k{font-size:11.5px; letter-spacing:.24em; color:rgba(255,255,255,.72); margin-bottom:18px}
.panel blockquote{margin:0 auto; max-width:46ch; font-family:var(--font-head); font-size:clamp(18px,2.4vw,26px);
  line-height:2; color:#fff; text-wrap:balance}
.panel cite{display:block; margin-top:20px; font-style:normal; font-size:13.5px; color:rgba(255,255,255,.72); letter-spacing:.1em}

.artefacts{display:grid; gap:clamp(14px,2vw,22px); grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.artefact{background:var(--raise); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; color:inherit}
.artefact .plate{border-radius:0; aspect-ratio:4/3}
.artefact .plate img{height:100%; object-fit:cover}
.artefact .b{padding:16px 18px 20px}
.artefact .k{font-size:11.5px; letter-spacing:.14em; color:var(--muted)}
.artefact h3{font-family:var(--font-head); font-size:17px; margin:4px 0 8px}
.artefact .go{font-size:13px; color:var(--brick)}

/* the chapter banner: a cover photo behind the page head */
.chead{position:relative; border-bottom:1px solid var(--hair); background:#0A0500; overflow:hidden}
.chead-i{position:absolute; inset:0}
.chead-i img{width:100%; height:100%; object-fit:cover; opacity:.5}
.chead-v{position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,5,0,.5),rgba(10,5,0,.86))}
.chead .wrap{position:relative; z-index:1; padding-top:clamp(52px,7vw,88px); padding-bottom:clamp(30px,4vw,44px)}
.chead .eyebrow{color:rgba(255,255,255,.82)}
.chead h1{font-family:var(--font-head); font-weight:700; color:#fff; font-size:clamp(27px,4vw,44px); line-height:1.25; text-wrap:balance}
.chead p{margin-top:14px; color:rgba(255,255,255,.86); font-size:16.5px; max-width:60ch}
.chead .chap-nav a{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.chead .chap-nav a:hover{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4)}
.chead .chap-nav .n{color:#FFB4A8}

/* ── history: chapters ── */
.chap-nav{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:22px}
.chap-nav a{display:flex; gap:12px; align-items:baseline; padding:12px 14px; background:var(--raise); border:1px solid var(--hair);
  border-radius:var(--r); color:var(--ink); font-size:15px; line-height:1.5}
.chap-nav a:hover{text-decoration:none; border-color:var(--muted)}
.chap-nav .n{font-family:var(--font-head); color:var(--brick); font-size:13px; letter-spacing:.1em; flex:none}
.chap{scroll-margin-top:88px}
/* A column of text narrower than the page is centred in it. Left-aligned it
   leaves half the screen empty on a desktop and the page reads as broken. The
   heading has to move with its text or the two no longer share an edge. */
.chap .body{font-size:17px}
.chap > .wrap > h2,.chap .body,.chap aside,.chap .pics.one{max-width:var(--col); margin-inline:auto}
.chap .body p{margin:0 0 18px}
.chap h3{font-family:var(--font-head); font-size:clamp(18px,2.1vw,22px); margin:34px 0 12px; color:var(--ink)}
.chap h3:first-child{margin-top:0}
.chap .pics{display:grid; gap:clamp(12px,1.8vw,18px); margin:22px 0 26px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.chap .pics.one{grid-template-columns:1fr}
.chap .pics figure{margin:0}
.chap .pics a.lb img{width:100%}
/* several pictures side by side share one shape and are cropped to it */
.chap .pics:not(.one) a.lb{aspect-ratio:3/2}
.chap .pics:not(.one) a.lb img{height:100%; object-fit:cover}
.chap aside{background:var(--wash); border:1px solid var(--hair); border-radius:var(--r); padding:18px 20px 20px; margin:22px 0 26px;
  display:grid; gap:16px; grid-template-columns:1fr; max-width:var(--read)}
.chap aside.has-pic{grid-template-columns:minmax(0,220px) minmax(0,1fr); align-items:start}
@media (max-width:560px){.chap aside.has-pic{grid-template-columns:1fr}}
.chap aside .k{font-family:var(--font-head); color:var(--brick); font-size:13px; letter-spacing:.12em; margin-bottom:6px}
.chap aside p{font-size:15px; color:var(--body); margin:0}
.chap aside figure{margin:0}
.chap aside figcaption{display:none}
.photos{columns:4 200px; column-gap:clamp(10px,1.6vw,16px)}
.photos figure{margin:0 0 clamp(10px,1.6vw,16px); break-inside:avoid}
.photos a.lb img{width:100%; height:auto}
.quote{font-family:var(--font-head); font-size:clamp(17px,2vw,21px); line-height:1.9; color:var(--ink); max-width:var(--read)}
.quote p{margin:0}
.chap .verse{font-family:var(--font-head); color:var(--ink); border-left:2px solid var(--brick); padding-left:18px; margin:26px 0; line-height:2}

/* ── lightbox ── */
.lbx{border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; margin:0}
.lbx::backdrop{background:rgba(10,8,7,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
.lbx-in{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:56px 16px 24px}
.lbx img{max-width:min(100%,1600px); max-height:calc(100vh - 120px); width:auto; height:auto; object-fit:contain; border-radius:var(--r-sm); box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lbx figcaption{color:rgba(255,255,255,.85); font-size:13.5px; margin-top:12px; text-align:center; max-width:70ch;
  background:rgba(255,255,255,.08); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:8px 16px; border-radius:var(--r-pill)}
.lbx button{position:fixed; font:inherit; background:rgba(255,255,255,.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:var(--r-pill);
  width:44px; height:44px; cursor:pointer; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center}
.lbx button:hover{background:rgba(255,255,255,.26)}
.lbx .x{top:12px; right:12px}
.lbx .p{left:10px; top:50%; transform:translateY(-50%)}
.lbx .q{right:10px; top:50%; transform:translateY(-50%)}
.lbx .c{position:fixed; top:22px; left:16px; color:rgba(255,255,255,.7); font-size:13px; font-variant-numeric:tabular-nums}

/* ── footer ── */
.foot{border-top:1px solid var(--hair); background:var(--wash)}
.foot-top{border-bottom:1px solid var(--hair)}
.foot-top .wrap{display:grid; gap:clamp(20px,3vw,40px); padding-top:clamp(32px,4vw,48px); padding-bottom:clamp(32px,4vw,48px);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.foot-top .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center}}
.foot-map{border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; background:var(--raise); box-shadow:var(--shadow)}
.foot-map iframe{display:block; width:100%; height:260px; border:0}
.foot-c dt{font-size:11.5px; letter-spacing:.2em; color:var(--muted); margin-bottom:10px}
.foot-c .nm{font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:19px; margin-bottom:10px}
.foot-c a,.foot-c address{display:block; color:var(--body); font-size:15.5px; padding:3px 0}
.foot-c a:hover{color:var(--brick)}
.foot-in{max-width:var(--max); margin:0 auto; padding:clamp(36px,4.5vw,56px) clamp(20px,4vw,32px) 30px;
  display:grid; gap:clamp(26px,4vw,52px); grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media (min-width:960px){.foot-in{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.foot-in>*{min-width:0}
/* A fixed height plus the global max-width:100% squashes a wide wordmark
   sideways as soon as the footer column is narrower than the mark: the width
   is clamped while the height is not. Limiting both instead lets the picture
   keep its shape and simply come out smaller. */
.foot-brand img{height:auto; width:auto; max-height:46px; max-width:100%; margin-bottom:14px}
.foot-zh{font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:18px}
.foot-en{font-size:12px; color:var(--muted); letter-spacing:.06em; margin-top:6px; line-height:1.7}
.foot-tag{font-size:14px; color:var(--body); margin-top:14px; max-width:36ch}
.foot-soc{display:flex; gap:10px; margin-top:18px}
.foot-soc a{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hair); color:var(--body); background:var(--raise); transition:transform .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.foot-soc a:hover{color:var(--btn-ink); background:var(--btn); border-color:var(--btn); transform:translateY(-2px)}
.foot-h{font-size:11.5px; letter-spacing:.2em; color:var(--muted); margin-bottom:12px}
.foot-col a{display:block; color:var(--body); font-size:15px; padding:4px 0; transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--brick); text-decoration:none}
.foot-p{font-size:15px; color:var(--body); padding:4px 0}
.foot-base{border-top:1px solid var(--hair)}
.foot-base .wrap{padding-top:18px; padding-bottom:36px; display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center;
  font-size:12.5px; color:var(--muted)}
.foot-base a{color:var(--muted); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hair)}
.foot-base a:hover{color:var(--ink)}
.foot-legal{display:flex; flex-wrap:wrap; gap:8px 18px}
.foot-up{margin-left:auto; text-decoration:none!important; border:1px solid var(--hair); border-radius:var(--r-pill); padding:6px 14px 4px; white-space:nowrap}
.foot-up:hover{border-color:var(--muted)}
/* The licence sits on its own line under everything else: it applies to the
   whole page rather than to any one thing in the row above it. */
.foot-licence{flex-basis:100%; padding-top:14px; border-top:1px solid var(--hair); line-height:1.7}

/* ── motion: sections and cards rise in as they enter the viewport ── */
.rv{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1; transform:none}
.hero-body .wrap>*{animation:rise .9s var(--ease) both}
.hero-body .wrap>*:nth-child(2){animation-delay:.12s}
.hero-body .wrap>*:nth-child(3){animation-delay:.24s}
.hero-body .wrap>*:nth-child(4){animation-delay:.36s}
@keyframes rise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .loader{display:none}
  .hero-img img.is-loading{filter:none; transform:none}
  .hero-img.slides img.is-on{animation:none; transform:none}
  .hero-dust{display:none}
  .rv{opacity:1; transform:none}
}
:root{
  color-scheme: dark;
  /* not black — the shirt is warm, so the ground under it is too */
  --ground:#1A1613; --raise:#252019; --wash:#1F1A16;
  --ink:#FFFFFF; --body:#E2DAD5; --muted:#A2948C; --hair:#332722;
  --brick:#F0C05A; --btn:#C8322B; --btn-ink:#FFFFFF;
  --red:#D23A2E; --gold:#F0C05A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 6px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.35);
  --shadow-lg:0 4px 14px rgba(0,0,0,.45), 0 26px 70px rgba(0,0,0,.4);
  /* the jersey, softened into light: red burning into gold */
  --flare:linear-gradient(100deg,#B9271F 0%,#D23A2E 32%,#E88A34 62%,#F0C05A 100%);
  /* film grain, drawn rather than fetched, so it costs no request */
  --grain: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* two lights on the page, one red and one gold, and grain over everything.
   Fixed, so the glow stays where it is while the page moves past it. */
body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(58vw 42vh at 2% -8%, rgba(210,58,46,.24), transparent 62%),
    radial-gradient(52vw 40vh at 100% 10%, rgba(240,160,70,.13), transparent 60%),
    radial-gradient(70vw 40vh at 50% 108%, rgba(184,39,31,.16), transparent 64%)}
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); opacity:.13; mix-blend-mode:overlay}

/* the team's own marks: the ball drawn for the club, and the alumni club's
   flag. Used where each belongs rather than everywhere. */
.t-mark{display:block; height:clamp(34px,4.4vw,52px); width:auto; margin:0 0 12px;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.pmark{height:clamp(56px,7vw,84px); width:auto; margin-bottom:14px; display:block}
.amark{width:clamp(72px,9vw,104px); height:auto; display:block; margin-bottom:12px}

/* The banner turns over the way a projector changes a slide: the frame that
   is leaving loses focus and light first, and only when it has gone dark does
   the next one come up. Nothing slides, nothing sweeps across the picture. */
.t-hero .slides img{opacity:0; filter:blur(16px) brightness(.25);
  transition:opacity .65s var(--ease), filter .65s var(--ease); will-change:opacity,filter}
.t-hero .slides img.is-on{opacity:1; filter:blur(0) brightness(1);
  transition:opacity 1s var(--ease) .5s, filter 1.2s var(--ease) .5s}
@media (prefers-reduced-motion:reduce){
  .t-hero .slides img{filter:none; transition:opacity .4s}
  .t-hero .slides img.is-on{transition:opacity .4s}
}

/* The words sit on the picture, so the picture is darkened under them —
   from the bottom, and from the left where the line starts — rather than the
   whole frame being dimmed. */
.t-scrim{position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(180deg, rgba(12,9,8,.55) 0%, rgba(12,9,8,.12) 26%, rgba(12,9,8,.62) 68%, rgba(12,9,8,.92) 100%),
    linear-gradient(90deg, rgba(12,9,8,.7) 0%, rgba(12,9,8,.28) 42%, transparent 72%)}
.t-hero-b{z-index:2}

/* the jersey band, as light instead of paint */
.hoops{position:relative; height:5px; background:var(--flare); overflow:visible}
.hoops::after{content:""; position:absolute; inset:-18px 0 -18px; pointer-events:none;
  background:var(--flare); filter:blur(22px); opacity:.2}
.hoops-thin{height:3px; background:var(--flare)}
.hoops-up{margin-top:clamp(40px,6vw,72px)}
@media (prefers-reduced-motion:no-preference){
  .hoops::after{transition:opacity .4s var(--ease)}
}

.t-hero{background:transparent}
.t-hero-i img{opacity:1}
.t-hero h1{color:#fff}
.t-hero p{color:rgba(255,255,255,.92)}
/* the eyebrow catches the same light the bands do */
.t-since{background:var(--flare); -webkit-background-clip:text; background-clip:text; color:transparent}

/* sections sit on the glow rather than on a flat block */
.band{background:rgba(255,255,255,.035)}
.card,.soc a{background:rgba(255,255,255,.045); backdrop-filter:blur(8px); border-color:rgba(255,255,255,.09)}

/* the loading screen is made of the same light: the glow, the grain, and a
   bar that fills in the colours of the shirt */
.loader{background:#1A1613}
.loader::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(52vw 40vh at 20% 16%, rgba(210,58,46,.34), transparent 66%),
    radial-gradient(48vw 38vh at 82% 84%, rgba(240,192,90,.2), transparent 64%)}
.loader::after{content:""; position:absolute; inset:0;
  background-image:var(--grain); opacity:.2; mix-blend-mode:overlay}
.loader img,.loader .bar,.loader .t{position:relative; z-index:1}
.loader .bar{background:rgba(255,255,255,.14)}
.loader .bar span{background:var(--flare)}
.loader .t{background:var(--flare); -webkit-background-clip:text; background-clip:text; color:transparent}
.loader.is-slim{background:none}
.loader.is-slim::before,.loader.is-slim::after{display:none}
.loader.is-slim .bar span{background:var(--flare)}

/* Four numbers in a row, each in its own cell with a hairline between, so
   they read as one line of facts rather than four stray headings. The labels
   are short enough to sit on one line at every width the row survives. */
.nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:0; margin:0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.nums>div{padding:clamp(22px,3vw,34px) clamp(14px,2vw,26px);
  border-left:1px solid var(--hair); display:flex; flex-direction:column; justify-content:flex-start}
.nums>div:first-child{border-left:0; padding-left:0}
.nums dt{font-family:var(--font-head); font-weight:700; font-size:clamp(30px,4.2vw,46px);
  line-height:1; color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.nums dd{margin:12px 0 0; font-size:13.5px; line-height:1.65; color:var(--muted); max-width:22ch}
@media (max-width:560px){
  .nums>div{border-left:0; border-top:1px solid var(--hair); padding-left:0}
  .nums>div:first-child{border-top:0}
}

/* two ways on from the hero */
.t-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.btn{display:inline-block; background:var(--btn); color:var(--btn-ink); border-radius:var(--r-pill);
  padding:12px 26px; font-family:var(--font-head); font-size:15.5px; letter-spacing:.04em}
.btn:hover{text-decoration:none; transform:translateY(var(--lift)); box-shadow:var(--shadow)}
.btn.ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5)}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold)}

/* what each scholarship is, and who pays it */
.money{border-top:1px solid var(--hair); margin-top:clamp(20px,2.6vw,30px)}
.money-r{display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:4px clamp(14px,2.6vw,28px);
  padding:16px 0; border-bottom:1px solid var(--hair)}
.money-w{font-family:var(--font-head); font-size:14px; color:var(--gold); margin:0}
.money-k{font-size:15.5px; color:var(--ink); margin:0}
.money-v{grid-column:2; margin:0; font-size:15px; line-height:1.8; color:var(--muted)}
@media (max-width:560px){ .money-r{grid-template-columns:1fr} .money-v{grid-column:1} }

/* the article index, set out like a team sheet */
.sheet{border-top:1px solid var(--hair)}
.sheet a{display:grid; grid-template-columns:56px 108px minmax(0,1fr) auto; align-items:center;
  gap:clamp(12px,2.4vw,24px); padding:14px 0; border-bottom:1px solid var(--hair); color:inherit}
.s-i{display:block; overflow:hidden; border-radius:var(--r-sm); aspect-ratio:3/2}
.s-i img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.sheet a:hover .s-i img{transform:scale(1.06)}
.sheet a:hover{text-decoration:none; background:var(--raise)}
.sheet a:hover .s-t{color:var(--gold)}
.s-no{font-family:var(--font-head); font-weight:700; font-size:26px; color:var(--red);
  font-variant-numeric:tabular-nums; text-align:center;
  border-left:4px solid var(--gold); padding-left:10px; line-height:1.2}
.s-k{display:block; font-size:12px; letter-spacing:.14em; color:var(--muted); font-family:var(--font-head)}
.s-t{display:block; font-family:var(--font-head); font-size:clamp(17px,2.1vw,21px); margin:4px 0 0; line-height:1.35; transition:color .2s}
.s-go{font-size:13.5px; color:var(--muted); white-space:nowrap}
@media (max-width:640px){ .sheet a{grid-template-columns:44px 84px minmax(0,1fr)} .s-go{display:none} }

/* an era: the years stay beside the reader as the chapter goes past */
.era{display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:clamp(20px,4vw,54px);
  padding:clamp(30px,4.6vw,56px) 0; border-bottom:1px solid var(--hair)}
.era-y{font-family:var(--font-head); font-weight:700; color:var(--gold); font-size:15px;
  letter-spacing:.1em; font-variant-numeric:tabular-nums}
.era h2{font-family:var(--font-head); font-size:clamp(21px,2.8vw,30px); margin:10px 0 0; line-height:1.3}
.era p{font-size:16px; line-height:1.95; color:var(--body); margin:0 0 1.05em; max-width:60ch}
.era p:last-child{margin-bottom:0}
@media (min-width:900px){ .era-h{position:sticky; top:96px; align-self:start} }
@media (max-width:899px){ .era{grid-template-columns:1fr; gap:14px} }

/* a run of posts, each whole */
.feed{max-width:min(100%,760px)}
.post{padding:clamp(26px,3.6vw,44px) 0; border-bottom:1px solid var(--hair)}
.post:first-child{padding-top:0}
.post-d{font-family:var(--font-head); font-size:13px; letter-spacing:.14em; color:var(--gold); margin:0}
.post h3{font-family:var(--font-head); font-size:clamp(19px,2.4vw,25px); line-height:1.35; margin:8px 0 0}
.post-b p{font-size:16px; line-height:1.95; color:var(--body); margin:1em 0 0; white-space:pre-line}
.post .photos{margin-top:clamp(16px,2.2vw,24px)}
.post-t{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.post-t span{font-size:12.5px; color:var(--muted)}

/* one article */
.art{max-width:var(--col); margin:0 auto}
.art-k{font-family:var(--font-head); font-size:12.5px; letter-spacing:.16em; color:var(--gold)}
.art h1{font-family:var(--font-head); font-size:clamp(26px,4.2vw,42px); line-height:1.22; margin:12px 0 0}
.art-b p{font-size:16.5px; line-height:2.05; color:var(--body); margin:0 0 1.25em}
.art-b p:first-child::first-letter{font-family:var(--font-head); font-weight:700; float:left;
  font-size:3.1em; line-height:.86; padding:.06em .1em 0 0; color:var(--red)}
.art-c{margin-top:clamp(26px,3.4vw,38px); padding-top:20px; border-top:1px solid var(--hair);
  font-size:14px; color:var(--muted); line-height:1.8}
.art-tags{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.art-tags span{font-size:12.5px; color:var(--gold); border:1px solid var(--hair);
  border-radius:var(--r-pill); padding:4px 11px}
.cap-n{color:var(--muted)}
.art-nav{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; margin-top:clamp(30px,4vw,46px)}

/* what the game is, in the order a first-time viewer needs it */
.rules{counter-reset:r}
.rules li{position:relative; padding:0 0 0 46px; margin:0 0 18px; font-size:16px; line-height:1.9; color:var(--body)}
.rules li::before{counter-increment:r; content:counter(r); position:absolute; left:0; top:1px;
  width:30px; height:30px; border-radius:50%; background:var(--red); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:14px; display:grid; place-items:center}
.score{border-top:1px solid var(--hair)}
.score-r{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px clamp(14px,2.6vw,28px);
  padding:18px 0; border-bottom:1px solid var(--hair)}
.score-n{font-family:var(--font-head); font-size:17px; color:var(--ink)}
.score-v{font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--gold); white-space:nowrap}
.score-p{grid-column:1/-1; margin:0; font-size:15.5px; line-height:1.85; color:var(--muted)}

/* a verse is sung, so it keeps its line breaks */
.verse{margin:0 0 1.4em; padding:16px 0 16px 20px; border-left:4px solid var(--gold);
  font-family:var(--font-head); font-size:clamp(17px,2.2vw,21px); line-height:1.75; color:var(--ink)}
.verse span{display:block}
/* a short table of facts about a piece of work */
.spec{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2px 26px; margin:0}
.spec div{display:grid; grid-template-columns:minmax(60px,86px) minmax(0,1fr); gap:14px;
  padding:12px 0; border-bottom:1px solid var(--hair)}
.spec dt{font-size:13.5px; color:var(--muted); font-family:var(--font-head); letter-spacing:.06em}
.spec dd{margin:0; font-size:15.5px; color:var(--body); line-height:1.7}

/* a figure from the survey, set at the size of the finding */
.poll{font-family:var(--font-head); font-weight:700; font-size:clamp(38px,6vw,60px);
  line-height:1; color:var(--red); font-variant-numeric:tabular-nums; margin:0}
.schools{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0}
.schools li{font-size:14.5px; color:var(--body); border:1px solid var(--hair);
  border-radius:var(--r-pill); padding:6px 14px; background:var(--raise)}

/* the two places the team posts */
.soc{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:22px}
.soc a{display:block; padding:20px 22px; background:var(--raise); border:1px solid var(--hair);
  border-radius:var(--r); color:inherit}
.soc a:hover{text-decoration:none; border-color:var(--gold); transform:translateY(var(--lift))}
.soc b{display:block; font-family:var(--font-head); font-size:17px}
.soc span{display:block; margin-top:4px; font-size:14px; color:var(--muted)}

.t-hero{position:relative; overflow:hidden; padding:0}
.t-hero-i{position:relative; height:clamp(340px,62vh,580px)}
.t-hero-i img{width:100%; height:100%; object-fit:cover; object-position:center 38%}
.t-hero-b{position:absolute; inset:auto 0 0 0; padding-bottom:clamp(30px,4.4vw,54px)}
.t-since{font-family:var(--font-head); font-size:12.5px; letter-spacing:.24em}
.t-hero h1{font-family:var(--font-head); font-size:clamp(32px,6.4vw,68px); line-height:1.06; margin:10px 0 0}
.t-hero p{font-size:clamp(15px,1.7vw,18px); line-height:1.8; margin:14px 0 0; max-width:54ch}
.t-line{border-top:1px solid var(--hair)}
.t-row{display:grid; grid-template-columns:minmax(72px,104px) minmax(0,1fr); gap:clamp(14px,2.6vw,30px);
  padding:20px 0; border-bottom:1px solid var(--hair)}
.t-year{font-family:var(--font-head); font-size:clamp(17px,2.1vw,22px); color:var(--brick); font-variant-numeric:tabular-nums}
.t-row p{font-size:16px; line-height:1.9; color:var(--body); margin:0}