:root { --navy:#1c2030; --rust:#b4634a; --blue:#6e8ba5; --pink:#dcc5ba; --light:#e6d8ce; --muted:#b4b8c2; --nav:56px; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { background:var(--navy); color:var(--light); font-family:'Inter',system-ui,sans-serif; }
/* Space Grotesk for everything that is a title or a label; Inter for reading. */
h1, h2, h3, nav, .eyebrow, .hint, .btn, .when, .claim, .tag { font-family:'Space Grotesk',system-ui,sans-serif; }

nav.top { position:fixed; top:0; left:0; right:0; height:var(--nav); z-index:5; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:0 clamp(16px,4vw,48px); background:rgba(28,32,48,.9); backdrop-filter:blur(8px); }
nav .brand { font-weight:700; letter-spacing:-.01em; color:var(--light); text-decoration:none; white-space:nowrap; }
nav .links { display:flex; gap:clamp(12px,2vw,28px); font-size:14px; overflow-x:auto; }
nav .links a { color:var(--muted); text-decoration:none; white-space:nowrap; }
nav .links a:hover { color:var(--light); }

/* The tile wall is one fixed canvas. While the page scrolls, it moves into the right half. */
#c { position:fixed; inset:0; width:100vw; height:100vh; z-index:1; pointer-events:none; }

.top-hero { position:relative; height:85vh; z-index:4; pointer-events:none; }
.hero { pointer-events:auto; position:absolute; left:clamp(16px,6vw,96px); bottom:clamp(24px,8vh,96px);
  background:var(--navy); padding:28px 32px; max-width:min(600px,calc(100vw - 32px)); }
.hero h1 { font-size:clamp(40px,7vw,92px); line-height:.95; font-weight:700; letter-spacing:-.02em; }
.hero p { margin-top:16px; font-size:clamp(16px,1.8vw,20px); color:var(--muted); line-height:1.4; }
.hero .claim { color:var(--light); font-weight:600; font-size:clamp(20px,2.4vw,28px); line-height:1.25; letter-spacing:-.01em; }
.hero .bar { display:flex; gap:6px; margin-bottom:18px; }
.hero .bar i { width:28px; height:8px; display:block; }
.hint { position:absolute; right:clamp(16px,4vw,48px); bottom:16px; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--light); background:var(--navy); padding:8px 12px; opacity:0; }

main { position:relative; z-index:2; background:var(--navy); width:50vw; padding:0 clamp(16px,5vw,80px) 6vh; }
section.block { padding:12vh 0 2vh; scroll-margin-top:var(--nav); }
section.block:first-child { padding-top:5vh; }
.eyebrow { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--rust); margin-bottom:14px; }
h2 { font-size:clamp(28px,3.4vw,44px); font-weight:700; letter-spacing:-.02em; line-height:1.1; }
main p { color:var(--muted); line-height:1.6; font-size:17px; margin-top:16px; max-width:52ch; }
/* Work items and meetups share one look: a thin line above, a clay date line and a title. */
.item, .event { border-top:1px solid rgba(230,216,206,.15); padding:22px 0 4px; margin-top:22px; }
.item .when, .event .when { font-size:13px; color:var(--rust); letter-spacing:.06em; }
.item h3, .event h3 { font-size:21px; margin-top:6px; font-weight:600; }
.item p { margin-top:8px; }
.tags { margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.tag { font-size:12px; border:1px solid rgba(230,216,206,.25); padding:3px 9px; border-radius:20px; color:var(--muted); }
.card { background:#232838; padding:18px 20px; border-left:3px solid var(--rust); margin-top:14px; }
.card .when { font-size:13px; color:var(--muted); }
.card h3 { font-size:18px; margin-top:4px; font-weight:600; }
.card p { margin-top:8px; font-size:15px; }
.card a { display:inline-block; margin-top:10px; color:var(--pink); font-size:14px; text-decoration:none; }
.btn { display:inline-block; padding:12px 18px; background:var(--rust); color:var(--light); text-decoration:none;
  font-weight:600; margin:24px 10px 0 0; }
.btn.ghost { background:transparent; border:1px solid rgba(230,216,206,.35); }
footer { color:var(--muted); font-size:13px; padding:10vh 0 2vh; }
/* Text for screen readers only, for example the layer sentences that the canvas draws. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Film grain over the whole page. */
.grain { position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* On a phone, the text column takes the full width and scrolls over the wall, while the tiles leave. */
@media (max-width:760px) {
  main { width:auto; padding:0 16px 6vh; }
  nav .links { font-size:13px; gap:12px; }
  nav .brand { display:none; }
}

/* Community events. */
/* Lists keep the left edge of the text column, like the work items. */
.events, .talks { list-style:none; padding:0; }
.event .venue { margin-top:4px; font-size:15px; }
.talks { margin-top:10px; color:var(--muted); font-size:16px; line-height:1.5; max-width:52ch; }
.talks li { margin-top:6px; }
.talk-title { color:var(--light); }
.talk-who, .talk-links { font-size:14px; }
.talk-links a, .event-link { color:var(--pink); text-decoration:none; }
.event-link { display:inline-block; margin-top:10px; font-size:14px; }