/* Flamingo palette: pale body, crimson at the wing flash and joints, standing in shallow water. Tokens first (light and dark), then the swatch-book system below. */ /* Plus Jakarta Sans, self-hosted (SIL OFL). Variable weight 200-800. No width axis, so display weight and size carry what width used to. */ @font-face{ font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:200 800; font-display:swap; src:url(assets/fonts/jakarta-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+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:200 800; font-display:swap; src:url(assets/fonts/jakarta-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{ --paper:#F9F4F2; --blush:#F0DBDE; --deep:#241A1E; --shell:#FFFCFC; --ink:#241A1E; --ink-soft:#5A484F; --ink-faint:#6C5F63; --line:#E6D3D7; --line-strong:#D0B5BC; --flash:#C9315A; --flash-deep:#A32446; --flash-lift:#E6577D; --on-flash:#FFF6F3; --water:#3F8087; --on-water:#FFFFFF; --beak:#7F5C20; --beak-lift:#DBAB57; --field-print:#241A1E; --spine-teal:#356E74; --on-spine-teal:#FFF6F3; --on-spine-gold:#241A1E; --shelf:#241A1E; /* Each tonal band tints its own text so copy takes the colour of its ground. Every pair below is >=4.5:1 on the ground it is used on. */ --blush-soft:#66494F; --blush-faint:#6F5A61; --blush-line:#E1C6CC; --deep-ink:#F9F0F2; --deep-soft:#BBA6AD; --deep-faint:#A8949B; --deep-line:#3F2932; --deep-line-strong:#553A44; --deep-surface:#372630; --bg:var(--paper); --surface:var(--shell); color-scheme:light; --sh-s:0 1px 2px rgba(42,28,31,.05); --sh-m:0 2px 6px rgba(42,28,31,.05), 0 14px 34px -16px rgba(42,28,31,.20); --sh-l:0 6px 14px rgba(42,28,31,.06), 0 34px 70px -32px rgba(42,28,31,.34); --bend:140px 26px 26px 26px; --fs-micro:.75rem; /* floor for tracked caps labels: 12px */ --fs-fine:.86rem; /* fine print: caveats, captions, counts, footer */ --fs-prose:1.06rem;/* secondary prose: ledes, body inside a section */ /* Measure. NOTE: `ch` is the advance of "0", and in Plus Jakarta that is 12.41px against an average prose glyph of 7.53px — so a declared 62ch rendered 102 characters, not 62. 43ch lands at ~71 characters, which is what the 45-75 target actually means for this face. */ --measure:43ch; --r-chip:7px; /* die-cut corner. The bend above is for the portrait only. */ --ground:var(--paper); --ease:cubic-bezier(.34,.05,.18,1); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ /* The inverted band cannot be darker than the page here: near-black beside near-black reads as no break at all. It turns to the wing flash instead, a deep wine. Change it once, in --deep + --deep-*. */ --paper:#171216; --blush:#2B1C22; --deep:#4E1A31; --shell:#201A1E; --ink:#F6EBEE; --ink-soft:#B3A0A6; --ink-faint:#94848E; --line:#352730; --line-strong:#4A3740; --flash:#F2607F; --flash-deep:#FF8AA3; --flash-lift:#FFB0C1; --on-flash:#1A0E13; --water:#74B2B8; --on-water:#1A0E13; --beak:#DBAB57; --field-print:#8C3D69; --spine-teal:#74B2B8; --on-spine-teal:#1A0E13; --on-spine-gold:#241A1E; --shelf:#4A3740; --blush-soft:#BFA1AA; --blush-faint:#9A8A93; --blush-line:#422E37; --deep-ink:#FBF1F3; --deep-soft:#E2C6CF; --deep-faint:#CDB0BA; --deep-line:#6B3550; --deep-line-strong:#85496A; --deep-surface:#612540; color-scheme:dark; --sh-s:0 1px 2px rgba(0,0,0,.28); --sh-m:0 1px 3px rgba(0,0,0,.22), 0 10px 24px -14px rgba(0,0,0,.42); --sh-l:0 3px 8px rgba(0,0,0,.24), 0 22px 46px -26px rgba(0,0,0,.5); } } :root[data-theme="dark"]{ --paper:#171216; --blush:#2B1C22; --deep:#4E1A31; --shell:#201A1E; --ink:#F6EBEE; --ink-soft:#B3A0A6; --ink-faint:#94848E; --line:#352730; --line-strong:#4A3740; --flash:#F2607F; --flash-deep:#FF8AA3; --flash-lift:#FFB0C1; --on-flash:#1A0E13; --water:#74B2B8; --on-water:#1A0E13; --beak:#DBAB57; --field-print:#8C3D69; --spine-teal:#74B2B8; --on-spine-teal:#1A0E13; --on-spine-gold:#241A1E; --shelf:#4A3740; --blush-soft:#BFA1AA; --blush-faint:#9A8A93; --blush-line:#422E37; --deep-ink:#FBF1F3; --deep-soft:#E2C6CF; --deep-faint:#CDB0BA; --deep-line:#6B3550; --deep-line-strong:#85496A; --deep-surface:#612540; color-scheme:dark; --sh-s:0 1px 2px rgba(0,0,0,.28); --sh-m:0 1px 3px rgba(0,0,0,.22), 0 10px 24px -14px rgba(0,0,0,.42); --sh-l:0 3px 8px rgba(0,0,0,.24), 0 22px 46px -26px rgba(0,0,0,.5); } *{ box-sizing:border-box; } /* Author display rules (.case-body grid, .arc flex) outrank the UA's [hidden]{display:none}. Without this, the lens toggle and archive filter set the attribute and nothing leaves the page. */ [hidden]{ display:none !important; } html{ scrollbar-color:var(--line-strong) var(--paper); accent-color:var(--flash); caret-color:var(--flash); } ::selection{ background:var(--flash); color:var(--on-flash); } /* =========================================================== SWATCH BOOK. Evidence is a die-cut colour chip: a colour field over a printed strip, punched for the rivet. One family (Plus Jakarta Sans) speaks on its weight axis: 800 for the name, 400 for reading, 650 caps for labels. Colour roles: crimson = evidence / product, teal = brand, gold = motion, wine-black = print. Never decorative. =========================================================== */ body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; } .wrap{ max-width:1180px; margin-inline:auto; padding-inline:22px; } @media (min-width:760px){ .wrap{ padding-inline:52px; } } h1, h2, h3, h4{ margin:0; text-wrap:balance; font-weight:700; } h1{ font-weight:800; letter-spacing:-.035em; font-size:clamp(2.7rem,9.4vw,5.5rem); line-height:.96; } h2{ letter-spacing:-.028em; font-size:clamp(1.95rem,4.5vw,3.2rem); line-height:1.06; } h3{ letter-spacing:-.015em; font-size:1.32rem; line-height:1.25; } h4{ font-size:1.02rem; letter-spacing:-.01em; } p{ margin:0; text-wrap:pretty; } a{ color:inherit; } b, strong{ font-weight:650; color:var(--ink); } :focus-visible{ outline:2px solid var(--flash); outline-offset:3px; border-radius:4px; } ul{ margin:0; padding:0; list-style:none; } /* printed caps: labels, keys, codes. 12px floor. */ .cap, .label, .dec-k, .cm dt, .sw .meta{ font-size:var(--fs-micro); font-weight:650; letter-spacing:.09em; text-transform:uppercase; line-height:1.4; } .label{ color:var(--flash-deep); } .beat-h{ font-size:1.32rem; font-weight:700; letter-spacing:-.008em; line-height:1.25; color:var(--ink); } .lede{ color:var(--ink-soft); font-size:1.16rem; line-height:1.55; max-width:var(--measure); } .sec-lede{ color:var(--ink-soft); font-size:var(--fs-prose); max-width:var(--measure); margin-top:16px; } .sec-lede a{ color:var(--flash-deep); } /* ---------- BANDS: the page changes ground, not just spacing ---------- */ .band{ padding-block:88px; } @media (max-width:700px){ .band{ padding-block:60px; } } .band--paper{ background:var(--paper); } .band--blush{ background:var(--blush); --ground:var(--blush); --surface:var(--shell); --ink-soft:var(--blush-soft); --ink-faint:var(--blush-faint); --line:var(--blush-line); } .band--deep{ background:var(--deep); --ground:var(--deep); color:var(--deep-ink); --ink:var(--deep-ink); --ink-soft:var(--deep-soft); --ink-faint:var(--deep-faint); --line:var(--deep-line); --line-strong:var(--deep-line-strong); --surface:var(--deep-surface); --flash-deep:var(--flash-lift); --beak:var(--beak-lift); } .sec-head--lead h2{ font-size:clamp(2.45rem,6.6vw,4.8rem); line-height:1; letter-spacing:-.034em; } .sec-head{ display:flex; flex-direction:column; gap:0; margin-bottom:44px; max-width:70ch; } /* ---------- THE CHIP ---------- */ .sw{ --chamfer:16px; --chamfer-in:calc(var(--chamfer) - .6px); clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%); } .sw-strip{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-in)), calc(100% - var(--chamfer-in)) 100%, 0 100%); } .sw{ position:relative; display:flex; flex-direction:column; background:var(--line-strong); padding:1px; border-radius:var(--r-chip); overflow:hidden; } .sw-field{ background:var(--field, var(--flash)); flex:none; height:var(--field-h, 56px); } .sw-strip{ background:var(--surface); flex:1; padding:12px 14px 14px; display:grid; gap:3px; align-content:start; } /* the rivet hole: the ground shows through the colour */ .sw::after{ content:""; position:absolute; top:9px; right:9px; width:12px; height:12px; border-radius:50%; background:var(--ground); box-shadow:0 0 0 2.5px var(--surface), inset 0 1px 2px rgba(36,26,30,.4); } .sw--slim::after{ display:none; } .sw .n{ font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:lining-nums tabular-nums; color:var(--ink); } .sw .l{ font-size:.86rem; color:var(--ink-soft); line-height:1.35; } [data-field="flash"]{ --field:var(--flash); } [data-field="water"]{ --field:var(--water); } [data-field="gold"]{ --field:var(--beak-lift); } [data-field="deep"]{ --field:var(--field-print); } [data-field="blush"]{ --field:var(--blush); } .band--blush [data-field="blush"]{ --field:var(--paper); } .band--deep [data-field="deep"]{ --field:var(--ink); } /* ---------- NAV ---------- */ .brand{ display:flex; align-items:center; gap:9px; font-size:1rem; font-weight:800; letter-spacing:-.02em; } .theme-btn{ flex:none; width:44px; height:44px; border-radius:var(--r-chip); cursor:pointer; border:1px solid var(--line-strong); background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease); } .theme-btn:hover{ background:var(--blush); } .theme-btn svg{ display:block; } /* the theme button shows where it goes: a moon in light, a sun in dark */ .theme-btn .i-sun{ display:none; } :root[data-theme="dark"] .theme-btn .i-sun{ display:block; } :root[data-theme="dark"] .theme-btn .i-moon{ display:none; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-btn .i-sun{ display:block; } :root:not([data-theme="light"]) .theme-btn .i-moon{ display:none; } } /* Work is password-protected on the live site; the lock says so before the click */ .dock-lock{ flex:none; margin-left:-2px; opacity:.8; } /* ---------- BUTTONS ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:14px 22px; border-radius:var(--r-chip); font-weight:700; font-size:.95rem; border:1.5px solid transparent; cursor:pointer; font-family:inherit; transition:background .2s var(--ease), border-color .2s var(--ease); } .btn-primary{ background:var(--flash); color:var(--on-flash); } .btn-primary:hover{ background:var(--flash-deep); } .btn-ghost{ border-color:var(--line-strong); color:var(--ink); } .btn-ghost:hover{ border-color:var(--ink); } /* ---------- THE OPENER ---------- One line, held on the inverted ground, then the whole sheet lifts away and the page is already there behind it. Once per session. */ .opener{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; background:var(--deep); padding:24px; overflow:hidden; animation:openerLift .9s cubic-bezier(.76,0,.24,1) 2.15s both; } /* The logo writes itself out: "kc." opens into "karina costa." and the flamingo walks along to the new full stop. The page lays out the full name; every moving part starts pulled back to where logo.svg has it (units are the logo's, 100 to the em) and eases home together. The new letters come up in its footsteps: each one's --d is the moment the walk passes its centre (the c for "arina", the full stop for "osta"), solved against the walk's easing, so the name fills in behind the bird rather than being wiped on. */ .opener-logo{ margin:0; color:var(--deep-ink); font-weight:500; letter-spacing:0; line-height:1; white-space:pre; font-size:min(6.4rem, calc((100vw - 48px) / 6.4)); animation:openerIn .7s cubic-bezier(.16,1,.3,1) .1s both; } .ol-line{ display:inline-block; animation:olLine .75s cubic-bezier(.65,0,.35,1) 1s both; } .ol-line > *{ display:inline-block; } .ol-c{ animation:olC .75s cubic-bezier(.65,0,.35,1) 1s both; } .ol-osta{ animation:olC .75s cubic-bezier(.65,0,.35,1) 1s both; } .ol-arina > span, .ol-osta > span{ display:inline-block; animation:olStep .42s cubic-bezier(.16,1,.3,1) var(--d) both; } .ol-tail{ width:.7118em; height:1.1195em; margin-left:-.262em; vertical-align:baseline; fill:currentColor; overflow:visible; animation:olTail .75s cubic-bezier(.65,0,.35,1) 1s both; } .ol-tail .fl{ fill:var(--flash-lift); } /* It walks rather than slides: a small lean back before it sets off, two steps up off the full stop as it goes, then a bow once it lands. The turn is about its foot. */ .ol-tail .fl{ transform-box:fill-box; transform-origin:59% 100%; animation:olWalk 1.3s cubic-bezier(.45,0,.55,1) .85s both; } @keyframes olWalk{ 0%{ transform:none; } 11.5%{ transform:rotate(-4deg); } 25%{ transform:rotate(4deg) translateY(-6%); } 38%{ transform:rotate(4deg); } 51%{ transform:rotate(4deg) translateY(-6%); } 66%{ transform:rotate(3deg); } 72%{ transform:none; } 84%{ transform:rotate(8deg); } 100%{ transform:none; } } @keyframes olLine{ from{ transform:translateX(2.3171em); } } @keyframes olC{ from{ transform:translateX(-2.4883em); } } @keyframes olTail{ from{ transform:translateX(-4.6342em); } } @keyframes olStep{ from{ opacity:0; transform:translateY(.24em); filter:blur(.05em); } } @keyframes openerIn{ from{ opacity:0; transform:translateY(.34em); } to{ opacity:1; transform:none; } } @keyframes openerLift{ to{ transform:translateY(-101%); visibility:hidden; } } .opener[hidden], .intro-skip .opener{ display:none; } .intro-hold .opener, .intro-hold .opener *{ animation-play-state:paused; } /* ---------- THE DOCK: the menu as a floating chip ---------- */ .dock{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; justify-items:center; gap:8px; padding:0 14px calc(20px + env(safe-area-inset-bottom,0px)); pointer-events:none; } /* The dock is floating chrome, not a card sitting on the page, so it takes a real box-shadow and gives up the chip's cut corner: a filter-based shadow would fall from every glyph in the menu as well as the bar. */ .dock-bar{ clip-path:none; box-shadow:0 2px 4px rgba(36,26,30,.09), 0 14px 26px -6px rgba(36,26,30,.18); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .dock-bar{ box-shadow:0 2px 5px rgba(0,0,0,.4), 0 16px 30px -6px rgba(0,0,0,.55); } } :root[data-theme="dark"] .dock-bar{ box-shadow:0 2px 5px rgba(0,0,0,.4), 0 16px 30px -6px rgba(0,0,0,.55); } .dock > *{ pointer-events:auto; } .dock-bar{ max-width:100%; --chamfer:14px; } .dock-bar .sw-field{ --field-h:5px; } .dock-row{ background:var(--surface); display:flex; align-items:center; gap:2px; padding:7px 9px; overflow-x:auto; scrollbar-width:none; max-width:100%; } .dock-row::-webkit-scrollbar{ display:none; } .dock-brand{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; flex:none; font-weight:800; font-size:.95rem; letter-spacing:-.02em; color:var(--ink); padding:9px 12px 9px 8px; border-right:1px solid var(--line); margin-right:5px; } .dock-logo{ display:block; height:24px; width:auto; fill:currentColor; } .dock-logo .fl{ fill:var(--flash); } .dock-link{ flex:none; border:none; background:transparent; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none; font-size:.88rem; font-weight:550; color:var(--ink-soft); padding:10px 13px; border-radius:5px; min-height:40px; transition:color .2s var(--ease), background .2s var(--ease); } .dock-link:hover{ color:var(--ink); background:var(--blush); } .dock-link.active{ color:var(--on-flash); background:var(--flash); } .dock .theme-btn{ margin-left:5px; width:40px; height:40px; } /* the open half of the work: no lock, and a rule between the two registers */ /* the dock floats over the page, so the page ends above it */ footer{ padding-bottom:calc(46px + 74px); } @media (max-width:700px){ .dock-brand{ padding-right:10px; } } /* ---------- HERO ---------- */ .hero{ padding-block:30px 0; background:var(--paper); } /* the fold belongs to the composition: name and proof left, portrait full height right, and the dock's landing strip kept clear at the bottom */ @media (min-width:900px){ .hero{ padding-block:42px 0; } .hero-grid{ min-height:calc(100svh - 42px - 100px); align-items:stretch; } .hero-main{ justify-content:space-between; gap:22px; padding-bottom:4px; } .portrait{ max-width:none; height:100%; aspect-ratio:auto; align-self:stretch; } .portrait img{ object-position:50% 22%; } .hero-more{ margin-top:104px; padding-bottom:96px; } } .hero-grid{ display:grid; gap:32px; grid-template-columns:1fr; align-items:start; } @media (min-width:900px){ .hero-grid{ grid-template-columns:1.42fr .88fr; gap:56px; } } .hero-main{ display:flex; flex-direction:column; gap:16px; } .hero h1{ margin-left:-.04em; } .role{ font-size:var(--fs-micro); font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); } /* the one imperfect mark on the page */ .hero-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; } .portrait{ border-radius:var(--bend); overflow:hidden; background:var(--blush); aspect-ratio:3/4; box-shadow:var(--sh-m); max-width:420px; } .portrait img{ width:100%; height:100%; object-fit:cover; display:block; filter:sepia(.14) contrast(1.02); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .portrait img{ filter:sepia(.14) brightness(.86) contrast(1.02); } } :root[data-theme="dark"] .portrait img{ filter:sepia(.14) brightness(.86) contrast(1.02); } /* the fan: chips overlap and spread about ONE shared pivot below them, so the rotation of each is its place in the fan. Left-aligned copy stays inside the visible sliver of every chip; the last chip is drawn whole. */ .code{ color:var(--ink-faint); } @keyframes fanOut{ from{ transform:rotate(0deg); } to{ transform:rotate(calc(var(--a,0deg) * var(--spread,1))); } } /* the fan is a desktop gesture: four tilted cards need width the phone has not got, and the lean buries the label of the card behind. On a phone the same chips stand upright in a 2 x 2. */ .hero-more{ display:grid; gap:28px; margin-top:76px; max-width:900px; } @media (min-width:900px){ .hero-more{ grid-template-columns:1.3fr 1fr; gap:64px; align-items:start; } } .hero-more .side{ display:grid; gap:18px; } .prev{ font-size:.95rem; color:var(--ink-soft); max-width:var(--measure); } .prev.creed{ color:var(--ink); font-weight:600; } /* the separator trails its item, so a wrapped line never opens on a slash */ /* ---------- CASE ---------- */ .cm{ background:var(--surface); padding:16px 18px; display:grid; gap:6px; align-content:start; } .cm dt{ color:var(--ink-faint); margin:0; } .cm dd{ margin:0; font-size:.95rem; color:var(--ink); line-height:1.45; } .cm dd .shipped{ color:var(--flash-deep); font-weight:650; } @keyframes lensIn{ from{ opacity:.25; transform:translateY(10px); } to{ opacity:1; transform:none; } } .beat ul li, .learnings li{ position:relative; padding-left:24px; color:var(--ink-soft); font-size:var(--fs-prose); } .beat ul li::before, .learnings li::before{ content:""; position:absolute; left:0; top:.5em; width:11px; height:11px; border-radius:2px; background:var(--flash); } .decision .sw-field{ --field-h:8px; } .decision .sw-strip{ padding:22px 24px 24px; gap:14px; } .caveat{ font-size:var(--fs-fine); color:var(--ink-faint); max-width:var(--measure); } /* illustrative structure of the review pattern; never presented as the shipped page */ .bento{ display:grid; gap:8px; grid-template-columns:repeat(6,1fr); padding:14px; background:var(--surface); border-radius:var(--r-chip); box-shadow:var(--sh-s); } .bar{ display:block; height:6px; border-radius:3px; background:var(--line-strong); position:relative; } .bar::after{ content:""; position:absolute; inset:0 auto 0 0; width:var(--w,50%); border-radius:3px; background:var(--flash); } .mchips .sw-field, .score-grid .sw-field{ --field-h:8px; } .mchips .sw-strip, .score-grid .sw-strip{ padding:16px 16px 18px; gap:6px; } .arr{ display:inline-block; width:.62em; height:.36em; margin-inline:.12em; vertical-align:.08em; overflow:visible; } .arr path{ fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; } .cav{ font-size:var(--fs-fine); color:var(--ink-faint); line-height:1.4; margin-top:2px; } .learnings{ display:grid; gap:12px; max-width:var(--measure); } .learnings ul{ display:grid; gap:12px; } /* ---------- SLOT (content still to come) ---------- */ .slot{ border:1px dashed var(--line-strong); border-radius:var(--r-chip); padding:28px; display:grid; gap:12px; margin-top:26px; max-width:var(--measure); } .slot p{ color:var(--ink-soft); font-size:1rem; } .slot .label{ color:var(--beak); text-transform:none; letter-spacing:.01em; font-size:.95rem; font-weight:700; } /* ---------- METHOD ---------- */ .method{ border-top:1px solid var(--line); } .m-row{ display:grid; gap:14px 40px; padding:30px 0; border-bottom:1px solid var(--line); grid-template-columns:1fr; } @media (min-width:960px){ .m-row{ grid-template-columns:190px minmax(0,1fr); gap:10px 40px; } } .m-key{ display:grid; gap:6px; align-content:start; padding-top:5px; } .m-key .cap{ color:var(--flash-deep); } .m-key .code{ font-variant-numeric:tabular-nums; } .m-body{ display:grid; gap:10px; max-width:var(--measure); } .m-body p{ font-size:1rem; color:var(--ink-soft); } /* ---------- TIMELINE ---------- */ .tl-row{ display:grid; grid-template-columns:1fr; gap:10px; padding:30px 0; border-bottom:1px solid var(--line); } .tl-row:first-of-type{ border-top:1px solid var(--line); } @media (min-width:820px){ .tl-row{ grid-template-columns:170px 1fr; gap:36px; align-items:start; } } .tl-when{ font-size:.86rem; font-weight:650; font-variant-numeric:tabular-nums; color:var(--flash-deep); white-space:nowrap; padding-top:5px; letter-spacing:.02em; } .tl-what{ display:grid; gap:10px; max-width:var(--measure); } .tl-what h3 span{ color:var(--ink-soft); font-weight:400; } .tl-what p{ font-size:1.01rem; color:var(--ink-soft); } /* wide: year, role and narrative each take a column */ @media (min-width:1040px){ .tl-row{ grid-template-columns:150px 290px minmax(0,1fr); gap:40px; } .tl-what{ display:contents; } .tl-what h3{ align-self:start; } .tl-what p{ max-width:var(--measure); } } /* ---------- ARCHIVE: the book itself ---------- */ .filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; } .tab{ display:inline-flex; align-items:center; gap:9px; min-height:44px; border:1.5px solid var(--line-strong); background:transparent; color:var(--ink-soft); padding:10px 16px; border-radius:var(--r-chip); font-size:.9rem; font-weight:650; cursor:pointer; font-family:inherit; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .tab i{ width:14px; height:14px; border-radius:3px; background:var(--field); flex:none; } .tab:hover{ border-color:var(--ink); color:var(--ink); } .tab.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); } .archive{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } @media (min-width:600px){ .archive{ grid-template-columns:repeat(auto-fill, minmax(158px,1fr)); gap:12px; } } .arc{ --field-h:46px; } .arc .sw-strip{ padding:11px 13px 13px; gap:4px; } .arc .t{ font-weight:650; font-size:.96rem; color:var(--ink); line-height:1.25; } .arc .meta{ color:var(--ink-faint); font-size:var(--fs-micro); } .arc-foot{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:2px; } .arc-foot .code{ color:var(--ink-faint); } .archive-count{ margin-top:22px; font-size:var(--fs-fine); color:var(--ink-faint); font-variant-numeric:tabular-nums; } /* ---------- THE GATE ---------- (retired: the case studies are gated by build.py) */ /* ---------- BOOKSHELF ---------- The chip turned on its side: a colour field, the punched hole, the same bottom-right cut. Spine colour names the book's group (content/books.json); the nth-child cycle below is only the fallback for an ungrouped book. */ .shelf{ display:flex; align-items:flex-end; gap:9px; padding:0 4px 0; margin:0; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; } .shelf::-webkit-scrollbar{ display:none; } .spine{ --field:var(--flash); --on-spine:var(--on-flash); position:relative; flex:none; width:56px; height:var(--sh,210px); background:var(--field); border:none; padding:0; cursor:pointer; font-family:inherit; border-radius:6px 6px 3px 3px; transform-origin:bottom center; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); display:flex; align-items:flex-end; justify-content:center; transition:transform .32s var(--ease); } .shelf li:nth-child(3n+2) .spine{ --field:var(--spine-teal); --on-spine:var(--on-spine-teal); } .shelf li:nth-child(3n+3) .spine{ --field:var(--beak-lift); --on-spine:var(--on-spine-gold); } .shelf li:nth-child(4n+4) .spine{ --sh:194px; } .shelf li:nth-child(5n+3) .spine{ --sh:226px; } .shelf li:nth-child(7n+5) .spine{ --sh:202px; } .spine::after{ content:""; position:absolute; top:11px; left:50%; margin-left:-6px; width:12px; height:12px; border-radius:50%; background:var(--ground); box-shadow:0 0 0 2.5px var(--field), inset 0 1px 2px rgba(36,26,30,.4); } .spine .st{ writing-mode:vertical-rl; transform:rotate(180deg); color:var(--on-spine); font-weight:700; font-size:.84rem; line-height:1.2; padding:18px 0 22px; max-height:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .shelf-ledge{ height:10px; margin:0 4px 0; background:var(--shelf); border-radius:0 0 5px 5px; } .book-read{ margin-top:30px; max-width:var(--measure); } .book-read .sw-field{ --field-h:8px; } .book-read .sw-strip{ padding:22px 24px 24px; gap:8px; } /* ---------- SCOREBOARD ---------- */ .score{ display:grid; gap:34px; grid-template-columns:1fr; } @media (min-width:760px){ .score{ grid-template-columns:1fr 1fr; gap:48px; } } .score-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); } .score-grid .sw:last-child:nth-child(odd){ grid-column:1 / -1; } .score-grid .n{ font-size:2.2rem; } .score-grid .n--s{ font-size:1.28rem; line-height:1.15; padding-block:.4rem; } .score-note{ margin-top:18px; font-size:var(--fs-fine); color:var(--ink-faint); } /* ---------- WRITING ---------- */ /* the shelf is the source of the drafts above it, so it is set in, not apart */ /* ---------- CONTACT ---------- */ .contact-grid{ display:grid; gap:30px; align-items:end; grid-template-columns:1fr; } @media (min-width:860px){ .contact-grid{ grid-template-columns:1.2fr .8fr; } } .contact-links{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; } footer{ background:var(--deep); color:var(--deep-faint); padding:30px 0 46px; font-size:.86rem; } footer .wrap{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.08s !important; } .opener{ animation-delay:.2s; animation-duration:.01ms; } .opener-logo, .opener-logo *{ animation:none; } } /* =========================================================== TYPE-LED FIGURES AND ARCHIVE The chip stopped earning its place here. A figure does not need a container, a colour field or a punched hole to read as evidence: scale and space do it, and the palette lands on the numeral instead of behind it. The chip survives where it still carries meaning — the work menu, the case, the shelf. =========================================================== */ /* ---- the scoreboard ---- */ .score-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px 34px; } .score-grid .sw{ background:none; padding:0; border-radius:0; clip-path:none; box-shadow:none; overflow:visible; display:grid; gap:4px; align-content:start; } .score-grid .sw::after{ display:none; } .score-grid .sw-field{ display:none; } .score-grid .sw-strip{ background:none; padding:0; clip-path:none; flex:none; display:grid; gap:4px; } .score-grid .n{ font-size:2.5rem; color:var(--flash); letter-spacing:-.035em; } .score-grid .n--s{ font-size:1.6rem; padding-block:0; } .score-grid .l{ font-size:.92rem; color:var(--ink-soft); line-height:1.35; } .score-grid .sw:last-child:nth-child(odd){ grid-column:auto; } .score-grid .cav{ font-size:var(--fs-fine); } /* ---- the archive: the work itself ---- */ .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .archive{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:30px 22px; } .arc{ margin:0; background:none; padding:0; border-radius:0; clip-path:none; box-shadow:none; overflow:visible; display:grid; gap:11px; align-content:start; } .arc::after{ display:none; } .arc-shot{ display:block; aspect-ratio:4/3; overflow:hidden; border-radius:3px; background:var(--blush); } .arc-shot img{ width:100%; height:100%; object-fit:cover; display:block; } .arc-shot--empty{ border:1px dashed var(--line-strong); background:none; } .arc-cap{ display:grid; gap:3px; } .arc .t{ font-weight:600; font-size:.97rem; color:var(--ink); line-height:1.3; } .arc-foot{ display:flex; align-items:baseline; gap:8px; margin:0; } .arc .meta{ color:var(--ink-faint); } /* the discipline stays readable as a mark; the word rides along for screen readers */ .arc .meta::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:2px; background:var(--field); margin-right:8px; vertical-align:.08em; } @media (max-width:520px){ .archive{ grid-template-columns:1fr 1fr; gap:22px 14px; } } /* ---- the filters lose their pill ---- */ .filters{ gap:4px 6px; margin-bottom:18px; } .tab{ border:none; background:none; border-radius:0; padding:9px 0; min-height:38px; color:var(--ink-faint); font-weight:600; } .tab + .tab{ margin-left:22px; } /* the filter is text, not a pill — but "All" is only 17px wide, so give it an honest hit area without drawing one. 8px stays clear of the 22px gap. */ .tab{ position:relative; } .tab::before{ content:""; position:absolute; inset:-8px; } .tab i{ width:8px; height:8px; border-radius:2px; } .tab:hover{ background:none; color:var(--ink); } .tab.active{ background:none; color:var(--ink); box-shadow:inset 0 -2px 0 0 var(--flash); } /* =========================================================== THE HERO — the argument leads The claim carries the fold. The name steps down to a label because the dock and the opener already say whose page this is. The figures live inside the sentence rather than standing in a metric row, so each arrives with its scope attached. Flat, unboxed, no pill: the same language the archive speaks below. =========================================================== */ .hero-main{ gap:0; } .hero h1.hero-name{ font-size:clamp(1.16rem,1.5vw,1.34rem); font-weight:700; letter-spacing:-.006em; line-height:1.25; margin-left:0; } .hero .role{ margin-top:6px; } .claim{ margin-top:clamp(26px,3.4vw,38px); font-size:clamp(2rem,4.05vw,3.05rem); font-weight:700; line-height:1.1; letter-spacing:-.034em; color:var(--ink); max-width:18ch; text-wrap:balance; } /* the palette lands on the numeral, not behind it */ .claim .q{ color:var(--flash); } .claim-lede{ margin-top:clamp(18px,2vw,24px); font-size:1.1rem; line-height:1.56; color:var(--ink-soft); max-width:var(--measure); } /* the actions lose the pill: the rule under the word is the affordance */ .hero-actions{ margin-top:clamp(26px,3vw,36px); gap:28px; align-items:center; } .act{ position:relative; display:inline-flex; align-items:center; gap:10px; padding:7px 0 10px; border:0; background:none; cursor:pointer; font-family:inherit; font-size:1rem; font-weight:700; letter-spacing:-.006em; color:var(--ink); text-decoration:none; } .act::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ink-faint); transition:background .22s var(--ease); } .act-lead::after{ height:3px; background:var(--flash); } .act:hover::after{ background:var(--flash-deep); } .act-arr{ width:22px; height:12px; flex:none; overflow:visible; transition:transform .3s var(--ease); } .act-arr path{ stroke:var(--flash); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; } .act:hover .act-arr{ transform:translateX(5px); } /* the portrait keeps the bend and loses the shadow: flat, like the tiles */ .portrait{ box-shadow:none; } @media (min-width:900px){ .hero-grid{ grid-template-columns:1.6fr .76fr; gap:58px; align-items:start; min-height:0; } .hero-main{ justify-content:flex-start; gap:0; padding-bottom:0; } .portrait{ max-width:330px; height:auto; aspect-ratio:3/4; align-self:start; } .portrait img{ object-position:50% 18%; } .hero-more{ margin-top:clamp(64px,7vw,92px); } } @media (max-width:899px){ .claim{ max-width:none; } } /* LAST in the file on purpose: a short laptop must still clear the dock, and these need to outrank the hero sizes above. */ @media (min-width:900px) and (max-height:860px){ .portrait{ max-width:288px; } .hero-more{ margin-top:64px; } } /* =========================================================== THE WRITING INDEX An essay index: hairline rows, the title carrying the row, the metadata held right and set in tabular figures. The reference this follows reaches for a serif and a mono column; here that would be a costume, so the whole thing stays in Plus Jakarta and lets scale, weight and the rules do the work. The latest piece is marked in the metadata column, never with a label above its title. =========================================================== */ .widx{ border-top:1px solid var(--line-strong); } .widx-row{ display:grid; grid-template-columns:1fr auto; gap:8px 34px; align-items:start; padding:24px 0 22px; border-bottom:1px solid var(--line-strong); color:inherit; text-decoration:none; } .widx-main{ display:grid; gap:7px; min-width:0; } .widx-t{ font-size:clamp(1.28rem,2.3vw,1.68rem); font-weight:650; letter-spacing:-.022em; line-height:1.2; color:var(--ink); transition:color .2s var(--ease); } .widx-d{ font-size:var(--fs-prose); line-height:1.5; color:var(--ink-soft); max-width:var(--measure); } .widx-meta{ display:flex; align-items:baseline; gap:22px; font-size:var(--fs-micro); font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap; } @media (min-width:641px){ .widx-meta{ justify-content:flex-end; padding-top:6px; } } @media (max-width:640px){ .widx-row{ grid-template-columns:1fr; gap:11px; } .widx-meta{ gap:18px; } } /* the newest dated piece leads on size alone, one step under the section's h2 */ .widx-row--lead{ padding:30px 0 28px; } .widx-row--lead .widx-t{ font-size:clamp(1.6rem,2.6vw,2rem); font-weight:700; letter-spacing:-.03em; } a.widx-row:hover .widx-t{ color:var(--flash-deep); } .widx-go{ width:15px; height:15px; flex:none; align-self:center; overflow:visible; opacity:0; transform:translateX(-4px); transition:opacity .22s var(--ease), transform .22s var(--ease); } .widx-go path{ stroke:var(--flash-deep); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; } a.widx-row:hover .widx-go, a.widx-row:focus-visible .widx-go{ opacity:1; transform:translateX(0); } /* a piece whose page is not up yet is a row, not a dead link */ /* an unpublished piece is still a position, not a disabled link: the title keeps full ink, and the missing arrow and hover already say it does not open */ .widx-more{ display:inline-flex; align-items:center; gap:10px; margin-top:26px; font-weight:700; font-size:1rem; color:var(--ink); text-decoration:none; padding-bottom:4px; box-shadow:inset 0 -2px 0 0 var(--flash); transition:box-shadow .2s var(--ease); } .widx-more:hover{ box-shadow:inset 0 -3px 0 0 var(--flash-deep); } .widx-more svg{ width:16px; height:12px; overflow:visible; } .widx-more path{ stroke:var(--flash); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; } /* ---- the writing page uses the site's own shell; it needs only a page-level heading at the same scale as a lead section heading ---- */ .sec-head--lead h1{ font-size:clamp(2.45rem,6.6vw,4.8rem); line-height:1; letter-spacing:-.034em; } /* the dock floats above everything and is always on screen, so the last block on the page has to clear it — otherwise the footer reads from behind the bar. Applies to every page that carries the dock. */ footer{ padding-bottom:132px; } /* ---------- light text on a dark ground needs compensating ---------- The leading that reads correctly as ink on paper reads tighter in reverse, because light glyphs bloom against a dark field. A little more leading and a touch of tracking — not a different scale. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body{ line-height:1.68; letter-spacing:.004em; } :root:not([data-theme="light"]) .lede, :root:not([data-theme="light"]) .sec-lede{ letter-spacing:.005em; } } :root[data-theme="dark"] body{ line-height:1.68; letter-spacing:.004em; } :root[data-theme="dark"] .lede, :root[data-theme="dark"] .sec-lede{ letter-spacing:.005em; } /* ---------- the discipline mark is a non-text indicator ---------- WCAG 1.4.11 asks 3:1 against its ground. Two of the eight theme x discipline pairs missed it: gold on paper at 1.93:1, and the print wine on dark paper at 2.63:1. Only the small indicators take the corrected value — the large colour fields (.spine) keep the display colour, where contrast is not the requirement. */ .tab i, .arc .meta::before{ background:var(--mark, var(--field)); } [data-field="gold"]{ --mark:#9C7420; } /* 3.90:1 on paper, was 1.93:1 */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) [data-field="gold"]{ --mark:var(--beak-lift); } /* 8.79:1 */ :root:not([data-theme="light"]) [data-field="deep"]{ --mark:#B4548A; } /* 4.03:1, was 2.63:1 */ } :root[data-theme="dark"] [data-field="gold"]{ --mark:var(--beak-lift); } :root[data-theme="dark"] [data-field="deep"]{ --mark:#B4548A; } /* =========================================================== WORK, AND THE VIDEO BAND Built from what exists: the case studies reuse the writing index row (.widx), the grid keeps its filters, and the video block takes the chip radius token. Spacing reuses values already in this file. =========================================================== */ .cases{ margin-bottom:44px; } .cases .beat-h{ margin-bottom:16px; } /* a case whose page is not built yet offers access instead of a 404 */ /* ---- VideoBlock: 16:9, full width of the column the grid used to fill ---- */ .vblock-fig{ margin:0; display:grid; gap:12px; } .vblock-frame{ position:relative; aspect-ratio:16/9; width:100%; border-radius:var(--r-chip); overflow:hidden; background:var(--blush); } .vblock-frame video{ display:block; width:100%; height:100%; object-fit:cover; } .vblock-btn{ position:absolute; left:16px; bottom:16px; width:44px; height:44px; padding:0; border:0; cursor:pointer; display:grid; place-items:center; border-radius:var(--r-chip); background:var(--shell); color:var(--ink); transition:background .2s var(--ease), color .2s var(--ease); } .vblock-btn svg{ width:18px; height:18px; fill:currentColor; } .vblock-btn:hover{ background:var(--ink); color:var(--shell); } .vblock-snd{ left:68px; } /* beside play: 16px + 44px + 8px */ .vblock-cap{ font-size:var(--fs-fine); color:var(--ink-faint); } /* =========================================================== HOME / WORK / ABOUT StatRow reuses the scoreboard's figure styling, Timeline the .tl-row styling, Bookshelf the .widx row. What follows is layout glue only, using spacing values already present in this file. =========================================================== */ /* two across on phones, as the scoreboard always was; one row from 760px */ @media (min-width:760px){ .score-grid.statrow{ grid-template-columns:repeat(4,1fr); } } .reel-cta{ margin-top:26px; } .band .hero-more{ margin-top:0; padding-bottom:0; } .grid-head{ margin-bottom:16px; } .tl-sector{ color:var(--ink-faint); margin:2px 0 4px; } .about-intro .sec-head{ margin-bottom:0; } button.widx-more{ background:none; border:0; cursor:pointer; font-family:inherit; } /* ---------- the hero without its photo ---------- One column, so no empty track is reserved where the portrait stood. The claim takes the width the photo used — two balanced lines instead of three hugging the left — while the lede and note keep their reading measure. Every other value is the previous hero's. */ .hero-grid--solo{ grid-template-columns:1fr; } .hero-grid--solo .claim{ max-width:26ch; } /* =========================================================== PROJECTS: the card link, the modal, and the content they share Built from what exists: .act for previous/next, .theme-btn for close, .vblock-frame for embeds, .cm for the teaser. No new colours — the scrim mixes the ink token; radii and spacing reuse this file's values. =========================================================== */ /* the card stays exactly as it was; its title link stretches over it */ .arc{ position:relative; } .arc-open{ color:inherit; text-decoration:none; } .arc-open::after{ content:""; position:absolute; inset:0; border-radius:3px; } .arc-open:focus-visible{ outline:none; } .arc-open:focus-visible::after{ outline:2px solid var(--flash); outline-offset:4px; } /* ---- modal ---- */ .pm-backdrop{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:22px; background:color-mix(in srgb, var(--ink) 62%, transparent); } .pm-backdrop[hidden]{ display:none; } .pm{ width:min(1040px,100%); max-height:100%; display:flex; flex-direction:column; background:var(--paper); border-radius:var(--r-chip); overflow:hidden; outline:none; } .pm-bar{ flex:none; display:flex; align-items:center; gap:22px; padding:12px 22px; border-bottom:1px solid var(--line); } .pm-bar .pm-close{ margin-left:auto; } .pm-bar .act[disabled]{ opacity:.35; cursor:default; } .pm-bar .act[disabled]::after{ background:var(--line); } .pm-scroll{ overflow:auto; overscroll-behavior:contain; padding:26px 22px 44px; } @media (min-width:760px){ .pm-scroll{ padding:40px 52px 52px; } } /* below 768px it becomes a full-screen sheet */ @media (max-width:767px){ .pm-backdrop{ padding:0; } .pm{ width:100%; height:100%; max-height:none; border-radius:0; } .pm-bar{ gap:16px; padding:10px 16px; } } @media (prefers-reduced-motion:no-preference){ .pm.pm-animate{ animation:pmIn .24s var(--ease) both; } } @keyframes pmIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } /* ---- the content component (modal and full page) ---- */ .pc-title{ letter-spacing:-.028em; line-height:1.06; } .pc-page .pc-title{ font-size:clamp(2.45rem,6.6vw,4.8rem); line-height:1; letter-spacing:-.034em; } .pc-tags{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:var(--fs-micro); font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); } .pc-teaser{ margin-top:26px; } .pc-body{ margin-top:26px; display:grid; gap:12px; max-width:var(--measure); } .pc-body .beat-h{ margin-top:12px; } .pc-assets{ margin-top:34px; display:grid; gap:34px; } .pc-fig{ margin:0; display:grid; gap:12px; } .pc-cap{ color:var(--ink-soft); } .pc-img{ display:block; width:100%; height:auto; border-radius:3px; background:var(--blush); } .pc-embed iframe{ display:block; width:100%; height:100%; border:0; } .pc-gate{ margin-top:26px; display:grid; gap:12px; justify-items:start; } .pc-crumb{ margin-bottom:26px; } .pc-pager{ margin-top:44px; border-bottom:0; border-top:1px solid var(--line); padding:22px 0 0; } /* =========================================================== LAYOUT PASS A size ladder that opens and closes on the page's two lead lines, and a rhythm with real contrast: tight where sections pair into one argument, generous where the argument changes. Values reuse this file's. =========================================================== */ /* section headings step down so the hero claim leads the first screen and the contact line closes the page; .sec-head--lead keeps the lead scale */ h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); letter-spacing:-.024em; } /* the hero ends on its buttons; they need a floor under them */ .hero{ padding-bottom:60px; } /* hero and "What moved" are one argument: pair them tightly */ #stats{ padding-top:60px; } /* the About teaser is a pointer, not a chapter */ #about-teaser{ padding-block:60px; } /* nothing reached by an anchor or by Tab may land under the dock */ html{ scroll-padding-bottom:96px; } /* the dock bar wears the chip class but not its punched hole */ .dock-bar::after{ display:none; } /* the sector list now introduces the reel it names */ /* ---- Work: gated case studies read as present, not missing ---- */ .cases{ margin-bottom:0; } /* the whole row is the request target, not a 19px caps link */ #caseList .widx-row{ position:relative; } /* three across at tablet width instead of dropping to two; even columns on phones */ @media (min-width:600px) and (max-width:1099px){ .archive{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:520px){ .archive{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ---- projects: a captioned set reads as a set ---- */ @media (min-width:760px){ .pc-fig--set{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; } .pc-fig--set > figcaption, .pc-fig--set > img:first-of-type, .pc-fig--set > img:last-of-type:nth-of-type(even){ grid-column:1 / -1; } } .pm-bar .act, .pc-pager .act{ min-height:44px; } /* the teaser keeps the definition-list structure, not the box */ .pc-teaser{ background:none; padding:0; } /* ---------- the shelf, restocked ---------- Seventeen real titles, shelved in three groups whose colour is the group: flash leads, teal finds out, gold decides. Spines are tabs, so the selected state reads aria-selected. The scrolling shelf clips anything that rises above it, hence the headroom; long titles fold into a second line down the spine instead of being cut; and the clip-path that cuts the chamfer also hides an outline, so keyboard focus is marked on the title. 54px + 8px lets all seventeen stand in the 1076px column. Dark mode keeps the light theme's saturated spine fields: the pastel dark tokens made the shelf the loudest shape on the page. The small marks (key, card) take the corrected --mark values, since a 7px square has to clear 3:1 where a 54px spine does not. */ .positions-source, .bookshelf{ --tone-flash:#C9315A; --tone-teal:#356E74; --tone-gold:#DBAB57; --on-tone-flash:#FFF6F3; --on-tone-teal:#FFF6F3; --on-tone-gold:#241A1E; --mark-flash:var(--tone-flash); --mark-teal:var(--tone-teal); --mark-gold:#9C7420; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .positions-source, :root:not([data-theme="light"]) .bookshelf{ --mark-flash:var(--flash); --mark-teal:var(--spine-teal); --mark-gold:var(--beak-lift); --shelf:var(--ink-faint); } } :root[data-theme="dark"] .positions-source, :root[data-theme="dark"] .bookshelf{ --mark-flash:var(--flash); --mark-teal:var(--spine-teal); --mark-gold:var(--beak-lift); --shelf:var(--ink-faint); } .shelf{ gap:8px; padding-top:22px; } .spine{ width:54px; height:auto; min-height:var(--sh,210px); padding-top:12px; } .shelf li .spine[data-tone="flash"]{ --field:var(--tone-flash); --on-spine:var(--on-tone-flash); } .shelf li .spine[data-tone="teal"]{ --field:var(--tone-teal); --on-spine:var(--on-tone-teal); } .shelf li .spine[data-tone="gold"]{ --field:var(--tone-gold); --on-spine:var(--on-tone-gold); } .spine .st{ font-size:var(--fs-fine); white-space:normal; text-wrap:balance; max-height:190px; overflow:visible; text-orientation:sideways; /* keeps the curly apostrophe lying with the text */ } /* hover and focus lean out half as far as a pulled book, so the pulled one stays unmistakable; no tilt, and no hover at all on touch, where it stuck */ .spine:hover, .spine:focus-visible{ transform:none; } @media (hover:hover){ .spine:hover{ transform:translateY(-8px); } } .spine:focus-visible{ outline:none; transform:translateY(-8px); } .spine:focus-visible .st{ text-decoration:underline 2px; text-underline-offset:5px; } .shelf li .spine[aria-selected="true"]{ transform:translateY(-16px); } @media (prefers-reduced-motion: reduce){ .shelf li .spine:not([aria-selected="true"]){ transform:none; } } /* the key: the same 7px mark the archive uses for a discipline */ .shelf-key{ display:flex; flex-wrap:wrap; gap:6px 22px; margin:0 0 4px; font-size:var(--fs-fine); color:var(--ink-soft); } .shelf-key li, .bk-group{ display:inline-flex; align-items:center; gap:8px; } .shelf-key i, .bk-group i{ width:7px; height:7px; border-radius:2px; flex:none; background:var(--mark-flash); } .shelf-key i[data-tone="teal"], .bk-group i[data-tone="teal"]{ background:var(--mark-teal); } .shelf-key i[data-tone="gold"], .bk-group i[data-tone="gold"]{ background:var(--mark-gold); } /* the card: title, then who wrote it, then what it changed — her line is the reason the section exists, so it reads at prose size in full ink */ .book-read{ --field:var(--line-strong); } .book-read[data-tone="flash"]{ --field:var(--tone-flash); } .book-read[data-tone="teal"]{ --field:var(--tone-teal); } .book-read[data-tone="gold"]{ --field:var(--tone-gold); } .book-read .sw-field{ position:relative; overflow:hidden; transition:background-color .2s var(--ease); } .bk-run{ position:absolute; inset:0; background:var(--tone-flash); } .bk-run[data-tone="teal"]{ background:var(--tone-teal); } .bk-run[data-tone="gold"]{ background:var(--tone-gold); } .book-read .sw-strip{ gap:0; } .book-read .bt{ font-size:1.32rem; font-weight:700; letter-spacing:-.008em; line-height:1.25; color:var(--ink); } .book-read .ba{ display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:6px; font-size:var(--fs-fine); color:var(--ink-soft); } .book-read .bw{ margin-top:14px; font-size:var(--fs-prose); line-height:1.55; color:var(--ink); } .book-read:focus-visible{ outline-offset:4px; } /* ---------- polish ---------- The footer's site link was a 17px-tall target; the padding brings it to 25px and the negative margin keeps the footer's line where it was. */ footer a{ display:inline-block; padding-block:4px; margin-block:-4px; } /* ---------- ABOUT: the leadership profile ---------- The intro is the thesis beside the portrait, then the story under it in the left column. On a wide screen the portrait holds its place while the story scrolls past it; on a phone it sits between the thesis and the story at a size that leaves the thesis above the fold. */ .about-thesis{ margin-top:22px; max-width:30ch; color:var(--ink); font-size:clamp(1.3rem,2.3vw,1.7rem); font-weight:600; line-height:1.3; letter-spacing:-.018em; } .about-story{ display:grid; gap:16px; max-width:var(--measure); } .about-story p{ font-size:var(--fs-prose); line-height:1.6; color:var(--ink-soft); } @media (min-width:900px){ .about-intro{ grid-template-columns:1.6fr .76fr; row-gap:36px; } .about-intro .hero-main{ grid-column:1; grid-row:1; } .about-intro .about-story{ grid-column:1; grid-row:2; } .about-intro .portrait{ grid-column:2; grid-row:1 / span 2; position:sticky; top:40px; } } @media (max-width:899px){ .about-intro .portrait{ max-width:240px; } } /* what she builds: four peers, two by two under one hairline each (four across would squeeze each to ~24ch), no numbers because they run at the same time, not in sequence */ .build-list{ display:grid; gap:30px 40px; grid-template-columns:minmax(0,1fr); } @media (min-width:760px){ .build-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 56px; } } .build-list li{ border-top:1px solid var(--line); padding-top:18px; display:grid; gap:8px; align-content:start; } .build-list p{ font-size:var(--fs-prose); line-height:1.55; color:var(--ink-soft); } .build-after{ display:grid; gap:16px; max-width:var(--measure); margin-top:44px; } .build-after p{ font-size:var(--fs-prose); line-height:1.6; color:var(--ink-soft); } /* experience: the intro keeps the story's prose, and a role now carries several paragraphs, so its body gets the same paragraph rhythm */ #experience .sec-head{ margin-bottom:20px; } .exp-intro{ margin-bottom:44px; } .tl-body{ display:grid; gap:12px; align-content:start; } .tl-body p{ line-height:1.6; } .tl-body .tl-sector{ margin-bottom:0; } /* wide: the year and role hold their place while a long chapter scrolls */ @media (min-width:1040px){ .tl-when, .tl-what h3{ position:sticky; top:40px; } } /* ---------- THINKING ---------- The writing and the shelf left About for their own page. About keeps one line pointing at it, set as the section's closing lede; the dock and every footer carry it too. The shelf's tone variables now also scope to .bookshelf, the standalone section. */ #experience .bridge{ margin-top:44px; } .foot-links{ display:flex; flex-wrap:wrap; gap:6px 22px; } /* Thinking opens straight into its first section: the intro and Positions share one ground, separated by space rather than a band */ .thinking-intro{ margin-bottom:clamp(56px,7vw,88px); } /* ---------- the dock with four destinations ---------- Work, About, Thinking and Contact need about 440px at the desktop padding. On a phone the links tighten and the text steps down a notch; the logo stays whole (it is only 32px wide), and all four links still stand at 360px. Targets stay 40px tall and at least 50px wide. */ @media (max-width:480px){ .dock{ padding-inline:10px; } .dock-row{ padding:6px; gap:0; } .dock-brand{ padding:9px 9px 9px 6px; margin-right:3px; } .dock-link{ padding:10px 8px; font-size:.84rem; } .dock .theme-btn{ margin-left:2px; } } /* the oldest 320px phones: one more notch, still 36px targets */ @media (max-width:350px){ .dock{ padding-inline:6px; } .dock-row{ padding:5px; } .dock-brand{ padding:9px 4px 9px 3px; margin-right:0; } .dock-logo{ height:20px; } .dock-link{ padding:10px 6px; font-size:.8rem; } .dock .theme-btn{ width:36px; height:36px; } } /* =========================================================== WRITING AND CASES IN MARKDOWN md.js renders posts (/writing/) and case studies (/work/) from Markdown. Text keeps the reading measure; figures and the image sets take the full column. A draft shows its gaps as flamingo tags so nothing unfinished can be mistaken for copy. =========================================================== */ .md, .md-sec{ display:grid; gap:18px; grid-template-columns:minmax(0, 1fr); } /* one track that no wide child can stretch */ :is(.md, .md-sec) > :not(.pc-assets):not(.md-fig):not(.car):not(.md-sec):not(.md-decision):not(.md-pair):not(.md-strip):not(.md-wide){ max-width:var(--measure); } .md p, .md li{ font-size:var(--fs-prose); line-height:1.7; color:var(--ink); } .md strong{ font-weight:650; color:var(--ink); } .md a{ color:var(--flash-deep); text-underline-offset:3px; } .md-h1{ margin-top:30px; font-size:1.5rem; font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--ink); } .md-h2{ margin-top:14px; font-size:1.2rem; font-weight:700; letter-spacing:-.01em; line-height:1.25; color:var(--ink); } .md-h3{ font-size:var(--fs-prose); font-weight:700; color:var(--ink); } .md-list{ display:grid; gap:10px; } .md-list li{ position:relative; padding-left:22px; } .md-list li::before{ content:""; position:absolute; left:0; top:.66em; width:7px; height:7px; border-radius:2px; background:var(--flash); } .md-list--num{ counter-reset:md; } .md-list--num li{ counter-increment:md; } .md-list--num li::before{ content:counter(md); top:0; width:auto; height:auto; background:none; color:var(--flash-deep); font-weight:650; font-variant-numeric:tabular-nums; } .md-pull{ margin:12px 0; } .md-pull p{ font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:600; line-height:1.3; letter-spacing:-.018em; color:var(--flash-deep); max-width:30ch; } .md-fig{ margin:12px 0; } .md-cap{ font-size:var(--fs-fine); color:var(--ink-soft); } .md-gap{ background:var(--blush); color:var(--flash-deep); font-weight:600; font-size:.92em; border-radius:3px; padding:.08em .38em; -webkit-box-decoration-break:clone; box-decoration-break:clone; } .post-draft{ color:var(--flash-deep); font-weight:650; } /* the post: title, dek, meta, then the argument at reading measure */ .post-title{ font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.04; letter-spacing:-.03em; font-weight:800; max-width:20ch; text-wrap:balance; } .post-dek{ margin-top:18px; max-width:var(--measure); color:var(--ink-soft); font-size:clamp(1.15rem,1.8vw,1.35rem); line-height:1.4; } .post-meta{ margin-top:22px; display:flex; flex-wrap:wrap; gap:6px 20px; font-size:var(--fs-fine); color:var(--ink-faint); font-variant-numeric:tabular-nums; } .post-body{ margin-top:52px; } .post-more{ margin-top:88px; } .post-more .beat-h{ margin-bottom:18px; } /* the case: hook, descriptor, four facts, the TL;DR, then the story */ .pc-descriptor{ margin-top:16px; max-width:var(--measure); color:var(--ink-soft); font-size:clamp(1.15rem,1.8vw,1.35rem); line-height:1.4; } .pc-facts{ margin-top:30px; padding:18px 0; gap:16px 32px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-block:1px solid var(--line); } .pc-summary{ margin-top:30px; max-width:var(--measure); color:var(--ink); font-size:clamp(1.12rem,1.6vw,1.28rem); line-height:1.55; font-weight:500; } .pc-case .pc-body{ margin-top:44px; max-width:none; gap:18px; } .pc-case .pc-title{ max-width:22ch; text-wrap:balance; } /* ---------- the carousel (carousel.js) ---------- One image at a time in a fixed frame, so nothing below jumps. The set names are the caption and the jump links; the flamingo line under the frame is the timer, and it stops when the carousel does. */ .car{ display:grid; max-width:min(var(--car-maxw,100%), calc(72svh * var(--car-ratio,1.3333))); } .car-frame{ aspect-ratio:var(--car-ratio,1.3333); position:relative; overflow:hidden; border-radius:3px; background:var(--blush); touch-action:pan-y; user-select:none; -webkit-user-select:none; } .car-slide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .45s var(--ease); } .car-slide.is-on{ opacity:1; } .car--instant .car-slide{ transition:none; } .car-slide img{ display:block; width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; } .car-progress{ height:2px; background:var(--line); overflow:hidden; } .car-progress span{ display:block; height:100%; background:var(--flash); transform-origin:left center; transform:scaleX(0); } .car-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; margin-top:12px; } .car-sets{ display:flex; flex-wrap:wrap; gap:0 20px; } .car-set{ background:none; border:0; padding:10px 0; cursor:pointer; font-family:inherit; font-size:var(--fs-fine); font-weight:600; color:var(--ink-soft); min-height:40px; transition:color .2s var(--ease), box-shadow .2s var(--ease); } .car-set:hover{ color:var(--ink); } .car-set[aria-current="true"]{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--flash); } .car-ctl{ display:flex; align-items:center; gap:6px; } .car-count{ min-width:3.2em; margin-right:6px; text-align:right; font-size:var(--fs-fine); color:var(--ink-faint); font-variant-numeric:tabular-nums; } .car-btn{ width:40px; height:40px; display:inline-grid; place-items:center; cursor:pointer; background:none; border:1px solid var(--line-strong); border-radius:5px; color:var(--ink); transition:background .2s var(--ease); } .car-btn:hover{ background:var(--blush); } .car-btn svg{ width:16px; height:12px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .car-play svg{ width:14px; height:14px; } .car-play svg path{ fill:none; } .car.is-paused .car-play svg path{ fill:currentColor; stroke-width:1.4; } /* images mid-text: one at its own width, or two or three in a row; a carousel of one set sits in the text the same way */ :is(.md, .md-sec) > .car, :is(.md, .md-sec) > .md-fig{ margin-block:14px; } .md-row{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; } .md-row--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .md-row > .md-cap{ grid-column:1 / -1; } @media (max-width:560px){ .md-row--3{ grid-template-columns:minmax(0,1fr); row-gap:12px; } } /* ---------- full bleed ---------- On a full page (a post or a case study, not the Work window) images in the text leave the column and run edge to edge. --bleed is the viewport without its scrollbar (md.js measures --sbw); captions and the carousel controls stay on the text column's left edge. A carousel becomes a full-width stage: the image sits whole inside it, never cropped. */ /* main is the size container on these pages, so 100cqw is the viewport without its scrollbar, exactly, with nothing to measure or race */ main:has(.pc-page), main:has(.post){ container-type:inline-size; } .pc-page .md, .post .md{ --bleed:100cqw; --col-edge:max(22px, calc((var(--bleed) - 1180px) / 2 + 22px)); } @media (min-width:760px){ .pc-page .md, .post .md{ --col-edge:max(52px, calc((var(--bleed) - 1180px) / 2 + 52px)); } } main:has(.pc-page), main:has(.post){ overflow-x:clip; } .pc-page :is(.md, .md-sec) > .md-fig, .post :is(.md, .md-sec) > .md-fig, .pc-page .md .car-frame, .post .md .car-frame, .pc-page .md .car-progress, .post .md .car-progress{ width:var(--bleed); max-width:none; margin-inline:calc(50% - var(--bleed) / 2); } .pc-page :is(.md, .md-sec) > .md-fig > .md-cap, .post :is(.md, .md-sec) > .md-fig > .md-cap{ padding-inline:var(--col-edge); } .pc-page :is(.md, .md-sec) > .md-fig .pc-img, .post :is(.md, .md-sec) > .md-fig .pc-img{ border-radius:0; } /* a lone image is a stage like the carousel: edge to edge, but never taller than the screen, so it is always seen whole */ .pc-page :is(.md, .md-sec) > .md-fig:not(.md-row) .pc-img, .post :is(.md, .md-sec) > .md-fig:not(.md-row) .pc-img{ max-height:85svh; object-fit:contain; } .pc-page .md .car, .post .md .car{ max-width:none; } .pc-page .md .car-frame, .post .md .car-frame{ aspect-ratio:auto; border-radius:0; height:min(78svh, calc(var(--bleed) / var(--car-ratio, 1.3333))); } /* =========================================================== THE CASE TEMPLATE Built for the ninety-second skim: the outcome with its caveat on the first screen, sections a panel can scan by, decisions in the same Decision -> Reason -> Outcome shape the Method section uses, and a rail that shows where you are and what is left. =========================================================== */ .pc-crumb{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; } .pc-crumb .post-draft{ font-size:var(--fs-fine); } /* the lead: TL;DR, and the headline number beside it */ .pc-case .pc-summary{ margin-top:0; } .pc-lead{ margin-top:30px; display:grid; gap:24px 56px; } @media (min-width:900px){ .pc-lead--outcome{ grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr); align-items:start; } } .pc-outcome{ display:grid; gap:8px; align-content:start; } .pc-outcome-n{ font-size:clamp(2.4rem,4.6vw,3.6rem); font-weight:800; line-height:1; letter-spacing:-.035em; color:var(--ink); font-variant-numeric:tabular-nums; } .pc-outcome-n .md-gap{ font-size:.34em; letter-spacing:0; vertical-align:middle; } .pc-outcome-c{ font-size:var(--fs-fine); color:var(--ink-soft); max-width:36ch; line-height:1.5; } /* sections: a heading a panel can scan by, on a hairline */ .pc-case .md-sec{ scroll-margin-top:28px; } .pc-case .md-sec > .md-h1{ position:relative; margin-top:44px; padding-top:30px; font-size:clamp(1.6rem,2.5vw,2.05rem); letter-spacing:-.024em; line-height:1.12; } .pc-case .md-h1:focus, .pc-case .md-h2:focus{ outline:none; } /* a decision: key on the left, the call, its reason and its outcome */ .md-decision{ display:grid; gap:12px 40px; padding:26px 0 8px; border-top:1px solid var(--line); grid-template-columns:minmax(0,1fr); } .md-sec > .md-h1 + * .md-decision:first-child, .md-sec > .md-h1 + .md-decision{ border-top:0; padding-top:4px; } @media (min-width:960px){ .md-decision{ grid-template-columns:150px minmax(0,1fr); } } .md-dec-key{ display:flex; gap:10px; align-items:baseline; padding-top:6px; } @media (min-width:960px){ .md-dec-key{ display:grid; gap:4px; align-content:start; } } .md-dec-key .cap{ color:var(--flash-deep); } .md-dec-key .code{ font-variant-numeric:tabular-nums; } .md-dec-main{ display:grid; gap:12px; min-width:0; } .md-dec-main > :not(.md-dec-ro){ max-width:var(--measure); } .md-decision .md-h2{ margin-top:0; font-size:1.32rem; scroll-margin-top:28px; } .md-dec-ro{ position:relative; display:grid; gap:18px 40px; margin:8px 0 0; padding-top:16px; } .md-dec-ro::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px); transform-origin:left center; } @media (min-width:700px){ .md-dec-ro{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .md-dec-ro > div{ display:grid; gap:6px; align-content:start; } .md-dec-ro dt{ color:var(--ink-faint); margin:0; } .md-dec-ro dd{ margin:0; font-size:var(--fs-prose); line-height:1.6; color:var(--ink); } /* colour is earned: only evidence takes the accent */ .md-num{ color:var(--flash-deep); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; } .pc-outcome-n .md-num{ color:var(--flash); font-weight:800; } /* the pager names where it leads */ .pc-pg{ gap:12px; } .pc-pg-w{ display:grid; gap:2px; text-align:left; } .pc-pg--next .pc-pg-w{ text-align:right; } .pc-pg-l{ font-size:var(--fs-fine); color:var(--ink-faint); font-weight:600; } .pc-pg-t{ font-weight:650; color:var(--ink); } .pc-pager{ justify-content:space-between; } /* ---------- the reading rail (case.js) ---------- */ .rail{ position:fixed; z-index:40; top:96px; right:max(22px, calc((100vw - var(--sbw, 0px) - 1180px) / 2 + 52px)); width:min(230px, calc((100vw - 1180px) / 2 + 230px)); max-height:calc(100svh - 96px - 120px); overflow:auto; scrollbar-width:none; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; } .rail.is-on:not(.is-covered){ opacity:1; visibility:visible; transform:none; transition-delay:0s; } @media (max-width:1179px){ .rail{ display:none; } } .rail ol{ display:grid; gap:2px; list-style:none; margin:0; padding:0; } .rail-item{ position:relative; display:grid; } .rail-item > a{ display:block; padding:7px 0 9px; text-decoration:none; font-size:var(--fs-fine); font-weight:600; color:var(--ink-faint); transition:color .25s var(--ease); } .rail-item.is-read > a{ color:var(--ink-soft); } .rail-item > a[aria-current="true"]{ color:var(--ink); } .rail-item > a:hover{ color:var(--flash-deep); } .rail-line{ height:2px; background:var(--line); position:relative; overflow:hidden; border-radius:1px; } .rail-line::after{ content:""; position:absolute; inset:0; background:var(--flash); transform-origin:left center; transform:scaleX(var(--p, 0)); } .rail-sub{ margin:6px 0 4px; gap:0 !important; } .rail-sub a{ display:grid; grid-template-columns:24px 1fr; padding:5px 0; text-decoration:none; font-size:var(--fs-fine); line-height:1.35; color:var(--ink-faint); } .rail-sub a:hover{ color:var(--flash-deep); } .rail-n{ color:var(--flash-deep); font-weight:650; font-variant-numeric:tabular-nums; } .rail a:focus-visible{ outline-offset:2px; } /* narrower screens: one line across the top of the screen */ .rail-bar{ position:fixed; z-index:40; top:0; left:0; right:0; height:3px; pointer-events:none; opacity:0; transition:opacity .3s var(--ease); } .rail-bar.is-on{ opacity:1; } .rail-bar span{ display:block; height:100%; background:var(--flash); transform-origin:left center; transform:scaleX(0); } @media (min-width:1180px){ .rail-bar{ display:none; } } /* ---------- inspect mode (inspect.js) ---------- The case's images at their real size, on the deep ground so the work is the only thing lit. The image grows out of its place on the page (View Transitions) and shrinks back into it. */ .md-zoom{ display:block; width:100%; padding:0; margin:0; border:0; background:none; cursor:zoom-in; border-radius:inherit; } .md-zoom:focus-visible{ outline:2px solid var(--flash); outline-offset:-4px; } .md-zoom .pc-img{ width:100%; } .car--inspect .car-frame{ cursor:zoom-in; } .car-full svg{ width:15px; height:15px; } html.insp-open{ overflow:hidden; } .insp{ position:fixed; inset:0; z-index:600; display:grid; grid-template-rows:minmax(0,1fr) auto; background:var(--deep); color:var(--deep-ink); } .insp[hidden]{ display:none; } .insp-stage{ overflow:auto; display:flex; padding:clamp(16px,3vw,40px); overscroll-behavior:contain; } .insp-img{ margin:auto; display:block; width:auto; height:auto; max-width:100%; max-height:100%; cursor:default; } .insp:has(.insp-size:not([hidden])) .insp-img{ cursor:zoom-in; } .insp.is-actual .insp-img{ max-width:none; max-height:none; cursor:grab; } .insp.is-actual .insp-stage{ cursor:grab; } .insp-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; padding:12px clamp(16px,3vw,40px) calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--deep-line); } .insp-cap{ font-size:var(--fs-fine); color:var(--deep-soft); margin:0; } .insp-ctl{ display:flex; align-items:center; gap:6px; } .insp-count{ font-size:var(--fs-fine); color:var(--deep-faint); font-variant-numeric:tabular-nums; margin-right:6px; } .insp-btn{ min-width:40px; height:40px; padding:0 12px; display:inline-grid; place-items:center; cursor:pointer; background:none; border:1px solid var(--deep-line-strong); border-radius:5px; color:var(--deep-ink); font:600 var(--fs-fine)/1 inherit; transition:background .2s var(--ease); } .insp-btn[hidden]{ display:none; } .insp-btn:hover{ background:var(--deep-surface); } .insp-btn:focus-visible{ outline:2px solid var(--flash-lift); outline-offset:2px; } .insp-btn svg{ width:16px; height:12px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .insp-close svg{ width:14px; height:14px; } ::view-transition-group(kc-inspect){ animation-duration:.42s; animation-timing-function:cubic-bezier(.2,.8,.2,1); } @media (prefers-reduced-motion: reduce){ ::view-transition-group(kc-inspect){ animation:none; } } /* phones: the four facts as two by two, and a pager that can wrap */ @media (max-width:699px){ .pc-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; } } .pc-pager{ flex-wrap:wrap; row-gap:12px; } /* a way forward always sits on the right, even when it is the only link */ .pc-pager > .pc-pg--next{ margin-left:auto; } /* ---------- delight: the case rewards the work in it ---------- Writing: the draft counts its gaps and walks you through them, each one found with a single flamingo ring, and says plainly when none are left. Reading: reaching the end fills the last of the rail and lights the way on to the next case, once. Nothing moves with reduced motion; the colour still changes. */ .draft-nav{ background:none; border:0; padding:6px 0; cursor:pointer; font-family:inherit; font-size:var(--fs-fine); font-weight:650; color:var(--flash-deep); text-align:left; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; transition:text-decoration-color .2s var(--ease); } .draft-nav:hover{ text-decoration-color:currentColor; } .draft-nav.is-done{ cursor:default; color:var(--ink); display:inline-flex; align-items:center; gap:8px; } .draft-nav.is-done::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--flash); flex:none; } .md-gap:focus{ outline:2px solid var(--flash); outline-offset:2px; } .md-gap.is-found{ animation:gap-found .9s var(--ease) 1; } @keyframes gap-found{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--flash) 55%, transparent); } 100%{ box-shadow:0 0 0 12px color-mix(in srgb, var(--flash) 0%, transparent); } } .pc-pager.is-earned .pc-pg--next .pc-pg-t{ color:var(--flash-deep); transition:color .6s var(--ease); } .pc-pager.is-earned .pc-pg--next .act-arr{ animation:onward .7s var(--ease) .2s 2; } @keyframes onward{ 0%, 100%{ transform:none; } 50%{ transform:translateX(6px); } } @media (prefers-reduced-motion: reduce){ .md-gap.is-found, .pc-pager.is-earned .pc-pg--next .act-arr{ animation:none; } } /* ---------- scroll motion: lines draw as you read ---------- One language for the whole case, the rail's gesture: the rule over each section draws across as the section arrives; a full-bleed image enters at the column's width and widens to the edges with the scroll, so the work visibly leaves the column; each decision plays Reason, the line, then Outcome, once. Text is never hidden before it arrives, and with reduced motion none of it runs: rules are drawn, images are full width. */ .pc-case .md-sec > .md-h1::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); transform-origin:left center; } @keyframes rule-draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } @keyframes widen{ from{ clip-path:inset(0 var(--col-edge, 0px) 0 var(--col-edge, 0px) round 3px); } to{ clip-path:inset(0 0 0 0 round 0px); } } @keyframes dec-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: no-preference){ /* scrubbed with the scroll where the browser can */ @supports (animation-timeline: view()){ .pc-case .md-sec > .md-h1::before{ animation:rule-draw linear both; animation-timeline:view(); animation-range:entry 30% cover 35%; } .pc-page :is(.md, .md-sec) > .md-fig, .pc-page .md .car-frame{ animation:widen linear both; animation-timeline:view(); animation-range:entry 0% cover 45%; } } /* elsewhere, once, as each arrives (case.js adds the classes) */ .pc-case .md-h1.will-in::before{ transform:scaleX(0); } .pc-case .md-h1.will-in.is-in::before{ animation:rule-draw .7s var(--ease) both; } .pc-page .will-in:is(.md-fig, .car-frame){ clip-path:inset(0 var(--col-edge, 0px) 0 var(--col-edge, 0px) round 3px); } .pc-page .will-in.is-in:is(.md-fig, .car-frame){ animation:widen .9s var(--ease) both; } /* decisions: cause, then effect */ .md-decision.will-play .md-dec-reason, .md-decision.will-play .md-dec-outcome{ opacity:0; } .md-decision.will-play .md-dec-ro::before{ transform:scaleX(0); } .md-decision.is-played .md-dec-reason{ animation:dec-in .32s var(--ease) both; } .md-decision.is-played .md-dec-ro::before{ animation:rule-draw .34s var(--ease) .12s both; } .md-decision.is-played .md-dec-outcome{ animation:dec-in .32s var(--ease) .3s both; } } /* ---------- clarify: the skip link ---------- Content comes before the dock in the page, so the first Tab lands on the work; this lets a keyboard user reach the menu without tabbing through every card. Hidden until it has focus. */ .skip{ position:fixed; z-index:700; top:12px; left:12px; padding:10px 16px; background:var(--ink); color:var(--paper); border-radius:5px; font-weight:650; font-size:var(--fs-fine); text-decoration:none; transform:translateY(-160%); transition:transform .2s var(--ease); } .skip:focus{ transform:none; } .dock:focus{ outline:none; } /* ---------- the hero, typeset (Oct 2026 pass) ---------- The claim is the page's argument, so it is its first heading and its largest type: up to 3.1rem, a clear step above every section heading (38.4px) at every height, now that the short-laptop shrink is gone. Any larger and it takes a third line on a laptop, which pushes the stat row's outcomes behind the dock. The caveat sits directly under the figures it qualifies, in Fine at ink-soft so it reads as judgment rather than a footnote, and the lede follows. "Still designing." stays in the sentence as its close, in the figures' flamingo; on its own line it pushed the stat row's outcomes below the dock on a 900px laptop, and the hero and those outcomes share the first screen by design. */ .hero h2.claim{ font-size:clamp(2rem,4.2vw,3.1rem); font-weight:700; line-height:1.08; letter-spacing:-.034em; margin-top:clamp(26px,3.4vw,38px); } /* "Still designing." takes the figures' flamingo, at their weight */ .claim b{ color:var(--flash); font-weight:inherit; } .claim-lede{ margin-top:clamp(18px,2vw,24px); text-wrap:pretty; } /* both actions reach a 44px target */ .hero-actions .act{ min-height:44px; } /* the hero and the first outcomes share the first screen */ .hero{ padding-bottom:40px; } #stats{ padding-top:40px; } /* phones: the hero gives back space so the first outcome sits closer */ @media (max-width:759px){ .hero{ padding-bottom:40px; } #stats{ padding-top:48px; } /* one phrase per line: balancing splits "designers led" on a phone */ .hero .claim{ text-wrap:wrap; } } /* a link in the hero's lede is an action, so it earns the accent */ .claim-lede a{ color:var(--flash-deep); text-underline-offset:3px; text-decoration-thickness:1px; } .claim-lede a:hover{ text-decoration-thickness:2px; } /* ---------- the stat row on phones ---------- Two columns of 149px: the figures step down to 28px and never wrap, so all four sit on one line at one size, and each figure's value, label and note share rows with its neighbour (subgrid), so labels and notes line up across the pair however the text wraps. Desktop is untouched. */ @media (max-width:759px){ .score-grid.statrow{ row-gap:0; } .score-grid.statrow .sw{ grid-row:span 3; display:grid; grid-template-rows:subgrid; row-gap:0; } .score-grid.statrow .sw-strip{ display:contents; } .score-grid.statrow .n{ font-size:1.75rem; white-space:nowrap; align-self:end; } .score-grid.statrow .l{ margin-top:4px; } .score-grid.statrow .cav{ margin-top:6px; margin-bottom:28px; } } /* =========================================================== THE WORK SECTION'S PASSWORD On the live site Work is sealed (gate.js, sw.js, tools/export.py): until the password is given, the page shows only this. Flat and type-led like the rest: a rule under the field, the Unlock action in the site's own act style. =========================================================== */ .work-locked main > :not(#work-gate){ display:none; } .work-gate{ min-height:calc(100svh - 222px); } .work-gate-in{ max-width:640px; } .work-gate .sec-lede a{ color:var(--flash-deep); } .work-gate-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 28px; margin-top:32px; } .work-gate-form label{ flex-basis:100%; font-size:.92rem; font-weight:650; color:var(--ink-soft); } .work-gate-form input{ flex:1 1 240px; min-width:0; padding:8px 0 9px; border:0; border-radius:0; border-bottom:2px solid var(--ink-faint); background:transparent; font:inherit; font-size:1.1rem; color:var(--ink); transition:border-color .2s var(--ease); } /* focus: the rule turns flamingo and doubles, so it shows by weight, not hue alone */ .work-gate-form input:focus{ outline:none; border-bottom-color:var(--flash); box-shadow:0 2px 0 var(--flash); } .work-gate-form input[aria-invalid="true"]{ border-bottom-color:var(--flash-deep); } .work-gate-form .act{ min-height:44px; } .work-gate-form .act:disabled{ opacity:.55; cursor:default; } .work-gate-msg{ min-height:1.5em; margin-top:16px; font-size:.95rem; color:var(--ink-soft); } .work-gate-msg.is-error{ color:var(--flash-deep); font-weight:600; } /* =========================================================== THE DOCK WITH WORK'S LOCK, ON PHONES The lock costs ~16px. It is paid back from the dock's spacing so all four links and the theme button still stand at 320px. Placed last so it follows the dock's own phone rules. =========================================================== */ @media (max-width:480px){ .dock-link[data-nav="work"]{ gap:4px; } .dock-lock{ width:10px; height:12px; } .dock .dock-link{ padding-inline:7px; } .dock-logo{ height:22px; } .dock-brand{ padding-right:7px; } } @media (max-width:350px){ .dock{ padding-inline:4px; } .dock-row{ padding:4px; } .dock .dock-link{ padding-inline:5px; } .dock-logo{ height:20px; } .dock .theme-btn{ width:34px; height:34px; } } /* =========================================================== PORTRAIT FIGURES AND FILMS IN CASE STUDIES A phone shot (taller than wide, md.js marks it .md-fig--portrait) is shown at its own size, capped at 560px, centred: it never becomes a full-bleed stage, where a 370px capture would be blown up and only its top ever seen. Two or three sit side by side at that size. Films ([[video: N]], .md-film) follow the same rule by their own shape. The widening entrance belongs to the full-bleed stages, so these keep still. =========================================================== */ .pc-page :is(.md, .md-sec) > .md-fig--portrait, .post :is(.md, .md-sec) > .md-fig--portrait{ width:auto; margin-inline:0; display:grid; grid-template-columns:repeat(var(--n, 1), minmax(0, 560px)); justify-content:center; column-gap:clamp(12px, 2vw, 24px); row-gap:12px; } .md-fig--portrait.md-row--2{ --n:2; } .md-fig--portrait.md-row--3{ --n:3; } .pc-page :is(.md, .md-sec) > .md-fig--portrait .pc-img, .post :is(.md, .md-sec) > .md-fig--portrait .pc-img{ width:auto; max-width:100%; height:auto; max-height:none; justify-self:center; } .pc-page :is(.md, .md-sec) > .md-fig--portrait > .md-cap, .post :is(.md, .md-sec) > .md-fig--portrait > .md-cap{ grid-column:1 / -1; padding-inline:0; } /* a film is seen whole: never taller than 85% of the screen, like a lone image */ .md-film .vblock{ width:min(100%, calc(85svh * var(--film-ratio, 1.7778))); justify-self:center; } .md-film .vblock-fig{ gap:0; } /* a bare screen recording ("device": "phone") gets the one device treatment: a thin outline and a phone's corners, no shadow, no notch */ .md-device .vblock-frame{ border:3px solid var(--ink); border-radius:34px; background:var(--shell); } .pc-page .md .md-fig--portrait, .pc-page .md .md-fig--portrait.will-in, .pc-page .md .md-fig--portrait.will-in.is-in{ animation:none; clip-path:none; } /* =========================================================== A PHONE SHOT BESIDE ITS TEXT (case.js pairs) Wide screens: the paragraph that introduces a tall figure, and the text after it, keep the reading measure on the left; the figure stands in the space beside them, up to 380px, and stays in view while its text is read. From 1180px the reading rail owns the right edge, so the pair stops short of it and the figure takes what lies between (about 265px). Phones: the pair dissolves and the figure is back in its place in the text (case.js moves it), exactly as written. Squarish boards of two phones are the proof, not a sidebar: they stay centred and larger (760px). =========================================================== */ .md-pair, .md-pair-text, .md-pair-side{ display:contents; } @media (min-width:1100px){ .md-pair{ display:grid; grid-template-columns:minmax(0, var(--measure)) minmax(0, 380px); column-gap:32px; align-items:start; justify-content:start; } .md-pair-text{ display:grid; gap:18px; min-width:0; } .md-pair-text > *{ max-width:var(--measure); } .md-pair-side{ display:block; position:sticky; top:110px; min-width:0; } .pc-page .md-pair-side > .md-fig{ width:100%; margin:0; display:grid; grid-template-columns:minmax(0, 1fr); row-gap:10px; } .pc-page .md-pair-side > .md-fig .pc-img{ width:100%; max-width:none; max-height:none; } .pc-page .md-pair-side > .md-film .vblock{ width:100%; } .pc-page .md-pair-side > .md-fig > .md-cap{ padding-inline:0; } } @media (min-width:1180px){ .pc-case .md-pair{ padding-right:246px; } /* the rail: 230px and its gap */ .pc-case .md-decision{ max-width:calc(100% - 246px); } } .pc-page :is(.md, .md-sec) > .md-fig--portrait:not(.md-fig--tall), .post :is(.md, .md-sec) > .md-fig--portrait:not(.md-fig--tall){ grid-template-columns:repeat(var(--n, 1), minmax(0, 760px)); } /* =========================================================== EVIDENCE, RANKED (critique of the promo code case, 28 Sep) - One device treatment: a phone capture ("device": "phone") gets a thin outline and a phone's corners; a desktop capture ("browser") a slim bar with three dots above it. No shadow, no gloss, no notch. - An inset figure ("display": "inset") keeps the content width and is never enlarged past its own pixels. - A row of different shapes (.md-row--fit) shares one height, each image as wide as its aspect asks. - In results, ==key== figures alone take the accent, and a bold lead line over a list reads as that group's heading. =========================================================== */ .pc-img--phone{ border:2px solid var(--ink); border-radius:22px; background:var(--shell); } .md-browser{ display:block; min-width:0; border:2px solid var(--ink); border-radius:10px; overflow:hidden; background:var(--shell); } .md-browser-bar{ display:block; height:20px; border-bottom:1px solid var(--line); background: radial-gradient(circle at 12px 50%, var(--ink-faint) 3px, transparent 3.5px), radial-gradient(circle at 24px 50%, var(--ink-faint) 3px, transparent 3.5px), radial-gradient(circle at 36px 50%, var(--ink-faint) 3px, transparent 3.5px); } .md-browser .pc-img{ display:block; width:100%; height:auto; max-height:none; border-radius:0; } .pc-page :is(.md, .md-sec) > .md-fig--inset, .post :is(.md, .md-sec) > .md-fig--inset{ width:auto; margin-inline:0; justify-items:start; } .md-fig--inset .md-browser, .md-fig--inset > .pc-img{ width:100%; max-width:min(100%, var(--natural, 100%)); } .pc-page :is(.md, .md-sec) > .md-fig--inset > .md-cap{ padding-inline:0; } .pc-page :is(.md, .md-sec) > .md-row--fit, .post :is(.md, .md-sec) > .md-row--fit{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; padding-inline:var(--col-edge); } .md-row--fit > .md-fit{ flex:var(--ratio, 1) 1 0; width:0; min-width:0; } .md-fit .pc-img{ display:block; width:100%; height:auto; } .pc-page :is(.md, .md-sec) > .md-row--fit > .md-cap{ flex-basis:100%; padding-inline:0; } .pc-page :is(.md, .md-sec) > .md-row--fit .pc-img{ border-radius:0; max-height:none; } .pc-page :is(.md, .md-sec) > .md-row--fit .pc-img--phone{ border-radius:22px; } .md-num--key{ color:var(--flash-deep); } .md-runin{ margin-top:14px; font-weight:400; } .md-runin > strong:first-child{ display:block; font-size:1.05rem; font-weight:700; letter-spacing:-.01em; } /* phones: the decision's number sits beside its heading, not above it as a label */ @media (max-width:959px){ .md-decision{ grid-template-columns:auto minmax(0,1fr); column-gap:14px; } .md-dec-key{ display:block; padding-top:3px; } .md-dec-key .cap:not(.code){ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } } /* a pair of phones sits as a pair: each column as wide as its phone */ .pc-page :is(.md, .md-sec) > .md-fig--portrait.md-row, .post :is(.md, .md-sec) > .md-fig--portrait.md-row{ grid-template-columns:repeat(var(--n, 2), auto); column-gap:clamp(16px, 3vw, 40px); } /* from 1180px the rail owns the right edge: pairs of phones and inset figures centre in the room left of it instead of running beneath it */ @media (min-width:1180px){ .pc-case .md-sec > .md-fig--portrait:not(.md-fig--tall), .pc-case .md-sec > .md-fig--inset{ padding-right:246px; } } /* phones: a fitted row stacks, and a phone capture keeps a phone's width */ @media (max-width:640px){ .md-row--fit > .md-fit{ flex:1 1 100%; width:auto; } .md-row--fit > .md-fit--tall{ max-width:260px; margin-inline:auto; } } /* =========================================================== SECOND CRITIQUE PASS (promo code case, 28 Sep) =========================================================== */ /* a labelled shot: the label over the picture, read while looking */ .md-shot{ display:grid; gap:8px; justify-items:center; min-width:0; max-width:100%; } .md-shot > *{ max-width:100%; } .md-label{ justify-self:start; font-size:var(--fs-fine); font-weight:700; letter-spacing:.02em; color:var(--ink); } /* evidence pairs fit the screen, so the caption is in view with them */ .pc-page :is(.md, .md-sec) > .md-fig--portrait.md-row .pc-img{ max-height:72svh; width:auto; } /* a pair that is context, not proof, sits smaller */ .pc-page :is(.md, .md-sec) > .md-fig--small .pc-img{ max-height:46svh; } /* the phone outline keeps its corners wherever the figure rules strip them */ .pc-page :is(.md, .md-sec) > .md-fig .pc-img.pc-img--phone, .pc-page .md-pair-side .pc-img.pc-img--phone{ border-radius:22px; } /* phones: pairs of phones stack, each at full column width */ @media (max-width:640px){ .pc-page :is(.md, .md-sec) > .md-fig--portrait.md-row{ grid-template-columns:minmax(0, 1fr); row-gap:18px; } .pc-page :is(.md, .md-sec) > .md-fig--portrait.md-row .pc-img{ max-height:none; width:100%; max-width:var(--natural, 100%); } .pc-page :is(.md, .md-sec) > .md-fig--small .pc-img{ max-width:min(100%, 220px); } } /* the inset keeps still, so its caption is never clipped mid-scroll */ .pc-page .md .md-fig--inset, .pc-page .md .md-fig--inset.will-in, .pc-page .md .md-fig--inset.will-in.is-in{ animation:none; clip-path:none; } /* a film beside short text doesn't outgrow it */ @media (min-width:1100px){ .pc-page .md-pair-side > .md-film .vblock{ width:min(100%, calc(62svh * var(--film-ratio, .56))); margin-inline:auto; } } /* the section heading already says "Decisions": the number is enough */ .md-dec-key .cap:not(.code){ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .md-dec-key .code{ font-size:1.05rem; } /* results: the lead test as a strip of figures */ .md-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap:18px 28px; max-width:calc(var(--measure) + 240px); padding:6px 0 4px; } .md-strip-cell{ display:grid; gap:6px; align-content:start; border-top:2px solid var(--line); padding-top:12px; } .md .md-strip-n{ margin:0; font-size:clamp(1.9rem, 3.4vw, 2.5rem); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; } .md .md-strip-n.is-key{ color:var(--flash-deep); } .md-strip-cell:has(.is-key){ border-top-color:var(--flash); } .md-strip-l{ margin:0; font-size:var(--fs-fine) !important; line-height:1.5 !important; color:var(--ink-soft) !important; } .md-strip-l .md-num{ color:inherit; font-weight:650; } /* results: the rest, folded under its own heading */ .md-more{ border-top:1px solid var(--line); padding-top:14px; max-width:var(--measure); } .md-more-s{ cursor:pointer; list-style:none; display:flex; gap:10px; align-items:baseline; font-size:var(--fs-prose); color:var(--ink); } .md-more-s::-webkit-details-marker{ display:none; } .md-more-s::before{ content:"+"; font-weight:700; color:var(--flash-deep); width:1ch; } .md-more[open] > .md-more-s::before{ content:"−"; } .md-more-s > strong{ font-weight:700; } .md-more-s:focus-visible{ outline:2px solid var(--flash); outline-offset:4px; border-radius:2px; } .md-more[open] > .md-more-s{ margin-bottom:14px; } .md-more > *:not(summary) + *{ margin-top:14px; } /* the line under a results group heading: context, not heading */ .md .md-runin-q{ margin-top:-12px; font-size:var(--fs-fine); color:var(--ink-soft); } /* an inset picture is never drawn past its own pixels, wrapped or not */ .pc-page .md-fig--inset .pc-img{ width:auto; max-width:min(100%, var(--natural, 100%)); max-height:none; } .pc-page .md-fig--inset .md-browser{ width:auto; } .pc-page .md-fig--inset .md-browser .pc-img{ width:100%; max-width:var(--natural, 100%); } /* beside a very wide strip, a phone keeps a phone's width and stands taller */ .md-row--fit > .md-fit--tall{ min-width:clamp(150px, 16%, 240px); } /* =========================================================== CASINO REVIEW, SECOND PASS (28 Sep) =========================================================== */ /* [[versus]]: the win and the flat result, side by side */ .md-versus{ grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .md .md-strip-h{ margin:0; font-size:var(--fs-fine); font-weight:700; color:var(--ink); line-height:1.4; } .md-versus .md-strip-cell{ border-top-color:var(--flash); } /* films in a row keep their own frames */ .md-films .vblock{ width:100%; } .md-films .md-device .vblock-frame{ border:3px solid var(--ink); border-radius:26px; background:var(--shell); } /* phones: a desktop strip beside a phone can't be read at column width, so the phone stands alone there */ @media (max-width:640px){ .md-row--fit:has(> .md-fit--tall) > .md-fit--strip{ display:none; } } /* the dock never covers what keyboard focus scrolls to */ html{ scroll-padding-bottom:120px; } /* a strip film's control sits over the call to action, not the logo */ .md-film--strip .vblock-btn{ left:auto; right:16px; } /* phones: a desktop strip film alone is 65px tall there; the phone film and the control/variant board carry the shipped work instead */ @media (max-width:640px){ .pc-page .md-film--strip{ display:none; } } /* =========================================================== THE VISUAL CASE (layout: visual; blocks.js) A case told in pictures: the opening on a deep band with the cover under it, each section a band of its own (paper, blush, deep), and the pieces the argument needs drawn in the page's own code: a timeline that scrolls sideways, the brief and the brand ideas set on the client's colours, the room's quotes, a route switch, a compare slider, a scoreboard and the palette. Pictures stay in the column. The client's four colours appear only on their own blocks: they are the work. =========================================================== */ .pc-case--visual{ --fi-yellow:#FFCF2E; --fi-blue:#0A1EB3; --fi-plum:#1E1430; --fi-lilac:#B586EE; --fi-mint:#DDF6F4; --fi-ink:#1B1626; --band-y:64px; } @media (max-width:700px){ .pc-case--visual{ --band-y:52px; } } .pc-page .pc-case--visual{ --bleed:100cqw; } .pc-case--visual .pc-body{ display:block; max-width:none; margin-top:0; } /* a band runs edge to edge; its content keeps the column */ .pc-case--visual :is(.pc-hero, .md-sec){ margin-inline:calc((100% - var(--bleed)) / 2); padding-inline:calc((var(--bleed) - 100%) / 2); } .pc-case--visual .pc-cover{ margin:0 calc((100% - var(--bleed)) / 2); } .pc-case--visual .pc-cover img{ display:block; width:100%; height:auto; } .md-kicker, .md .md-kicker{ display:block; margin:0 0 10px; font-size:.75rem; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); } .md-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* the opening */ .pc-case--visual .pc-hero{ background:var(--deep); color:var(--ink); padding-block:72px 44px; } .pc-case--visual .pc-hero .pc-title{ max-width:14ch; margin:12px 0 18px; color:var(--ink); } .pc-case--visual .pc-hero .pc-descriptor{ max-width:var(--measure); margin:0; font-size:1.06rem; line-height:1.6; color:var(--ink-soft); } .pc-case--visual .pc-facts{ margin-top:0; padding-block:30px; border-top:0; } /* sections */ .pc-case--visual .md-sec{ display:block; padding-block:var(--band-y); scroll-margin-top:0; } .pc-case--visual .md-sec:not(.md-band) + .md-sec:not(.md-band){ padding-top:0; } .pc-case--visual .md-sec > *{ margin-block:0; } .pc-case--visual .md-sec > * + *{ margin-top:18px; } .pc-case--visual .md-sec > .md-kicker + .md-h1{ margin-top:10px; } .pc-case--visual .md-sec > .md-h1{ margin-top:0; padding-top:0; margin-bottom:0; } .pc-case--visual .md-sec > .md-h1::before{ display:none; } .pc-case--visual .md-sec > .md-h1 + *{ margin-top:10px; } .pc-case--visual .md-sec > p:not([class]){ font-size:1.06rem; line-height:1.6; color:var(--ink-soft); } .pc-case--visual .md-sec > p:not([class]) + *{ margin-top:28px; } .pc-case--visual .md-sec > .md-h1 + :not(p){ margin-top:28px; } /* pictures stay in the column here, square-cornered, captions under them */ .pc-page .pc-case--visual :is(.md, .md-sec) > .md-fig{ width:auto; margin-inline:0; animation:none; clip-path:none; } .pc-page .pc-case--visual :is(.md, .md-sec) > .md-fig > .md-cap{ padding-inline:0; } .pc-page .pc-case--visual :is(.md, .md-sec) > .md-fig:not(.md-row) .pc-img{ max-height:none; } .pc-case--visual .pc-img{ border-radius:0; background:none; } .pc-case--visual .md-fig{ margin:0; gap:0; } .pc-case--visual .md-cap{ padding-top:10px; font-size:.86rem; color:var(--ink-soft); } .pc-case--visual .md-fig > .md-cap::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:8px; vertical-align:1px; background:var(--flash); } /* a grid of captioned pictures */ .md-grid{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); } @media (min-width:760px){ .md-grid:not(.md-grid--1){ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* a row of one keeps a row's size: half the column, not a stage */ @media (min-width:760px){ .md-grid--1{ grid-template-columns:minmax(0,1fr); max-width:calc(50% - 9px); } } /* "vs" between two things */ .md-vs{ position:relative; } .md-vs::after{ content:"vs" / ""; position:absolute; left:50%; top:50%; transform:translate(-50%,-60%); padding:6px 10px; border-radius:7px; background:var(--flash); color:var(--on-flash); font-size:.86rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; pointer-events:none; } @media (max-width:759px){ .md-vs::after{ display:none; } } /* a row that scrolls sideways, to the screen's edge */ .md-rail{ list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr); gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; /* --col-edge (the column's distance from the screen's edge) rather than a percentage: scroll-padding would read one against the rail itself */ margin-inline:calc(-1 * var(--col-edge)); padding:4px var(--col-edge) 14px; scroll-padding-inline:var(--col-edge); scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; } .md-rail:focus-visible{ outline:2px solid var(--flash); outline-offset:-2px; } .md-rail > li{ scroll-snap-align:start; min-width:0; } .md-rail-item{ margin:0; } .md-rail-item img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; } .md .md-rail-when{ margin:0 0 8px; font-size:.75rem; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--flash-deep); } .pc-case--visual .md-rail-item .md-cap::before{ display:none; } .md-tile{ aspect-ratio:16 / 9; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; font-weight:800; font-size:clamp(1.3rem,2.4vw,2rem); line-height:1; letter-spacing:-.02em; } .md-tile small{ display:block; margin-bottom:10px; font-size:.7rem; font-weight:650; letter-spacing:.09em; text-transform:uppercase; opacity:.78; } .md-tile--lilac small, .md-tile--yellow small{ opacity:1; } /* each block sets its own ink, so the page's text rules read on it */ .md-tile--yellow, .md-panel--yellow{ --ink:var(--fi-ink); background:var(--fi-yellow); } .md-tile--blue, .md-panel--blue{ --ink:#FFFFFF; background:var(--fi-blue); } .md-tile--plum, .md-panel--plum{ --ink:#FFFFFF; background:var(--fi-plum); } .md-tile--lilac, .md-panel--lilac{ --ink:var(--fi-ink); background:var(--fi-lilac); } .md-tile--mint, .md-panel--mint{ --ink:var(--fi-ink); background:var(--fi-mint); } .md-tile, .md-panel{ color:var(--ink); } /* the pages, as phones: a thin dark outline and a phone's corners, nothing else */ .md-rail--phones{ grid-auto-columns:230px; gap:16px; } .md-rail--phones .pc-img{ border:3px solid #111; border-radius:26px; background:#111; } /* text on the client's colours */ .md-panel{ padding:34px; } @media (max-width:560px){ .md-panel{ padding:24px; } } .md .md-panel-k{ margin:0 0 14px; font-size:.7rem; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:color-mix(in srgb, currentColor 80%, transparent); } .md-panel--rule{ border-top:6px solid var(--fi-yellow); } .md .md-panel--rule .md-panel-k{ color:var(--fi-lilac); margin-bottom:18px; } .md-panel--chosen{ outline:3px solid var(--fi-yellow); outline-offset:-3px; } .md-panel-chosen{ color:var(--fi-yellow); } .md .md-panel-h{ margin:0 0 22px; color:var(--ink); font-weight:800; font-size:clamp(2rem,4.6vw,3.6rem); line-height:.98; letter-spacing:-.034em; } .md-panel :is(ol, ul){ list-style:none; margin:0; padding:0; display:grid; gap:12px; } .md .md-panel li{ font-size:1.02rem; line-height:1.45; color:var(--ink); } .md-panel ol{ counter-reset:panel; } .md-panel ol > li{ counter-increment:panel; display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; } .md-panel ol > li::before{ content:counter(panel, decimal-leading-zero); color:var(--fi-yellow); font-weight:800; } .md-panel ul > li strong{ display:block; margin-bottom:2px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb, currentColor 80%, transparent); } .md-duo{ display:grid; gap:18px; } @media (min-width:760px){ .md-duo{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* the room's quotes */ .md-quotes{ display:grid; gap:18px; } @media (min-width:900px){ .md-quotes{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .md-quote{ margin:0; padding-top:14px; border-top:2px solid var(--flash); } .md-quote blockquote{ margin:0; } .md-quote p{ margin:0 0 10px; font-size:1.02rem; line-height:1.5; color:var(--ink); } .md-quote figcaption{ font-size:.82rem; color:var(--ink-faint); } /* text beside the picture it explains */ .md-split{ display:grid; gap:28px; align-items:end; } @media (min-width:900px){ .md-split{ grid-template-columns:5fr 7fr; } } .md-split--inline{ padding-top:28px; border-top:1px solid var(--line); } .pc-case--visual .md-sec > .md-split--inline{ margin-top:40px; } .md-split-text > *{ margin:0; } .md-split-text > .md-kicker + .md-h1{ margin-top:0; } .md-split-text > .md-h1{ padding-top:0; } .md-split-text > .md-h1::before{ display:none; } .md-split-text > .md-h1 + p{ margin-top:10px; } .md-split-text > p{ max-width:var(--measure); font-size:1.06rem; line-height:1.6; color:var(--ink-soft); } /* a pill switch */ .md-switch-pills{ position:relative; display:inline-flex; margin:0 0 22px; padding:4px; border-radius:40px; background:var(--blush); font-size:.86rem; font-weight:650; } .md-switch-pills button{ position:relative; z-index:1; flex:0 0 auto; min-height:44px; padding:10px 22px; border:0; border-radius:40px; background:none; color:var(--ink); font:inherit; cursor:pointer; white-space:nowrap; } .md-switch-pills button[aria-pressed="true"]{ color:var(--on-flash); } .md-switch-pills button:focus-visible{ outline:2px solid var(--flash); outline-offset:3px; } .md-switch-tag{ font-weight:450; } .md-switch-knob{ position:absolute; top:4px; bottom:4px; left:0; width:var(--knob-w, 0); border-radius:40px; background:var(--flash); transform:translateX(var(--knob-x, 4px)); } .md-switch-pills.is-set .md-switch-knob{ transition:transform .35s var(--ease), width .35s var(--ease); } .md-switch-pane[hidden]{ display:none; } /* two pictures under one handle */ .md-compare{ margin:0; } .md-cmp{ position:relative; overflow:hidden; background:var(--blush); } .md-cmp .pc-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; } .md-cmp .md-cmp-top{ clip-path:inset(0 calc(100% - var(--x, 50%)) 0 0); } .md-cmp-bar{ position:absolute; top:0; bottom:0; left:var(--x, 50%); width:2px; margin-left:-1px; background:var(--flash); pointer-events:none; } .md-cmp-knob{ position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; background:var(--flash); box-shadow:0 0 0 3px color-mix(in srgb, var(--on-flash) 70%, transparent); } .md-cmp-knob::before, .md-cmp-knob::after{ content:""; position:absolute; top:50%; width:0; height:0; margin-top:-5px; border-block:5px solid transparent; } .md-cmp-knob::before{ left:9px; border-right:6px solid var(--on-flash); } .md-cmp-knob::after{ right:9px; border-left:6px solid var(--on-flash); } .md-cmp-tag{ position:absolute; top:12px; padding:6px 9px; background:#241A1E; color:#F9F0F2; font-size:.75rem; font-weight:650; letter-spacing:.09em; text-transform:uppercase; pointer-events:none; } .md-cmp-tag--l{ left:12px; } .md-cmp-tag--r{ right:12px; } .md-cmp input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; } .md-cmp:has(input:focus-visible){ outline:2px solid var(--flash); outline-offset:3px; } /* the scoreboard */ .md-score{ list-style:none; margin:0; padding:0; display:grid; gap:14px; } .md-score-row{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; align-items:center; } @media (min-width:760px){ .md-score-row{ grid-template-columns:220px minmax(0,1fr) 190px; gap:18px; } } .md-score-name{ font-weight:700; font-size:.98rem; } .md-score-sub{ display:block; font-size:.82rem; font-weight:400; color:var(--ink-faint); } .md-score-bar{ display:flex; gap:2px; height:26px; font-size:.75rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; } .md-score-bar > span{ display:flex; align-items:center; min-width:24px; padding:0 10px; overflow:hidden; white-space:nowrap; flex-grow:0; flex-shrink:1; } .md-score .is-a, .md-score-legend .is-a{ background:var(--flash); color:var(--on-flash); } .md-score .is-b, .md-score-legend .is-b{ background:var(--water); color:var(--on-water); } .md-score .is-b{ justify-content:flex-end; } .md-score .is-neutral, .md-score-legend .is-neutral{ background:var(--line-strong); color:var(--ink); } .md-score-verdict{ font-size:.86rem; color:var(--ink-soft); } .md .md-score-legend{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:22px 0 0; font-size:.82rem; color:var(--ink-soft); } .md-score-legend i{ display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:-1px; } .pc-case--visual .md-sec > .md-scoreboard + p{ margin-top:34px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink); } /* colour, drawn */ .pc-case--visual .md-sec > .md-swatchset{ margin-top:22px; } .pc-case--visual .md-sec > .md-swatchset + .md-swatchset{ margin-top:34px; } .pc-case--visual .md-sec > .md-swatchset + .md-grid{ margin-top:34px; } .md-swatches{ list-style:none; margin:0; padding:0; display:grid; gap:6px; grid-template-columns:repeat(3,minmax(0,1fr)); } @media (min-width:760px){ .md-swatches{ grid-template-columns:repeat(6,minmax(0,1fr)); } } .md-swatches li{ aspect-ratio:1; padding:10px; display:flex; flex-direction:column; justify-content:flex-end; font-size:.72rem; line-height:1.3; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); } .md-swatches b{ font-weight:700; } .md-swatches code{ font:inherit; font-size:.66rem; } .md-families{ list-style:none; margin:0; padding:0; display:grid; gap:6px; grid-template-columns:repeat(4,minmax(0,1fr)); } .md-fam-tints{ display:grid; gap:4px; } .md-fam-tints > span{ display:block; height:34px; } .md-families b{ display:block; padding-top:6px; font-size:.72rem; font-weight:700; } /* "Nothing." */ .pc-case--visual .md-sec--nothing{ padding-block:96px; } .pc-case--visual .md-sec--nothing > .md-h1{ font-weight:800; font-size:clamp(3.2rem,12vw,9rem); line-height:.95; letter-spacing:-.04em; } .pc-case--visual .md-sec--nothing > .md-h1 + p{ margin-top:22px; } /* what I learned, in columns */ .md-sec--cols ol.md-list{ display:grid; gap:22px; margin-top:22px; padding:0; } @media (min-width:900px){ .md-sec--cols ol.md-list{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .md-sec--cols ol.md-list > li{ display:block; padding:14px 0 0; border-top:1px solid var(--line-strong); line-height:1.55; } .md-sec--cols ol.md-list > li::before{ content:counter(md, decimal-leading-zero); position:static; display:block; margin-bottom:10px; font-size:.75rem; letter-spacing:.09em; } .md-sec--cols ol.md-list > li strong{ display:block; margin-bottom:6px; } @media (prefers-reduced-motion: reduce){ .md-switch-knob{ transition:none; } } /* a draft gap on a deep band keeps its contrast (the band re-points the accent) */ .band--deep .md-gap{ background:var(--surface); color:var(--ink); } /* the facts on the opening band */ .pc-case--visual .pc-hero .pc-facts{ margin-top:34px; padding-block:22px 0; border-top:1px solid var(--line); border-bottom:0; } /* =========================================================== SITE-WIDE PASS (28 Sep, the whole-site review) =========================================================== */ /* short pages keep the footer at the bottom of the screen */ main{ min-height:calc(100svh - 222px); } /* the 404 */ .nf h1{ font-size:clamp(2.45rem,6.6vw,4.8rem); line-height:1; letter-spacing:-.034em; max-width:14ch; } .nf-links{ display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:34px; } /* targets reach 44px where the layout allows it */ .dock-link, .dock .theme-btn{ min-height:44px; } .car-btn, .insp-btn{ min-width:44px; min-height:44px; } .tab{ min-width:44px; min-height:44px; } .md-more-s{ min-height:44px; display:flex; align-items:center; } footer a{ padding-block:12px; margin-block:-12px; } /* phones: a case's headline number comes before its summary, on the first screen */ @media (max-width:899px){ .pc-lead--outcome .pc-outcome{ order:-1; } } /* ---- type hierarchy: the claim is the largest line on each page ---- Home already sets the name small and the claim large; About and Thinking follow it: the page's name at the name's size, its claim at the claim's size. The contact close sits below the claim, not above it. */ .about-intro .sec-head--lead h1, .thinking-intro.sec-head--lead h1{ font-size:clamp(1.16rem,1.5vw,1.34rem); font-weight:700; letter-spacing:-.006em; line-height:1.25; } .about-intro .about-thesis{ margin-top:clamp(18px,2.4vw,28px); max-width:20ch; font-size:clamp(2rem,4.2vw,3.1rem); font-weight:700; line-height:1.08; letter-spacing:-.034em; } .thinking-intro > .sec-lede{ margin-top:clamp(18px,2.4vw,28px); max-width:20ch; color:var(--ink); font-size:clamp(2rem,4.2vw,3.1rem); font-weight:700; line-height:1.08; letter-spacing:-.034em; } #contact .sec-head--lead h2{ font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1.08; } /* the footer's links are icons: LinkedIn and ADPList, each a full 44px target */ .foot-links{ align-items:center; gap:4px; } footer .foot-icon{ display:inline-grid; place-items:center; width:44px; height:44px; margin-block:-12px; padding:0; color:var(--deep-faint); border-radius:8px; transition:color .2s var(--ease); } footer .foot-icon:hover{ color:var(--flash-lift); } footer .foot-icon:focus-visible{ outline:2px solid var(--flash-lift); outline-offset:2px; } footer .foot-icon svg, footer .foot-icon img{ width:20px; height:20px; display:block; } /* ---- About: a role in two lines, a proof line, the rest folded ---- */ .tl-body .tl-sector{ text-transform:none; letter-spacing:0; font-size:.86rem; font-weight:600; } .tl-what p.tl-lead{ color:var(--ink); } .tl-what p.tl-proof{ color:var(--ink-soft); padding-left:14px; border-left:2px solid var(--flash); } .tl-more > summary{ display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; list-style:none; font-size:.92rem; font-weight:650; color:var(--flash-deep); } .tl-more > summary::-webkit-details-marker{ display:none; } .tl-more > summary::after{ content:""; width:7px; height:7px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--ease); } .tl-more[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); } .tl-more[open] > summary{ margin-bottom:8px; } .tl-more > p + p{ margin-top:12px; } .tl-more > summary:focus-visible{ outline:2px solid var(--flash); outline-offset:3px; border-radius:4px; }