/* ==== Design System V3 ==== */ /* ============================================================ WEBFONTS — self-hosted, on purpose ============================================================ These were loaded from fonts.googleapis.com. That could never render correct text on first paint: the browser cannot discover a font FILE until it has fetched AND PARSED Google's stylesheet, so the fonts always arrived after the first frame and the page visibly re-flowed from system-ui into Archivo. No amount of preconnect fixes that — it is an ordering problem, not a latency one. Served from our own origin and ed in the page head, the fetch starts at 0ms alongside the HTML instead. Each file is ONE VARIABLE font covering the whole weight range, which is why four files (144 KB total) replace what looked like 19 separate requests. Do not "optimise" this into per-weight files — that is strictly more bytes and more requests. font-display:block means text is invisible until its font is ready, rather than painted in the wrong face and then swapped. That is the deliberate trade: with a same-origin preload the blank window is normally under ~50ms and exactly zero on a repeat visit, because Caddy serves .woff2 as `immutable, max-age=31536000`. unicode-range is Google's own `latin` subset verbatim — these files ARE that subset, so claiming any wider coverage would render tofu instead of falling back. Anything outside it drops to system-ui, which is correct. The four preload tags in every page head are load-bearing. Adding a family here without adding its preload gives you invisible text instead of a flash. ============================================================ */ @font-face{ font-family:"Archivo"; font-style:normal; font-weight:100 900; font-display:block; src:url("fonts/archivo.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:block; src:url("fonts/geist.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:block; src:url("fonts/inter.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:100 800; font-display:block; src:url("fonts/jetbrains-mono.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Font & Token Vars ---- */ :root{ --font-wordmark:"Archivo", system-ui, sans-serif; --font-geist:"Geist", system-ui, sans-serif; --font-display:"Geist", system-ui, sans-serif; --font-body:"Inter", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; /* backward-compat alias used by admin/block CSS */ --font-head:var(--font-wordmark); --font-logo:var(--font-wordmark); --radius:2px; /* ---- Page geometry ---- The shell width, and everything measured against it. It was a bare 1200px literal in .head-inner and .content, with its consequences hand-computed into the page index's left: — 576 was (1200/2 - 24), 810 was that plus the rail and its gap. Change the literal alone and the rail keeps positioning itself against a shell that no longer exists: at 1120 it sat 30px off the viewport edge and 70px off the copy, hugging the wrong side. --shell-edge is the load-bearing one: the distance from the page's centre line out to where text starts. Half the shell, less the padding inside it. Every rail number below is derived from it, so the shell is now one number. NOT everything can follow. Media queries cannot read custom properties — `@media (max-width: var(--shell))` is invalid CSS and fails silently — so the two breakpoints in the page index are still literals and still have to be moved by hand. Each one names the figure it comes from. */ --shell:1120px; --shell-pad:24px; --shell-edge:calc(var(--shell) / 2 - var(--shell-pad)); --rail-w:240px; /* ---- Cursor glow on hairlines (see the CURSOR GLOW section) ---- --mx/--my are the pointer in VIEWPORT coordinates, written by rule-glow.js. They start off-screen so nothing is lit before the first pointer event and on any device that never sends one. --glow-a is the master fade, 0 or 1; it is a registered property so it can transition. */ --mx:-9999px; --my:-9999px; --glow-radius:240px; --glow-alpha:.84375; /* --glow-ink is a THEME token, set with the palettes below: the effect is a grey lift of the line itself, not the accent, so it has to move with the line. One shared gradient so every lit edge is the same light. --glow-c is that light at full strength, with the master fade folded in; the stops below scale it. Splitting it out is what lets every stop reuse one definition of the colour instead of restating the calc five times. */ --glow-c:color-mix(in srgb, var(--glow-ink) calc(var(--glow-alpha) * var(--glow-a) * 100%), transparent); /* The falloff, shaped the same way as the tab bar's (see CURSOR GLOW at the end of the file). Two stops gave a straight ramp — measured, it was still at 0.34 of full strength 100px out and 0.21 at 120px, so the light spread flatly across its whole radius and read as a fog rather than as something with a centre under the pointer. These decay faster than linear, roughly (1 - d/reach) squared, giving a bright core at the cursor that thins quickly and keeps a faint tail. The two inner stops carry the hot spot and are set 25% above that curve, which widens and brightens the core without touching the tail; the 0% stop is --glow-alpha itself and is already the ceiling, so the hot spot is raised from the inside out rather than by lifting the peak. The REACH IS UNCHANGED: the stops are placed at fifths of the same 70% the single stop used, so this redistributes the light rather than shrinking it. Percentages are of --glow-radius, so all of it scales together. */ --glow:radial-gradient(circle var(--glow-radius) at var(--mx) var(--my), var(--glow-c) 0%, color-mix(in srgb, var(--glow-c) 76%, transparent) 14%, color-mix(in srgb, var(--glow-c) 41%, transparent) 28%, color-mix(in srgb, var(--glow-c) 14%, transparent) 42%, color-mix(in srgb, var(--glow-c) 3%, transparent) 56%, transparent 70%); /* ---- The same light, for the frames around media ---- Gallery blocks, video blocks and the project cover. Painted by rule 5 in the CURSOR GLOW section; only the colour lives here. WHY THIS CANNOT REUSE --glow ABOVE, mechanically: a custom property is substituted where it is DECLARED, not where it is used. --glow resolved --glow-ink on THIS element, :root, and its computed value is already the finished gradient — so setting a different ink further down the tree cannot reach back inside it. A second ink needs a second gradient, and the falloff is restated rather than shared because CSS gives no way to parameterise a token. Keep the two stop lists identical; only the ink and the alpha are meant to differ. WHY IT NEEDS A DIFFERENT INK: every other lit edge in this file sits on ground this stylesheet chose, which is what lets --glow-ink be a measured few steps up from --rule. This one sits one pixel inside a frame full of ARTWORK, and the colour underneath is whatever the work happens to be. White is the only ink that behaves on an unknown ground: where it reads, it reads as light, and where it does not — a blown-out photo — it disappears rather than smudging a grey wash across the edge of the work. And why it is NOT per-theme, unlike --glow-ink: that token has to move with the line it lifts, and the line's ground flips between themes. This one's ground never was the theme's, so there is nothing to mirror. Light switches the effect off through the alpha in OFF IN LIGHT, the same way it switches off every other glow here. --media-glow-alpha is the strength dial: the peak white directly under the cursor. It sits above the 50% the frame itself lights to, so the hot spot stays brighter than the stroke it is riding on — a glow that only matched the line would read as a thicker line. */ --media-glow-ink:hsl(0 0% 100%); --media-glow-alpha:.7; --media-glow-c:color-mix(in srgb, var(--media-glow-ink) calc(var(--media-glow-alpha) * var(--glow-a) * 100%), transparent); --media-glow:radial-gradient(circle var(--glow-radius) at var(--mx) var(--my), var(--media-glow-c) 0%, color-mix(in srgb, var(--media-glow-c) 76%, transparent) 14%, color-mix(in srgb, var(--media-glow-c) 41%, transparent) 28%, color-mix(in srgb, var(--media-glow-c) 14%, transparent) 42%, color-mix(in srgb, var(--media-glow-c) 3%, transparent) 56%, transparent 70%); /* runtime accent (overridden by strip.js) */ --accent-h:152; --accent-s:62%; --accent-l:54%; --accent:hsl(var(--accent-h) var(--accent-s) var(--accent-l)); --accent-dim:hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 6%) / .35); /* toast hover vars — overridden by strip.js at runtime */ --toast-fill-h:var(--accent-h); --toast-fill-s:var(--accent-s); --toast-fill-l:var(--accent-l); --toast-border:var(--accent); --toast-fill:var(--accent); /* Light theme defaults (used when no data-theme attr) */ --bg:#f4f4f2; --paper:#ececea; --panel:#ffffff; --ink:#101012; --ink-soft:#34343a; --muted:#6a6a6e; --rule:#dcdcd8; --rule-strong:#c8c8c4; /* Cursor glow. LIFTS the line in both themes — the glow makes a line brighter, never darker, and that has to hold on light ground too. An earlier version went the other way here, deepening the line on the theory that "more present" was the light-mode equivalent of brighter; it read as a blue-grey bruise smeared along the rule, which is not a glow. WHITE, and all the way to it. On this ground the rule (220) is darker than the paper (244), so a line lifted toward white passes through the paper value on its way up and is briefly invisible there. That is not a defect to design around — it is what light glinting off a wire actually does, and the hot spot on the far side of it is the point. An earlier version stopped short of the paper to avoid the crossing, and bought a line that only ever got softer and never glinted at all. --glow-alpha goes to 1 here, unlike dark: white IS the ceiling, so the glint is only as bright as alpha lets it reach. At 1 the core lands on 255 against a 244 page — the full 11 levels this ground has to give. Anything less spends part of the only headroom there is. Both grounds under these overlays — the rule at 220 and the page at 244 — lift the same way toward white, so ONE ink serves them both. A previous version needed a second one, because an ink that stopped short of the paper could lift a 220 line but not a 244 one; going to white removed the split and the duplicate gradient that came with it. */ --glow-ink:hsl(214 10% 100%); --glow-alpha:1; /* How the active tab's light combines with the cursor's where they overlap, and how strong its own pool is. screen on dark, multiply on light. They are mirror images — screen never darkens, multiply never lightens — so each is the REINFORCING direction for its own ground. On light that matters more than it sounds: screen bleaches a saturated accent against paper, measured taking the marker green from saturation 65 down to 4, essentially white. Colour accumulates on a light substrate the way ink does, by multiplying. It also composes with the cursor glint, which goes to white here: multiplying the accent into a white-lifted line returns the accent at full strength, so the two lights reinforce rather than cancel. Light carries a higher --tab-glow-alpha for the same reason: a 40% wash that reads as a clear glow against near-black is thin against paper. */ --glow-blend:multiply; --tab-glow-alpha:70%; --media-bg:#e2e2de; /* Resting media stroke = the divider colour. It used to be its own literal, a couple of steps brighter than --rule, and that made a framed gallery the heaviest hairline on the page — louder than the rules it sat between. It is the same kind of line, so it is the same value. Rollover is where the frame gets to speak, and that stays its own literal below. */ --media-stroke:var(--rule); --media-stroke-hover:hsl(0 0% 50%); /* rollover. Mirror of dark's 50% — see below */ /* legacy aliases used in admin / block styles */ --border:var(--rule-strong); --chip:var(--paper); --chip-ink:var(--ink); --shadow-ambient: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06); } html[data-theme="light"]{ --bg:#f4f4f2; --paper:#ececea; --panel:#ffffff; --ink:#101012; --ink-soft:#34343a; --muted:#6a6a6e; --rule:#dcdcd8; --rule-strong:#c8c8c4; /* Cursor glow. LIFTS the line in both themes — the glow makes a line brighter, never darker, and that has to hold on light ground too. An earlier version went the other way here, deepening the line on the theory that "more present" was the light-mode equivalent of brighter; it read as a blue-grey bruise smeared along the rule, which is not a glow. WHITE, and all the way to it. On this ground the rule (220) is darker than the paper (244), so a line lifted toward white passes through the paper value on its way up and is briefly invisible there. That is not a defect to design around — it is what light glinting off a wire actually does, and the hot spot on the far side of it is the point. An earlier version stopped short of the paper to avoid the crossing, and bought a line that only ever got softer and never glinted at all. --glow-alpha goes to 1 here, unlike dark: white IS the ceiling, so the glint is only as bright as alpha lets it reach. At 1 the core lands on 255 against a 244 page — the full 11 levels this ground has to give. Anything less spends part of the only headroom there is. Both grounds under these overlays — the rule at 220 and the page at 244 — lift the same way toward white, so ONE ink serves them both. A previous version needed a second one, because an ink that stopped short of the paper could lift a 220 line but not a 244 one; going to white removed the split and the duplicate gradient that came with it. */ --glow-ink:hsl(214 10% 100%); --glow-alpha:1; /* How the active tab's light combines with the cursor's where they overlap, and how strong its own pool is. screen on dark, multiply on light. They are mirror images — screen never darkens, multiply never lightens — so each is the REINFORCING direction for its own ground. On light that matters more than it sounds: screen bleaches a saturated accent against paper, measured taking the marker green from saturation 65 down to 4, essentially white. Colour accumulates on a light substrate the way ink does, by multiplying. It also composes with the cursor glint, which goes to white here: multiplying the accent into a white-lifted line returns the accent at full strength, so the two lights reinforce rather than cancel. Light carries a higher --tab-glow-alpha for the same reason: a 40% wash that reads as a clear glow against near-black is thin against paper. */ --glow-blend:multiply; --tab-glow-alpha:70%; --media-bg:#e2e2de; --media-stroke:var(--rule); --media-stroke-hover:hsl(0 0% 50%); --border:var(--rule-strong); --shadow-ambient: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06); } html[data-theme="dark"]{ --bg:#0a0a0c; --paper:#101013; --panel:#16161a; --ink:#ececee; --ink-soft:#bdbdc0; --muted:#86868a; --rule:#1e1e22; --rule-strong:#2a2a2e; /* A grey well up from --rule. The line is already lighter than the ground here, so lifting it further is a real glow. Raised from 21.9% by request, to make the cursor's effect on the page's hairlines plainer. Worth knowing what that crossed: at 21.9% the ink sat between --rule (#1e1e22) and --rule-strong (#2a2a2e), so a lit --rule line climbed to about the weight of a resting --rule-strong one and no further. At 30% it resolves to rgb(69,76,84) and clears --rule-strong outright, so a lit hairline is now brighter than ANY resting line on the page — which is what makes it read as light rather than as a line thickening, and is also why it cannot go much further without the pool reading as a haze laid over the page instead of as something the lines are catching. This is the general-lines ink only. The frames around media carry their own, --media-glow-ink, and are unaffected — see the token up top. */ --glow-ink:hsl(214 10% 30%); --glow-alpha:.84375; /* light overrides this; see its note */ --glow-blend:screen; --tab-glow-alpha:40.5%; --media-bg:#06060a; --media-stroke:var(--rule); --media-stroke-hover:hsl(0 0% 50%); --border:var(--rule-strong); --shadow-ambient: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.25); } /* ---- Dark: framed components drop to the divider colour ---- The framed pattern is a 1px --rule-strong ring OUTSIDE the box with --rule for the divisions inside it. Three components carry it: the stats strip, the page index and the list block. In LIGHT that two-step reads as intended — the ring closes the object, the dividers structure it. In DARK it does not. #2a2a2e against a #0a0a0c ground is a bigger relative jump than #c8c8c4 is against #f4f4f2, so the ring came forward as its own mark while every other line on the page — title rules, dividers, the rail's spine — sat back at #1e1e22. One box outlined louder than the page it was on. So in dark the ring joins them: one line colour, and the object is read from its corners and its fill rather than from a brighter edge. The dividers are already --rule, which is why these rules only touch the ring. Scoped to dark on purpose. Light keeps the two-step — it works there, and this is the only place in the sheet where a component's own value differs by theme rather than coming from a token. Adding a fourth framed component means adding it here too. The :not() is load-bearing. A list set to draw no lines kills its ring with `.block-list[data-lines="none"]{ box-shadow:none }` — a class and an attribute, which a bare `html[data-theme="dark"] .block-list` would outrank, handing an unframed list a ring back in dark only. Skipping the mode entirely is steadier than winning a specificity race against it. */ html[data-theme="dark"] .proj-stats, html[data-theme="dark"] .pindex, html[data-theme="dark"] .block-list:not([data-lines="none"]){ box-shadow:0 0 0 1px var(--rule); } /* ---- Base ---- */ *{ box-sizing:border-box } html,body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* ---- no sideways scroll, no zoom ---- * pan-y, not manipulation. `manipulation` only took double-tap-to-zoom off * the table and left pinch alone; pan-y allows vertical panning and nothing * else, so pinch and double-tap both go. Anything on the page that needs a * horizontal drag of its own sets its own touch-action and is unaffected — * the scrub bar and the volume slider already declare touch-action:none, and * the tab bar scrolls through overflow-x:auto rather than a gesture. * * Neither of these is the whole story on iOS: Safari has ignored * user-scalable=no in the viewport meta since iOS 10, and does not reliably * honour touch-action against the pinch gesture either. The other half is * the gesture guard in touch-lock.js. */ touch-action:pan-y; } /* Sideways is CLIPPED, not hidden, and that distinction is load-bearing: * overflow:hidden makes an element a scroll container, and the tab bar is * position:sticky — a sticky element positions against its nearest scrolling * ancestor, so turning one on here is exactly how sticky bars quietly stop * sticking. `clip` does not scroll and creates no such ancestor. * * On the ROOT it propagates to the viewport, which is what makes it apply to * the whole page rather than to the html box. * * This is a backstop, NOT the fix for anything currently overflowing. The one * real offender — the project cover's full bleed missing the shell padding by * 8px — is corrected where it happens, further down. Clipping is here so a * future overflow shows up as a clipped edge instead of a page that slides * sideways under the thumb, which is the failure the ask is about. * overflow-x on html is stated alone; the other axis is left to compute to * auto so the page still scrolls vertically. */ html{ overflow-x:clip; } a{ color:inherit } ::selection{ background:var(--palette-ink, var(--ink)); color:var(--bg) } .visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden } .empty-state{ color:var(--muted); font-family:var(--font-body); text-align:center; padding:48px 16px; } /* ============================================================ HEADER · V11 Toolbar ============================================================ */ .site-head{ background:var(--bg); } .head-inner{ max-width:var(--shell); margin:0 auto; padding:0 var(--shell-pad); } .toolbar{ display:flex; align-items:center; gap:22px; padding:18px 0 16px; } .brand{ display:flex; align-items:baseline; gap:14px; text-decoration:none; color:inherit; flex:none; } .brand .name{ font-family:var(--font-wordmark); font-weight:800; font-stretch:125%; text-transform:uppercase; font-size:22px; letter-spacing:-0.03em; line-height:1; color:var(--ink); } .brand .role{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding-left:14px; border-left:1px solid var(--rule-strong); align-self:center; } /* Primary navigation (inside toolbar) */ .nav{ margin-left:auto; display:flex; align-items:center; gap:24px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; } .nav a{ color:var(--muted); text-decoration:none; opacity:.7; transition:opacity .15s, color .15s; -webkit-tap-highlight-color:transparent; } .nav a:hover{ opacity:1; color:var(--ink); } .nav a.is-active, .nav a.on{ opacity:1; color:var(--ink); } .nav a.is-active::before, .nav a.on::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--palette-ink, var(--ink)); margin-right:8px; vertical-align:1px; } /* Theme toggle — circular */ .theme-toggle{ appearance:none; border:1px solid var(--rule-strong); background:transparent; width:22px; height:22px; border-radius:50%; cursor:pointer; position:relative; padding:0; margin-left:6px; flex:none; transition:border-color .15s; -webkit-tap-highlight-color:transparent; } .theme-toggle::after{ content:""; position:absolute; inset:5px; background:var(--muted); border-radius:50%; transition:background .15s; } .theme-toggle::before{ display:none } .theme-toggle .toggle-icon{ display:none } @media (hover:hover) and (pointer:fine){ .theme-toggle:hover{ border-color:var(--palette-ink, var(--ink)); } .theme-toggle:hover::after{ background:var(--palette-ink, var(--ink)); } } /* Strip canvas — full inner width. The height MUST be reserved here. * * It used to be `height:auto`, which on a resolves against the * element's *attribute* size, not its content — and an unsized canvas defaults * to 300x150. At `width:100%` in the 1200px shell that computed to roughly * HALF THE CONTAINER WIDTH (~576px) for every first frame, until strip.js ran * and collapsed it. That was the layout jump on every page load. * * These numbers must equal strip.js's `cssH = rows * cell`. Those come from the * `_header` entry in palettes.json — {rows:2, cellD:6, cellM:3} — and NOT from * the colour theme: no theme defines rows/cellD/cellM, so `Object.assign({}, * header, picked)` at strip.js:324 leaves _header's values standing. Reading * the per-theme defaults in strip.js (3/18/2) instead gives 54px and puts the * jump straight back. Both values below are MEASURED off the live element, not * derived. strip.js then writes the same number as an inline style, so nothing * moves. Change _header in palettes.json and you must change these too. * * The breakpoint is strip.js's DESKTOP_Q verbatim. Do not "tidy" it to match * the other breakpoints in this file. */ .strip-wrap{ padding:0 0 14px; } .strip-wrap canvas{ display:block; width:100%; border:0; border-radius:0; height:6px; /* _header rows 2 x cellM 3 */ } @media (min-width:768px){ .strip-wrap canvas{ height:12px; } /* _header rows 2 x cellD 6 */ } /* ============================================================ CONTENT SHELL ============================================================ */ .content{ max-width:var(--shell); margin:0 auto; padding:24px var(--shell-pad) 80px; } /* ============================================================ MAIN PAGE — INDEX HERO ============================================================ */ .index-hero{ padding:36px 0 22px; border-bottom:1px solid var(--rule); } .index-kicker{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; display:flex; align-items:center; gap:10px; } .index-kicker .accent-dot{ width:6px; height:6px; border-radius:50%; background:var(--palette-ink, var(--ink)); display:inline-block; } .index-kicker .sep{ color:var(--rule-strong); } .index-title{ font-family:var(--font-wordmark); font-weight:800; font-stretch:125%; font-size:clamp(44px, 7vw, 84px); letter-spacing:-0.035em; line-height:.95; margin:0; text-wrap:balance; } .index-title .slash{ color:var(--palette-ink, var(--ink)); font-weight:800; } /* Subtitle under a page's hero title. Projects and About have none; authored pages may. */ .index-sub{ margin:20px 0 0; max-width:62ch; font-size:clamp(17px, 1.7vw, 21px); line-height:1.45; color:var(--ink-soft); white-space:pre-line; text-wrap:pretty; } /* ============================================================ MAIN PAGE — FILTER BAR ============================================================ */ .filter-bar{ display:flex; align-items:center; gap:0; padding:14px 0 18px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; flex-wrap:wrap; } .filter-bar .label{ color:var(--muted); margin-right:18px; } .filter-chips{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .chip{ appearance:none; border:0; background:transparent; color:var(--muted); font:inherit; padding:6px 10px; cursor:pointer; letter-spacing:.18em; text-transform:uppercase; transition:color .15s, background .15s; border-radius:var(--radius); -webkit-tap-highlight-color:transparent; } .chip:hover{ color:var(--ink); } .chip .dot{ display:none; width:5px; height:5px; border-radius:50%; background:var(--palette-ink, var(--ink)); margin-right:6px; vertical-align:1px; } .chip.on{ color:var(--ink); } .chip.on .dot{ display:inline-block; } .filter-meta{ margin-left:auto; color:var(--muted); display:flex; gap:14px; align-items:center; } .filter-meta .count .num{ color:var(--ink); font-weight:500; } .viewmode{ display:flex; gap:0; border:1px solid var(--rule-strong); border-radius:var(--radius); overflow:hidden; } .viewmode button{ appearance:none; border:0; background:transparent; color:var(--muted); font:inherit; padding:5px 10px; cursor:pointer; letter-spacing:.18em; text-transform:uppercase; font-family:var(--font-mono); font-size:10.5px; transition:color .15s, background .15s; -webkit-tap-highlight-color:transparent; } .viewmode button + button{ border-left:1px solid var(--rule-strong); } .viewmode button:hover{ color:var(--ink); } .viewmode button.on{ background:var(--ink); color:var(--bg); } /* ============================================================ MAIN PAGE — PROJECTS GRID ============================================================ */ .projects-wrap{} .projects{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; } @media (max-width:980px){ .projects{ grid-template-columns:repeat(2, 1fr); gap:14px; } } @media (max-width:600px){ .projects{ grid-template-columns:1fr; gap:12px; } } /* List mode header row */ .list-header{ display:none; grid-template-columns:120px 1fr 180px 1fr 80px; gap:20px; align-items:center; padding:10px 14px 8px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--rule); } .projects-wrap.list-active .list-header{ display:grid; } @media (max-width:760px){ .projects-wrap.list-active .list-header{ grid-template-columns:80px 1fr 70px; gap:14px; } .list-header span:nth-child(3), .list-header span:nth-child(4){ display:none; } } /* ============================================================ PROJECT CARD (TOAST) ============================================================ */ .card{ background:var(--panel); text-decoration:none; color:inherit; display:flex; flex-direction:column; position:relative; border-radius:var(--radius); overflow:hidden; box-shadow: 0 0 0 1px var(--rule-strong), 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06); transition:transform .015s ease-out; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; } .card-media{ position:relative; width:100%; aspect-ratio:16/9; background:var(--media-bg); overflow:hidden; } .card-media img, .card-media video{ width:100%; height:100%; object-fit:cover; display:block; } .card-media .placeholder{ position:absolute; inset:0; background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.04) 8px 9px), var(--media-bg); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } html[data-theme="light"] .card-media .placeholder{ background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,.05) 8px 9px), var(--media-bg); } .card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; flex:1 1 auto; background:var(--panel); } .card-title{ font-family:var(--font-wordmark); font-weight:700; font-stretch:110%; text-transform:uppercase; font-size:17px; letter-spacing:-0.015em; line-height:1.1; margin:0 0 10px; color:var(--ink); text-wrap:balance; } .card-meta{ margin:0; display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:5px; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .card-meta dt{ color:var(--muted); } .card-meta dd{ margin:0; color:var(--ink-soft); font-weight:400; letter-spacing:.04em; text-transform:none; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Hover: body lights up, all text white */ @media (hover:hover) and (pointer:fine){ .card:hover{ transform:translateY(-2px); box-shadow: 0 0 0 1px var(--toast-border), 0 4px 16px rgba(0,0,0,.18), 0 12px 32px rgba(0,0,0,.14); } .card:hover .card-body{ background:var(--toast-fill); } .card:hover .card-title, .card:hover .card-meta dt, .card:hover .card-meta dd{ color:#fff; } } .card:active{ transform:translateY(0); } .card:active .card-body{ background:var(--toast-fill); } .card:active .card-title, .card:active .card-meta dt, .card:active .card-meta dd{ color:#fff; } /* ---- List mode ---- */ .projects.list-mode{ grid-template-columns:1fr; gap:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .projects.list-mode .card{ display:grid; grid-template-columns:120px 1fr 180px 1fr 80px; align-items:center; gap:20px; padding:10px 14px; border-radius:0; box-shadow:none; background:transparent; border-bottom:1px solid var(--rule); } .projects.list-mode .card:last-child{ border-bottom:0; } .projects.list-mode .card-media{ margin:0; aspect-ratio:16/9; width:120px; height:auto; border:1px solid var(--rule); } .projects.list-mode .card-body{ display:contents; background:transparent !important; padding:0; } .projects.list-mode .card-title{ margin:0; font-size:15px; color:var(--ink); } .projects.list-mode .card-meta{ display:contents; } .projects.list-mode .card-meta dt{ display:none; } .projects.list-mode .card-meta dd{ font-size:11px; color:var(--ink-soft); } .projects.list-mode .card-meta dd.year{ color:var(--ink); text-align:right; } .projects.list-mode .card-meta dd.role{ color:var(--ink-soft); } @media (hover:hover) and (pointer:fine){ .projects.list-mode .card:hover{ background:var(--toast-fill); transform:none; box-shadow:inset 0 0 0 1px var(--toast-border); } .projects.list-mode .card:hover .card-title, .projects.list-mode .card:hover .card-meta dd{ color:#fff; } } @media (max-width:760px){ .projects.list-mode .card{ grid-template-columns:80px 1fr 70px; gap:14px; } .projects.list-mode .card-media{ width:80px; } .projects.list-mode .card-meta dd.role, .projects.list-mode .card-meta dd.company{ display:none; } } /* ============================================================ GALLERY CONSTRUCT ============================================================ */ .gal{ position:relative; width:100% } .gal-viewport{ position:relative; width:100%; overflow:hidden; border-radius:var(--radius); background:#0a0a0a; } /* Container stroke on media surfaces: gallery blocks, video blocks and the * project cover (the cover carries its own border declaration further down, so * it is coloured there rather than here — a later rule of equal specificity * would otherwise win and put --rule back). * * --media-stroke is --rule, the same value the dividers and the section-title * rules carry: at full ink weight the stroke shouted louder than the image it * framed, and even at its old dedicated literal it outweighed every other * hairline on the page. A frame around media is the same kind of line as a * divider, so it is the same colour, and it now follows --rule through any * future theme rather than drifting from it. box-sizing is border-box * globally, so the 1px sits inside the box and nothing reflows. * Opt out per gallery with the Composer's "Disable container stroke". */ .block-gallery .gal-viewport, .block-video .vid-viewport{ border:1px solid var(--media-stroke); transition:border-color .15s; } /* Rollover lights the stroke to a neutral, NOT the palette colour: the frame * should read as chrome around the work, and a per-palette hue competed with * whatever was inside it. * * --media-stroke-hover is an explicit per-theme literal rather than a shared * one: it CANNOT be one value in both themes. Light mode's page is #f4f4f2, so * a white rollover would sit at about 1.05:1 against it — the border would * vanish on hover instead of lighting up. Each theme takes the pole furthest * from its own background. * * HALFWAY TO THAT POLE, not all of it. The frame used to go to the pole itself * (#fff dark, #000 light) and at full strength it stopped reading as a frame * lighting up and started reading as a second, brighter object drawn around * the work. Backing off leaves the rollover unmistakable while keeping the * stroke subordinate to what it frames. * * The two literals are the SAME number seen from each theme's ground: dark * travels from black toward white, light from white toward black, and the * relationship between them is l_light = 100 - l_dark. Move one and move the * other, or the themes stop being mirrors. * * THAT THEY ARE CURRENTLY IDENTICAL IS A COINCIDENCE OF THE MIDPOINT, and not * a licence to collapse them into one shared declaration. 50 is the one value * that is its own mirror; the moment this is retuned to anything else the two * themes need different numbers again, and a single declaration would silently * light one theme the wrong way. They stay separate for the next edit's sake. * * The cursor glow rides on top of this; it lives in the CURSOR GLOW section at * the end of the file with the rest of the light, and is the one glow there * that is gated on :hover, so these frames are untouched at rest. * * Gated on (hover:hover) exactly like .theme-toggle above: without it a touch * tap leaves the border stuck lit until you tap elsewhere. */ @media (hover:hover) and (pointer:fine){ .block-gallery .gal-viewport:hover, .block-video .vid-viewport:hover, .proj-cover:hover{ border-color:var(--media-stroke-hover); } } /* After the hover rule on purpose: equal specificity, so this must win and keep * an opted-out gallery at zero width whether or not the pointer is over it. */ .block-gallery.no-stroke .gal-viewport{ border:0; } /* Fullscreen video already drops its corner radius; the stroke has to go with * it, or a hairline frames the entire screen. */ .vid-viewport.is-fullscreen, .vid-viewport:-webkit-full-screen, .vid-viewport:fullscreen{ border:0; } .gal-track{ display:flex; height:100%; will-change:transform; } .gal-slide{ flex:0 0 100%; height:100%; position:relative; } .gal-img{ display:block; width:100%; height:100%; object-fit:cover; -webkit-user-select:none; user-select:none; } /* Aspect 'original': the frame takes the ratio of the slide on show * (gallery.js, _fitOriginal), so cover and contain agree once it settles. * Contain is for the in-between — mid-swipe, the neighbour is drawn into the * current slide's box and cover would crop it. The transition eases the box * between two shapes where the browser interpolates aspect-ratio and is a * harmless snap where it does not. */ .gal.is-original .gal-img{ object-fit:contain; } .gal.is-original .gal-viewport{ transition:aspect-ratio .35s cubic-bezier(.4,0,.2,1); } .gal-caption{ padding:10px 2px 4px; font-family:var(--font-body); font-size:14px; color:var(--muted); line-height:1.45; min-height:1.45em; } /* Gallery arrows, lightbox arrows and the lightbox close are all styled as the * buttons in the native