@font-face { font-family:Wall; src:url('wall-display.ttf') format('truetype'); font-style:normal; font-weight:700; font-display:swap; } :root { --paper:#f2f0e8; --ink:#232522; --muted:#64655d; --orange:#ee6336; --line:#c8c8bc; --dark-line:#55574e; --display:Wall,Impact,'Arial Narrow',sans-serif; --body:Arial,Helvetica,sans-serif; --mono:'Courier New',monospace; --gutter:clamp(20px,4.5vw,80px); --space:clamp(76px,9vw,140px); --max:1440px; --ease:cubic-bezier(.2,.7,.2,1); } * { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:24px; } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 var(--body); -webkit-font-smoothing:antialiased; } ::selection { background:var(--orange); color:var(--ink); } a { color:inherit; text-underline-offset:5px; } button,input { font:inherit; } a:focus-visible,summary:focus-visible,button:focus-visible { outline:3px solid currentColor; outline-offset:6px; } h1,h2,p,figure { margin:0; } h1,h2 { font-weight:700; line-height:.98; letter-spacing:-.025em; } h2 { font-family:var(--display); font-size:clamp(60px,7.2vw,108px); text-transform:uppercase; } em { font-family:Georgia,'Times New Roman',serif; font-weight:400; text-transform:none; letter-spacing:-.065em; } p { max-width:46ch; } img { max-width:100%; display:block; } .wrap { width:min(100%,var(--max)); padding-inline:var(--gutter); margin-inline:auto; } .section { padding-block:var(--space); } .eyebrow,.section-kicker,.edition-label,.hero-caption,.year-note,.mural-heading,.mural-bottom,.source-note,.activity figcaption,.archive-art figcaption,.follow-note,.footer-bottom { font-family:var(--mono); font-size:11px; line-height:1.5; } .eyebrow,.section-kicker,.edition-label { text-transform:uppercase; letter-spacing:.09em; } .section-kicker { display:flex; justify-content:space-between; gap:24px; padding-top:15px; border-top:1px solid; margin-bottom:56px; } .skip-link { position:fixed; z-index:10; top:12px; left:12px; padding:12px 20px; background:var(--ink); color:var(--paper); transform:translateY(-180%); } .skip-link:focus { transform:translateY(0); } .site-header { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .wordmark { font-weight:800; letter-spacing:-1px; font-size:24px; text-decoration:none; display:inline-flex; align-items:center; gap:12px; } .wall-mark { width:25px; display:grid; gap:3px; } .wall-mark i { height:5px; background:currentColor; width:20px; } .wall-mark i:nth-child(2) { margin-left:5px; } .site-header nav { display:flex; gap:40px; font-size:12px; } .site-header nav a { text-decoration:none; display:flex; gap:12px; align-items:center; min-height:44px; } .site-header nav span { font-family:var(--mono); color:var(--muted); } .site-header nav a:hover { text-decoration:underline; } .hero { padding-top:35px; padding-bottom:42px; } .hero-top { display:flex; justify-content:space-between; gap:20px; margin-bottom:32px; } .edition-label { color:var(--muted); } h1 { font-family:var(--display); text-transform:uppercase; font-size:clamp(62px,8.5vw,122px); max-width:1200px; } h1 em { font-size:.82em; white-space:nowrap; } .hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:32px 0 36px; } .hero-bottom p { font-size:14px; } .text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; min-height:44px; border-bottom:1px solid; text-decoration:none; font-size:13px; font-weight:600; padding-bottom:6px; transition:gap .2s; } .text-link:hover { gap:40px; } .text-link span { font-size:24px; font-weight:400; } .year-installation { display:grid; grid-template-columns:1fr 2.65fr; border:1px solid var(--ink); min-height:280px; } .year-history { display:flex; flex-direction:column; justify-content:space-between; padding:24px; border-right:1px solid var(--ink); } .old-year { font-family:var(--display); font-size:clamp(50px,7vw,100px); line-height:1.1; } .year-cut { border-top:1px solid var(--line); padding-top:16px; font-family:var(--mono); font-size:28px; color:var(--muted); display:flex; align-items:center; justify-content:space-between; gap:12px; } .year-cut small { font-size:10px; text-transform:uppercase; text-decoration:none; } .year-next { background:var(--orange); padding:24px 30px 18px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; } .giant-year { font-family:var(--display); font-size:clamp(120px,24vw,345px); letter-spacing:-.035em; line-height:.88; display:flex; align-items:flex-start; margin:12px 0; } .year-arrow { font-family:var(--body); font-size:.34em; margin-left:auto; line-height:1; } .year-note { align-self:flex-end; } .hero-caption { display:flex; justify-content:space-between; margin-top:14px; color:var(--muted); gap:20px; } .archive { background:var(--ink); color:var(--paper); } .editorial-heading { display:grid; grid-template-columns:1.15fr 1fr; gap:80px; margin-bottom:66px; } .editorial-heading p+p { margin-top:18px; color:#c6c8bb; } .editorial-heading .text-link { margin-top:22px; color:var(--orange); } .mural-heading { display:flex; justify-content:space-between; gap:20px; margin-bottom:20px; } .name-wall { display:flex; flex-wrap:wrap; gap:5px; max-height:372px; overflow:hidden; position:relative; mask-image:linear-gradient(#000 82%,transparent); } .name-wall.expanded { max-height:none; mask-image:none; } .name-tile { border:1px solid var(--dark-line); padding:13px 18px; font-size:clamp(12px,1.3vw,18px); flex-grow:1; text-align:center; line-height:1.1; } .name-tile:nth-child(7n+1) { background:#383b32; } .name-tile:nth-child(11n+3) { color:#ff936a; border-color:#8c5139; } .name-tile:nth-child(5n) { font-family:Georgia,serif; font-style:italic; } .mural-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:24px; color:#c6c8bb; } .wall-toggle { background:none; color:var(--paper); padding:10px 0; border:0; border-bottom:1px solid var(--paper); cursor:pointer; font:12px var(--mono); min-height:44px; } .pulse-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:54px; } .pulse-intro p { max-width:36ch; } .activity-head { display:flex; justify-content:space-between; align-items:center; } .activity-head>div { display:flex; align-items:center; gap:30px; } .activity-head strong { font-family:var(--display); font-size:clamp(85px,12vw,160px); line-height:1; color:var(--ink); } .activity-head span { font-family:var(--mono); font-size:12px; max-width:12ch; } .activity-head p { font-size:12px; color:var(--muted); } .commit-chart { height:210px; display:grid; grid-template-columns:repeat(31,minmax(0,1fr)); align-items:end; gap:5px; border-bottom:1px solid var(--ink); margin-top:25px; } .commit-bar { height:calc(var(--count) / 47 * 100%); background:var(--orange); min-height:1px; transform-origin:bottom; transition:background .2s; position:relative; } .commit-bar:last-child { background:var(--ink); } .commit-bar:hover { background:var(--ink); } .activity figcaption { display:flex; justify-content:space-between; margin-top:12px; } .data-details { border-bottom:1px solid var(--line); margin-top:20px; font-size:12px; } .data-details summary { cursor:pointer; min-height:44px; padding-block:14px; } .data-detail-body { display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:24px 0; } .data-detail-body table { border-collapse:collapse; width:100%; max-width:420px; } .data-detail-body caption { text-align:left; font-weight:bold; margin-bottom:12px; } .data-detail-body th,.data-detail-body td { text-align:left; padding:5px; border-bottom:1px solid var(--line); } .repo-ledger { margin-top:42px; } .repo-ledger a { display:grid; grid-template-columns:180px 1fr 30px; gap:24px; align-items:center; border-bottom:1px solid var(--line); text-decoration:none; padding:12px 0; transition:padding .2s,background .2s; } .repo-ledger a:hover { padding-inline:14px; background:#e9e6dc; } .repo-ledger strong { font:700 clamp(45px,6vw,76px)/1 var(--display); } .repo-ledger a>span:nth-child(2) { font-size:20px; } .repo-ledger a>span:last-child { font-size:30px; } .source-note { max-width:80ch; color:var(--muted); margin-top:24px; } .people { background:#e3e3d5; } .people-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:center; } .people-heading h2 { font-size:clamp(54px,6.2vw,86px); margin:30px 0; } .people-heading p { font-size:14px; margin-bottom:20px; max-width:42ch; } .archive-art { max-width:430px; transform:rotate(3deg); background:var(--paper); padding:18px; border:1px solid var(--ink); } .archive-art img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; } .archive-art figcaption { display:flex; justify-content:space-between; gap:15px; border-top:1px solid var(--ink); padding-top:14px; margin-top:14px; } .pause { padding-top:var(--space); padding-bottom:var(--space); } .pause-line { display:flex; align-items:center; gap:40px; margin:100px 0 85px; } .pause-line span { font:700 clamp(95px,18vw,250px)/1 var(--display); color:#818376; text-decoration:line-through; text-decoration-thickness:3px; } .pause-line i { height:1px; background:var(--line); flex:1; } .pause-copy { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; } .pause-copy h2 { font:400 clamp(28px,3vw,44px)/1.2 Georgia,serif; letter-spacing:-.04em; text-transform:none; } .pause-copy p { font-size:14px; color:var(--muted); } .return { background:var(--orange); } .return h2 { font-size:clamp(80px,13.5vw,190px); } .return h2 em { font-size:.9em; } .return-bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-top:50px; } .return-bottom p { font-size:16px; } .cta { padding:24px 28px; background:var(--ink); color:var(--paper); text-decoration:none; display:flex; align-items:center; justify-content:space-between; gap:45px; font-size:14px; transition:background .2s,transform .2s; min-height:60px; } .cta:hover { background:#3a3d34; transform:translateY(-3px); } .cta span { font-size:26px; } .follow-note { max-width:none; text-align:right; margin-top:15px; } footer { padding-block:55px 22px; display:grid; grid-template-columns:1fr 1fr; gap:24px; } footer p { font-size:13px; align-self:center; justify-self:end; } footer nav { display:flex; gap:25px; grid-column:1/-1; font-size:12px; } footer nav a { min-height:44px; display:flex; align-items:center; } .footer-bottom { grid-column:1/-1; border-top:1px solid var(--line); padding-top:20px; display:flex; gap:30px; justify-content:space-between; color:var(--muted); } @media(min-width:1000px) { .hero h1 { white-space:nowrap; } .year-installation { min-height:330px; } } @media(max-width:900px) { .editorial-heading,.people-layout { gap:35px; } .site-header nav { gap:22px; } .giant-year { font-size:24vw; } .year-history { padding:20px; } .year-next { padding:20px; } .year-cut { font-size:22px; } .pulse-intro p { max-width:30ch; } .activity-head>div { gap:20px; } .repo-ledger a { grid-template-columns:130px 1fr 30px; } .return-bottom { align-items:flex-start; flex-direction:column; gap:24px; } .follow-note { text-align:left; } .people-heading .text-link { font-size:12px; } .archive-art { padding:12px; } } @media(max-width:600px) { .site-header { min-height:84px; flex-wrap:wrap; padding-top:18px; padding-bottom:12px; gap:5px; } .wordmark { font-size:22px; } .site-header nav { width:100%; justify-content:space-between; gap:15px; font-size:11px; } .site-header nav a { gap:8px; min-height:38px; } .hero { padding-top:28px; } .hero-top { margin-bottom:25px; } .hero-top .eyebrow { max-width:23ch; } .edition-label { max-width:12ch; text-align:right; } h1 { font-size:clamp(56px,10.3vw,76px); line-height:1.04; } h1 em { white-space:normal; font-size:.83em; } .hero-bottom { flex-direction:column; align-items:flex-start; gap:18px; margin-top:23px; } .hero-bottom p { font-size:13px; } .hero-bottom .text-link { width:100%; } .year-installation { grid-template-columns:1fr; min-height:0; } .year-history { display:grid; grid-template-columns:1fr 1fr; gap:12px; border-right:0; border-bottom:1px solid var(--ink); padding:15px; } .year-history>.eyebrow { grid-column:1/-1; } .old-year { font-size:52px; } .year-cut { padding:0; border:0; flex-direction:column; align-items:flex-end; justify-content:center; font-size:26px; gap:0; } .year-next { padding:18px 15px; } .giant-year { font-size:clamp(123px,31vw,185px); margin:18px 0 12px; } .year-note { font-size:10px; } .hero-caption { font-size:9px; } .hero-caption span:last-child { display:none; } .section-kicker { margin-bottom:36px; font-size:10px; } .section-kicker span:last-child { text-align:right; } .editorial-heading { grid-template-columns:1fr; gap:26px; margin-bottom:45px; } .editorial-heading p { font-size:14px; } .mural-heading { align-items:flex-start; } .mural-heading>span:last-child { max-width:18ch; text-align:right; font-size:10px; } .name-wall { max-height:360px; gap:4px; } .name-tile { padding:12px; font-size:12px; } .mural-bottom { align-items:flex-start; flex-direction:column; font-size:10px; gap:12px; } .pulse-intro { flex-direction:column; align-items:flex-start; gap:25px; margin-bottom:36px; } .pulse-intro p { max-width:40ch; font-size:14px; } .activity-head { align-items:flex-end; gap:12px; } .activity-head>div { flex-direction:column; align-items:flex-start; gap:8px; } .activity-head span { max-width:none; font-size:10px; } .activity-head p { max-width:16ch; font-size:10px; } .commit-chart { height:150px; gap:3px; } .activity figcaption { font-size:9px; } .data-detail-body { grid-template-columns:1fr; } .repo-ledger a { grid-template-columns:74px 1fr 22px; gap:12px; padding:15px 0; } .repo-ledger a>span:nth-child(2) { font-size:14px; } .repo-ledger a>span:last-child { font-size:24px; } .source-note { font-size:10px; } .people-layout { grid-template-columns:1fr; gap:45px; } .people-heading h2 { font-size:clamp(53px,10vw,64px); } .archive-art { width:85%; justify-self:center; } .pause-line { margin:65px 0; gap:20px; } .pause-copy { align-items:flex-start; flex-direction:column; gap:18px; } .return h2 { font-size:clamp(68px,14vw,90px); } .return-bottom { margin-top:35px; } .return-bottom p { font-size:14px; } .cta { width:100%; padding:18px; gap:15px; font-size:12px; } .follow-note { font-size:10px; } footer { grid-template-columns:1fr; } footer p { justify-self:start; } footer nav { gap:18px; flex-wrap:wrap; } .footer-bottom { font-size:10px; gap:16px; } .text-link { font-size:12px; } h2 { font-size:clamp(55px,11vw,70px); } } @media(prefers-reduced-motion:no-preference) { .year-next { animation:chapter-in .8s var(--ease) both; } .giant-year { animation:year-in 1s var(--ease) both; } .chart-in .commit-bar { animation:bar-in .8s var(--ease) both; animation-delay:calc(var(--day)*12ms); } @keyframes chapter-in { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } } @keyframes year-in { from { transform:translateY(24px); opacity:0; } to { transform:translateY(0); opacity:1; } } @keyframes bar-in { from { transform:scaleY(0); } to { transform:scaleY(1); } } } @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } } .year-cut>span { text-decoration:line-through; } .giant-year { color: var(--ink); text-decoration: none; } .old-year:focus-visible, .giant-year:focus-visible { outline: 4px solid var(--ink); outline-offset: 8px; } .wordmark, footer a, .source-note a, .mural-bottom a { transition: color .2s, background .2s, text-decoration-color .2s; } .wordmark:hover, footer a:hover, .source-note a:hover, .mural-bottom a:hover { color: var(--orange); text-decoration-color: var(--orange); } .name-tile { transition: background .18s, color .18s, border-color .18s, transform .18s; } .name-tile:hover { background: var(--orange); color: var(--dark); border-color: var(--orange); transform: translateY(-2px); } .contribute { border-top: 1px solid var(--line); } .contribute-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 440px); gap: clamp(28px, 6vw, 80px); align-items: start; } .contribute h2 { margin-bottom: 20px; } .contribute p { max-width: 56ch; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.15; } .contribute ol { margin: 0; padding-left: 24px; font-family: var(--mono); font-size: 13px; line-height: 1.9; } .contribute .text-link { grid-column: 1 / -1; width: fit-content; color: var(--orange); } @media (max-width: 760px) { .contribute-layout { grid-template-columns: 1fr; } .contribute .text-link { width: 100%; } } .old-year { color: inherit; text-decoration: none; }