/* Fergus Oswald — v3. * * Built from mockup/v3/source.dc.html, 19 Sep 2026. The design was made in * Claude with every style inline; this pulls them into classes so the same * rule is written once. Where a number here looks arbitrary it came from the * mockup — the clamp() ranges especially. * * ## The thing that shapes everything * * The page does not scroll. The shell is exactly the viewport, and only the * left pane scrolls inside it. That is the design: header, panel, index, with * a photograph filling the right. It means every panel has to survive a short * window, which is why the type scales with the viewport height as well as * its width. */ :root { --paper: #F2E3C7; /* the ground. Warm cream */ --ink: #33200F; /* the text. Near-black brown */ --flame: #D9541F; /* the accent: hover, the one coloured word */ --deep: #9C3A10; /* a link that has been hovered */ --pencil: #4A3A2C; /* the handwriting and the crayon underlines */ --dim: rgba(51, 32, 15, 0.76); --faint: rgba(51, 32, 15, 0.22); --wash: rgba(51, 32, 15, 0.06); /* The ground the mobile menu is painted on. A token because the page has two grounds — cream, and the dark one under the photographs — and the menu is opaque, so it has to bring whichever one is in force with it. */ --menu-bg: #F2E3C7; /* ⚠️ THE DARK GROUND, NAMED — 26 Sep 2026. Nick: *"the colouring is slightly different. Look at that."* It was: the home page had arrived from a design refresh carrying #201711, #f1e3c9 and #dc6439, against the site's own #2A1E14, #F2E3C7 and #D9541F. Three near-misses, each close enough that nobody would name the colour and far enough that the seam showed. ⚠️ THE SITE'S VALUES WON, NOT THE REFRESH'S, and the difference is invisible either way — what matters is that there is now ONE of each. These already drive the record label, the crayon underlines and the hand-drawn boxes, so taking the refresh's values instead would have recoloured half the site to settle a difference nobody can see. */ --ground: #2A1E14; --display: 'Bricolage Grotesque', Helvetica, Arial, sans-serif; --hand: 'Architects Daughter', 'Comic Sans MS', cursive; --body: Karla, Helvetica, Arial, sans-serif; /* ⚠️ THE FOURTH FACE, from 26 Sep 2026, and it is the HEADER'S face — the wordmark, the tagline and the index, on every page. Nick: *"Make the navigation and the rest of the site look like it does on the homepage."* The home page arrived from a design refresh set in Georgia, and rather than pull it back into the other three faces he chose the other direction: the chrome is Georgia everywhere now. ⚠️ IT IS A TOKEN AND NOT THREE COPIES OF 'Georgia, serif'. The header is the one part of this site that appears on every page, so a face written out in each rule is three chances to drift. ⚠️ AND IT STOPS AT THE CHROME. The panels keep the hand, the display face and Karla — the crayon headings, the drawn boxes and the record label are the site's character and none of them is in Georgia. This token is the frame, not the picture. */ --mark: Georgia, 'Times New Roman', serif; } html, body { margin: 0; padding: 0; height: 100%; background: var(--paper); overflow: hidden; } * { box-sizing: border-box; } body { font-family: var(--body); color: var(--ink); } a { color: var(--ink); text-decoration: none; } ::selection { background: var(--flame); color: #F2E3C7; } /* ⚠️ THE TOKEN, not the brown. Typed literally, this survived the flip and left the contact fields as three empty boxes on the dark — no idea what went in any of them. Same trap as .hard-fail, in the opposite direction: that one paired two tokens that had become one colour, this one dodged the tokens altogether. textarea too; only inputs were covered. */ input::placeholder, textarea::placeholder { color: var(--dim); opacity: 0.8; } .defs { position: absolute; } :focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes slidein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes draw { from { stroke-dashoffset: -62; } to { stroke-dashoffset: 0; } } /* The box round a button. pathLength="100" normalises the outline, so this is the same arithmetic whatever width the button turns out to be. */ @keyframes draw-box { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } /* ⚠️ `pale` IS THE OLD BEHAVIOUR AND IS NO LONGER USED ON THE SIGNUP BUTTON. It is kept because it is the readable record of what the button did until 23 Sep 2026: dark pencil strokes laid down, and the word going pale as they arrived underneath it. */ @keyframes pale { from { color: var(--ink); } to { color: var(--paper); } } /* The words on the signup button go DARK as the white arrives underneath. Nick, 23 Sep 2026: *"make that box coloured in with the white colour, and make the 'Sign up' word dark so that it can be seen."* ⚠️ It starts from `--ink` and not from a fixed colour, and that is the whole trick — it makes one keyframe right on both grounds. On the cream page `--ink` IS the dark brown, so the word is dark before the fill and dark after it: nothing visibly happens, which is correct, because a dark word on cream was always readable. On a photo home page `--ink` is flipped to the paper colour, so the word starts pale against the photograph and turns dark exactly as the white block arrives to carry it. */ @keyframes ink { from { color: var(--ink); } to { color: #33200F; } } @keyframes write { from { clip-path: inset(0 100% -20% 0); } to { clip-path: inset(0 -6% -20% 0); } } /* The mockup animates for thirteen seconds. Honoured, but never at the cost of the content appearing — every animated thing is visible at rest. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; } /* ⚠️ Not enough on its own for the doors. Both of their animations START from an invisible state, so merely making them instant leaves a page of blank boxes for a moment — and on a slow machine, longer. These land them finished. */ .door-word, .written-word, .note, .ask-kicker, .ask-words span, .ask-small, .ask-go .go-word { clip-path: none !important; } .door-box path, .drawn-box path, .drawn-box line, .drawn-rule path { stroke-dashoffset: 0 !important; } /* ⚠️ REVERSED 23 Sep 2026 with the button itself. The fill is white now, so a word that lands pale lands white on white. It has to land DARK. */ .ask-go .go-word { color: #33200F !important; } } /* ---- the frame ----------------------------------------------------------- */ .shell { position: fixed; inset: 0; display: grid; /* ⚠️ `minmax(0, 1fr)` AND NOT `1fr`, for the same reason the rows already say it — and leaving the column out was a real fault, not a tidiness one. A grid with no declared column gets ONE implicit `auto` column, and a grid item's default `min-width: auto` refuses to shrink below its own min-content. So the column grew to whatever the widest thing inside demanded and the whole frame went with it: **measured at 452px inside a 390px phone on 21 Sep 2026**, with `.top`, `.body` and every panel all 452 wide and the right-hand 62px simply off the screen. That one missing word is why the standfirst read "Singer / Songwriter / Instrumentalis", why the index sliced "Drums etc" and dropped Follow/Contact onto a second line behind a stray slash, and why Nick reported the Releases and Drums etc pages as "too wide" on a phone. Four symptoms, one cause — and the suite passed through all of them, because nothing in it measures a width. `minmax(0, 1fr)` lets the column be narrower than its content, and the things inside that scroll (the reel, the lists) go back to scrolling. */ grid-template-columns: minmax(0, 1fr); /* ⚠️ TWO ROWS, not three. The third was the index along the bottom; it moved into the header on 25 Sep 2026 and the row went with it. */ grid-template-rows: auto minmax(0, 1fr); padding: clamp(14px, 2.2vh, 26px) clamp(16px, 2.6vw, 34px); } .top { /* Positioned for the same reason .pane is: so the full-bleed photograph on the home page passes UNDER the wordmark rather than over it. A fixed .plate carries z-index 0, and a positioned element with z-index 0 paints above ordinary in-flow content — so without this the picture would sit on top of the name. */ /* ⚠️ z-index 3, not 1. The header now holds the mobile menu, which drops DOWN over the panel — and the panel is z-index 1. At 1 the menu opened behind the page it was meant to cover. */ position: relative; z-index: 3; padding: clamp(14px, 3.2vh, 40px) 0 clamp(10px, 1.6vh, 18px); border-bottom: 1px solid var(--ink); } /* ⚠️ THE HEADER IS ONE ROW ON EVERY PAGE — 26 Sep 2026, the arrangement the home page already had. Nick: *"Make the navigation and the rest of the site look like it does on the homepage."* It used to be two stacked rows — name and tagline across the top, index underneath — which is a masthead. Home put the name left and the five words hard right on one line, and that is the shape now. ⚠️ SO THE TAGLINE HAD TO MOVE, and there was nowhere obvious. Top-right is where the index goes now. It sits under the name instead, which is where a tagline belongs anyway — a strapline beside a wordmark was always competing with it. ⚠️ AND IT BECOMES ONE LINE. Four stacked words under the name made the header twice as tall as the home page's; the `
`s are turned into spaces rather than removed from the markup, because the phone still stacks them. */ .top { display: flex; align-items: baseline; justify-content: space-between; gap: clamp(18px, 3vw, 46px); flex-wrap: wrap; } /* ⚠️ `flex: 1 1 auto` AND `min-width: 0`, NOT `flex: 0 0 auto` — and this is the SAME FAULT the shell's grid column documents at length further up, met a second time in a different property. `0 0 auto` refuses to shrink, so this column took the full width of the tagline on one line — "singer · songwriter · instrumentalist · edinburgh, leeds" — and pushed `.top` to 484px inside a 390px phone. **The burger went with it, to x=450, off the side of the screen**: no menu button at all on a phone, and nothing in the suite says a word because nothing measures a width. Found by rendering at 390px and printing the element's rectangle, which is the only thing that could have found it. It is invisible in the source and invisible in a screenshot — the button is simply not there. */ .top-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 auto; min-width: 0; } .top > .index { flex: 0 1 auto; justify-content: flex-end; padding-top: 0; } /* ⚠️ THE BREAKS BECOME SPACES, NOT NOTHING. `display: none` on a `
` closes the words up — the same fault that made the wordmark read "fergusoswald". An inline-block with a space in it keeps them apart. */ /* ⚠️ The `
` trick that used to be here is gone: a `
` set to `display: inline` still breaks the line, and `display: none` closes the words up. The separators are real text in `index.html` now. */ /* ---- the hamburger ------------------------------------------------------ ⚠️ Three lines drawn in CSS, not an icon font and not an SVG. It is the one piece of chrome on this site that is NOT hand-drawn, on purpose: a wobbly hamburger reads as a mistake rather than as a style, because everybody knows exactly what shape this is meant to be. */ .burger { display: none; /* desktop has the index itself */ flex-direction: column; justify-content: center; gap: 5px; /* ⚠️ NO HORIZONTAL PADDING and no negative margin. The first version had `padding: 0 8px; margin-right: -8px` to sit the bars flush with the rule below — and the negative margin pushed the button 8px past the row it was in, so on a 390px phone the right-hand bar ends were cut off by the screen edge. The bars ARE the button now; it is the whole width that lines up. 44px tall for the thumb, pulled back with a negative bottom margin so it does not set the header's height. */ width: 34px; height: 44px; flex: 0 0 auto; margin: 0 0 -2px 0; padding: 0; border: 0; background: none; cursor: pointer; } .burger span { display: block; height: 2px; width: 100%; background: var(--ink); transition: transform 0.2s ease, opacity 0.15s ease; } /* Open, it is a cross — so the same control closes it and there is never a menu on screen with nothing obvious to press. */ .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ⚠️ LOWERCASE, IN THE HEADER'S FACE, ON EVERY PAGE — 26 Sep 2026. Nick: *"Fergus Oswald runs in the same font as elsewhere. Let's make it all lowercase everywhere else."* It was `--display` at 700 in CAPITALS, which is a different mark from the one on the home page — two wordmarks for one artist, decided by which page you happened to land on. ⚠️ THE LINE BREAK IS GONE WITH IT. `Fergus
Oswald` stacked the name in two lines because a heavy uppercase mark needed the width; a lowercase Georgia one does not, and stacked lowercase reads as two words rather than a name. The `
` is hidden everywhere now, not only on home — which is why the space after it in the markup is load-bearing on every page and not just one. */ .wordmark { font-family: var(--mark); font-weight: 400; font-size: clamp(21px, 2.3vw, 33px); line-height: 1; letter-spacing: -0.045em; text-transform: lowercase; white-space: nowrap; } .wordmark br { display: none; } /* ⚠️ THE TAGLINE FOLLOWS THE WORDMARK, 26 Sep 2026 — Nick named it in the same breath. It was 10px letterspaced CAPITALS, which is a third voice in a header that now has one: an uppercase caption under a lowercase name. ⚠️ THE LETTERSPACING GOES TOO, and that is the part that matters. Wide tracking is what makes small capitals legible; keep it on lowercase italic and the words come apart. Removing the case without removing the spacing would have looked like a mistake rather than a change. */ .standfirst { margin: 0 0 3px; font-family: var(--mark); font-style: italic; font-weight: 400; font-size: clamp(11px, 0.95vw, 13px); line-height: 1.35; letter-spacing: 0; text-transform: lowercase; color: var(--dim); /* ⚠️ LEFT, from 26 Sep 2026. It was right-aligned because it sat in the top-right corner opposite the wordmark; it sits UNDER the wordmark now, so right-aligning it hung it off the wrong edge — visible immediately, and nothing in the suite would have said a word. */ text-align: left; } /* ⚠️ THE `
` SHOWS AGAIN, from 26 Sep 2026. It was turned into a separator when the tagline went on one line; it is a two-line sentence now, so the break is the line break it always was. */ .standfirst br { display: inline; } /* ⚠️ THE EMPTY DIARY ROW IS IN THE HANDWRITING, from 26 Sep 2026, and it is the only row on this page that is. A real gig is set in the page's body face because it is data — a date, a venue, a ticket link. This is Fergus saying there is nothing yet, so it is in his hand and not in the table's. */ .row.row-empty { font-family: var(--hand); font-size: clamp(16px, 1.7vw, 21px); color: var(--dim); padding-top: clamp(6px, 1.2vh, 12px); } .row.row-empty .where { font-weight: 400; } /* ⚠️ THE ARROW IS FORCED INTO THE PAGE'S OWN TYPE. The variation selector in `ARROW` asks the system for the text form; naming serif fonts here is the belt to that braces, because a font stack that has no glyph for U+2197 will fall back to one that does — and the one it picks on a phone is the emoji font. Both are needed: the selector alone loses to a missing glyph. */ .arr { font-family: var(--mark); font-variant-emoji: text; } /* The photograph sits BEHIND the words, not beside them. Nick, 19 Sep 2026: "put the video / image behind the buttons aligned to right and with a mask that blends the photo/video into the background colour so most of behind the buttons is the colour not the photo." So this stopped being a two-column grid. The words span the full width and the picture is a layer underneath, pushed to the right and faded out leftwards — see .plate. */ .body { position: relative; min-height: 0; padding: clamp(14px, 2.4vh, 30px) 0; display: flex; } .pane { position: relative; z-index: 1; /* above the wash */ flex: 1 1 auto; min-width: 0; min-height: 0; /* ⚠️ NOT `justify-content: center`. A centred flex column that is taller than its box overflows at BOTH ends, and the top overflow cannot be scrolled to — scrollTop is already 0 there. On a short window the six buttons sat above the pane's top edge and were unreachable by any means. `margin-block: auto` on the child centres it exactly the same way when it fits, and collapses to a normal top-aligned scroll when it does not. The brief is no scrolling; the fallback is for the window that makes that impossible, and a reachable page beats a clipped one. */ display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; scrollbar-width: none; } .pane > * { margin-block: auto; } /* ⚠️ HOME IS CENTRED, THE SUB PAGES ARE NOT. Nick, 21 Sep 2026: "keep the title of each section at the top at same level". Vertical centring puts a short panel's heading halfway down and a long one's at the top, so the written heading jumps as you move between them. Only home — six doors and a signup, designed as one centred block — keeps the auto margins. */ .pane-top { justify-content: flex-start; } .pane-top > * { margin-block: 0; } .pane::-webkit-scrollbar { width: 0; height: 0; } .panel { animation: slidein 0.45s ease both; } /* ---- the photograph ------------------------------------------------------ */ /* The wash. * * Pinned to the right of the content area and faded out towards the left, so * the buttons sit on cream and the picture is only really present at the right * edge. Three things do that work together and all three are needed: * * - the MASK fades the layer itself out leftwards, to nothing by 88% * - `multiply` blends what is left into the cream rather than sitting on it * - grayscale plus a low opacity stops a colour photograph competing with * the one accent colour on the page * * A mask rather than a gradient overlay on top: an overlay would also dim the * text sitting above it, and the text is the point. */ .plate { position: absolute; top: 0; bottom: 0; right: 0; width: min(62%, 780px); z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to left, #000 0%, #000 34%, rgba(0,0,0,0.45) 62%, transparent 88%); mask-image: linear-gradient(to left, #000 0%, #000 34%, rgba(0,0,0,0.45) 62%, transparent 88%); } .plate img, .plate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; filter: grayscale(1) contrast(1.04); mix-blend-mode: multiply; opacity: 0.5; } /* ⚠️ THE FADE IS ON THE PARENT, NOT THE PICTURE, and that is a bug fix rather than tidying. `fadein` runs `opacity: 0 → 1`, and `animation-fill-mode: both` leaves the final keyframe in force for ever. An animation beats a normal declaration in the cascade, so `opacity: 0.5` on the picture above NEVER APPLIED — every photograph rendered at full strength. It was invisible because no photograph has ever been in the picture store, so the plate has only ever shown its placeholder text. The first picture put behind the page, on 21 Sep 2026, came out almost black and the page with it. Fading the PARENT leaves the picture's own opacity alone. */ .plate { animation: fadein 0.6s ease both; } /* ---- the home page, with a photograph behind it --------------------------- */ /* * Nick, 21 Sep 2026: *"the text/buttons etc should be the beige colour instead * of the black/brown"*, and before that *"the photo/video to be under the * buttons and text… photo/video to completely fill the screen on phone."* * * So home stops being ink-on-paper and becomes paper-on-photograph. It is four * custom properties rather than a second set of rules, because every colour on * the page already comes from these — including the hand-drawn boxes, whose * stroke was changed to `currentColor` in `app.js` on the same day so that a * flip reaches them too. It used to be the hex value typed twice. */ /* ⚠️ SCOPED TO .pane, NOT TO THE PAGE — and it has to be. The photograph now stops at the two rules, so the header and the index sit on plain beige. Flipping the whole page would put beige writing on beige there: the wordmark and the index would vanish. Only the band over the photograph goes pale. Caught by rendering it; the first version flipped `body`. */ /* ⚠️ NO LONGER SCOPED TO .pane. The note above was right while the photograph stopped at the two rules: flipping the whole page would have put beige on beige in the header and the index. Now the photograph runs behind those too, so the opposite is true — leaving them dark would put brown writing on a dark picture. The flip goes on the body and reaches everything. */ /* ⚠️ SCOPED BACK TO `.pane`, 25 Sep 2026. Nick: *"can we keep the images out of the header and footer?"* — which is the same instruction he gave on 21 Sep, *"the header and the footer should be the original beige"*, asked again because the code had drifted back. The flip was moved onto `body` when the picture started running the full height of the window, and the reasoning then was sound: *"leaving them dark would put brown writing on a dark picture."* **The picture no longer runs the full height** — see `.plate.full`, which was `position: fixed` against a comment insisting it was not — so the reason has gone and the flip goes back with it. ⚠️ So the bands above and below are cream with brown writing, as they were drawn, and only the panel between the two rules is paper-on-photograph. */ /* ⚠️ SCOPED BACK TO THE WHOLE PAGE, 25 Sep 2026 (second change today). Nick: *"Make the header and footer darker - around the colour it was when the photo extended into it - change the type accordingly so it shows up."* ⚠️ THIS IS A COLOUR DECISION, NOT A REVERSAL OF THE PICTURE ONE. Earlier today the flip was pulled back to `.pane` because the photograph had stopped running the full height, and cream bands with brown writing were what he drew. He has now asked for the bands to be DARK anyway — the ground the photograph used to sit on — while the photograph itself stays between the two rules. Both are true at once: `.plate.full` is still absolute inside `.body`, and there is a check that it never goes back to `fixed`. So do not "restore" the `.pane` scoping by reading the history above. The picture is in the lines; the colour is not. */ body.photo-home, body.photo-home .pane, body.photo-home .plate { --ink: #F2E3C7; /* the writing is the paper colour now */ --pencil: #F2E3C7; --dim: rgba(242, 227, 199, 0.88); --faint: rgba(242, 227, 199, 0.42); --wash: rgba(242, 227, 199, 0.08); /* the film wells, now that they sit on a photograph */ color: var(--ink); } /* The picture can be strong now, and has to be: pale writing needs something dark under it. This is the opposite problem to the cream page, where the photograph had to stay faint to keep out of the ink's way. */ /* ⚠️ 1, not 0.92, from 25 Sep 2026 — with the filter above, this is the other half of *"make it brighter across the whole site."* At 0.92 the picture was being faded into the near-black behind it as well as toned; there is no reason for both. */ /* ⚠️ The dark ground belongs to the BODY BAND, not the page. `body` keeps the paper colour so the header and the index sit on cream; `.body` — the band between the two rules — is what goes dark behind the picture. */ body.photo-home { --plate-strength: 1; --menu-bg: var(--ground); } body.photo-home .body { background: var(--ground); } /* The bands above and below take the same ground, so the page is one dark sheet with the picture in the middle of it rather than a lit strip between two cream ones. */ body.photo-home, body.photo-home .shell { background: #2A1E14; } /* ⚠️ THE BUTTON DOES NOT FOLLOW THE PAGE'S FLIP, and that is still the point — but it is now pinned in the STYLESHEET rather than here. Everything else in the band goes pale because it sits on a photograph. The button is not writing on a photograph — it is a coloured-in block, and it brings its own ground with it. From 23 Sep 2026 that block is WHITE with a dark word on it (Nick's request), and both of those colours are hard-coded on `.ask-go` near the bottom of this file, so there is nothing left for this block to correct. ⚠️ KEEP READING BEFORE CHANGING THE BUTTON. The 21 Sep version of this note recorded that a pale block with a dark word had been TRIED and was unreadable: the word was lost among the gaps between the pencil strokes, which on a photograph show the picture through. That failure was real. What fixed it was not going back to dark — it was closing the gaps: the strokes are laid fully opaque so the middle of the block is solid and only its edges stay rough. Undo that and the 21 Sep problem comes straight back. Caught, then as now, by cropping the render and looking at it — not by any check. */ /* Solid, per Nick's *"buttons to be solid"*. Over a photograph a hairline reads as a smudge, so the drawn OUTLINES thicken and stop being translucent. ⚠️ `.edge`, NOT `path` — and this one selector shipped the signup button broken to the live site on 23 Sep 2026. It said `path`, which was exactly right while the only paths inside a drawn box were outlines. The signup button's pencil colouring is ~48 more paths in the same box, and this rule was forcing every one of them from the 12px they are generated at down to 2.6px. On a 5px step with a filter that displaces points by up to 3.4px, 2.6px strokes do not touch: the white block came out shot through with holes showing the photograph, and the dark word sat invisible among them. ⚠️ **Nick read it on the live site: *"the signup button is still illegible"*.** Everything measurable was correct — the stroke attribute said 12.12, the colour computed to white, the opacity to 1, the word to dark brown, and 348 checks passed. The browser was rendering 2.6px. **A generated attribute is not what gets drawn; the computed style is**, and nothing in this suite was reading computed styles. ⚠️ It also explains why the isolated render looked right and the live page did not: the test harness had no `.pane` in the ancestry, so this rule never applied to it. **An isolated render is not the page.** */ body.photo-home .pane .door-box .edge, body.photo-home .pane .drawn-box .edge, body.photo-home .pane .drawn-box line { stroke-width: 2.6; } body.photo-home .pane .hint { opacity: 1; } /* ⚠️ REVERSED 21 Sep 2026. This block used to hide the drawn box on the home page and put a flat cream rectangle behind the word instead. Nick, looking at the live site: *"the sign-up button... needs to be coloured in roughly, not smoothly."* That flat rectangle IS the smoothness — the pencil colouring was still being generated underneath and then hidden. The original reasoning was that a sketch "reads as a sketch on paper and as a mess on a photograph". That was a guess about how it would look, made without rendering it, and it was wrong: the colouring-in is the character of this site, and taking it off the one button everybody is asked to press took the character off exactly the wrong thing. What the flip actually needed was only the SECOND half of the old note — the email box, whose text is hard-coded brown and invisible here. That stays. */ body.photo-home .pane .ask-go { background: transparent; } /* ⚠️ The full-opacity strokes moved to `.ask-go` itself on 23 Sep 2026 and now apply on BOTH grounds, because the white block needs to be solid everywhere, not only over a photograph. This rule is left as a pointer rather than deleted: it is where anyone looking for the photo-home stroke weight will come, and finding nothing reads as "it was never set". */ /* The small print under the form, and the standfirst, sit directly on the photograph with nothing behind them. A shadow rather than a panel: a box behind every stray line would turn the page into a set of cards. */ body.photo-home .pane { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); } /* Nick, 21 Sep 2026: *"let's put some padding between the buttons and the left side."* On every other panel the words start at the left rule, which is right when they are on plain cream — the rule and the text share an edge and the page reads as one column. Over a photograph it reads as the buttons being pushed up against the frame. It goes on the PANE rather than on `.doors`, so the signup and its small print move with the buttons. Indenting the buttons alone would leave the writing beneath them hanging off to the left, which is worse than the thing it fixes. Scoped to the photograph page: the text panels are unchanged. */ body.photo-home .pane { padding-left: clamp(16px, 2.6vw, 44px); } /* ---- the photograph, full bleed behind the home page ---------------------- */ /* * Nick, 20 Sep 2026: *"put the image completely behind the home page."* * * On every other panel the photograph is a column down the right, handed back * to the words by the mask above. On HOME it fills the window instead and sits * behind everything — the wordmark, the doors and the index alike. * * **`fixed`, not `absolute`.** `.plate` lives inside `.body`, which sits inside * `.shell`'s padding, so an absolute full-bleed would stop at the padding edge * and leave a cream margin down three sides — which reads as a mistake rather * than a design. Nothing in its ancestry uses `transform`, `filter` or * `will-change`, so `fixed` reaches the real window edges. Checked, because a * single transform anywhere above it would silently turn this back into an * absolute box and the border would come back. */ .plate.full { /* ⚠️ ABSOLUTE, INSIDE .body — not fixed to the window, and that is Nick's instruction of 21 Sep 2026: *"the header and the footer should be the original beige — the photo/video should not extend to those, it should be within the lines."* The lines are the rule under the wordmark and the rule over the index. `.body` is exactly the band between them, so `inset: 0` against it lands on both without a number being typed. An earlier version of this was `position: fixed; inset: 0`, which filled the whole window — and took the header and footer with it. */ /* ⚠️ FIXED TO THE WINDOW, which reverses the 'within the lines' rule of 21 Sep. Nick, same day, later: *"extend the background image to go behind the header and footer."* So it is the whole window again, and the two rules now sit ON the photograph rather than fencing it in. Nothing in .plate's ancestry uses transform, filter or will-change, so `fixed` reaches the real window edges — checked, because any one of those above it would silently turn this back into an absolute box and put the beige margin back down three sides. */ /* ⚠️ `absolute`, NOT `fixed`. It was fixed, and the comment above — written when it was absolute — has been describing something the file stopped doing. **A stale comment is worse than no comment**, and this one hid the fault for days: it says in Nick's own words that the picture must not reach the header and the footer, directly above a rule that made it fill the whole window. Nick, 25 Sep 2026: *"can we keep the images out of the header and footer?"* — which is the same instruction as 21 Sep, asked again because the code had drifted back. `.body` is `position: relative` and is exactly the band between the rule under the wordmark and the rule over the index, so `inset: 0` against it lands on both without a number being typed. */ position: absolute; inset: 0; width: auto; /* No mask. The mask exists to give the left half back to the words; behind all of them there is no left half to give back. */ -webkit-mask-image: none; mask-image: none; } /* ⚠️ THE SCRIMS, carried over from the v4 exploration, and they are what makes a full-bleed photograph survive under a LIST rather than under six buttons. Home could rely on `text-shadow` alone: big pale words, lots of gaps, and the picture reading through them was the point. Releases, Live and Playlists are rows of 11px labels and hairline rules, and those disappear over any busy part of a photograph. Two gradients rather than one flat tint: a diagonal weighted to the left, where the writing lives, and a vertical one that anchors the two rules top and bottom. A flat tint strong enough for the tracklist would have killed the photograph everywhere else. */ .plate.full::before, .plate.full::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; } .plate.full::before { background: linear-gradient(100deg, rgba(42, 30, 20, 0.92) 0%, rgba(42, 30, 20, 0.82) 38%, rgba(42, 30, 20, 0.46) 72%, rgba(42, 30, 20, 0.68) 100%); } /* Weighted to the very top and the very bottom now that the wordmark and the index sit on the picture rather than above it — 10px letter-spaced caps need more help than a headline does. */ .plate.full::after { background: linear-gradient(to bottom, rgba(42, 30, 20, 0.86) 0%, rgba(42, 30, 20, 0.42) 16%, transparent 34%, transparent 62%, rgba(42, 30, 20, 0.52) 82%, rgba(42, 30, 20, 0.9) 100%); } .plate.full img, .plate.full video { /* ⚠️ `center 35%`, not `center`. These are all photographs OF A PERSON, and a portrait photograph cropped to a wide band with the middle kept shows a torso. Biasing upward is right far more often than it is wrong, so it is the default and a panel says otherwise with its own `focus`. ⚠️ It only matters on a wide window — a portrait picture in a portrait window is barely cropped at all, which is why every phone check of this page has passed while a desktop cut Fergus's head off. */ object-position: center 35%; /* ⚠️ `multiply` is turned OFF here, and this is the whole reason the full-bleed version needed its own rule rather than a wider `.plate`. `mix-blend-mode` blends an element with its backdrop WITHIN ITS OWN STACKING CONTEXT — and the `position: fixed` above creates one. So the moment this went full bleed, `multiply` stopped seeing the cream page underneath and started blending against nothing. A photograph that had been a soft wash down the right-hand column came through at almost full strength and turned the entire page black, with the wordmark and the doors barely legible on top of it. It was RENDERED AND LOOKED AT, which is the only reason this is written down rather than shipped. The arithmetic said 0.26 would be comfortable. It was not remotely comfortable. */ mix-blend-mode: normal; /* ⚠️ NOT grayscale here, and that is the colouring fix rather than a preference. Nick, 20 Sep 2026, on the first full-bleed render: *"just the colouring."* The column treatment desaturates the picture to grey, which is right when it is a sliver at the right-hand edge and wrong when it is the whole page: grey over cream goes muddy, and the page stops being cream at all. The warm ground is the design — it is the first thing named in `:root`. So the picture is toned INTO the paper instead of drained of colour. `sepia` pulls it towards the same warm brown as --paper and --ink; `brightness` lifts it off black, because the photograph is a near-black red-lit live shot and a dark picture at any opacity reads as dirt rather than as a photograph. */ /* ⚠️ LIGHTENED 25 Sep 2026. Nick: *"make it brighter across the whole site."* Was `sepia(0.42) saturate(0.7) brightness(1.24) contrast(0.92)`. ⚠️ **The old values were tuned for a page that no longer exists.** The note below them argues the picture must be toned into the CREAM, because "grey over cream goes muddy and the page stops being cream at all". That was true when the pictures sat behind a cream panel. Since 22 Sep every panel is paper-on-photograph — `document.body.classList.add('photo-home')` runs unconditionally — so the ground behind a picture is dark, not cream, and 42% sepia over a dark ground is just a muted picture. Some sepia stays, because the palette is warm and a cold photograph in the middle of it reads as a different site. It is half what it was, not none. */ filter: sepia(0.2) saturate(0.98) brightness(1.18) contrast(0.98); /* How present the photograph is. ONE NUMBER on purpose — the same reasoning as TEMPO for the animation speeds: "make the photo stronger" has to stay a single edit or it stops being a thing anyone adjusts. ⚠️ Low, deliberately. The cream and the ink are the design; the photograph is behind them. Every value above about 0.25 starts taking the page's colour away rather than adding to it — which is exactly what Nick objected to. It is a look he picks, not a value that is correct. */ /* Nick, 21 Sep 2026: *"make the opacity mask on the background vid/pics a bit less dense maybe 20% so pics are brighter"*. 0.14 -> 0.20. ⚠️ This is the ONE number, and it stays one number. The note above it has said since 20 Sep that anything above about 0.25 starts taking the page's colour away rather than adding to it — 0.20 is inside that, and it is a look Nick picks rather than a value that is correct. */ opacity: var(--plate-strength, 0.20); } /* ⚠️ GONE. The caption labelled the photograph when it was a column down the right-hand side with its own space to sit in. Full bleed removed that space: `bottom: 0` became the window's bottom, so it landed in the index's row and smudged into "Follow/Contact", and being an auto-z sibling of a z-index: 1 scrim it was painted under an almost-opaque wash on the way — an illegible ghost on top of the navigation. Deleted rather than re-anchored. It was labelling a picture nobody is asked to look at: the plate is aria-hidden with an empty alt precisely because it is a wash behind the words. */ .plate .caption { display: none; } /* A panel whose photograph has not been supplied yet. NOT an empty rectangle: the design names what each one should be, so the placeholder says it. An unfilled slot that states its own brief reads as work in progress; a blank one reads as broken. Same call as the drawn release covers. */ /* No photograph yet. NOT a bordered box — this layer is behind the buttons now, and a rectangle with a border round it behind the words would look like a mistake rather than a slot. Just the brief, quietly, bottom right. */ .plate-empty { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: clamp(14px, 3%, 30px); } .plate-empty .hint { margin: 0; max-width: 20ch; text-align: right; font-family: var(--hand); font-size: clamp(14px, 1.4vw, 19px); line-height: 1.3; color: var(--pencil); opacity: 0.45; } /* ---- sub pages: written headings and pencil annotations ----------------- * * Nick, 21 Sep 2026, choosing from the three explorations: "1a headings and * 1c annotations". So every panel below home opens the way home does — a word * written in the hand with a crayon line drawn under it — and the typeset * list underneath is then MARKED UP rather than redrawn: a ring round the row * that matters, a note in the margin in the accent colour, and the row rules * themselves drawn rather than ruled. * * The list stays typeset on purpose. A gig list or a discography is read by * scanning, and handwriting at six rows is slower to scan than type. The hand * does the heading, the edges and the pointing; the type does the facts. * * ⚠️ EVERY DRAWN LINE HERE IS GENERATED AT ITS MEASURED SIZE, by fitRules(), * for the same reason fitDoors() exists: a path authored at one width and * stretched to another with preserveAspectRatio="none" comes apart under the * crayon filter — the displacement is applied AFTER the scale, so a line * stretched 3x breaks into staggered dashes. These elements ship empty and * are filled once the browser knows how wide they are. */ .written { position: relative; display: inline-block; max-width: 100%; } .written-word { display: inline-block; font-family: var(--hand); /* ⚠️ BROUGHT DOWN a quarter on 25 Sep 2026 — Nick: *"the page headings seem a bit big."* It was clamp(24px, min(4.6vw, 6.4vh), 48px), which put "Playlists I'm recommending" across half a desktop screen. The heading is written by hand and sits above a drawn rule; at 48px the rule became the widest thing on the page and the panel below it read as a footnote to its own title. */ /* ⚠️ DOWN AGAIN ON 26 Sep 2026, and this is the SECOND reduction for the same reason — Nick: *"could the titles on each page be slightly smaller? Judge the best balance with the rest of the page."* 36 was already a quarter off the original 48. What changed since is the page under it: the record shelf, the television and the tape deck are all large objects now, and a heading sized against a page of text is sized against the wrong thing. At 30 the heading names the panel and the object below it is plainly the subject. ⚠️ THE FLOOR MOVED TOO, 22 to 20. On a phone the heading is nearly always at the floor, so leaving it would have meant "slightly smaller" doing nothing at all on the screen Nick looks at most. */ font-size: clamp(20px, min(2.9vw, 4.1vh), 30px); line-height: 1.05; color: var(--ink); /* ONE LINE. The heading is written, and the crayon line is drawn under the whole of it — a heading that wraps puts the underline through the middle of its own second line, and the write clip cuts that line off. */ white-space: nowrap; } .written-ul { position: absolute; left: 0; bottom: -9px; width: calc(100% + 10px); height: 12px; color: var(--flame); overflow: visible; pointer-events: none; } .head-row { display: flex; align-items: flex-start; gap: clamp(12px, 2vw, 30px); flex-wrap: wrap; margin: 0 0 clamp(18px, 3.2vh, 34px); } .note { display: inline-block; font-family: var(--hand); line-height: 1.15; color: var(--flame); font-size: clamp(14px, min(1.45vw, 2.1vh), 19px); } /* ⚠️ Wide enough for the note to stay on ONE line: the write clip reveals a single line, and a note that wraps loses its second one. */ .head-row .note { padding-top: clamp(4px, 1vh, 12px); white-space: nowrap; } .note-under { margin-top: clamp(6px, 1.2vh, 14px); } /* The rules under the rows are drawn now, so the ruled ones go. ⚠️ Scoped to .pane to beat the ruled versions further down the sheet. */ .pane .rows { border-top: 0; } .pane .rows li, .pane .row { position: relative; border-bottom: 0; } .marked { position: relative; display: inline-block; } .pane .row .where > .marked { display: inline-block; width: max-content; max-width: 100%; } .pane .row > .note-inline { flex: 0 0 auto; align-self: center; } .note-inline { margin-left: clamp(10px, 1.6vw, 22px); white-space: nowrap; } .row-rule { position: absolute; left: 0; bottom: -4px; width: 100%; height: 9px; color: var(--ink); opacity: 0.45; overflow: visible; pointer-events: none; } .ring { position: absolute; left: -10px; top: -7px; width: calc(100% + 20px); height: calc(100% + 14px); color: var(--flame); overflow: visible; pointer-events: none; } .drawn-rule { display: block; } /* ---- artwork ------------------------------------------------------------- Nick, 21 Sep 2026: "want artwork for all releases included". A release with no artwork yet gets its initial in the hand rather than an empty square — same call as the panel placeholders. */ .rows.arted li { align-items: center; } .art { flex: 0 0 auto; width: clamp(34px, 3.6vw, 48px); aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; background: rgba(242, 227, 199, 0.12); } .art img, .cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .art-none { font-family: var(--hand); font-size: 15px; color: var(--ink); opacity: 0.65; } /* ⚠️ `.withart` IS GONE, 24 Sep 2026, and its rules with it. It was the old EP layout — a small cover in a corner beside a tracklist — and the sleeve designs replaced it. Nothing in `app.js` has drawn a `.withart` since. ⚠️ **One of its leftovers was actively doing harm.** A phone override set `.cover { width: clamp(104px, 38vw, 170px) }`, which sat AFTER the sleeve's own rule and won — so the artwork was pinned at about 148px on a phone however large the new rule asked for. Nick asked twice for it to be bigger and nothing visible changed, because a dead layout was still holding it down. **Dead CSS is not inert; it is a rule that still applies.** */ /* The picture follows the frame down rather than overflowing it. */ /* ⚠️ THE EP TAB GETS A SMALLER CAP, because it is the only one with a tracklist under the sleeve. At 56vh the four tracks were pushed off the bottom of a panel that cannot grow. The deck tabs have a note and a button below the sleeve and nothing else, so they keep the larger one. */ /* ⚠️ MEASURED, NOT GUESSED. At 390x844 the pane is 528px, and the EP tab has to fit a heading, a tab row, a 153px tracklist, a note and the Odesli row under the sleeve. At the larger cap the tracklist was getting 65px of the 153 it wanted — three rows visible and the third cut through. ⚠️ **The `vh` is of the VIEWPORT, not the panel**, and the panel is about two thirds of it once the header and the index are taken off. So these numbers look small and are not. */ /* ⚠️ NO PER-TAB CAP ANY MORE. There were two — one for the tab with a tracklist and one for the decks — and both were guesses at a ratio. The floor on the words does the same job without knowing which tab it is on. */ .cover-box { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); overflow: visible; pointer-events: none; } .door-cta { margin-top: clamp(10px, 2vh, 22px); margin-left: -2px; } /* ---- the live carousel, along the foot of the releases panel ------------- Nick, 21 Sep 2026: "make youtube carousel along bottom of releases that will show live performances of originals". Thumbnails, not more players. An embedded iframe costs a YouTube connection before anyone has asked to watch anything, and on a panel that already has a list above it four of them would not fit; the picture is swapped for the player on click. The strip scrolls sideways because the panel cannot grow downwards - the site does not scroll. */ /* ⚠️ THE STRIP IS PINNED TO THE FOOT AND THE LIST GIVES WAY. Six releases plus a row of thumbnails is taller than the pane, and the site does not scroll — so this panel becomes a column whose middle is allowed to shrink. The list scrolls inside itself if it has to; the heading and the strip always stay put. */ .panel-fit { display: flex; flex-direction: column; height: 100%; min-height: 0; } .panel-fit > .rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; } .panel-fit > .rows::-webkit-scrollbar { width: 0; } .panel-fit > .head-row { flex: 0 0 auto; } /* ⚠️ THE NEW PIECES HAVE TO BE PINNED TOO, or they stretch and squash the list. In a column flex the default is `flex: 0 1 auto` — which cannot grow but CAN shrink, so the player and the tab row were taking their share of the squeeze and giving the list about 80px: two rows visible and the third cut through the middle. Everything above `.rows` is fixed; only the list gives way. */ .panel-fit > .player, .panel-fit > .playon-slot { flex: 0 0 auto; } /* The record's pieces are pinned inside `.rec-card` — see that rule. */ /* ⚠️ NO FLOOR UNDER A RECORD'S WORDS, and this was a real fault rather than a refinement. `.sleeve-words` claims `min-height: 14rem` — 224px — because the block it was written for held three track ROWS and a note. A record's words are one line of note and one compact line of tracks, and with every note in the database still empty it was often one line of anything. It claimed the 224px regardless, and the way out — the Listen row — was pushed clean off the bottom of a panel that does not scroll. At 1400x900 it sat at y=911 in an 813px window. Measured, not guessed: nothing renders a scrollbar here, so there was no symptom to see except the row being gone. Scoped by `.rec ~`, because the Playlists panel still uses the block the floor was written for. */ /* ⚠️ A SMALL FLOOR, NOT NO FLOOR. At `min-height: 0` the block did the other wrong thing: on a wide window the flex row ran out of room and shrank it to ZERO, so the track line was inside a scroller with no height and clipped entirely. Measured at 1400x900 — `.sleeve-words h0` with a 23px child in it. 4rem is a note line and a track line; below that it may still shrink and scroll, which is what the fade is for. */ /* ⚠️ THE WORDS STOP AT THE COVER'S EDGE. Nick, 25 Sep 2026: *"below the records in discography, where the tracks are listed and the notes show, limit that to the width of the album cover."* The band above them already did; the track line ran on past it, so the block under each record had two different right-hand edges. */ .rec-card .sleeve-words { min-height: min(4rem, 100%); width: var(--rec-sw); } /* On the Latest release tab the flexible middle is the cover-and-tracklist block, so the live strip below it keeps its captions rather than being clipped off the bottom of the pane. */ /* ⚠️ `0 1 auto` and NOT `1 1 auto`. Growing made the cover-and-tracklist block fill the panel, which pushed the PLAY ON row down to the floor with half a screen of nothing between it and the last track — the two boxes read as belonging to the index along the bottom rather than to the record above them. `0` takes its content height; the `1` still lets it shrink and scroll on a short window, which is the part that matters. */ .panel-fit > .sleeve-body { flex: 0 1 auto; min-height: 0; } /* The panel's own scroll is on `.rows`, so the player must not add one of its own by overflowing the column. */ .panel-fit > .player { margin-bottom: clamp(6px, 1.2vh, 12px); } /* The foot of a panel: whatever it ends with sits on the bottom rule, with the signup on the left and the one door on the right of the same line. Nick, 21 Sep 2026. */ .panel-foot { margin-top: auto; flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(12px, 2vw, 30px); flex-wrap: wrap; padding-top: clamp(8px, 1.6vh, 18px); } .panel-foot .ask { margin-top: 0; } .panel-foot .door-cta { margin-top: 0; } /* A card that has become its player. It keeps every measurement the button had — same width, same place in the scroll — so nothing shifts when it is pressed. Only the things that belonged to a button go. */ /* ---- the Spotify player ----------------------------------------------------- The one thing on this page nobody drew. It cannot be restyled — Spotify serves its own frame — so it is given a width and left alone rather than fought with. Held to the body column's measure so it does not become the widest thing on the panel, which on a phone it otherwise would be. */ .player { margin-top: clamp(10px, 2vh, 20px); max-width: 420px; } .player iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; } /* ⚠️ THE TALL PLAYER, on the Latest release tab only. 352px is the height at which Spotify's embed lists the tracks and shows the artwork big — and that tab stopped writing its own tracklist on 23 Sep, so this player IS the tracklist now. Nick: *"we just keep spotify up to date and the page is up to date."* ⚠️ It has to cap against the pane, or it is 352px of a 614px panel that also has a heading, a tab row and the PLAY ON boxes — and on a short laptop the boxes go under the fold. `min()` lets it be 352 where there is room and give way where there is not. */ .player-tall iframe { height: min(352px, 46vh); } .player-tall { max-width: 520px; } @media (max-width: 720px) { .player { max-width: none; } } /* ---- the index ----------------------------------------------------------- */ /* ⚠️ IT SITS IN THE HEADER NOW, above the rule rather than under the page. Nick, 25 Sep 2026: *"can we lose the bottom navigation and instead put it across the top on desktop and in a hamburger menu on mobile?"* ⚠️ The rule it used to carry on TOP is gone. The header already draws a line underneath itself, and two lines a few pixels apart read as a mistake. */ .index { position: relative; z-index: 1; /* above the photograph — see .top */ display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(20px, 4vw, 66px); padding: clamp(8px, 1.3vh, 14px) 0 0; } /* The whole index in the hand now, not just the page you are on — and the items are separated by a slash rather than by a rule under the current one. Written out, a row of names with slashes between them is what the index always was; the small caps and the border were type's way of saying it. */ /* ⚠️ THE INDEX IS THE HOME PAGE'S INDEX NOW, ON EVERY PAGE — 26 Sep 2026. Nick: *"Make the navigation and the rest of the site look like it does on the homepage."* It was handwriting at 15-19px with a slash between each pair. That reads as a hand-drawn list, which suited a page whose every heading was drawn — and it is a different navigation from the one on the front, which was the complaint. ⚠️ THE SLASHES GO. They were separating words that the gap already separates, and with lowercase italic between them they read as fractions. ⚠️ AND THE GAP WIDENS, which is doing the slashes' old job. Five words at 26px apart with no separator run together; at 66px they are plainly a list. Removing the slash without opening the gap would have looked broken. */ .index a { display: flex; align-items: baseline; gap: 7px; font-family: var(--mark); font-style: italic; font-size: clamp(14px, 1.15vw, 17px); font-weight: 400; letter-spacing: 0; text-transform: lowercase; padding-bottom: 0; color: var(--dim); } .index a:hover { color: var(--ink); } .index a[aria-current="page"] { color: var(--ink); } /* Nick, 21 Sep 2026: the numbers go. They were scaffolding that made a row of small caps read as an ordered index, and the labels do that on their own. */ .index .n { display: none; } /* Where you are is carried by colour alone now — full strength against the others at --dim. With every item in the hand there is nothing left for an underline to distinguish, and a drawn rule under one of eight handwritten names read as a correction rather than as a marker. */ .index a[aria-current="page"] { border-bottom: 0; } /* ---- type ---------------------------------------------------------------- */ .kicker { margin: 0 0 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); } .panel h2 { margin: 0 0 clamp(14px, 2.4vh, 26px); font-family: var(--display); font-weight: 700; font-size: clamp(25px, 3.8vw, 52px); line-height: 0.9; letter-spacing: -0.02em; } .panel h2 .hot { color: var(--flame); } .lead { margin: 0 0 18px; max-width: 42ch; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6; color: var(--dim); } .hand { font-family: var(--hand); font-size: clamp(18px, 1.8vw, 24px); line-height: 1.2; margin: 0 0 6px; } /* ---- buttons ------------------------------------------------------------- */ .btn, .btn-line { display: inline-block; padding: 12px 20px; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; cursor: pointer; font-family: var(--body); } /* ⚠️ The label on a SOLID button is named literally, for the same reason as .hard-fail: --ink and --paper are one colour now, so a solid button filled with --ink and lettered with --paper was cream on cream. The fill still comes from the token — it flips with the page — but the writing on top of it has to be the dark, always. */ .btn { background: var(--ink); color: #2A1E14; border: 1px solid var(--ink); } .btn:hover { background: var(--flame); border-color: var(--flame); color: #F2E3C7; } .btn-line { border: 1px solid var(--ink); background: transparent; color: var(--ink); } .btn-line:hover { background: var(--ink); color: #2A1E14; } /* ---- the home page's hand-annotated buttons ------------------------------ */ /* The doors: handwritten words with a box drawn round each. Nick, 19 Sep 2026 — "write first button left to right then draw the box around like it's hand drawn." `align-items: flex-start` so each is only as wide as its own words. Stretched to match, they would read as a menu bar rather than as six things someone wrote down. */ .doors { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(7px, 1.5vh, 16px); max-width: 560px; } /* ⚠️ THE HEIGHT HAS TO KNOW ABOUT THE WINDOW. Every previous attempt at making home fit a short window trimmed gaps and margins, and it kept not fitting, because the six door rows — the bulk of the panel — were a fixed 39px each whatever the window did: their type is vw, their padding's vh term never reached its floor. Six rows that cannot shrink are 234px of a 365px pane. `min(vw, vh)` on both: wide-but-short windows now take their size from the height, which is the dimension that is actually short. */ .door { position: relative; display: inline-block; padding: clamp(5px, min(1.1vh, 1.4vw), 13px) clamp(14px, 1.9vw, 24px); color: var(--ink); } .door-word { display: inline-block; font-family: var(--hand); font-size: clamp(17px, min(2.2vw, 3.3vh), 30px); line-height: 1.1; color: var(--ink); /* The reveal is a clip, not a fade, so the word appears letter by letter from the left — the same `write` the removed annotations used. */ } /* The box is drawn round the outside of the words, so it must not add to the box the words sit in — hence absolute, and no pointer events of its own. */ .door-box { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* ⚠️ THE DOTS. A round cap on a dash of zero length still paints — so every box put a blob at its path's start point and sat there showing it until its own turn to draw came round, up to six seconds in. It read as a bullet beside each button, which is exactly what it was not. Butt caps on the boxes. The crayon filter is what makes these look drawn, not the cap shape, and the underlines under the signup keep their round ends where the length is never zero for long. */ /* ⚠️ `.edge` here too, and for the same reason as the photo-home rule above. The fill strokes are generated with ROUND caps on purpose — they overshoot the box top and bottom and are clipped, so the corners stay as solid as the middle, and a butt cap squares off exactly the overshoot that was doing that work. This rule was squaring all 48 of them. */ .door-box .edge, .drawn-box .edge { stroke-linecap: butt; } .door:hover .door-word { color: var(--flame); } .door:hover .door-box path { stroke: var(--flame); } /* ---- Drums, covers etc --------------------------------------------------- */ /* One column on a narrow pane, two when there is room. The pane is already narrow by design, so this is about the pane rather than the window. */ /* ⚠️ Four 16:9 players stacked two-up is 174px more than the pane has, and no width rule fixes that — the grid asked how WIDE the pane was and never how tall. Capping each player's height is what makes the panel fit: the columns then follow from the height rather than the other way round. */ /* ---- the ask, under the doors -------------------------------------------- */ /* ⚠️ Tight on purpose. Six doors plus the signup is the whole home page, and the brief is that it fits without scrolling — on a 540px window the old rhythm put the email field and the button below the fold, which is the one conversion on the site. The vh terms do the work: roomy where there is room, and it closes up rather than overflowing where there is not. */ .ask { margin-top: clamp(6px, 2.2vh, 30px); max-width: 480px; } .ask-kicker { margin: 0 0 clamp(3px, 0.7vh, 6px); font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); } .ask-words { margin: 0 0 clamp(5px, 1.4vh, 14px); font-family: var(--hand); font-size: clamp(13px, min(1.7vw, 2.6vh), 22px); line-height: 1.18; color: var(--ink); } .ask-words span { display: block; } .ask-form { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(5px, 1vh, 10px); } /* The email field and its button, kept together on one line. Nick, 20 Sep 2026: "shorten the email entry box and put the button at the end of it so box and button are in line." A row of their own rather than two items in the form's flex — otherwise the button can wrap onto the next line on its own at an awkward width, which is exactly what "in line" rules out. `align-items: stretch` so the drawn box and the drawn button are the same height whatever the type does. */ .ask-row { display: flex; align-items: stretch; gap: 8px; flex: 0 1 auto; max-width: 100%; } /* The signup button. No background and no border of its own — the drawing is both, and the colour arrives as pencil strokes underneath the words. */ .ask-go { position: relative; /* ⚠️ `inline-block` IS LOad-BEARING, and it only became so on 23 Sep 2026. This button used to be a