/* Larrazolo Studio: shared styles for every page (rules in DESIGN.md). Paths here are relative to this file. */
/* ===== STUDY SWITCH: the one place a study goes live =====
Every line below hides what it names on every page (home and study pages).
To make a study live: delete its [data-study] line. With the first live study, also delete the .needs-work line:
it shows the home Work section, the hero's "See the work" link and the Work nav item.
Search engines: each study page also carries ; remove it when the study is listed. */
.needs-work{display:none!important} /* 12 Nov: basic launch without a Work section (Ben); delete this line when the new studies are ready */
/* ===== end of the switch ===== */
/* Jost, self-hosted (variable, weights 100 to 900; SIL Open Font License, fonts/OFL.txt). Files from Google Fonts v20, 11 Nov 2026. */
@font-face{font-family:Jost;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/jost-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Jost;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Jost;font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/jost-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Jost;font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/jost-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--ink:#282725;--paper:#FCFCFA;--soft:#64605B;--spot:#C42E2A;--pad:clamp(20px,4.2vw,60px)}
/* one type scale (cohesion spec fixes 3 and 4, adapted to the Masthead headers; DESIGN.md, Type). Display: the hero (h1), the masthead,
D2 every sentence heading (section headings, Part 2's heading, the theme tile, the contact sheet, "Got it."), D3 tile and step headings,
D4 small tile headings; the step numbers and the name line keep their own sizes. Text: lead, text, small. Rules: light, strong, heavy. */
:root{--d-mast:clamp(54px,9.4vw,136px);--d2:clamp(28px,3vw,44px);--d3:clamp(24px,2.2vw,32px);--d4:24px;
--t-lead:clamp(17px,1.4vw,20px);--t:17px;--t-small:15px;
--rule-light:rgba(40,39,37,.22);--rule:rgba(40,39,37,.85)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper) url(paper.jpg) top center/1400px auto repeat;color:var(--ink);font-family:Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* the printing surface: one canvas over the top of the page, multiplied onto the paper */
#press{position:absolute;left:0;top:0;z-index:5;pointer-events:none;mix-blend-mode:multiply}
/* header: the wordmark on the headline's left edge, all links together on the right */
.top{position:fixed;inset:0 0 auto;z-index:30;background:var(--paper) url(paper.jpg) center 0/1400px auto repeat;display:grid;grid-template-columns:auto 1fr auto;column-gap:30px;align-items:center;padding:26px var(--pad)}
.top .side{display:flex;gap:30px;font-style:italic;font-weight:600;font-size:17px;letter-spacing:-.01em}
.top .side{position:relative;top:5px} /* link baseline = the logo letters' baseline */
.top .side a{position:relative;text-decoration:none;padding:6px 0}
.top .side a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--rule);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s steps(4,end)}
.top .side a:hover::after,.top .side a:focus-visible::after{transform:scaleX(1)}
.top .left{justify-self:end}
.top .menu{display:none;background:none;border:0;padding:12px 0 12px 16px;margin:-6px 0;font:inherit;color:transparent;cursor:pointer} /* 44px+ to tap, same box in the layout */
.mnav{position:fixed;inset:0;z-index:40;background:var(--paper) url(paper.jpg) top center/1400px auto repeat;display:flex;flex-direction:column;justify-content:center;padding:96px var(--pad) 40px;gap:4px}
.mnav[hidden]{display:none}
.mnav a{font:italic 900 clamp(40px,11vw,64px)/1.05 Jost,sans-serif;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.mnav .mcta{margin-top:28px;align-self:flex-start;font:600 17px/1 Jost,sans-serif;letter-spacing:0;color:#fff;background:var(--spot);padding:18px 24px}
.mnav .x{position:absolute;top:12px;right:var(--pad);background:none;border:0;font:italic 600 17px Jost,sans-serif;letter-spacing:-.01em;color:var(--ink);padding:12px 0 12px 16px;cursor:pointer} /* "Close" lands where "Menu" was */
.slot{display:block;position:relative;height:50px;width:calc(50px * 3.3923);margin-left:-6px} /* -6px: the wordmark's empty left edge, so its ink sits on the margin */
.top::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--ink);opacity:0;transition:opacity .2s steps(4,end)}
.top.scrolled::after{opacity:.85}
/* hero. Printed text keeps its real layout and is fully readable/selectable, but is drawn by the press. */
.hero{position:relative;z-index:6;min-height:100svh;display:flex;flex-direction:column;justify-content:center;text-align:left;padding:110px var(--pad) 8svh} /* 8svh: the copy's middle sits 4% above the middle of the space under the nav (122 px when the moving line ran along the bottom) */
/* the copy block: one left edge (the nav margin), spacing on an 8px scale, grouped by what belongs together */
.copy{position:relative;z-index:2;max-width:min(880px,calc(100vw - 55svh - var(--pad) - 40px));text-align:left;--s1:16px;--s2:24px;--s3:40px}
.copy h1{padding-bottom:.12em}
.copy .sub{margin:calc(var(--s2) + 5px) 0 0} /* +5px: the headline line box hides 5px of its own space, so the visible gap lands on 24 */
.copy .cta{justify-content:flex-start;margin-top:var(--s3);gap:28px}
.copy .reply{margin-top:var(--s1)}
/* Shopify Partner: the official mono Shopify logo, unmodified, never printed, at least 80 px wide (shopify.com/brand-assets), then "Partner" set to sit with its wordmark: bold, tight, on the wordmark's baseline, a gap about the wordmark's x-height. Shopify's partner badge itself is Silver tier and up from 1 Jan 2027 (checked 12 Nov), so this is the logo plus a word, not a badge. */
.partner{margin:0;font:300 22px/1 Jost,sans-serif;letter-spacing:-.01em;white-space:nowrap} /* light beside the bold wordmark, the contrast Ben liked in Shopify's old "shopify partners" mark, without copying that mark */
.partner img{display:inline-block;width:80px;height:auto;margin-right:6px;vertical-align:-4.36px} /* 80 px is Shopify's minimum width; the wordmark's baseline is 70.17 of the logo's 86.75 units: 4.36 px above its bottom at 80 px wide */
.copy .partner{margin-top:var(--s3)}
.photo{position:absolute;z-index:1;right:0;top:auto;bottom:0;height:calc(85svh - 58px);aspect-ratio:1080/1350;pointer-events:none} /* stands on the next section's rule; its size does not depend on the hero's height */
.ink{color:transparent}
.ink::selection{color:var(--ink);background:color-mix(in srgb,var(--spot) 22%,transparent)}
h1{margin:0;padding-bottom:.18em;font-style:italic;font-weight:900;font-size:clamp(38px,min(5.2vw,calc((100vw - 55svh - var(--pad) - 40px) / 10.8)),80px);line-height:1.04;letter-spacing:-.026em} /* /10.8: the last line is 10.72em wide, so it always fits its column */
h1 .l{display:block}
h1 [data-last]{white-space:nowrap}
.sub{margin:22px 0 0;font-weight:500;font-size:var(--t-lead);line-height:1.5;max-width:30em}
.cta{display:flex;gap:26px;align-items:center;justify-content:flex-start;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;font:600 17px/1 Jost,sans-serif;padding:18px 26px;text-decoration:none;transition:background-color .2s}
.btn:hover,.btn:active{background:rgba(40,39,37,.16);color:var(--paper)} /* a tint of black over the printed red (the hero sits above the press); the label stays paper */
.ghost{position:relative;font:500 17px/1 Jost,sans-serif;text-decoration:none;padding-bottom:6px}
.ghost::before{content:"";position:absolute;inset:-12px -8px} /* 44px+ to tap, nothing moves */
.reply{margin:20px 0 0;font-style:italic;font-weight:500;font-size:15px}
/* the floor (no WebGL, a lost context, an error, a press that never starts): plain ink text, the red button, the underline */
.noprint .ink{color:var(--ink)}
.noprint .btn{background:var(--spot);color:#fff}
.noprint .btn:hover,.noprint .btn:active{background:color-mix(in srgb,var(--spot) 84%,var(--ink))}
.noprint .ghost{border-bottom:1px solid var(--rule)}
.noprint2 .top .menu{color:var(--ink)}
.noprint2 .slot,.noprint2 .fimg{background:url(wordmark.svg) left center/contain no-repeat}
@media (max-width:720px){.copy{max-width:none}.photo{height:24vh}h1{font-size:12vw}h1 .l,h1 .m{display:block}h1 [data-last]{white-space:normal}.top{padding:16px var(--pad)}.top .side{top:2px}.top .side a{display:none}.top .right .menu{display:block}.slot{height:36px;width:calc(36px * 3.3923);margin-left:-4px}.hero{padding:110px var(--pad) 100px}}
/* tablets, small laptops, tall windows: copy on top, the photo smaller below it */
@media (min-width:721px) and (max-width:1023px), (min-width:721px) and (max-aspect-ratio:11/10){.copy{max-width:none}h1{font-size:min(8vw,72px)}.hero{justify-content:flex-start;padding-top:calc(102px + 8svh)}.photo{height:min(38svh,52vw)}}
/* short landscape (a phone on its side) */
@media (min-width:721px) and (max-height:520px){.top{padding:14px var(--pad)}.hero{justify-content:flex-start;padding:94px var(--pad) 24px}h1{font-size:40px}.copy{--s3:24px}.photo{height:calc(100svh - 94px)}}
/* phones and touch screens (Ben, 12 Nov: the hero covers the whole screen): the hero is at least the large viewport (browser bars hidden),
so the next section starts below the fold whether the bars are showing, hidden or see-through (iOS 26 Safari draws the page under its
bar); on phones the extra bottom padding (the bars' height, 100lvh - 100svh) keeps the copy centred in the screen seen with the bars
showing. A browser without lvh keeps 100svh and the 100 px. */
@media (max-width:720px), (pointer:coarse){.hero{min-height:100lvh}}
@media (max-width:720px){.hero{padding-bottom:calc(100px + 100lvh - 100svh)}}
/* ===== sections below the hero (same system: paper, rich-black ink, Jost) ===== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
.sec{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:40px;padding:112px var(--pad) 120px;scroll-margin-top:30px} /* nav jump: heading lands 40 px under the 102 px header */
.sec::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:var(--ink);opacity:.85}
.lab{margin:0;padding-top:.55em;font-style:italic;font-weight:600;font-size:17px;letter-spacing:-.01em}
.main{min-width:0}
/* ===== the vertical rhythm (Ben, 12 Nov: "every section needs proper spacing"; DESIGN.md, Spacing scale). One set of gaps for every
section; phones (860 px and under) use the smaller column. ===== */
:root{--gap-tight:16px;--gap-head:24px;--gap-group:40px;--gap-content:56px;--gap-sec:120px;--hdr:102px}
@media (max-width:860px){:root{--gap-group:32px;--gap-content:40px;--gap-sec:88px}}
@media (max-width:720px){:root{--hdr:68px}}
/* section headers, Option 2 "Masthead" (Ben, 12 Nov; plan/SPEC-SECTION-HEADERS.md): on the home page each section opens with its name
printed huge across the page, between the section rule and a rule of its own (the rule that draws when the section arrives); Ben's
sentence follows as the heading, smaller. One column: every block starts on the page margin. Every section: rule, masthead,
masthead rule, --gap-group, heading, --gap-head, intro, --gap-content, content, --gap-sec, the next section's rule. The study pages
keep their label column until Work comes back. */
.home .sec{grid-template-columns:minmax(0,1fr);column-gap:0;padding:0 var(--pad) var(--gap-sec);scroll-margin-top:var(--hdr)} /* a nav jump puts the section rule on the header's rule */
.home .lab.mast{display:block;position:relative;margin:0 0 var(--gap-group);padding:.16em 0 .2em;font-style:italic;font-weight:900;font-size:var(--d-mast);line-height:.92;letter-spacing:-.035em}
.home .lab.mast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);opacity:.85;transform-origin:0 50%}
.home .h2{font-size:var(--d2);max-width:22em}
.home .study-rows{grid-column:1 / -1}
.ink2{color:transparent;position:relative}
.ink2::selection{color:var(--ink)}
.h2{margin:0;font-style:italic;font-weight:900;font-size:clamp(34px,4.2vw,62px);line-height:1.04;letter-spacing:-.024em;max-width:15em;padding-bottom:.08em}
.h2.big{font-size:clamp(40px,6vw,96px);max-width:12em}
.h2 .sentence{display:block} /* one sentence per line */
.body{margin:var(--gap-head) 0 0;font-weight:500;font-size:var(--t-lead);line-height:1.55;max-width:34em}
.rows{margin:56px 0 0;padding:0;list-style:none}
.rows li{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.35fr);column-gap:24px;align-items:baseline;padding:24px 0;border-top:1px solid rgba(40,39,37,.22)}
.rows li:last-child{border-bottom:1px solid rgba(40,39,37,.22)}
.num{font-style:italic;font-weight:600;font-size:17px}
.rt{margin:0;font-style:italic;font-weight:900;font-size:var(--d3);line-height:1.12;letter-spacing:-.018em}
.rd{margin:0;font-weight:500;font-size:17px;line-height:1.55;max-width:30em}
.note{margin:24px 0 0;font-style:italic;font-weight:500;font-size:var(--t-small);color:var(--soft)}
/* ===== the services sheet (plan/SPEC-SERVICES-BENTO.md), in two parts (Ben, 12 Nov): two boxes with a 1 px ink rule, tiles share rules
(85% between the main services, 22% between the small tiles), square corners, no fills. The icons are printed by the section press.
Between the parts: the section gap, a full-width printed rule, then Part 2's heading and intro set exactly like Part 1's. ===== */
.bento{grid-column:1 / -1;margin-top:var(--gap-content);border:1px solid rgba(40,39,37,.85)}
.part-rule{grid-column:1 / -1;height:1px;margin:var(--gap-sec) 0 0;border:0;background:var(--ink);opacity:.85}
.part2{grid-column:-2;margin-top:var(--gap-group)}
.bm,.bs{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.ico{display:block;position:relative;flex:none} /* the plates are placed inside it */
.ico img{display:block;width:100%;height:100%;opacity:0} /* the file is in the page; the press draws it */
.tile{min-width:0;padding:32px;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:28px;align-items:start;align-content:start} /* align-content: a shorter tile beside a taller one keeps its heading where the other's is */
.tile > .ico{width:96px;height:96px}
.tile .rt{margin-bottom:12px}
.tile .rd,.bs .rd{max-width:none}
.t-theme{grid-column:1 / span 7;grid-row:1 / span 2;display:flex;flex-direction:column;padding:0;border-right:1px solid rgba(40,39,37,.85)}
.t-theme .tx{flex:1;padding:32px 32px 36px}
.t-theme .rt{font-size:var(--d2);line-height:1.04;letter-spacing:-.024em;margin-bottom:16px}
.t-theme .rd{font-size:var(--t-lead);max-width:26em}
.field{width:100%;overflow:hidden;aspect-ratio:770 / 300;border-top:1px solid rgba(40,39,37,.85)} /* the printed picture runs edge to edge; width:100%: an aspect-ratio flex item does not stretch on its own */
.field > .ico{width:100%;height:100%}
.field .win{position:absolute;left:21.558%;top:24%;width:41.039%;width:round(41.039%,1px);height:76%} /* the theme picture's strip (plan/strips-sequences.md): a window over the laptop page's inside, 166 to 482 by 72 to 300 of 770 by 300; whole pixels wide, so every frame lands exactly */
.t-redesign,.t-rebrand{grid-column:8 / span 5}
.t-rebrand{border-top:1px solid rgba(40,39,37,.85)}
.t-drop,.t-care{grid-column:span 6;border-top:1px solid rgba(40,39,37,.85)}
.t-care{border-left:1px solid rgba(40,39,37,.85)}
.t-care .tx{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline}
.t-care .rd{grid-column:1 / -1}
.term{margin:0;justify-self:end;font-style:italic;font-weight:600;font-size:17px;letter-spacing:-.01em} /* "Monthly", on the heading's baseline */
.bs .st{grid-column:span 3;min-width:0;padding:28px 32px 32px;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:20px;align-items:start;align-content:start;border-left:1px solid rgba(40,39,37,.22)} /* .bs .st: beats the study pages' article.st */
.bs .st .ico{width:64px;height:64px}
.bs .s-drops{grid-column:span 6}
.bs .st:nth-child(1),.bs .st:nth-child(4){border-left:0}
.bs .st:nth-child(n+4){border-top:1px solid rgba(40,39,37,.22)}
.rt2{margin:0 0 8px;font-style:italic;font-weight:900;font-size:var(--d4);line-height:1.12;letter-spacing:-.018em} /* never under 22 px: smaller prints solid */
.bfoot{margin:0;padding:20px 32px;border-top:1px solid rgba(40,39,37,.85)}
/* 721 to 1100 px: the theme tile full width (text, then the picture); main icons above their heading; small tiles two by two */
@media (max-width:1100px){
.t-theme{grid-column:1 / -1;grid-row:auto;border-right:0}
.t-redesign,.t-rebrand{grid-column:span 6;border-top:1px solid rgba(40,39,37,.85)}
.t-rebrand{border-left:1px solid rgba(40,39,37,.85)}
.tile:not(.t-theme){grid-template-columns:minmax(0,1fr)}
.tile > .ico{margin-bottom:20px}
.bs .st,.bs .s-drops{grid-column:span 6}
.bs .st:last-child{grid-column:1 / -1}
.bs .st:nth-child(n){border-left:0;border-top:1px solid rgba(40,39,37,.22)}
.bs .st:nth-child(even){border-left:1px solid rgba(40,39,37,.22)}
.bs .st:nth-child(-n+2){border-top:0}
}
/* 720 px and under: one column in reading order, icon left of the text; the picture 200 px tall, cropped at the sides around its centre */
@media (max-width:720px){
.tile{grid-column:1 / -1;border-left:0}
.tile:not(.t-theme){padding:24px 20px 28px;grid-template-columns:72px minmax(0,1fr);column-gap:20px}
.tile > .ico{width:72px;height:72px;margin:0}
.t-theme .tx{padding:24px 20px 28px}
.field{aspect-ratio:auto;height:200px}
.field > .ico{width:513px;height:200px;margin-left:calc(50% - 256.5px)}
.bs .st:nth-child(n){grid-column:1 / -1;padding:22px 20px 24px;grid-template-columns:56px minmax(0,1fr);column-gap:16px;border-left:0;border-top:1px solid rgba(40,39,37,.22)}
.bs .st:first-child{border-top:0}
.bs .st .ico{width:56px;height:56px}
.bfoot{padding:18px 20px}
.rt2{font-size:22px}
}
.say{margin:24px 0 0;font-style:italic;font-weight:500;font-size:17px}
.say b{font-weight:900}
.body-next{margin-top:var(--gap-tight)} /* a line that belongs to the paragraph above */
.sec-contact{padding-bottom:140px}
.cta2{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:40px}
.btn2{display:inline-flex;align-items:center;font:600 17px/1 Jost,sans-serif;padding:18px 26px;text-decoration:none;background:var(--spot);color:#fff;mix-blend-mode:multiply;transition:background-color .2s}
.btn2:hover,.btn2:active{background:color-mix(in srgb,var(--spot) 84%,var(--ink));opacity:1} /* a tint of black over the red */
.ghost2{font:500 17px/1 Jost,sans-serif;text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.facts{margin:40px 0 0;padding:0;list-style:none;font-weight:500;font-size:17px;line-height:1.9}
.facts a{text-decoration:none;border-bottom:1px solid var(--rule)}
/* tap targets: a 44 px+ hit area on the small links, nothing moves */
.ghost2,.facts a,.fcols a{position:relative}
.ghost2::before,.facts a::before,.fcols a::before{content:"";position:absolute;inset:-12px -8px}
/* ===== How it works, About, Contact, footer (plan/SPEC-SECTIONS.md): each its own layout, the same print.
No tiles. Rules: 85% ink, 1 px. ===== */
/* How it works: a route. The line is the list's top rule; a 14 px tick at each step; four open columns; a red dot where it ends ("live") */
.route{grid-column:1 / -1;margin:var(--gap-content) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px;border-top:1px solid rgba(40,39,37,.85)}
.route li{position:relative;min-width:0;padding-top:28px}
.route li::before{content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:var(--ink);opacity:.85}
.route .r-live::after{content:"";position:absolute;right:-6.5px;top:-7px;width:13px;height:13px;border-radius:50%;background:var(--spot);mix-blend-mode:multiply} /* centred on the line's right end */
.rh{display:flex;justify-content:flex-start;align-items:flex-end;gap:.16em;margin-bottom:28px;font-size:clamp(64px,7.4vw,108px)} /* the drawing is a character on the number's line (spec icon motion 7, option A) */
.rnum{display:block;font-style:italic;font-weight:900;font-size:1em;line-height:.86;letter-spacing:-.03em;padding:0 .14em 0 .04em;margin:0 -.02em 0 -.04em} /* the padding widens the press's print box so the italic overhang (the 3's right edge) isn't clipped (Ben, 12 Nov); the small negative margin leaves a clear gap before the drawing */
.route .ico{width:.745em;height:.745em;width:round(.745em,1px);height:round(.745em,1px);margin-bottom:.08em} /* the drawing ink fills its box: as tall as the numerals, its foot on their baseline (measured) */
.route .rt{margin-bottom:10px}
.route .rd{max-width:none}
.route-note{grid-column:1 / -1;margin-top:var(--gap-group)}
/* ===== motion (cohesion spec part 2): one language. Tick: a held frame. Slip: cyan and magenta out of register. Draw: a rule drawing
left to right. Fill: a dot field in steps. Settle: lands with a small overshoot and sits square. Everything moves in held frames. ===== */
:root{--tick:100ms;--slip:.28s;--draw:.42s;--fill:.36s;--settle:.42s}
/* How it works, tied to the scroll (Ben, 12 Nov). With motion allowed (the head script's .motion), 721 px wide or more, and a screen tall
enough to hold the stage (masthead to route) under the header, site.js adds .pin: the stage sticks right under the header, its
masthead where the section rule meets the header's rule, for 1.4 screens of scrolling (the wrapper's ::after is that run); the line
draws and 01 to 04 print in as the scroll reaches them, the red dot lands last, scrolling back un-prints them. Then the page carries
on: the closing note, then --gap-sec to the next section. On a short screen (a laptop window: down to about 650 px tall from 1024
wide) site.js also adds .tight: the stage's gaps step down the scale (24 and 16) and the numbers and drawings scale with the screen's
height, and from 1024 to 1100 the steps stand in one row. Otherwise each step prints in as it scrolls into view. Reduced motion or no
JavaScript: none of it (both wrappers are display: contents and everything shows). Only opacity, scale, rotate and translate change. */
.how-pin,.how-stage{display:contents}
.motion .sec-how.pin{display:block}
.motion .sec-how.pin .how-pin{display:block}
.motion .sec-how.pin .how-pin::after{content:"";display:block;height:140vh} /* the pin's run (cohesion spec: 2.4 screens in all, not 3.4) */
.motion .sec-how.pin .how-stage{position:sticky;top:var(--hdr);display:grid;grid-template-columns:minmax(0,1fr)}
.motion .sec-how.tight .mast{margin-bottom:var(--gap-head)}
.motion .sec-how.tight .route{margin-top:var(--gap-head)}
.motion .sec-how.tight .route li{padding-top:var(--gap-tight)}
.motion .sec-how.tight .rh{font-size:min(7.4vw,10.5vh,108px);margin-bottom:var(--gap-tight)}
@media (min-width:1024px) and (max-width:1100px){
.motion .sec-how.tight .route{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0}
.motion .sec-how.tight .route li{border-top:0}
.motion .sec-how.tight .how-anim::before{display:block}
}
.route{position:relative}
.route::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(40,39,37,.85);transform-origin:0 50%;display:none}
.how-anim{border-top-color:transparent}
.how-anim::before{display:block;scale:var(--lp,0) 1}
.how-anim li > *,.how-anim li::before,.how-anim .r-live::after{opacity:0;transition:opacity calc(var(--tick) * 2) steps(2,end)} /* un-printing: two held frames */
.how-anim li.on > *{opacity:1}
.how-anim li.on .rnum,.how-anim li.on > .rt,.how-anim li.on > .rd{animation:stepIn var(--settle) steps(5,end) both;transform-origin:0 0} /* the words settle; the drawing prints in place and never moves (Ben, 12 Nov) */
.how-anim li.on::before{opacity:1}
.how-anim li.on .rnum canvas.plate:nth-of-type(1),.how-anim li.on > .rt canvas.plate:nth-of-type(1){animation:regC var(--slip) steps(1,end) 1}
.how-anim li.on .rnum canvas.plate:nth-of-type(2),.how-anim li.on > .rt canvas.plate:nth-of-type(2){animation:regM var(--slip) steps(1,end) 1}
.how-anim .r-live.landed::after{opacity:1;animation:dotIn calc(var(--tick) * 3) steps(4,end) both}
@keyframes stepIn{0%{opacity:0;scale:.86;rotate:-2deg}1%{opacity:1}40%{scale:1.06;rotate:1deg}70%{scale:.99;rotate:0deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes dotIn{0%{opacity:0;scale:0}1%{opacity:1}50%{scale:1.7}100%{opacity:1;scale:1}}
@keyframes regC{0%{translate:-2px 1px}34%{translate:2px -1px}67%{translate:-1px 0}100%{translate:0 0}} /* the press misprints for three frames */
@keyframes regM{0%{translate:2px -1px}34%{translate:-2px 1px}67%{translate:1px 0}100%{translate:0 0}}
/* flipbook icons (spec icon motion, addendum): one strip of complete frames behind a window one frame wide; the script steps it
by whole frames, 100 ms a frame, and always ends on frame 0. Press off or no JavaScript: frame 0, still. */
.ico.spr{overflow:hidden}
.ico:not(.tape),.ico:not(.tape) .strip,.ico:not(.tape) canvas{animation:none!important;transition:none!important} /* an icon never slides, settles or slips as a whole: it sits in its spot and only its frames change, each frame an instant jump (Ben, 12 Nov). The tape only fades in, so it keeps its arrival. */
.strip{display:block;position:relative;height:100%;width:calc(100% * var(--n))}
.strip img{display:block;width:100%;height:100%;opacity:0}
.slip canvas.plate:nth-of-type(1){animation:regC var(--slip) steps(1,end) 1} /* a heading's cyan and magenta slip when its tile plays */
.slip canvas.plate:nth-of-type(2){animation:regM var(--slip) steps(1,end) 1}
@media (prefers-reduced-motion: reduce){.how-anim li > *,.how-anim li::before,.how-anim .r-live::after{opacity:1}.how-anim *,.slip *{animation:none!important}}
/* the tile under the cursor (addendum A4, with Ben's colour): the icon's column inks up from the top in six held steps, a cyan and a
magenta dot screen slightly out of register, like a misprint; it never reaches the text. The theme tile: a strip beside its heading. */
.bm .tile,.bs .st,.t-theme .tx{position:relative}
.bm .tile:not(.t-theme)::after,.bs .st::after,.t-theme .tx::after{content:"";position:absolute;top:0;z-index:-1;pointer-events:none;mix-blend-mode:multiply;
background-image:radial-gradient(circle at 1.5px 1.5px,rgba(0,159,227,.5) 0 .95px,transparent 1.25px),radial-gradient(circle at 4.5px 4.5px,rgba(0,159,227,.5) 0 .95px,transparent 1.25px),
radial-gradient(circle at 2.5px 1px,rgba(229,0,126,.42) 0 .95px,transparent 1.25px),radial-gradient(circle at 5.5px 4px,rgba(229,0,126,.42) 0 .95px,transparent 1.25px);
background-size:6px 6px;clip-path:inset(0 0 100% 0);transition:clip-path var(--fill) steps(6,end)}
.bs .st::after{left:0;bottom:0;width:106px}
.bm .tile:not(.t-theme)::after{left:0;bottom:0;width:142px}
.t-theme .tx{align-self:stretch} /* the text area spans the tile, so its column sits beside the heading, not on it */
.t-theme .tx::after{right:0;bottom:0;width:142px}
@media (hover:hover){.bm .tile:hover::after,.bs .st:hover::after,.t-theme:hover .tx::after{clip-path:inset(0)}}
.bm .tile.lit::after,.bs .st.lit::after,.t-theme.lit .tx::after,.bm .tile:focus-within::after,.bs .st:focus-within::after,.t-theme:focus-within .tx::after{clip-path:inset(0)}
@media (max-width:1100px){.bm .tile:not(.t-theme)::after{right:0;bottom:auto;width:auto;height:136px}} /* the icon sits above the text here: the top band */
@media (max-width:720px){.bs .st::after{width:82px}.bm .tile:not(.t-theme)::after{right:auto;bottom:0;height:auto;width:102px}.t-theme .tx::after{display:none}}
.tile-go{position:absolute;inset:0;z-index:1} /* each tile a link to the form (site.js, one block) */
.tile-go:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
@media (prefers-reduced-motion: reduce){.bm .tile::after,.bs .st::after,.t-theme .tx::after{display:none}}
/* each section arrives the same way, once (cohesion spec part 2, with the Masthead headers): when its top passes 80% down the screen the
rule under its masthead draws across and, 0.2 s later, the masthead slips; the contact sheet is then laid down (a three-frame
settle, from 721 px) and its tape lands last; the footer's rule draws and its wordmark slips. The content itself does not fade or
move. site.js marks sections still below that line as .wait, then .in; one already on screen at load is simply there. How it works
arrives the same way, then plays its own sequence. */
.motion .wait .mast::after,.motion .foot2.wait::before{scale:0 1}
.motion .in .mast::after,.motion .foot2.in::before{transform-origin:0 50%;animation:draw var(--draw) steps(7,end) both}
.motion .in .mast canvas.plate:nth-of-type(1),.motion .foot2.in .fimg canvas.plate:nth-of-type(1){animation:regC var(--slip) steps(1,end) .2s 1}
.motion .in .mast canvas.plate:nth-of-type(2),.motion .foot2.in .fimg canvas.plate:nth-of-type(2){animation:regM var(--slip) steps(1,end) .2s 1}
@keyframes draw{from{scale:0 1}to{scale:1 1}}
@keyframes lay{0%{rotate:-2.4deg;translate:0 -10px}34%{rotate:.4deg;translate:0 2px}67%{rotate:-.8deg;translate:0 0}100%{rotate:-.5deg;translate:0 0}}
@keyframes tapeIn{from{opacity:0}to{opacity:1}}
@media (min-width:721px){
.motion .sec-contact.wait .tape{opacity:0}
.motion .sec-contact.in .sheet{animation:lay .36s steps(1,end) .2s 1 backwards} /* three held frames, then its resting half degree */
.motion .sec-contact.in .tape{animation:tapeIn 1ms steps(1,end) .55s both}
}
@media (prefers-reduced-motion: reduce){.motion .wait .mast::after,.motion .foot2.wait::before{scale:1 1}.motion .in .mast::after,.motion .in::before,.motion .in .sheet,.motion .in .tape,.motion .in canvas.plate{animation:none!important}.motion .wait .tape{opacity:1}}
/* About: the name line across the page, printed in two pieces (one weight per element): the name, then how to say it in parentheses */
.saybig{grid-column:1 / -1;margin:var(--gap-content) 0 0;padding-top:var(--gap-group);border-top:1px solid rgba(40,39,37,.85);font-size:clamp(30px,6.1vw,88px);line-height:1.04;letter-spacing:-.024em}
.saybig b,.saybig span{display:inline-block}
.saybig span:last-child{white-space:nowrap} /* the parentheses wrap as one unit, never inside */
/* the home footer: the small print, then the wordmark as wide as the content (its first ink on the margin) */
.foot2.foot-big{display:block;padding:0 var(--pad) 40px}
.foot-big .fcols{padding-top:20px}
.foot-big .fmark{width:103.4%;margin:40px 0 0 -3.85%} /* the wordmark's ink starts 3.73% into its own box (103.4% wide): -3.85% puts its first ink on the margin */
/* Contact: a sheet of paper taped to the page, the intake form on it (plan/SPEC-CONTACT-FORM.md). The sheet tilts half a degree;
the tape sits outside it so its dots stay square. Its contact shadow is the one shadow on the site: it belongs to a physical sheet. */
.sheet-wrap{grid-column:2;position:relative;margin-top:8px}
.home .sheet-wrap{grid-column:1 / -1;max-width:1120px;margin-top:52px} /* the tape stands 52 px above the sheet: its top lands --gap-group under the masthead rule */
.sheet{position:relative;rotate:-.5deg;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;padding:64px 56px 56px;background:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),url(paper.jpg) 31% 67%/1100px auto;box-shadow:0 0 0 1px rgba(40,39,37,.07),0 1px 2px rgba(40,39,37,.10),0 10px 18px -12px rgba(40,39,37,.28)}
.tape{position:absolute;z-index:3;width:150px;height:150px;top:-52px}
.tape{--out:46px}.tape-l{left:calc(-1 * min(var(--out), var(--pad) - 10px))}.tape-r{right:calc(-1 * min(var(--out), var(--pad) - 10px))} /* past the sheet's corner, never past the page margin (its plate reaches 8 px further) */
.sheet-side{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.sheet .h2{font-size:var(--d2);max-width:none}
.sheet .facts{margin:0;line-height:1.4}
.sheet .facts li{padding:14px 0 11px;border-bottom:1px solid rgba(40,39,37,.85)}
.sheet .facts li:first-child{font-weight:600;font-size:var(--t-lead)}
.sheet .facts a{border-bottom:0} /* its hairline is the underline */
.sheet-form{display:grid}
.sheet-form > *{grid-area:1 / 1} /* "Got it." waits in the form's cell, so sending changes nothing's size */
.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;row-gap:26px;align-content:start}
.form .f{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column}
.form .wide{grid-column:1 / -1}
.form label,.form legend{padding:0;font-style:italic;font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.3}
.form label i,.form legend i{font-weight:500;color:var(--soft)}
.form input:not([type=checkbox]):not([type=radio]),.form textarea{width:100%;margin-top:4px;padding:8px 0 7px;border:0;border-bottom:1px solid rgba(40,39,37,.85);border-radius:0;background:transparent;color:var(--ink);font:500 17px/1.4 Jost,sans-serif;appearance:none}
.form textarea{resize:vertical;min-height:92px;line-height:32px;padding:0;border-bottom:0;background:repeating-linear-gradient(transparent 0 31px,rgba(40,39,37,.85) 31px 32px)} /* three ruled writing lines */
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.form [aria-invalid=true]{border-bottom:3px solid var(--ink)} /* the heavy rule */
.hint{margin-top:6px;font-style:italic;font-weight:500;font-size:15px;color:var(--soft)}
.err{margin-top:6px;font-weight:600;font-size:15px} /* errors in ink: the button is the only red here */
.err::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;background:var(--ink)}
.opts{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:12px}
.form .opt{display:inline-flex;align-items:center;gap:10px;font:500 17px/1.3 Jost,sans-serif;letter-spacing:0;cursor:pointer;min-height:28px}
.opt input{appearance:none;flex:none;width:20px;height:20px;margin:0;padding:4px;border:1px solid var(--rule);border-radius:0;background:transparent content-box;cursor:pointer}
.opt input[type=radio]{border-radius:50%}
.opt input:checked{background-color:var(--ink)} /* solid ink inside a ring of paper (padding, not a shadow) */
.opt input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* the honeypot: off screen, out of the tab order and the accessibility tree */
.form .send{flex-direction:row;align-items:center;gap:24px;margin-top:6px}
.form .btn2{border:0;cursor:pointer;flex:none}
.fine{margin:0;font-weight:500;font-size:15px;line-height:1.45;color:var(--soft);max-width:26em}
.fine a{color:var(--ink)}
.cdone{visibility:hidden;align-self:start}
.cdone .rt{font-size:var(--d2)}
.cdone .plate{transition:none!important} /* the plates carry old ink-landing delays: show them all at once */
.sent .form{display:none}.sent .cdone{visibility:visible;min-height:200px} /* on success the form leaves the layout, so the sheet shrinks to its message */
@media (max-width:1100px){
.route{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px;border-top:0}
.route li{border-top:1px solid rgba(40,39,37,.85)} /* each step its own piece of line */
.how-anim::before{display:none}
.how-anim li{border-top-color:transparent;transition:border-color calc(var(--tick) * 2) steps(2,end)}
.how-anim li.on{border-top-color:rgba(40,39,37,.85)}
.sheet-wrap{grid-column:1 / -1;margin-top:56px} /* study pages: under the label row, the tape never touches "(Contact)" */
.sheet{column-gap:40px;padding:72px 40px 48px} /* 72 on top (spec 56): the tape's lower edge clears the heading by 4 px */
.tape{--out:26px}
}
@media (max-width:860px){
.sheet{grid-template-columns:minmax(0,1fr);row-gap:40px}
.sheet-side{display:contents} /* one column, in reading order: heading, form, facts */
.sheet .h2{order:1}.sheet-form{order:2}.sheet .facts{order:3}
}
@media (max-width:720px){
.route{grid-template-columns:minmax(0,1fr);row-gap:0;border-left:1px solid rgba(40,39,37,.85)} /* the line turns down the left edge */
.route li{border-top:0;padding:0 0 40px 20px}
.route li::before{width:14px;height:1px}
.route li:last-child{padding-bottom:8px}
.how-anim{border-left-color:transparent}
.how-anim::before{display:block;left:-1px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:50% 0;scale:1 var(--lp,0)} /* the line grows down with the steps */
.how-anim li{border-top:0}
.route .r-live::after{top:auto;right:auto;left:-7px;bottom:-6.5px}
.rh{margin-bottom:16px}
.rh{font-size:64px}
.foot-big .fmark{margin-top:28px}
.sheet-wrap{margin-top:36px}
.home .sheet-wrap{margin-top:34px} /* the 104 px tape stands 34 px above the sheet */
.sheet{rotate:none;padding:72px 20px 32px;row-gap:32px} /* 72 on top (spec 44): the tape never touches the heading */
.tape{width:104px;height:104px;top:-34px;--out:10px}
.form{grid-template-columns:minmax(0,1fr);row-gap:22px}
.form .send{flex-direction:column;align-items:flex-start;gap:14px}
}
/* Work on home: studies are pictures (true colour, sharp, square, a 1 px ink rule, no shadow); the studio stays print.
Frames span all 12 columns; name, label and link sit on the content column. */
.studies{grid-column:1 / -1;margin:56px 0 0;padding:0;list-style:none}
.study + .study{margin-top:56px}
.study-frame{display:block;position:relative;aspect-ratio:16 / 10;text-decoration:none;border:1px solid var(--rule);overflow:hidden;background:var(--paper)}
.study-frame img,.study-frame picture,.study-frame video{display:block;width:100%;height:100%;object-fit:cover}
.study-meta{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:40px;align-items:baseline;margin-top:24px}
.study-label{margin:8px 0 0;font-style:italic;font-weight:500;font-size:17px;line-height:1.55}
.study-meta .study-link{display:inline-block;margin-top:16px}
.study-rows{grid-column:2;margin-top:56px}
.study-rows .study + .study{margin-top:0}
.rd .study-link{text-decoration:none;border-bottom:1px solid var(--rule);white-space:nowrap}
/* placeholders the study builders replace (grep data-placeholder: nothing ships while one is left) */
.ph{display:flex;flex-direction:column;justify-content:center;gap:6px;width:100%;height:100%;min-height:120px;padding:24px;border:1px dashed rgba(40,39,37,.45);font-style:italic;font-weight:500;font-size:15px;line-height:1.5;color:var(--soft);background:rgba(252,252,250,.6)}
.ph-m{display:none}
.tbd{outline:1px dashed rgba(40,39,37,.45);outline-offset:3px} /* words waiting for Ben's yes */
/* footer */
.foot2{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:40px;align-items:end;padding:56px var(--pad) 48px}
.foot2::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:var(--ink);opacity:.85}
.fmark{display:block;width:min(260px,60vw);margin-left:calc(min(260px,60vw) * -0.034)} /* the wordmark's ink starts 3.7% into its box, less the press's .45 px spread: its first inked pixel lands on the margin */
.fimg{display:block;position:relative;width:100%;aspect-ratio:3.3923}
.fcols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-weight:500;font-size:15px}
.fcols p{margin:0;max-width:34em}
.fcols a{text-decoration:none;border-bottom:1px solid var(--rule)}
/* ===== study pages (/work//): quieter than home. One display heading; the work in true colour, sharp, square, a 1 px ink rule ===== */
.st-head{padding:calc(102px + 64px) var(--pad) 56px}
.st-head::before{display:none} /* no rule under the header */
.honest{margin:16px 0 0;font-style:italic;font-weight:500;font-size:17px;line-height:1.55;max-width:34em}
.rec{margin:0}
.rec-frame{position:relative;border:1px solid var(--rule);background:var(--paper);overflow:hidden}
.rec-desktop .rec-frame{aspect-ratio:16 / 10}
.rec-phone .rec-frame{aspect-ratio:780 / 1688;width:min(100%, calc((100svh - 230px) * 780 / 1688))} /* the pinned phone recording always fits under the header */
.rec-frame video,.rec-frame img{display:block;width:100%;height:100%;object-fit:cover}
.rec-toggle{position:relative;display:inline-block;margin-top:12px;padding:6px 0;background:none;border:0;border-bottom:1px solid var(--rule);font:italic 600 17px/1 Jost,sans-serif;letter-spacing:-.01em;color:var(--ink);cursor:pointer}
.rec-toggle::before{content:"";position:absolute;inset:-12px -10px} /* 44 px+ to tap, nothing moves */
.st-lead{padding:0 var(--pad)}
.st-body{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:40px;padding:56px var(--pad) 120px}
.st-aside{position:sticky;top:126px;align-self:start} /* the phone recording stays beside everything on the right */
.st-main{min-width:0}
.st-facts{margin:0}
.st-facts div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);column-gap:24px;align-items:baseline;padding:20px 0;border-top:1px solid rgba(40,39,37,.22)}
.st-facts div:last-child{border-bottom:1px solid rgba(40,39,37,.22)}
.st-facts dt{font-style:italic;font-weight:600;font-size:17px;letter-spacing:-.01em}
.st-facts dd{margin:0;font-weight:500;font-size:17px;line-height:1.55;max-width:34em}
.st-tailored{margin-top:112px}
.tailor{width:100%;margin-top:40px;border-collapse:collapse}
.tailor th{padding:0 24px 16px 0;text-align:left;font-style:italic;font-weight:600;font-size:17px;letter-spacing:-.01em}
.tailor td{padding:24px 24px 24px 0;border-top:1px solid rgba(40,39,37,.22);vertical-align:baseline}
.tailor tr:last-child td{border-bottom:1px solid rgba(40,39,37,.22)}
.tailor td:first-child{width:42%}
.tailor td:last-child{padding-right:0}
.st-frames{display:grid;row-gap:40px;margin-top:112px}
.frame{margin:0}
.frame-img{border:1px solid var(--rule);aspect-ratio:16 / 10;overflow:hidden;background:var(--paper)}
.frame-phone .frame-img{aspect-ratio:780 / 1688;width:min(100%, 360px)}
.frame-img img{display:block;width:100%;height:100%;object-fit:cover}
.frame figcaption{margin-top:12px;font-style:italic;font-weight:500;font-size:var(--t-small);line-height:1.5;color:var(--soft);max-width:40em}
.frame figcaption b{font-weight:600;color:var(--ink)}
.st-live{margin:56px 0 0;font-weight:500;font-size:17px;line-height:1.9}
.st-live a{display:inline-block}
.st-next{padding-bottom:112px}
.st-next .study-meta{margin-top:0;grid-template-columns:56px minmax(0,1fr);column-gap:24px}
.fcols{align-items:baseline}
.fcols .partner{font-size:17px}
/* /thanks/ and /privacy/: one printed heading and plain text on paper, under the header */
.pg{padding-top:calc(102px + 64px)}
.pg::before{display:none} /* no rule under the header */
.pg-h{margin:40px 0 0;font-style:italic;font-weight:600;font-size:17px;letter-spacing:-.01em} /* the label style */
.pg-h + .body{margin-top:8px}
.pg .body a{text-decoration:none;border-bottom:1px solid var(--rule)}
.pg-back{margin:40px 0 0}
/* the 404: one line and a link home, on paper */
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--pad) 12svh}
.nf-logo{position:absolute;top:26px;left:var(--pad)}
.nf .h2{max-width:none}
.nf p{margin:40px 0 0}
/* the printed layers the section press adds */
.plate{position:absolute;pointer-events:none;mix-blend-mode:multiply;opacity:0}
.pressed .plate{opacity:1;transform:none !important}
.noprint2 .ink2{color:var(--ink)}
.noprint2 .plate{display:none} /* plain ink text: plates baked before the switch never show */
.noprint2 .ico img{opacity:1} /* press off: the icons as plain ink */
@media (prefers-reduced-motion: reduce){.plate{transition:none}}
@media (max-width:860px){
.sec,.foot2{grid-template-columns:minmax(0,1fr);padding:80px var(--pad) 88px}
.lab{display:none} /* the "(Work)" labels: hidden on phones (audit decision 8) */
.rows li{grid-template-columns:40px minmax(0,1fr);row-gap:8px}
.rows .rd{grid-column:2}
.studies{margin-top:40px}
.study-frame{aspect-ratio:4 / 5} /* phones get the phone capture, not a shrunken desktop */
.study-meta{grid-template-columns:40px minmax(0,1fr);column-gap:24px;margin-top:20px}
.study-rows{grid-column:1}
.ph-d{display:none}.ph-m{display:block}
.foot2{row-gap:28px;padding:48px var(--pad) 40px}
.fcols{flex-direction:column;gap:12px}
.sec{scroll-margin-top:46px} /* label lands 24 px under the 102 px header */
.h2.big{font-size:min(9.4vw,40px)}
/* study page on a phone: title, honest line, phone recording, facts, tailoring, desktop recording, frames, live link */
.st{display:flex;flex-direction:column}
.st-head{padding:calc(102px + 40px) var(--pad) 40px}
.pg{padding-top:calc(102px + 40px)}
.st-body,.st-main{display:contents}
.st-aside{position:static;order:1;padding:0 var(--pad)}
.st-facts{order:2;margin:40px var(--pad) 0}
.st-tailored{order:3;margin:80px var(--pad) 0}
.st-lead{order:4;margin-top:80px}
.st-frames{order:5;margin:56px var(--pad) 0}
.st-live{order:6;margin:56px var(--pad) 88px}
.st-facts div{grid-template-columns:minmax(0,1fr);row-gap:4px}
.rec-phone .rec-frame{width:min(100%, calc((100svh - 170px) * 780 / 1688))}
.tailor thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tailor,.tailor tbody,.tailor tr,.tailor td{display:block;width:auto}
.tailor tr{padding:20px 0;border-top:1px solid rgba(40,39,37,.22)}
.tailor tr:last-child{border-bottom:1px solid rgba(40,39,37,.22)}
.tailor td,.tailor tr:last-child td{padding:0;border:0}
.tailor td:first-child{width:auto}
.tailor td + td{margin-top:8px}
.st-next .study-meta{grid-template-columns:40px minmax(0,1fr)}
}
@media (max-width:720px){
.sec{scroll-margin-top:12px} /* label lands 24 px under the 68 px phone header */
.st-head{padding-top:calc(68px + 40px)}
.pg{padding-top:calc(68px + 40px)}
.nf-logo{top:16px}
.nf .h2{font-size:min(11vw,48px)}
}
/* ===== About photo (12 Nov; v2, Ben: "like the one on my Instagram", more halftone, sharp) =====
Ben's Instagram picture (assets/about/ben-pfp.jpg, 377 px), the whole square in the circle as Instagram shows it: 188 px, so the file
holds at 2x (125 on phones, where it holds at 3x). On the grid: the paragraph and the photo share the route's columns (two halves, the
route's 40 px gap), so the photo's left edge is How it works' third column line at 1440 (740) and its second at 1024 (532); its top
sits on the cap height of the paragraph's first line (.41em of the body size). Phones: above the paragraph, on the margin.
With motion allowed and the press on, assets/about/pfp.js prints it in a canvas at the screen's own resolution (.pfp.on): the sharp
photo with colour halftone dots over it (four screens at the site's angles, 2.8 px), lighter on the face and stronger toward the edge,
cyan and magenta a pixel out of register, multiplied onto the paper. The canvas stands --pad past the circle so the fringe has room.
No JavaScript, press off (.noprint2) or reduced motion: the plain circular photo. */
.about-row{margin-top:var(--gap-head);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;align-items:start}
.about-row .body:first-child{margin-top:0}
.pfp{position:relative;width:188px;aspect-ratio:1;font-size:clamp(17px,1.4vw,20px);margin-top:.41em}
.pfp img{display:block;width:100%;height:100%;border-radius:50%}
.pfp canvas{position:absolute;top:calc(var(--pad) * -1);left:calc(var(--pad) * -1);width:calc(100% + var(--pad) * 2);height:calc(100% + var(--pad) * 2);mix-blend-mode:multiply}
html:not(.noprint2) .pfp.on img{opacity:0} /* still there for the alt text */
.noprint2 .pfp canvas{display:none}
@media (max-width:860px){
.about-row{grid-template-columns:minmax(0,1fr);row-gap:var(--gap-head)}
.pfp{order:-1;width:125px;margin-top:0}
}
/* Icons centred in their hover column (Ben, 12 Nov): across the column's width and down the tile's full height, the same as the column that
lights up on hover (it runs top to bottom of the tile). The text stays at the top. Vertical padding is equal so the content box's middle is the tile's middle.
The column is wider than the tile padding plus the icon, so each icon shifts left by (column/2 - icon/2 - padding). */
.bm .tile:not(.t-theme),.bs .st{grid-template-rows:minmax(0,1fr);align-content:stretch}
.bm .tile:not(.t-theme) > .tx,.bs .st > .tx{align-self:start}
.bm .tile:not(.t-theme) > .ico{align-self:center;margin-left:-9px} /* column 142, padding 32, icon 96 */
.bs .st{padding-top:30px;padding-bottom:30px}
.bs .st > .ico{align-self:center;margin-left:-11px} /* column 106, padding 32, icon 64 */
@media (max-width:1100px){
.bm .tile:not(.t-theme){grid-template-rows:auto;align-content:start}
.bm .tile:not(.t-theme) > .ico{align-self:start;justify-self:center;margin:-12px 0 32px} /* the icon sits in the top band here (136 tall): centred in it both ways */
}
@media (max-width:720px){
.bm .tile:not(.t-theme){grid-template-rows:minmax(0,1fr);align-content:stretch;padding-top:26px;padding-bottom:26px}
.bm .tile:not(.t-theme) > .ico{align-self:center;justify-self:start;margin:0 0 0 -5px} /* column 102, padding 20, icon 72 */
.bs .st:nth-child(n){padding-top:23px;padding-bottom:23px}
.bs .st > .ico{margin-left:-7px} /* column 82, padding 20, icon 56 */
}