/* ============================================================ ARTICLE TEMPLATE STYLESHEET ------------------------------------------------------------ Shared by every article page (essay, workshop, exhibition-a/b/c/d). Each page only differs by: - the `data-category` value on - its own hero/body/related content Everything else — grid, header, hero, meta box, body copy, related grid, footer — lives here so there's a single place to change the template. ============================================================ */ /* ============================================================ TOKENS ------------------------------------------------------------ Primary = --hero-bg = the category's brand colour, unchanged (same colour used on the homepage cards). Secondary = --body-bg = a 20% tint of the primary: tint = primary * 0.2 + white * 0.8 --related-bg = a 7% tint of the primary, used as the near-white backdrop behind the "Related" grid. --hero-fg / --body-fg are picked per colour, not fixed: each is whichever of black (#1E1E1E) or white gives the higher WCAG contrast ratio against its background. ============================================================ */ :root { --margin: 40px; --gutter: 40px; --cols: 10; --meta-bg: #FFFFFF; --meta-fg: #1E1E1E; --meta-border: #E5E5E5; /* Chart palette — the site's six category accent colours (the same hex values used as --hero-bg per [data-category] below), aliased here so multi-series charts can draw on the full site palette regardless of which category the current page belongs to. */ --chart-1: #EB094B; /* essay accent */ --chart-2: #FF6D63; /* workshop accent */ --chart-3: #1B3720; /* exhibition-a accent */ --chart-4: #BCBCF8; /* exhibition-b accent */ --chart-5: #FFE07D; /* exhibition-c accent */ --chart-6: #FF8D3C; /* exhibition-d accent */ } /* essay — primary #EB094B, secondary = 20% tint #FBCEDB, related = 7% tint #FEEEF2 */ [data-category="essay"] { --hero-bg: #EB094B; --hero-fg: #FFFFFF; --body-bg: #FBCEDB; --body-fg: #1E1E1E; --related-bg: #FEEEF2; } /* workshop — primary #FF6D63, secondary = 20% tint #FFE2E0, related = 7% tint #FFF5F4 */ [data-category="workshop"] { --hero-bg: #FF6D63; --hero-fg: #1E1E1E; --body-bg: #FFE2E0; --body-fg: #1E1E1E; --related-bg: #FFF5F4; } /* exhibition-a (green) — primary #1B3720, secondary = 20% tint #D1D7D2, related = 7% tint #EFF1EF */ [data-category="exhibition-a"] { --hero-bg: #1B3720; --hero-fg: #FFFFFF; --body-bg: #D1D7D2; --body-fg: #1E1E1E; --related-bg: #EFF1EF; } /* exhibition-b (lavender) — primary #BCBCF8, secondary = 20% tint #F2F2FE, related = 7% tint #FAFAFF */ [data-category="exhibition-b"] { --hero-bg: #BCBCF8; --hero-fg: #1E1E1E; --body-bg: #F2F2FE; --body-fg: #1E1E1E; --related-bg: #FAFAFF; } /* exhibition-c (yellow) — primary #FFE07D, secondary = 20% tint #FFF9E5, related = 7% tint #FFFDF6 */ [data-category="exhibition-c"] { --hero-bg: #FFE07D; --hero-fg: #1E1E1E; --body-bg: #FFF9E5; --body-fg: #1E1E1E; --related-bg: #FFFDF6; } /* exhibition-d (orange) — primary #FF8D3C, secondary = 20% tint #FFE8D8, related = 7% tint #FFF7F1 */ [data-category="exhibition-d"] { --hero-bg: #FF8D3C; --hero-fg: #1E1E1E; --body-bg: #FFE8D8; --body-fg: #1E1E1E; --related-bg: #FFF7F1; } /* film — primary #1E2A5C, secondary = 20% tint #D2D4DE, related = 7% tint #EFF0F4 */ [data-category="film"] { --hero-bg: #1E2A5C; --hero-fg: #FFFFFF; --body-bg: #D2D4DE; --body-fg: #1E1E1E; --related-bg: #EFF0F4; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: var(--hero-bg); } body { font-family: "Work Sans", sans-serif; font-weight: 400; line-height: normal; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; } /* ============================================================ 8/10-COLUMN GRID — content boundary only, colour bands are full-bleed elements (same system as the homepage) ============================================================ */ .grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--gutter); padding-inline: var(--margin); max-width: 1440px; margin-inline: auto; } /* ============================================================ HEADER — same chrome as the homepage, but takes on the hero section's colour (data-category lives on so header and hero both resolve the same --hero-bg/--hero-fg) ============================================================ */ header { background: var(--hero-bg); color: var(--hero-fg); } header .bar { align-items: baseline; padding-block: 48px 30px; } .wordmark { grid-column: 1 / span 5; font-size: 32px; font-weight: 500; text-decoration: none; color: inherit; } nav { grid-column: 6 / -1; display: flex; justify-content: flex-end; gap: 32px; } nav a { text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; } nav a:hover { text-decoration: underline; text-underline-offset: 4px; } .menu-rule { padding-block: 0 32px; } .menu-rule-line { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; } .menu-rule-line::after { content: ""; flex: 1; height: 1px; background: currentColor; order: 1; } .menu-rule-line .end { width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 50%; flex-shrink: 0; } .menu-rule-line .end:first-child { order: 0; } .menu-rule-line .end:last-child { order: 2; } /* --- shared pill + rule components, reused from the homepage --- */ .pill { display: inline-block; border: 1px solid currentColor; border-radius: 999px; padding: 8px 18px; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } [data-category="exhibition-b"] .pill, [data-category="exhibition-c"] .pill, [data-category="exhibition-d"] .pill { border-width: 2px; } .rule { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 480px; } .rule::after { content: ""; flex: 1; height: 1px; background: currentColor; order: 1; } .rule .end { width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 50%; flex-shrink: 0; } .rule .end:first-child { order: 0; } .rule .end:last-child { order: 2; } .meta-line { font-size: 14px; font-weight: 500; letter-spacing: 2.8px; text-transform: uppercase; } /* ============================================================ HERO — darker of the pair, full-bleed ============================================================ */ .hero { background: var(--hero-bg); color: var(--hero-fg); } .hero .grid { padding-block: 64px 56px; align-items: stretch; } .hero-text { grid-column: 1 / span 5; align-self: center; text-align: left; } .hero-text .pill { margin-bottom: 32px; } .hero-text h1 { font-size: clamp(24px, 3.5vw, 40px); font-weight: 500; line-height: 1.15; margin-bottom: 32px; } .hero-text .rule { margin-bottom: 24px; } .hero-image { grid-column: 6 / -1; align-self: center; display: flex; flex-direction: column; } .hero-image-frame { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .hero-image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-image-caption { margin-top: 14px; font-size: 13px; line-height: 1.5; opacity: 0.75; } /* ============================================================ BODY — lighter of the pair, full-bleed. The meta box (authors, external links) sits full-width at the top of this section; the article copy itself is constrained to the centre 6 of 10 columns below it. ============================================================ */ .body-section { background: var(--body-bg); color: var(--body-fg); } .body-section .grid { padding-block: 72px 96px; } .meta-box { grid-column: 1 / -1; background: var(--body-bg); color: var(--body-fg); border: 1px solid var(--body-fg); padding: 24px 36px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; row-gap: 12px; column-gap: 24px; margin-bottom: 48px; } .meta-box .authors { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 15px; } .meta-box .authors .label { font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; opacity: 0.55; margin-right: 6px; } .meta-box .authors a { text-decoration: none; font-weight: 500; } .meta-box .authors a:hover { text-decoration: underline; } .meta-box .links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; } .meta-box .links a { font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; } .meta-box .links a:hover { opacity: 0.7; } .body-copy { grid-column: 3 / span 6; font-size: 20px; line-height: 1.6; letter-spacing: -0.01em; } .body-copy p { margin-bottom: 28px; } .body-copy h3 { font-size: 15px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin: 44px 0 20px; } .body-copy h4 { font-size: 17px; font-weight: 600; margin: 32px 0 12px; } .body-copy ul { padding-left: 1.2em; margin-bottom: 28px; } .body-copy li { margin-bottom: 10px; } /* ============================================================ PHOTO GALLERY — masonry grid of images via CSS columns (no JS layout needed since columns naturally stagger uneven heights). Each image opens the shared .lightbox on click. ============================================================ */ .gallery-grid { columns: 3; column-gap: 10px; margin: 40px 0 28px; } .gallery-grid img { display: block; width: 100%; margin-bottom: 10px; break-inside: avoid; cursor: zoom-in; transition: opacity 0.2s ease; } .gallery-grid img:hover { opacity: 0.85; } @media (max-width: 900px) { .gallery-grid { columns: 2; } } /* shared full-screen lightbox — one instance reused by any gallery on the page, populated/shown via article.js */ .lightbox { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 48px; background: rgba(15, 15, 15, 0.92); } .lightbox.is-open { display: flex; } .lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .lightbox-close { position: absolute; top: 24px; right: 32px; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; background: transparent; color: #FFFFFF; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.12); } .body-copy > p:first-of-type::first-letter { float: left; font-family: "Work Sans", sans-serif; font-size: 3.6em; font-weight: 600; line-height: 0.82; color: var(--hero-bg); padding-right: 10px; margin-top: 4px; } .body-copy .rule { margin: 44px auto; } .body-copy .pull-quote { font-size: 28px; font-weight: 500; line-height: 1.35; margin: 44px 0; } /* embedded social post — framed and bordered so it reads as quoted external material breaking the flow, not as the essay's own voice (unlike .pull-quote, which is the author's own text) */ .body-copy .tweet-embed { border: 1px solid var(--body-fg); border-radius: 16px; padding: 32px 36px; margin: 44px 0; } .body-copy .tweet-embed .tweet-source { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; opacity: 0.55; margin-bottom: 20px; } .body-copy .tweet-embed .tweet-source svg { width: 15px; height: 15px; flex-shrink: 0; } .body-copy .tweet-embed blockquote { font-size: 21px; font-weight: 500; line-height: 1.45; margin-bottom: 20px; } .body-copy .tweet-embed blockquote p + p { margin-top: 16px; } .body-copy .tweet-embed figcaption { font-size: 15px; font-weight: 500; opacity: 0.65; } .body-copy .tweet-embed figcaption a { text-decoration: underline; text-underline-offset: 2px; } /* downloadable document — same bordered/framed language as .tweet-embed (quoted external material breaking body-copy flow), but built around a file download rather than a quoted post */ .body-copy .doc-embed { display: flex; align-items: center; gap: 24px; border: 1px solid var(--body-fg); border-radius: 16px; padding: 32px 36px; margin: 44px 0; } .body-copy .doc-embed .doc-icon { width: 44px; height: 44px; flex-shrink: 0; } .body-copy .doc-embed .doc-info { flex: 1; min-width: 0; } .body-copy .doc-embed .doc-title { font-size: 17px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; } .body-copy .doc-embed .doc-meta { font-size: 13px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.55; } .body-copy .doc-embed .doc-download { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; border-radius: 999px; padding: 14px 26px; white-space: nowrap; } .body-copy .doc-embed .doc-download svg { width: 14px; height: 14px; } .body-copy .doc-embed .doc-download:hover { opacity: 0.7; } @media (max-width: 900px) { .body-copy .doc-embed { flex-direction: column; align-items: flex-start; } .body-copy .doc-embed .doc-download { width: 100%; justify-content: center; } } /* embedded video player (e.g. Vimeo) — same 16:9 frame language as .hero-image-frame, just full-width within the body column */ .body-copy .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 28px; } .body-copy .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; } /* academic abstract note — same bordered/framed language as .tweet-embed and .doc-embed. The abstract itself is real body copy (a normal

above this box); this box is just a short explanatory pointer + link out to where the full paper lives */ .body-copy .abstract-embed { border: 1px solid var(--body-fg); border-radius: 16px; padding: 32px 36px; margin: 44px 0; } .body-copy .abstract-embed .abstract-label { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; opacity: 0.55; margin-bottom: 20px; } .body-copy .abstract-embed .abstract-note { font-size: 16px; line-height: 1.5; opacity: 0.75; margin-bottom: 24px; } .body-copy .abstract-embed .abstract-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; border-radius: 999px; padding: 14px 26px; } .body-copy .abstract-embed .abstract-link svg { width: 14px; height: 14px; } .body-copy .abstract-embed .abstract-link:hover { opacity: 0.7; } .body-copy .abstract-embed .abstract-forthcoming { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.55; } .body-copy p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .body-copy p a:hover { opacity: 0.7; } .body-copy figure { margin: 48px 0; } .body-copy figure img { display: block; width: 100%; height: auto; } .body-copy figure .chart-frame { display: block; width: 100%; height: auto; background: transparent; } .body-copy figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; opacity: 0.6; } .body-copy figcaption a { text-decoration: underline; text-underline-offset: 2px; } /* charts: full-bleed band (same treatment as .related — tokens-only colour, no card/border), text sized for legibility at that width. See feedback_chart_styling memory. */ .body-copy figure.chart-figure { width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-top: 56px; margin-bottom: 56px; background: var(--related-bg); padding-block: 56px; } .chart-figure .chart-inner { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--gutter); max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); } .chart-figure .chart-title, .chart-figure .chart-frame, .chart-figure .chart-legend, .chart-figure figcaption { grid-column: 3 / span 6; } .chart-figure figcaption { margin-top: 36px; } @media (max-width: 900px) { .chart-figure .chart-title, .chart-figure .chart-frame, .chart-figure .chart-legend, .chart-figure figcaption { grid-column: 1 / -1; } } .chart-title { font-size: 17px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.7; color: var(--body-fg); margin-bottom: 20px; } .chart-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 24px; margin-top: 28px; } .chart-legend.cols-2 { grid-template-columns: repeat(2, 1fr); } .chart-legend.stacked { grid-template-columns: 1fr; } .legend-item { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--body-fg); } .legend-item.accent { color: var(--hero-bg); } .legend-item .swatch { width: 26px; height: 0; border-top: 3px solid currentColor; flex-shrink: 0; } .legend-item .swatch.block { width: 16px; height: 16px; border-top: none; background: currentColor; border-radius: 2px; } .legend-item .swatch.dot { width: 16px; height: 16px; border-top: none; background: currentColor; border-radius: 50%; flex-shrink: 0; } /* data-chart: coded SVG charts whose series grow up from the baseline with a gentle ease-out curve once scrolled into view */ .data-chart .series-anim { transform: scaleY(0); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .data-chart.in-view .series-anim { transform: scaleY(1); } .body-copy .tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 56px; } .body-copy .tags a { font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; border-radius: 999px; padding: 8px 18px; } .body-copy .tags a:hover { opacity: 0.7; } /* ============================================================ RELATED — horizontally-scrolling carousel of other articles, sits between the body and the footer. Cards are sized so ~2.5 are visible at once, signalling there's more to scroll. ============================================================ */ .related { position: relative; background: var(--related-bg); color: var(--meta-fg); border-top: 1px solid var(--meta-border); padding-block: 56px; } .related-viewport { max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .related-viewport::-webkit-scrollbar { display: none; } .related-track { display: flex; gap: var(--gutter); scroll-snap-type: x mandatory; } .related-item { flex: 0 0 calc((100% - 2 * var(--gutter)) / 2.5); scroll-snap-align: start; display: block; color: inherit; text-decoration: none; } .related-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; background: var(--related-bg); color: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .related-arrow:hover { opacity: 0.7; } .related-arrow svg { width: 16px; height: 16px; } .related-arrow.prev { left: var(--margin); } .related-arrow.next { right: var(--margin); } .related-thumb { border: 1px solid currentColor; aspect-ratio: 16 / 10; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; opacity: 0.5; text-align: center; } /* the border + dimmed placeholder label only mark an *empty* preview slot — once a real image fills it, the frame reads as a photo */ .related-thumb.has-image { border: none; opacity: 1; background-size: cover; background-position: center; } .related-cat { display: inline-block; border: 1px solid currentColor; border-radius: 999px; padding: 8px 18px; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; } .related-title { font-size: 21px; font-weight: 500; line-height: 1.3; margin-bottom: 8px; } .related-item:hover .related-title { text-decoration: underline; text-underline-offset: 4px; } .related-source { font-size: 13px; opacity: 0.55; } /* ============================================================ FOOTER — off-black, wordmark + vertical nav + social icons, copyright line below a hairline rule ============================================================ */ footer { margin-top: auto; background: #17181A; color: #FFFFFF; } footer .footer-top { padding-block: 64px 48px; align-items: start; } footer .footer-nav { grid-column: 6 / span 2; display: flex; flex-direction: column; gap: 16px; } footer .footer-nav a { color: inherit; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; } footer .footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; } footer .social { grid-column: 9 / -1; display: flex; justify-content: flex-end; align-items: flex-start; gap: 12px; } footer .icon { width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; flex-shrink: 0; } footer .icon:hover { opacity: 0.7; } footer .icon svg { width: 16px; height: 16px; } footer .footer-bottom { padding-block: 24px 40px; border-top: 1px solid rgba(255, 255, 255, 0.15); } footer .copyright { grid-column: 1 / -1; font-size: 13px; opacity: 0.55; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { :root { --margin: 20px; --gutter: 20px; } .wordmark { grid-column: 1 / -1; margin-bottom: 20px; } nav { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; gap: 24px; } .hero-text, .hero-image, .body-copy { grid-column: 1 / -1; } .hero-image { margin-top: 32px; min-height: 280px; } .meta-box { flex-direction: column; align-items: flex-start; } .related-item { flex-basis: calc((100% - var(--gutter)) / 1.3); } .related-arrow { display: none; } footer .footer-nav, footer .social { grid-column: 1 / -1; } footer .wordmark { margin-bottom: 24px; } footer .footer-nav { flex-direction: row; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; } footer .social { justify-content: flex-start; } }