/* ============================================================ Frank Le — Portfolio Style system: black ink on white paper, ONE typeface doing every job, a restrained type scale, no boxes around anything the visitor can press, stark hairlines, smooth restrained motion. Navigation is the node-tree canvas (index.html + js/node-tree.js), not a menu of links. See docs/style-direction.md for the rationale behind every choice here, including the Sept 2026 revisions. ============================================================ */ :root { /* Color — Frank's call (Sept 2026): paper is now pure #FFFFFF, reversing the earlier warm off-white. Ink stays a near-black rather than #000 so the page reads as printed, not clinical. The two grays were retoned neutral at the same time — the old warm tan/olive pair looked dirty against a pure white sheet. */ --paper: #ffffff; --paper-dim: #f1f1f1; --ink: #16140f; --ink-soft: #5c5a55; --line: var(--ink); /* stark hairlines, not a soft gray — Sept 2026 revision */ color-scheme: light; /* Type — ONE typeface, every job (Frank's call, Sept 2026). The old split serif/grotesk system is gone: Times does the headlines, the labels, the metadata and the node tree alike. Hierarchy now comes from size, case and spacing only, which is a harder discipline and a more distinctive result. Setting a serif in small tracked caps is what carries the "structural" voice the grotesk used to. Don't reintroduce a second family without asking — it undoes the whole idea. */ /* Inter Tight (Frank, Sept 14 2026) — replaces Times, which had been the one face since Sept 8. Loaded from Google Fonts in each page's as a variable font, so every weight is available without a second file. The fallbacks are sans, so a slow load shows a grotesk rather than a serif for a moment. */ --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Scale — one modular ladder, ratio 1.2 (Sept 8 2026 rebuild). Every size on the site comes from this ladder; there are no hand-picked font-sizes left in the file. Before this there were five tokens and thirty-three one-off values clustered so tightly (0.7 / 0.72 / 0.75 / 0.78 / 0.8 / 0.85rem) that no one could tell them apart — a scale on paper that the CSS ignored. The range is the same as before; the rungs are twice as dense, which is what a tight ratio buys you. Each step is 1.2x the one below, at BOTH ends of its clamp, so the ratio holds at every viewport rather than only at one width. Body is --step-2, and the ladder is anchored there: 16px on a phone, 17.5px on a desk. The anchor has moved twice: down from 16/18px when the site read too large, then back up to 16/17.5px on Sept 10 2026 when it read too small to sit and read. 16px is the floor for body copy and the reason it went back up — below that, prose is a squint. Because every rung is derived from the base, moving it moved all nine together and the proportions are untouched; this is the only place to change if the whole site should get bigger or smaller again. Do NOT nudge one rung on its own — that snaps it out of the 1.2 relationship with its neighbours and puts us back to the ad-hoc scale this ladder replaced. In use today: 0 (micro labels), 1 (small text and controls), 2 (body), 4 (node d1, card titles), 6 (node d0, section titles), 8 (page titles). Steps 3, 5 and 7 are the headroom the tighter ratio creates — real rungs, not yet needed. Reach for one of them before inventing a number. */ --step-0: clamp(0.694rem, 0.675rem + 0.085vw, 0.760rem); /* 11.1 - 12.2px */ --step-1: clamp(0.833rem, 0.810rem + 0.101vw, 0.911rem); /* 13.3 - 14.6px */ --step-2: clamp(1rem, 0.973rem + 0.121vw, 1.094rem); /* 16.0 - 17.5px */ --step-3: clamp(1.2rem, 1.167rem + 0.146vw, 1.313rem); /* 19.2 - 21.0px */ --step-4: clamp(1.44rem, 1.401rem + 0.174vw, 1.575rem); /* 23.0 - 25.2px */ --step-5: clamp(1.728rem, 1.681rem + 0.209vw, 1.890rem); /* 27.6 - 30.2px */ --step-6: clamp(2.074rem, 2.018rem + 0.250vw, 2.268rem); /* 33.2 - 36.3px */ --step-7: clamp(2.488rem, 2.420rem + 0.302vw, 2.722rem); /* 39.8 - 43.5px */ --step-8: clamp(2.986rem, 2.905rem + 0.361vw, 3.266rem); /* 47.8 - 52.3px */ --max-w: none; --gutter: clamp(1.25rem, 3vw, 3rem); /* Section rhythm, pulled from the reference's literal 200px section-gap token (adapted down for a multi-page site — 200px between every section on every page reads as excessive here) */ --section-gap: clamp(3rem, 11vw, 12.5rem); /* Motion. --ease is the slow, editorial curve for content entering on scroll; --ease-out is the punchier UI curve for things the visitor operates directly (menu, toggle, buttons), which stay under 250ms so the interface never feels laggy. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } * { box-sizing: border-box; } html { color-scheme: light; scroll-behavior: smooth; /* The tree panel locks body scroll while it's open; reserving the gutter stops the page jumping sideways as the scrollbar goes. */ scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-optical-sizing: auto; font-size: var(--step-2); line-height: 1.5; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } a { color: inherit; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: var(--gutter); top: -100%; z-index: 50; background: var(--ink); color: var(--paper); font-family: var(--font); font-size: var(--step-1); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 0.7rem 1rem; } .skip-link:focus { top: 0.5rem; } /* Small structural label, used for eyebrows and section headings — the grotesk "structure" voice. */ .label { font-family: var(--font); font-size: var(--step-0); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } /* ---------- Layout shell ---------- */ main { display: block; } /* The same opening as every canvas page. works.html is the only page left using .section, and since its heading and rules came out there was nothing at the top of it to justify --section-gap - the filter bar simply started 60px lower than the first line of every other page. These figures are .field's, deliberately: change one, change both. */ .section { padding: clamp(2rem, 7vw, 5rem) var(--gutter) clamp(4rem, 10vw, 8rem); } .section--tight { padding-block: clamp(2rem, 5vw, 4rem); } .section--flush-top { padding-top: 0; } /* The homepage grid slot renders nothing until a third-party grid is embedded in it — until then it shouldn't reserve section padding. */ .section:empty { padding: 0; } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 1.75rem); max-width: var(--max-w); margin-inline: auto; } .rule { grid-column: 1 / -1; height: 1px; background: var(--line); border: 0; margin: 0; } /* ---------- Section headings ---------- */ /* The section head and its rule were removed Sept 11 2026 along with the one on the filter row: works.html was the last page carrying them, and ruled-off headers are the document look this site left behind. git has the rules. */ /* Text link with a rule that draws itself on hover */ .link-line { font-family: var(--font); font-size: var(--step-1); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding-bottom: 3px; background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size 0.25s var(--ease); } @media (hover: hover) and (pointer: fine) { .link-line:hover { background-size: 0 1px; } } /* ---------- Media ---------- */ .media-frame { position: relative; display: block; /* it is an on the works grid */ color: inherit; text-decoration: none; aspect-ratio: 4 / 5; width: 100%; overflow: hidden; background: var(--paper-dim); /* The frame declares the scroll timeline that the layer inside it reads. It has to be declared HERE and not on that layer: overflow makes this frame a scroll container, so a view() timeline created inside it would measure the layer against the frame - which never scrolls - and sit frozen at 50% forever. Measured from the frame, it measures against the page, which is the thing moving. */ view-timeline-name: --card-view; view-timeline-axis: block; } .media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); } @media (hover: hover) and (pointer: fine) { a:hover .media-frame img, a:hover .media-frame video { transform: scale(1.03); } } .media-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-family: var(--font); font-size: var(--step-0); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } /* ---------- Card caption (works grid) ---------- */ /* The caption carries the link now that the media is something you pick up rather than click through. */ .caption { margin-top: 0.85rem; display: grid; grid-template-columns: auto 1fr; gap: 0 0.9rem; align-items: baseline; text-decoration: none; color: inherit; cursor: pointer; } .caption__index { font-family: var(--font); font-size: var(--step-0); letter-spacing: 0.1em; color: var(--ink-soft); } .caption__title { font-family: var(--font); font-size: var(--step-4); line-height: 1.25; /* justify-self, or the underline stretches the whole grid column and reads as a rule rather than a link. */ justify-self: start; max-width: 100%; border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease-out); } .caption__meta { grid-column: 2; margin-top: 0.3rem; font-family: var(--font); font-size: var(--step-0); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } /* ---------- Works grid + filters ---------- */ .filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); font-family: var(--font); } .filter-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .filter-group__label { font-size: var(--step-0); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-right: 0.25rem; } .filter-btn { /* No box (Frank's call, Sept 2026). State is carried by the rule under the word and by ink weight, not by a container. */ font-family: var(--font); font-size: var(--step-1); letter-spacing: 0.08em; text-transform: uppercase; background: none; border: 0; color: var(--ink-soft); padding: 0.25rem 0; margin-right: 0.35rem; cursor: pointer; border-bottom: 1px solid transparent; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.14s var(--ease-out); } .filter-btn:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .filter-btn:hover { color: var(--ink); border-bottom-color: var(--ink); } } /* Selected filter: the word goes to full ink and keeps its rule. No fill, no container — same reasoning as removing the borders. */ .filter-btn[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); } /* The project counter was removed Sept 11 2026. The grid is short enough to see, and a running total is a database's idea of a portfolio. */ .works-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2rem, 5vw, 4rem) clamp(1rem, 2vw, 1.75rem); } .work-card { grid-column: span 6; position: relative; /* so a card being dragged can ride above */ display: block; color: inherit; } /* The layer that reveals on scroll. It is not .work-card itself because the drag writes a transform there, and one element cannot hold two. */ .work-card__body { display: block; } .work-card[data-draggable="on"] { cursor: grab; touch-action: none; will-change: transform; } .work-card.is-dragging { cursor: grabbing; z-index: 3; } /* Broken rhythm: a repeating four-item pattern of uneven spans, offsets and aspect ratios. This is where the "unconventional" energy lives, since type and motion stay calm. */ .work-card:nth-child(4n + 1) { grid-column: 1 / span 7; } .work-card:nth-child(4n + 2) { grid-column: 9 / span 4; margin-top: clamp(2rem, 8vw, 7rem); } .work-card:nth-child(4n + 3) { grid-column: 2 / span 5; } .work-card:nth-child(4n) { grid-column: 8 / span 5; margin-top: clamp(1rem, 4vw, 3.5rem); } .work-card:nth-child(4n + 1) .media-frame { aspect-ratio: 16 / 9; } .work-card:nth-child(4n + 2) .media-frame { aspect-ratio: 3 / 4; } .work-card:nth-child(4n + 3) .media-frame { aspect-ratio: 4 / 3; } .work-card:nth-child(4n) .media-frame { aspect-ratio: 1 / 1; } /* Native ratio on the grid too (Frank, Sept 12 2026 — the last place the rule wasn't applied). A frame whose media declares its pixels takes the file's own shape from --ratio, set inline by cardMarkup(); the composed crops above are for entries that don't say. Same specificity as those rules and later in the file, so it wins. */ .work-card .media-frame.media-frame--native { aspect-ratio: var(--ratio); } /* Portrait media is capped by HEIGHT, width following, so a 9:16 clip in a seven-column card is ~380x680 rather than 1400px tall. It is `width`, not `max-width`, on purpose: the resize grip writes an inline width, and inline wins, so the frame can still be taken larger by hand. */ .work-card .media-frame--upright { width: min(100%, calc(min(70vh, 48rem) * var(--ratio))); } @media (max-width: 860px) { .work-card, .work-card:nth-child(4n + 1), .work-card:nth-child(4n + 2), .work-card:nth-child(4n + 3), .work-card:nth-child(4n) { grid-column: 1 / -1; margin-top: 0; } } .works-empty { grid-column: 1 / -1; font-family: var(--font); color: var(--ink-soft); padding: 3rem 0; } /* The inverted footer slab was removed Sept 11 2026. It was the last piece of the pre-canvas design still standing, on works.html alone, and every other page had already moved to .end-marks. Its rules lived here; git has them if the title-card idea ever comes back. */ /* ---------- Motion: scroll reveals ---------- Smooth and slow, per the brief — content lifts into place rather than snapping. The .reveal class is added by js/site.js to any [data-reveal] element, so with JS off nothing is ever hidden. */ .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--reveal-delay, 0s); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { /* Gentler, not zero. Fades and color changes stay — they carry meaning and don't cause motion sickness. Everything that MOVES is switched off. */ *, *::before, *::after { transition-property: opacity, color, background-color, border-color, text-decoration-color !important; transition-duration: 0.2s !important; animation-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .tree-panel { transform: none; } .tree__branch { transition: none; } .tree__list > li { transform: none; } .nav-tree-open:active, .nav-mode__btn:active, .tree-panel__close:active, .tree__toggle:active, .filter-btn:active, a.cv-slot:active { transform: none; } a:hover .media-frame img, a:hover .media-frame video { transform: none; } } /* ---------- Node-tree canvas (the homepage) ---------- The site's navigation, and the whole of index.html. Blank paper, nodes the visitor can drag anywhere, branches that open in place. Behaviour lives in js/node-tree.js; the notes there explain the motion decisions. Nothing in here uses a box, a fill or a shadow — the diagram is drawn in hairlines and type only. ---------- */ .page-canvas { height: 100dvh; overflow: hidden; } .canvas { position: relative; width: 100%; height: 100dvh; overflow: hidden; /* Nodes are dragged with pointer events, so the browser must not claim the gesture for scrolling first. */ touch-action: none; } /* The sheet of paper. transform-origin sits at its top-left corner so screen and world coordinates convert with a plain (screen - pan) / scale — put the origin in the middle and every calculation in js/node-tree.js grows a term. */ .canvas__world { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; } .canvas__edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; /* an SVG clips to its own box by default, and the tree runs well outside it once panned */ } /* Grabbing the paper itself, rather than a node on it. */ .canvas.is-panning { cursor: grabbing; } .canvas.is-panning .node { pointer-events: none; } /* Recessive on purpose: the lines describe the structure, the words carry it. At full ink the diagram reads as a cage. */ .canvas__edge { stroke: var(--ink); stroke-width: 1; stroke-opacity: 0.32; } .canvas__nodes { position: absolute; inset: 0; } .node { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; cursor: grab; touch-action: none; will-change: transform; transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out); } /* No transition while a node is under the pointer — it should track the hand exactly, not lag behind it by a quarter second. */ .node.is-dragging { cursor: grabbing; transition: none; z-index: 3; } .node.is-entering { opacity: 0; } .node.is-leaving { opacity: 0; transition-duration: 170ms; transition-delay: 0ms !important; } .node__hit { display: inline-flex; flex-direction: column; /* media above, naming below — the default for every node with a frame */ align-items: flex-start; gap: 0.55em; font-family: var(--font); font-weight: 400; background: none; border: 0; padding: 0.3rem 0.15rem; margin: 0; color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-drag: none; transition: transform 140ms var(--ease-out); } .node__hit:active { transform: scale(0.97); } .canvas.is-dragging .node__hit { cursor: grabbing; } .node__hit:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; } /* Size carries depth — the one hierarchy signal left now that everything is set in the same face. */ /* Two rungs between each depth (a 1.44x jump) so the branch levels read as clearly different, then only one rung down to the leaves — project titles are the point of the tree and shouldn't shrink out of reading size just to complete a pattern. */ .node--d0 .node__hit { font-size: var(--step-6); } .node--d1 .node__hit { font-size: var(--step-4); } .node--d2 .node__hit { font-size: var(--step-2); } .node--d3 .node__hit { font-size: var(--step-1); color: var(--ink-soft); } .node__label { border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease-out); } /* Two things sit beside a node's name and below it in weight: the name Frank works under, and a project's year. Same treatment — subordinate on the same baseline, which .node__line provides. */ .node__alias, .node__meta { color: var(--ink-soft); letter-spacing: 0.01em; } .node__alias { font-size: 0.62em; } /* 0.75em, not the alias's 0.62em. The alias sits beside the root's 36px name, where 0.62em is still 22px; a project node is 17px, and the same ratio would set its year at 10.7px — under --step-0, the smallest size anywhere on the site. A ratio that works at one end of the scale does not automatically work at the other. */ .node__meta { font-size: 0.75em; } @media (hover: hover) and (pointer: fine) { .node__hit:hover .node__label { border-color: currentColor; } } .node__glyph { font-size: 0.75em; letter-spacing: 0.1em; color: var(--ink-soft); min-width: 0.6em; /* Extra air before the +/− only. Widening .node__hit's flex gap would have pushed "Frank Le" off the name it belongs to; the glyph is a separate thing from the naming, so the space that separates it should be too. In em, so it stays proportional at every depth of the tree rather than looking cramped on the root and gaping on a leaf. */ margin-left: 0.5em; } /* A still or clip beside the title. Sized in em, so it scales with the node's own depth without a rule per level. */ /* The naming row: everything that used to sit directly in the hit. */ .node__line { display: inline-flex; align-items: baseline; gap: 0.4rem; } /* Tripled (Sept 10 2026) and moved above the title. A node carrying work should show the work, not a stamp beside a word — at 4em the clip was a detail on the label; at 12em the label is a caption on the clip. Still em-based, so it scales with the node's depth without a rule per level. */ .node__media { --edge: 12em; /* the frame's LONGER side, whichever that is */ flex: none; display: block; width: var(--edge); aspect-ratio: 4 / 3; /* a holding shape only, until the file's own ratio is known — see applyRatio() in js/node-tree.js */ overflow: hidden; background: var(--paper-dim); } /* The root's is proportionally smaller — it sits with the biggest type on the canvas — and holds a portrait shape while it waits. */ .node--d0 .node__media { --edge: 6em; /* 9.6em was set before a portrait existed; at the root's type size it came out at 345px, nearly twice any project frame. Frank asked for a small portrait — 6em is ~216px, a portrait beside a name rather than a hero image. Sept 13 2026. */ width: auto; height: var(--edge); aspect-ratio: 3 / 4; } /* Every imported file is shown at its native ratio (Frank's rule, Sept 12 2026): the inline aspect-ratio carries the file's own proportions, and the frame is sized by its longer edge. Sizing by width alone would let a portrait clip grow to twice the area of a landscape one; by the longer edge, the two carry the same weight and neither is cropped. Double-class selectors so these outrank the root's holding shape above. */ .node__media.node__media--wide { width: var(--edge); height: auto; } .node__media.node__media--tall { height: var(--edge); width: auto; } .node__media img, .node__media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease); } @media (hover: hover) and (pointer: fine) { .node__hit:hover .node__media img, .node__hit:hover .node__media video { transform: scale(1.04); } } /* Media nodes need no special alignment now that the hit is a column — the frame and its title both start at the left edge. */ /* Describes the node it sits under; not a second thing to click. It carries a sentence rather than a list of labels, so it is set in reading case: the site's small tracked caps are a label treatment, and this one has commas and a subordinate clause in it. Same rung on the ladder as before — only the case, tracking and measure changed. */ .node__caption { margin-top: 0.5rem; padding-left: 0.15rem; /* display:block is load-bearing. As a bare the caption is inline, so it sat on the SAME line as the names and ran the whole width of the canvas — and max-width, which does not apply to inline boxes, was silently ignored. Block puts the statement on its own line under the names and lets the measure below bite. */ display: block; /* Sized to break across two lines at the statement's current length. If the copy in ROOT_CAPTION changes materially, re-check the wrap — this measure is tuned to it, not to a rule. 60vw, not 70: on a phone the root's box is the caption's width, and at 70vw it reached far enough across the canvas to collide with the branch beside it. */ max-width: min(34rem, 60vw); /* --step-3, not --step-0. This is the hero line; it was sitting on the label rung, three steps below body copy. */ font-size: var(--step-3); line-height: 1.45; color: var(--ink); user-select: none; } .canvas__fallback { list-style: none; margin: 0; padding: var(--gutter); display: flex; gap: 1.5rem; } /* ---------- Canvas corner marks ---------- */ .canvas__marks { position: fixed; inset: 0; z-index: 4; pointer-events: none; } .mark { position: absolute; margin: 0; font-family: var(--font); font-size: var(--step-0); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.8; } /* The drag hint is gone (Frank's call, Sept 10 2026) — the lower left belongs to the reset now. Dragging and zooming are left to be found rather than announced. */ .mark--mail { right: var(--gutter); bottom: var(--gutter); pointer-events: auto; text-decoration: none; color: var(--ink); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .mark--mail:hover { border-bottom-color: var(--ink); } } @media (max-width: 720px) { .mark--mail { display: none; } /* the Contact node covers it */ .node--d0 .node__hit { font-size: var(--step-4); } .node--d1 .node__hit { font-size: var(--step-2); } .node--d2 .node__hit, .node--d3 .node__hit { font-size: var(--step-0); } } /* Reduced motion: nodes still appear and disappear, they just don't travel to do it. Movement is what causes trouble, not opacity. */ @media (prefers-reduced-motion: reduce) { .node { transition: opacity 200ms var(--ease-out); } .node__hit:active { transform: none; } .node__hit:hover .node__media img, .node__hit:hover .node__media video { transform: none; } } /* ---------- Inner-page head ---------- There is no list menu anywhere on the site. Every page that isn't the canvas gets its nameplate and one way back to the tree. ---------- */ /* One thing lives here: the colour mode, held to the right. The nameplate and the back link were removed Sept 11 2026 - see the comment in any page's markup, and the Navigate cue below. */ .page-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1rem; /* var(--gutter), not 1.5rem. The homepage holds its colour-mode control at top: var(--gutter), and a header that used a different figure made the Light/Dark pair jump 14px up the moment you left the canvas. The two are now the same distance from the same corner - measured at 1280px: 38.39px on every page. */ padding: var(--gutter) var(--gutter) 0; } /* The nameplate, back on the inner pages (Frank, Sept 13 2026) as the full name rather than the alias — the same name the root node carries, so leaving the canvas doesn't change who the site belongs to. It is a link home, quietly: no rule at rest, one on hover, the same small tracked caps as every other mark. The canvas itself has no header; the root node is its nameplate. */ .page-head__mark { font-family: var(--font); font-size: var(--step-1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .page-head__mark:hover { border-bottom-color: var(--ink); } } /* ============================================================ Canvas pages — about, contact, work detail (Sept 9 2026) These were conventional documents: a column of text, ruled sections, boxed media, an inverted footer slab. Against the node tree they read as a different website. Rebuilt as scrolling canvases on the same terms as the homepage: - No rule ever separates two things. Space does it. - No box is ever drawn around anything. - Nothing sits in a column. An invisible 12-column grid places blocks so they step down and inward. - Media is a free object: draggable anywhere (js/drag.js) and drifting gently on its own. The grid is a placement tool, not a visible structure — if you ever find yourself adding a border to make the layout legible, the placement is wrong, not the border. ============================================================ */ .field, .work-field { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 1.75rem); row-gap: clamp(2.5rem, 7vw, 6rem); align-items: start; padding: clamp(2rem, 7vw, 5rem) var(--gutter) clamp(4rem, 10vw, 8rem); } /* ---------- Reading blocks ---------- */ .passage { margin: 0; font-size: var(--step-2); line-height: 1.55; text-wrap: pretty; } /* Four passages, evenly distributed (Frank, Sept 14 2026): the same measure for each (5 columns), one column of stair between steps, and one row-gap between rows — no pair pulled tight, no step wider than the next. All four end at column 8 or earlier, which is what lets auto-placement keep them in rows 1-4 beside the portrait; a passage reaching column 9 overlaps the portrait's cell and the grid pushes it below the portrait's whole span (Sept 13 — see .floater--portrait). */ .passage--a { grid-column: 1 / span 5; } .passage--b { grid-column: 2 / span 5; } .passage--c { grid-column: 3 / span 5; } .passage--d { grid-column: 4 / span 5; } .note { margin: 0; font-size: var(--step-1); line-height: 1.6; color: var(--ink-soft); max-width: 46ch; } /* Loose facts. A list, not a table — the old
needed rules to hold its columns apart, which is exactly what we're removing. */ .notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; font-size: var(--step-1); line-height: 1.5; } .notes .label { display: block; color: var(--ink-soft); } .notes--work { grid-column: 9 / span 4; } .notes--awards { grid-column: 9 / span 4; } /* ---------- Credits ---------- Two columns, never more: a film credit list is long and a single column of fifteen roles turns the page into a ladder. Anything past five rows is folded away by default and the fifth row fades out, so the block advertises that it continues without spending the height to prove it. js/work-detail.js decides whether to fold — the rule is rows, not entries, and it applies to every project. */ .credits { grid-column: 1 / span 7; } .notes--credits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); } /* Ten items is five rows across two columns. Past that the list is clipped rather than shortened — the entries still exist, they are just not spending space until asked for. */ .notes--credits.is-folded > li:nth-child(n + 11) { display: none; } .notes--credits.is-folded { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%); mask-image: linear-gradient(to bottom, #000 62%, transparent 97%); } .credits__more { margin-top: 1rem; font-family: var(--font); font-size: var(--step-1); line-height: 1; background: none; border: 0; padding: 0; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: baseline; gap: 0.5em; transition: color 0.2s var(--ease-out), transform 0.14s var(--ease-out); } .credits__more:active { transform: scale(0.94); } .credits__more:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; } @media (hover: hover) and (pointer: fine) { .credits__more:hover { color: var(--ink); } } @media (max-width: 860px) { .notes--credits { grid-template-columns: minmax(0, 1fr); } /* One column on a phone, so five rows is five entries. */ .notes--credits.is-folded > li:nth-child(n + 6) { display: none; } } /* ---------- Free-floating media ---------- */ .floater { margin: 0; position: relative; touch-action: none; cursor: grab; will-change: transform; } .floater.is-dragging { cursor: grabbing; z-index: 6; } /* ---------- Behind the scenes: the pile ---------- Three prints at the right margin, beside the CV. The .pile grid item has NO height of its own — the stage is absolute — so the CV's row is exactly as tall as the CV and the prints simply hang over the empty columns to its right. One click spreads the pile into a cascade down and to the left; another stacks it. Prints are sized by their longer edge (--edge), like the node frames, so the portrait and the two landscapes carry the same weight. */ .pile { grid-column: 9 / span 4; align-self: start; position: relative; height: 0; } .pile__stage { position: absolute; top: 0; right: 0; --edge: clamp(11rem, 18vw, 16rem); width: calc(var(--edge) * 1.1); height: calc(var(--edge) * 1.35); cursor: pointer; -webkit-tap-highlight-color: transparent; } .pile__stage:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; } .pile__item { position: absolute; right: var(--x); top: var(--y); margin: 0; width: var(--w); aspect-ratio: var(--ratio); z-index: var(--z); /* Two of the three transforms this print carries live here, on the figure, as the separate translate and rotate properties; the drift animates transform on the inner layer. None overwrites another. Spread moves translate and rotate only — compositor work, no layout. */ translate: var(--tx, 0) var(--ty, 0); rotate: var(--rot); transform-origin: 50% 50%; transition: translate 260ms var(--ease-out), rotate 260ms var(--ease-out); transition-delay: var(--delay, 0ms); } /* Stacking back is faster than spreading, and reverses the stagger, the way a branch closes on the canvas. */ .pile__stage[aria-pressed="false"] .pile__item { transition-duration: 170ms; transition-delay: calc(90ms - var(--delay, 0ms)); } .pile__item .drift { display: block; } .pile__item img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } /* Resting: a tight stack, offsets of a few pixels, a degree or two each way. Later in the DOM sits on top; the portrait leads. */ .pile__item--1 { --ratio: 16 / 9; --w: var(--edge); --x: 0.6rem; --y: 1.1rem; --rot: -2deg; --z: 1; --delay: 0ms; } .pile__item--2 { --ratio: 1600 / 1066; --w: var(--edge); --x: 0.2rem; --y: 0.5rem; --rot: 1.5deg; --z: 2; --delay: 45ms; } .pile__item--3 { --ratio: 3 / 4; --w: calc(var(--edge) * 0.75); --x: 0; --y: 0; --rot: -1deg; --z: 3; --delay: 90ms; } /* Spread: a cascade down and to the left, off the top of the stack — the print on top travels least, the one at the bottom furthest, so all three end up fully visible in a loose diagonal beside the CV. */ .pile__stage[aria-pressed="true"] .pile__item--3 { --tx: 0; --ty: 0; --rot: 1deg; } .pile__stage[aria-pressed="true"] .pile__item--2 { --tx: calc(var(--edge) * -0.55); --ty: calc(var(--edge) * 0.62); --rot: -2.5deg; } .pile__stage[aria-pressed="true"] .pile__item--1 { --tx: calc(var(--edge) * -0.2); --ty: calc(var(--edge) * 1.3); --rot: 2deg; } @media (max-width: 860px) { /* The field is a block stack here, so the pile takes real height and sits between the bio and the CV; the stage is centred and the cascade goes straight down. */ .pile { height: auto; margin-bottom: clamp(2rem, 9vw, 3.5rem); } .pile__stage { position: relative; margin-inline: auto; --edge: min(64vw, 15rem); height: calc(var(--edge) * 1.35); transition: height 260ms var(--ease-out); } .pile__stage[aria-pressed="true"] { height: calc(var(--edge) * 2.6); } .pile__stage[aria-pressed="true"] .pile__item--2 { --tx: calc(var(--edge) * -0.08); --ty: calc(var(--edge) * 0.7); } .pile__stage[aria-pressed="true"] .pile__item--1 { --tx: calc(var(--edge) * 0.05); --ty: calc(var(--edge) * 1.5); } } .floater figcaption { margin-top: 0.6rem; } /* The sound switch under a clip. No box - a word with a rule under it when it is on, the way a selected filter reads. It starts soft and goes to full ink when on, so the one clip with audio is the one that reads loudest on the page. */ .shot__sound { font-family: var(--font); font-size: var(--step-0); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); background: none; border: 0; border-bottom: 1px solid transparent; padding: 0.25rem 0; margin: 0; cursor: pointer; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.14s var(--ease-out); } .shot__sound:active { transform: scale(0.97); } .shot__sound:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; } .shot__sound[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); } @media (hover: hover) and (pointer: fine) { .shot__sound:hover { color: var(--ink); } } @media (prefers-reduced-motion: reduce) { .shot__sound:active { transform: none; } } /* The drift layer exists so three transforms never fight over one element: .floater carries the drag offset, .drift carries the ambient motion, and anything inside is free to do its own thing. */ .drift { display: block; will-change: transform; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both; } /* A frame with no frame. The tint is a placeholder standing in for an image that hasn't landed yet — once a real src exists the picture covers it and no rectangle is drawn at all. */ .shot { display: block; position: relative; overflow: hidden; background: var(--paper-dim); } .shot img, .shot video { display: block; width: 100%; height: 100%; object-fit: cover; } .shot--wide { aspect-ratio: 16 / 9; } .shot--tall { aspect-ratio: 3 / 4; } .shot--square { aspect-ratio: 1 / 1; } .shot--portrait { aspect-ratio: 4 / 5; } /* Native ratio, from --ratio set inline by js/work-detail.js from the file's own pixels. Nothing is cropped: the box IS the file's shape. */ .shot--native { aspect-ratio: var(--ratio); } /* Portrait media is capped by height rather than filling its grid slot's width — a 9:16 clip across nine columns would be taller than the screen. Width follows from the ratio; the figure sits at the start of its slot rather than stretching. */ .floater--upright { max-width: calc(min(78vh, 56rem) * var(--ratio)); justify-self: start; } .shot__empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; font-size: var(--step-0); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .floater--portrait { grid-column: 9 / span 4; /* Four rows: a, b, c, d - exactly the rows the passages occupy, and no more. The count is load-bearing in a way that took three tries to see (Sept 13 2026). Auto-placed items fill rows the portrait doesn't block, so if its span runs past the last passage row, the next item has to skip to the row after the span and every row in between exists as an EMPTY track - two 46px rows, once, and a passage a screen below the one before it. Four passages with a row-gap between them are taller than the portrait, so nothing stretches. If a fifth passage is ever added, this becomes span 5. */ grid-row: 1 / span 4; align-self: start; } .floater--lead { grid-column: 2 / span 9; } .floater--b { grid-column: 1 / span 5; } .floater--c { grid-column: 7 / span 5; margin-top: clamp(1.5rem, 5vw, 4rem); } .floater--d { grid-column: 3 / span 6; } /* ---------- Work detail ---------- */ /* justify-self matters more than it looks: a grid item is blockified, so .link-line would stretch to fill its column and its underline — drawn with a background gradient at 100% width — would render as a 300px rule across the page. Exactly the thing this layout removes. */ .link-line { justify-self: start; } .work-field__loading { grid-column: 1 / span 6; font-size: var(--step-2); margin: 0; } .work-title { grid-column: 1 / span 8; margin: 0; font-size: var(--step-8); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; } .work-marks { grid-column: 9 / span 4; align-self: end; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; } /* ---------- The case study, as a chain ---------- Five passages read in order. The number is the whole handle: it marks position in the sequence AND folds its passage away. There are no prose headings between the paragraphs — they chopped the reading — and no connecting lines, because edges between short labels read as a diagram but edges between paragraphs read as a flowchart of prose, which is the opposite of what these pages are. Order is carried by the numbers and by the step down the page. */ /* Two columns of passages, read down then across, the way columns of prose are read. Multi-column layout rather than a two-column grid: it balances the two columns by height on its own, and a numbered sequence flowing 01-02-03 down the left and 04-05 down the right is the newspaper convention. A grid would have paired 01 with 02 on a row and left holes under whichever of the pair ran shorter. The descending indent from the single column is kept (Frank's call), and it runs as ONE staircase through the whole sequence rather than restarting in each column: passage 03 sits two steps in wherever it lands, 05 four. That is what lets it survive multicol at all — the break between columns moves with content and viewport, so a stagger that restarted at the top of the right column would need to know where the break fell. A continuous one doesn't care. The step is about two-thirds of what the single column used. Indent is subtracted from the measure, and five steps of the old size would have taken the last passage under 40 characters. */ .beats { grid-column: 2 / span 10; /* two more than the single column had: two measures side by side, each giving up to five steps of indent, need the room or the lines run short */ column-count: 2; column-gap: clamp(2rem, 4vw, 4rem); } .beat { --step: clamp(0.75rem, 1.5vw, 1.5rem); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1rem, 2.5vw, 2rem); align-items: start; break-inside: avoid; /* a passage never splits across the fold */ margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); } /* Capped at the fifth step — past that the indent eats the measure instead of shaping it. */ .beat:nth-child(2) { margin-left: var(--step); } .beat:nth-child(3) { margin-left: calc(var(--step) * 2); } .beat:nth-child(4) { margin-left: calc(var(--step) * 3); } .beat:nth-child(5) { margin-left: calc(var(--step) * 4); } .beat:nth-child(n + 6) { margin-left: calc(var(--step) * 5); } .beat__num { font-family: var(--font); font-size: var(--step-1); line-height: 1.75; /* sits on the first line of the passage */ background: none; border: 0; padding: 0; color: var(--ink-soft); cursor: pointer; font-variant-numeric: tabular-nums; transition: color 0.2s var(--ease-out), transform 0.14s var(--ease-out); } .beat__num:active { transform: scale(0.94); } .beat__num:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; } @media (hover: hover) and (pointer: fine) { .beat__num:hover { color: var(--ink); } } /* A folded number keeps its place in the chain so the sequence never renumbers itself under the reader. */ .beat.is-closed .beat__num { color: var(--ink-soft); opacity: 0.55; } /* grid-template-rows 1fr -> 0fr is the one clean way to animate a collapse to its own content height. It touches layout, which transform and opacity avoid — accordions are the case where there is no transform equivalent, so it is the sanctioned exception. */ .beat__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 240ms var(--ease-out), opacity 240ms var(--ease-out); } .beat.is-closed .beat__body { grid-template-rows: 0fr; opacity: 0; transition-duration: 180ms; /* folding away is faster than opening */ } .beat__body > p { overflow: hidden; /* required for the 0fr row to clip */ margin: 0; font-size: var(--step-2); /* this is the body copy of the page */ line-height: 1.6; max-width: 56ch; } @media (prefers-reduced-motion: reduce) { .beat__body { transition: opacity 150ms var(--ease-out); } } .next-node { grid-column: 1 / span 6; display: grid; gap: 0.3rem; text-decoration: none; color: var(--ink); } .next-node__title { font-size: var(--step-6); line-height: 1.1; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease-out); justify-self: start; } @media (hover: hover) and (pointer: fine) { .next-node:hover .next-node__title { border-bottom-color: var(--ink); } } /* Two next-nodes side by side, as the About page closes (Sept 13 2026). Same component as the project pages' "Next project"; the second sits in the right half of the field so the pair reads as a fork, not a list. */ .next-nodes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 1.75rem); row-gap: clamp(2rem, 6vw, 4rem); } .next-nodes .next-node { grid-column: 1 / span 5; } .next-nodes .next-node--second { grid-column: 7 / span 5; } @media (max-width: 860px) { .next-nodes { display: grid; } .next-nodes .next-node, .next-nodes .next-node--second { grid-column: 1 / -1; } } /* ---------- Contact ---------- */ .passage--name { grid-column: 1 / span 8; margin: 0; font-size: var(--step-6); font-weight: 400; line-height: 1.1; } .passage--name span { color: var(--ink-soft); } .reach { margin: 0; display: grid; gap: 0.3rem; justify-items: start; } /* Rows are named here rather than left to auto-placement. With seven objects on the field, the order they happen to be written in stops being a composition - the two addresses together, the four outward links scattered across two rows, the CV last and the note beside it. Below 860px the field becomes a single column and every one of these is ignored, which is the intent. */ .reach--a { grid-column: 1 / span 5; grid-row: 2; } .reach--b { grid-column: 7 / span 5; grid-row: 2; } .reach--c { grid-column: 2 / span 3; grid-row: 3; } .reach--e { grid-column: 7 / span 3; grid-row: 3; } .reach--f { grid-column: 1 / span 3; grid-row: 4; } .reach--g { grid-column: 6 / span 3; grid-row: 4; } .reach--d { grid-column: 9 / span 4; grid-row: 5; } .reach .label { color: var(--ink-soft); } .reach__link { font-size: var(--step-4); line-height: 1.2; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease-out); } .reach__link--waiting { color: var(--ink-soft); } /* ---------- Links that leave the site ---------- The place name is the whole label. A mark appears beside it to say the link opens elsewhere - drawn as a hairline rather than set as the arrow character, because the page has exactly one typeface and it cannot be relied on to carry that glyph. ---------- */ .reach__link--out { display: inline-flex; align-items: baseline; gap: 0.3em; } /* The mark holds its space at all times, shown or not: revealing it must not shove the word it belongs to sideways. */ .reach__out { display: inline-block; flex: none; width: 0.5em; color: var(--ink-soft); } .reach__out svg { display: block; width: 100%; height: auto; } @media (hover: hover) and (pointer: fine) { a.reach__link:hover { border-bottom-color: var(--ink); } /* Where there is a pointer, the mark waits to be asked - this is a hover, seen dozens of times a session, so it is 140ms and two pixels and no more. On touch there is nothing to ask with, so the mark simply stays out, which is why this lives in here. */ .reach__out { opacity: 0; transform: translate3d(-2px, 2px, 0); transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); } .reach__link--out:hover .reach__out, .reach__link--out:focus-visible .reach__out { opacity: 1; transform: translate3d(0, 0, 0); } } /* Keyboard reaches it the same way a pointer does. */ .reach__link--out:focus-visible .reach__out { opacity: 1; } /* The mark still arrives, it just arrives without travelling. */ @media (prefers-reduced-motion: reduce) { .reach__out, .reach__link--out:hover .reach__out, .reach__link--out:focus-visible .reach__out { transform: none; } } .note--contact { grid-column: 2 / span 5; grid-row: 5; } /* ---------- End marks (replaces the inverted footer slab) ---------- */ /* Both marks sit to the left. They used to hold opposite ends of the line, but the lower right belongs to the Navigate cue now, and a branch opening on top of the copyright is worse than an asymmetry nobody will notice. */ .end-marks { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: clamp(1rem, 4vw, 3rem); padding: 0 var(--gutter) clamp(2rem, 5vw, 3.5rem); } .end-marks p { margin: 0; } .end-marks a { color: inherit; } .end-marks__mail { font-size: var(--step-4); color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .end-marks__mail:hover { border-bottom-color: var(--ink); } } /* .end-marks__inline is gone: work pages closed on a single small line while every other page closed on the large address and a quiet second line. They all use the same