/* Lens. * * You look THROUGH a camera, not at it. The first attempt styled the interface * after a camera body — engraved lettering, brushed aluminium, machined seams — * and the result announced itself on every page. Skeuomorphism fails exactly * that way: the surface becomes the subject. * * So the interface recedes. Small type, low contrast, no rules or frames or * borders, nothing that asks to be noticed. What remains is a surround, a * photograph, and a quiet label beneath it. * * Two structures, two purposes: * * The FEED is temporal. One photograph, then another. Uniform frame height so * the sequence has an even rhythm and nothing dominates. It cannot be scanned, * only moved through. * * The ARCHIVE is spatial. A grid, for finding rather than experiencing. * * The surround is set by data-surround on — see the three options below. */ /* -------------------------------------------------------------------------- */ /* Fonts — self-hosted, no third-party request at runtime */ /* -------------------------------------------------------------------------- */ @font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif"; src: url("fonts/source-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif"; src: url("fonts/source-serif-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } /* -------------------------------------------------------------------------- */ /* The surround */ /* */ /* The question is not "what looks like a camera" but "what lets me forget the */ /* interface and see the photograph". That is a perceptual question with a */ /* known answer: a neutral mid-tone biases judgement least, which is why every */ /* serious image application — Lightroom, Photoshop, Capture One — defaults to */ /* one rather than to black or white. */ /* */ /* graphite neutral mid-dark. Least biasing; images sit in it without */ /* gaining or losing contrast. The recommended default. */ /* ink near-black. Images glow, cinema-like — immersive, but it */ /* flatters: everything looks punchier than it is. */ /* paper neutral light. Photographs read as prints. Honest, but a bright */ /* surround causes flare and tires the eye over a long sequence. */ /* -------------------------------------------------------------------------- */ :root, :root[data-surround="graphite"] { --surround: #333537; --ink-1: #eceded; /* primary text */ --ink-2: #a6a9ab; /* captions, secondary */ --ink-3: #76797c; /* readout, tertiary */ --hairline: #45484a; --touch: #c9a789; /* hover / focus — the only warm note */ } :root[data-surround="ink"] { --surround: #101011; --ink-1: #e8e8e8; --ink-2: #97999b; --ink-3: #67696b; --hairline: #262728; --touch: #c9a789; } :root[data-surround="paper"] { --surround: #f1f0ee; --ink-1: #1e1e1f; --ink-2: #5a5b5c; --ink-3: #85878a; --hairline: #ddddda; --touch: #7a5c41; } :root { --sans: "Plex Sans", system-ui, -apple-system, sans-serif; --serif: "Source Serif", ui-serif, Georgia, serif; --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --measure: 32rem; --frame: min(1100px, 92vw); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--surround); } body { margin: 0; padding: 0 max(1.25rem, 4vw); background: var(--surround); color: var(--ink-1); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--touch); } ::selection { background: var(--touch); color: var(--surround); } /* -------------------------------------------------------------------------- */ /* Chrome — as little as the page can function with */ /* -------------------------------------------------------------------------- */ .masthead { max-width: var(--frame); margin: 0 auto; padding: 2rem 0 3.5rem; display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; /* No rule beneath. A border here is a line the eye has to cross. */ } .wordmark { font-size: 1.1rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-1, var(--ink-2)); } .masthead nav { display: flex; gap: 1.5rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } main { max-width: var(--frame); margin: 0 auto; } /* -------------------------------------------------------------------------- */ /* The feed — temporal. One at a time. */ /* -------------------------------------------------------------------------- */ .feed { display: flex; flex-direction: column; /* The gap is the pacing. Large enough that the next photograph is not yet arguing with this one. */ gap: 8rem; max-width: 44rem; margin: 0 auto; } .plate-item { display: block; } /* Uniform height, whatever the photograph's native shape. This is what makes a sequence feel evenly paced instead of lurching between wide and tall. */ .frame { display: block; aspect-ratio: 4 / 5; max-height: 78vh; margin-inline: auto; overflow: hidden; background: color-mix(in srgb, var(--surround) 88%, #000); } .frame img { width: 100%; height: 100%; object-fit: cover; } .plate { max-width: var(--measure); margin: 1.5rem auto 0; } .entry-caption { font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; margin: 0 0 .7rem; color: var(--ink-1); } /* The label beneath a framed print. Left aligned, small, quiet. */ .readout { font-family: var(--mono); font-size: .72rem; line-height: 1.85; color: var(--ink-3); margin: 0; } .readout .sep { padding: 0 .4em; opacity: .55; } .readout .date { color: var(--ink-3); } /* -------------------------------------------------------------------------- */ /* The print — the permanent page shows the photograph whole */ /* -------------------------------------------------------------------------- */ .entry { padding-bottom: 7rem; } .photo-full img { max-height: 84vh; width: auto; margin-inline: auto; background: color-mix(in srgb, var(--surround) 88%, #000); } .entry .plate { margin-top: 2.25rem; } .entry-terms { margin: 1.5rem 0 0; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: .5rem 1.15rem; color: var(--ink-3); } .entry-terms .collection { color: var(--ink-2); } .pagination { max-width: var(--measure); margin: 3.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 2rem; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .pagination .next { margin-left: auto; } /* -------------------------------------------------------------------------- */ /* The archive — spatial. A grid is for finding, not experiencing. */ /* -------------------------------------------------------------------------- */ .page-title { font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 .35rem; color: var(--ink-2); } .page-note { margin: 0 0 2.75rem; font-family: var(--mono); font-size: .7rem; color: var(--ink-3); } .archive-year { margin-bottom: 3.5rem; } .archive-year h2 { font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: .12em; color: var(--ink-3); margin: 0 0 1rem; } .contact-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; } .contact-sheet.wide { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.1rem; } .contact-sheet img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: color-mix(in srgb, var(--surround) 88%, #000); transition: opacity .18s ease; } .contact-sheet a:hover img { opacity: .75; } .term-index { margin-top: 2.75rem; } .term-index h2 { font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: .12em; color: var(--ink-3); margin: 0 0 .5rem; } .term-index p { margin: 0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; } /* -------------------------------------------------------------------------- */ /* Prose, footer */ /* -------------------------------------------------------------------------- */ .prose { max-width: var(--measure); font-family: var(--serif); font-size: 1rem; color: var(--ink-1); } .prose p { margin: 0 0 1.1rem; } .empty { color: var(--ink-3); padding: 4rem 0; font-family: var(--mono); font-size: .78rem; } .site-footer { max-width: var(--frame); margin: 7rem auto 0; padding: 1.25rem 0 3rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--ink-3); } /* -------------------------------------------------------------------------- */ /* Mobile — quietly paging through prints */ /* -------------------------------------------------------------------------- */ @media (max-width: 700px) { body { padding: 0 1rem; } .masthead { padding: 1.5rem 0 2rem; } .feed { gap: 5rem; } .frame { max-height: 72vh; } .photo-full img { max-height: 70vh; } .plate { margin-top: 1.15rem; } .contact-sheet { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: .4rem; } .contact-sheet.wide { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: .55rem; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } :focus-visible { outline: 1px solid var(--touch); outline-offset: 3px; } @media print { :root { --surround: #fff; --ink-1: #111; --ink-2: #444; --ink-3: #666; --hairline: #ccc; } .masthead nav, .pagination, .site-footer, .surround-switch { display: none; } } /* -------------------------------------------------------------------------- */ /* Surround switcher — PREVIEW ONLY, never rendered in production */ /* -------------------------------------------------------------------------- */ .surround-switch { position: fixed; bottom: 1rem; right: 1rem; display: flex; gap: .35rem; padding: .4rem; background: color-mix(in srgb, var(--surround) 80%, #000); border: 1px solid var(--hairline); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; z-index: 10; } .surround-switch button { font: inherit; background: none; border: none; color: var(--ink-3); padding: .3rem .6rem; cursor: pointer; } .surround-switch button[aria-pressed="true"] { color: var(--ink-1); } /* An archived work keeps its address and says plainly that it was withdrawn — this is what replaces deletion. */ .withdrawn { font-family: var(--mono); font-size: .72rem; line-height: 1.7; color: var(--ink-3); margin: 0 0 1.25rem; padding-left: .9rem; border-left: 1px solid var(--hairline); }