/* --------------------------------------------------------------- Look What We Made For You — archive site One stylesheet for all four pages. No build step, no framework. --------------------------------------------------------------- */ :root { /* Palette: projection-screen grey, no-signal blue, auditorium black */ --paper: #ffffff; --paper-2: #eff0ec; --slate: #16181c; --ink: #15171b; --meta: #63686f; --signal: #1b3fe0; --rule: #c5c7c1; /* Type. System stacks keep the page fast and the request count at zero. To swap in webfonts, uncomment the in each page and change these two lines to 'Archivo' and 'IBM Plex Mono'. Better still, self-host the woff2 files in /fonts. */ --display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace; --headline: ui-serif, Georgia, "Times New Roman", serif; --gutter: clamp(1.25rem, 4vw, 3.5rem); --measure: 34rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--display); font-size: 17px; line-height: 1.6; font-synthesis-weight: none; } img, iframe, video { display: block; max-width: 100%; } a { color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { color: var(--signal); } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; } .wrap { max-width: 78rem; margin: 0 auto; padding: 0 var(--gutter); } .skip { position: absolute; left: -9999px; } .skip:focus { left: var(--gutter); top: 0.75rem; z-index: 10; background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; } /* --------------------------------------------------------------- Header --------------------------------------------------------------- */ .masthead { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--rule); } .eyebrow { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--meta); margin: 0 0 clamp(0.75rem, 2vw, 1.25rem); } .masthead h1 { font-family: var(--headline); font-size: clamp(2.1rem, 6.5vw, 4.1rem); line-height: 1.03; letter-spacing: -0.01em; font-weight: 400; margin: 0; max-width: 18ch; } @media (min-width: 48rem) { .masthead h1 { max-width: none; } } .masthead h1 a { text-decoration: none; color: inherit; } nav { margin-top: clamp(1.5rem, 4vw, 2.5rem); display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.01em; } nav a { text-decoration: none; color: var(--meta); } nav a:hover { color: var(--signal); } nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); } /* --------------------------------------------------------------- The piece --------------------------------------------------------------- */ .piece { padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); } .frame { position: relative; aspect-ratio: 16 / 9; background: var(--slate); overflow: hidden; } .frame video, .frame iframe { width: 100%; height: 100%; border: 0; object-fit: contain; } .piece-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; margin-top: 0.9rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--meta); } /* --------------------------------------------------------------- Section headings --------------------------------------------------------------- */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--rule); padding-top: 0.75rem; margin: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.25rem, 3vw, 2rem); } .section-head h2 { font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: -0.01em; font-weight: 700; margin: 0; } .section-head p { margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--meta); text-align: right; } /* --------------------------------------------------------------- Source grid --------------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); } .source { margin: 0; } .source-index { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--meta); padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.75rem; } .source-index .year { color: var(--ink); } /* Static still for each source — not clickable. "More on this source" is the way through, to that source's own page and its video link. */ .facade { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--slate) center / cover no-repeat; color: var(--paper-2); display: grid; place-items: center; font-family: var(--mono); } .facade::after { content: ""; position: absolute; inset: 0; background: rgba(15,17,20,0.3); } .facade .cue { position: relative; z-index: 1; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; letter-spacing: -0.04em; opacity: 0.55; } .source h3 { font-size: 1.02rem; line-height: 1.3; font-weight: 700; margin: 0.85rem 0 0.3rem; } .source .attribution { margin: 0; font-family: var(--mono); font-size: 0.74rem; color: var(--meta); } .source .note { margin: 0.6rem 0 0; font-size: 0.92rem; color: #3b3f45; } /* Link through to the full source page. */ .more { display: inline-block; margin-top: 0.85rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--meta); text-decoration: none; } .more:hover { color: var(--signal); } /* --------------------------------------------------------------- Long-form pages --------------------------------------------------------------- */ .prose { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); max-width: var(--measure); } .prose h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; margin: 2.75rem 0 0.75rem; } .prose h3 { font-size: 1rem; font-weight: 700; margin: 2rem 0 0.5rem; } .prose p { margin: 0 0 1.15rem; } .prose .lede { font-size: 1.28rem; line-height: 1.45; letter-spacing: -0.015em; margin-bottom: 1.75rem; } .prose blockquote { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 2px solid var(--signal); font-size: 1.05rem; } .prose ul { padding-left: 1.1rem; margin: 0 0 1.15rem; } .prose li { margin-bottom: 0.5rem; } /* Entry lists for resources and reading */ .entries { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); } .entry-group { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .entry-group > h2 { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); font-weight: 400; border-top: 1px solid var(--rule); padding-top: 0.75rem; margin: 0 0 1.5rem; } .entries .intro { max-width: var(--measure); margin: 0 0 clamp(2rem, 4vw, 3rem); font-size: 0.95rem; color: #3b3f45; } /* A plain working bibliography: subheads plus a citation list, for entries that are just author/title rather than a full annotated entry. */ .entry-group h3 { font-size: 0.95rem; font-weight: 700; margin: 1.75rem 0 0.75rem; } .entry-group h3:first-of-type { margin-top: 0; } .biblio { list-style: none; margin: 0 0 0.5rem; padding: 0; max-width: var(--measure); } .biblio li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; } .biblio li:last-child { border-bottom: 0; } .biblio-note { margin: 0.75rem 0 0.5rem; max-width: var(--measure); font-size: 0.85rem; font-style: italic; color: var(--meta); } /* --------------------------------------------------------------- Individual source pages --------------------------------------------------------------- */ .source-page-main { padding: clamp(2rem, 5vw, 3rem) 0 clamp(3rem, 6vw, 5rem); } .back { display: inline-block; margin-bottom: 1.5rem; font-family: var(--mono); font-size: 0.78rem; color: var(--meta); text-decoration: none; } .back:hover { color: var(--signal); } .page-title { font-family: var(--headline); font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 0.4rem; } .source-meta { margin: 0 0 1.5rem; font-family: var(--mono); font-size: 0.8rem; color: var(--meta); } .source-hero { aspect-ratio: 16 / 9; overflow: hidden; background: var(--slate); } .source-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .watch-link { display: inline-flex; align-items: baseline; gap: 0.4rem; margin: 1.25rem 0 0; font-family: var(--mono); font-size: 0.85rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 0.15rem; } .watch-link:hover { color: var(--signal); border-color: var(--signal); } .source-page-main .prose { padding: 0; margin-top: 2rem; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin: 2.5rem 0 0; } .gallery figure { margin: 0; } .gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--slate); } .gallery figcaption { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.74rem; color: var(--meta); } /* --------------------------------------------------------------- Footer --------------------------------------------------------------- */ footer { border-top: 1px solid var(--rule); padding: 1.75rem 0 3rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--meta); } footer p { margin: 0 0 0.4rem; max-width: 50ch; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }