/* =========================================================================== archive-show.css — the 2026 page. THE GRID IS MEASURED, NOT GUESSED. Siris chose a reference page and asked for the same placement. Rather than eyeball it, every block on that page was measured in the browser at a 2195px viewport and the numbers converted to percentages so they hold at any width. No code was copied — these are dimensions, and dimensions are not anybody's property. WHAT WAS MEASURED px @2195 as a fraction content container 1348 wide 61.4% vw, centred left rail 517 38.4% of container right column 819 60.8% of container gutter 11 0.8% hero 2181 x 704 full bleed, ar 3.10 inset media 1820 wide 83% vw, centred, 16:9 near-full-bleed pair 2 x 1020, gap 10 3% side margins section heading 54.88 / 61.11 in the LEFT rail body 16 / 24 in the right column emphasis line 20.32 / 24.19 THE ONE STRUCTURAL IDEA worth naming: a section heading does not sit above its text. It sits in the left rail, on the same baseline as the first line of the paragraph beside it. That is what gives the page its shape, and it is why the container is only 61% of the window — the rail needs the room. Motion: opacity 0 to 1 with a short lift, .85s on cubic-bezier(.19,1,.22,1), staggered between neighbours. Photographs settle from 6% oversize. =========================================================================== */ /* -------------------------------------------------------------------------- REVEAL -------------------------------------------------------------------------- */ .sh-rv{ opacity:0; transform:translateY(26px); transition:opacity .85s cubic-bezier(.19,1,.22,1), transform .85s cubic-bezier(.19,1,.22,1); } .sh-rv.in{ opacity:1; transform:none; } .sh-rv--2{ transition-delay:.1s; } .sh-rv--3{ transition-delay:.2s; } .sh-rv-img{ overflow:hidden; } .sh-rv-img img{ transform:scale(1.06); opacity:0; transition:transform 1.3s cubic-bezier(.19,1,.22,1), opacity .9s ease; } .sh-rv-img.in img{ transform:none; opacity:1; } @media (prefers-reduced-motion:reduce){ .sh-rv, .sh-rv-img img{ opacity:1 !important; transform:none !important; transition:none !important; } } /* -------------------------------------------------------------------------- SHELL -------------------------------------------------------------------------- */ .show{ background:var(--plaster-000); overflow-x:hidden; } .show img{ image-orientation:none; display:block; } .show figure{ margin:0; } /* The measured container: 61.4% of the window, centred. Below 1500px it opens out, because a 61% column on a laptop is too mean to read. */ .sh-wrap{ width:min(61.4%, 1348px); margin-inline:auto; } @media (max-width:1500px){ .sh-wrap{ width:calc(100% - clamp(40px,8vw,140px)); max-width:1348px; } } /* Inset media: 83% of the window, centred. */ .sh-inset{ width:83vw; max-width:1820px; margin-inline:auto; } /* Near-full-bleed: 3% each side. */ .sh-bleed{ width:94vw; margin-inline:auto; } /* -------------------------------------------------------------------------- 1. HERO — full bleed, 3.10 : 1 -------------------------------------------------------------------------- */ /* The reference hero is 3.10:1 because their photograph is that shape. Siris's widest frame is 2.11:1, and forcing it to 3.10 cuts a band across the eyes at every crop position. The slot keeps its job — full bleed, wide, the first thing you see — at the ratio the photograph actually is, so nothing is lost. */ .sh-hero{ width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; /* Full screen, as asked. An explicit height, not aspect-ratio: something upstream resolves the figure's height before a ratio can apply and the hero collapsed to 315px. */ height:100svh; min-height:420px; } .sh-hero img{ width:100%; height:100%; object-fit:cover; /* The photograph is a 2:3 portrait and the hero is a landscape window, so most of the frame is cropped away. The two faces sit at about 42% down the source. With cover, object-position P maps the image's P to the window's P, so 44% is the value that puts the two heads on the upper third with the Rembrandt still reading behind them. Checked at 1920, 1440 and 390 rather than guessed. */ object-position:50% 44%; } @media (max-width:860px){ .sh-hero{ height:82svh; min-height:360px; } } /* -------------------------------------------------------------------------- 2. THE TWO-COLUMN GRID — rail 38.4%, column 60.8% Used by the information block and by every section heading. -------------------------------------------------------------------------- */ .sh-grid{ display:grid; grid-template-columns:38.4% 60.8%; column-gap:.8%; align-items:start; } /* The rail */ .sh-rail dt{ font-family:var(--font-sans); font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--secondary); margin:0 0 6px; } .sh-rail dd{ font-family:var(--font-longform); font-size:var(--step-0); line-height:1.5; color:var(--text); margin:0 0 40px; } .sh-rail dd:last-child{ margin-bottom:0; } /* A section heading, sitting in the rail. 54.88px at 2195. */ .sh-railhead{ font-family:var(--font-serif); font-weight:400; font-style:italic; font-size:clamp(1.9rem, 2.5vw, 3.43rem); line-height:1.11; color:var(--text); margin:0; max-width:14ch; } /* The right column */ .sh-col p{ font-family:var(--font-longform); font-size:var(--step-0); line-height:1.6; color:var(--text); margin:0 0 1.15em; } .sh-col p:last-child{ margin-bottom:0; } .sh-col--lead p{ font-size:var(--step-1); line-height:1.55; } /* The page title, in the right column of the first block. */ .sh-title{ font-family:var(--font-serif); font-weight:400; font-style:italic; font-size:clamp(2.2rem, 3.1vw, 3.43rem); line-height:1.11; color:var(--text); margin:0 0 30px; max-width:16ch; } /* -------------------------------------------------------------------------- 3. RHYTHM — measured between blocks: 94px after the hero, then 140-230px -------------------------------------------------------------------------- */ .sh-block{ padding-block:0 clamp(72px, 7.5vw, 165px); } .sh-block--first{ padding-top:clamp(56px, 4.3vw, 94px); } .sh-block--tight{ padding-bottom:clamp(48px, 4vw, 88px); } /* -------------------------------------------------------------------------- 4. MEDIA -------------------------------------------------------------------------- */ .sh-plate img{ width:100%; height:auto; } /* Any bare figure inside a media container fills it. Without this an image sits at its natural pixel size and leaves a hole beside it — which is what the 700px-wide Forum photograph did. */ .sh-inset > figure img, .sh-bleed > figure img{ width:100%; height:auto; } /* For a photograph too small to fill the inset without going soft: keep the centring, cap the width at something near its own. */ .sh-modest{ width:min(83vw, 780px); margin-inline:auto; } .sh-plate--wide img{ width:100%; aspect-ratio:16/9; object-fit:cover; } /* The measured row: the reference puts two landscape frames at 46.5% with 10px between. Siris's three photographs are all 2:3 portraits, and a 16:9 crop of a 2:3 loses the subject entirely, so the row keeps the measured bleed width and the 10px gutter but runs three up and shows each photograph whole. */ .sh-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .sh-trio img{ width:100%; height:auto; } /* Two whole portraits. Photograph 11 used to sit here as well; it now carries the hero, and the same frame twice on one page is the sort of thing that makes a page look padded. At 94vw a half is 47vw wide and, at 2:3, 70vw tall — taller than the window — so the row is capped and centred. */ .sh-duo{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:1180px; margin-inline:auto; } .sh-duo img{ width:100%; height:auto; } /* Two landscape frames side by side at the measured bleed width and the measured 10px gutter — the reference's own pairing, which its photographs happened to be the right shape for and these ones are too. */ .sh-wide2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .sh-wide2 img{ width:100%; height:auto; } .sh-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .sh-pair img{ width:100%; aspect-ratio:4/5; object-fit:cover; } .sh-film{ position:relative; width:100%; aspect-ratio:16/9; background:#000; } .sh-film iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* Click-to-play facade. The film-h poster is a still with no play mechanism; this one is the same treatment with a working click, which also means Vimeo loads nothing at all until the visitor asks for it. */ .sh-poster{ position:relative; width:100%; aspect-ratio:16/9; display:block; padding:0; border:0; margin:0; background:#0b0908; cursor:pointer; overflow:hidden; color:var(--gold); } .sh-poster__thumb{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; transition:transform 1.2s cubic-bezier(.19,1,.22,1); } .sh-poster::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; /* Two jobs: a soft pool of shadow under the control so the gold play mark and the label read against whatever the frame happens to be, and a gentle darkening at the edges so the still sits back from the page. */ background: radial-gradient(22% 38% at 50% 52%, rgba(0,0,0,.52) 0%, rgba(0,0,0,0) 100%), radial-gradient(75% 75% at 50% 50%, rgba(0,0,0,.04) 0%, rgba(0,0,0,.40) 100%), linear-gradient(to top, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 40%); } .sh-poster:hover .sh-poster__thumb{ transform:scale(1.03); } .sh-poster__play{ position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; width:clamp(52px,5.6vw,72px); height:clamp(52px,5.6vw,72px); transition:transform .4s cubic-bezier(.19,1,.22,1); } .sh-poster__play svg{ width:100%; height:100%; display:block; } .sh-poster:hover .sh-poster__play, .sh-poster:focus-visible .sh-poster__play{ transform:scale(1.07); } .sh-poster:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; } .sh-poster__label{ position:absolute; z-index:2; left:50%; translate:-50% 0; top:calc(50% + clamp(44px,3.6vw,56px)); font-family:var(--font-sans); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(246,242,234,.82); white-space:nowrap; } @media (prefers-reduced-motion:reduce){ .sh-poster__thumb, .sh-poster__play{ transition:none; } } .sh-cap{ font-family:var(--font-sans); font-size:var(--step--1); line-height:1.6; color:var(--secondary); letter-spacing:.015em; margin:16px 0 0; max-width:62ch; } /* =========================================================================== THE THREE LAYOUTS One stylesheet, three shapes, chosen by how much material a year actually has. Variation comes from the content, not from decoration: a year with a film and forty photographs cannot be laid out like a year with one paragraph, and pretending otherwise is how the pages started looking generated. .show--a FULL SHOW 2026 Full-screen hero, films, several bleed rows. Needs a film and six or more usable photographs. .show--b DOCUMENTED SHOW 2019, 2018 Hero at about 40% of A. The rail does more work: it carries a chapter number, the date and the venue above the heading, so a year holding three separate events reads as three chapters rather than one long scroll. .show--c FRAGMENT 2017, and the periods of making No hero at all. Opens on type. The works carry the page, in a grid, each shown whole with its caption. A hero over 160 words of text is just a large empty space. =========================================================================== */ /* ---- B ---- */ .show--b .sh-hero{ height:clamp(320px, 42vw, 700px); } @media (max-width:860px){ .show--b .sh-hero{ height:clamp(220px, 52vw, 380px); } } /* The rail, carrying the chapter. The number is set large and light so it reads as a marker rather than a heading competing with the title. */ .sh-railnum{ font-family:var(--font-sans); font-size:var(--step-1); line-height:1; letter-spacing:.06em; color:var(--secondary); opacity:.5; margin:0 0 18px; font-variant-numeric:tabular-nums; } .sh-railwhen{ font-family:var(--font-sans); font-size:var(--step--1); line-height:1.5; letter-spacing:.14em; text-transform:uppercase; color:var(--secondary); margin:0 0 12px; } .sh-railhead + .sh-railwhen{ margin:14px 0 0; } /* Two frames one above the other inside the column. */ .sh-stack{ display:grid; gap:10px; } .sh-stack img{ width:100%; height:auto; } /* ---- C ---- */ /* The opening, which is type and nothing else. The year sits in the rail where a section heading sits on the other layouts, so the page still reads as part of the same family. */ .sh-open{ padding-block:clamp(90px, 11vw, 220px) clamp(56px, 6vw, 120px); } .sh-openyr{ font-family:var(--font-serif); font-weight:400; font-size:clamp(2.6rem, 4.4vw, 5.2rem); line-height:1; color:var(--text); opacity:.22; margin:0; font-variant-numeric:lining-nums tabular-nums; } .sh-open .sh-title{ margin-bottom:22px; } .sh-openlead{ font-family:var(--font-longform); font-size:var(--step-1); line-height:1.55; color:var(--secondary); margin:0; max-width:46ch; } /* The works. Three across, each shown whole — a series is looked at, not cropped, and the frames are different shapes on purpose. */ .sh-works{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.4vw,44px); } .sh-works figure{ margin:0; } .sh-works img{ width:100%; height:auto; } .sh-works .sh-cap{ margin-top:12px; max-width:none; } @media (max-width:900px){ .sh-works{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .sh-works{ grid-template-columns:1fr; } } /* A slot waiting for content. Deliberately loud: an unfinished page should look unfinished to whoever is filling it in, and these never reach the live site because the pages carrying them are noindex until they are. */ .sh-todo{ display:grid; place-items:center; text-align:center; min-height:clamp(180px, 20vw, 300px); padding:28px; background:color-mix(in srgb, var(--gold) 24%, transparent); border:1px dashed color-mix(in srgb, var(--gold) 85%, transparent); font-family:var(--font-sans); font-size:var(--step--1); line-height:1.7; letter-spacing:.08em; text-transform:uppercase; color:var(--text); } .sh-todo--tall{ min-height:clamp(260px, 30vw, 460px); } .sh-todo em{ font-style:normal; opacity:.6; text-transform:none; letter-spacing:0; } .sh-note{ font-family:var(--font-sans); font-size:var(--step--1); line-height:1.7; color:var(--text); background:color-mix(in srgb, var(--gold) 16%, transparent); border-left:2px solid var(--gold); padding:14px 18px; margin:0 0 34px; max-width:72ch; } /* -------------------------------------------------------------------------- 5. SIGNUP, CREDITS, PAGER -------------------------------------------------------------------------- */ .sh-signup{ max-width:30em; margin-top:26px; } .sh-signup form{ display:flex; gap:16px; flex-wrap:wrap; } .sh-signup input[type=email]{ flex:1 1 14em; padding:12px 0; font-family:var(--font-longform); font-size:var(--step-0); color:inherit; background:transparent; border:0; border-bottom:1px solid var(--border); border-radius:0; } .sh-signup input[type=email]:focus-visible{ outline:none; border-bottom-color:var(--text); } .sh-signup button{ padding:12px 0; cursor:pointer; color:inherit; background:transparent; border:0; border-bottom:1px solid var(--text); font-family:var(--font-sans); font-size:var(--step--2); letter-spacing:.22em; text-transform:uppercase; opacity:.72; transition:opacity .3s cubic-bezier(.19,1,.22,1); } .sh-signup button:hover, .sh-signup button:focus-visible{ opacity:1; } .sh-signup__msg{ font-family:var(--font-longform); font-style:italic; font-size:var(--step-0); color:var(--secondary); margin:18px 0 0; } .sh-signup__msg[hidden]{ display:none; } .sh-credits{ font-family:var(--font-sans); font-size:var(--step--1); line-height:2; color:var(--secondary); letter-spacing:.02em; max-width:80ch; margin:0; } .sh-fill{ background:var(--gold); color:#16130f; padding:1px 6px; border-radius:2px; } .sh-pager{ display:flex; justify-content:space-between; align-items:center; margin-top:clamp(40px,4vw,72px); padding:clamp(24px,2.5vw,36px) 0 clamp(56px,6vw,96px); border-top:1px solid var(--border); font-family:var(--font-sans); font-size:var(--step--2); letter-spacing:.2em; text-transform:uppercase; } .sh-pager a{ color:var(--secondary); text-decoration:none; transition:color .3s cubic-bezier(.19,1,.22,1); } .sh-pager a:hover, .sh-pager a:focus-visible{ color:var(--text); } .sh-pager span{ color:var(--secondary); opacity:.6; } /* -------------------------------------------------------------------------- 6. NARROW — the rail folds above its column -------------------------------------------------------------------------- */ @media (max-width:900px){ .sh-trio{ grid-template-columns:1fr 1fr; } .sh-wide2{ grid-template-columns:1fr; gap:12px; } .sh-grid{ grid-template-columns:1fr; row-gap:26px; } .sh-rail{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px; } .sh-rail dd{ margin-bottom:24px; } .sh-railhead{ max-width:none; } .sh-inset, .sh-bleed{ width:calc(100% - clamp(40px,8vw,140px)); } } @media (max-width:560px){ .sh-pair, .sh-trio, .sh-duo, .sh-wide2{ grid-template-columns:1fr; } .sh-pair img{ aspect-ratio:auto; height:auto; } .sh-rail{ grid-template-columns:1fr; } } @media print{ .sh-signup, .sh-pager{ display:none; } }