:root{
  --red:#D6231B;--red-dark:#B01A13;--ink:#1D1D1F;--ink-2:#6E6E73;--ink-3:#86868B;
  --white:#FFF;--grey:#F5F5F7;--max:800px;--pill:980px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--white);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

nav{position:sticky;top:0;z-index:100;height:52px;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08)}
.navin{max-width:1024px;margin:0 auto;padding:0 22px;height:52px;display:flex;align-items:center;gap:26px}
.navbrand{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:15px;font-weight:600;letter-spacing:-.02em}
.navbrand:hover{text-decoration:none}
.navbrand img{width:26px;height:26px;border-radius:50%}
.navlinks{display:flex;gap:22px;margin-left:auto;align-items:center}
.navlinks a{color:var(--ink);font-size:13px;opacity:.85}
.navlinks a:hover{opacity:1;text-decoration:none}
.navlinks a.join{background:var(--red);color:#fff;padding:5px 14px;border-radius:var(--pill);font-weight:500;opacity:1}

main{padding:56px 0 72px}
.crumb{font-size:13px;color:var(--ink-3);margin-bottom:14px}
h1{font-size:clamp(30px,5vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin-bottom:30px}
h2{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:26px 0 8px;line-height:1.35}
h3{font-size:17px;font-weight:600;color:var(--ink-2);margin:22px 0 6px;line-height:1.4}
main p{color:var(--ink-2);margin:10px 0;line-height:1.6}

.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:40px 0}
.gal img{width:100%;border-radius:14px;box-shadow:0 3px 14px rgba(0,0,0,.10)}
.backlink{margin-top:44px;padding-top:26px;border-top:1px solid rgba(0,0,0,.10);font-size:15px}

/* history index */
.hgroup{margin-top:44px}
.hgroup h2{font-size:14px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.hlist{display:grid;gap:10px}
.hlist a{display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:var(--grey);border-radius:12px;padding:16px 20px;color:var(--ink);font-size:16px;font-weight:500}
.hlist a:hover{text-decoration:none;background:#ECECEF}
.hlist a span.t{color:var(--ink);flex:1}
.hlist a span:last-child{color:var(--red);font-size:15px}
.lede{font-size:19px;color:var(--ink-2);margin-bottom:8px;line-height:1.45}

footer{border-top:1px solid rgba(0,0,0,.08);background:var(--grey);padding:34px 0;font-size:13px;color:var(--ink-3)}
footer p{margin:4px 0}
footer a{color:var(--ink-2)}
.arch{color:var(--ink-3)}

@media (max-width:700px){ .gal{grid-template-columns:1fr} main{padding:38px 0 56px} }