/* ---- 00-tokens.css ---- */ /* ============================================================================= LIAISON · liaison.world · edition 3, "Line and Frame" ----------------------------------------------------------------------------- 00 · TOKENS. Every module styles itself from these and nothing else. Mist pages, night panels with the charter as light inside them, one teal that points. Newsreader for display and reading, Hanken Grotesk for the interface and the slate (the technical voice). This stylesheet is assembled by the generator from build/css/*.css, in file order. ============================================================================= */ :root{ /* grounds */ --mist:#F2F4F7; --white:#FFFFFF; --ink:#0E1117; --ink-2:#3B4250; --ink-3:#5B6472; --hair:rgba(14,17,23,.12); --hair-2:rgba(14,17,23,.06); /* night */ --night-0:#161D2C; --night-1:#0D121C; --night-2:#080A11; --on-n:#F2F4F8; --on-n-2:rgba(242,244,248,.74); --on-n-3:rgba(242,244,248,.56); --hair-n:rgba(255,255,255,.10); /* charter, as light only (lint: never outside .lp and the contact arcs) */ --teal:#00C2B8; --violet:#6B3FA0; --rose:#E0357A; /* type */ /* the fallback faces (00a) are metric-matched: a late font swaps without a rewrap */ --serif:'Newsreader','Newsreader Fallback',Georgia,ui-serif,serif; --sans:'Hanken Grotesk','Hanken Grotesk Fallback',Arial,ui-sans-serif,system-ui,sans-serif; /* eases (JS twins in LW.ease) */ --ease-open:cubic-bezier(.16,1,.3,1); --ease-line:cubic-bezier(.45,0,.55,1); --ease-swap:cubic-bezier(.78,0,.22,1); --ease-leave:cubic-bezier(.5,0,.75,0); --ease-quart:cubic-bezier(.25,1,.5,1); /* shapes */ --r-panel:28px; --r-media:16px; --r-frame:14px; --r-ctl:12px; --r-chip:10px; --r-node:2px; --inset:12px; --sh-1:0 1px 2px rgba(14,17,23,.06),0 10px 28px -14px rgba(14,17,23,.20); --sh-2:0 2px 4px rgba(14,17,23,.05),0 28px 64px -28px rgba(14,17,23,.28),0 72px 120px -64px rgba(14,17,23,.26); --sh-panel:0 40px 90px -40px rgba(8,11,20,.55),0 2px 8px rgba(8,11,20,.08); /* grid */ --max:1320px; /* the side gutter never lets content under a notch or a rounded corner in landscape */ --gut:max(clamp(16px,4.4vw,64px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); --gap:24px; --wrap:min(var(--max),calc(100% - var(--gut) * 2)); --sec:clamp(96px,11vh,160px); --hd:64px; --node:7px; } @media(max-width:700px){:root{--hd:56px;--gap:16px;--r-panel:20px;--r-media:14px;--inset:8px;--node:5px}} /* ---- 00a-fonts.css ---- */ /* 00a · FONTS. Self-hosted (OFL), latin and latin-ext only. Newsreader is instanced at optical size 48 with its weight axis kept from 300 to 500 (about 50 KB a file instead of 130); the latin roman files are preloaded. The files carry new names because /assets/fonts is cached immutable for a year. */ @font-face{font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/assets/fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/assets/fonts/hanken-grotesk-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Newsreader'; font-style: italic; font-weight: 300 500; font-display: swap; src: url(/assets/fonts/newsreader-o48-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Newsreader'; font-style: italic; font-weight: 300 500; font-display: swap; src: url(/assets/fonts/newsreader-o48-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/assets/fonts/newsreader-o48-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/assets/fonts/newsreader-o48-normal-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;} /* Metric-matched fallbacks: until the web fonts arrive, Georgia and Arial are drawn at the width and line metrics of Newsreader and Hanken, so the swap does not rewrap a headline or move the panel below it. Widths measured on the site's own copy (the dossiers and the cases), one face per weight band. */ @font-face{font-family:'Newsreader Fallback';font-style:normal;font-weight:100 350;src:local('Georgia');size-adjust:93.97%;ascent-override:78.22%;descent-override:28.20%;line-gap-override:0%} @font-face{font-family:'Newsreader Fallback';font-style:normal;font-weight:351 900;src:local('Georgia');size-adjust:96.95%;ascent-override:75.81%;descent-override:27.33%;line-gap-override:0%} @font-face{font-family:'Newsreader Fallback';font-style:italic;font-weight:100 350;src:local('Georgia Italic'),local('Georgia-Italic');size-adjust:84.43%;ascent-override:87.05%;descent-override:31.39%;line-gap-override:0%} @font-face{font-family:'Newsreader Fallback';font-style:italic;font-weight:351 900;src:local('Georgia Italic'),local('Georgia-Italic');size-adjust:88.03%;ascent-override:83.49%;descent-override:30.10%;line-gap-override:0%} @font-face{font-family:'Hanken Grotesk Fallback';font-style:normal;font-weight:100 550;src:local('Arial'),local('ArialMT');size-adjust:101%;ascent-override:99.01%;descent-override:30%;line-gap-override:0%} @font-face{font-family:'Hanken Grotesk Fallback';font-style:normal;font-weight:551 900;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:94.99%;ascent-override:105.27%;descent-override:31.90%;line-gap-override:0%} /* ---- 01-panel.css ---- */ /* 01 · THE NIGHT LIGHT PANEL (.lp): the brand dark as a gradient with light in it. Never flat, never #000, never full bleed unless a device opens it. Two light elements (inserted by the engine) are moved by transform only: the teal one follows the pointer, the violet one answers at a mirrored offset and drifts slowly while the panel is on screen; on touch the scroll walks them along the diagonal. A lamp travels with the teal light: a soft round window onto a brighter copy of the curved grid, so the light uncovers the panel's structure instead of tinting it. Content sits at z 2. */ .lp{position:relative;isolation:isolate;overflow:clip;color:var(--on-n);border-radius:var(--r-panel);margin-inline:var(--inset); background: radial-gradient(70% 60% at 14% 110%,rgba(107,63,160,.30),transparent 62%), radial-gradient(60% 55% at 88% 115%,rgba(0,194,184,.20),transparent 60%), radial-gradient(40% 40% at 60% 108%,rgba(224,53,122,.12),transparent 60%), linear-gradient(170deg,var(--night-0) 0%,var(--night-1) 55%,var(--night-2) 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),var(--sh-panel)} .lp--top{background: radial-gradient(70% 60% at 14% -10%,rgba(107,63,160,.30),transparent 62%), radial-gradient(60% 55% at 88% -15%,rgba(0,194,184,.20),transparent 60%), radial-gradient(40% 40% at 60% -8%,rgba(224,53,122,.12),transparent 60%), linear-gradient(190deg,var(--night-0) 0%,var(--night-1) 55%,var(--night-2) 100%)} .lp::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;pointer-events:none; background:linear-gradient(90deg,transparent 8%,rgba(255,255,255,.18) 50%,transparent 92%)} .lp::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:url(/assets/img/sys/grain-128.png) repeat,url(/assets/img/sys/grid-curved.svg) center/cover no-repeat} .lp__light{position:absolute;left:0;top:0;z-index:1;pointer-events:none;border-radius:50%;will-change:transform; width:1100px;height:1100px;margin:-550px 0 0 -550px; background:radial-gradient(closest-side,rgba(0,194,184,.30),rgba(0,194,184,.10) 42%,rgba(0,194,184,.03) 62%,transparent 72%)} .lp__light--b{width:900px;height:900px;margin:-450px 0 0 -450px;background:radial-gradient(closest-side,rgba(107,63,160,.24),rgba(107,63,160,.08) 45%,transparent 70%)} /* the violet light's own slow path (the translate property, so the script's transform still places it); it only runs while the panel is on screen */ @keyframes lp-drift{ 0%{translate:0 0} 25%{translate:clamp(40px,7vw,110px) calc(-1 * clamp(24px,4vw,60px))} 50%{translate:clamp(16px,3vw,44px) calc(-1 * clamp(48px,8vw,120px))} 75%{translate:calc(-1 * clamp(32px,6vw,90px)) calc(-1 * clamp(20px,3vw,48px))} 100%{translate:0 0}} html.js-motion .lp__light--b{animation:lp-drift 16s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused} html.js-motion .lp.lp-on .lp__light--b{animation-play-state:running} /* the lamp: a round window that travels with the teal light; inside it the same curved grid, four layers deep (about 22% white instead of 7%), held still against the panel by the opposite move. Each panel rests its lamp on its own spot (06-light.js), so two neighbouring panels never show the same lit patch. */ .lp__lamp{position:absolute;left:0;top:0;z-index:1;pointer-events:none;border-radius:50%;overflow:hidden;will-change:transform; width:var(--lamp,clamp(420px,46vw,680px));aspect-ratio:1; -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.22) 70%,transparent 100%); mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.22) 70%,transparent 100%)} .lp__lamp>i{position:absolute;left:0;top:0;display:block;will-change:transform; background:url(/assets/img/sys/grid-curved.svg) center/cover no-repeat,url(/assets/img/sys/grid-curved.svg) center/cover no-repeat, url(/assets/img/sys/grid-curved.svg) center/cover no-repeat,url(/assets/img/sys/grid-curved.svg) center/cover no-repeat} @media (max-width:700px){.lp__lamp{--lamp:min(92vw,440px)}} .lp>:not(.lp__light,.lp__lamp,.lp__photo){position:relative;z-index:2} .lp--full{margin-inline:0;border-radius:0} /* ---------------------------------------------------------------- moods One night recipe repeated reads as a template, so a panel picks its mood. .lp type panels: the gradient with its violet, teal and rose light. .lp--stage media panels (a walk, films, a portal, a grown frame): flat ink and only the lamp, no coloured blooms, so the work is the light. .lp--lit a real photograph or capture behind the panel, sharp, at about 30%, masked off the text column. Markup: the panel's first child is or . --lp-o photo opacity (default .3; keep 25 to 35%) --lp-pos object-position of the photo (default centre) --lp-mask the mask (default: the right 45% of the panel, reaching 0 at 38% of its width, where the text column ends) --lp-mask-sm / --lp-o-sm the same on phones (default: a band along the panel's foot, gone by 46% of its height) Keep every word at 4.5:1: the mask reaches 0 under text. .lp--dense a panel of paragraphs: on touch the scroll walks its lamp low, and its small text (slate, lab, cap) takes the second night tone. */ .lp--stage{background:#0B0E15} .lp--stage::after{background:url(/assets/img/sys/grain-128.png) repeat} .lp--stage>.lp__light--b{display:none} .lp--stage>.lp__light{opacity:.5} .lp--lit{background:linear-gradient(170deg,var(--night-0) 0%,var(--night-1) 55%,var(--night-2) 100%)} .lp--lit::after{background:url(/assets/img/sys/grain-128.png) repeat} .lp--lit>.lp__light--b{opacity:.5} .lp__photo{position:absolute;inset:0;z-index:0;display:block;margin:0;pointer-events:none;overflow:hidden;border-radius:inherit; -webkit-mask-image:var(--lp-mask,linear-gradient(90deg,transparent 38%,#000 82%)); mask-image:var(--lp-mask,linear-gradient(90deg,transparent 38%,#000 82%))} .lp__photo picture{display:block;width:100%;height:100%} .lp__photo img,img.lp__photo{width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--lp-pos,50% 50%);opacity:var(--lp-o,.3);filter:saturate(.8)} @media (max-width:700px){ .lp__photo{-webkit-mask-image:var(--lp-mask-sm,linear-gradient(0deg,#000 0%,rgba(0,0,0,.4) 24%,transparent 46%)); mask-image:var(--lp-mask-sm,linear-gradient(0deg,#000 0%,rgba(0,0,0,.4) 24%,transparent 46%))} .lp__photo img,img.lp__photo{opacity:var(--lp-o-sm,var(--lp-o,.3))} } /* dense text on touch: where the scroll walks the lamp under paragraphs, it walks low (.lp--dense; the insight panel carries it by default) */ @media (hover:none){ :is(.lp--dense,.ins)>.lp__lamp{opacity:.4} :is(.lp--dense,.ins)>.lp__light{opacity:.45} :is(.lp--dense,.ins)>.lp__light--b{opacity:.5} } .lp.lp--dense :is(.slate,.lab,.cap){color:var(--on-n-2)} /* sheets, cards and bands on light grounds */ .sheet{background:var(--white);border-radius:var(--r-panel);box-shadow:var(--sh-1);margin-inline:var(--inset)} .card{background:var(--white);border-radius:var(--r-media);box-shadow:var(--sh-1),inset 0 0 0 1px var(--hair-2)} /* a mist band: the curved-grid arc it used to carry sat behind lead paragraphs and read as a rendering artefact, so the band keeps its ground and nothing behind text */ .band{position:relative;background:var(--mist)} .band>*{position:relative} /* an inset panel or sheet keeps its content on the page grid: the wrap inside gives back the inset it lost, so a heading in a panel lines up under the logo */ .lp:not(.lp--full) .wrap,.sheet .wrap{width:min(var(--max),calc(100% - (var(--gut) - var(--inset)) * 2))} .lp--full .wrap,.lp .lp .wrap,.lp .sheet .wrap,.sheet .lp .wrap{width:var(--wrap)} /* ---- 02-base.css ---- */ /* 02 · BASE: reset, type scale, grid, sections, the slate voice. */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0;overflow-x:clip} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 24px);background:var(--mist)} body{background:var(--mist);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.55; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal} h1,h2,h3,h4,p,ul,ol,dl,dd,blockquote,figure,figcaption{margin:0;padding:0} ul,ol{list-style:none} img,video,canvas,svg{display:block;max-width:100%} img{height:auto;color:transparent} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;padding:0;cursor:pointer} ::selection{background:var(--ink);color:var(--on-n)} .lp ::selection{background:var(--on-n);color:var(--ink)} :focus-visible{outline:2px solid var(--teal);outline-offset:2px;box-shadow:0 0 0 1px var(--ink);border-radius:4px} .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:fixed;left:12px;top:-60px;z-index:10000;background:var(--ink);color:#fff;padding:10px 14px;font-size:14px;border-radius:8px} .skip:focus{top:12px} main{padding-top:var(--hd)} /* type */ h1,h2,h3,.serif{font-family:var(--serif);font-weight:300;font-optical-sizing:auto;letter-spacing:-.012em;text-wrap:balance;hyphens:none} h1 em,h2 em,h3 em,.serif em{font-style:italic;font-weight:inherit} .d-home{font-size:clamp(46px,7vw,112px);line-height:.98;letter-spacing:-.022em} .d1{font-size:clamp(40px,5.4vw,84px);line-height:1.02;letter-spacing:-.018em} .d2{font-size:clamp(32px,3.6vw,56px);line-height:1.06} .d3{font-size:28px;line-height:1.2;font-weight:400} .lead{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.45;color:var(--ink-2);max-width:34em;text-wrap:pretty} .lp .lead{color:var(--on-n-2)} .body{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:36em;text-wrap:pretty} .lp .body{color:var(--on-n-2)} p{text-wrap:pretty} .lab{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--ink-3)} .lp .lab{color:var(--on-n-3)} .slate{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;line-height:1.4;color:var(--ink-3)} .lp .slate,.on-night .slate{color:var(--on-n-3)} .cap{font-size:14px;line-height:1.45;color:var(--ink-3)} .lp .cap{color:var(--on-n-3)} .num{font-variant-numeric:tabular-nums lining-nums} .kick{display:block;margin-bottom:22px} @media(max-width:700px){.d3{font-size:24px}.lead{font-size:19px}} /* grid and sections */ .wrap{width:var(--wrap);margin-inline:auto} .g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)} .sec{position:relative;padding-block:var(--sec)} .sec--tight{padding-block:clamp(64px,8vh,112px)} .stack-gap>*+*{margin-top:clamp(16px,2vw,24px)} .head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-bottom:clamp(40px,5vw,72px)} .head>:first-child{grid-column:1/8} .head>:last-child:not(:first-child){grid-column:9/13} @media(max-width:900px){ .head{grid-template-columns:1fr} .head>:first-child,.head>:last-child:not(:first-child){grid-column:1/-1} .head>:last-child:not(:first-child){margin-top:20px} } /* a panel section: inset, rounded, padded */ .lp.sec{padding-inline:0} .lp-pad{padding:clamp(40px,6vw,96px) 0} .acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px} @media(max-width:560px){.acts .btn{width:100%}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}} /* ---- 03-openers.css ---- */ /* 03 · OPENERS (M02). The end state is the default; html.js-motion arms the start state only on elements the observer will land. */ /* lines: a line clips up off its own baseline */ .w{display:inline-block;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em;vertical-align:top} .w>i{display:inline-block;font-style:inherit;transition:transform 820ms var(--ease-line) var(--dl,0ms)} html.js-motion [data-in="lines"]:not(.in) .w>i{transform:translate3d(0,105%,0)} [data-in="lines"].out .w>i{transform:translate3d(0,-105%,0);transition:transform 260ms var(--ease-leave)} /* block: a paragraph opens by mask while it rises 24px */ @keyframes lw-block{from{-webkit-mask-size:100% 0%;mask-size:100% 0%;transform:translate3d(0,24px,0)}to{-webkit-mask-size:100% 100%;mask-size:100% 100%;transform:none}} html.js-motion [data-in="block"]:not(.done){-webkit-mask:linear-gradient(#000 0 0) no-repeat 0 100%/100% 0%;mask:linear-gradient(#000 0 0) no-repeat 0 100%/100% 0%} html.js-motion [data-in="block"]:not(.in){transform:translate3d(0,24px,0)} html.js-motion [data-in="block"].in:not(.done){animation:lw-block 760ms var(--ease-open) var(--dl,0ms) 1 both} /* open: a panel or card opens from a slit at its centre. The waiting state is shut to nothing (a 2px slit waiting below the fold read as a stray hairline); the open ease is so fast at its start that the slit still reads as it opens. The observer watches the unclipped wrapper, so the shut child never starves it. */ .op{--r:var(--r-media);border-radius:var(--r);transition:clip-path 1000ms var(--ease-open) var(--dl,0ms)} [data-in="open"]{position:relative} html.js-motion [data-in="open"]:not(.in) .op{clip-path:inset(0 50% 0 50% round var(--r))} html.js-motion [data-in="open"].in .op{clip-path:inset(0 0 0 0 round var(--r))} html.js-motion [data-in="open"][data-op="up"]:not(.in) .op{clip-path:inset(100% 0 0 0 round var(--r))} [data-in="open"][data-op="up"] .op{transition-duration:900ms} /* what a slit would still clip waits for it: 02-openers.js adds .opd once the opening has cleared the block, then every line rises as one, the paragraph opens and the rule draws, each on its own delay */ html.js-motion [data-in="open"]:not(.opd) .op [data-in="lines"] .w>i{transform:translate3d(0,105%,0)} html.js-motion [data-in="open"]:not(.opd) .op [data-in="block"]{animation:none;transform:translate3d(0,24px,0)} html.js-motion [data-in="open"]:not(.opd) .op [data-in="draw"] .rule{transform:scaleX(0)} html.js-motion [data-in="open"]:not(.opd) .op [data-in="draw"] .rule__tick{transform:scaleY(0)} .op__c{transition:transform 1000ms var(--ease-open) var(--dl,0ms)} html.js-motion [data-in="open"]:not(.in) .op__c{transform:translate3d(0,40px,0)} .op__sh{position:absolute;inset:0;border-radius:var(--r,16px);box-shadow:var(--sh-2);transform-origin:center;transition:transform 1000ms var(--ease-open) var(--dl,0ms);pointer-events:none} html.js-motion [data-in="open"]:not(.in) .op__sh{transform:scaleX(0)} /* draw: a hairline draws, then its teal tick lands */ .rule{position:relative;height:1px;background:rgba(14,17,23,.24);transform-origin:left center;transition:transform 700ms var(--ease-open) var(--dl,0ms)} .lp .rule,.on-night .rule{background:rgba(255,255,255,.22)} .rule__tick{position:absolute;right:0;top:-6px;width:2px;height:12px;background:var(--teal);transform-origin:center;transition:transform 400ms var(--ease-open) calc(var(--dl,0ms) + 180ms)} .rule--edge{width:calc(100% + var(--edge-r,0px))} html.js-motion [data-in="draw"]:not(.in) .rule,html.js-motion .rule[data-in="draw"]:not(.in){transform:scaleX(0)} html.js-motion [data-in="draw"]:not(.in) .rule__tick{transform:scaleY(0)} /* diorama: the frame never moves, the picture travels inside it */ .dio{position:relative;overflow:clip;border-radius:var(--r-media);background:#DCE0E7;isolation:isolate} .lp .dio{background:#131926} .dio__p{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;transition:transform 900ms var(--ease-open)} .dio[data-dio="150"] .dio__p{top:-25%;height:150%} html:not(.js-motion) .dio__p{top:0;height:100%} @media(hover:hover){.dio:hover .dio__p,a:hover .dio .dio__p{transform:scale(1.03)}} /* a heading is never painted whole before the splitter has wrapped it */ html.js-motion [data-in="lines"]:not([data-split]){visibility:hidden} /* a button that opens keeps its own radius */ .btn.op{--r:var(--r-ctl)} /* ---- 04-type.css ---- */ /* 04 · TYPE (M03): the untyped part keeps its place, transparent. */ .ty{white-space:pre-wrap} .ty__b{color:transparent} .ty__c{display:inline-block;width:1px;height:.9em;margin:0 -1px -.08em 0;background:var(--teal);vertical-align:baseline;opacity:0} .lp .ty__c{width:1.5px} .ty__c.on{opacity:1;animation:lw-caret 1.06s steps(1) infinite} .ty__c.on.typing{animation:none;opacity:1} .ty__c.gone{display:none} @keyframes lw-caret{0%,50%{opacity:1}50.01%,100%{opacity:0}} html:not(.js-motion) .ty__c{display:none} /* ---- 05-count.css ---- */ /* 05 · COUNTERS (M04). Tabular Hanken 300; the digit columns clip at 1em. A counter set inside a line of text sits on that line's baseline (the columns' own baseline is the digits' baseline), so no module needs to nudge it. */ .ct{position:relative;display:inline-block;font-family:var(--sans);font-weight:300;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em;line-height:1;white-space:nowrap;vertical-align:baseline} .ct__w{display:inline-flex;align-items:flex-start;height:1em;overflow:clip;line-height:1} .ct__d{display:inline-block;height:1em;overflow:clip} .ct__s{display:block;white-space:pre;line-height:1;will-change:transform} .ct__x{display:inline-block} /* from/to: the hairline strikes the old value, then leaves by clip toward its end */ .ct__strike{position:absolute;left:-2%;right:-2%;top:52%;height:1px;background:currentColor;pointer-events:none; transform:scaleX(0);transform-origin:left;clip-path:inset(0 0 0 0);transition:transform 400ms var(--ease-open),clip-path 260ms var(--ease-leave)} .ct--strike .ct__strike{transform:scaleX(1)} .ct--drop .ct__strike{clip-path:inset(0 0 0 100%)} .fig-count{font-size:clamp(56px,6.4vw,104px)} /* a counter that will roll never prints its answer first: the figure in the HTML (the no-script and reduced-motion end state) waits unseen until 04-count.js has built its columns; it still holds its width, so nothing moves */ html.js-motion [data-in="count"]:not(.ct--armed){visibility:hidden} /* ---- 06-relay.css ---- */ /* 06 · RELAY (M05). Items share one grid cell, so the slot keeps the height of its tallest item and never shifts. */ .relay{display:grid} .relay>.relay__i{grid-area:1/1;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em} .relay__in{transform:translate3d(0,105%,0);transition:transform 520ms var(--ease-line)} .relay__i{visibility:hidden} .relay__i.is-on,.relay__i.is-out,.relay__i.is-in{visibility:visible} .relay__i.is-on .relay__in{transform:none} .relay__i.is-in .relay__in{transform:translate3d(0,105%,0);transition:none} .relay__i.is-out .relay__in{transform:translate3d(0,-105%,0);transition:transform 260ms var(--ease-leave)} html:not(.js-motion) .relay__i:not(.is-on){display:none} /* ---- 07-frames.css ---- */ /* 07 · FRAMES (M07). No traffic lights, no invented URLs: three square nodes and a field that holds a human page name. Captures are cropped from the top. */ .fr{position:relative;display:block;margin:0;border-radius:var(--r-frame);overflow:clip;background:#0B0E15;box-shadow:var(--sh-2);isolation:isolate} .lp .fr{box-shadow:var(--sh-panel),0 0 0 1px rgba(255,255,255,.08)} .fr__bar{position:relative;z-index:2;display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:linear-gradient(180deg,#1A2130,#121826)} .fr__bar .node{width:7px;height:7px;border-radius:2px;background:#3A4458;flex:none} .fr__addr{margin-left:10px;flex:1;max-width:min(62%,420px);height:22px;line-height:22px;padding:0 10px;border-radius:var(--r-chip);background:rgba(255,255,255,.06); font-family:var(--sans);font-weight:500;font-size:12px;font-variant-numeric:tabular-nums;color:rgba(242,244,248,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fr--rtl .fr__bar{flex-direction:row-reverse} .fr--rtl .fr__addr{margin:0 10px 0 0;text-align:right} .fr__bar,.fr__addr{transition:all 400ms var(--ease-swap)} .fr__win{position:relative;overflow:clip;background:#fff;aspect-ratio:var(--ar,1.6)} .fr__strip{position:absolute;left:0;top:0;width:100%;will-change:transform} .fr__strip>img,.fr__strip>.fr__shot{display:block;width:100%;height:var(--win-h,auto);aspect-ratio:var(--ar,1.6);object-fit:cover;object-position:top} .fr__wipe{position:absolute;inset:0;z-index:1;clip-path:inset(0 0 0 100%)} .fr__wipe img{width:100%;height:100%;object-fit:cover;object-position:top} .fr__wipe.on{clip-path:inset(0 0 0 0);transition:clip-path 800ms var(--ease-swap)} /* phone: 9:19.5, a 10px bezel with an inner hairline. The corner is a share of the phone's own width (17%, at most 44px), so a small phone never turns into a capsule; the height share (8.2%, 7.85% for the screen) keeps the corner round on a 9:19.5 box, and the screen's corner is the bezel's minus the 10px bezel */ .fr--phone{--ar:.4615;border-radius:min(44px,17%) / min(44px,8.2%);padding:10px;background:#0B0E15;box-shadow:var(--sh-2),inset 0 0 0 1px rgba(255,255,255,.12)} .fr--phone .fr__win{border-radius:clamp(3px,calc(17% - 6.6px),34px) / clamp(3px,calc(7.85% - 6.6px),34px)} .lp .fr--phone{box-shadow:var(--sh-panel),inset 0 0 0 1px rgba(255,255,255,.12)} /* doc: a white mat around an A4 page */ .fr--doc{--ar:.7072;background:#fff;padding:14px;box-shadow:var(--sh-1)} .fr--doc .fr__win{border-radius:4px} /* post: 4:5 */ .fr--post{--ar:.8;border-radius:var(--r-media)} .fr--post .fr__win{border-radius:var(--r-media)} /* film screen */ .fr--film{border-radius:var(--r-media)} .fr--film video,.fr--film img{display:block;width:100%;height:100%;object-fit:cover} /* ---- 08-chrome.css ---- */ /* 08 · CHROME (M08). The header with its reading filament, the index that grows out of the Menu button, the rail thread, the closing panel and the footer slab. One 1px line runs through all of it: the header's lower edge, the rail's thread, the rule that leaves a closing heading for the edge of its panel. */ /* ---------------------------------------------------------------- header */ .hdr{position:fixed;z-index:900;left:0;right:0;top:0;height:var(--hd);color:#fff; background:linear-gradient(180deg,#131A27,#0B0E15);transform:translate3d(0,0,0);transition:transform 420ms var(--ease-swap)} html.hdr-off .hdr{transform:translate3d(0,calc(-100% - 8px),0)} .hdr__in{position:relative;height:100%;width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px} .hdr__logo{position:relative;justify-self:start;display:flex;align-items:center;min-height:44px;min-width:44px;line-height:0;border-radius:4px} /* logo.webp (662 x 288) carries transparent margins around its 546 x 216 mark (52px left, 42px above, 30px below). In the header the image is as tall as the bar (--lh: 64px, 56px on phones), so the visible lockup is three quarters of it: a 48px mark with LIAISON at a 13px cap height and MARKETING whole, 8px of air above and below. Its left margin is taken back so the mark stands on the page grid. Never stretched (width follows height), never cropped, never recoloured. */ .lw-logo{display:block;height:35px;width:auto;max-width:none;align-self:flex-start;object-fit:contain} .hdr__logo,.fly__logo{--lh:var(--hd)} .hdr__logo .lw-logo,.fly__logo .lw-logo{align-self:center;height:var(--lh);margin-left:calc(var(--lh) * -.1806)} /* under the pointer the lockup lifts 1px and a teal node lands after MARKETING (its last letter ends at 565 of 662, its x-height sits at 65% of the image) */ .hdr__logo .lw-logo{transition:transform 320ms var(--ease-open)} .hdr__logo::after{content:"";position:absolute;left:calc(var(--lh) * 1.86);top:calc(var(--lh) * .655 - var(--node) / 2 - 1px);width:var(--node);height:var(--node); border-radius:var(--r-node);background:var(--teal);transform:scale(0);transform-origin:center;transition:transform 260ms var(--ease-open);pointer-events:none} @media (hover:hover){ .hdr__logo:hover .lw-logo{transform:translate3d(0,-1px,0)} .hdr__logo:hover::after{transform:scale(1);transition-delay:80ms} } .hdr__logo:focus-visible::after{transform:scale(1)} .hdr__nav{display:flex;align-items:center;gap:clamp(22px,2.6vw,40px)} .hdr__nav a{position:relative;display:inline-flex;align-items:center;height:44px;font:500 15px/1 var(--sans);letter-spacing:.005em;color:rgba(255,255,255,.78);transition:color 240ms ease} .hdr__nav a::after{content:"";position:absolute;left:0;right:0;top:calc(50% + 11px);height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform 320ms var(--ease-open)} .hdr__nav a:hover{color:#fff} .hdr__nav a:hover::after,.hdr__nav a:focus-visible::after{transform:scaleX(1);transform-origin:left center} .hdr__nav a[aria-current]{color:#fff} .hdr__nav a[aria-current]::after{display:none} .hdr__nav a[aria-current]::before{content:"";position:absolute;left:50%;top:calc(50% + 14px);width:7px;height:7px;margin-left:-3.5px;border-radius:2px;background:var(--teal)} .hdr__end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:20px} .hdr .hdr__cta{height:40px;padding:0 18px;background:#fff;color:var(--ink);box-shadow:none;font-size:15px} .hdr__menu{display:none;align-items:center;gap:12px;height:44px;padding:0 12px;margin-right:-12px;border-radius:var(--r-ctl);font:500 15px/1 var(--sans);color:#fff} /* the Menu / Close label: two words in one slot, never on the same pixels */ .mt{display:grid;text-align:right} .mt>span{grid-area:1/1;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em} .mt>span>span{display:block;transition:none} .mt>span+span>span{transform:translate3d(0,110%,0)} /* the glyph: two hairlines that cross into an x */ .mg{position:relative;width:18px;height:9px;flex:none} .mg::before,.mg::after{content:"";position:absolute;left:0;right:0;height:1.5px;border-radius:1px;background:currentColor;transition:transform 520ms var(--ease-swap)} .mg::before{top:0}.mg::after{bottom:0} /* the reading filament: a 1px track on the lower edge, a white body, a teal head */ .hdr__fil{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none} .hdr__fil i{position:absolute;left:0;top:0} .hdr__track{right:0;height:1px;background:rgba(255,255,255,.10)} .hdr__bar{right:0;height:1px;background:rgba(255,255,255,.55);transform:scaleX(0);transform-origin:left center} .hdr__fil .hdr__head{top:-2px;width:5px;height:5px;border-radius:1.5px;background:var(--teal);transform:scale(0)} @media (max-width:1040px),(hover:none){ .hdr__nav{display:none} .hdr__menu{display:inline-flex} } @media (max-width:700px){ .lw-logo{height:29px} .hdr .hdr__cta{display:none} } /* ------------------------------------------------------------------ menu */ .fly.lp{position:fixed;inset:0;z-index:1000;margin:0;border-radius:0;box-shadow:none;visibility:hidden;display:flex;flex-direction:column} /* a window with a classic scrollbar keeps its gutter while the index is open (no page jump). Nothing fixed paints there, so the gutter takes the night while the index stands full screen, instead of a strip of mist beside it */ html.fly-on:has(.fly.is-open:not(.is-closing)){background-color:var(--night-1)} .fly.is-open,.fly.is-closing{visibility:visible} /* the closed index is on screen for the observer but never seen: its light does not drift */ html.js-motion .fly:not(.is-open) .lp__light--b{animation-play-state:paused} html.fly-on{overflow:hidden;scrollbar-gutter:stable} /* the top bar (logo, Close) is outside the scroller: on a short screen the index scrolls under its hairline and Close never leaves the screen */ .fly__top{flex:none;height:var(--hd);box-shadow:inset 0 -1px 0 var(--hair-n);touch-action:pinch-zoom} .fly__sc{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent} .fly__top>div{height:100%;width:var(--wrap);margin-inline:auto;display:flex;align-items:center;justify-content:space-between} .fly__logo{display:flex;align-items:center;min-height:44px;min-width:44px;line-height:0;border-radius:4px} .fly__x{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 12px;margin-right:-12px;border-radius:var(--r-ctl);font:500 15px/1 var(--sans);color:#fff} .fly.is-open .fly__x .mt>span:first-child>span{transform:translate3d(0,-110%,0);transition:transform 260ms var(--ease-leave)} .fly.is-open .fly__x .mt>span+span>span{transform:none;transition:transform 520ms var(--ease-line) 320ms} .fly.is-closing .fly__x .mt>span:first-child>span{transform:none;transition:transform 360ms var(--ease-line) 220ms} .fly.is-closing .fly__x .mt>span+span>span{transform:translate3d(0,-110%,0);transition:transform 200ms var(--ease-leave)} .fly.is-open .fly__x .mg::before{transform:translate3d(0,3.75px,0) rotate(45deg)} .fly.is-open .fly__x .mg::after{transform:translate3d(0,-3.75px,0) rotate(-45deg)} .fly.is-closing .fly__x .mg::before,.fly.is-closing .fly__x .mg::after{transform:none} .fly__nav{flex:1 0 auto;width:var(--wrap);margin-inline:auto;padding:clamp(12px,3vh,36px) 0 clamp(20px,4vh,40px);display:flex;flex-direction:column;justify-content:center} .fly__row{position:relative;padding:14px 0 12px} .fly__row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair-n);transform-origin:left center} /* 4px more hit area above and below each main word (a 34px word is still 44px to a finger); the negative margin gives the 4px back, so no row moves */ .fly__i{display:inline-block;color:#fff;border-radius:4px;padding-block:4px;margin-block:-4px} .fly__t{display:block;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em;font-family:var(--serif);font-weight:300;font-size:40px;line-height:1.1;letter-spacing:-.015em} .fly__t>span{display:inline-block} .fly__n{display:inline-block;margin-left:10px;vertical-align:.95em;font:500 12px/1 var(--sans);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--on-n-3)} .fly__i[aria-current] .fly__t>span::after{content:"";display:inline-block;width:7px;height:7px;margin-left:14px;border-radius:2px;background:var(--teal);vertical-align:.3em} .fly__sub{display:flex;flex-wrap:wrap;column-gap:22px;margin-top:2px} /* 4px of hit area each side (MGNI is 37px of text), given back by the margin: nothing moves */ .fly__sub a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;margin-inline:-4px;font:400 15px/1.3 var(--sans);color:rgba(242,244,248,.74);transition:color 200ms ease} .fly__sub a:hover{color:#fff} .fly__foot{flex:none;width:var(--wrap);margin-inline:auto;display:flex;gap:clamp(32px,8vw,72px);padding:16px 0 max(20px,env(safe-area-inset-bottom))} .fly__clk .slate{display:block;margin-bottom:8px} .fly__clk .ct{font-size:28px;color:#fff} @media (min-width:701px){ .fly__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:18px 0 16px} .fly__i{grid-column:1/7} .fly__sub{grid-column:7/13;flex-direction:column;align-items:flex-start;margin-top:0} .fly__sub a{min-height:30px} } @media (max-width:375px){.fly__t{font-size:34px}} @media (max-height:700px) and (max-width:700px){.fly__row{padding:8px 0 6px}.fly__nav{padding-top:8px}} /* short landscape (phones on their side, iPad and small windows across): the two clocks leave the foot and sit in the top bar between the logo and Close, so the first view never ends on half a row of digits and the index keeps the height. The scroller steps out of the positioning chain so the foot is placed on the index itself and does not scroll. */ @media (orientation:landscape) and (max-height:900px) and (min-width:600px){ .fly.lp>.fly__top+.fly__sc{position:static} .fly__top+.fly__sc>.fly__nav{position:relative;z-index:2} .fly__top+.fly__sc>.fly__foot{position:absolute;z-index:3;top:0;left:50%;height:var(--hd);width:auto;margin:0;padding:0;transform:translate3d(-50%,0,0); align-items:center;gap:clamp(24px,3vw,40px);pointer-events:none} .fly__top+.fly__sc .fly__clk{display:flex;align-items:baseline;gap:10px;white-space:nowrap} .fly__top+.fly__sc .fly__clk .slate{display:inline;margin:0} .fly__top+.fly__sc .fly__clk .ct{font-size:20px} } /* the index arrives: rows clip up at a 70ms stagger from 200ms, their hairlines draw */ html.js-motion .fly .fly__t>span{transform:translate3d(0,108%,0)} html.js-motion .fly .fly__row::after{transform:scaleX(0)} html.js-motion .fly.is-open .fly__t>span{transform:none;transition:transform 700ms var(--ease-line) calc(200ms + var(--i,0) * 70ms)} html.js-motion .fly.is-open .fly__row::after{transform:none;transition:transform 900ms var(--ease-open) calc(240ms + var(--i,0) * 70ms)} html.js-motion .fly.is-closing .fly__t>span{transform:translate3d(0,-108%,0);transition:transform 200ms var(--ease-leave)} html:not(.js) .fly:target{visibility:visible} html:not(.js) .fly:target .fly__x .mt>span:first-child>span{transform:translate3d(0,-110%,0)} html:not(.js) .fly:target .fly__x .mt>span+span>span{transform:none} html:not(.js) .fly:target .fly__x .mg::before{transform:translate3d(0,3.75px,0) rotate(45deg)} html:not(.js) .fly:target .fly__x .mg::after{transform:translate3d(0,-3.75px,0) rotate(-45deg)} /* a clock needs its script: without one there is nothing true to show */ html:not(.js) .fly__foot,html:not(.js) .ft__ck{display:none} /* ------------------------------------------------------------------ rail */ .rlay{position:relative;align-items:start} .rlay__rail{grid-column:1/4;align-self:stretch} .rlay__body{grid-column:4/13;min-width:0} nav.rail{position:sticky;top:calc(var(--hd) + 32px);transition:transform 420ms var(--ease-swap)} html.hdr-off nav.rail:not(.rail--g){transform:translate3d(0,calc(-1 * var(--hd)),0)} .rail__h{margin-bottom:14px} .rail__list{position:relative;display:flex;flex-direction:column} .rail__i{position:relative;z-index:1;display:flex;align-items:flex-start;gap:16px;padding:9px 0;max-width:22ch;font:500 15px/1.35 var(--sans);color:var(--ink-3);transition:color 180ms ease} .rail__i:hover{color:var(--ink)} .rail__i .node{margin-top:.42em;background:#A7AEB9;transform:scale(.6);transition:transform 180ms var(--ease-open),background-color 180ms ease} .rail__i.on{color:var(--ink)} .rail__i.on .node{background:var(--teal);transform:none} .rail__line{position:absolute;left:3px;top:0;width:1px;height:0;background:var(--hair)} .rail__seg{position:absolute;left:0;top:0;width:1px;height:0;background:var(--ink);transform-origin:center top} html.js-motion .rail__seg{transform:scaleY(0)} html:not(.js) .rail__i .node{background:var(--teal);transform:none} .rail__eb{display:none} /* touch and narrow: the thread moves into the page gutter, the labels into the sections */ @media (hover:none),(max-width:900px){ .rlay__rail{position:absolute;left:calc(var(--gut) / -2);top:0;bottom:0;width:1px;grid-column:auto} .rlay__body{grid-column:1/-1} nav.rail{position:absolute;inset:0;transform:none} .rail__h{display:none} .rail__list{position:static} .rail__i{position:absolute;left:-2px;top:0;width:5px;height:5px;padding:0;margin-top:-2.5px;gap:0;max-width:none} .rail__i .node{width:5px;height:5px;margin:0;border-radius:1.5px} .rail__i span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .rail__line{left:0} .rail__eb{display:block;margin:0 0 16px} html.js-motion .rail__eb>.slate:not(.ty){color:transparent} } /* ------------------------------------------------------ the leaving rule .lv holds a heading whose last line hands over to a 1px rule that runs to the edge of its panel and lands a teal tick. The script places it after the last word; without a script it sits under the heading, full width. */ .lv{position:relative;padding-bottom:30px} .lv.lv--end{padding-bottom:0} .lv__end{display:inline-block;width:0;height:0;vertical-align:baseline} .lv__r{position:absolute;left:0;top:calc(100% - 12px);width:100%;height:1px} .lv__r .rule{width:100%} /* ------------------------------------------------------ the closing panel With its device (the default): the words hold the left columns, kicker, heading, lead and buttons in one run with no dead band between them; the two operators, the arc and their clocks hold the right columns. The heading's rule stops at its own column instead of crossing the portraits. Stacked on phones, words first. The type-only panel keeps the heading over a row of lead and buttons, at its content's height. */ .clo{padding-top:clamp(12px,2vw,24px)} .clo__p{--r:var(--r-panel);display:flex} .clo__in{display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(36px,5vh,56px);padding-block:clamp(56px,8vh,104px)} .clo__k{margin-bottom:clamp(18px,2.4vh,28px)} .clo__h{max-width:9.6em} .clo__h.d-home{font-size:clamp(46px,7vw,112px)} .clo__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end} .clo__t{grid-column:1/7;max-width:30em} .clo__a{grid-column:8/13;justify-content:flex-end} .clo__n{margin-top:22px} .clo--dev .clo__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;gap:0 var(--gap)} .clo--dev .clo__txt{grid-column:1/7;min-width:0} .clo--dev .clo__dev{grid-column:8/13;min-width:0} .clo--dev .clo__h.d-home{font-size:clamp(44px,5.4vw,84px);max-width:8.6em} .clo--dev .clo__t{margin-top:clamp(20px,2.6vh,32px)} .clo--dev .clo__a{margin-top:clamp(28px,3.6vh,40px);justify-content:flex-start} .clo--dev .lv{--lv-stop:1} .clo__dev .ops{padding-top:clamp(76px,8vw,120px)} @media (hover:none),(max-width:900px){ .clo__in{justify-content:flex-start;gap:clamp(40px,7vh,64px);padding-block:clamp(56px,9vh,88px)} .clo__row{grid-template-columns:1fr;row-gap:28px} .clo__t,.clo__a{grid-column:1/-1} .clo__a{justify-content:flex-start} } @media (min-width:901px) and (max-width:1199px){.clo--dev .clo__dev{grid-column:7/13}} @media (max-width:900px){ .clo--dev .clo__in{grid-template-columns:minmax(0,1fr);row-gap:clamp(36px,6vh,56px);padding-block:clamp(48px,7vh,72px)} .clo__dev .ops{justify-content:flex-start} .clo--dev .clo__txt,.clo--dev .clo__dev{grid-column:1/-1} .clo--dev .clo__h.d-home{font-size:clamp(38px,9.4vw,60px)} .clo--dev .lv{--lv-stop:0} .clo__dev .ops{padding-top:clamp(56px,13vw,84px)} } @media (max-width:560px){ .clo__a .u{width:100%;justify-content:center} .clo__dev .ops__p{width:min(40vw,160px)} } /* --------------------------------------------------------------- footer */ .ft.lp{margin:clamp(12px,2vw,24px) var(--inset) 0;border-radius:var(--r-panel) var(--r-panel) 0 0;color:var(--on-n-2)} .ft__in{padding:clamp(56px,7vw,96px) 0 max(28px,env(safe-area-inset-bottom))} .ft__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end} .ft__logo{grid-column:1/5;justify-self:start;display:block;line-height:0;border-radius:4px} /* the footer lockup at the header's size: LIAISON reads at a 13px cap height */ .ft__logo .lw-logo{height:64px;margin-left:calc(64px * -.1806)} @media (max-width:700px){.ft__logo .lw-logo{height:56px;margin-left:calc(56px * -.1806)}} .ft__tag{grid-column:7/13;max-width:26em;font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--on-n-2)} .ft__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:40px;margin-top:clamp(56px,7vw,96px)} .ft__col{grid-column:span 3} .ft__col .lab{display:block;margin-bottom:12px} /* min-width: a short name (MGNI) is still 44px wide under a finger; the extra is empty space after the word */ .ft__col li a{display:inline-flex;align-items:baseline;gap:8px;min-width:44px;padding:5px 0;font-size:15px;line-height:1.35;color:var(--on-n-2);transition:color 200ms ease} .ft__col li a:hover{color:#fff} .ft__col .ft__n{font-size:12px;font-weight:500;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--on-n-3)} .ft__ck{display:grid;grid-template-columns:1fr 1fr;gap:20px} .ft__ck .slate{display:block;margin-bottom:10px} .ft__ck .ct{font-size:40px;color:#fff} .ft__close{margin-top:clamp(56px,7vw,96px)} .ft__h{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3vw,44px);line-height:1.12;letter-spacing:-.012em;color:#fff;max-width:22em;text-wrap:balance} .ft__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(40px,5vw,64px);padding-top:20px;box-shadow:inset 0 1px 0 var(--hair-n);font-size:13px;line-height:1.5;color:var(--on-n-3)} .ft__base a{color:var(--on-n-2);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px; padding-inline:2px;margin-inline:-2px} /* the legal line: each separator is bound to the words on both sides, so no line starts or ends on a dot */ .ft__nw{white-space:nowrap} /* Privacy now sits in a span, out of reach of the running-text tap rule (10-links.css): the same 44px, inline, nothing moves */ @media(pointer:coarse){.ft__base a{padding-block:max(0px,calc((44px - 1em) / 2))}} .ft__base a:hover{color:#fff} @media (max-width:1040px){ .ft__col{grid-column:span 6} } @media (max-width:700px){ .ft__top{grid-template-columns:1fr;row-gap:22px} .ft__logo,.ft__tag{grid-column:1/-1} .ft__tag{font-size:18px} .ft__grid{column-gap:16px;row-gap:34px} .ft__col--talk{grid-column:1/-1} .ft__col li a{min-height:44px;padding:0;align-items:center} .ft__ck{grid-template-columns:1fr;gap:22px} .ft__ck .ct{font-size:34px} .ft__base a{display:inline-flex;align-items:center;min-height:44px} } /* ------------------------------------------------------ the last frame A page that ends on the operators (the closing with its arc and clocks, or the contact page's Follow panel) runs its footer on as the lower half of that same panel: no gap, no rounded seam, one hairline across the text column. The footer then carries no second clock pair and no second 'two operators' line, only the index and the legal line. The panel above keeps its light at the top and the footer keeps the colour at the foot, so the two halves read as one night. */ main:has(+ .ft--join)>.clo:last-child .clo__p{--r:var(--r-panel) var(--r-panel) 0 0; background: radial-gradient(70% 60% at 86% -14%,rgba(107,63,160,.26),transparent 62%), radial-gradient(55% 50% at 12% -12%,rgba(0,194,184,.15),transparent 60%), linear-gradient(180deg,var(--night-0) 0%,var(--night-1) 100%); box-shadow:inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.07)} main:has(+ .ft--join)>.lp:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0; box-shadow:inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.07)} .ft.ft--join{margin-top:-1px;border-radius:0; background: radial-gradient(70% 60% at 14% 110%,rgba(107,63,160,.30),transparent 62%), radial-gradient(60% 55% at 88% 115%,rgba(0,194,184,.20),transparent 60%), radial-gradient(40% 40% at 60% 108%,rgba(224,53,122,.12),transparent 60%), linear-gradient(180deg,var(--night-1) 0%,var(--night-2) 100%); box-shadow:inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(255,255,255,.07)} .ft--join::before{display:none} /* the panel above keeps its violet light off the seam; the footer's lights rest low (data-lamp) */ main:has(+ .ft--join)>.clo:last-child .clo__p>.lp__light--b,main:has(+ .ft--join)>.lp:last-child>.lp__light--b{display:none} .ft--join .ft__in{padding-top:clamp(40px,4.4vw,64px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} .ft--join .ft__grid{margin-top:0;align-items:start} .ft__brand{grid-column:1/5;min-width:0} .ft__brand .ft__logo{display:inline-block} .ft__brand .ft__tag{margin-top:18px;font-size:18px;max-width:19em} .ft--join .ft__col--work{grid-column:5/8} .ft--join .ft__col--read{grid-column:8/10} .ft--join .ft__col--talk{grid-column:10/13} .ft--join .ft__base{margin-top:clamp(40px,4.4vw,56px)} @media (max-width:1040px){ .ft__brand{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end} .ft__brand .ft__logo{grid-column:1/6} .ft__brand .ft__tag{grid-column:7/13;margin-top:0} .ft--join .ft__col--work{grid-column:1/5} .ft--join .ft__col--read{grid-column:5/8} .ft--join .ft__col--talk{grid-column:8/13} } @media (max-width:700px){ .ft__brand{display:block} .ft__brand .ft__tag{margin-top:16px} .ft--join .ft__col--work,.ft--join .ft__col--read{grid-column:span 6} .ft--join .ft__col--talk{grid-column:1/-1} } /* ---- 09-vt.css ---- */ /* 09 · PAGE TRANSITIONS (M09). The clicked link's line runs to the edge of the screen and lands its tick; the next page opens as a 1px slit on that line. The header is shared and never moves. A case frame match-cuts into the case hero with no crossfade. Reduced motion: no transitions at all. */ @media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}} .hdr{view-transition-name:hdr} /* the header stays put: no morph, no crossfade (only the new header is drawn) */ ::view-transition-group(hdr),::view-transition-old(hdr),::view-transition-new(hdr){animation:none} ::view-transition-old(hdr){opacity:0} /* the page: the old one holds still, the new one opens from the clicked line. --vt-y is the line's height in the viewport, --vt-d the slit's duration (440ms, shortened down to 360ms when the next page was slow to arrive, so the whole move stays near its 700ms). Both are set by the head snippet on pagereveal. The curve keeps the open ease's long landing but starts slower: with --ease-open the band is 85% open after 120ms and reads as a flash, with this one it is still a band (18%, 38% at 360ms) and then opens. */ ::view-transition-old(root){animation:none} ::view-transition-new(root){animation:lw-slit var(--vt-d,440ms) cubic-bezier(.55,0,.1,1) both} @keyframes lw-slit{ from{clip-path:inset(var(--vt-y,50%) 0 calc(100% - var(--vt-y,50%) - 1px) 0)} to{clip-path:inset(0 0 0 0)} } /* the line itself, while the slit opens on it, withdraws into its tick */ ::view-transition-group(vt-line){animation:none} ::view-transition-old(vt-line){transform-origin:right center;animation:lw-vt-leave 300ms var(--ease-leave) 90ms both} @keyframes lw-vt-leave{to{transform:scaleX(0)}} /* the case match cut: the frame becomes the hero; the old frame is never seen twice */ ::view-transition-group(*.case){animation-duration:600ms;animation-timing-function:var(--ease-swap)} ::view-transition-old(*.case){animation:none;opacity:0} ::view-transition-new(*.case){animation:none} [data-case-frame]{view-transition-class:case} /* while the slit opens, a heading the script has not split yet stays out of it: it would show whole, vanish into its line masks, then rise (vt-in lives only for the length of the transition, so a page whose script fails still reads) */ html.js-motion.vt-in [data-in="lines"]:not([data-split]){visibility:hidden} /* the line that leaves the page (drawn by the click, removed on bfcache return) */ .vt-rule{position:fixed;z-index:1300;height:1px;pointer-events:none;view-transition-name:vt-line} .vt-rule__l{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(14,17,23,.4);transform-origin:left center;animation:lw-vt-line 220ms var(--ease-swap) both} .vt-rule--n .vt-rule__l{background:rgba(255,255,255,.4)} .vt-rule__t{position:absolute;right:0;top:-6px;width:2px;height:12px;background:var(--teal);transform-origin:center;animation:lw-vt-tick 120ms var(--ease-open) 120ms both} @keyframes lw-vt-line{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes lw-vt-tick{from{transform:scaleY(0)}to{transform:scaleY(1)}} /* ---- 10-links.css ---- */ /* 10 · LINKS, BUTTONS, THE NODE (M10). The node is a 7px rounded square taken from the logo's square mark: the site's only bullet, stop and dot. */ .node{display:inline-block;width:var(--node);height:var(--node);border-radius:var(--r-node);background:currentColor;flex:none;vertical-align:middle} .node--lit{background:var(--teal)} .nodes>li{position:relative;padding-left:20px} .nodes>li::before{content:"";position:absolute;left:0;top:.62em;width:var(--node);height:var(--node);border-radius:var(--r-node);background:currentColor;opacity:.7} /* the underline draws from the left, leaves to the right, and lands a teal tick */ .u{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.3;padding:8px 0;color:inherit;cursor:pointer} .u::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 320ms var(--ease-open)} .u::before{content:"";position:absolute;right:-12px;bottom:3px;width:8px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-open)} .u:hover::after,.u:focus-visible::after{transform:scaleX(1);transform-origin:left} .u:hover::before,.u:focus-visible::before{transform:scaleX(1);transition-delay:160ms} .u svg{width:14px;height:14px;transition:transform 320ms var(--ease-open)} .u:hover svg{transform:translate3d(4px,0,0)} .u--rest::after{transform:scaleX(1);opacity:.3} @media(hover:none){.u::after{transform:scaleX(1);opacity:.3}.u::before{display:none}} @media(pointer:coarse){.u{min-height:44px}} /* a breadcrumb word (Work, Home) is 37 to 39px of text: 4px of hit area each side, given back by the margin, so the crumb row does not move; the underline and its teal tick stay on the word */ .crumbs>a.u{padding-inline:4px;margin-inline:-4px} .crumbs>a.u::after{left:4px;right:4px} .crumbs>a.u::before{right:-8px} /* a link inside running text (an address, a source, a mailto in the privacy policy): under the pointer or the keyboard its underline thickens to 2px and turns teal, in 160ms; the words keep their colour */ main :is(p,li,dd) a:not([class]){transition:text-decoration-color 160ms ease,text-decoration-thickness 160ms ease} @media (hover:hover){ main :is(p,li,dd) a:not([class]):hover{text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-color:var(--teal);text-underline-offset:3px} } main :is(p,li,dd) a:not([class]):focus-visible{text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-color:var(--teal);text-underline-offset:3px} /* magnetic elements settle back over 500ms; while the pointer pulls them the translate follows it frame by frame (10-links.js adds .is-pull) */ [data-mag]{transition:translate 500ms var(--ease-open)} /* buttons: at rest a plate; under the pointer it lifts 1px, its ground and edge answer, a teal hairline draws along its foot and the arrow steps forward. The glint still runs once along the foot as the pointer arrives. */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--r-ctl);overflow:clip; font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.005em;white-space:nowrap;cursor:pointer; transition:transform 240ms var(--ease-open),translate 500ms var(--ease-open),background-color 240ms ease,box-shadow 240ms ease,color 240ms ease} [data-mag].is-pull{transition:transform 240ms var(--ease-open),background-color 240ms ease,box-shadow 240ms ease,color 240ms ease} .btn--p{background:#121826 linear-gradient(170deg,#1A2233,#0B0E15);color:#fff;box-shadow:var(--sh-1)} .lp .btn--p,.on-night .btn--p{background:#fff;color:var(--ink);box-shadow:none} .btn--s{box-shadow:inset 0 0 0 1px currentColor;background:transparent;color:inherit} .btn--s{box-shadow:inset 0 0 0 1px rgba(14,17,23,.3)} .lp .btn--s{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)} .btn::before{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left center;transition:transform 420ms var(--ease-open);pointer-events:none} .btn::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:40%;background:linear-gradient(90deg,transparent,var(--teal),transparent);transform:translate3d(-110%,0,0);pointer-events:none} .btn:active{transform:scale(.98)} .btn svg{width:14px;height:14px;flex:none;transition:transform 320ms var(--ease-open)} @media (hover:hover){ .btn:hover{transform:translate3d(0,-1px,0)} .btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)} .btn:hover::after{transform:translate3d(260%,0,0);transition:transform 900ms var(--ease-swap)} .btn:hover svg{transform:translate3d(3px,0,0)} .btn--p:hover{background-color:#1F2A40;background-image:linear-gradient(170deg,#26324A,#121826);box-shadow:0 2px 4px rgba(14,17,23,.08),0 16px 34px -16px rgba(14,17,23,.45)} .lp .btn--p:hover,.on-night .btn--p:hover,.hdr .btn--p:hover{background:#E9EDF2;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 14px 36px -14px rgba(0,194,184,.55)} .btn--s:hover{background-color:rgba(14,17,23,.045);box-shadow:inset 0 0 0 1px rgba(14,17,23,.72)} .lp .btn--s:hover,.on-night .btn--s:hover{background-color:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.78)} .btn:active{transform:scale(.98)} } .btn:focus-visible::before{transform:scaleX(1)} @media(max-width:700px){.btn{height:52px}} /* tap targets: 44px under a finger without moving the layout. .tap a box of at least 44 x 44 (short nav words, icon buttons) .tap-y an inline link whose hit area grows to 44px tall around its own line */ .tap{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px} .tap-y{padding-block:max(0px,calc((44px - 1lh) / 2));margin-block:min(0px,calc((1lh - 44px) / 2))} /* a plain link inside running text (no class: an address, a source) gets the same 44px hit area under a finger; inline padding never moves the line */ @media(pointer:coarse){:is(p,li,td,dd) > a:not([class]){padding-block:max(0px,calc((44px - 1em) / 2))}} /* ---- 19-films.css ---- */ /* 19 · FILMS (M19). The poster stays until the video plays: the one dissolve. */ .film{position:relative;overflow:clip;border-radius:var(--r-media);background:#0B0E15} .film>img,.film>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .film>video{opacity:0;transition:opacity 200ms ease} .film>video.is-playing{opacity:1} /* ---- 41-longtake.css ---- */ /* 41 · THE LONG TAKE (M11), the home hero. The City of London at blue hour, scrubbed frame by frame by the scroll inside a lit screen set into the mist page. The screen is the only clip-path in the stage: it pulls back from the mat (header + 16px, 16px, radius 28) to full bleed over p 0 to .20, while one slot relays three beats: the promise, the claim, then what we help firms do (the three moves on a line drawn at the film's foot). The film covers the extra height a phone gains when its address bar folds away (--lt-x). The pin is half a screen longer than a two-beat take, for the third beat. */ .lt{--lt-m:16px;--lt-r:28px;--lt-x:0px;--lt-ch:62vh;position:relative;height:250vh} @supports (height:100lvh){.lt{--lt-x:calc(100lvh - 100svh)}} @media(max-width:700px){.lt{--lt-m:12px;--lt-r:20px}} @media(hover:none){.lt{height:230vh;height:230svh}} /* the hero opens the page: the stage runs under the fixed header */ main>.lt:first-child{margin-top:calc(var(--hd) * -1)} /* the next mist sheet slides over the last 14vh of the pin (p .91 to 1; longtake.js measures where it starts, for the veil and the end of the film) */ .lt:has(+ .lt__next){margin-bottom:-14vh} @media(hover:none){.lt:has(+ .lt__next){margin-bottom:-11.2vh;margin-bottom:-11.2svh}} .lt__next{position:relative;z-index:3;background:var(--mist);border-radius:var(--r-panel) var(--r-panel) 0 0; box-shadow:0 -1px 0 rgba(255,255,255,.5),0 -28px 64px -32px rgba(8,11,20,.55)} .lt__stage{position:sticky;top:0;height:100vh;height:100svh} .lt__screen{position:absolute;left:0;right:0;top:0;bottom:calc(var(--lt-x) * -1);overflow:clip;background:var(--night-1); clip-path:inset(calc(var(--hd) + var(--lt-m)) var(--lt-m) calc(var(--lt-m) + var(--lt-x)) var(--lt-m) round var(--lt-r))} .lt__media{position:absolute;inset:0;transform-origin:50% 42%;will-change:transform} .lt__poster,.lt__poster img,.lt__v,.lt__seq{position:absolute;inset:0;width:100%;height:100%;max-width:none} .lt__poster img,.lt__v{object-fit:cover;object-position:50% 50%} .lt__v{opacity:0;transition:opacity 200ms ease} .lt__v.is-on{opacity:1} .lt__seq[hidden]{display:none} /* the measured dark area under the copy: --lt-ch is the height of the copy block above the stage bottom, measured on resize (4.5:1 at frames 1, 70, 140). When the claim (shorter) replaces the promise, the scrim and the slate slide down together by the difference, so the film opens above the claim. The bottom border carries the darkest value below the stage (folded address bar, and the slide). The box reaches half a screen above the stage, so a tall copy block's gradient has room to thin out before the box's own top edge, which a shorter beat carries down into view. */ .lt__scrim{position:absolute;left:0;right:0;top:-50vh;top:-50svh;height:150vh;height:150svh;box-sizing:content-box;pointer-events:none; border-bottom:calc(var(--lt-x) + 40vh) solid rgba(8,10,16,.80);background-repeat:no-repeat; background-image:linear-gradient(to top,rgba(8,10,16,.80) 0,rgba(8,10,16,.64) calc(var(--lt-ch) * .5),rgba(8,10,16,.48) var(--lt-ch),transparent calc(var(--lt-ch) + 24vh))} /* under the three moves (small type over lit windows) a second veil deepens the scrim: it settles while the moves are the beat (.lt--moves), and lifts after */ .lt__scrim::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--lt-ch) + 16vh);pointer-events:none; background:linear-gradient(to top,rgba(8,10,16,.42),rgba(8,10,16,.34) 62%,transparent);opacity:0;transition:opacity 700ms var(--ease-open)} .lt--moves .lt__scrim::before{opacity:1} .lt__scrim,.lt__slate{transition:transform 820ms var(--ease-swap)} .lt__scrim{will-change:transform} .lt--instant .lt__scrim,.lt--instant .lt__slate{transition:none} @media(min-width:900px){ .lt__scrim{border-bottom-color:rgba(8,10,16,.72); background-image:linear-gradient(to top,rgba(8,10,16,.72) 0,rgba(8,10,16,.52) calc(var(--lt-ch) * .5),rgba(8,10,16,.34) var(--lt-ch),transparent calc(var(--lt-ch) + 20vh))} .lt__screen::after{content:"";position:absolute;inset:0;pointer-events:none;will-change:transform; background:linear-gradient(to right,rgba(8,10,16,.44),rgba(8,10,16,.2) 36%,transparent 62%)} } .lt__veil{position:absolute;inset:0;background:var(--night-2);opacity:0;pointer-events:none;will-change:opacity} /* the copy and the slate, on the page grid, bottom of the stage */ .lt__in{position:absolute;left:0;right:0;bottom:calc(var(--lt-m) + clamp(24px,5.4vh,60px));width:var(--wrap);margin-inline:auto;z-index:2; display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;color:var(--on-n)} .lt__copy{grid-column:1/-1;grid-row:1} .lt__copy>.relay__i{align-self:end;padding:12px 12px calc(12px + .12em);margin:-12px -12px calc(-12px - .12em)} .lt__eye{color:rgba(242,244,248,.88);text-wrap:balance;margin-bottom:clamp(16px,2.4vh,24px)} .lt__h1{font-family:var(--serif);font-weight:300;font-size:clamp(44px,7.2vw,112px);line-height:.98;letter-spacing:-.022em;max-width:10.4em;color:var(--on-n)} .lt__lead{margin-top:clamp(18px,3.2vh,30px);max-width:32em;color:var(--on-n-2)} .lt__acts{margin-top:clamp(22px,3.6vh,34px)} .lt__op{--r:var(--r-ctl);display:inline-block} .lt .btn--p{background:#fff;color:var(--ink);box-shadow:none} .lt .btn--s{color:var(--on-n);box-shadow:inset 0 0 0 1px rgba(255,255,255,.36)} /* the slit opens to the button's own radius (the .op default of 16px would eat the outline's corners) */ .lt .btn.op{--r:var(--r-ctl);transition:clip-path 900ms var(--ease-open) var(--dl,0ms),transform 120ms ease,translate 500ms var(--ease-open)} .lt__h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5.6vw,88px);line-height:1.02;letter-spacing:-.018em;max-width:11em;color:var(--on-n)} .lt__p2{margin-top:clamp(18px,3vh,28px);max-width:30em;color:var(--on-n-2)} /* item 2's paragraph opens by mask at p .25 (scroll-driven, reversible) */ html.js-motion .lt__p2{-webkit-mask:linear-gradient(#000 0 0) no-repeat 0 100%/100% 0%;mask:linear-gradient(#000 0 0) no-repeat 0 100%/100% 0%; transform:translate3d(0,24px,0);transition:-webkit-mask-size 760ms var(--ease-open),mask-size 760ms var(--ease-open),transform 760ms var(--ease-open)} html.js-motion .lt__p2.is-open{-webkit-mask-size:100% 100%;mask-size:100% 100%;transform:none} html.js-motion .lt__p2.is-instant{transition:none} /* the third beat: a slate, then the three moves as columns on one line that draws left to right at the film's foot. Each move has its own segment of the line (running on across the gap, so the three read as one), a teal node where its segment starts, and its words open downward from the line once the line reaches the node. The columns keep to columns 1 to 9, clear of the slate. */ .lt__k3{color:rgba(242,244,248,.9);margin-bottom:clamp(14px,2.2vh,22px)} .lt__mv{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);max-width:calc(75% - var(--gap) * .25)} .lt__m{position:relative;padding-top:clamp(18px,2.6vh,26px)} .lt__m::before{content:"";position:absolute;left:0;top:0;width:calc(100% + var(--gap));height:1px;background:rgba(255,255,255,.4);transform-origin:left center} .lt__m:last-child::before{width:100%} .lt__mn{position:absolute;left:0;top:calc(var(--node) / -2 + .5px);width:var(--node);height:var(--node);border-radius:var(--r-node);background:var(--teal)} .lt__mt{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.3vw,36px);line-height:1.08;letter-spacing:-.014em;color:var(--on-n)} .lt__mb{margin-top:clamp(8px,1.2vh,12px);font-size:clamp(15px,1.12vw,17px);line-height:1.5;color:rgba(242,244,248,.84);max-width:26em;text-wrap:pretty} html.js-motion .lt__m::before{transform:scaleX(0);transition:none} html.js-motion .lt__mn{transform:scale(0);transition:none} html.js-motion .lt__mx{-webkit-mask:linear-gradient(#000 0 0) no-repeat 0 0/100% 0%;mask:linear-gradient(#000 0 0) no-repeat 0 0/100% 0%;transition:none} /* one continuous draw: each segment runs node to node in 280ms at an even speed (the last one settles), each node lands as the line reaches it, and its words open 40ms later */ html.js-motion .lt__i3:is(.is-on,.is-out) .lt__m::before{transform:none;transition:transform 280ms linear calc(160ms + var(--k) * 280ms)} html.js-motion .lt__i3:is(.is-on,.is-out) .lt__m:last-child::before{transition-duration:420ms;transition-timing-function:var(--ease-open)} html.js-motion .lt__i3:is(.is-on,.is-out) .lt__mn{transform:none;transition:transform 360ms var(--ease-open) calc(160ms + var(--k) * 280ms)} html.js-motion .lt__i3:is(.is-on,.is-out) .lt__mx{-webkit-mask-size:100% 100%;mask-size:100% 100%; transition:-webkit-mask-size 720ms var(--ease-open) calc(200ms + var(--k) * 280ms),mask-size 720ms var(--ease-open) calc(200ms + var(--k) * 280ms)} /* 1024 to 1179: columns 10 to 12 hold the slate with little to spare, so the moves take the full width and stand clear above it (--lt-sh: the slate's measured height) */ @media(min-width:1024px) and (max-width:1179px){ html.js-motion .lt__mv{max-width:none} html.js-motion .lt__i3>.relay__in{padding-bottom:calc(var(--lt-sh,62px) + 26px)} } /* the slate: place, then the frame counter with its hairline and teal head */ .lt__slate{grid-row:1;grid-column:8/-1;justify-self:end;align-self:end;text-align:right;color:rgba(242,244,248,.88);margin-bottom:4px} .lt__loc{display:block} .lt__sep{display:none} .lt__co{display:block;white-space:nowrap} .lt__fr{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:8px} .lt__lon{display:none} .lt__fn{display:inline-block;width:calc(3ch + .24em);height:1.4em;line-height:1.4;vertical-align:top;text-align:right;contain:strict} .lt__bar{position:relative;display:block;width:88px;height:1px;background:rgba(255,255,255,.24)} .lt__fill{position:absolute;inset:0;background:rgba(255,255,255,.72);transform-origin:left center;transform:scaleX(0)} .lt__head{position:absolute;left:-1px;top:-4px;width:2px;height:9px;background:var(--teal)} .lt__fill,.lt__head{will-change:transform} .lt__in{will-change:translate} @media(max-width:1023px){ .lt__in{grid-template-columns:minmax(0,1fr);row-gap:clamp(20px,2.4vh,28px)} /* the slate runs under the copy, a scrub bar at the foot of the screen where the thumb is and the scrim is darkest */ .lt__slate{grid-row:2;grid-column:1;justify-self:start;text-align:left;display:flex;align-items:center;gap:16px;margin:0} .lt__loc,.lt__co{display:inline} .lt__sep{display:inline} .lt__fr{margin:0} .lt__copy{grid-row:1} /* phones and tablets: the short slate, 'F 001 / 140 · LONDON' (the full place line would sit over lit floors above the densest part of the scrim) */ .lt__loc{display:none} .lt__lon{display:inline} .lt__mv{max-width:none} .lt__mt{font-size:clamp(22px,3.2vw,28px)} .lt__mb{font-size:16px;line-height:1.48} } @media(max-width:599px){ .lt__bar{width:64px} .lt__lead,.lt__p2{font-size:18px} .lt__acts{flex-direction:column;align-items:stretch;gap:12px} .lt__op{display:block} .lt__op .btn{width:100%} .lt__k3{margin-bottom:12px} .lt__mv{grid-template-columns:minmax(0,1fr);row-gap:18px} .lt__m{padding-top:14px} .lt__m::before,.lt__m:last-child::before{width:100%} .lt__mt{font-size:23px} .lt__mb{margin-top:6px;font-size:15px;line-height:1.45} } /* portrait tablets (768, 744, 1024 wide): a tall stage, so the moves set larger */ @media(orientation:portrait) and (min-width:700px){ .lt__mt{font-size:clamp(26px,3.4vw,34px)} .lt__mb{font-size:clamp(16px,1.7vw,18px)} } /* short and wide (a phone on its side, 852x393 or 667x375): every line of the promise stays inside the screen at scrollY 0. The headline is set from the height and runs two lines wide, the lead tightens, and the slate returns to the right of the buttons as on desktop, so the copy loses a whole row. */ @media(max-height:500px) and (min-aspect-ratio:3/2){ .lt__in{bottom:calc(var(--lt-m) + 14px);grid-template-columns:repeat(12,minmax(0,1fr));row-gap:0} .lt__eye{margin-bottom:10px} .lt__h1{font-size:min(clamp(44px,7.2vw,112px),10.4vh);font-size:min(clamp(44px,7.2vw,112px),10.4svh);max-width:21em} .lt__lead{margin-top:12px;font-size:16px;line-height:1.45;max-width:46em} .lt__acts{margin-top:16px;flex-direction:row;align-items:center} .lt__op{display:inline-block} .lt__op .btn{width:auto} .lt__slate{grid-row:1;grid-column:8/-1;justify-self:end;align-self:end;margin-bottom:15px} .lt__h2{font-size:min(clamp(40px,5.6vw,88px),11vh);font-size:min(clamp(40px,5.6vw,88px),11svh);max-width:18em} /* the claim's last line sits level with the slate: it keeps to columns 1 to 7 */ .lt__p2{margin-top:12px;font-size:16px;line-height:1.45;max-width:min(44em,58%)} /* the moves span the width and stand clear above the slate's row */ html.js-motion .lt__i3>.relay__in{padding-bottom:calc(var(--lt-sh,17px) + 27px)} .lt__k3{margin-bottom:10px} .lt__mv{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:0;max-width:none} .lt__m{padding-top:12px} .lt__m::before{width:calc(100% + var(--gap))} .lt__m:last-child::before{width:100%} .lt__mt{font-size:20px} .lt__mb{margin-top:5px;font-size:14px;line-height:1.42} } /* short and narrow (a 320x568 phone, a 360x640 Android): the promise stood 545px tall in a 488px screen and its first line sat under the header at load. The headline is set from the height, the lead and the buttons tighten, so the whole block starts below the screen's top edge (measured: eyebrow at 80 or lower at 320x568, the screen clip at 68) and the scrim still rises with it. */ @media(max-height:640px) and (max-aspect-ratio:3/4){ .lt__in{bottom:calc(var(--lt-m) + 16px);row-gap:12px} .lt__eye{margin-bottom:10px} .lt__h1{font-size:min(44px,6.6vh);font-size:min(44px,6.6svh)} .lt__lead{margin-top:12px;font-size:16px;line-height:1.45} .lt__acts{margin-top:16px;gap:8px} .lt__op .btn{height:44px} .lt__h2{font-size:min(40px,6.4vh);font-size:min(40px,6.4svh)} .lt__p2{margin-top:12px;font-size:16px;line-height:1.45} .lt__k3{margin-bottom:8px} .lt__mv{row-gap:12px} .lt__m{padding-top:10px} .lt__mt{font-size:20px} .lt__mb{margin-top:4px;font-size:14.5px;line-height:1.4} } /* REDUCED MOTION and no script: an unpinned poster with item 1 over it, the place as a caption under the screen, and items 2 and 3 as static blocks below (the three moves on their drawn line, every node lit). */ html:not(.js-motion) .lt{height:auto;margin-bottom:0} html:not(.js-motion) .lt__stage{position:relative;height:auto;display:grid;grid-template-columns:minmax(0,1fr); padding:calc(var(--hd) + var(--lt-m)) var(--lt-m) 0} html:not(.js-motion) .lt__screen{position:relative;inset:auto;grid-area:1/1;height:calc(100svh - var(--hd) - var(--lt-m) * 2);min-height:600px; clip-path:inset(0 round var(--lt-r))} html:not(.js-motion) .lt__scrim{top:0;height:100%;border-bottom:0} html:not(.js-motion) .lt__in,html:not(.js-motion) .lt__copy{display:contents} html:not(.js-motion) .lt__copy>.relay__i{display:block;visibility:visible;overflow:visible;margin:0;padding:0;justify-self:center;width:var(--wrap)} html:not(.js-motion) .lt__copy .relay__in{transform:none} html:not(.js-motion) .lt__i1{grid-area:1/1;align-self:end;z-index:2;padding-bottom:clamp(28px,6vh,64px)!important} html:not(.js-motion) .lt__slate{grid-row:2;grid-column:1;justify-self:center;width:var(--wrap);text-align:left;display:block;margin:14px 0 0;color:var(--ink-3)} html:not(.js-motion) .lt__slate .lt__loc,html:not(.js-motion) .lt__slate .lt__co{display:inline} html:not(.js-motion) .lt__slate .lt__sep{display:inline} html:not(.js-motion) .lt__fr{display:none} html:not(.js-motion) .lt__i2{grid-row:3;padding-block:clamp(64px,9vh,112px)!important} html:not(.js-motion) .lt__h2{color:var(--ink)} html:not(.js-motion) .lt__p2{color:var(--ink-2)} html:not(.js-motion) .lt__i2:has(+ .lt__i3){padding-bottom:clamp(40px,6vh,72px)!important} html:not(.js-motion) .lt__i3{grid-row:4;padding-bottom:clamp(64px,9vh,112px)!important} html:not(.js-motion) .lt__k3{color:var(--ink-3)} html:not(.js-motion) .lt__mv{max-width:none} html:not(.js-motion) .lt__m::before{background:rgba(14,17,23,.24)} html:not(.js-motion) .lt__mt{color:var(--ink)} html:not(.js-motion) .lt__mb{color:var(--ink-2)} /* ---- 42-decision.css ---- */ /* 42 · 01:12, NEW YORK (M12): the home signature. A search types, an AI answer types and cites mgotz.com, MGNI's real site walks inside the frame that never moves while notes draw from the capture to the shelf, and the decision lands on a real number. The frame is a browser on a fine pointer and a phone on touch (the same media query drives the fx script). The search page is set in em on a container unit, so it keeps one composition at every frame size. Without js-motion the pin prints its composite: the answer card over the MGNI home, the notes listed, the counter at its value. */ /* ---- the first beat: the heading on a night plate over the frame. No mist block stands before the pin any more: the stage arrives with the heading set on the browser's window (fine pointer) or on a plate the width of the phone's column (touch). As the search begins (S1) the text clips away, the plate closes onto the phone's screen and gives way to the empty field. The fx script writes the plate's rect (--ox --oy --ow --oh) and its open and closed clips (--oo, --oc) from the measured frame. */ .ds__grid{position:relative} .ds__o{position:absolute;z-index:7;left:var(--ox,0px);top:var(--oy,0px);width:var(--ow,100%);height:var(--oh,100%);container-type:size;color:var(--on-n); background:url(/assets/img/sys/grid-curved.svg) center/cover no-repeat,linear-gradient(180deg,var(--night-0) 0%,var(--night-1) 58%,var(--night-2) 100%); clip-path:var(--oo,inset(0 0 0 0));transition:clip-path 760ms var(--ease-open),visibility 0s linear 0s} .ds.is-oout .ds__o{clip-path:var(--oc,inset(0 0 0 0));visibility:hidden;pointer-events:none; transition:clip-path 640ms var(--ease-swap) 200ms,visibility 0s linear var(--o-hide,860ms)} .ds__oin{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start; padding:clamp(16px,6cqmin,64px) clamp(18px,7cqw,88px);clip-path:inset(0 0 0 0);transition:clip-path 700ms var(--ease-open) 240ms} .ds.is-oout .ds__oin{clip-path:inset(0 0 100% 0);transition:clip-path 280ms var(--ease-leave)} .ds--i .ds__o,.ds--i .ds__oin{transition:none!important} .ds__eye{margin-bottom:clamp(12px,3cqh,22px)} .ds__o .ds__eye{color:var(--on-n-3)} .ds__o .ds__h{font-size:clamp(24px,min(8cqw,11cqh),60px);line-height:1.04;letter-spacing:-.016em;color:var(--on-n);max-width:14em;text-wrap:balance} .ds__o .ds__lead{margin-top:clamp(12px,3.4cqh,26px);font-size:clamp(15px,min(4.4cqw,5.4cqh),21px);line-height:1.45;color:var(--on-n-2);max-width:32em} /* ---- the pin */ .ds__pin{position:relative;height:400vh} .ds__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip} @media(hover:none){.ds__pin{height:400vh;height:400svh}} .ds__grid{height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto 1fr;column-gap:var(--gap);padding-top:calc(var(--hd) + 20px);padding-bottom:24px} .ds__rail{grid-column:1/4;grid-row:2;min-width:0} .ds__main{grid-column:4/13;grid-row:2;position:relative;min-width:0} /* ---- the rail: the photograph, the clock, the four nodes, the note */ .ds__ph{position:relative;overflow:clip;isolation:isolate;width:min(100%,calc((100svh - var(--hd) - 400px) * .8));aspect-ratio:4/5;border-radius:var(--r-media);background:var(--hair);box-shadow:var(--sh-1)} .ds__pic{position:absolute;left:0;top:-25%;width:100%;height:150%;max-width:none;object-fit:cover} .ds__rd{margin-top:22px} .ds__clk{display:flex;flex-direction:column;gap:6px} .ds__time{display:inline-flex;align-items:flex-start;font-family:var(--sans);font-weight:300;font-size:40px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)} .ds__d{display:inline-block;height:1em;overflow:clip} .ds__ds{display:block;white-space:pre;line-height:1;will-change:transform;transition:transform 420ms var(--ease-quart)} .ds__steps{position:relative;display:grid;gap:12px;margin-top:22px} .ds__st{position:relative;display:flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:500;font-size:15px;line-height:20px;color:var(--ink-3);transition:color 180ms} .ds__st .node{position:relative;z-index:1;background:var(--mist);box-shadow:inset 0 0 0 1px var(--ink-3);transition:background-color 180ms,box-shadow 180ms} .ds__st.is-past{color:var(--ink-2)} .ds__st.is-past .node{background:var(--ink);box-shadow:none} .ds__st.is-on{color:var(--ink)} .ds__st.is-on .node{background:var(--teal);box-shadow:none} .ds__sn{min-width:18px;font-size:12px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--ink-3)} .ds__thr{position:absolute;left:3px;top:10px;bottom:10px;width:1px;background:var(--hair)} .ds__thf{position:absolute;inset:0;background:var(--ink);transform-origin:50% 0;transform:scaleY(0)} .ds__recon{margin-top:22px;padding-top:14px;border-top:1px solid var(--hair);font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink-3);max-width:34em} .ds__recon b{font-weight:600;color:var(--ink-2)} /* ---- the frame (width written by the script from the available height) */ .ds__fw{position:relative;width:100%;transform-origin:50% 30%} .ds__frame{width:100%} .ds__win{container-type:inline-size;background:var(--night-1)} /* the search page at 01:12, in its night mode: 1000 logical px wide, 16px base at that width, the house's curved grid faint behind it */ .ds__sp{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:1.25em;padding:0 9em;font-size:1.6cqw;color:var(--on-n); background:url(/assets/img/sys/grid-curved.svg) center/cover no-repeat,linear-gradient(180deg,var(--night-0) 0%,var(--night-1) 58%,var(--night-2) 100%)} /* the caret is taken out of the flow here: as an inline-block it is a break opportunity, and a word could wrap at the caret for one frame (layout shift) */ .ds__sp .ty__c{position:absolute;width:1.5px;margin:.05em 0 0 -.75px} .ds__q{position:relative;display:flex;align-items:flex-start;gap:.85em;padding:1em 1.25em;border-radius:.75em;background:var(--night-0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 1.2em 2.4em -1.4em rgba(0,0,0,.6); font-family:var(--sans);font-weight:500;font-size:1.125em;line-height:1.45;transform:translate3d(0,var(--ds-fy,0px),0);transition:transform 700ms var(--ease-swap)} .ds__q .node{width:.45em;height:.45em;margin-top:.5em;background:var(--on-n-3)} .ds__qw{position:relative;flex:1;min-width:0} .ds__qp{position:absolute;left:4px;top:0;color:var(--on-n-3);font-weight:400;white-space:nowrap;pointer-events:none} .ds.is-q .ds__qp{visibility:hidden} .ds.is-s2 .ds__q{transform:none} .ds__card{padding:1.5em 1.75em 1.55em;border-radius:.75em;background:var(--night-0);box-shadow:inset 0 0 0 1px var(--hair-n),0 1.4em 2.8em -1.6em rgba(0,0,0,.7);clip-path:inset(0 0 100% 0 round .75em);transition:clip-path 700ms var(--ease-open)} .ds.is-s2 .ds__card{clip-path:inset(0 0 0 0 round .75em)} .ds__al{display:flex;align-items:center;gap:.65em;font-family:var(--sans);font-weight:600;font-size:.75em;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--on-n-3)} .ds__al .node{width:.6em;height:.6em;background:var(--teal)} .ds__ans{margin-top:.55em;font-family:var(--serif);font-weight:400;font-size:1.5em;line-height:1.42;color:var(--on-n)} .ds__src{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin-top:1.1em;padding-top:1em;border-top:1px solid var(--hair-n)} .ds__sl2{margin-right:.4em;font-family:var(--sans);font-weight:600;font-size:.75em;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--on-n-3)} .ds__chip{display:inline-flex;align-items:center;gap:.55em;height:2.2em;padding:0 .9em;border-radius:.77em;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); font-family:var(--sans);font-weight:500;font-size:.8125em;line-height:1;color:var(--on-n-2);white-space:nowrap;clip-path:inset(0 100% 0 0 round .77em);transition:clip-path 560ms var(--ease-open) var(--dl,0ms),transform 160ms var(--ease-swap)} .ds__chip--c{box-shadow:inset 0 0 0 1px var(--teal);color:var(--on-n)} .ds__chip .node{width:.5em;height:.5em;background:var(--teal)} .ds.is-src .ds__chip{clip-path:inset(0 0 0 0 round .77em)} .ds__chip.is-press{transform:scale(.94)} /* the visit: MGNI's site opens down the window, then walks with the hold law */ .ds__site{position:absolute;inset:0;z-index:2;overflow:clip;background:var(--night-1);clip-path:inset(0 0 100% 0);transition:clip-path 800ms var(--ease-swap)} .ds.is-site .ds__site{clip-path:inset(0 0 0 0)} .ds__site--p{display:none} /* each capture loses its top 4px: two of them carry a white hairline at the top edge, and a scaled (mipmapped) layer would bleed it under the bar. The note nodes are placed with the same crop (the fx script reads --ds-crop). */ .ds__win{--ds-crop:4px} .ds__win .fr__shot{position:relative;overflow:clip} .ds__win .fr__shot img{position:absolute;left:0;top:calc(-1 * var(--ds-crop));width:100%;height:calc(100% + var(--ds-crop));object-fit:cover;object-position:top} .ds__veil{position:absolute;inset:0;z-index:3;background:var(--night-2);opacity:0;pointer-events:none} /* ---- the note shelf under the browser: two slots, at most two notes */ .ds__shelf{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);margin-top:20px} .ds__nt{display:flex;align-items:flex-start;gap:12px;min-height:50px} .ds__nt .node{margin-top:5px;background:var(--ink-3);transition:background-color 180ms} .ds__nt .lab{transition:color 180ms} .ds__nl{margin-top:3px;font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--ink-3);transition:color 180ms} .ds__slot.is-cur .node{background:var(--teal)} .ds__slot.is-cur .lab{color:var(--ink-2)} .ds__slot.is-cur .ds__nl{color:var(--ink)} /* the leader: a node on the capture, a 1px line down the gutter, to the shelf */ .ds__ld{position:absolute;left:0;top:0;z-index:6;overflow:visible;pointer-events:none} .ds__ld path{fill:none;stroke:var(--teal);stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 240ms var(--ease-leave)} .ds__ld path.on{stroke-dashoffset:0;transition:stroke-dashoffset 600ms var(--ease-open)} .ds__mk{position:absolute;left:0;top:0;z-index:6;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:2px;background:var(--teal); box-shadow:0 0 0 3px rgba(8,10,16,.5),0 0 0 4px rgba(255,255,255,.6);transform:scale(0);transition:transform 220ms var(--ease-leave);pointer-events:none} .ds__mk.on{transform:scale(1);transition:transform 420ms var(--ease-open)} /* ---- the caption line under the phone (touch), with a teal tick pointing up */ .ds__cap{display:none;flex-direction:column;align-items:center;margin-top:12px;text-align:center} .ds__tk{display:block;width:2px;height:12px;background:var(--teal);transform:scaleY(0);transform-origin:50% 100%;transition:transform 400ms var(--ease-open)} .ds.is-note .ds__tk{transform:scaleY(1)} .ds__cap .relay{margin-top:8px} .ds__cl{display:flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--ink)} /* the case link is a 44px tap target; every caption shares its row height, so the relay never jumps */ .ds__cl--go .u{display:inline-flex;align-items:center;min-height:44px;font-size:16px;padding:0} /* ---- the decision, set over the window as the frame steps back */ .ds__dec{position:absolute;z-index:5;left:var(--dx,0px);top:var(--dy,0px);width:var(--dw,100%);height:var(--dh,100%);display:flex;flex-direction:column;justify-content:center;align-items:flex-start; padding:0 5em;font-size:var(--dk,16px);color:var(--on-n);pointer-events:none;visibility:hidden;transition:visibility 0s linear 420ms} .ds.is-dec .ds__dec{visibility:visible;pointer-events:auto;transition-delay:0s} .ds__close{font-weight:300;font-size:3.3em;line-height:1.04;letter-spacing:-.02em;color:var(--on-n);text-wrap:balance} .ds__close .w>i{transform:translate3d(0,105%,0);transition:transform 260ms var(--ease-leave)} .ds.is-dec .ds__close .w>i{transform:none;transition:transform 820ms var(--ease-line) var(--dl,0ms)} .ds__rl{display:block;width:100%;height:1px;margin:1.6em 0 1.5em;background:rgba(255,255,255,.22);transform:scaleX(0);transform-origin:0 50%;transition:transform 260ms var(--ease-leave)} .ds.is-dec .ds__rl{transform:scaleX(1);transition:transform 700ms var(--ease-open) 220ms} .ds__fig{display:flex;align-items:flex-end;gap:1.5em} .ds__m{display:block;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em} .ds__mi{display:block;transform:translate3d(0,105%,0);transition:transform 260ms var(--ease-leave)} .ds.is-dec .ds__mi{transform:none;transition:transform 760ms var(--ease-line) var(--dl,320ms)} .ds__fig .ds__m+.ds__m .ds__mi{--dl:420ms} .ds__gom .ds__mi{--dl:520ms} .ds__n{font-size:6.2em;color:var(--on-n)} .ds__fc{max-width:17em;padding-bottom:.95em;font-family:var(--sans);font-size:1em;line-height:1.45;color:var(--on-n-2)} .ds__gom{align-self:stretch;margin-top:1.4em} .ds__go{font-size:max(15px,1em);color:var(--on-n);white-space:nowrap} /* ---- a narrower side rail from 700 to 999px */ @media(min-width:700px) and (max-width:999px){ .ds__rail{grid-column:1/5} .ds__main{grid-column:5/13} .ds__time{font-size:34px} .ds__sn{display:none} } /* ---- the top readout on phones: photo, clock and nodes in a row, the note under */ @media(max-width:699px){ .ds__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;row-gap:14px;padding-top:calc(var(--hd) + 12px);padding-bottom:16px} .ds__rail{grid-column:1;grid-row:2;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;align-items:start} .ds__ph{width:64px;border-radius:10px} .ds__rd{display:flex;flex-direction:column;justify-content:space-between;height:80px;margin-top:0} .ds__clk{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px} .ds__time{font-size:26px} .ds__steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:0} .ds__st{flex-direction:column;align-items:flex-start;gap:8px;font-size:13px;line-height:16px} .ds__sn{display:none} .ds__thr{left:3px;top:3px;bottom:auto;width:75%;height:1px} .ds__thf{transform-origin:0 50%;transform:scaleX(0)} .ds__recon{grid-column:1/-1;margin-top:12px;padding-top:10px;max-width:none} .ds__main{grid-column:1;grid-row:3} } /* short phones (an SE, Safari with its bars): the readout gives the phone room */ @media(max-width:699px) and (max-height:720px){ .ds__grid{row-gap:10px;padding-top:calc(var(--hd) + 8px);padding-bottom:10px} .ds__recon{margin-top:8px;padding-top:8px;font-size:12px;line-height:1.45} } /* ---- the phone (touch, or a narrow window): no bar, a 9:19.5 screen, one caption line */ @media(hover:none),(max-width:699px){ .ds__frame{--ar:.4615;--bz:min(10px,calc(var(--pw,300px) * .034));border-radius:min(44px,calc(var(--pw,300px) * .147));padding:var(--bz);background:#0B0E15;box-shadow:var(--sh-2),inset 0 0 0 1px rgba(255,255,255,.12)} .ds__frame .fr__bar{display:none} .ds__frame .fr__win{border-radius:calc(min(44px,calc(var(--pw,300px) * .147)) - var(--bz))} .ds__main{display:flex;flex-direction:column;align-items:center} .ds__fw{width:min(100%,300px)} .ds__sp{font-size:5.714cqw;padding:0 1em;gap:.75em} .ds__q{font-size:1em;padding:.8em .9em;gap:.7em;border-radius:.9em} .ds__card{padding:1.05em 1.05em 1.1em;border-radius:.9em} .ds__ans{font-size:1.0625em;line-height:1.45} .ds__src{gap:.45em;margin-top:.9em;padding-top:.85em} .ds__sl2{flex-basis:100%;margin:0 0 .15em} /* read inside a phone 160px wide (an SE): the labels and the chips never under 9.5px, the answer never under 10.5px */ .ds__al,.ds__sl2{font-size:max(.75em,9.5px)} .ds__chip{font-size:max(.8125em,9.5px)} .ds__ans{font-size:max(1.0625em,10.5px)} .ds__q{font-size:max(1em,10px)} .ds__cap{margin-top:8px} .ds__cap .relay{margin-top:2px} .ds__site--d{display:none} .ds__site--p{display:block} .ds__shelf,.ds__ld,.ds__mk{display:none} .ds__cap{display:flex} .ds__dec{padding:0 1.6em} .ds__close{font-size:1.95em;line-height:1.08} .ds__rl{margin:1.1em 0 1em} .ds__fig{flex-direction:column;align-items:flex-start;gap:.3em} .ds__n{font-size:3.4em} /* the caption that makes the number honest: never under 10.5px, it wraps */ .ds__fc{padding-bottom:0;max-width:none;font-size:max(.95em,10.5px);line-height:1.4} .ds__gom{display:none} } /* ---- a phone on its side (852x393, 667x375): the phone lies down with it, a 19.5:9 screen as tall as the stage allows; the search page is set from the screen's height, the decision reads across it (the number beside its caption) */ @media(hover:none) and (max-height:500px) and (min-aspect-ratio:3/2){ .ds__grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto 1fr;row-gap:0;padding-top:calc(var(--hd) + 8px);padding-bottom:8px} /* the readout returns to a side rail, even under 700px wide */ .ds__rail{grid-column:1/5;grid-row:2;display:block} .ds__main{grid-column:5/13;grid-row:2} .ds__ph{display:none} .ds__rd{display:block;height:auto} .ds__clk{flex-direction:column;align-items:flex-start;gap:6px} .ds__time{font-size:30px} .ds__st{flex-direction:row;align-items:center;gap:10px;font-size:13px;line-height:18px} .ds__thr{left:3px;top:9px;bottom:9px;width:1px;height:auto} .ds__frame{--ar:2.1667} .ds__sp{font-size:1.92cqw;padding:0 2.4em;gap:.7em} .ds__card{padding:.9em 1.2em 1em} .ds__ans{margin-top:.35em;line-height:1.38} .ds__src{margin-top:.6em;padding-top:.6em} .ds__sl2{flex-basis:auto;margin:0 .4em 0 0} .ds__dec{padding:0 2.4em} .ds__close{font-size:2.1em} .ds__rl{margin:.8em 0 .7em} .ds__fig{flex-direction:row;align-items:flex-end;gap:1.1em} .ds__n{font-size:3.8em} .ds__fc{font-size:max(1.05em,11px);max-width:22em;padding-bottom:.55em} .ds__recon{font-size:12px;line-height:1.45;margin-top:14px;padding-top:10px} .ds__steps{grid-template-columns:none;gap:6px;margin-top:12px} .ds__rd{margin-top:0} } /* ---- no js-motion: the pin prints its composite */ html:not(.js-motion) .ds__pin{height:auto} html:not(.js-motion) .ds__stage{position:relative;height:auto;overflow:visible} html:not(.js-motion) .ds__grid{grid-template-rows:auto;padding-top:var(--sec);padding-bottom:var(--sec)} html:not(.js-motion) .ds__pic{top:0;height:100%} html:not(.js-motion) .ds__site{clip-path:none} html:not(.js-motion) .ds__sp{z-index:3;background:transparent;justify-content:flex-end;align-items:flex-end;padding:0 4% 4%} html:not(.js-motion) .ds__q,html:not(.js-motion) .ds__veil,html:not(.js-motion) .ds__ld,html:not(.js-motion) .ds__mk{display:none} html:not(.js-motion) .ds__card{width:60%;clip-path:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),var(--sh-panel)} html:not(.js-motion) .ds__chip{clip-path:none} html:not(.js-motion) .ds__st .node{background:var(--ink);box-shadow:none} html:not(.js-motion) .ds__st{color:var(--ink-2)} html:not(.js-motion) .ds .relay{display:grid;row-gap:14px} html:not(.js-motion) .ds .relay>.relay__i{grid-area:auto;display:block;visibility:visible} html:not(.js-motion) .ds .relay>.relay__i:has(>.ds__nt--0),html:not(.js-motion) .ds .relay>.relay__i:has(>.ds__cl--0){display:none} html:not(.js-motion) .ds .relay__in{transform:none} html:not(.js-motion) .ds__nt .node{background:var(--teal)} html:not(.js-motion) .ds__nl{color:var(--ink)} html:not(.js-motion) .ds__tk{transform:none} html:not(.js-motion) .ds__dec{position:static;visibility:visible;width:auto;height:auto;margin-top:clamp(40px,5vw,64px);padding:0;font-size:16px;color:var(--ink);pointer-events:auto} html:not(.js-motion) .ds__close{font-size:clamp(32px,3.6vw,56px);color:var(--ink)} html:not(.js-motion) .ds__rl{max-width:520px;background:var(--hair);transform:none} html:not(.js-motion) .ds__mi{transform:none} html:not(.js-motion) .ds__n{font-size:clamp(56px,6.4vw,104px);color:var(--ink)} html:not(.js-motion) .ds__fc{color:var(--ink-2)} html:not(.js-motion) .ds__go{color:var(--ink)} @media(hover:none),(max-width:699px){ html:not(.js-motion) .ds__gom{display:block} html:not(.js-motion) .ds .relay>.relay__i:has(.ds__cl--go){display:none} html:not(.js-motion) .ds__card{width:100%} html:not(.js-motion) .ds__dec{align-self:stretch} } /* no js-motion: the heading stands in the flow above the composite, ink on mist */ html:not(.js-motion) .ds__o{position:static;grid-column:1/-1;grid-row:1;width:auto;height:auto;margin-bottom:clamp(32px,4vw,56px); container-type:normal;background:none;clip-path:none;color:var(--ink)} html:not(.js-motion) .ds__oin{position:static;padding:0;clip-path:none} html:not(.js-motion) .ds__o .ds__eye{color:var(--ink-3)} html:not(.js-motion) .ds__o .ds__h{font-size:clamp(32px,3.6vw,56px);color:var(--ink)} html:not(.js-motion) .ds__o .ds__lead{font-size:22px;color:var(--ink-2)} @media(max-width:700px){html:not(.js-motion) .ds__o .ds__lead{font-size:19px}} /* ---- 43-stack.css ---- */ /* 43 · STACK (M13). Sticky night cards: each stops 14px under the one before it, so earlier cards stay as ledges; a covered card recedes (scale) under an ink veil tied to the scroll. Each card carries a live proof that runs once, only while its card is on top. The markup is the END state of every proof; stack.js arms the start state under html.js-motion. White variant: the dossier's Monday steps, a covered card lands a drawn check tick. */ .stk-sec__head{margin-bottom:clamp(28px,3.4vw,48px)} .stk-sec__head .lead{text-wrap:pretty} .stk-sec__rule{margin-bottom:clamp(40px,5vw,72px)} .stk{--stk-top:calc(var(--hd) + 3svh);--step:14px; --stk-h:min(80svh,calc(100svh - var(--hd) - 3svh - (var(--n,5) - 1) * var(--step) - 16px)); position:relative;display:flow-root;margin:0;padding:0;list-style:none} @media(hover:none){.stk{--stk-h:min(84svh,calc(100svh - var(--hd) - 3svh - (var(--n,5) - 1) * var(--step) - 12px))}} .stk__card{position:sticky;top:calc(var(--stk-top) + var(--i,0) * var(--step));height:var(--stk-h);z-index:calc(var(--i,0) + 1); transform-origin:50% 0;margin:0 0 calc(8svh + (var(--n,5) - 1 - var(--i,0)) * var(--step))} /* the margins step down by 14px so that, when the stack runs out, every card meets its limit at once and the deck leaves as one object, ledges intact */ .stk .stk__card.lp{margin-inline:0} .stk .stk__veil{position:absolute;inset:0;z-index:8;border-radius:inherit;background:var(--night-2);opacity:0;pointer-events:none} /* layers: the deck recedes by transform without repainting, and a running proof repaints only its own box, never the card's gradient, grain and grid */ html.js-motion .stk__card{will-change:transform} html.js-motion .stk__demo{will-change:transform} /* ---------------------------------------------------------------- night card */ .stk__in{height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:var(--gap); padding:clamp(24px,3.2vw,48px) clamp(24px,3.4vw,52px) clamp(28px,3.4vw,52px)} .stk__top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--hair-n)} .stk__no b{font-weight:500;color:var(--on-n)} .stk__who{display:flex;align-items:center;gap:10px} .stk__who .node{width:7px;height:7px} .stk__txt{grid-column:1/6;grid-row:2;display:flex;flex-direction:column;min-height:0;padding-top:clamp(28px,4.4vh,52px)} .stk__t{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.2vw,50px);line-height:1.04;letter-spacing:-.018em;color:#fff;text-wrap:balance} .stk__p{margin-top:clamp(16px,2.2vh,24px);font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.5;color:var(--on-n-2);max-width:28em;text-wrap:pretty} .stk__dl{margin-top:auto;padding-top:24px} .stk__dl li{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--hair-n);font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.3;color:var(--on-n)} .stk__dl li:last-child{border-bottom:1px solid var(--hair-n)} .stk__dl .node{width:7px;height:7px;background:rgba(242,244,248,.5)} .stk__demo{grid-column:7/13;grid-row:2;position:relative;min-height:0;margin-top:clamp(24px,3.6vh,40px);container-type:size; --pad:clamp(16px,5.4cqmin,40px);--c:rgba(255,255,255,.26)} /* registration corners: the proof is a viewport, not a picture */ .stk__demo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(var(--c),var(--c)) 0 0/12px 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1px 12px no-repeat, linear-gradient(var(--c),var(--c)) 100% 0/12px 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1px 12px no-repeat, linear-gradient(var(--c),var(--c)) 0 100%/12px 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1px 12px no-repeat, linear-gradient(var(--c),var(--c)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1px 12px no-repeat} /* ---------------------------------------------------------------- proofs, shared */ .sd{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:clamp(16px,6cqw,48px);padding:var(--pad)} .sd__art{position:relative;flex:none;display:flex;align-items:center;justify-content:center;min-width:0} .sd__fig{flex:0 1 auto;align-self:flex-end;min-width:0;max-width:15em} .sd__n{display:block;font-size:clamp(40px,15cqmin,96px);color:#fff;line-height:1} .sd.is-armed .sd__n{clip-path:inset(100% 0 0 0);transition:clip-path 520ms var(--ease-open)} .sd.is-armed .sd__n.is-on{clip-path:inset(-.1em -.1em -.2em -.1em)} .sd__cap{margin-top:12px;font-family:var(--sans);font-size:15px;line-height:1.4;color:var(--on-n-2);text-wrap:balance} /* intel: the dossier page travels inside a doc frame; two sheets wait behind */ /* the page is as tall as the box allows, but always leaves the counter its width */ .sd--intel{--figw:152px} .sd-doc{position:relative;--mat:clamp(6px,2.4cqmin,14px);--off:clamp(5px,1.6cqmin,10px); --wh:min(calc(100cqh - var(--pad) * 2 - var(--mat) * 2 - 3cqmin),calc((100cqw - var(--pad) * 2 - clamp(16px,6cqw,48px) - var(--figw) - var(--mat) * 2 - var(--off) * 2) / .7072))} .sd--intel .sd__fig{flex:none;width:var(--figw);max-width:none} .sd-doc__fr{position:relative;z-index:2;padding:var(--mat)} .sd-doc__fr .fr__win{height:var(--wh);width:calc(var(--wh) * .7072);aspect-ratio:auto;border-radius:3px;background:#F4EEE3} .sd-doc__p{position:absolute;left:0;top:0;width:210%;height:auto;max-width:none;transform-origin:0 0;transform:scale(.47619);will-change:transform} .sd-doc__bk{position:absolute;inset:0;z-index:1;border-radius:var(--r-frame);background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); transform:translate3d(var(--off),calc(var(--off) * -1),0);transition:transform 900ms var(--ease-open)} .sd-doc__bk--2{z-index:0;background:rgba(255,255,255,.025);transform:translate3d(calc(var(--off) * 2),calc(var(--off) * -2),0);transition-delay:90ms} .sd.is-armed .sd-doc__bk{transform:none} /* key: the key lifted out of the logo, at the logo's own scale, drawn beside it */ .sd--key{flex-direction:column} .sd-key{--L:min(calc((100cqw - var(--pad) * 2) / 1.3),calc((100cqh - var(--pad) * 2) * 1.35),460px);width:calc(var(--L) * 1.3)} .sd-key__row{display:flex;align-items:flex-start;gap:calc(var(--L) * .07)} .sd-key__draw{flex:none;width:calc(var(--L) * .2);height:calc(var(--L) * .44);overflow:visible} .sd-key__draw path{fill:none;stroke:var(--teal);stroke-width:7;stroke-linecap:round} .sd-key__draw .sd-key__t{stroke:rgba(255,255,255,.5)} .sd-key__logo{flex:none;width:var(--L);height:calc(var(--L) * .44);object-fit:contain;align-self:flex-start} .sd-key__cap{margin-top:calc(var(--L) * .1);max-width:26em;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(17px,4.2cqw,25px);line-height:1.34;color:var(--on-n);text-wrap:pretty} html.js-motion .sd.is-armed .sd-key__cap:not(.on) .w>i{transform:translate3d(0,105%,0)} /* italic overhangs (the f, the P's bowl) must not be cut: clip below only */ .sd-key__cap .w{overflow:visible;clip-path:inset(-.6em -.6em 0 -.6em)} /* posts: a 4:5 post frame, the carousel slides travel right to left */ .sd-post{--ph:min(calc(100cqh - var(--pad) * 2 - 26px),calc((100cqw - var(--pad) * 2) * .62 / .8));display:flex;flex-direction:column;align-items:center} .sd-post__fr{width:calc(var(--ph) * .8)} .sd-post__fr .fr__win{aspect-ratio:.8;background:#2A251E} .sd-post__strip{position:absolute;left:0;top:0;height:100%;display:flex;width:calc(var(--n) * 100%);transform:translate3d(calc((var(--n) - 1) / var(--n) * -100%),0,0);will-change:transform} .sd-post__strip>img{flex:none;width:calc(100% / var(--n));height:100%;object-fit:cover;object-position:top} .sd-post__dots{display:flex;gap:8px;margin-top:14px} .sd-post__dots .node{width:7px;height:7px;background:rgba(242,244,248,.26);transform:scale(.72);transition:transform 180ms var(--ease-open),background-color 180ms} .sd-post__dots .node.on{background:var(--teal);transform:none} /* web: the Arabic edition wipes in from the right while the chrome mirrors */ .sd--web{--fw:min(calc(100cqw - var(--pad) * 2),calc((100cqh - var(--pad) * 2 - 34px - var(--figh,96px)) * 1.6));flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,4cqmin,28px)} .sd-web__fr{width:var(--fw)} .sd-web__fr .fr__win{aspect-ratio:1.6;background:#15110D} .sd-web__fr .fr__win>img,.sd-web__wipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top} .sd-web__nodes{display:flex;gap:6px;flex:none;transition:transform 700ms var(--ease-swap)} .sd-web__fr .fr__addr{flex:none;width:min(58%,260px);max-width:none;transition:transform 700ms var(--ease-swap)} /* no JS: the core row-reverse; with JS: the exact mirror, by transform, so it travels */ .sd-web__fr.fr--rtl .fr__addr{text-align:right} html.js .sd-web__fr.fr--rtl .fr__bar{flex-direction:row} html.js .sd-web__fr.fr--rtl .fr__addr{margin:0 0 0 10px;transform:translate3d(var(--ax,0px),0,0)} html.js .sd-web__fr.fr--rtl .sd-web__nodes{transform:translate3d(var(--nx,0px),0,0)} .sd-web__wipe{clip-path:inset(0 0 0 0)} .sd-web__edge{position:absolute;top:0;bottom:0;left:0;z-index:3;width:1px;background:rgba(255,255,255,.85);box-shadow:0 0 0 .5px rgba(14,17,23,.25);transform:translate3d(-2px,0,0);pointer-events:none} .sd-web__edge::after{content:"";position:absolute;left:-.5px;top:calc(50% - 6px);width:2px;height:12px;background:var(--teal)} .sd--web .sd__fig{align-self:center;width:var(--fw);display:flex;align-items:baseline;gap:14px;max-width:none} .sd--web .sd__n{font-size:clamp(40px,12cqmin,80px)} .sd--web .sd__cap{margin-top:0;max-width:16em} /* channels: seven node rows lighting in turn down one thread */ .sd--channels{align-items:stretch} .sd--channels .sd__art{flex:1 1 auto;align-items:center} .sd-ch{position:relative;width:100%;--rh:min(calc((100cqh - var(--pad) * 2) / 7),58px)} .sd-ch__line{position:absolute;left:3px;top:calc(var(--rh) / 2);height:calc(var(--rh) * 6);width:1px;background:rgba(255,255,255,.34);transform-origin:50% 0} .sd-ch__list{position:relative} .sd-ch__r{position:relative;display:flex;align-items:center;gap:18px;height:var(--rh);font-family:var(--sans);font-weight:500;font-size:clamp(14px,3.6cqw,17px);line-height:1.2;color:var(--on-n)} .sd-ch__r::after{content:"";position:absolute;left:24px;right:0;bottom:0;height:1px;background:var(--hair-n);transform-origin:0 50%;transition:transform 600ms var(--ease-open)} .sd-ch__r .node{position:relative;z-index:1;width:7px;height:7px;background:var(--teal);transition:transform 180ms var(--ease-open),background-color 180ms} .sd-ch__l{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 240ms} .sd-ch__k{flex:none;font-size:12px;font-weight:500;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--on-n-3)} .sd.is-armed .sd-ch__r:not(.on) .node{background:#3A4458;transform:scale(.6)} .sd.is-armed .sd-ch__r:not(.on) .sd-ch__l{color:var(--on-n-3)} .sd.is-armed .sd-ch__r:not(.on)::after{transform:scaleX(0)} /* ---------------------------------------------------------------- touch and narrow: proof on top, text below (portrait touch tablets up to 1100px too: at 1024 the desktop split left a 420px proof column in a 1147px card, the proofs 6 to 9% of the card) */ @media(max-width:899px),(hover:none) and (orientation:portrait) and (max-width:1100px){ .stk__in{display:flex;flex-direction:column;padding:16px 18px 20px} .stk__top{padding-bottom:12px} .stk__demo{order:1;flex:0 0 42%;margin-top:12px;--pad:clamp(12px,4.6cqmin,24px);--figh:60px} .stk__txt{order:2;flex:1 1 auto;padding-top:18px} .stk__t{font-size:clamp(26px,7vw,34px)} .stk__p{margin-top:10px;font-size:18px;line-height:1.48} .stk__dl{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;padding-top:14px} .stk__dl li{gap:9px;padding:8px 0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:var(--on-n-2)} .stk__dl li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--hair-n)} .stk__dl .node{width:5px;height:5px} .sd{gap:clamp(12px,5cqw,28px)} .sd__cap{font-size:14px;margin-top:8px} } /* tablets on end: a larger proof, then the sentence and the deliverables side by side */ @media(min-width:600px) and (max-width:899px),(hover:none) and (orientation:portrait) and (min-width:600px) and (max-width:1100px){ .stk__in{padding:22px 28px 28px} .stk__demo{flex-basis:58%;margin-top:18px} .stk__txt{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:36px;align-content:start;padding-top:30px} .stk__t,.stk__p{grid-column:1} .stk__t{font-size:36px} .stk__dl{grid-column:2;grid-row:1/span 2;display:block;margin-top:0;padding-top:6px} .stk__dl li{padding:10px 0;font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--on-n)} .stk__dl li:nth-last-child(2):nth-child(odd){border-bottom:0} .stk__dl .node{width:7px;height:7px} } @media(max-width:899px) and (max-height:700px){ .stk__in{padding-top:12px} .stk__top{padding-bottom:10px} .stk__demo{flex-basis:32%;margin-top:10px} .stk__txt{padding-top:12px} .stk__t{font-size:25px} .stk__p{font-size:18px;line-height:1.42;margin-top:6px} /* the deliverables run as one line of nodes, so the sentence keeps 18px */ .stk__dl{display:flex;flex-wrap:wrap;gap:3px 14px;padding-top:10px} .stk__dl li,.stk__dl li:last-child,.stk__dl li:nth-last-child(2):nth-child(odd){border:0;padding:0;gap:7px;font-size:12px;letter-spacing:.08em} } /* phones: the tags and the slates are read at 12px or more even while their card recedes (scale .94 under the next one): 13px set, 12.2px seen */ @media(max-width:699px){ .stk__dl li,.stk__dl li:last-child,.stk__dl li:nth-last-child(2):nth-child(odd){font-size:13px;letter-spacing:.08em} .stk__no,.stk__who{font-size:13px} } /* a large tablet on end (an iPad Pro, 1024x1366): the proof takes every pixel the sentence leaves, so a 1147px card is a large proof over its text */ @media(hover:none) and (orientation:portrait) and (min-width:900px) and (max-width:1100px){ .stk__demo{flex:1 1 auto} .stk__txt{flex:none;padding-bottom:8px} .stk__t{font-size:40px} .stk__p{font-size:20px} } /* short and narrow (320x568): the content stood 460 to 513px in a 427px card and the tags were cut. Shallower ledges give the card 460px; the sentence is set at 15px, the tags in sentence case, and the proof keeps 38% of the card */ @media(max-width:899px) and (max-height:600px) and (max-aspect-ratio:3/4){ .stk{--step:9px;--stk-top:calc(var(--hd) + 8px);--stk-h:calc(100svh - var(--hd) - 16px - (var(--n,5) - 1) * var(--step))} .stk__in{padding:10px 16px 14px} .stk__top{padding-bottom:8px} .stk__no{flex:none;white-space:nowrap} .stk__who{text-align:right} .stk__demo{flex-basis:38%;margin-top:8px;--pad:10px} .stk__txt{padding-top:10px} .stk__t{font-size:23px} .stk__p{font-size:15px;line-height:1.42;margin-top:6px} .stk__dl{padding-top:8px;gap:3px 12px} .stk__dl li,.stk__dl li:last-child,.stk__dl li:nth-last-child(2):nth-child(odd){font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--on-n)} } /* the flat fallback when a card still cannot hold its content (a large text setting): the card grows to its content, the proof keeps a fixed height */ .stk.is-grow .stk__card{height:auto} .stk.is-grow .stk__in{height:auto} .stk.is-grow .stk__demo{flex:none;height:clamp(180px,42svh,440px)} /* narrow proof boxes: the channel count reads above its seven rows */ @container (max-width:520px){ .sd--intel{--figw:126px} .sd--channels{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px} .sd--channels .sd__fig{order:-1;align-self:flex-start;display:flex;align-items:baseline;gap:12px;max-width:none} .sd--channels .sd__n{font-size:clamp(34px,11cqmin,48px)} .sd--channels .sd__cap{margin-top:0} .sd-ch{--rh:min(calc((100cqh - var(--pad) * 2 - 60px) / 7),44px)} .sd-ch__k{display:none} } /* small proof boxes (phones): tighter figures, the web counter beside the frame */ @container (max-height:240px){ .sd__n{font-size:clamp(34px,20cqh,56px)} .sd-ch{--rh:calc((100cqh - var(--pad) * 2) / 7)} .sd-ch__r{gap:12px;font-size:13px} .sd-ch__r::after{left:18px} .sd-ch__k{display:none} .sd-post__dots{margin-top:8px;gap:6px} .sd-post{--ph:calc(100cqh - var(--pad) * 2 - 16px)} } @container (max-height:240px) and (min-aspect-ratio:17/10){ .sd--web{--fw:min(calc(100cqw - var(--pad) * 2 - 130px),calc((100cqh - var(--pad) * 2 - 34px) * 1.6));flex-direction:row;align-items:center} .sd--web .sd__fig{width:auto;flex-direction:column;gap:6px;align-self:center} .sd--web .sd__cap{max-width:9em} } @container (max-height:180px){ .sd-key{width:100%;--L:min(calc((100cqw - var(--pad) * 2) / 1.3),calc((100cqh - var(--pad) * 2 - 58px) * 2.27))} .sd-key__row{justify-content:center} .sd-key__cap{max-width:none;font-size:14px;line-height:1.3;text-align:center} .sd__cap{font-size:13px;margin-top:6px} /* seven rows at 19px, the count beside them */ .sd--channels{flex-direction:row;align-items:stretch;gap:10px} .sd--channels .sd__fig{order:0;flex-direction:column;align-self:flex-end;gap:4px;max-width:5.4em} .sd--channels .sd__cap{margin-top:0} .sd-ch{--rh:calc((100cqh - var(--pad) * 2) / 7)} .sd-ch__r{font-size:13px} .sd-ch__r::after{background:rgba(255,255,255,.07)} /* the browser chrome at a third less */ .sd-web__fr .fr__bar{height:24px;padding:0 8px;gap:4px} .sd-web__nodes{gap:4px} .sd-web__fr .fr__bar .node{width:5px;height:5px} .sd-web__fr .fr__addr{width:64%;height:17px;line-height:17px;font-size:10px;padding:0 7px;margin-left:6px} .sd--web{--fw:min(calc(100cqw - var(--pad) * 2 - 108px),calc((100cqh - var(--pad) * 2 - 24px) * 1.6))} .sd--web .sd__cap{max-width:8em} } /* narrow and short proof boxes (a 320px phone): the seven channels take the box's whole width, so no name is cut with an ellipsis, and the count sits in the corner the short names leave free (no hairline under the rows crosses it); the Arabic edition's frame and its count stand side by side */ @container (max-width:300px) and (max-height:240px){ .sd--channels{display:block} .sd--channels .sd__art{display:block;height:100%} .sd-ch{--rh:calc((100cqh - var(--pad) * 2) / 7)} .sd-ch__r{gap:12px;font-size:13px} .sd-ch__r::after{display:none} .sd--channels .sd__fig{position:absolute;right:var(--pad);bottom:var(--pad);display:block;max-width:7.2em;text-align:right} .sd--channels .sd__n{font-size:34px} .sd--channels .sd__cap{margin-top:4px;font-size:13px} .sd--web{--fw:min(calc(100cqw - var(--pad) * 2 - 96px),calc((100cqh - var(--pad) * 2 - 24px) * 1.6));flex-direction:row;align-items:center;gap:12px} .sd--web .sd__fig{width:auto;flex-direction:column;gap:4px;align-self:center} .sd--web .sd__n{font-size:34px} .sd--web .sd__cap{max-width:6.2em;font-size:13px} .sd-web__fr .fr__addr{width:auto;flex:1 1 auto;min-width:0;padding:0 5px} } /* ---------------------------------------------------------------- a phone on its side (852x393, 667x375) Short and wide: the column layout left a 67px proof and cut the sentence at the card's foot. The card takes the height the header leaves, and text and proof sit side by side again, as on desktop; the seven channels read as seven 28px rows with their count beside them, never on top of each other. */ @media(max-width:899px) and (max-height:500px) and (min-aspect-ratio:3/2){ .stk{--step:8px;--stk-top:calc(var(--hd) + 8px);--stk-h:calc(100svh - var(--hd) - 16px - (var(--n,5) - 1) * var(--step))} /* the deck holds 40svh longer: a spacer after the last card gives every card, the last one included, 40svh more of the stack to stick in, so card 05 stays whole on screen while its seven channels light */ .stk::after{content:"";display:block;height:40svh} .stk__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:20px;padding:10px 20px 14px} .stk__top{padding-bottom:8px} .stk__txt{grid-column:1/7;grid-row:2;display:flex;padding-top:12px} .stk__demo{grid-column:7/13;grid-row:2;order:0;flex:none;margin-top:12px;--pad:12px} .stk__t{font-size:24px} .stk__p{margin-top:8px;font-size:16px;line-height:1.42} .stk__dl{display:flex;flex-wrap:wrap;gap:4px 16px;padding-top:10px} /* the tags in sentence case: two to a line, 13px, never over the card's foot */ .stk__dl li,.stk__dl li:last-child,.stk__dl li:nth-last-child(2):nth-child(odd){border:0;padding:0;gap:7px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--on-n)} .stk__no,.stk__who{font-size:13px} .sd--web{--fw:min(calc(100cqw - var(--pad) * 2 - 118px),calc((100cqh - var(--pad) * 2 - 34px) * 1.6));flex-direction:row;align-items:center;justify-content:center} .sd--web .sd__fig{width:auto;flex-direction:column;gap:6px;align-self:center} .sd--web .sd__n{font-size:40px} .sd--web .sd__cap{max-width:8em;font-size:13px} .sd-web__fr .fr__addr{width:66%;font-size:11px;padding:0 8px} .sd--channels{flex-direction:row;align-items:stretch;justify-content:center;gap:14px} .sd--channels .sd__fig{order:0;flex:none;display:block;align-self:flex-end;max-width:6.4em} .sd--channels .sd__n{font-size:40px} .sd--channels .sd__cap{margin-top:4px;font-size:13px} .sd-ch{--rh:calc((100cqh - var(--pad) * 2) / 7)} .sd-ch__r{gap:12px;font-size:13px} .sd-ch__r::after{left:18px} .sd-ch__k{display:none} } @media(max-width:760px) and (max-height:500px) and (min-aspect-ratio:3/2){ .stk__txt{grid-column:1/8} .stk__demo{grid-column:8/13} .stk__p{font-size:15px;line-height:1.4} /* the narrower proof: the channel count reads above its seven full-width rows */ .sd--channels{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px} .sd--channels .sd__fig{order:-1;display:flex;align-items:baseline;align-self:flex-start;gap:10px;max-width:none} .sd--channels .sd__n{font-size:30px} .sd--channels .sd__cap{margin-top:0} .sd-ch{--rh:calc((100cqh - var(--pad) * 2 - 44px) / 7)} } /* ---------------------------------------------------------------- white variant: the Monday steps */ .stk-mon__w{max-width:960px} .stk-mon__h{margin-bottom:clamp(28px,4vw,48px)} .stk--white{--stk-top:calc(var(--hd) + 12svh);--step:14px} .stk--white .stk__card{height:var(--mon-h,auto);background:var(--white);border-radius:var(--r-panel);box-shadow:var(--sh-1),inset 0 0 0 1px var(--hair-2);margin-bottom:calc(6svh + (var(--n,5) - 1 - var(--i,0)) * var(--step));overflow:clip} .stk--white .stk__veil{background:var(--ink)} .stk--white .stk__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:none;align-items:start;column-gap:clamp(18px,3vw,40px);padding:clamp(24px,3vw,40px) clamp(22px,3.4vw,48px)} .stk__num{font-family:var(--sans);font-weight:300;font-size:clamp(40px,4.4vw,56px);line-height:.86;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)} .stk__step{padding-top:4px;font-family:var(--serif);font-size:20px;line-height:1.62;color:var(--ink-2);max-width:40em;text-wrap:pretty} .stk__step strong{font-weight:500;color:var(--ink)} .stk__tick{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hair)} .stk__tick svg{width:24px;height:24px} .stk__tick path{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0} html.js-motion .stk--white .stk__card:not(.is-done) .stk__tick path{stroke-dashoffset:1} .stk--white .stk__card.is-done .stk__tick path{transition:stroke-dashoffset 700ms var(--ease-open)} .stk--white .stk__card.is-done .stk__tick{box-shadow:inset 0 0 0 1px rgba(14,17,23,.28);transition:box-shadow 400ms} @media(max-width:700px){ .stk--white .stk__in{grid-template-columns:minmax(0,1fr) auto;row-gap:14px;padding:20px 20px 24px} .stk__num{font-size:40px} .stk__step{grid-column:1/-1;grid-row:2;padding-top:0;font-size:18px;line-height:1.6} .stk__tick{grid-column:2;grid-row:1} } /* ---------------------------------------------------------------- reduced motion and no JS: a column, every proof at its end */ html:not(.js-motion) .stk__card{position:relative;top:auto;margin-bottom:24px} html:not(.js-motion) .stk--white .stk__card{height:auto;margin-bottom:16px} .stk.is-flat .stk__card{position:relative;top:auto;margin-bottom:16px;transform:none!important} .stk.is-flat .stk__veil{opacity:0!important} /* ---- 44-aperture.css ---- */ /* 44 · APERTURE (M14). The White Desert rail: tall lights, one open (52%), the rest fallen back under an ink veil with a vertical name. Every light is a layer the full width of the rail; only its window (a clip-path) changes. The picture inside is a box the size of the OPEN window, carried to the centre of its window on the same curve, so it is never squeezed. Touch pins the rail and opens floor(p x n); a portrait touch stage stands the rail on end (.ap--band) with the photographs fixed at 100svh. Without motion: a column of open panels. JS (fx/aperture.js) writes --ow/--oh (open box), --tz (film text zone) and, per light, the clip-path and the box transforms. */ .ap{position:relative;--ap-r:16px;--ap-pad:clamp(20px,2.2vw,32px)} .ap__stage{position:relative} .ap__rail{position:relative} .ap__l{position:relative;display:block;color:var(--on-n);background:#0B0E15;overflow:clip;-webkit-tap-highlight-color:transparent;text-decoration:none} .ap__l:focus-visible{outline:none;box-shadow:none} .ap__pic,.ap__box{position:absolute;left:0;top:0;width:100%;height:100%} .ap__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:calc(var(--fx,.5) * 100%) calc(var(--fy,.5) * 100%)} .ap__veil,.ap__scrim{position:absolute;inset:0;pointer-events:none} .ap__veil{background:#080A11;opacity:0} /* the scrim is measured: --th is the height of this light's text block from the bottom of its window (fx/aperture.js), so the ink is at least .7 under the top line of text whatever the photograph does there (white paper included: 7:1), then it fades out over --fade above the text. */ .ap__scrim{--fade:220px;background:linear-gradient(to top,rgba(8,10,16,.86) 0,rgba(8,10,16,.72) var(--th,42%),rgba(8,10,16,.34) calc(var(--th,42%) + var(--fade) * .45),rgba(8,10,16,0) calc(var(--th,42%) + var(--fade)))} .ap--film .ap__scrim{background:linear-gradient(to top,rgba(8,10,16,.5) 0%,rgba(8,10,16,0) 46%)} /* ambient field of a film light: its poster, reduced to light */ .ap__amb{position:absolute;inset:0;background:#0B0E15 center/cover no-repeat} .ap__amb::after{content:"";position:absolute;inset:0;background:url(/assets/img/sys/grain-128.png) repeat,url(/assets/img/sys/grid-curved.svg) center/cover no-repeat;opacity:.9} /* the still of a film or site light: a text-free frame that a SHUT sliver shows; it closes toward the centre line as the light opens (fx script) */ .ap__still{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:fill;transform-origin:0 0;pointer-events:none} .ap:not(.is-live) .ap__still{display:none} /* the film zone: whole film, native ratio, in a screen or a phone */ .ap__zone{position:absolute;left:var(--ap-pad);right:var(--ap-pad);top:var(--ap-pad);bottom:var(--tz,260px);container-type:size;display:grid;place-items:center} .ap__scr{position:relative;margin:0;--pw:min(100cqw,100cqh * var(--ar));width:var(--pw);aspect-ratio:var(--ar);border-radius:12px;overflow:clip;background:#0B0E15; box-shadow:0 40px 80px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.10)} .ap__scr .film{position:absolute;inset:0;border-radius:inherit} .ap__scr--phone{--ar:.4615;border-radius:calc(var(--pw) * .15);padding:calc(var(--pw) * .034);background:#0B0E15; box-shadow:0 40px 80px -40px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.14)} .ap__win{position:relative;width:100%;height:100%;border-radius:calc(var(--pw) * .115);overflow:clip;background:#000} .ap__scr--phone .film{border-radius:inherit;background:#000} .ap__scr--phone .film>img,.ap__scr--phone .film>video{object-fit:contain} /* a site light: the client's pages in our browser frame (a bar, three square nodes, a human page name), cut one to the next while the light is open */ .ap__scr--site{--pw:min(100cqw,(100cqh - 34px) * 1.6);aspect-ratio:auto;border-radius:var(--r-frame)} .ap__scr--site .fr__win{aspect-ratio:1.6;background:#15110D} .ap--film:not(.is-live) .ap__scr--site{--pw:100cqw} /* the shut label: a number and a name that reads bottom to top, centred in the sliver */ .ap__shut{position:absolute;left:0;right:0;bottom:var(--ap-pad);display:flex;justify-content:center;overflow:clip;pointer-events:none} .ap__shin{display:flex;flex-direction:column;align-items:center;gap:14px} .ap__name{writing-mode:vertical-rl;transform:rotate(180deg);font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap} .ap__num{font:500 12px/1 var(--sans);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:rgba(242,244,248,.78)} /* the open text */ .ap__open{position:absolute;left:var(--ap-pad);right:var(--ap-pad);bottom:var(--ap-pad);max-width:36em} .ap__o{display:block;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em} .ap__oi{display:block} .ap__lab{font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,244,248,.8)} .ap__t{margin-top:12px;font-family:var(--serif);font-weight:300;font-size:clamp(28px,2.5vw,36px);line-height:1.08;letter-spacing:-.012em;color:#fff;text-wrap:balance} .ap__line{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.3vw,20px);line-height:1.42;color:rgba(242,244,248,.84);max-width:26em;text-wrap:pretty} .ap__lab+.ap__line{margin-top:14px;font-weight:300;font-size:clamp(22px,1.9vw,28px);line-height:1.24;color:#fff;max-width:20em;text-wrap:balance} .ap__foot{margin-top:20px;padding:10px;margin-left:-10px;margin-right:-10px;margin-bottom:-10px} .ap__foot>.ap__oi{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-top:16px} .ap__fig{display:flex;align-items:baseline;gap:12px;min-width:0} .ap__ct{font-size:clamp(34px,2.9vw,44px);color:#fff} .ap__figl{font:400 14px/1.35 var(--sans);color:rgba(242,244,248,.78);max-width:14em} .ap .ap__cta{height:44px;padding:0 18px;gap:10px;background:#fff;color:var(--ink);box-shadow:none;flex:none} .ap__cred{margin-top:12px} .ap__cred .slate{color:rgba(242,244,248,.66)} /* focus: a teal ring drawn inside the open window */ .ap__l:focus-visible .ap__box::after{content:"";position:absolute;inset:2px;border-radius:14px;box-shadow:inset 0 0 0 2px var(--teal);pointer-events:none} /* ---------------------------------------------------------------- live rail */ html.js-motion .ap.is-live .ap__rail{height:clamp(460px,80svh,960px)} /* the windows, the boxes and the pictures carry no transition: fx/aperture.js writes them every frame from one tween, so neighbouring edges share a clock */ .ap.is-live .ap__l{position:absolute;inset:0;border-radius:0;clip-path:inset(0 50% 0 50% round var(--ap-r))} .ap.is-live .ap__pic,.ap.is-live .ap__box{width:var(--ow,calc((100% - (var(--n,4) - 1) * 2px) * .52));height:var(--oh,100%)} .ap.is-live .ap__zone{will-change:clip-path} /* before the script: the rail already holds the size it will have live (so nothing below it moves when it wakes), its lights not yet drawn; if the script never comes, the column of panels shows after 3.2s */ html.js-motion .ap:not(.is-live) .ap__rail{height:clamp(460px,80svh,960px);visibility:hidden;overflow:clip;animation:ap-failsafe 0s 3.2s forwards} @media(hover:none){html.js-motion .ap:not(.is-live) .ap__rail{height:calc(100svh * (.6 * var(--n,4) + .4))}} @keyframes ap-failsafe{to{visibility:visible;overflow:visible;height:auto}} .ap.is-live .ap__veil{opacity:.45;transition:opacity 900ms var(--ease-open)} .ap.is-live .is-open .ap__veil{opacity:0} .ap.is-live .ap__l{cursor:pointer} /* text: shut = below its mask; open = in place; leaving = above its mask */ .ap.is-live .ap__oi{transform:translate3d(0,calc(100% + .3em + 2px),0);transition:none} .ap.is-live .ap__foot>.ap__oi{transform:translate3d(0,calc(100% + 24px),0)} .ap.is-live .is-open .ap__oi{transform:none;transition:transform 720ms var(--ease-line) var(--od,420ms)} .ap.is-live .is-open .ap__lab .ap__oi{--od:300ms} .ap.is-live .is-open .ap__t .ap__oi{--od:480ms} .ap.is-live .is-open .ap__line .ap__oi{--od:540ms} .ap.is-live .is-open .ap__foot .ap__oi{--od:600ms} .ap.is-live .is-open .ap__cred .ap__oi{--od:640ms} .ap.is-live .is-out .ap__oi{transform:translate3d(0,calc(-100% - .4em - 2px),0);transition:transform 260ms var(--ease-leave)} .ap.is-live .is-out .ap__foot>.ap__oi{transform:translate3d(0,calc(-100% - 24px),0)} /* the shut label sinks when its light opens and rises back when it closes */ .ap.is-live .ap__shin{transition:transform 560ms var(--ease-line) 360ms} .ap.is-live .is-open .ap__shin{transform:translate3d(0,calc(100% + 30px),0);transition:transform 260ms var(--ease-leave)} .ap.is-snap .ap__l,.ap.is-snap .ap__pic,.ap.is-snap .ap__box,.ap.is-snap .ap__veil,.ap.is-snap .ap__oi,.ap.is-snap .ap__shin{transition:none!important} /* pinned stage (touch): the rail opens light by light with the scroll */ html.js-motion .ap.is-pin{height:calc(100svh * (.6 * var(--n) + .4))} html.js-motion .ap.is-pin .ap__stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;padding:calc(var(--hd) + 14px) 0 16px} html.js-motion .ap.is-pin .ap__rail{flex:1 1 auto;height:auto;min-height:0} /* standing on end (portrait touch stage): bands, active 58% of the height */ .ap--band{--ap-r:14px;--ap-pad:16px} .ap--band .ap__scrim{--fade:120px} /* a shut band keeps its sliver of picture under the veil alone (its chip carries its own ground) */ .ap.is-live.ap--band .ap__scrim{opacity:0;transition:opacity 900ms var(--ease-open)} .ap.is-live.ap--band .is-open .ap__scrim{opacity:1} .ap--band .ap__shut{left:var(--ap-pad);right:auto;top:50%;bottom:auto;transform:translate3d(0,-50%,0);justify-content:flex-start} .ap--band .ap__shin{flex-direction:row;gap:12px;padding:7px 10px;border-radius:var(--r-chip);background:rgba(8,10,16,.66)} .ap--band .ap__name{writing-mode:horizontal-tb;transform:none} .ap.is-live.ap--band .is-open .ap__shin{transform:translate3d(0,calc(100% + 12px),0)} /* the open text is set from the open band's own height (--oh), so on a short stage (320x568) the label, the line and the button fit the open share and the label is never sliced by the band's top edge */ .ap--band .ap__t{font-size:clamp(22px,calc(var(--oh,400px) * .075),30px)} .ap--band .ap__lab+.ap__line{font-size:clamp(17px,calc(var(--oh,400px) * .066),24px)} .ap--band.ap--tight .ap__foot{margin-top:12px} .ap--band.ap--tight .ap__foot>.ap__oi{padding-top:12px} .ap--band.ap--tight .ap__lab+.ap__line{margin-top:10px;font-size:16px;line-height:1.3} /* a narrow band: the longest shut name ('Cross-border tax and advisory') holds the band */ @media(max-width:374px){.ap--band .ap__name{font-size:11px;letter-spacing:.07em}} .ap--band.ap--photo .ap__pic{top:50%;height:100svh;width:100%;transform:translate3d(0,-50%,0)} .ap--band.ap--film .ap__zone{inset:16px} .ap--band.ap--film .ap__open{display:none} .ap--band.ap--film .ap__scrim{display:none} .ap__say{flex:none;margin-top:18px;min-height:0} .ap__say .ap__o{overflow:visible;padding:0;margin:0} .ap__say .ap__oi{transform:none!important} .ap__say .ap__lab{color:var(--ink-3)} .ap__say .ap__t{color:var(--ink);font-size:30px;margin-top:8px} .ap__say .ap__line{color:var(--ink-2);font-size:18px;margin-top:6px} .ap__say .ap__foot{margin:14px 0 0;padding:0} .ap__say .ap__foot>.ap__oi{border-top-color:var(--hair);padding-top:14px} .ap__say .ap__ct{color:var(--ink);font-size:34px} .ap__say .ap__figl{color:var(--ink-2)} .ap .ap__say .ap__cta{background:linear-gradient(170deg,#1A2233,#0B0E15);color:#fff} .ap__say[hidden]{display:none} /* ------------------------------------------- no motion: a column of open panels */ .ap:not(.is-live) .ap__rail{display:grid;gap:12px} @media(min-width:900px){.ap:not(.is-live) .ap__rail{grid-template-columns:repeat(2,minmax(0,1fr))}} .ap:not(.is-live) .ap__l{border-radius:var(--ap-r);display:flex;flex-direction:column;isolation:isolate} .ap:not(.is-live) .ap__veil,.ap:not(.is-live) .ap__shut,.ap:not(.is-live) .ap__scrim{display:none} .ap:not(.is-live) .ap__box{position:relative;z-index:1;width:auto;height:auto} .ap:not(.is-live) .ap__open{position:relative;left:auto;right:auto;bottom:auto;max-width:none;padding:var(--ap-pad)} .ap--photo:not(.is-live) .ap__pic{position:relative;width:auto;height:auto;aspect-ratio:3/2} .ap--film:not(.is-live) .ap__pic{position:static;width:auto;height:auto;padding:var(--ap-pad) var(--ap-pad) 0;flex:1 1 auto;display:flex;align-items:center} .ap--film:not(.is-live) .ap__zone{flex:1 1 auto} .ap--film:not(.is-live) .ap__amb{z-index:0} .ap--film:not(.is-live) .ap__zone{position:relative;z-index:1;inset:auto;container-type:inline-size;display:flex;justify-content:center} .ap--film:not(.is-live) .ap__scr{--pw:100cqw} .ap--film:not(.is-live) .ap__scr--phone{--pw:min(100cqw,240px)} /* ---- 45-preview.css ---- */ /* 45 · PREVIEW INDEX (M15). Rows on hairlines; one fixed frame whose layers relay (the outgoing one clips up and leaves, 60ms of the frame's own ground, the incoming one clips up from the bottom while its picture travels in). The frame never follows the cursor. The active row moves 12px and lights its node; the others turn --ink-3 by colour, never by opacity. Touch: the row nearest a reading line at 60% of the viewport is active; a 16px teal hairline in the gutter marks the line. Wide: rows in columns 1 to 7, a sticky 4:5 frame in columns 9 to 12. Narrow: the frame is sticky under the heading at 40svh. */ .px{--px-ground:var(--mist);position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start} .px__rows{grid-column:1/8;grid-row:1;border-bottom:1px solid var(--hair);counter-reset:none} .px__row{position:relative;display:block;padding:clamp(22px,2.3vw,30px) 0 clamp(24px,2.5vw,32px);border-top:1px solid var(--hair);color:var(--ink);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .px__k,.px__t{transition:transform 600ms var(--ease-open),color 320ms ease} .px__meta{display:flex;align-items:center;gap:12px} .px__k{display:flex;align-items:center;gap:12px;min-width:0} .px__meta .node{color:rgba(14,17,23,.28);transition:background-color 180ms ease,transform 180ms var(--ease-open)} .px__min{margin-left:auto;white-space:nowrap} .px__t{display:block;margin-top:12px;font-family:var(--serif);font-weight:300;font-size:clamp(30px,2.8vw,40px);line-height:1.08;letter-spacing:-.014em;text-wrap:balance;max-width:17em} .px__row.is-active .px__k,.px__row.is-active .px__t{transform:translate3d(12px,0,0)} .px__row.is-active .node{background:var(--teal);transform:scale(1.15)} .px.has-active .px__row:not(.is-active) .px__t{color:var(--ink-3)} .px__row:focus-visible{outline-offset:-2px} /* the frame: sticky, never following the cursor */ .px__frame{grid-column:9/13;grid-row:1;position:sticky;top:calc(var(--hd) + 8svh);z-index:2} .px__win{position:relative;aspect-ratio:4/5;border-radius:var(--r-media);overflow:clip;background:#0B0E15;box-shadow:var(--sh-2);container-type:size;isolation:isolate} /* the ground: the incoming picture, dimmed and soft (set by the script as a relay starts) */ .px__gnd{position:absolute;inset:-32px;z-index:0;background:#0B0E15 50% 30%/cover no-repeat;filter:blur(18px) brightness(.55) saturate(.9);pointer-events:none} .px__layer{position:absolute;inset:0;z-index:1;visibility:hidden;clip-path:inset(100% 0 0 0)} .px__layer.is-on,.px__layer.is-out,.px__layer.is-in{visibility:visible} .px__layer.is-on{clip-path:inset(0 0 0 0);transition:clip-path 520ms var(--ease-line)} .px__layer.is-in{clip-path:inset(100% 0 0 0);transition:none} .px__layer.is-out{clip-path:inset(0 0 100% 0);transition:clip-path 260ms var(--ease-leave)} .px__layer.is-in .dio__p{transform:translate3d(0,9%,0);transition:none} /* the text wins over the photograph in every frame: the foot takes the height its subject, figure and label need, the photograph the rest, so no label is ever sliced by the window's edge (a narrow 4:5 frame included). The subject holds one line: in a narrow window it takes the short name the index chips use. */ .px__frame .cv__pic{flex:1 1 0;min-height:0} .px__frame .cv__foot{flex:0 0 auto} .px__frame .cv__sub{white-space:nowrap;min-width:0;overflow:clip} .px__sub-s{display:none} @container (max-width:340px){.px__sub-l{display:none}.px__sub-s{display:inline}} .px__count{display:flex;align-items:baseline;justify-content:flex-end;margin-top:14px} .px__n{display:inline-grid} .px__n>.relay__i{padding-bottom:.1em} /* no script: the first layer stands; reduced motion with script: swaps are instant */ html:not(.js) .px__layer:first-child{visibility:visible;clip-path:none} html.js:not(.js-motion) .px__layer,html.js:not(.js-motion) .px__layer .dio__p{transition:none!important} /* the reading line (touch) */ .px__line{position:fixed;left:max(0px,calc(var(--gut) - 22px));top:60%;width:16px;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left center;transition:transform 420ms var(--ease-open);pointer-events:none;z-index:3} .px__line.on{transform:scaleX(1)} /* the default cover: the subject photograph over a night foot */ .pxc{position:absolute;inset:0;display:grid;grid-template-rows:60% 40%;background:#0B0E15} .pxc__ph.dio{border-radius:0;height:100%;background:#131926} .pxc__foot{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:clamp(16px,7cqw,30px);color:var(--on-n); background:linear-gradient(170deg,#161D2C 0%,#0D121C 55%,#080A11 100%)} .pxc__foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.12)} .pxc__foot::after{content:"";position:absolute;inset:0;background:url(/assets/img/sys/grain-128.png) repeat;pointer-events:none} .pxc__foot .lab{position:relative;z-index:1;color:var(--on-n-3)} .pxc__dek{position:relative;z-index:1;font-family:var(--serif);font-weight:300;font-size:clamp(17px,5.4cqw,23px);line-height:1.3;color:#fff;text-wrap:pretty} @container (min-aspect-ratio: 7/5){.pxc{grid-template-rows:none;grid-template-columns:56% 44%}.pxc__foot::before{left:0;top:0;bottom:0;right:auto;width:1px;height:auto}} /* narrow: the frame sits sticky under the heading at 40svh, rows pass under the line */ @media(max-width:899px){ .px{display:flex;flex-direction:column;align-items:stretch} .px__frame{order:-1;top:calc(var(--hd) + 10px);height:40svh;margin-bottom:20px;padding-bottom:10px;background:var(--px-ground);transition:top 420ms var(--ease-swap)} .px__frame::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--px-ground),rgba(242,244,247,0));pointer-events:none} html.hdr-off .px__frame{top:10px} /* the short frame: a tighter foot */ .px__frame .cv__foot{gap:6px;padding:14px 18px 16px} .px__frame .cv{--fig:44px} .px__win{aspect-ratio:auto;height:100%} .px__count{display:none} .px__t{font-size:30px} .px__row{padding:22px 0 24px} } @media(max-width:420px){.px__t{font-size:28px}.px__min{font-size:11px}} /* 900 to 1100px (an iPad Pro either way up, a small laptop): four columns made a 295px window; the rows keep six columns and the frame takes five */ @media(min-width:900px) and (max-width:1100px){ .px__rows{grid-column:1/7} .px__frame{grid-column:8/13} } /* ---- 46-switchboard.css ---- */ /* 46 · THE WORK HUB: the header panel and THE SWITCHBOARD (M16 + M15 rows). Four firm names in a serif ledger. The pointed row's jack lights, a 1px cable runs down the lane between the ledger and a sticky night panel and enters a browser frame, where the firm's real site wipes in through WebGL. On touch the panel sticks at the top and the row crossing the reading line is the one plugged in. Reduced motion prints every capture inline under its row. */ /* ---------------------------------------------------------------- header panel */ .sbh{margin-top:12px;min-height:calc(64svh - 12px);display:flex} .sbh__in{display:flex;flex-direction:column;padding:clamp(40px,5.6vh,64px) 0 clamp(26px,4vh,40px)} .sbh__eye{display:flex;align-items:center;gap:20px} .sbh__eye .lab{flex:none;color:var(--on-n-2)} /* the eyebrow's rule ends at the header column's own edge (the panel padding), so its tick never sits on the panel border */ .sbh__rule{flex:1;width:auto} .sbh__rule .rule__tick{right:0} .sbh__t{margin-top:clamp(20px,3.2vh,34px);color:#fff;max-width:14em;font-size:clamp(40px,7.2vw,84px)} .sbh__mid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-top:clamp(18px,2.8vh,30px)} .sbh__lead{grid-column:1/8;max-width:33em} .sbh__consent{grid-column:9/13;max-width:26em;padding-bottom:.35em} .sbh__foot{margin-top:auto;padding-top:clamp(28px,4.4vh,48px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)} .sbh__c{display:flex;flex-direction:column;gap:8px;padding:18px 0 0 20px;border-left:1px solid var(--hair-n);position:relative} .sbh__c::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:14px;background:var(--teal)} .sbh__n{font-size:clamp(44px,4.6vw,72px);color:#fff} .sbh__l{font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.3;color:var(--on-n-2);margin-top:4px} .sbh__f{margin-top:-2px} @media(max-width:900px),(hover:none) and (max-width:1100px){ .sbh{min-height:calc(78svh - 12px)} .sbh__mid{grid-template-columns:1fr} .sbh__lead,.sbh__consent{grid-column:1/-1} .sbh__consent{margin-top:16px} .sbh__foot{grid-template-columns:1fr 1fr;row-gap:22px} .sbh__n{font-size:clamp(40px,11vw,56px)} } @media(max-width:700px){.sbh{margin-top:8px}.sbh__in{padding-top:36px}.sbh__lead{font-size:18px}} /* ---------------------------------------------------------------- the section */ .sb{position:relative;padding-block:clamp(72px,10vh,128px) var(--sec)} .sb__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start} .sb__ledger{grid-column:1/7;position:relative;z-index:1} /* on a pointer the panel releases on the last rule; in line mode the ledger keeps the runway for the last row to cross the reading line while the panel is still pinned */ .sb.is-line:not(.is-stacked) .sb__ledger{padding-bottom:calc(var(--hd) + 14svh)} .sb__side{grid-column:7/13;align-self:stretch;position:relative;z-index:3} .sb__rows{list-style:none;margin:0;padding:0} /* a row: number and practice, the name on its leader to the jack, the scope */ .sb__li{position:relative} .sb__li::before{content:"";position:absolute;top:0;right:0;left:calc(-1 * (var(--sb-l,0px) + var(--sb-x,0px)));height:1px;background:var(--hair)} .sb__li:last-child::after{content:"";position:absolute;bottom:0;right:0;left:calc(-1 * (var(--sb-l,0px) + var(--sb-x,0px)));height:1px;background:var(--hair)} .sb__row{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:max(25svh,200px);padding:clamp(22px,3.2vh,34px) 0 clamp(24px,3.4vh,36px) 64px;color:var(--ink);outline-offset:-2px} .sb__top{display:flex;align-items:baseline;margin-left:-64px} .sb__num{flex:none;width:64px;color:var(--ink-3);transition:color 240ms} .sb__cat{color:var(--ink-3);transition:color 240ms} .sb__name{display:flex;align-items:center;margin-top:12px;margin-right:calc(var(--gap) / -2 - 3.5px); font-size:calc(var(--fs) * min(1px,.0694vw) * var(--sb-fit,1));line-height:1.02;letter-spacing:-.02em;font-weight:300} .sb__nm{flex:none;white-space:nowrap;transition:transform 520ms var(--ease-open),color 240ms} .sb__lead{position:relative;flex:1;min-width:40px;height:1px;margin:0 14px 0 26px;background:var(--hair);transform:translateY(.1em)} .sb__lead::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-open)} .sb__jack{flex:none;width:var(--node);height:var(--node);border-radius:var(--r-node);background:var(--ink-3);transform:translateY(.1em) scale(.72);transition:transform 180ms var(--ease-open),background-color 180ms} .sb__scope{display:block;margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink-3);max-width:34em;transition:transform 520ms var(--ease-open)} .sb__top{transition:transform 520ms var(--ease-open)} .sb__line,.sb__go{display:none} .sb__inline{display:none} /* the plugged row: shifted 12px, leader drawn in ink, jack lit; the others go to ink-3 by colour */ .sb__row.is-on .sb__nm,.sb__row.is-on .sb__top,.sb__row.is-on .sb__scope{transform:translate3d(12px,0,0)} .sb__row.is-on .sb__lead::after{transform:scaleX(1)} .sb__row.is-on .sb__jack{background:var(--teal);transform:translateY(.1em) scale(1)} .sb__row.is-on .sb__num{color:var(--ink)} .sb.is-engaged .sb__row:not(.is-on) .sb__nm{color:var(--ink-3)} .sb.is-engaged .sb__row:not(.is-on) .sb__lead{background:var(--hair-2)} /* ---------------------------------------------------------------- the panel */ .sb__panel{position:sticky;top:calc(var(--hd) + 10svh);height:76svh;min-height:520px;margin:0 calc(-1 * var(--sb-bleed,0px)) 0 0; display:flex;flex-direction:column;padding:clamp(22px,2.4vw,36px)} .sb__stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:flex-start} /* --sb-hang: how far the phone hangs under the frame, as a share of the frame width (the script reads it) */ .sb__frlink{--sb-hang:.16;position:relative;display:block;flex:none;box-sizing:content-box;width:var(--fw,var(--sb-fw0,94.34%)); padding:0 calc(var(--fw,var(--sb-fw0,94.34%)) * .06) calc(var(--fw,var(--sb-fw0,94.34%)) * var(--sb-hang)) 0;cursor:pointer;--r:var(--r-frame)} .sb__fr{width:100%;view-transition-class:case} .sb__fr .fr__win{background:#0B0E15} .sb__l{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;visibility:hidden} .sb__l.is-on,.sb__l.is-in{visibility:visible} .sb__l.is-in{z-index:1} .sb__gl{position:absolute;inset:0;z-index:2;width:100%;height:100%;visibility:hidden} .sb__gl.is-ready{visibility:visible} /* .24 of the frame width: the link box is 1.06 frame widths wide, so 22.64% of it, with or without the script. The link box is a size container (1cqw = 1% of the frame width), so the phone's corner and bezel follow its width: a phone about .19 of its width round, never a capsule on a small screen (44px and 10px at most) */ .sb__frlink{container-type:inline-size} .sb__ph{position:absolute;z-index:3;width:22.64%;right:0;bottom:0;--phr:min(44px,4.5cqw);--phb:clamp(4px,1.7cqw,10px);border-radius:var(--phr);padding:var(--phb)} .sb__ph .fr__win{border-radius:max(2px,calc(var(--phr) - var(--phb)))} .sb__p{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;visibility:hidden;will-change:transform} .sb__p.is-on,.sb__p.is-in,.sb__p.is-out{visibility:visible} .sb__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 28px;padding-top:18px} .sb__rel{flex:1;min-width:0} .sb__fs{display:block} .sb__fl{margin-top:10px;font-size:clamp(19px,1.55vw,23px);line-height:1.3;color:#fff;max-width:24em;text-wrap:balance} .sb__read{flex:none;color:#fff} /* the cable: three 1px segments and the node that lands on the frame */ .sb__cab{position:absolute;left:0;top:0;width:0;height:0;z-index:4;pointer-events:none} .sb__seg{position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:0 0;transform:scale(0);background:rgba(14,17,23,.62)} .sb__seg--c{background:rgba(255,255,255,.58)} .sb__end{position:absolute;left:0;top:0;width:var(--node);height:var(--node);margin:calc(var(--node) / -2) 0 0 calc(var(--node) / -2);border-radius:var(--r-node);background:var(--teal);transform:scale(0)} .sb__mark{position:fixed;left:0;top:64svh;z-index:5;width:16px;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--ease-open);pointer-events:none} .sb.is-line.is-here .sb__mark{transform:scaleX(1)} /* ---------------------------------------------------------------- stacked: phones, narrow windows (not a short landscape screen: a phone held sideways keeps the split, see the end of this file) */ @media(max-width:900px) and (orientation:portrait),(max-width:900px) and (min-height:500.02px){ .sb{padding-top:clamp(40px,6vh,72px)} .sb__g{display:flex;flex-direction:column} .sb__li::before,.sb__li:last-child::after{right:calc(-1 * var(--sb-l,0px))} /* the strip between the header and the stuck panel: rows pass under mist, not through a slit */ .sb__side::before{content:"";position:absolute;left:calc(-1 * var(--inset));right:calc(-1 * var(--inset));bottom:100%;height:calc(var(--inset) + 1px);background:var(--mist)} /* stuck under the header; when the header leaves, the stuck panel takes its place (a top change, so a panel still in flow never moves; the script eases the jump when it is stuck) */ .sb__side{order:-1;align-self:stretch;position:sticky;top:calc(var(--hd) + var(--inset));z-index:3;margin-inline:calc(var(--inset) - var(--gut))} .sb.is-hdoff .sb__side{top:var(--inset)} .sb__panel{position:relative;top:auto;height:42svh;min-height:300px;margin:0;padding:12px} .sb__stage{justify-content:center} .sb__foot{display:none} .sb__ledger{width:auto;margin-left:var(--sb-x,0px);padding:clamp(20px,3vh,32px) 0 6svh} .sb__row{min-height:0;padding:26px 0 30px var(--sb-in,44px)} .sb__top{margin-left:0;gap:14px} .sb__num{width:auto} .sb__name{margin:10px 0 0;font-size:calc(var(--fs-t) * min(1.4px,.2564vw) * var(--sb-fit,1));position:static} .sb__nm{white-space:normal} .sb__lead{display:none} .sb__jack{position:absolute;left:var(--sb-jx,18px);top:var(--sb-jy,50%);margin:calc(var(--node) / -2) 0 0 calc(var(--node) / -2);transform:scale(.72)} .sb__row.is-on .sb__jack{transform:scale(1)} .sb__scope{display:none} .sb__line{display:block;margin-top:12px;font-size:18px;line-height:1.45;color:var(--ink-2);max-width:30em;text-wrap:pretty;transition:color 240ms} .sb__go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;min-height:44px;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink)} .sb__go svg{width:14px;height:14px} .sb__row.is-on .sb__nm,.sb__row.is-on .sb__top,.sb__row.is-on .sb__scope{transform:none} .sb.is-engaged .sb__row:not(.is-on) .sb__line,.sb.is-engaged .sb__row:not(.is-on) .sb__go{color:var(--ink-3)} /* the reading line is the panel's own edge here: no mark at the screen edge */ .sb__mark{display:none} /* the panel lets go when the last firm sits whole just under it (--sb-tail: the last row, measured), and the section keeps its length, so nothing after it moves */ .sb.is-stacked .sb__ledger{margin-bottom:calc(-1 * var(--sb-tail,0px))} .sb.is-stacked{padding-bottom:calc(var(--sec) + var(--sb-tail,0px))} } @media(max-height:520px){.sb__panel{min-height:0}} @media(max-width:900px) and (min-width:600px){.sb__panel{padding:16px}.sb__ledger{max-width:none}} /* ---------------------------------------------------------------- reduced motion, no script: every capture inline */ html:not(.js-motion) .sb__side,html:not(.js-motion) .sb__cab,html:not(.js-motion) .sb__mark{display:none} html:not(.js-motion) .sb__ledger{grid-column:1/-1;margin-left:0;padding-bottom:0} html:not(.js-motion) .sb__li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center} html:not(.js-motion) .sb__row{grid-column:1/7;min-height:0} html:not(.js-motion) .sb__name{margin-right:0} html:not(.js-motion) .sb__nm{flex:0 1 auto;min-width:0;white-space:normal;text-wrap:balance} html:not(.js-motion) .sb__jack,html:not(.js-motion) .sb__lead{display:none} html:not(.js-motion) .sb__line{display:block;margin-top:14px;font-size:19px;line-height:1.45;color:var(--ink-2)} html:not(.js-motion) .sb__inline{display:block;grid-column:7/13;margin:28px 0} html:not(.js-motion) .sb__row .sb__nm,html:not(.js-motion) .sb__row .sb__top,html:not(.js-motion) .sb__row .sb__scope, html:not(.js-motion) .sb__row .sb__line,html:not(.js-motion) .sb__row .sb__go,html:not(.js-motion) .sb__row .sb__fig{transform:none} @media(max-width:900px) and (orientation:portrait),(max-width:900px) and (min-height:500.02px){ html:not(.js-motion) .sb__li{display:block} html:not(.js-motion) .sb__row{padding-left:0} html:not(.js-motion) .sb__inline{margin:0 0 36px} } /* ---------------------------------------------------------------- section 4: the consent line on a rule to the screen edge (parts.switchboard.consent_line(), when the header is built with consent=False) */ .sbc{padding-block:clamp(40px,7vh,88px)} .sbc__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)} .sbc__t{grid-column:4/12;margin:0 0 20px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,2.3vw,34px);line-height:1.3;letter-spacing:-.01em;color:var(--ink-2);max-width:30em;text-wrap:balance} .sbc__in>.rule{grid-column:4/-1} @media(max-width:900px){.sbc__t,.sbc__in>.rule{grid-column:1/-1}.sbc__t{font-size:22px}} /* ---------------------------------------------------------------- the header inside the switchboard (hub()) From 901px: a night panel in the ledger's half, level with the frame panel, whose sticky top is the same line, so the first screen holds the headline, the live frame and the first firm on its cable. --sb-off is the page gutter (the wrap's side offset) read from the section's own width, so the two panels reach the 12px inset with no script and nothing shifts when it lands. */ .sb--head{padding-top:var(--inset)} .sb__cq{container-type:inline-size} .sb--head .sb__g{--sb-off:max(var(--gut),(100vw - var(--max)) / 2)} @supports (width:1cqw){.sb--head .sb__g{--sb-off:max(var(--gut),(100cqw - var(--max)) / 2)}} .sb--head .sbh{margin-top:0;min-height:0;display:block} .sbh--in .sbh__in{display:flex;flex-direction:column;padding:clamp(32px,4.6vh,52px) 0 clamp(24px,3.4vh,34px)} .sbh--in .sbh__t{margin-top:clamp(18px,2.6vh,30px)} .sbh--in .sbh__lead{margin-top:clamp(16px,2.4vh,24px)} .sbh--in .sbh__consent{margin-top:14px;max-width:34em} /* the counters: a slim band at the panel's foot, the figures sized to the band */ .sbh__band{margin-top:clamp(24px,3.6vh,38px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);column-gap:16px;container-type:inline-size} .sbh--in .sbh__c{gap:0;padding:12px 0 0 14px} .sbh--in .sbh__c::before{height:12px} .sbh--in .sbh__n{font-size:clamp(24px,8.2cqw - 8px,40px)} .sbh--in .sbh__l{font-size:14px;margin-top:8px} .sbh--in .sbh__f{margin-top:2px;font-size:11px;letter-spacing:.07em} @media(min-width:901px),(orientation:landscape) and (max-height:500px){ /* the four names' shared fit as the script measures it from 900 to 1440px, so the first row does not shift when it lands */ .sb--head{--sb-fit:.82} .sb--head .sb__g{grid-template-rows:auto 1fr} .sb--head .sbh{grid-column:1/7;grid-row:1;margin:0 0 clamp(14px,2.4vh,26px) calc(var(--inset) - var(--sb-off))} .sbh--in .sbh__in{padding-left:calc(var(--sb-off) - var(--inset));padding-right:clamp(26px,2.8vw,44px)} .sbh--in .sbh__t{font-size:clamp(40px,4.8vw,74px);max-width:none;text-wrap:balance} .sbh--in .sbh__lead{font-size:clamp(19px,1.45vw,22px)} .sb--head .sb__ledger{grid-row:2} .sb--head .sb__side{grid-row:1/3} /* as tall as the screen allows, but never much taller than the frame it holds (tall upright tablets) */ .sb--head .sb__panel{top:calc(var(--hd) + var(--inset));height:min(calc(100svh - var(--hd) - var(--inset) * 2),64cqw);margin-right:calc(var(--inset) - var(--sb-off))} } @media(max-width:900px) and (orientation:portrait),(max-width:900px) and (min-height:500.02px){ .sb--head .sbh{order:-2;margin:0 calc(var(--inset) - var(--gut)) calc(var(--inset) + 2px)} .sbh--in .sbh__in{padding-inline:calc(var(--gut) - var(--inset))} } @media(max-width:700px){.sbh--in .sbh__in{padding-top:30px;padding-bottom:26px}.sbh--in .sbh__lead{font-size:18px}} /* phones: the band gives way to each figure in its own firm's row, so the frame is on the first screen */ .sb__fig{display:none} @media(max-width:599px){ .sbh__band{display:none} .sb--head .sb__fig{display:flex;align-items:baseline;gap:9px;margin-top:14px} .sb__fn{font-size:30px;color:var(--ink)} .sb__fu{font:500 15px/1.3 var(--sans);color:var(--ink-2)} .sb.is-engaged .sb__row:not(.is-on) .sb__fn{color:var(--ink-3)} } /* reduced motion, no script: the frame panel is not drawn, the header spans the page */ @media(min-width:901px),(orientation:landscape) and (max-height:500px){ html:not(.js-motion) .sb--head .sbh{grid-column:1/-1;margin-right:calc(var(--inset) - var(--sb-off))} } /* the headline breaks after its first sentence, except where the whole line fits (upright tablets) */ @media(min-width:600px) and (max-width:900px) and (orientation:portrait),(min-width:600px) and (max-width:900px) and (min-height:500.02px){.sbh__br{display:none}} /* ---------------------------------------------------------------- short landscape: a phone held sideways (any landscape screen 500px tall or less). The split at every width: the header and the ledger on the left, the frame panel stuck on the right, as tall as the screen less the header, with the frame sized from that height and the phone hanging less. The panel foot gives way to each row's own line and link, and the counter band to each firm's figure in its row. When the header leaves, the panel centres in the screen (a top change the script eases). */ @media(orientation:landscape) and (max-height:500px){ .sb--head{--sb-fit:.8} .sb--head .sb__panel{height:calc(100svh - var(--hd) - var(--inset) * 2);min-height:0;padding:12px} .sb--head.is-hdoff .sb__panel{top:calc(var(--inset) + var(--hd) / 2)} .sb__stage{justify-content:center} .sb__foot{display:none} /* the frame from the panel height, exact before the script lands: (stage - bar) / (.625 + hang) */ .sb__frlink{--sb-hang:.06;--sb-fw0:min(94.34%,calc((100svh - var(--hd) - var(--inset) * 2 - 24px - 34px) / .685))} .sb__row{min-height:0;padding:20px 0 12px} .sb__top{margin-left:0;gap:14px} .sb__num{width:auto} .sb__name{margin-top:8px} .sb__lead{min-width:20px;margin:0 10px 0 14px} .sb__scope{display:none} .sb__line{display:block;margin-top:8px;font-size:16px;line-height:1.45;color:var(--ink-2);max-width:30em;text-wrap:pretty;transition:color 240ms,transform 520ms var(--ease-open)} .sb__go{display:inline-flex;align-items:center;gap:8px;margin-top:4px;min-height:44px;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink);transition:color 240ms,transform 520ms var(--ease-open)} .sb__go svg{width:14px;height:14px} .sb__row.is-on .sb__line,.sb__row.is-on .sb__go,.sb__row.is-on .sb__fig{transform:translate3d(12px,0,0)} .sb.is-engaged .sb__row:not(.is-on) .sb__line,.sb.is-engaged .sb__row:not(.is-on) .sb__go{color:var(--ink-3)} .sb__mark{display:none} .sbh--in .sbh__in{padding-top:26px;padding-bottom:28px} .sbh--in .sbh__t{font-size:clamp(34px,4.8vw,48px)} .sbh--in .sbh__lead{font-size:17px;line-height:1.5} .sbh__band{display:none} .sb--head .sb__fig{display:flex;align-items:baseline;gap:9px;margin-top:8px;transition:transform 520ms var(--ease-open)} .sb__fn{font-size:26px;color:var(--ink)} .sb__fu{font:500 15px/1.3 var(--sans);color:var(--ink-2)} .sb.is-engaged .sb__row:not(.is-on) .sb__fn{color:var(--ink-3)} } /* ---- 47-portal.css ---- */ /* 47 · THE PORTAL (M26). The next case's hero frame grows toward the viewer out of its registration corners inside a sticky stage, on a night panel it emerges from. The end state is the default (reduced motion, no script): the plate at scale 1, the corners out, the name and the button in place. Script sizes the plate from the room the stage leaves it (a two-line name shrinks the plate, never the padding) and writes the scroll law per frame. */ .pt{position:relative;height:170vh;--pt-r0:16;--pt-r1:28;--pt-off:24px} /* .lp makes its children relative: the stage stays sticky */ .pt>.pt__stage{position:sticky;top:0} .pt__stage{height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--hd) + clamp(16px,3vh,32px)) 0 clamp(24px,5vh,56px)} /* the slate row and the name run on the page's own wrap, the plate centred between them: a long name keeps its line and never takes height from the plate */ .pt__top,.pt__foot{width:min(var(--max),calc(100% + 2 * var(--inset) - 2 * var(--gut)))} .pt__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px} .pt__n{flex:none;white-space:nowrap;color:var(--on-n-3)} .pt__area{position:relative;flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;margin:clamp(4px,1.2vh,16px) 0} .pt.is-sized .pt__area{flex:0 0 auto;height:var(--pah)} /* the plate: the next case's hero frame (bar and first capture), sized by script; scaled around its centre */ .pt__plate{position:relative;display:block;flex:none;width:var(--pw,min(88vw,1100px));transform-origin:50% 50%;will-change:transform;cursor:pointer} .pt__img{position:relative;display:flex;flex-direction:column;overflow:clip;border-radius:calc(var(--pt-r1) * 1px);background:#0B0E15; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -36px rgba(0,0,0,.7)} .pt__img img{display:block;width:100%;height:auto;transition:transform 900ms var(--ease-open)} .pt__bar{position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:linear-gradient(180deg,#1A2130,#121826)} .pt__bar .node{width:7px;height:7px;border-radius:2px;background:#3A4458;flex:none} .pt__addr{margin-left:10px;flex:1;max-width:min(62%,420px);height:22px;line-height:22px;padding:0 10px;border-radius:var(--r-chip);background:rgba(255,255,255,.06); font-family:var(--sans);font-weight:500;font-size:12px;color:rgba(242,244,248,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* the film poster fallback of The Property Organiser is a dusk frame: lifted here only */ .pt--lift .pt__img img{filter:brightness(1.35)} @media(hover:hover){.pt__plate:hover .pt__img img{transform:scale(1.03)}} /* registration corners: 14px L-brackets, 1px light, out at rest (10px at the smallest scale, script) */ .pt__corner{position:absolute;width:14px;height:14px;pointer-events:none;--c:rgba(242,244,248,.72)} .pt__corner--tl{left:0;top:0;border-left:1px solid var(--c);border-top:1px solid var(--c);transform-origin:0 0;transform:translate(calc(-1 * var(--pt-off)),calc(-1 * var(--pt-off)))} .pt__corner--tr{right:0;top:0;border-right:1px solid var(--c);border-top:1px solid var(--c);transform-origin:100% 0;transform:translate(var(--pt-off),calc(-1 * var(--pt-off)))} .pt__corner--bl{left:0;bottom:0;border-left:1px solid var(--c);border-bottom:1px solid var(--c);transform-origin:0 100%;transform:translate(calc(-1 * var(--pt-off)),var(--pt-off))} .pt__corner--br{right:0;bottom:0;border-right:1px solid var(--c);border-bottom:1px solid var(--c);transform-origin:100% 100%;transform:translate(var(--pt-off),var(--pt-off))} /* the name clips in off its baseline (p >= .55, .35 on touch); the button opens with it, never before */ .pt__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px} .pt__t{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5.4vw,84px);line-height:1.02;letter-spacing:-.018em;color:var(--on-n);text-wrap:balance} .pt__go{flex:none;margin-bottom:.4em;transition:transform 120ms ease,translate 500ms var(--ease-open),clip-path 700ms var(--ease-open) 380ms} html.js-motion .pt:not(.is-on) .pt__t .w>i{transform:translate3d(0,calc(100% + .2em),0)} html.js-motion .pt:not(.is-on) .pt__go{clip-path:inset(100% 0 0 0 round var(--r-ctl));transition-delay:0ms} html.js-motion .pt.is-on .pt__go{clip-path:inset(0 0 0 0 round var(--r-ctl))} @media(max-width:700px),(hover:none){ .pt{height:150svh} .pt__foot{flex-direction:column;align-items:flex-start} .pt__go{margin-bottom:0} } @media(max-width:700px){.pt{--pt-r0:12;--pt-r1:20;--pt-off:12px}.pt__t{font-size:40px}.pt__go{width:100%}} /* a phone held sideways: the plate on the left, sized from the height; the name and the button beside it */ @media(max-height:500px) and (orientation:landscape){ .pt{height:150svh;--pt-off:14px} .pt__stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:stretch;align-items:stretch;column-gap:clamp(20px,4vw,40px); padding:calc(var(--hd) + 10px) var(--gut) 14px} .pt__top{grid-column:1/-1;width:auto;max-width:none;margin-bottom:4px} .pt__area{grid-column:1;grid-row:2;margin:0} .pt__foot{grid-column:2;grid-row:2;align-self:center;width:auto;max-width:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px} .pt__t{font-size:clamp(28px,4.4vw,40px)} .pt__go{width:auto;margin-bottom:0} } /* ---- 48-walk.css ---- */ /* 48 · THE WALK (M17), the case signature. The firm's real site travels through one pinned browser frame that never moves (a doc frame for MH), a phone beside it; the chapters relay on mist, notes draw from a node on the capture to a shelf. The composition inside the night panel is sized by walk.js on resize (CSS variables on .wk__comp); scroll only writes transforms and classes. */ .wk{position:relative} .wk__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-content:end;align-items:end; min-height:50vh;padding:var(--sec) 0 clamp(40px,5vw,72px)} .wk__hl{grid-column:1/8} .wk__lead{grid-column:9/13} @media(max-width:900px){.wk__head{grid-template-columns:1fr}.wk__hl,.wk__lead{grid-column:1/-1}.wk__lead{margin-top:20px}} .wk__pin{position:relative;height:calc(100svh + (var(--n) - 1) * 62svh)} .wk[data-mode="touch"] .wk__pin{height:calc(100svh + (var(--n) - 1) * 58svh)} .wk__stage{position:sticky;top:0;height:100svh;padding-top:var(--hd);overflow:clip} .wk__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);height:100%;padding:18px 0 22px} /* ---------------------------------------------------------------- side (mist) */ .wk__side{grid-column:1/5;display:flex;flex-direction:column;min-height:0;padding:10px 0 4px;position:relative} .wk__slate{display:flex;align-items:baseline;white-space:nowrap;margin-bottom:34px} .wk__num{display:inline-block;height:1.4em;overflow:clip;vertical-align:top} .wk__nc{display:flex;flex-direction:column;transition:transform 640ms var(--ease-swap)} .wk__nc>i{display:block;height:1.4em;font-style:normal} .wk__lbl{margin-left:.5em;overflow:hidden;text-overflow:ellipsis} .wk[data-addr="label"][data-mode="desk"] .wk__lbl{display:none} .wk__ch{position:relative;display:flex;flex-direction:column;gap:14px} .wk__c{position:relative;display:grid;grid-template-columns:7px 1fr;column-gap:16px;align-items:baseline;color:var(--ink-3);transition:color 400ms var(--ease-open)} .wk__c>.node{position:relative;z-index:1;align-self:center;background:#C9CED7;transition:background-color 300ms var(--ease-open),transform 400ms var(--ease-open)} .wk__ct{font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.35} .wk__c.is-on{color:var(--ink)} .wk__c.is-on>.node{background:var(--teal);transform:scale(1.15)} .wk__c.is-past>.node{background:var(--ink)} .wk__cx{grid-column:2;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wk__thr{position:absolute;left:3px;top:var(--t0,10px);height:var(--th,0px);width:1px;background:var(--hair)} .wk__thr>i{position:absolute;inset:0;background:var(--ink);transform-origin:top;transform:scaleY(var(--tf,0))} .wk__rel{margin-top:auto;padding-top:28px} .wk__rt{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.14;letter-spacing:-.012em;color:var(--ink);text-wrap:balance;max-width:13em} .wk__rp{margin-top:16px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:31em;text-wrap:pretty} .wk__tn{display:none} .wk__tl{position:relative;padding-left:16px;font-family:var(--serif);font-size:17px;line-height:1.4;color:var(--ink-2)} .wk__tl b{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-right:.5em} .wk__tick{position:absolute;left:0;top:-5px;width:2px;height:12px;background:var(--teal)} /* ---------------------------------------------------------------- the panel and its composition */ .wk__panel{grid-column:5/13;margin:0;min-height:0} .wk__panel>.wk__comp{position:absolute;inset:0} .wk__fr{position:absolute;left:0;top:0;width:var(--bw,60%);translate:var(--bx,0px) var(--by,0px);transform-origin:0 0;z-index:1} .wk__fr .fr__win{--ar:1.6} .wk--doc .wk__fr .fr__win{--ar:.7072} .wk__ph{position:absolute;left:0;top:0;width:var(--pw,160px);translate:var(--px,0px) var(--py,0px);z-index:3;transform-origin:50% 0} .wk__lines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2} .wk__shelf{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:4} .wk__strip{will-change:transform} .wk__strip>img{background:#11151E} /* browser chrome: the three nodes and the address, mirrored by transform (FLIP in walk.js) */ .wk .fr__bar{gap:0} .wk__dots{display:flex;gap:6px;flex:none} .wk .fr__addr{margin-left:12px;flex:0 1 auto;width:min(46%,300px);max-width:none} .wk__fr.is-rtl .fr__addr{text-align:right;direction:ltr} /* a capture that is not the window's ratio sits whole on its own paper, never cropped */ .wk__fit{position:relative;overflow:clip} .wk__cimg{position:absolute;display:block;max-width:none;object-fit:fill;box-shadow:0 1px 2px rgba(14,17,23,.10),0 22px 44px -22px rgba(14,17,23,.45)} /* the incoming right-to-left capture, wiped from the right by the scroll */ .wk__wipe{position:absolute;inset:0;z-index:1;clip-path:inset(0 0 0 100%)} .wk__wipe img{width:100%;height:100%;object-fit:cover;object-position:top;background:#11151E} /* nodes on the capture */ .wk__marks{position:absolute;inset:0;z-index:2;pointer-events:none} .wk__mk{position:absolute;inset:0} .wk__nd{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:2px;background:var(--teal); box-shadow:0 0 0 1.5px #fff,0 0 0 3.5px rgba(8,10,17,.38),0 4px 14px rgba(8,10,17,.45);transform:scale(0);transition:transform 220ms var(--ease-leave)} .wk__mk.is-on .wk__nd{transform:scale(1);transition:transform 520ms var(--ease-open)} /* leaders: pathLength 1, drawn by the dash offset */ .wk__lines path{fill:none;stroke-dasharray:1 1;stroke-dashoffset:1;stroke-linecap:butt;stroke-linejoin:miter;transition:stroke-dashoffset 240ms var(--ease-leave)} .wk__lu{stroke:rgba(8,10,17,.5);stroke-width:3} .wk__lo{stroke:rgba(255,255,255,.86);stroke-width:1} .wk__lines g.is-on path{stroke-dashoffset:0;transition:stroke-dashoffset 600ms var(--ease-open) 140ms} /* the shelf: a teal tick lands, the label clips up, the line opens by mask */ .wk__ng{position:absolute;inset:0} .wk__note{position:absolute;left:0;top:0;width:var(--nw,240px);padding-left:16px} .wk__tk{position:absolute;left:0;top:0;width:2px;height:12px;background:var(--teal);transform:scaleY(0);transform-origin:top;transition:transform 200ms var(--ease-leave)} .wk__nl,.wk__nt{overflow:clip} .wk .nw{white-space:nowrap} .wk__nl{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;line-height:1.35;color:#fff;margin-top:-2px} .wk__nt{margin-top:6px;font-family:var(--serif);font-size:17px;line-height:1.38;color:var(--on-n-2);text-wrap:pretty} .wk__nl,.wk__nt{clip-path:inset(0 0 100% 0);translate:0 10px;transition:clip-path 220ms var(--ease-leave),translate 220ms var(--ease-leave)} .wk__ng.is-on .wk__tk{transform:scaleY(1);transition:transform 400ms var(--ease-open) 620ms} .wk__ng.is-on .wk__nl,.wk__ng.is-on .wk__nt{clip-path:inset(-4px -4px -8px -4px);translate:0 0;transition:clip-path 700ms var(--ease-open) 640ms,translate 700ms var(--ease-open) 640ms} .wk__ng.is-on .wk__nt{transition-delay:720ms} .wk--doc .wk__note{padding:0 16px 0 0;text-align:right} .wk--doc .wk__tk{left:auto;right:0} /* the phone: site captures move up, MH carousel slides swipe across */ .wk__pstrip{will-change:transform} .wk__pstrip>img{height:var(--pwin-h,auto)} .wk__ph--swipe .fr__win{background:#0B0E15} .wk__swipe{position:absolute;inset:0;display:flex;will-change:transform} .wk__sl{flex:0 0 100%;display:flex;align-items:center;justify-content:center;padding-bottom:10%} .wk__slimg{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover} .wk__sdots{position:absolute;left:0;right:0;bottom:9%;display:flex;justify-content:center;gap:6px} .wk__sdots .node{width:5px;height:5px;background:rgba(255,255,255,.28);transition:background-color 300ms var(--ease-open)} .wk__sdots .node.is-on{background:var(--teal)} /* ---------------------------------------------------------------- desk: the work at the size of the work. One night panel across the screen; the chapters stand in its left column (on the night, never over the capture), the frame takes the room right of them (up to 1180px, walk.js), the phone overlaps its lower right corner, the notes shelf under it. */ .wk{--colw:clamp(232px,17.5vw,300px)} .wk[data-mode="desk"] .wk__grid{display:block;position:relative;width:auto;max-width:none;margin:0;padding:12px 0} .wk[data-mode="desk"] .wk__panel{height:100%;margin-inline:var(--inset)} .wk[data-mode="desk"] .wk__side{position:absolute;z-index:5;left:var(--gut);top:12px;width:var(--colw);padding:0;color:var(--on-n)} .wk[data-mode="desk"] .wk__slate{color:var(--on-n-2);margin-bottom:28px} .wk[data-mode="desk"] .wk__ch{gap:12px} .wk[data-mode="desk"] .wk__c{color:var(--on-n-3);column-gap:14px} .wk[data-mode="desk"] .wk__c.is-on{color:var(--on-n)} .wk[data-mode="desk"] .wk__c>.node{background:rgba(255,255,255,.26)} .wk[data-mode="desk"] .wk__c.is-on>.node{background:var(--teal)} .wk[data-mode="desk"] .wk__c.is-past>.node{background:var(--on-n-2)} .wk[data-mode="desk"] .wk__ct{font-size:15px} .wk[data-mode="desk"] .wk__thr{background:var(--hair-n)} .wk[data-mode="desk"] .wk__thr>i{background:var(--on-n-2)} .wk[data-mode="desk"] .wk__rel{padding-top:24px} .wk[data-mode="desk"] .wk__rt{color:var(--on-n);font-size:clamp(24px,2vw,30px)} .wk[data-mode="desk"] .wk__rp{color:var(--on-n-2);font-size:16px;line-height:1.58;margin-top:12px} .wk--tight[data-mode="desk"] .wk__ch{display:none} .wk--tight[data-mode="desk"] .wk__slate{margin-bottom:0} /* the chapter list already names the chapter: the large caption under it never says the title again, it carries the chapter's own text (the notes stay on the shelf, on their leaders). When the list steps aside (wk--tight) the title comes back over the text. */ .wk[data-mode="desk"]:not(.wk--tight) .wk__rt{display:none} .wk[data-mode="desk"]:not(.wk--tight) .wk__rp{margin-top:0;font-family:var(--serif);font-size:clamp(19px,1.45vw,23px);line-height:1.38;letter-spacing:-.004em;color:var(--on-n);max-width:none} /* ---------------------------------------------------------------- land: a phone held sideways. The frames on the left fill the stage's height; the chapter and its note on the right. */ .wk[data-mode="land"] .wk__pin{height:calc(100svh + (var(--n) - 1) * 70svh)} .wk[data-mode="land"] .wk__grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);column-gap:20px;padding:8px 0 10px} .wk[data-mode="land"] .wk__panel{grid-column:1;grid-row:1;height:auto;min-height:0;position:relative} .wk[data-mode="land"] .wk__side{grid-column:2;grid-row:1;padding:0;min-width:0;overflow:clip} /* centred while it fits, top-aligned when it does not (auto margins never go negative) */ .wk[data-mode="land"] .wk__slate{margin-top:auto} .wk[data-mode="land"] .wk__rel{margin-bottom:auto} .wk[data-mode="land"] .wk__ch,.wk[data-mode="land"] .wk__lines,.wk[data-mode="land"] .wk__shelf,.wk[data-mode="land"] .wk__marks{display:none} .wk[data-mode="land"] .wk__slate{margin-bottom:10px} .wk[data-mode="land"] .wk__tn{display:grid;order:1;margin-bottom:12px} .wk[data-mode="land"] .wk__rel{order:2;margin-top:0;padding-top:0} .wk[data-mode="land"] .wk__rt{font-size:21px;line-height:1.15} .wk[data-mode="land"] .wk__rp{font-size:14.5px;line-height:1.48;margin-top:8px} .wk[data-mode="land"] .wk__tl{font-size:15px;line-height:1.35} @media(max-width:720px){.wk[data-mode="land"] .wk__rp{font-size:13.5px}.wk[data-mode="land"] .wk__rt{font-size:19px}.wk[data-mode="land"] .wk__tn{display:none}} /* ---------------------------------------------------------------- touch: the phone in front */ .wk[data-mode="touch"] .wk__grid{display:flex;flex-direction:column;gap:14px;padding:10px 0 14px} .wk[data-mode="touch"] .wk__panel{flex:none;height:var(--panel-h,52svh);order:-1;position:relative} .wk[data-mode="touch"] .wk__side{flex:1 1 auto;padding:4px 2px 0} .wk[data-mode="touch"] .wk__ch,.wk[data-mode="touch"] .wk__lines,.wk[data-mode="touch"] .wk__shelf,.wk[data-mode="touch"] .wk__marks{display:none} .wk[data-mode="touch"] .wk__slate{margin-bottom:12px} .wk[data-mode="touch"] .wk__rel{margin-top:0;padding-top:0;order:2} .wk[data-mode="touch"] .wk__tn{display:grid;order:1;margin-bottom:14px} .wk[data-mode="touch"] .wk__rt{font-size:26px;line-height:1.15} .wk[data-mode="touch"] .wk__rp{font-size:18px;line-height:1.5;margin-top:10px} .wk[data-mode="touch"] .wk__fr,.wk[data-mode="touch"] .wk__ph{translate:none;will-change:transform} .wk[data-mode="touch"] .wk__fr{box-shadow:var(--sh-panel),0 0 0 1px rgba(255,255,255,.08)} /* side by side only on a wide screen that is not a portrait tablet: a portrait tablet up to 1100px (iPad Pro 1024x1366) keeps the stacked composition, the frame at the panel's width */ @media(min-width:900px) and (orientation:landscape),(min-width:1101px){ .wk[data-mode="touch"] .wk__grid{display:grid;gap:0 var(--gap);padding:18px 0 22px} .wk[data-mode="touch"] .wk__panel{height:auto;order:0} .wk[data-mode="touch"] .wk__ch{display:flex} .wk[data-mode="touch"] .wk__rel{margin-top:auto;padding-top:24px} .wk[data-mode="touch"] .wk__tn{order:3;margin:22px 0 0} .wk[data-mode="touch"] .wk__rt{display:none} .wk[data-mode="touch"] .wk__rp{margin-top:0;font-family:var(--serif);font-size:22px;line-height:1.4;color:var(--ink)} } @media(max-width:700px){.wk[data-mode="touch"] .wk__rt{font-size:24px}.wk__tl{font-size:16px}} /* ---------------------------------------------------------------- reduced motion and no JS: the end state, everything listed */ html:not(.js-motion) .wk__pin{height:auto} html:not(.js-motion) .wk__stage{position:relative;height:auto;overflow:visible;padding-top:0} html:not(.js-motion) .wk__grid{height:auto;row-gap:40px;padding:0 0 var(--sec)} html:not(.js-motion) .wk__side{grid-column:1/6} html:not(.js-motion) .wk__panel{grid-column:6/13;align-self:start} html:not(.js-motion) .wk__panel>.wk__comp{position:relative;inset:auto;padding:clamp(20px,3vw,40px)} html:not(.js-motion) .wk__fr{position:relative;width:100%;translate:none} html:not(.js-motion) .wk__ph,html:not(.js-motion) .wk__lines,html:not(.js-motion) .wk__shelf,html:not(.js-motion) .wk__marks, html:not(.js-motion) .wk__rel,html:not(.js-motion) .wk__tn,html:not(.js-motion) .wk__thr,html:not(.js-motion) .wk__slate{display:none} html:not(.js-motion) .wk--doc .wk__fr{width:min(100%,440px);margin-inline:auto} html:not(.js-motion) .wk__ch{gap:30px} html:not(.js-motion) .wk__c{color:var(--ink)} html:not(.js-motion) .wk__c>.node{background:var(--teal)} html:not(.js-motion) .wk__ct{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2} html:not(.js-motion) .wk__cx{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin-top:10px} html:not(.js-motion) .wk__cx p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:34em} html:not(.js-motion) .wk__cn{margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink-2)} html:not(.js-motion) .wk__cn>li+li{margin-top:6px} html:not(.js-motion) .wk__cn b{color:var(--ink);font-weight:600} @media(max-width:900px){ html:not(.js-motion) .wk__grid{display:flex;flex-direction:column} html:not(.js-motion) .wk__panel{order:-1;align-self:stretch} } @media (max-width:1100px) and (orientation:portrait){.wk__head{min-height:min(34svh,360px)}} /* a doc walk names its pages in the slate: a long name wraps under itself, and two lines are kept for it, so the chapter list never moves while a name is typed */ .wk--doc[data-mode="desk"] .wk__slate{align-items:flex-start;white-space:normal;min-height:2.8em} .wk--doc[data-mode="desk"] .wk__num,.wk--doc[data-mode="desk"] .wk__of{flex:none} /* ---- 49-compare.css ---- */ /* 49 · COMPARE (M18). A before/after split driven by the scroll and by the hand. The after image is revealed by clip-path from its side, the handle travels by transform, and the counter only ever reads its two real values. */ .cmps{position:relative} .cmps__pin{position:relative} /* the section's own padding makes the space below: the stage adds none (no dead band before the films) */ .cmps__stage{padding:clamp(8px,1.4vw,20px) 0 0} .cmps__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center} .cmps__dev{min-width:0} /* MGNI: the counter and the captions beside a post frame of at most 300px */ .cmps__grid--post{display:flex;justify-content:center;align-items:center;gap:clamp(48px,9vw,150px)} .cmps__grid--post .cmps__txt{flex:0 1 440px;min-width:0} .cmps__grid--post .cmps__dev{flex:0 0 min(300px,100%);display:flex;justify-content:center} .cmps__n{margin-top:14px;color:var(--ink);line-height:1} .cmps__n .ct{font-size:clamp(56px,6.4vw,104px)} .cmps__cap{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--ink-2);max-width:26em} /* the scale: the two years at the ends of a hairline; the fill follows the split and the teal tick marks the midpoint where the counter rolls */ .cmps__scale{display:flex;align-items:center;gap:14px;max-width:440px;margin:26px 0 22px} .cmps__scale .slate{flex:none} .cmps__rule{position:relative;flex:1;height:1px;background:var(--hair)} .cmps__rule>i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--x,0))} .cmps__rule::after{content:"";position:absolute;left:50%;top:-6px;width:2px;height:12px;margin-left:-1px;background:var(--teal)} .cmps__both{display:none} .cmp{position:relative;margin:0} .cmp--post{width:100%;max-width:300px;border-radius:var(--r-media);overflow:clip;background:#E9ECF1;box-shadow:var(--sh-2),0 0 0 1px var(--hair-2)} .cmp__box{position:relative;overflow:clip;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize} .cmp--post .cmp__box{aspect-ratio:3/4} .cmp--browser .cmp__box{aspect-ratio:1.6;background:#11151E} .cmp__l{position:absolute;inset:0} .cmp__l img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none;-webkit-user-drag:none} .cmp[data-dir="ltr"] .cmp__l--b{clip-path:inset(0 calc(100% - var(--x,0%)) 0 0)} .cmp[data-dir="rtl"] .cmp__l--b{clip-path:inset(0 0 0 calc(100% - var(--x,0%)))} .cmp__tag{position:absolute;top:12px;padding:5px 8px;border-radius:6px;background:rgba(8,10,17,.74);color:#fff; font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.1em;line-height:1;font-variant-numeric:tabular-nums} .cmp__tag--a{right:12px} .cmp__tag--b{left:12px} /* the handle: a 1px white line and a 28px rounded-square grip, moved by transform */ .cmp__h{position:absolute;left:0;top:0;bottom:0;width:44px;margin-left:-22px;z-index:3;cursor:ew-resize;touch-action:none;will-change:transform} .cmp__line{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:#fff;box-shadow:0 0 0 1px rgba(8,10,17,.22)} .cmp__grip{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:8px;background:#fff;color:var(--ink); display:grid;place-items:center;box-shadow:0 2px 6px rgba(8,10,17,.25),0 10px 24px -8px rgba(8,10,17,.4);transition:transform 240ms var(--ease-open)} .cmp__grip svg{width:14px;height:14px} .cmp__h:focus-visible{outline:0;box-shadow:none} .cmp__h:focus-visible .cmp__grip{outline:2px solid var(--teal);outline-offset:2px} @media(hover:hover){.cmp__h:hover .cmp__grip{transform:scale(1.08)}} .cmp.is-drag .cmp__grip{transform:scale(1.12)} /* IP: the two editions in one browser frame, the partnership line under it, all on the page's 12 columns: slate 1 to 3, caption 4 to 9, frame and partnership 2 to 11 */ .cmps__grid--browser{row-gap:26px} .cmps__top{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline} .cmps__top .slate{grid-column:1/4} .cmps__top .cmps__cap,.cmps__top .cmps__both{grid-column:4/10} .cmps__grid--browser .cmps__dev{grid-column:2/12;display:flex;justify-content:center} .cmp--browser{width:100%} .cmp--browser .fr__bar{gap:0} .cmp__dots{display:flex;gap:6px;flex:none;transition:transform 640ms var(--ease-swap)} .cmp__addr{margin-left:12px;flex:0 1 auto;width:min(40%,260px);max-width:none;transition:transform 640ms var(--ease-swap)} .cmp.is-rtl .cmp__addr{text-align:right} .cmps__partner{grid-column:2/12;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:var(--gap);align-items:center;margin-top:10px} .cmps__partner>.cmps__pf{grid-column:1/6} .cmps__partner>.cmps__pc{grid-column:7/11} .cmps__pf{width:min(620px,100%);border-radius:var(--r-chip);overflow:clip;background:#fff;box-shadow:var(--sh-1),0 0 0 1px var(--hair-2)} .cmps__pimg{display:block;width:100%;height:auto} .cmps__pc{display:flex;align-items:baseline;gap:12px;max-width:22em;font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--ink-2)} .cmps__one{font-size:56px;color:var(--ink);line-height:.9} /* stage (the IP browser frame on a desktop screen): the same pin as touch, 180svh, on the page's 12 columns. compare.js sizes the frame from the height the caption row and the partnership row leave in the stage (never wider than columns 2 to 11), so the whole device stands on one screen while the page mirrors; the caption takes one line (columns 4 to 12) and the partnership row runs on the frame's own width. */ .cmps[data-mode="stage"] .cmps__pin{height:180svh} .cmps[data-mode="stage"] .cmps__stage{position:sticky;top:0;height:100svh;padding:calc(var(--hd) + 16px) 0 20px;display:flex;align-items:center} .cmps[data-mode="stage"] .cmps__grid{width:100%} .cmps[data-mode="stage"] .cmps__grid--browser{row-gap:16px} .cmps[data-mode="stage"] .cmps__top .cmps__cap,.cmps[data-mode="stage"] .cmps__top .cmps__both{grid-column:4/-1;max-width:none} .cmps[data-mode="stage"] .cmps__partner{grid-column:1/-1;justify-self:center;width:var(--fw,100%);display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:0} .cmps[data-mode="stage"] .cmps__pf{flex:none;width:min(400px,46%)} .cmps[data-mode="stage"] .cmps__pc{flex:0 1 auto} /* touch: a pinned 160svh stage, scrubbed; the device first, the words under it */ .cmps[data-mode="touch"] .cmps__pin{height:160svh} .cmps[data-mode="touch"] .cmps__stage{position:sticky;top:0;height:100svh;padding:calc(var(--hd) + 16px) 0 20px;display:flex;align-items:center} .cmps[data-mode="touch"] .cmps__grid{width:100%} /* touch: the frame is sized in compare.js from the height left in the stage; the partnership line keeps one row beside a smaller banner */ .cmps[data-mode="touch"] .cmps__grid--browser{row-gap:14px} .cmps[data-mode="touch"] .cmps__grid--browser .cmps__dev{grid-column:1/-1} .cmps[data-mode="touch"] .cmps__partner{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;margin-top:0} @media(min-width:700px){ .cmps[data-mode="touch"] .cmps__partner{flex-wrap:nowrap} .cmps[data-mode="touch"] .cmps__pf{width:min(420px,44%);flex:none} } @media(max-width:900px){ .cmps__n .ct{font-size:56px} .cmps__scale{margin:18px 0 16px} .cmps__cap{font-size:18px} .cmps__top .slate,.cmps__top .cmps__cap,.cmps__top .cmps__both{grid-column:1/-1} .cmps__grid--browser .cmps__dev{grid-column:1/-1} .cmps__partner{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 40px} .cmps__top .cmps__cap{margin-top:8px} .cmps__pc{font-size:18px} .cmps__one{font-size:44px} } /* a phone stacks the frame over the words; a tablet keeps them side by side */ @media(max-width:640px){ .cmps__grid--post{flex-direction:column;align-items:stretch;gap:26px} .cmps__grid--post .cmps__txt{flex:none} .cmps__grid--post .cmps__dev{order:-1;flex:none} } @media(max-width:900px) and (max-height:760px){.cmp--post{max-width:260px}} /* a touch tablet (641px and wider, taller than a phone held sideways): the Instagram grid grows with the stage instead of a fixed 300px. compare.js sets --dw from the height the words leave in the pinned stage, at most 440px (the grids are 540px captures, so they are never drawn wider than their own pixels). Portrait stacks the words over the grid, on the grid's own width; landscape keeps them beside it. */ @media(min-width:641px) and (min-height:501px){ .cmps[data-mode="touch"] .cmps__grid--post .cmps__dev{flex:0 0 var(--dw,min(440px,44vw))} .cmps[data-mode="touch"] .cmp--post{max-width:none} .cmps[data-mode="touch"] .cmps__grid--post .cmps__n .ct{font-size:clamp(64px,8.4vw,96px)} .cmps[data-mode="touch"] .cmps__grid--post .cmps__cap{font-size:20px} } @media(min-width:641px) and (min-height:501px) and (orientation:portrait){ .cmps[data-mode="touch"] .cmps__grid--post{flex-direction:column;align-items:center;gap:clamp(24px,3svh,40px)} .cmps[data-mode="touch"] .cmps__grid--post .cmps__txt{flex:none;width:var(--dw,min(440px,100%));max-width:100%} .cmps[data-mode="touch"] .cmps__grid--post .cmps__dev{flex:none;width:var(--dw,min(440px,100%));max-width:100%} .cmps[data-mode="touch"] .cmps__grid--post .cmps__scale{max-width:none;margin:18px 0 14px} } /* a phone held sideways: the frame is sized by the height (compare.js), the words beside it */ @media(max-height:500px) and (orientation:landscape){ .cmp--post{max-width:min(300px,calc((100svh - var(--hd) - 44px) * .75))} .cmps[data-mode="touch"] .cmps__grid--browser{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:24px;row-gap:14px;align-items:center} .cmps[data-mode="touch"] .cmps__grid--browser .cmps__top{grid-column:1;grid-row:1;align-self:end} .cmps[data-mode="touch"] .cmps__grid--browser .cmps__dev{grid-column:2;grid-row:1/3} .cmps[data-mode="touch"] .cmps__partner{grid-column:1;grid-row:2;align-self:start;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:10px} .cmps[data-mode="touch"] .cmps__pf{width:100%} .cmps[data-mode="touch"] .cmps__cap{font-size:16px} } /* reduced motion and no JS: side by side, both captions, the counter at its value */ html:not(.js-motion) .cmp__h{display:none} html:not(.js-motion) .cmp__box{display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:auto;cursor:auto} html:not(.js-motion) .cmp__l{position:relative;inset:auto;clip-path:none!important} html:not(.js-motion) .cmp--post .cmp__l{aspect-ratio:3/4} html:not(.js-motion) .cmp--browser .cmp__l{aspect-ratio:1.6} html:not(.js-motion) .cmp--post{max-width:600px} @media(min-width:641px){html:not(.js-motion) .cmps__grid--post .cmps__dev{flex:0 1 600px}} html:not(.js-motion) .cmp__l--a{order:1} html:not(.js-motion) .cmp__l--b{order:2} html:not(.js-motion) .cmp__tag--a{right:auto;left:12px} html:not(.js-motion) .cmps__cap,html:not(.js-motion) .cmps__scale{display:none} html:not(.js-motion) .cmps__both{display:block;font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink-2)} html:not(.js-motion) .cmps__both li+li{margin-top:8px} @media(max-width:700px){html:not(.js-motion) .cmp--browser .cmp__box{grid-template-columns:1fr}} /* desk: the case section around the compare pads its foot and the films panel keeps its own margin; the compare hands back most of that padding, so the partnership row ends about 120px above the films instead of 300 */ .cmps:not([data-mode="touch"]){margin-bottom:calc(24px - var(--sec))} /* ---- 50-filmrow.css ---- */ /* 50 · FILM ROW (M19, case pages). A night stage (lp--stage: the films are the light); frames at their native ratios, one height (16:9 screens, tall films in phone frames, 4:5 posts). Desktop: when the row is wider than the screen, the stage pins (sticky, centred in the screen) and the row travels film by film, each one centred and whole while it plays; the row starts and ends on the page grid. Touch: a native snap row. The film in focus plays muted with a 1px progress filament and a sound chip. */ .frw{--fh:56svh;padding:clamp(64px,8vw,120px) 0 clamp(40px,5vw,64px);margin-block:var(--sec)} /* the static row (reduced motion, no JS) keeps six films shorter; the pinned stage shows one film at a time, so it takes the full height the screen leaves after the titles */ .frw--many:not([data-mode]),.frw--many[data-mode="static"]{--fh:42svh} .frw[data-mode="desk"]{--fh:min(56svh,calc(100svh - 300px))} .frw.is-pin .frw__stage{position:sticky;top:var(--frw-top,0px)} .frw__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-bottom:clamp(36px,4.4vw,64px)} .frw__hl{grid-column:1/8} .frw__hl .d2{color:#fff} .frw__lead{grid-column:9/13} @media(max-width:900px){.frw__head{grid-template-columns:1fr}.frw__hl,.frw__lead{grid-column:1/-1}.frw__lead{margin-top:18px}} .frw__vp{position:relative;overflow:clip} /* the row starts and ends on the page grid: the panel is inset, so its padding is the gutter minus the inset (63.4 at 1440, the line of every heading and wrap) */ .frw__row{display:flex;align-items:flex-start;gap:clamp(20px,2.6vw,44px);width:max-content;padding:0 max(calc(var(--gut) - var(--inset)),calc((100% - var(--max)) / 2));will-change:transform} .frw--one .frw__row{width:auto;justify-content:center} .frw__it{flex:none;display:flex;flex-direction:column} .frw__fr{position:relative;margin:0;width:min(84vw,calc(var(--fh) * var(--ar)));aspect-ratio:var(--ar);border-radius:var(--r-media);overflow:clip;background:#0B0E15; box-shadow:var(--sh-panel),0 0 0 1px rgba(255,255,255,.08)} .frw__it--post .frw__fr{border-radius:var(--r-media)} .frw__it--tall .frw__fr{width:min(62vw,calc((var(--fh) - 20px) * .4615 + 20px));aspect-ratio:auto;padding:10px} /* the tall film sits in the core's phone: its body keeps the phone's own corner (17% of its width, at most 44px), so the 10px bezel stays even round the screen's corner (the screen is the body's corner minus the bezel), never a 14px body round a 27px screen */ .frw__fr.fr--phone{border-radius:min(44px,17%) / min(44px,8.2%)} .frw__it--tall .fr__win{background:#000} .frw__it--tall .frw__open{position:absolute;left:0;right:0;top:50%;height:auto;aspect-ratio:var(--ar);translate:0 -50%} /* a film cut to its own phone screen keeps its exact ratio in our phone: never side-cropped */ .frw__it--exact .frw__open{aspect-ratio:var(--far)} .frw__open{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:zoom-in} .frw__film{position:absolute;inset:0;border-radius:0} @media(hover:hover){.frw__open .frw__film>img,.frw__open .frw__film>video{transition:transform 900ms var(--ease-open),opacity 200ms ease}.frw__open:hover .frw__film>img,.frw__open:hover .frw__film>video{transform:scale(1.03)}} /* the filament: 1px under the playing film, scaleX = currentTime / duration */ .frw__fil{position:relative;display:block;height:1px;margin-top:14px;background:rgba(255,255,255,.14)} .frw__it--tall .frw__fil{margin-inline:10px} .frw__fil>i{position:absolute;inset:0;background:rgba(255,255,255,.9);transform-origin:left;transform:scaleX(0)} .frw__fil::after{content:"";position:absolute;left:0;top:-5px;width:2px;height:11px;background:var(--teal);transform:translateX(var(--fx,0px)) scaleY(0);transition:transform 300ms var(--ease-open)} .frw__it.is-on .frw__fil::after{transform:translateX(var(--fx,0px)) scaleY(1)} .frw__meta{display:grid;grid-template-columns:1fr auto;align-items:start;column-gap:16px;margin-top:14px;max-width:min(84vw,calc(var(--fh) * var(--ar)))} .frw__it--tall .frw__meta{max-width:none;width:min(62vw,calc((var(--fh) - 20px) * .4615 + 20px))} /* a phone-width column is too narrow for the title and the chip side by side: the chip goes under */ .frw__it--tall .frw__meta{grid-template-columns:1fr} .frw__it--tall .frw__snd{grid-column:1;grid-row:auto;justify-self:start;margin-top:12px} .frw__t{font-family:var(--serif);font-size:22px;line-height:1.2;color:#fff;text-wrap:balance} .frw__k{grid-column:1;margin-top:6px} .frw__snd{grid-column:2;grid-row:1/3;align-self:start;height:34px;padding:0 12px;border-radius:var(--r-chip);background:#fff;color:var(--ink); font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.02em;white-space:nowrap; clip-path:inset(0 0 0 100% round var(--r-chip));transition:clip-path 260ms var(--ease-leave)} .frw__snd--mute{display:flex;align-items:center;background:transparent;color:var(--on-n-3);box-shadow:inset 0 0 0 1px var(--hair-n);font-weight:500;font-size:12px;letter-spacing:.08em} .frw__it.is-on .frw__snd{clip-path:inset(0 0 0 0 round var(--r-chip));transition:clip-path 520ms var(--ease-open) 120ms} @media(pointer:coarse){.frw__snd{height:44px;padding:0 14px;font-size:14px}} .frw__count{margin-top:clamp(22px,3vw,36px)} .frw--one .frw__count{display:none} /* touch: a native snap row, the centred film plays */ .frw[data-mode="touch"] .frw__vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-padding-inline:calc(var(--gut) - var(--inset))} .frw[data-mode="touch"] .frw__vp::-webkit-scrollbar{display:none} .frw[data-mode="touch"] .frw__it{scroll-snap-align:center} .frw[data-mode="touch"] .frw__row{will-change:auto;align-items:center} @media(max-width:700px){.frw{--fh:52svh}.frw__t{font-size:20px}} /* reduced motion and no JS: posters, a scrollable row, the viewer on tap */ html:not(.js-motion) .frw__vp{overflow-x:auto;scroll-snap-type:x mandatory} html:not(.js-motion) .frw__it{scroll-snap-align:center} html:not(.js-motion) .frw__snd{clip-path:none} html:not(.js-motion) .frw__fil,html:not(.js-motion) .frw__count{display:none} /* ---- 51-globe.css ---- */ /* 51 · THE LINE BETWEEN US (M20). The contact hero: a night panel filling the first viewport, the text on the left, the hairline globe on the right with Madrid framed top right and Sao Paulo bottom left, each joined to its node by a leader. On phones the text comes first and the globe square follows, so the first screen already holds both photographs, the lit nodes, a drawn arc and the typed time line. The canvas draws the globe; the build-rendered SVG is the fallback without JS or canvas. */ /* the chapter mark of every contact section: a node, a number, a door */ .chap{display:flex;align-items:center;gap:12px;margin:0 0 20px} .chap .node{background:var(--teal)} .lbu{margin-top:var(--inset)} .lbu__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr repeat(6,auto) 1fr;column-gap:var(--gap); min-height:calc(100svh - var(--hd) - var(--inset) * 2);padding-block:clamp(28px,5vh,56px)} .lbu__in>*{grid-column:1/7} .lbu__eye{grid-row:2} .lbu__h{grid-row:3;margin-top:18px;max-width:9.5em} .lbu__lead{grid-row:4;margin-top:26px;max-width:25em} .lbu__status{grid-row:5;margin-top:24px} .lbu__acts{grid-row:6;margin-top:30px} .lbu__meta{grid-row:7;margin-top:26px} .lbu__globe{grid-column:7/13;grid-row:1/-1;position:relative;min-height:540px;margin-right:calc(var(--gut) * -.35)} /* the typed line: live data only, clocks that roll on the minute */ .lbu__status{font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.6;color:var(--on-n);max-width:31em;min-height:3.2em; font-variant-numeric:tabular-nums;text-wrap:pretty} .lbu__status .ty{white-space:normal} .lbu__status.is-typing .lbu__s:not(.is-go),.lbu__status.is-typing .lbu__c:not(.is-go){color:transparent} .lbu__c{font-weight:inherit;letter-spacing:0;line-height:1;color:#fff;white-space:nowrap} .lbu__c .ct__w{vertical-align:baseline} /* the digit column sits on the words' baseline (it was .1em low) */ html:not(.js) .lbu__status{display:none} .lbu__rep{display:flex;align-items:center;gap:10px;font:500 15px/1.4 var(--sans);color:var(--on-n)} .lbu__priv{margin-top:8px;max-width:34em} /* the globe box */ .lbu__cv,.lbu__svg{position:absolute;inset:0;width:100%;height:100%;display:block} .lbu__cv{z-index:1} .lbu__cv--f{z-index:3;pointer-events:none} html.js .lbu__globe:not(.no-cv) .lbu__svg{display:none} .lbu__globe.no-cv .lbu__cv{display:none} .lbu__svg-disc{fill:rgba(6,9,15,.62)} .lbu__svg-grat polyline{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1;vector-effect:non-scaling-stroke} .lbu__svg-grat .eq{stroke:rgba(255,255,255,.11)} .lbu__svg-limb{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;vector-effect:non-scaling-stroke} .lbu__svg-arc{fill:none;stroke:rgba(0,194,184,.9);stroke-width:1.25;vector-effect:non-scaling-stroke} .lbu__svg-node rect{fill:#00C2B8;stroke:rgba(255,255,255,.6);stroke-width:1;vector-effect:non-scaling-stroke} .lbu__svg text{fill:#F2F4F8;font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:.14em} /* the two city photographs: frames that never move, a diorama inside */ .lbu__fr{position:absolute;z-index:2;width:clamp(186px,16vw,250px);margin:0} /* 186: "SÃO PAULO" and its clock on one line */ .lbu__fr--md{right:0;top:0} .lbu__fr--sp{left:0;bottom:0} .lbu__op{--r:14px;position:relative;border-radius:14px;overflow:clip;background:#131926} .lbu__op::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none} .lbu__dio{aspect-ratio:4/3;border-radius:14px} .lbu__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:10px; padding:34px 14px 11px;background:linear-gradient(180deg,rgba(8,10,17,0) 0%,rgba(8,10,17,.74) 52%,rgba(8,10,17,.9) 100%)} .lbu__fr--md .lbu__cap{top:0;bottom:auto;align-items:flex-start;padding:11px 14px 34px;background:linear-gradient(0deg,rgba(8,10,17,0) 0%,rgba(8,10,17,.62) 52%,rgba(8,10,17,.8) 100%)} .lbu__cap .lab{color:var(--on-n);padding-bottom:3px} .lbu__fr--md .lbu__cap .lab{padding:3px 0 0} .lbu__clk{font-family:var(--sans);font-weight:300;font-size:28px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em} /* labels at the nodes: Hanken 12 caps, placed by transform, opened by clip */ .lbu__labs{position:absolute;inset:0;z-index:4;pointer-events:none} .lbu__lab{position:absolute;left:0;top:0;display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap;padding:4px 0; font-family:var(--sans);font-weight:600;font-size:12px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--on-n)} .lbu__lab b{font-weight:600} .lbu__lt{font-weight:500;letter-spacing:.04em;color:var(--on-n-2);font-variant-numeric:tabular-nums} .lbu__lab .ct{font-weight:500;letter-spacing:.04em} .lbu__lab--you b{color:#fff} .lbu__lab.is-stack{flex-direction:column;align-items:flex-start;gap:3px} .lbu__lab.is-stack.is-end{align-items:flex-end} /* the labels belong to the canvas: without it (no JS, no canvas) the SVG carries the names, and no clock can run */ .lbu__globe:not(.is-live) .lbu__labs{display:none} html:not(.js) .lbu__clk{display:none} html.js-motion .lbu__lab{clip-path:inset(0 100% 0 0)} html.js-motion .lbu__lab.is-on{clip-path:inset(-6px -6px -6px -6px);transition:clip-path 560ms var(--ease-open)} .lbu__sun{position:absolute;right:0;bottom:0;z-index:2;margin:0;text-align:right} html:not(.js) .lbu__sun{display:none} /* portrait tablets and phones: the text first, then the globe square with its frames. A landscape screen from 960px (1024x768, touch or fine) keeps the two columns: stacked, its buttons fell 1.7 screens down under a 934x800 globe */ @media (max-width:959px),(max-width:1040px) and (max-aspect-ratio:5/4){ .lbu__in{grid-template-columns:minmax(0,1fr);grid-template-rows:none;min-height:0;padding-block:clamp(26px,5vw,48px) clamp(32px,6vw,56px)} .lbu__in>*{grid-column:1/-1;grid-row:auto} .lbu__h{margin-top:16px;max-width:none} .lbu__status{margin-top:18px;min-height:4.8em;max-width:40em} .lbu__globe{grid-column:1/-1;grid-row:auto;min-height:0;aspect-ratio:7/6;margin:22px 0 0} .lbu__fr{width:clamp(148px,28vw,250px)} .lbu__lead{margin-top:30px;max-width:34em} .lbu__acts{margin-top:26px} } /* two columns on a short landscape screen: the text column is set a size down so the buttons stay on the first screen, the globe keeps the rest */ @media (min-width:960px) and (max-width:1100px) and (min-aspect-ratio:5/4){ .lbu__in{padding-block:clamp(22px,4vh,40px)} .lbu__h{margin-top:14px} .lbu__lead{margin-top:20px} .lbu__status{margin-top:18px;font-size:16px} .lbu__acts{margin-top:24px} .lbu__meta{margin-top:20px} .lbu__globe{min-height:min(540px,70svh);margin-right:0} } /* phones held sideways: the globe box is one screen tall and wide, the globe in its middle and the two photographs at its sides, so it is seen whole */ @media (max-width:959px) and (orientation:landscape) and (max-height:520px){ .lbu__globe{aspect-ratio:auto;height:max(260px,calc(100svh - var(--hd) - 36px))} .lbu__fr{width:clamp(148px,26vw,230px)} } @media (max-width:600px){ .lbu__globe{aspect-ratio:3/4;margin-top:14px} .lbu__fr{width:34vw} .lbu__cap{flex-direction:column;align-items:flex-start;gap:4px;padding:26px 10px 8px} .lbu__fr--md .lbu__cap{padding:8px 10px 26px} .lbu__clk{font-size:24px} .lbu__status{font-size:16px} } /* ---- 52-composer.css ---- */ /* 52 · THE DESK (contact): one night panel for 01 Book, Before the call and 02 Write. A hairline runs down its left edge from the first chapter mark to the composer, drawn by the scroll with a teal head at its tip; the chapter marks and the three booking stops sit on it. The booking frame keeps a night screen until Calendly has drawn; the six questions share one answer slot; the composer is a white letter on the night desk (M21). */ .desk{--dk-in:clamp(30px,3.2vw,48px);margin-top:clamp(12px,2vw,24px);padding-block:clamp(72px,9vw,128px) clamp(72px,9vw,128px)} .desk>.dk__svg{position:absolute;left:0;top:0;z-index:1;overflow:visible;pointer-events:none} .dk__track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1} .dk__p{fill:none;stroke-width:1.25;stroke-dasharray:1;stroke-dashoffset:0} html.js-motion .dk__p{stroke-dashoffset:1} .desk>.dk__head{position:absolute;left:0;top:0;z-index:1;width:7px;height:7px;border-radius:2px;background:#E6FFFD;pointer-events:none; box-shadow:0 0 0 1px rgba(0,194,184,.9),0 0 16px 5px rgba(0,194,184,.45);visibility:hidden;will-change:transform} .desk.is-drawing>.dk__head{visibility:visible} /* without a script the hairline is a plain rule down the left edge */ html:not(.js) .desk .dk-sec>.wrap{background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) 3px 0/1px 100% no-repeat} .dk-sec+.dk-sec{margin-top:clamp(104px,12vw,184px)} .dk-head{position:relative;padding-left:var(--dk-in);margin-bottom:clamp(40px,5vw,72px)} .dk-head h2{max-width:14em} /* marks on the hairline: grey until the head passes, then teal */ .desk .chap{margin-left:calc(var(--dk-in) * -1);gap:calc(var(--dk-in) - 7px)} .desk .chap .node,.dk__nd{width:7px;height:7px;border-radius:2px;background:var(--teal);box-shadow:0 0 0 4px rgba(0,194,184,0);transition:background-color 200ms,box-shadow 420ms var(--ease-open)} .dk__nd{position:absolute;left:calc(var(--dk-in) * -1);top:5px;z-index:2} .dk__nd--h{left:0;top:calc(clamp(16px,1.8vw,28px) - 3.5px)} html.js-motion .desk .chap .node:not(.is-lit),html.js-motion .dk__nd:not(.is-lit){background:#4A5366} html.js-motion .desk .chap .node.is-lit,html.js-motion .dk__nd.is-lit{box-shadow:0 0 0 4px rgba(0,194,184,.16)} /* ---- 01 Book: the stops on the hairline, the frame beside them */ .dk-book__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding-left:var(--dk-in)} .dk-book__side{grid-column:1/5;position:relative;padding-right:clamp(0px,1.4vw,20px)} .dk-cal{grid-column:5/13;--r:var(--r-frame)} .dk-stops{display:grid;gap:clamp(30px,3.2vw,44px);margin:0;padding:0;list-style:none} .dk-stop{position:relative} .dk-stop__in{--r:0px} .dk-stop__n{display:block} .dk-stop__h{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.8vw,26px);line-height:1.2;color:var(--on-n);text-wrap:balance} .dk-stop__p{margin-top:8px;max-width:26em;font-size:16px;line-height:1.55;color:var(--on-n-2)} .dk-book__door{margin-top:clamp(40px,4.4vw,60px);padding-top:clamp(24px,2.4vw,32px);border-top:1px solid rgba(255,255,255,.1)} .dk-book__alt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:14px;font-size:15px;color:var(--on-n-2)} .dk-book__alt .u{color:var(--on-n)} /* the booking frame: a night screen until Calendly has drawn, then Calendly opens from the top over it; its own loader is never seen */ .dk-cal__fr{box-shadow:var(--sh-panel),0 0 0 1px rgba(255,255,255,.08),0 50px 140px -60px rgba(0,194,184,.22)} .dk-cal__win{aspect-ratio:auto;background:#0E1117} /* the widget is laid out and visible to its own observers from the start (a frame clipped to nothing never renders inside); the skeleton lies over it and leaves downward from its top edge once Calendly has drawn */ /* a fixed box as tall as Calendly's page (it reports 880 beside, 832 in its phone layout): nothing below the frame moves when it arrives. Its own auto-resize is off: it scrolled the page back to the frame as it resized. */ .dk-cal__w{position:relative;z-index:1;min-width:300px;height:880px;min-height:880px} .dk-cal__w .calendly-spinner{display:none} .dk-cal__w iframe{display:block;min-height:880px} .dk-cal__fr.is-ready .dk-cal__sk{clip-path:inset(100% 0 0 0);transition:clip-path 1100ms var(--ease-open)} html:not(.js-motion) .dk-cal__fr.is-ready .dk-cal__sk{transition:none} .dk-cal__fr.is-done .dk-cal__sk{visibility:hidden} .dk-cal__sk{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr);grid-template-rows:100%;clip-path:inset(0 0 0 0);background: radial-gradient(60% 50% at 18% 0%,rgba(0,194,184,.10),transparent 70%),linear-gradient(180deg,#111723,#0C1018)} .dk-cal__info{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(28px,3vw,44px) clamp(22px,2.6vw,36px);border-right:1px solid rgba(255,255,255,.08)} .dk-cal__info .dial{width:104px;height:104px;margin-bottom:14px} .dial--sk .dial__track{stroke:rgba(255,255,255,.14)} .dial--sk .dial__p{stroke:#F2F4F8} .dial--sk .dial__t{color:#fff;font-size:19px} .dk-cal__l1{color:var(--on-n-2)} .dk-cal__l2{display:flex;align-items:center;gap:10px;color:var(--on-n-3)} .dk-cal__cal{padding:clamp(28px,3vw,44px) clamp(22px,2.6vw,40px)} .dk-cal__m{min-height:1.3em;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.3;color:var(--on-n)} .dk-cal__dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:24px;text-align:center;font:500 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--on-n-3)} .dk-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:12px;border-top:1px solid rgba(255,255,255,.09);border-left:1px solid rgba(255,255,255,.05)} .dk-cal__grid i{display:grid;place-items:center;height:clamp(44px,5.2vw,68px);border-right:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.07); font:300 16px/1 var(--sans);font-style:normal;font-variant-numeric:tabular-nums;color:rgba(242,244,248,.46)} .dk-cal__grid i.is-today{color:#fff;box-shadow:inset 0 -2px 0 var(--teal)} html.js-motion .dk-cal:not(.in) .dk-cal__grid{clip-path:inset(0 100% 0 0)} html.js-motion .dk-cal .dk-cal__grid{transition:clip-path 1300ms var(--ease-open) 420ms} html.js-motion .dk-cal:not(.in) .dk-cal__dow,html.js-motion .dk-cal:not(.in) .dk-cal__m{clip-path:inset(0 0 100% 0)} html.js-motion .dk-cal .dk-cal__dow,html.js-motion .dk-cal .dk-cal__m{transition:clip-path 700ms var(--ease-open) 300ms} html.js-motion .dk-cal:not(.in) .dial--sk .dial__p{stroke-dashoffset:1} html.js-motion .dk-cal .dial--sk .dial__p{transition:stroke-dashoffset 1600ms var(--ease-open) 500ms} .dk-cal__fb{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0; padding:18px clamp(22px,2.6vw,36px);font-size:15px;color:var(--on-n-2);background:#0C1018;border-top:1px solid rgba(255,255,255,.08)} .dk-cal__fb[hidden]{display:none} .dk-cal__fb .u{color:var(--on-n)} .dk-cal__ns{position:relative;z-index:4;padding:28px;font-size:16px;color:var(--on-n-2);background:#0E1117} .dk-cal__ns .u{color:var(--on-n)} html:not(.js) .dk-cal__w,html:not(.js) .dk-cal__sk{display:none} /* ---- Before the call: the desk's one daylight beat. A sheet of paper laid on the night desk, between the booking card and the letter, opened by clip from its centre; its chapter node stays on the hairline beside it. Questions on the left, the one answer slot on the right: a small night window on the paper */ .dk-faq__pw{--r:22px;--fp:clamp(28px,3.8vw,60px);position:relative;margin-left:var(--dk-in)} .dk-faq__pw>.dk__nd--h{left:calc(var(--dk-in) * -1);top:calc(var(--fp) + clamp(16px,1.8vw,28px) - 3.5px)} .desk .dk-faq__pw>.op__sh{box-shadow:0 60px 120px -50px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06),0 0 90px -30px rgba(0,194,184,.16)} .dk-faq__paper{position:relative;padding:var(--fp) var(--fp) calc(var(--fp) * .8);background:var(--white);color:var(--ink)} .dk-faq__paper .dk-head{padding-left:0;margin-bottom:clamp(26px,3.4vw,48px)} .dk-faq__paper .slate{color:var(--ink-3)} .dk-faq__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start} .dk-faq__qs{grid-column:1/8;margin:0;padding:0;list-style:none} .dk-faq__slot{grid-column:8/13;position:sticky;top:calc(var(--hd) + 40px);padding:clamp(26px,2.6vw,40px);border-radius:18px;color:var(--on-n); background:radial-gradient(90% 60% at 100% 0%,rgba(0,194,184,.12),transparent 70%),linear-gradient(170deg,#182032,#0C1019); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 34px 60px -34px rgba(14,17,23,.6),0 2px 6px rgba(14,17,23,.1)} .dk-faq__slot .slate{color:var(--on-n-3)} .dk-q{position:relative} .dk-q .rule{background:var(--hair)} .dk-q__b{display:grid;grid-template-columns:44px minmax(0,1fr) 28px;align-items:baseline;column-gap:10px;width:100%;margin:0;padding:22px 0;border:0;background:none; text-align:left;cursor:pointer;color:var(--ink-3);font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.3;transition:color 240ms} .dk-q__b:hover{color:var(--ink-2)} .dk-q__b:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:6px} .dk-q__n{color:inherit;font-size:12px} .dk-q__tk{align-self:center;justify-self:end;width:22px;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:right;transition:transform 420ms var(--ease-open)} .dk-q.is-on .dk-q__b{color:var(--ink)} .dk-q.is-on .dk-q__tk{transform:none} .dk-a__n{color:var(--on-n-3)} .dk-a__q{display:none} .dk-a__p{margin-top:16px;max-width:34em;font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.55;color:var(--on-n);text-wrap:pretty} /* reduced motion keeps every answer's place, so the slot never changes height */ html.js:not(.js-motion) .dk-faq__slot>.relay__i:not(.is-on){display:block;visibility:hidden} /* no script: every question printed above its answer, on the paper */ html:not(.js) .dk-faq__qs{display:none} html:not(.js) .dk-faq__slot{grid-column:1/-1;position:static;display:block;padding:0;background:none;box-shadow:none;color:var(--ink)} html:not(.js) .dk-faq__slot>.relay__i.dk-a{display:block;visibility:visible;margin:0 0 36px;padding-top:24px;border-top:1px solid var(--hair)} html:not(.js) .dk-a .relay__in{transform:none} html:not(.js) .dk-a__n{color:var(--ink-3)} html:not(.js) .dk-a__q{display:block;margin-top:10px;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.3;color:var(--ink)} html:not(.js) .dk-a__p{margin-top:10px;color:var(--ink-2)} /* ---- 02 Write: the letter on the desk */ .dk-write__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end} .dk-write__head>div{grid-column:1/7} .dk-write__door{grid-column:8/13;margin:0} .dk-write__card{padding-left:var(--dk-in);max-width:calc(var(--dk-in) + 900px)} .desk .cmp .op__sh{box-shadow:0 60px 120px -50px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06),0 0 90px -30px rgba(0,194,184,.18)} .desk .cmp-msg{color:var(--ink)} .desk .cmp-msg ::selection{background:var(--ink);color:#fff} .desk .cmp-msg .btn--p{background:linear-gradient(170deg,#1A2233,#0B0E15);color:#fff;box-shadow:var(--sh-1)} .desk .cmp-msg .btn--s{box-shadow:inset 0 0 0 1px rgba(14,17,23,.3)} /* ---- the composer (M21): a letter that writes itself once, three chips the visitor turns; the page sends nothing, the two buttons are plain links */ .cmp{--r:20px;position:relative} .cmp .op__sh{border-radius:20px} .cmp-msg{--r:20px;position:relative;display:block;border-radius:20px;padding:clamp(24px,3.2vw,44px)} .cmp-msg__to{display:flex;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:clamp(22px,2.6vw,32px);border-bottom:1px solid var(--hair-2)} .cmp-msg__faces{display:flex;flex:none} .cmp-msg__faces img{width:32px;height:32px;border-radius:10px;object-fit:cover;object-position:50% 28%;filter:grayscale(1) contrast(1.06);box-shadow:0 0 0 2px #fff} .cmp-msg__faces img+img{margin-left:-7px} .cmp-msg__lab{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink)} .cmp-msg__draft,.cmp-msg__echo{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.1vw,28px);line-height:1.6;color:var(--ink);text-wrap:pretty;max-width:36em} .cmp-msg__echo{margin-top:.7em;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere} .cmp-msg__draft .ty{white-space:normal} .cmp-msg__draft .is-wait{color:transparent} /* chips: a phrase you can turn; native selects on touch, a listbox on desktop */ .cmpc{position:relative;display:inline-block;margin:0 .02em 0 .06em;white-space:nowrap;vertical-align:baseline;border-radius:10px} .cmpc__face{display:inline-flex;align-items:baseline;gap:.3em;padding:0 .36em .04em;border-radius:10px;background:var(--mist); box-shadow:inset 0 0 0 1px rgba(14,17,23,.10);font:inherit;line-height:1.32;color:inherit;cursor:pointer;transition:box-shadow 200ms var(--ease-open),background-color 200ms} .cmpc__face:hover,.cmpc:focus-within .cmpc__face{box-shadow:inset 0 0 0 1px rgba(14,17,23,.32)} .cmpc__face:focus-visible{border-radius:10px} .cmpc__chev{width:.42em;height:.42em;align-self:center;flex:none;fill:none;stroke:var(--ink-3);stroke-width:1.5;transition:transform 320ms var(--ease-open)} .cmpc.is-menu .cmpc__chev{transform:rotate(180deg)} .cmpc__sel{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;padding:0;-webkit-appearance:none;appearance:none;cursor:pointer} .cmpc__sel[hidden]{display:none} .cmpc--in .cmpc__face{cursor:text} .cmpc--in .cmpc__v{visibility:hidden;white-space:pre} .cmpc--in.is-typing .cmpc__v{visibility:visible} .cmpc__inp{position:absolute;inset:0;width:100%;min-width:0;padding:0 .36em .04em;border:0;border-radius:10px;background:transparent;font:inherit;line-height:1.32;color:inherit;outline:0} .cmpc__inp:focus-visible{outline:2px solid var(--teal);outline-offset:2px;box-shadow:0 0 0 1px var(--ink);border-radius:10px} .cmpc--in.is-typing .cmpc__inp{color:transparent;caret-color:transparent} .cmpc--in.is-empty .cmpc__v,.cmpc__inp::placeholder{color:var(--ink-3);opacity:1} html.js-motion .cmpc.is-wait{clip-path:inset(0 100% 0 0 round 10px)} html.js-motion .cmpc.is-reveal{clip-path:inset(0 0 0 0 round 10px);transition:clip-path 380ms var(--ease-open)} html:not(.js) .cmpc__face{display:none} html:not(.js) .cmpc__sel{position:static;opacity:1;width:auto;height:auto;font:inherit;padding:0 .3em;border-radius:10px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--hair)} html:not(.js) .cmpc__inp{position:static;width:7em;background:var(--mist);box-shadow:inset 0 0 0 1px var(--hair)} /* a coarse pointer: every chip is a 44px target with its look unchanged. The chip's box is its line, so the letter's leading opens to 44px; the field and the native selects fill that box, and stacked chips never share a pixel */ @media (pointer:coarse){.cmp-msg__draft{line-height:max(1.6em,44px)}} .cmpc__menu{position:absolute;left:-6px;top:calc(100% + 8px);z-index:20;min-width:calc(100% + 12px);margin:0;padding:6px;list-style:none;white-space:nowrap; background:#fff;border-radius:12px;box-shadow:var(--sh-2),inset 0 0 0 1px var(--hair-2);font-family:var(--sans);font-size:16px;line-height:1.3; clip-path:inset(0 -32px 100% -32px round 12px);visibility:hidden;transition:clip-path 220ms var(--ease-leave),visibility 0s linear 220ms} .cmpc.is-right .cmpc__menu{left:auto;right:-6px} .cmpc.is-menu .cmpc__menu{clip-path:inset(-4px -32px -44px -32px round 12px);visibility:visible;transition:clip-path 320ms var(--ease-open)} .cmpc__menu:focus{outline:0} .cmpc__menu li{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 12px;border-radius:8px;color:var(--ink-2);cursor:pointer} .cmpc__menu li .node{background:rgba(14,17,23,.18);transition:background-color 180ms} .cmpc__menu li.is-act{background:var(--mist);color:var(--ink)} .cmpc__menu li[aria-selected="true"]{color:var(--ink)} .cmpc__menu li[aria-selected="true"] .node{background:var(--teal)} .cmp-msg__note{display:block;margin-top:clamp(24px,3vw,34px)} .cmp-msg__note textarea{display:block;width:100%;min-height:104px;resize:vertical;padding:14px 16px;border:0;border-radius:12px;background:var(--mist); box-shadow:inset 0 0 0 1px var(--hair);font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink)} .cmp-msg__note textarea::placeholder{color:var(--ink-3);opacity:1} .cmp-msg__note textarea:focus-visible{border-radius:12px} .cmp-msg__acts{margin-top:24px} .cmp-msg__book{margin-left:4px} /* ---- tablets: the frame and the slot go under their lists */ @media (max-width:1040px){ .dk-book__side,.dk-cal{grid-column:1/-1} .dk-book__side{padding-right:0} .dk-book__door{max-width:40em} .dk-cal{margin-top:clamp(40px,6vw,56px)} /* the answer slot docks at the foot of the screen; the list is cut at its top edge */ .dk-faq__g{--faq-dock:1;display:block} /* it never takes more than about 45% of the screen: a longer answer scrolls inside it. The teal hairline at its foot says there is more; the ink that travels with the answer covers it once the end is reached */ .dk-faq__slot{position:sticky;top:auto;bottom:10px;margin-top:8px;padding:22px 24px 24px;max-height:45svh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent; background:linear-gradient(0deg,#121826 55%,rgba(18,24,38,0)) center bottom/100% 30px local no-repeat, linear-gradient(90deg,rgba(0,194,184,0),rgba(0,194,184,.7) 30%,rgba(0,194,184,.7) 70%,rgba(0,194,184,0)) center calc(100% - 1px)/min(46%,180px) 1px scroll no-repeat, linear-gradient(0deg,rgba(6,9,15,.55),rgba(6,9,15,0)) center bottom/100% 26px scroll no-repeat, linear-gradient(180deg,#1B2232,#121826); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 -22px 44px -26px rgba(14,17,23,.45),0 24px 48px -24px rgba(14,17,23,.5)} /* docked under the list, the slot names its question too: a question still under the slot's edge is never answered without its words */ .dk-a__q{display:block;margin-top:8px;font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.3;color:var(--on-n)} .dk-a__p{margin-top:10px;font-size:19px;line-height:1.5;color:var(--on-n-2)} /* reduced motion (and no script): no dock and no swap, every question printed above its answer */ html:not(.js-motion) .dk-faq__g{--faq-dock:0} html:not(.js-motion) .dk-faq__qs{display:none} html:not(.js-motion) .dk-faq__slot{position:static;display:block;margin:0;padding:0;max-height:none;overflow:visible;background:none;box-shadow:none;color:var(--ink)} html:not(.js-motion) .dk-faq__g>.dk-faq__slot>.relay__i.dk-a{display:block;visibility:visible;margin:0 0 30px;padding-top:22px;border-top:1px solid var(--hair)} html:not(.js-motion) .dk-a .relay__in{transform:none} html:not(.js-motion) .dk-a__n{color:var(--ink-3)} html:not(.js-motion) .dk-a__q{color:var(--ink)} html:not(.js-motion) .dk-a__p{color:var(--ink-2)} .dk-write__head{grid-template-columns:1fr} .dk-write__head>div,.dk-write__door{grid-column:1/-1} .dk-write__door{margin-top:18px} } @media (max-width:760px){ .dk-cal__sk{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr} .dk-cal__info{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)} .dk-cal__info .dial{width:84px;height:84px;margin-bottom:6px} } @media (max-width:700px){ .desk{--dk-in:26px;padding-block:64px 72px} /* the frame takes the full width; the hairline and its head pass under it */ .dk-cal{margin-left:calc(var(--dk-in) * -1)} .dk-q__b{grid-template-columns:34px minmax(0,1fr) 20px;padding:20px 0;font-size:20px} .dk-a__q{font-size:18px} .dk-a__p{margin-top:8px;font-size:17px} .dk-faq__slot{padding:18px 18px 20px} .dk-faq__pw{--r:18px;--fp:18px} /* the docked window takes nearly the paper's width: more words per line */ .dk-faq__slot{margin-inline:calc(var(--fp) * -1 + 8px)} .dk-faq__paper .dk-head{margin-bottom:14px} .cmp-msg__book{margin-left:0} } /* short screens (phone landscape, 320x568): a tighter slot, so most answers fit its 45% */ @media (max-width:1040px) and (max-height:620px){ .dk-faq__slot{padding:14px 20px 16px} .dk-a__q{margin-top:6px;font-size:17px} .dk-a__p{margin-top:6px;font-size:16px;line-height:1.5} } /* ---- 53-timeline.css ---- */ /* 53 · TIMELINE (M25): the axis that draws with the scroll and lights its stops, the phase cards that open above them, the 30-minute dial, the arc between two portraits that carries one light, the MH diagram, and 03 Follow. The end state is the default; html.js-motion arms the start. */ /* ---- the axis */ .tl{--tl-v:0;position:relative} /* one explicit 1fr column: the stops' percentage offsets and widths resolve against the full width */ .tl__cards{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--rows,1),auto);row-gap:28px;padding-bottom:48px} .tl__stop{grid-row:var(--row,1);grid-column:1;position:relative;display:flex;flex-direction:column;margin-left:calc(var(--at) * 100%);width:calc(var(--w) * 100%)} .tl__card{position:relative;flex:1 1 auto} .tl__card::before{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:var(--sh-1);transform-origin:50% 100%;transition:transform 900ms var(--ease-open) 160ms} .tl__op{position:relative;height:100%;padding:22px 24px 26px;background:var(--white);border-radius:16px;box-shadow:inset 0 0 0 1px var(--hair-2); clip-path:inset(0 0 0 0 round 16px);transition:clip-path 900ms var(--ease-open) 160ms} .tl__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:60px} .tl__top:has(.dial,.tl-sheet,.tl-list){min-height:84px} .tl__n{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;line-height:1.4;color:var(--ink-3);padding-top:2px} .tl__h{margin-top:12px;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance} .tl__p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--ink-2)} .tl__p .nw{white-space:nowrap} .tl__stem{position:absolute;left:24px;top:100%;width:1px;height:48px;background:rgba(14,17,23,.28);transform-origin:50% 100%;transition:transform 380ms var(--ease-open)} .tl__rail{position:relative;height:1px} .tl__track{position:absolute;inset:0;background:var(--hair)} .tl__axis{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;will-change:transform} .tl__node{position:absolute;top:0;left:calc(var(--at) * 100% + 24px);margin:-3px 0 0 -3px;background:var(--teal);transition:transform 180ms var(--ease-open),background-color 180ms} .tl__vnode{display:none} html.js-motion .tl__axis{transform:scaleX(0)} html.js-motion .tl__node:not(.is-lit){background:#9AA2AE;transform:scale(.6)} html.js-motion .tl__stop:not(.is-lit) .tl__op{clip-path:inset(100% 0 0 0 round 16px);transition:clip-path 360ms var(--ease-leave)} html.js-motion .tl__stop:not(.is-lit) .tl__card::before{transform:scaleY(0);transition:transform 360ms var(--ease-leave)} html.js-motion .tl__stop:not(.is-lit) .tl__stem{transform:scaleY(0);transition-duration:200ms} /* the segment that runs on to the screen edge, with its tick and label */ .tl__edge{position:absolute;left:100%;top:0;width:0;height:1px} .tl__erule{position:absolute;left:0;top:0;background:var(--ink)} .tl__elab{position:absolute;right:0;bottom:12px;white-space:nowrap} html.js-motion .tl:not(.is-done) .tl__erule{transform:scaleX(0)} html.js-motion .tl:not(.is-done) .tl__erule .rule__tick{transform:scaleY(0)} html.js-motion .tl:not(.is-done) .tl__elab{clip-path:inset(0 0 0 100%)} html.js-motion .tl.is-done .tl__elab{clip-path:inset(-4px);transition:clip-path 600ms var(--ease-open) 380ms} /* devices inside the light cards */ .dial{position:relative;display:inline-grid;place-items:center;width:84px;height:84px;flex:none} .dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .dial__track{fill:none;stroke:var(--hair);stroke-width:1.5} .dial__p{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0} .dial__tick{fill:var(--teal)} .dial__t{position:relative;font-family:var(--sans);font-weight:300;font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)} html.js-motion .tl__stop .dial__p{stroke-dashoffset:1;transition:stroke-dashoffset 300ms var(--ease-leave)} html.js-motion .tl__stop.is-lit .dial__p{stroke-dashoffset:0;transition:stroke-dashoffset 1400ms var(--ease-open) 420ms} .tl-sheet{display:flex;flex-direction:column;gap:6px;width:58px;height:78px;padding:11px 9px;flex:none;background:var(--white);border-radius:4px; box-shadow:0 0 0 1px var(--hair),0 8px 16px -10px rgba(14,17,23,.3)} .tl-sheet i{display:block;height:1px;width:var(--w);background:rgba(14,17,23,.36);transform-origin:0 50%} .tl-sheet i:first-child{height:2px;background:var(--ink)} .tl-list{display:flex;flex-direction:column;gap:10px;width:92px;padding-top:7px;flex:none} .tl-list>span{display:flex;align-items:center;gap:9px} .tl-list .node{width:5px;height:5px;background:var(--teal);transition:background-color 180ms} .tl-list__l{display:block;height:1px;width:var(--w);background:rgba(14,17,23,.36);transform-origin:0 50%} html.js-motion .tl__stop .tl-sheet i,html.js-motion .tl__stop .tl-list__l{transform:scaleX(0);transition:transform 200ms var(--ease-leave)} html.js-motion .tl__stop.is-lit .tl-sheet i,html.js-motion .tl__stop.is-lit .tl-list__l{transform:none;transition:transform 640ms var(--ease-open) calc(520ms + var(--k) * 110ms)} html.js-motion .tl__stop:not(.is-lit) .tl-list .node{background:#9AA2AE} html.js-motion .tl__stop.is-lit .tl-list .node{transition-delay:calc(520ms + var(--k) * 110ms)} /* ---- the night variant (the work hub's engagement, on its own .lp panel): hairline outline cards, a ruler of weeks under the axis, a teal head that travels the axis with the scroll */ .tl-sec--night{margin-top:clamp(12px,2vw,24px);padding-block:clamp(88px,10vw,144px) clamp(96px,11vw,156px)} .tl--night .tl__card::before{box-shadow:0 36px 70px -46px rgba(0,0,0,.75)} .tl--night .tl__op{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)} .tl--night .tl__top{min-height:0} .tl--night .tl__n{display:flex;align-items:center;gap:10px;color:var(--on-n-3)} .tl--night .tl__n::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--teal);flex:none} .tl--night .tl__h{margin-top:26px;font-size:clamp(24px,2vw,30px);color:var(--on-n)} .tl--night .tl__p{color:var(--on-n-2)} .tl--night .tl__stem{background:rgba(255,255,255,.26)} .tl--night .tl__track{background:rgba(255,255,255,.12)} .tl--night .tl__axis{background:rgba(242,244,248,.72)} .tl--night .tl__node{box-shadow:0 0 0 4px rgba(0,194,184,.16)} html.js-motion .tl--night .tl__node:not(.is-lit){background:#4A5366;box-shadow:none} .tl--night .tl__erule{background:rgba(242,244,248,.4)} .tl--night .tl__elab{color:var(--on-n-3)} .tl__ruler{position:absolute;left:0;right:0;top:1px;height:9px;pointer-events:none} .tl__tk{position:absolute;left:calc(var(--t) * 100% + 24px);top:0;width:1px;height:4px;background:rgba(255,255,255,.2);transition:background-color 240ms} .tl__tk--m{height:9px} .tl__tk.is-lit{background:rgba(242,244,248,.7)} .tl__head{position:absolute;left:0;top:0;z-index:2;width:7px;height:7px;margin:-3px 0 0 -3.5px;border-radius:2px;background:#E6FFFD;pointer-events:none; box-shadow:0 0 0 1px rgba(0,194,184,.9),0 0 16px 5px rgba(0,194,184,.45);visibility:hidden;will-change:transform} html.js-motion .tl.is-moving .tl__head{visibility:visible} /* at 900px or less the axis stands in the left gutter, cards to its right */ @media (max-width:900px){ .tl{--tl-v:1;padding-left:30px} .tl:has(.tl__edge){padding-bottom:64px} .tl__cards{display:flex;flex-direction:column;gap:16px;padding-bottom:0} .tl__stop{margin-left:0;width:auto} .tl__rail{position:absolute;left:3px;top:0;bottom:0;width:1px;height:auto} .tl__axis{transform-origin:50% 0} html.js-motion .tl__axis{transform:scaleY(0)} .tl__node{display:none} .tl__vnode{display:block;position:absolute;left:-30px;top:27px;margin:0;background:var(--teal);transition:transform 180ms var(--ease-open),background-color 180ms} html.js-motion .tl__stop:not(.is-lit) .tl__vnode{background:#9AA2AE;transform:scale(.6)} .tl__stem{left:-23px;top:30px;width:23px;height:1px;transform-origin:0 50%} html.js-motion .tl__stop:not(.is-lit) .tl__stem{transform:scaleX(0)} .tl__edge{left:0;top:auto;bottom:-40px} .tl__edge .tl__elab{display:none} /* night: the axis runs on through the panel's lower edge, the phase that compounds has no end, and no label is printed twice */ .tl--night{padding-left:34px} .tl--night:has(.tl__edge){padding-bottom:0} .tl--night .tl__rail{bottom:calc(clamp(96px,11vw,156px) * -1)} .tl--night .tl__edge,.tl--night .tl__ruler{display:none} .tl--night .tl__vnode{left:-34px;top:25px;box-shadow:0 0 0 4px rgba(0,194,184,.16)} html.js-motion .tl--night .tl__stop:not(.is-lit) .tl__vnode{background:#4A5366;box-shadow:none} .tl--night .tl__stem{left:-27px;top:28px;width:27px} .tl--night .tl__head{margin:-3.5px 0 0 -3px} .tl--night .tl__h{margin-top:18px} } /* ---- the arc between two portraits (night panels only) */ .ops{--ops-gap:clamp(24px,5vw,80px);position:relative;display:flex;justify-content:center;gap:var(--ops-gap);padding-top:clamp(72px,9vw,120px)} .ops__svg{position:absolute;left:0;top:0;z-index:1;overflow:visible;pointer-events:none} .ops__arc{fill:none;stroke-width:1.25;stroke-dasharray:1;stroke-dashoffset:0} html.js-motion .ops__arc{stroke-dashoffset:1} .ops__end{position:absolute;left:0;top:0;z-index:2;background:var(--teal);box-shadow:0 0 0 1px rgba(255,255,255,.6);visibility:hidden} .ops.is-lit .ops__end--a,.ops.is-drawn .ops__end--b{visibility:visible} .ops__light{position:absolute;left:0;top:0;z-index:3;width:6px;height:6px;border-radius:2px;background:#E6FFFD; box-shadow:0 0 0 1px rgba(0,194,184,.9),0 0 14px 4px rgba(0,194,184,.5);visibility:hidden;will-change:transform} .ops.is-lit .ops__light{visibility:visible} html:not(.js) .ops__svg,html:not(.js) .ops__end,html:not(.js) .ops__light{display:none} .ops__p{position:relative;z-index:2;flex:none;width:min(var(--ops-w),calc(50% - var(--ops-gap) / 2));margin:0} .ops__ph{aspect-ratio:4/5;border-radius:16px;overflow:clip;background:#131926;box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--sh-panel)} .ops__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;filter:grayscale(1) contrast(1.06) brightness(.95)} .ops__n{display:block;margin-top:18px;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;color:var(--on-n)} .ops__r{display:block;min-height:2.9em;margin-top:5px;font-size:14px;line-height:1.45;color:var(--on-n-3)} .ops__clk{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:16px} .ops__t{font-family:var(--sans);font-weight:300;font-size:32px;line-height:1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums} .ops__li{margin-top:10px;color:var(--on-n)} html:not(.js) .ops__clk{display:none} @media (max-width:900px){.ops{--ops-w:42vw;--ops-gap:4vw}} @media (max-width:560px){.ops__n{font-size:19px}.ops__t{font-size:26px}.ops__li{font-size:14px}} /* ---- the MH diagram */ .dg{position:relative} .dg__svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none} .dg__p{fill:none;stroke:#8E97A4;stroke-width:1.25;stroke-dasharray:1;stroke-dashoffset:0} html.js-motion .dg__p{stroke-dashoffset:1} .dg__head{display:none} /* the light variant: white cards, orthogonal paths with 12px corners */ .dg:not(.dg--night) .dg__row,.dg:not(.dg--night) .dg__br{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--dg-n),minmax(0,1fr));gap:40px;margin:0;padding:0;list-style:none} .dg:not(.dg--night) .dg__br{margin-top:64px} .dg:not(.dg--night) .dg__n{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;background:var(--white);border-radius:16px;box-shadow:var(--sh-1),inset 0 0 0 1px var(--hair-2); clip-path:inset(-40px round 16px);transition:clip-path 700ms var(--ease-open)} .dg:not(.dg--night) .dg__dot{display:none} .dg:not(.dg--night) .dg__num::before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;border-radius:2px;background:var(--teal);vertical-align:1px} .dg:not(.dg--night) .dg__t{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--ink);text-wrap:balance} .dg:not(.dg--night) .dg__n--b{align-self:start} html.js-motion .dg:not(.dg--night) .dg__n:not(.is-on){clip-path:inset(100% 0 0 0 round 16px);transition-duration:300ms} @media (max-width:1000px){ .dg:not(.dg--night) .dg__row,.dg:not(.dg--night) .dg__br{display:flex;flex-direction:column;gap:28px} .dg:not(.dg--night) .dg__br{margin-top:28px;padding-left:40px} } /* the night variant: its own plate; stations on one hairline, the branches hang straight down from their node, each artefact in a small frame */ .dg-plate{margin-inline:0;padding:clamp(40px,4.6vw,72px) clamp(24px,4vw,64px) clamp(44px,5vw,80px)} .dg--night{--th-h:104px} .dg--night .dg__svg{z-index:1} .dg--night .dg__p{stroke:rgba(242,244,248,.46)} .dg--night .dg__head{display:block;position:absolute;left:0;top:0;z-index:3;width:7px;height:7px;border-radius:2px;background:#E6FFFD;pointer-events:none; box-shadow:0 0 0 1px rgba(0,194,184,.9),0 0 16px 5px rgba(0,194,184,.45);visibility:hidden;will-change:transform} .dg--night.is-moving .dg__head{visibility:visible} .dg--night .dg__row,.dg--night .dg__br{position:relative;z-index:2;margin:0;padding:0;list-style:none} .dg--night .dg__row{display:grid;grid-template-columns:repeat(var(--dg-n),minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px)} .dg--night .dg__n{position:relative;display:flex;flex-direction:column;align-items:flex-start} .dg--night .dg__num,.dg--night .dg__t{display:block} .dg--night .dg__num{margin:0 0 14px 24px;color:var(--on-n-3)} .dg--night .dg__dot{position:relative;z-index:2;width:9px;height:9px;margin:0 0 0 -1px;border-radius:2px;background:var(--teal);box-shadow:0 0 0 4px rgba(0,194,184,.16);transition:background-color 240ms,box-shadow 420ms var(--ease-open)} .dg--night .dg__t{margin:18px 0 0 24px;max-width:12em;font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.3;color:var(--on-n);text-wrap:balance} .dg--night .dg__row .dg__th{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:calc(100% - 24px);max-width:210px;margin:20px 0 0 24px} .dg--night .dg__row .dg__f{height:auto} .dg--night .dg__row .dg__f img{width:100%;height:auto} .dg--night .dg__br{display:grid;grid-template-columns:repeat(var(--dg-n),minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px);row-gap:22px;margin-top:clamp(40px,4vw,56px)} .dg--night .dg__n--b{grid-column:1/var(--dg-n);justify-self:end} .dg--night .dg__card{position:relative;display:flex;align-items:center;gap:clamp(18px,2vw,28px);padding:18px 20px 18px 24px;border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),0 30px 60px -40px rgba(0,0,0,.7)} .dg--night .dg__card .dg__dot{position:absolute;right:-4.5px;top:calc(50% - 4.5px);margin:0} .dg--night .dg__card .dg__t{margin:0;max-width:10em} .dg__th{display:flex;align-items:flex-end;gap:8px} .dg__f{display:block;flex:none;height:var(--th-h);border-radius:4px;overflow:clip;background:#131926; box-shadow:0 0 0 1px rgba(255,255,255,.14),0 16px 30px -18px rgba(0,0,0,.8)} .dg__f img{display:block;width:auto;height:100%} /* arrivals: a station's words rise as its line reaches it, then its artefacts open one by one */ html.js-motion .dg--night .dg__n:not(.is-on) .dg__dot{background:#4A5366;box-shadow:none} .dg--night .dg__num,.dg--night .dg__t{clip-path:inset(-6px -6px -6px -6px);transition:clip-path 700ms var(--ease-open) 80ms} html.js-motion .dg--night .dg__n:not(.is-on) .dg__num,html.js-motion .dg--night .dg__n:not(.is-on) .dg__t{clip-path:inset(0 0 100% 0);transition:clip-path 260ms var(--ease-leave)} .dg--night .dg__f{clip-path:inset(0 0 0 0 round 4px);transition:clip-path 760ms var(--ease-open) calc(260ms + var(--f,0) * 110ms)} html.js-motion .dg--night .dg__n:not(.is-on) .dg__f{clip-path:inset(100% 0 0 0 round 4px);transition:clip-path 240ms var(--ease-leave)} .dg--night .dg__card{clip-path:inset(0 0 0 0 round 14px);transition:clip-path 800ms var(--ease-open)} html.js-motion .dg--night .dg__n--b:not(.is-on) .dg__card{clip-path:inset(0 0 0 100% round 14px);transition:clip-path 260ms var(--ease-leave)} html.js-motion .dg--night .dg__n--b:not(.is-on) .dg__card .dg__dot{visibility:hidden} /* no script: the hairlines are borders */ html:not(.js) .dg--night .dg__row{background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) 0 calc(1.4em + 18px)/100% 1px no-repeat} /* 960 to 1099px (1024x768, iPad Pro portrait): the horizontal form, drawn a size tighter, so the five stations fill the plate's width; the vertical form left the right half of a 934px plate empty */ @media (min-width:960px) and (max-width:1099px){ .dg--night{--th-h:92px} .dg--night .dg__row,.dg--night .dg__br{column-gap:20px} .dg--night .dg__num{margin-left:18px} .dg--night .dg__t{margin:16px 0 0 18px;font-size:18px} .dg--night .dg__row .dg__th{width:calc(100% - 18px);margin:18px 0 0 18px;gap:5px} .dg--night .dg__card{padding:16px 18px 16px 20px} } /* below 960px: one vertical hairline, the stations beside it, the branches hanging from 05 on short stubs */ @media (max-width:959px){ .dg--night{--th-h:92px} .dg--night .dg__row{display:flex;flex-direction:column;gap:30px} .dg--night .dg__n{display:block;padding-left:30px} .dg--night .dg__num{margin:0 0 6px} .dg--night .dg__row .dg__dot{position:absolute;left:0;top:4px} .dg--night .dg__t{margin:0;max-width:20em} .dg--night .dg__row .dg__th{width:auto;max-width:240px;margin:16px 0 0} .dg--night .dg__br{display:flex;flex-direction:column;gap:18px;margin-top:30px} .dg--night .dg__n--b{padding-left:30px;justify-self:auto} .dg--night .dg__card{flex-direction:column;align-items:flex-start;gap:14px;padding:18px} .dg--night .dg__card .dg__dot{left:-4.5px;right:auto} .dg--night .dg__card .dg__t{max-width:none} .dg--night .dg__card .dg__th{flex-wrap:wrap} html:not(.js) .dg--night .dg__row{background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) 4px 0/1px 100% no-repeat} } @media (max-width:420px){.dg--night{--th-h:84px}} /* ---- 03 Follow */ .fol{min-height:64svh;display:grid;align-items:center;margin-top:clamp(12px,2vw,24px);padding-block:clamp(56px,8vw,112px)} .fol__in{align-items:center;row-gap:48px} .fol__txt{grid-column:1/6} .fol__txt .lead{margin-top:24px} .fol__ops{grid-column:7/13} @media (max-width:900px){.fol__txt,.fol__ops{grid-column:1/-1}} /* the page's last frame is lit (.lp--lit with the core's .lp__photo layer): Madrid at blue hour as a band at the panel's foot, under the operators, so the photograph never runs under a word or a face. It stays sharp, opens upward from the panel's night and fades at its ends. Nothing is set on it, so it may sit a little above the 30% of a photo behind text. Never wider than its own 1280 pixels, so it is never upscaled on a wide screen */ .fol{--fol-band:clamp(220px,26vw,380px);--lp-o:.5;--lp-pos:62% 72%; --lp-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 26%,#000 58%); padding-bottom:calc(var(--fol-band) * .78)} .fol>.lp__photo{inset:auto auto 0 50%;width:min(100%,1280px);height:var(--fol-band);border-radius:0;transform:translateX(-50%); -webkit-mask-composite:source-in;mask-composite:intersect} @media (max-width:700px){ .fol{--fol-band:clamp(240px,74vw,330px);--lp-pos:66% 70%; --lp-mask-sm:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent 0%,transparent 24%,rgba(0,0,0,.5) 36%,#000 54%); padding-bottom:calc(var(--fol-band) * .7)} } /* ---- 54-question.css ---- */ /* 54 · THE QUESTION BAR (M22) and the dossiers index. A search field types three real reader questions and the answers open under it; the thirty dossiers re-sort with FLIP beneath, matched words underlined in teal (a decoration, never a text colour). The index keeps a still preview frame whose cover relays, never cross-dissolves. */ /* ---------------------------------------------------------------- head panel */ .dq{margin-top:12px;min-height:calc(72svh - 12px);display:flex;align-items:center} .dq__g{padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,88px);align-items:center;row-gap:44px} .dq__txt{grid-column:1/6} .dq__bar{grid-column:6/13;padding-left:clamp(0px,2vw,32px)} .dq__eye{margin-bottom:22px} .dq__h{color:#fff;max-width:9em} .dq__lead{margin-top:24px;max-width:26em;font-size:20px} .dq__stats{position:relative;margin-top:40px;padding-top:24px} .dq__stats>.rule{position:absolute;left:0;right:0;top:0} .dq__dl{display:flex;flex-wrap:wrap;gap:18px 40px;margin:0} .dq__st{display:flex;flex-direction:column;gap:6px;margin:0} .dq__st dt,.dq__st dd{margin:0} .dq__ct,.dq__free{font-family:var(--sans);font-weight:300;font-size:48px;line-height:1;letter-spacing:-.03em;color:#fff} .dq__free{display:inline-block} @media(max-width:1000px){ .dq__txt,.dq__bar{grid-column:1/-1} .dq__bar{padding-left:0} } @media(max-width:700px){ .dq{min-height:calc(72svh - 8px);margin-top:8px} .dq__lead{font-size:19px} .dq__ct,.dq__free{font-size:40px} .dq__stats{margin-top:32px} .dq__dl{gap:14px 28px} /* phones: the question comes before the counters, so its answers open inside the first screen */ .dq__g{row-gap:0} .dq__txt{display:contents} .dq__txt>*,.dq__bar{grid-column:1/-1} .dq__bar{order:4;margin-top:30px} .dq__stats{order:5;margin-top:34px} } /* ---------------------------------------------------------------- the field */ .qb{position:relative;margin:0} .qb__field{position:relative} .qb__op{--r:14px;position:relative;display:flex;align-items:center;min-height:68px;border-radius:14px; background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:clip-path 1000ms var(--ease-open),box-shadow 240ms} .qb__op:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)} .qb__field:focus-within .qb__op{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 0 0 2px var(--teal)} .qb__mag{position:absolute;left:22px;top:23px;width:22px;height:22px;color:var(--on-n-2);pointer-events:none; clip-path:inset(0 0 0 0);transition:clip-path 700ms var(--ease-open) 420ms} html.js-motion .qb__field:not(.in) .qb__mag{clip-path:inset(0 100% 0 0)} .qb__in,.qb__ghost{font-family:var(--serif);font-weight:300;font-size:26px;line-height:1.3;letter-spacing:-.01em} .qb__in{display:block;width:100%;height:68px;margin:0;padding:17px 56px 17px 60px;border:0;border-radius:14px;background:transparent;color:#fff; resize:none;overflow:hidden;white-space:pre;caret-color:var(--teal);outline:0;box-shadow:none} .qb__in:focus-visible{outline:0;box-shadow:none} .qb__in::placeholder{color:var(--on-n-3);font-size:20px;opacity:1} .qb__in::-webkit-search-cancel-button{display:none} .qb.is-demo .qb__in::placeholder,.qb.is-ghost .qb__in::placeholder{color:transparent} .qb__ghost{position:absolute;left:60px;right:56px;top:17px;color:#fff;white-space:pre;overflow:hidden;pointer-events:none} .qb__ghost:empty{display:none} .qb__x{position:absolute;right:10px;top:12px;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-chip);color:var(--on-n-2)} .qb__x svg{width:16px;height:16px} .qb__x:hover{color:#fff;background:rgba(255,255,255,.06)} .qb__x[hidden]{display:none} /* status line: which questions, or how many match */ .qb__st{display:flex;align-items:center;gap:10px;min-height:20px;margin:18px 0 6px} .qb__st::before{content:"";width:5px;height:5px;border-radius:1.5px;background:var(--teal);flex:none} .qb__stn:empty{display:none} /* results: three rows reserved, so the panel never shifts during the demo */ .qb__res{--qr:96px;min-height:calc(3 * var(--qr));margin:0} .qb__r{border-top:1px solid var(--hair-n)} .qb__r:last-child{border-bottom:1px solid var(--hair-n)} .qb__a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-content:center;column-gap:22px;align-items:center;height:calc(var(--qr) - 1px);padding:10px 4px 10px 0;overflow:hidden;color:#fff;transition:transform 320ms var(--ease-open)} .qb__t{grid-column:1;grid-row:2;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.3;letter-spacing:-.005em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .qb__q+.qb__t,.qb__t:has(+.qb__q){-webkit-line-clamp:1} .qb__q{grid-column:1;grid-row:1;font-family:var(--serif);font-style:italic;font-weight:300;font-size:15px;line-height:1.35;color:var(--on-n-2);margin-bottom:4px} .qb__m{grid-column:1;grid-row:3;margin-top:5px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--on-n-3)} .qb__u{font-size:.46em;font-weight:500;letter-spacing:.04em;margin-left:.3em} .qb__u--pre{margin:0 .3em 0 0;vertical-align:.7em} .qb__f{grid-column:2;grid-row:1/span 3;font-family:var(--sans);font-weight:300;font-size:26px;letter-spacing:-.02em;color:var(--on-n-2);white-space:nowrap} @media(hover:hover){.qb__a:hover{transform:translate3d(8px,0,0)}.qb__a:hover .qb__f{color:#fff}} .qb__r.is-in{animation:qb-in 500ms var(--ease-open) var(--dl,0ms) both} .qb__r.is-out{animation:qb-out 240ms var(--ease-leave) both} @keyframes qb-in{from{clip-path:inset(0 0 100% 0);transform:translate3d(0,-10px,0)}to{clip-path:inset(0 0 0 0);transform:none}} @keyframes qb-out{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}} .qb__none{padding:18px 0;color:var(--on-n-2);font-size:16px} .hit{text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-color:var(--teal);text-underline-offset:3px;text-decoration-skip-ink:none} @media(max-width:700px){ .qb__op{min-height:78px} .qb__mag{left:16px;top:18px;width:20px;height:20px} .qb__in,.qb__ghost{font-size:17px;line-height:1.38} .qb__in{height:78px;padding:15px 46px 15px 48px;white-space:pre-wrap} .qb__in::placeholder{font-size:17px} .qb__ghost{left:48px;right:46px;top:15px;white-space:pre-wrap} .qb__x{top:17px;right:4px} .qb__t{font-size:18px} .qb__f{font-size:22px} .qb__a{column-gap:14px} .qb__res{--qr:104px} } /* ---------------------------------------------------------------- the index */ .dx{padding-top:clamp(64px,8vh,112px)} .dx__bar{margin-bottom:clamp(28px,3vw,44px)} .dx__chips{display:flex;flex-wrap:wrap;gap:10px} .chip{position:relative;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 16px;border-radius:var(--r-chip);background:var(--white); box-shadow:inset 0 0 0 1px var(--hair);font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink);white-space:nowrap; transition:background 240ms,color 240ms,box-shadow 240ms} .chip__n{font-size:13px;color:var(--ink-3);font-weight:500;transition:color 240ms} .chip.is-on{background:var(--ink);color:#fff;box-shadow:none} .chip.is-on .chip__n{color:rgba(255,255,255,.72)} .chip.is-on::after{content:"";position:absolute;left:50%;bottom:-9px;width:5px;height:5px;margin-left:-2.5px;border-radius:1.5px;background:var(--teal)} .chip[aria-disabled="true"]{color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--hair-2);pointer-events:none} @media(hover:hover){.chip:not(.is-on):hover{box-shadow:inset 0 0 0 1px rgba(14,17,23,.34)}} .dx__g{align-items:start} .dx__list{grid-column:1/8} .dx__pv{grid-column:8/13;position:sticky;top:calc(var(--hd) + 10svh);height:80svh;display:flex;flex-direction:column;gap:18px} .dx__st{margin-bottom:14px} .dx__rows{position:relative;margin:0} .dx__li{border-top:1px solid var(--hair)} .dx__li:last-child{border-bottom:1px solid var(--hair)} .dx__li[hidden]{display:none} .dx__row{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:6px;row-gap:6px;padding:22px 28px 24px 0;color:var(--ink); transition:transform 420ms var(--ease-open),color 240ms} .dx__node{grid-row:1;align-self:start;margin-top:.62em;background:var(--hair);transition:background 240ms,transform 240ms var(--ease-open)} .dx__t{grid-column:2;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.25;letter-spacing:-.01em;text-wrap:balance} .dx__d{grid-column:2;font-family:var(--serif);font-size:17px;line-height:1.45;color:var(--ink-2);transition:color 240ms; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .dx__m{grid-column:2;margin-top:4px} .dx__row.is-on{transform:translate3d(12px,0,0)} .dx__row.is-on .dx__node{background:var(--teal)} .dx__rows.is-pointing .dx__row:not(.is-on),.dx__rows.is-pointing .dx__row:not(.is-on) .dx__d{color:var(--ink-3)} .dx__none{padding:40px 0;font-family:var(--serif);font-size:20px;color:var(--ink-2)} .dx__none .u{margin-left:6px} /* FLIP: rows that leave close to a slit, rows that arrive open from it */ .dx__li.fl-out{clip-path:inset(0 0 100% 0);transition:clip-path 240ms var(--ease-leave)} .dx__li.fl-in{clip-path:inset(0 0 100% 0)} .dx__li.fl-in.fl-go{clip-path:inset(0 0 0 0);transition:clip-path 520ms var(--ease-open) var(--dl,0ms)} .dx__li.fl-mv{transition:transform 600ms var(--ease-swap) var(--dl,0ms)} /* the preview: a still frame; the cover relays (out clips up, in opens from below) */ .dx__frame{position:relative;flex:1 1 auto;min-height:0;border-radius:var(--r-panel);overflow:clip;background:var(--night-1);box-shadow:var(--sh-2);isolation:isolate} .dx__layer{position:absolute;inset:0;visibility:hidden;--cv-r:0} .dx__layer.is-on,.dx__layer.is-out,.dx__layer.is-in{visibility:visible} .dx__layer.is-on{z-index:2} /* a relay, never a shared wipe: the outgoing cover clips up and leaves (260ms), the frame shows its own ground for 60ms, then the incoming cover opens from below (520ms). No pixel ever holds two dossiers. The timing lives in question.js (run). */ .dx__layer.is-out{z-index:1;clip-path:inset(0 0 0 0)} .dx__layer.is-out.is-go{clip-path:inset(0 0 100% 0);transition:clip-path 260ms var(--ease-leave)} .dx__layer.is-in{z-index:3;clip-path:inset(100% 0 0 0)} .dx__layer.is-in.is-go{clip-path:inset(0 0 0 0);transition:clip-path 520ms var(--ease-open)} .dx__layer .dio__p{transition:transform 900ms var(--ease-open)} .dx__layer.is-in .dio__p{transform:translate3d(0,6%,0)} .dx__layer.is-in.is-go .dio__p{transform:none} .dx__layer .cv{border-radius:0} .dx__layer .cv__foot{padding:clamp(22px,2.4vw,34px)} .dx__dks{flex:none;min-height:calc(3 * 1.45em);font-family:var(--serif);font-size:18px;line-height:1.45;color:var(--ink-2)} .dx__dk{grid-area:1/1;visibility:hidden} .dx__dk.is-on{visibility:visible} .dx__dkt.dk-rise{animation:dk-rise 640ms var(--ease-open) both} @keyframes dk-rise{from{clip-path:inset(0 0 100% 0);transform:translate3d(0,14px,0)}to{clip-path:inset(0 0 0 0);transform:none}} .dx__dkt{margin:0;max-width:32em} html:not(.js) .dx__dk:not(.is-on){display:none} /* ---------------------------------------------------------------- touch and narrow */ @media(max-width:1000px),(hover:none){ .dx__list,.dx__pv{grid-column:1/-1} .dx{padding-top:clamp(40px,6vh,72px)} .dx__bar{position:sticky;top:var(--hd);z-index:20;margin:0;padding:10px 0;background:var(--white); box-shadow:0 1px 0 var(--hair),0 10px 24px -18px rgba(14,17,23,.3);transition:top 420ms var(--ease-swap)} html.hdr-off .dx__bar{top:0} .dx__chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);gap:8px; margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 12px;scrollbar-width:none} .dx__chips::-webkit-scrollbar{display:none} /* more subjects to the right: the strip fades at its edge */ .dx__chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)} .dx__chips.is-end{-webkit-mask-image:none;mask-image:none} .chip{scroll-snap-align:start;flex:none} .dx__pv{order:-1;top:calc(var(--hd) + var(--dx-bar,62px));height:calc(36svh + 22px);z-index:10;gap:0;margin:0 calc(var(--gut) * -1) 6px; padding:10px var(--gut) 12px;background:var(--mist);transition:top 420ms var(--ease-swap)} html.hdr-off .dx__pv{top:var(--dx-bar,62px)} /* the rows pass under the sticky preview on a short mist edge, never cut on a hard line */ .dx__pv::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px;pointer-events:none; background:linear-gradient(180deg,var(--mist),rgba(242,244,247,0))} .dx__frame{border-radius:var(--r-media)} .dx__dks{display:none} .dx__layer .cv{flex-direction:row} .dx__layer .cv__pic{flex:0 0 44%} .dx__layer .cv__pic::after{left:auto;top:0;right:0;width:1px;height:auto} .dx__layer .cv__foot{padding:18px 18px 18px 20px;--fig:clamp(40px,11vw,56px)} .dx__layer .cv__lab{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .dx__row{padding:20px 12px 22px 0} .dx__t{font-size:22px} .dx__d{-webkit-line-clamp:2} .dx__line{position:fixed;left:0;top:0;width:16px;height:1px;background:var(--teal);z-index:5;pointer-events:none} } @media(min-width:1001px) and (hover:hover){.dx__line{display:none}} /* tablets (700px and up): the nine subjects wrap to a second row inside the sticky bar instead of hiding three of them past the edge; the chips close up a little so most rows hold five or more. The bar's height feeds the sticky preview offset (question.js, --dx-bar). A phone on its side (under 560px tall) keeps the one-row strip: two rows would leave the list a hand's width. */ @media(min-width:700px) and (max-width:1000px) and (min-height:560px),(min-width:700px) and (hover:none) and (min-height:560px){ .dx__chips{flex-wrap:wrap;overflow:visible;gap:10px 8px;margin-inline:0;padding:0 0 12px;scroll-snap-type:none; -webkit-mask-image:none;mask-image:none} .chip{padding:0 12px 0 14px;gap:8px} } /* a 1001 to 1100px window gives the field seven columns: the typed question sets at 22px so the reader questions hold one line (the placeholder is fitted by question.js) */ @media(min-width:1001px) and (max-width:1100px){ .qb__in,.qb__ghost{font-size:22px} .qb__in{padding-top:19px} .qb__ghost{top:19px} } @media(max-width:700px){ .dx__t{font-size:21px} .dx__layer .cv__pic{flex-basis:40%} .dx__layer .cv__foot{padding:14px 14px 14px 16px} .dx__layer .cv__sub{font-size:11px;letter-spacing:.1em} } /* ---- 55-thread.css ---- */ /* 55 · THE READING THREAD (M24) and the dossier article. Body copy never moves: the thread follows the reading line down the margin, and each sourced paragraph branches a tick to its sources, whose names type beside it. On touch under 1000px the thread lives in the left gutter, sources open from a chip, and a 40px bar relays the current section; from 1000px any screen has the laptop's rail and margin (a touch rail is a list of 44px rows). */ /* ---------------------------------------------------------------- head */ .dh{margin-top:12px;min-height:calc(70svh - 12px);display:flex;align-items:center} .dh__g{padding:clamp(48px,6vw,88px) 0;align-items:center;row-gap:36px} .dh__txt{grid-column:1/8} .dh__fig{grid-column:8/13;margin:0} .dh__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-bottom:26px} .dh__crumbs .u{color:var(--on-n-2);font-size:14px;padding:6px 0} .dh__crumbs .u:hover{color:#fff} .dh__crumbs .node{width:5px;height:5px;background:var(--on-n-3)} .dh__h{font-weight:300;font-size:clamp(40px,4.6vw,72px);line-height:1.04;letter-spacing:-.02em;color:#fff;max-width:13em} .dh__dek{margin-top:26px;max-width:30em} .dh__for{margin-top:22px;max-width:40em;font-size:15px;line-height:1.55;color:var(--on-n-2)} .dh__for .lab{margin-right:8px;color:var(--on-n-3)} .dh__meta{margin-top:22px} .dh__open,.dh__pic{border-radius:var(--r-media)} .dh__pic{aspect-ratio:4/5;max-height:calc(70svh - 120px);width:100%;margin-left:auto;box-shadow:var(--sh-panel),0 0 0 1px rgba(255,255,255,.06)} .dh__cred{margin-top:12px;text-align:right} @media(max-width:900px){ .dh{min-height:0} .dh__g{padding:clamp(28px,5vw,48px) 0 clamp(40px,7vw,64px)} .dh__txt,.dh__fig{grid-column:1/-1} .dh__fig{order:-1} .dh__pic{aspect-ratio:auto;height:30svh;max-height:none} .dh__cred{text-align:left;margin-top:10px} .dh__h{font-size:40px;line-height:1.06} .dh__crumbs{margin-bottom:18px} } @media(max-width:700px){.dh{margin-top:8px}.dh__h{font-size:clamp(34px,10vw,40px)}.dh__dek{margin-top:18px}} /* ---------------------------------------------------------------- the sheet and its three zones */ .rd{position:relative;margin-top:clamp(28px,3vw,40px)} .rd__sheet{position:relative;padding:clamp(64px,7vw,104px) 0 clamp(72px,8vw,120px)} .rd__sheet::before{content:none;position:absolute;right:0;top:0;width:min(46%,640px);aspect-ratio:1.6;pointer-events:none; background:url(/assets/img/sys/grid-arc.svg) right top/contain no-repeat;border-top-right-radius:var(--r-panel)} .rd__g{position:relative;align-items:start} /* a rail taller than the screen (fifteen sections on a short window) scrolls inside itself, and thread.js keeps the section being read in its middle; a fade marks more below */ .rd__rail{grid-column:1/4;position:sticky;top:calc(var(--hd) + 32px);padding:4px 0 8px 2px;margin-left:-2px;transition:top 420ms var(--ease-swap); max-height:calc(100svh - var(--hd) - 48px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none} .rd__rail::-webkit-scrollbar{display:none} .rd__rail.is-more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent)} .rd__text{grid-column:4/10;position:relative;--mw:calc((100% - 5 * var(--gap)) / 6 * 3 + 2 * var(--gap))} /* the rail: 'In this dossier', H2s as nodes on a thread that draws to the reading line */ .rd__rl{margin-bottom:18px} .rd__toc{position:relative;margin:0;padding-left:0} .rd__toc li+li{margin-top:2px} .rd__ti{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;padding:7px 12px 7px 0; font-family:var(--sans);font-weight:500;font-size:14px;line-height:1.4;color:var(--ink-3);transition:color 240ms} .rd__ti .node{position:relative;z-index:1;margin-top:.45em;background:var(--white);box-shadow:inset 0 0 0 1px rgba(14,17,23,.28);transition:background 180ms,box-shadow 180ms,transform 180ms var(--ease-open)} .rd__ti.is-past .node{background:var(--teal);box-shadow:none} .rd__ti.is-on{color:var(--ink)} .rd__ti.is-on .node{background:var(--teal);box-shadow:none;transform:scale(1.15)} .rd__ti:hover{color:var(--ink)} .rd__line{position:absolute;left:5px;top:var(--l0,54px);height:var(--lh,0px);width:1px;background:var(--hair);pointer-events:none} .rd__fill{position:absolute;inset:0;background:rgba(14,17,23,.55);transform-origin:top;transform:scaleY(var(--lf,0))} html:not(.js-motion) .rd__fill{transform:scaleY(1)} /* the prose. The reading measure is 27em of the 20px serif (540px, 60 to 68 characters a line); figures, key boxes and market cards keep the full column. */ .prose{--tw:540px;font-family:var(--serif);font-size:20px;line-height:1.62;color:var(--ink)} .prose>p{max-width:var(--tw);margin:0 0 1em} /* lists in the prose: the node is the bullet (a 7px rounded square, teal), a numbered list keeps its figures in the slate voice */ .prose>ul,.prose>ol{max-width:var(--tw);margin:0 0 1.1em;padding-left:1.4em} .prose>ul>li,.prose>ol>li{position:relative;margin:0 0 .5em;padding-left:.1em} .prose>ul>li:last-child,.prose>ol>li:last-child{margin-bottom:0} .prose>ul>li::before{content:"";position:absolute;left:-1.3em;top:calc(.81em - var(--node) / 2);width:var(--node);height:var(--node);border-radius:var(--r-node);background:var(--teal)} .prose>ol{counter-reset:li} .prose>ol>li{counter-increment:li} .prose>ol>li::before{content:counter(li,decimal-leading-zero);position:absolute;left:-1.55em;top:.42em;font-family:var(--sans);font-weight:500;font-size:13px;line-height:1;letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums} .prose li>p{margin:0} .prose li>p+p{margin-top:.5em} .prose>ul+p,.prose>ol+p{margin-top:1.3em} .prose>p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .prose .lede{font-variant-caps:all-small-caps;letter-spacing:.05em;font-weight:500} .prose strong{font-weight:500} .rd__h2{font-weight:300;font-size:clamp(30px,2.9vw,44px);line-height:1.1;letter-spacing:-.015em;margin:1.7em 0 .7em;max-width:18em;scroll-margin-top:calc(var(--hd) + 56px)} .prose>.rd__h2:first-child{margin-top:0} .rd__text>:first-child:not(.thr),.rd__text>.thr+*{margin-top:0} /* the key box */ .key{margin:2em 0} .key__op{--r:var(--r-media);position:relative;padding:clamp(24px,2.6vw,36px);border-radius:var(--r-media);background:var(--mist);box-shadow:inset 0 0 0 1px var(--hair-2)} .key__lab{display:flex;align-items:center;gap:10px} .key__t{display:flex;align-items:baseline;gap:14px;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.25;letter-spacing:-.01em} .key__t .node{flex:none;transform:translateY(-.2em)} .key__l{margin-top:18px;padding-left:21px;font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink-2)} .key__l li+li{margin-top:10px} /* pull quote: a rule draws, the line clips up; it reaches into the margin */ .pq{margin:2.2em 0 2.2em} .pq__rule{width:120px;margin-bottom:22px} .pq__q{margin:0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(30px,2.9vw,44px);line-height:1.2;letter-spacing:-.012em;color:var(--ink);text-wrap:balance} .pq__q p{margin:0} /* tables that stay tables (and the no-JS fallback of the market cards) */ .tablewrap{margin:2em 0;overflow-x:auto;border-radius:var(--r-media);background:var(--white);box-shadow:inset 0 0 0 1px var(--hair)} .tablewrap table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink-2)} .tablewrap th{padding:14px 16px;text-align:left;vertical-align:bottom;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--hair)} .tablewrap td{padding:14px 16px;vertical-align:top;border-bottom:1px solid var(--hair-2)} .tablewrap tr:last-child td{border-bottom:0} .tablewrap td:first-child{font-weight:500;color:var(--ink)} .tablewrap[data-wide],html:not(.js) .tablewrap--fallback{width:calc(100% + var(--gap) + var(--mw))} html.js .tablewrap--fallback{display:none} html:not(.js) .mk{display:none} @media(max-width:700px){ .tablewrap{overflow:visible;background:none;box-shadow:none} .tablewrap thead{display:none} .tablewrap tr{display:block;margin-bottom:12px;padding:6px 0;border-radius:var(--r-media);background:var(--white);box-shadow:inset 0 0 0 1px var(--hair)} .tablewrap td{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:12px;padding:10px 14px;border:0} .tablewrap td::before{content:attr(data-label);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} } /* market cards: white cards from a slit, three to a row, reaching into the margin */ .mk{position:relative;margin:2.2em 0 2.4em;width:calc(100% + var(--gap) + var(--mw))} .mk__rail{display:grid;grid-template-columns:repeat(var(--mkc,3),minmax(0,1fr));gap:16px;margin:0} .mk--c2{--mkc:2} .mk__i{display:flex} .mk__c{--r:var(--r-media);position:relative;display:flex;flex-direction:column;width:100%;padding:22px 22px 20px;font-family:var(--sans);font-size:15px;line-height:1.5} .mk__n{margin:0} .mk__t{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-.01em} .mk__lead{margin-top:14px;padding-bottom:14px;border-bottom:1px solid var(--hair)} .mk__lv{margin-top:6px;font-family:var(--serif);font-size:18px;line-height:1.4;color:var(--ink)} .mk__f{margin-top:14px} .mk__v{margin-top:5px;color:var(--ink-2)} .mk__foot{margin-top:auto;padding-top:16px} .mk__f+.mk__foot,.mk__lead+.mk__foot{margin-top:16px} .mk__foot{border-top:1px solid var(--hair)} .mk__date{display:flex;align-items:baseline;gap:10px;margin-top:6px;font-weight:500;font-size:15px;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)} .mk__date .node{flex:none;transform:translateY(-1px)} .mk__count{display:none} .mk .lab{font-size:12px;letter-spacing:.12em} /* the rail pans on touch: it takes focus, and shows it */ .mk__rail:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;box-shadow:none;border-radius:var(--r-media)} @media(max-width:1180px){.mk__rail{--mkc:2}} @media(max-width:900px),(hover:none) and (max-width:999px){ .mk{width:auto;margin-inline:calc(var(--gut) * -1)} .mk__rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gut) 10px;scroll-padding-inline:var(--gut);scrollbar-width:none} .mk__rail::-webkit-scrollbar{display:none} .mk__i{flex:0 0 min(86%,420px);scroll-snap-align:start} .mk__count{display:block;margin:6px var(--gut) 0} } /* ---------------------------------------------------------------- the thread (desktop margin) */ .thr{position:absolute;top:0;bottom:0;left:calc(100% + var(--gap));width:1px;pointer-events:none;z-index:0} .thr::before{content:"";position:absolute;inset:0;background:var(--hair-2)} .thr__line{position:absolute;left:0;top:0;width:1px;height:100%;background:rgba(14,17,23,.42);transform-origin:top;transform:scaleY(var(--tp,0))} .thr__head{position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:1.5px;background:var(--teal);transform:translate3d(0,calc(var(--ty,0px) - 2.5px),0)} html:not(.js-motion) .thr__line{transform:scaleY(1)} html:not(.js-motion) .thr__head{display:none} /* sidenotes: printed in the margin, placed at their paragraph's top by script */ .sn{font-family:var(--sans)} .sn__chip{display:none} .sn__l{margin:0} .sn__a{display:flex;flex-direction:column;gap:1px;padding:3px 0;color:var(--ink)} .sn__n{font-weight:500;font-size:13px;line-height:1.35;color:var(--ink)} .sn__d{font-weight:500;font-size:12px;line-height:1.35;letter-spacing:.02em;color:var(--ink-3);font-variant-numeric:tabular-nums} .sn__a:hover .sn__n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .sn__tick{display:block} @media(min-width:901px) and (hover:hover),(min-width:1000px){ /* the margin starts one gap after the capped text, not after the column: thread and notes sit beside the words they follow */ .thr{left:calc(min(100%, var(--tw)) + var(--gap))} html.js .sn{position:absolute;left:calc(min(100%, var(--tw)) + var(--gap));top:0;width:calc(var(--mw) + 100% - min(100%, var(--tw)));padding-left:34px;visibility:hidden;z-index:1} html.js .rd__text.sn-ready .sn{visibility:visible} html.js .sn__p,html.js .sn__pi{display:block} .sn__tick{position:absolute;left:0;top:.72em;width:24px;height:1px;background:rgba(14,17,23,.42);transform-origin:left;transform:scaleX(0);transition:transform 520ms var(--ease-open)} .sn__tick::after{content:"";position:absolute;right:-1px;top:-5.5px;width:2px;height:12px;background:var(--teal);transform:scaleY(0);transition:transform 360ms var(--ease-open) 180ms} .sn.is-on .sn__tick,.sn.is-on .sn__tick::after{transform:none} html:not(.js-motion) .sn__tick,html:not(.js-motion) .sn__tick::after{transform:none} .sn__l li+li{margin-top:6px} html.js .rd__text>p[data-src]{position:relative} /* the thread runs under the market cards and the wide tables, never through the gaps between them */ .mk,.tablewrap[data-wide]{position:relative;z-index:1;background:var(--white)} /* everything that reads keeps the measure the thread follows: the section heads and the pull quotes too (balanced, they reflow), so the hairline never strikes a letter */ .rd__text>.rd__h2,.rd__text>.pq{max-width:var(--tw)} html.js .rd__text>p[data-src].is-lit::before{content:"";position:absolute;right:calc(-1 * var(--gap) - 1px);top:.78em;width:calc(var(--gap) + 1px);height:1px;background:rgba(14,17,23,.18)} } /* no JS on desktop: the note sits after its paragraph, small and whole */ html:not(.js) .sn{margin:-.4em 0 1.4em;padding-left:18px;border-left:1px solid var(--hair)} html:not(.js) .sn__tick{display:none} /* ---------------------------------------------------------------- touch and narrow: gutter thread, chips, bar */ @media(max-width:900px),(hover:none) and (max-width:999px){ .rd__text{--mw:0px} /* one centred reading column: the words keep the 27em measure, the wide blocks (market cards, tables, key boxes) keep the full column, and the thread runs in the gutter of the words */ .rd__text>p,.rd__text>ul,.rd__text>ol,.rd__text>.rd__h2,.rd__text>.pq,.rd__text>.sn{margin-inline:auto;max-width:var(--tw)} .rd__text>.rd__h2{width:100%} .rd__text>ul,.rd__text>ol{padding-left:1.4em;max-width:var(--tw)} .thr{left:calc((100% - min(100%, var(--tw))) / 2 + var(--gut) / -2 - .5px)} .mk,.tablewrap[data-wide],html:not(.js) .tablewrap--fallback{width:auto} .mk{width:auto} .rd__h2{position:relative} .rd__h2::before{content:"";position:absolute;left:calc(var(--gut) / -2 - 2.5px);top:.5em;width:5px;height:5px;border-radius:1.5px;background:var(--white);box-shadow:inset 0 0 0 1px rgba(14,17,23,.34);transition:background 180ms,box-shadow 180ms} .rd__h2.is-past::before{background:var(--teal);box-shadow:none} html:not(.js-motion) .rd__h2::before{background:var(--teal);box-shadow:none} .sn{margin:-.3em 0 1.3em} html.js .sn__chip{position:relative;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:var(--r-chip);box-shadow:inset 0 0 0 1px var(--hair); font-family:var(--sans);font-weight:500;font-size:14px;color:var(--ink-2);background:var(--white)} html.js .sn__chip::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px} html.js .sn__chip .node{width:5px;height:5px;background:var(--teal)} html.js .sn__chip[aria-expanded="true"]{box-shadow:inset 0 0 0 1px rgba(14,17,23,.4);color:var(--ink)} html.js .sn__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows 400ms var(--ease-open)} html.js .sn.is-open .sn__p{grid-template-rows:1fr} html.js .sn__pi{overflow:hidden;min-height:0} html.js .sn__l{padding:12px 0 2px 14px;margin-left:2px;border-left:1px solid var(--hair)} html.js .sn__l li+li{margin-top:10px} html.js .sn__n{font-size:15px} html.js .sn__d{font-size:13px} html.js .sn__a{min-height:40px;justify-content:center} .sn__tick{display:none} } @media(max-width:700px){ .prose{font-size:18px;line-height:1.6} .rd__sheet{padding:44px 0 64px} .key__t{font-size:21px} } /* the sticky 40px bar: the current section relays in it; tap for the list */ .rd__bar{display:none} @media(max-width:999px){ .rd__rail{display:none} .rd__text{grid-column:1/9} .rd__bar{display:block;position:sticky;top:var(--hd);z-index:30;height:0;transition:top 420ms var(--ease-swap); /* nothing above the bar's own line: hidden, it waits under the header (or above the sheet) */ clip-path:inset(0 -40px -100vh -40px)} html.hdr-off .rd__bar{top:0} .rd__bb{position:absolute;left:var(--inset);right:var(--inset);top:0;display:flex;align-items:center;gap:12px;height:40px;padding:0 max(14px,calc(var(--gut) - var(--inset))); background:var(--white);border-radius:0 0 var(--r-ctl) var(--r-ctl);box-shadow:0 1px 0 var(--hair),0 10px 24px -18px rgba(14,17,23,.35); font-family:var(--sans);font-weight:500;font-size:14px;color:var(--ink);text-align:left; clip-path:inset(0 0 -40px 0);transform:translate3d(0,-110%,0);transition:transform 420ms var(--ease-swap)} .rd.is-reading .rd__bb{transform:none} /* a jump from the list lands the heading 20px under the bar: the page's scroll-padding already holds the header, so only the bar is added (thread.js refines it per tap for the header's state) */ .rd__h2{scroll-margin-top:36px} .mon__h{scroll-margin-top:66px} .rd__bn{width:5px;height:5px;background:var(--teal)} .rd__relay{flex:1;min-width:0;grid-template-columns:minmax(0,1fr)} .rd__relay>.relay__i{min-width:0} .rd__relay .relay__in{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rd__bc{flex:none} .rd__drop{position:absolute;left:var(--inset);right:var(--inset);top:40px;display:grid;grid-template-rows:0fr;transition:grid-template-rows 400ms var(--ease-open); background:var(--white);border-radius:0 0 var(--r-ctl) var(--r-ctl);box-shadow:0 18px 30px -20px rgba(14,17,23,.35)} .rd__bar.is-open .rd__drop{grid-template-rows:1fr} /* the open list never runs off the screen: it stops 16px above the bottom edge and scrolls inside itself (the page stays put); thread.js brings the section being read into view */ .rd__dropi{min-height:0;max-height:calc(100svh - var(--hd) - 56px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;border-radius:0 0 var(--r-ctl) var(--r-ctl)} html.hdr-off .rd__dropi{max-height:calc(100svh - 56px)} .rd__drop ol{margin:0;padding:6px max(14px,calc(var(--gut) - var(--inset))) 12px;border-top:1px solid var(--hair-2)} /* every row the same: 44px for one line, read or not (the rows carry a class, so the coarse pointer's inline-link padding never reaches them) */ .rd__drop a{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:start;padding:11.5px 0;font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.4;color:var(--ink-2)} .rd__drop a .node{width:5px;height:5px;margin-top:.5em;background:var(--hair)} .rd__drop a.is-on{color:var(--ink)} .rd__drop a.is-on .node{background:var(--teal)} .rd__bar:not(.is-open) .rd__drop{visibility:hidden;transition:grid-template-rows 400ms var(--ease-open),visibility 0s 400ms} } @media(min-width:901px) and (max-width:999px) and (hover:hover){.rd__text{grid-column:1/9;--mw:calc((100% - 7 * var(--gap)) / 8 * 4 + 3 * var(--gap))}} @media(max-width:900px),(hover:none) and (max-width:999px){.rd__text{grid-column:1/-1}} /* a wide touch screen (a landscape tablet, 1000px and up) reads like the laptop: the rail is a list to tap in the left margin, the notes type in the right margin as the reading line reaches them. The rows are 44px targets; the rail's own gaps close so fifteen sections still fit 820px (a shorter screen scrolls the rail inside itself). */ @media(hover:none) and (min-width:1000px){ .rd__toc li+li{margin-top:0} .rd__ti{min-height:44px;align-content:center;padding-block:4px} .rd__rl{margin-bottom:10px} html.js .sn__a{min-height:44px;justify-content:center} } /* ---------------------------------------------------------------- what to do on Monday */ /* A short pin: the cards arrive one gap apart and stack; the last one holds for a short tail (about 1.6 screens for six steps). Beside the stack, a night dial counts the step on top, fills a line, lights a node per landed check and sets the date or figure the step turns on. */ .mon{--mt:calc(var(--hd) + 10svh);--mg:3svh;--tail:14svh;position:relative;padding:clamp(88px,11vh,150px) 0 clamp(40px,6vh,80px)} .mon__head{grid-column:4/10;margin-bottom:clamp(28px,4vh,48px)} .mon__slate{margin-bottom:14px} .mon__stack{grid-column:4/13;display:grid;grid-template-rows:repeat(var(--n,6),1fr) var(--tail);row-gap:var(--mg);margin:0;padding-bottom:0} /* the tail row after the last card: it holds the top of the stack for a beat, then the stack and its heading leave together (sticky stops at the list's content edge) */ .mon__stack::after{content:"";pointer-events:none} .mon__c{--i:0;position:sticky;top:calc(var(--mt) + var(--i) * 12px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(18px,2.4vw,36px);align-items:start; min-height:156px;padding:clamp(24px,2.6vw,36px) clamp(24px,2.8vw,40px);overflow:clip;transform-origin:50% 0;transition:top 420ms var(--ease-swap)} .mon__num{font-family:var(--sans);font-weight:300;font-size:clamp(40px,3.6vw,56px);line-height:.9;letter-spacing:-.03em;color:var(--ink-3)} .mon__t{grid-column:2;margin:0;font-family:var(--serif);font-size:22px;line-height:1.45;color:var(--ink);max-width:34em;text-wrap:pretty} .mon__box{grid-column:3;grid-row:1;position:relative;width:30px;height:30px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(14,17,23,.3);transition:box-shadow 240ms,background 240ms} .mon__chk{position:absolute;inset:3px;width:24px;height:24px;stroke:var(--teal);stroke-width:2.2;stroke-linecap:square;stroke-linejoin:miter; clip-path:inset(0 100% 0 0);transition:clip-path 480ms var(--ease-open)} .mon__c.is-done .mon__box{background:var(--ink);box-shadow:none} .mon__c.is-done .mon__chk{clip-path:inset(0 0 0 0)} .mon__veil{position:absolute;inset:0;background:var(--ink);opacity:var(--veil,0);pointer-events:none;border-radius:inherit} html:not(.js-motion) .mon__stack{row-gap:16px;padding-bottom:0;grid-template-rows:none;grid-auto-rows:auto} html:not(.js-motion) .mon__stack::after{display:none} html:not(.js-motion) .mon__c{position:relative;top:auto;min-height:0} html:not(.js-motion) .mon__c:not(:last-child) .mon__box{background:var(--ink);box-shadow:none} html:not(.js-motion) .mon__c:not(:last-child) .mon__chk{clip-path:none} /* the dial: a small night panel that opens from a slit when it arrives */ .mon__dw{position:relative} .mon__dial{--r:var(--r-media);margin:0;display:grid;gap:14px;padding:22px 22px 20px;border-radius:var(--r-media)} .mon__dr{display:flex;flex-direction:column;gap:6px} .mon__dl{color:var(--on-n-3)} .mon__dn{display:flex;align-items:baseline;gap:10px;font-family:var(--sans);font-weight:300;font-size:clamp(56px,5vw,76px);line-height:1;letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums lining-nums} .mon__dof{font-size:.26em;font-weight:500;letter-spacing:.06em;color:var(--on-n-3)} .mon__dial .relay__in{display:block} .mon__dc .relay__i{padding-bottom:0;margin-bottom:0} /* the step's date or figure, set large; an empty slot for a step that names none */ .mon__facts{min-height:1.3em;font-family:var(--sans);font-weight:300;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:#fff} .mon__facts .relay__in{display:flex;align-items:baseline;gap:10px;white-space:nowrap} .mon__facts .node{flex:none;transform:translateY(-3px)} /* progress: a line that fills with the scroll, one node per step lit by its check */ .mon__prog{position:relative;height:14px;margin-top:4px} .mon__prog::before,.mon__fill{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px} .mon__prog::before{background:rgba(255,255,255,.16)} .mon__fill{background:rgba(255,255,255,.72);transform-origin:left center;transform:scaleX(var(--mp,0))} .mon__nodes{position:relative;display:flex;justify-content:space-between;align-items:center;height:100%} .mon__node{background:var(--night-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);transition:background 200ms,box-shadow 200ms,transform 420ms var(--ease-open)} .mon__node.is-on{background:var(--teal);box-shadow:none;transform:scale(1.2)} html:not(.js-motion) .mon__dw{display:none} /* wide screens: heading and dial hold the rail's three columns while the cards stack beside them */ @media(min-width:1000px){ .mon__g{align-items:start} .mon__side{grid-column:1/4;position:sticky;top:var(--mt);padding-top:2px} .mon__head{margin-bottom:0} .mon__h{font-size:clamp(34px,3vw,44px);line-height:1.08} .mon__dw{margin-top:28px} /* the dial keeps its three columns: a long date ('September 30, 2026') sets smaller on a narrow column instead of pushing the progress line and its last node out of the panel */ .mon__dial{grid-template-columns:minmax(0,1fr);container-type:inline-size} .mon__facts{font-size:min(22px,10cqi)} } /* narrow screens and tablets: the dial is a slim night strip that sticks under the reading bar, the cards stack under it */ @media(max-width:999px){ .mon{--dh:58px;--mt:calc(var(--hd) + 48px + var(--dh) + 12px)} html.hdr-off .mon{--mt:calc(48px + var(--dh) + 12px)} .mon__side{display:contents} .mon__head,.mon__stack,.mon__dw{grid-column:1/-1} .mon__head{max-width:40em} .mon__dw{position:sticky;top:calc(var(--hd) + 48px);z-index:3;margin-bottom:12px;transition:top 420ms var(--ease-swap)} html.hdr-off .mon__dw{top:48px} .mon__dial{--r:var(--r-ctl);height:var(--dh);grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:18px;padding:0 18px;border-radius:var(--r-ctl);overflow:clip} .mon__dr{flex-direction:row;align-items:baseline;gap:10px} .mon__dn{font-size:30px;gap:6px} .mon__dof{font-size:.44em} .mon__facts{justify-self:end;min-height:0;font-size:17px} .mon__facts .node{transform:translateY(-2px)} .mon__dial>.mon__prog{position:absolute;left:0;right:0;bottom:0;height:2px;margin:0} .mon__prog::before,.mon__fill{top:auto;bottom:0;height:2px;margin:0} .mon__fill{background:var(--teal)} .mon__nodes{display:none} .mon__c{top:calc(var(--mt) + var(--i) * 10px)} } @media(max-width:700px){ .mon{--dh:52px} .mon__c{grid-template-columns:minmax(0,1fr) auto;row-gap:12px;min-height:0;padding:20px 20px 22px} .mon__num{grid-column:1;font-size:38px} .mon__box{grid-column:2;grid-row:1} .mon__t{grid-column:1/-1;grid-row:2;font-size:19px} .mon__dial{padding:0 14px;column-gap:12px} .mon__dn{font-size:26px} .mon__facts{font-size:15px;max-width:100%;overflow:hidden} } /* ---------------------------------------------------------------- sources */ .srcs{padding:clamp(56px,8vh,112px) 0 clamp(24px,4vh,48px)} .srcs__head{grid-column:1/4} .srcs__h{font-weight:300} .srcs__h .num{color:var(--ink-3)} .srcs__note{margin-top:12px;max-width:22ch} .srcs__l{grid-column:4/13;margin:0} .srcs__i{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:18px;align-items:baseline;padding:16px 0;border-top:1px solid var(--hair);scroll-margin-top:calc(var(--hd) + 60px)} .srcs__i:last-child{border-bottom:1px solid var(--hair)} .srcs__n{font-family:var(--sans);font-weight:500;font-size:13px;color:var(--ink-3)} .srcs__t{margin:0;font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere} .srcs__d{padding:0;font-size:14px;white-space:nowrap} .srcs__d svg{width:12px;height:12px} .srcs__i:target{background:linear-gradient(90deg,var(--white),rgba(255,255,255,0))} .srcs__i:target .srcs__n{color:var(--ink)} .srcs__i:target .srcs__n::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:2px;background:var(--teal);vertical-align:middle} @media(max-width:900px){ .srcs__head,.srcs__l{grid-column:1/-1} .srcs__l{margin-top:24px} .srcs__i{grid-template-columns:34px minmax(0,1fr);row-gap:6px} .srcs__d{grid-column:2;white-space:normal;overflow-wrap:anywhere} .srcs__t{font-size:16px} } /* ---------------------------------------------------------------- related: three typographic covers */ .rel{padding-top:clamp(56px,8vh,112px)} .rel__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(28px,3.4vw,48px)} .rel__rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:0} .rel__i{position:relative;display:flex} .rel__op{--r:var(--r-media);width:100%;border-radius:var(--r-media);transition:clip-path 1000ms var(--ease-open) var(--dl,0ms),transform 240ms var(--ease-open)} .rel__op .cv{box-shadow:none;--cv-r:var(--r-media)} @media(hover:hover){.rel__i:hover .rel__op{transform:translate3d(0,-4px,0)}} @media(max-width:900px),(hover:none) and (max-width:999px){ .rel__rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--gut) * -1);padding:4px var(--gut) 12px;scroll-padding-inline:var(--gut);scrollbar-width:none} .rel__rail::-webkit-scrollbar{display:none} .rel__i{flex:0 0 min(78%,340px);scroll-snap-align:start} } /* ---- 56-covers.css ---- */ /* 56 · COVERS (M28). A dossier cover is one night object: the subject photograph travels inside a window over the top 58%, the foot carries the subject, the lead figure (Hanken 300, number large, units small) and its verbatim label. The typographic cover drops the photograph for rails, so a picture never repeats three times in a row. No artwork, no generated images. */ .cv{position:relative;display:flex;flex-direction:column;width:100%;height:100%;margin:0;border-radius:var(--cv-r,var(--r-media));color:var(--on-n);text-decoration:none} .cv.lp{margin-inline:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .cv__pic{flex:0 0 58%;border-radius:0;min-height:0} .cv__pic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.10);z-index:2} .cv__img{object-position:50% 50%} .cv__foot{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:clamp(18px,2vw,28px) clamp(20px,2.2vw,30px) clamp(20px,2.2vw,28px)} .cv__sub{display:flex;align-items:center;gap:10px} .cv__sub .node{width:7px;height:7px} .cv__fig{margin:0;color:#fff} .cv__lab{margin:0;font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--on-n-2);max-width:36ch;text-wrap:pretty} /* the lead figure: the number at display size, letter units small, set on the baseline */ .fig{display:inline-flex;align-items:baseline;gap:.14em;font-family:var(--sans);font-weight:300;font-size:var(--fig,64px);line-height:1;letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums} .fig__n{font-weight:300} .fig__n.ct{font-size:1em;letter-spacing:-.03em} .fig__u{font-size:.28em;font-weight:500;letter-spacing:.06em;color:var(--on-n-2);text-transform:none} .fig__u--pre{align-self:flex-start;margin-top:.2em;text-transform:uppercase} /* typographic cover: subject, figure, label, title; no photograph */ .cv--type{aspect-ratio:4/5;padding:clamp(22px,2.2vw,30px);justify-content:space-between;gap:18px;--fig:clamp(52px,4.6vw,64px); transition:transform 240ms var(--ease-open)} .cv__top{display:flex;align-items:center;justify-content:space-between;gap:12px} .cv__min{white-space:nowrap} .cv__mid{display:flex;flex-direction:column;gap:12px} .cv--type .cv__lab{font-size:14px;max-width:30ch} .cv__t{display:block;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.22;letter-spacing:-.01em;color:#fff;text-wrap:balance;padding-right:36px} .cv__go,.lp>.cv__go{position:absolute;z-index:2;right:clamp(22px,2.2vw,30px);bottom:clamp(24px,2.4vw,32px);width:16px;height:16px;color:var(--on-n-2);transition:transform 320ms var(--ease-open),color 240ms} .cv__go svg{width:16px;height:16px} @media(hover:hover){.cv--type:hover .cv__go{transform:translate3d(4px,0,0);color:#fff}} @media(max-width:700px){.cv--type .cv__t{font-size:20px}.cv__lab{font-size:14px}} /* ---- 57-viewer.css ---- */ /* 57 · LIBRARY: the header panel with its search, and THE SHAPE VIEWER (M23), the page's signature. One sticky night stage holds one device whose window is a clip-path inset(T R B L round r) computed around each piece's own ratio: phone 9:16 (a 10px bezel grows out of the window), post 4:5, screen 16:9, a browser whose 34px bar slides down for text posts. The piece inside wipes out to the left and the next wipes in: one media layer, so two pieces never share the window. Without motion each entry prints its piece in a static frame. */ /* ---------------------------------------------------------------- header panel */ .lh{margin-top:12px;min-height:60svh;display:flex;align-items:flex-end} .lh__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;padding:clamp(72px,11vh,132px) 0 clamp(40px,6vh,64px)} .lh__a{grid-column:1/9} .lh h1{color:#fff;max-width:13em} .lh .lead{margin-top:22px;max-width:31em} .lh__n{grid-column:9/13;grid-row:1/3;justify-self:stretch;align-self:end;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2vw,28px);padding-bottom:2px} .lh__n li{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)} .lh__n .ct{font-size:clamp(56px,6.4vw,104px);color:#fff} .lh__s{grid-column:1/7;margin-top:36px} .lh__sf{position:relative;height:48px;border-radius:var(--r-ctl);background:#fff;box-shadow:0 18px 40px -22px rgba(0,0,0,.7)} .lh__sf:focus-within{box-shadow:0 0 0 2px var(--teal),0 18px 40px -22px rgba(0,0,0,.7)} .lh__sf input{display:block;width:100%;height:48px;margin:0;border:0;border-radius:inherit;background:transparent;padding:0 18px; font-family:var(--sans);font-weight:500;font-size:16px;color:var(--ink);caret-color:var(--teal);outline:0;-webkit-appearance:none;appearance:none} .lh__sf input::-webkit-search-decoration,.lh__sf input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .lh__sf input:focus-visible{outline:0;box-shadow:none} .lh__ph{position:absolute;left:18px;right:18px;top:0;height:48px;line-height:48px;font-family:var(--sans);font-weight:500;font-size:16px;color:var(--ink-3); white-space:nowrap;overflow:hidden;pointer-events:none} .lh__ph .ty__c{width:1px} html.js .lh__sf input::placeholder{color:transparent} html:not(.js) .lh__ph,.lh__sf.has-v .lh__ph{visibility:hidden} html:not(.js) .lh__s{display:none} .lh__res{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-height:44px;margin-top:8px;font-size:15px;color:var(--on-n-2);visibility:hidden} .lh__res.on{visibility:visible} .lh__res .u{color:#fff} @media(max-width:899px){ .lh__a,.lh__s{grid-column:1/-1} .lh__n{grid-column:1/-1;grid-row:auto;justify-self:stretch;margin-top:40px;max-width:520px} .lh__s{margin-top:32px} } @media(max-width:699px){.lh{min-height:80svh}.lh__n .ct{font-size:52px}} /* the viewer's first piece plays in the header's right half: the same film, the same slate, opened with sound on a click. The counters step down to a slim row under the lead. */ .lh--pv{min-height:0} .lh--pv .lh__g{grid-template-rows:auto auto 1fr;align-items:start;padding:clamp(56px,8vh,104px) 0 clamp(24px,3.4vh,40px)} .lh--pv .lh__a{grid-column:1/7;grid-row:1} .lh--pv .lh__n{grid-column:1/7;grid-row:2;justify-self:start;align-self:start;width:min(100%,420px);margin-top:36px;padding:0} .lh--pv .lh__n li{gap:8px;padding-top:12px} .lh--pv .lh__n .ct{font-size:clamp(34px,3vw,46px)} .lh--pv .lh__s{grid-column:1/7;grid-row:3;margin-top:32px} .lh__pv{grid-column:7/13;grid-row:1/4;align-self:center;padding-left:clamp(0px,2.2vw,36px)} .lh__pvs{margin-bottom:16px;color:rgba(242,244,248,.72)} .lh__pvb{display:block;width:100%;text-align:left;color:inherit;-webkit-tap-highlight-color:transparent} .lh__dv{position:relative;display:block} .lh__dv>.op__sh{border-radius:24px;box-shadow:0 50px 90px -44px rgba(0,0,0,.8),0 2px 8px rgba(0,0,0,.2)} .lh__scr{--r:24px;position:relative;display:block;padding:10px;background:#0B0E15;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .lh__film{display:block;width:100%;border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.10)} .lh__film>img,.lh__film>video{transition:transform 900ms var(--ease-open),opacity 200ms ease} .lh__pvc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:20px;row-gap:4px;margin-top:18px} .lh__pvcl{grid-column:1;font-family:var(--sans);font-weight:500;font-size:14px;line-height:1.4;color:var(--on-n-2)} .lh__pvt{grid-column:1;font-family:var(--serif);font-weight:300;font-size:clamp(22px,1.9vw,28px);line-height:1.15;color:#fff;text-wrap:balance} .lh__o{grid-column:2;grid-row:1/3;align-self:end;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--sans);font-weight:500;font-size:15px;color:#fff;white-space:nowrap} .lh__o svg{width:14px;height:14px;transition:transform 320ms var(--ease-open)} @media(hover:hover){ .lh__pvb:hover .lh__film>img,.lh__pvb:hover .lh__film>video{transform:scale(1.02)} .lh__pvb:hover .lh__o svg{transform:translate3d(4px,0,0)} } .lh__pvb:focus-visible{outline:0;box-shadow:none} .lh__pvb:focus-visible .lh__scr{outline:2px solid var(--teal);outline-offset:3px} @media(max-width:899px){ .lh--pv .lh__g{grid-template-rows:none;padding:clamp(44px,7vh,72px) 0 44px} .lh--pv .lh__a,.lh--pv .lh__n,.lh--pv .lh__s,.lh__pv{grid-column:1/-1;grid-row:auto} .lh__pv{padding:0;margin-top:32px;max-width:640px} .lh--pv .lh__n{margin-top:32px} } @media(max-width:699px){ .lh--pv{min-height:0} .lh__pv{margin-top:26px} .lh__pvs{margin-bottom:12px} .lh__scr{--r:18px;padding:7px} .lh__film{border-radius:11px} .lh--pv .lh__n .ct{font-size:40px} .lh__pvc{margin-top:14px} } /* ---------------------------------------------------------------- viewer layout */ .sv{padding-bottom:clamp(48px,7vh,112px)} .sv__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)} .sv__list{grid-column:1/6;grid-row:1;position:relative;padding-left:44px} .sv__side{grid-column:6/13;grid-row:1;position:relative} .sv__pin{position:sticky;top:calc(var(--hd) + 6svh)} .sv__stage.lp{--r:var(--r-panel);position:relative;margin:0;height:76svh;min-height:400px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none} /* the stage: a slate on top, the device, the slide nodes below */ .sv__stage>.sv__hud{position:absolute;z-index:4;left:0;right:0;top:0;height:64px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none} .sv__slate{flex:1;min-width:0;white-space:nowrap} .sv__slate .relay__in{display:block;overflow:hidden;text-overflow:ellipsis} .sv__hint{flex:none;white-space:nowrap} @media(hover:none){.sv__hint-f{display:none}} @media(hover:hover){.sv__hint-t{display:none}} .sv__stage>.sv__dev{position:absolute;z-index:2;inset:0;transform:perspective(1600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))} .sv__stage>.sv__dots{position:absolute;z-index:4;left:0;right:0;bottom:0;height:56px;display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none} .sv__dots i{display:block;width:7px;height:7px;border-radius:var(--r-node);background:rgba(255,255,255,.26);transition:background-color 300ms,transform 600ms var(--ease-swap)} .sv__dots i.on{background:var(--teal);transform:scale(1.15)} /* the device: three rims under one window, all clip-paths on one curve */ .sv__dev>i,.sv__dev>.sv__win{position:absolute;inset:0;clip-path:inset(50% 50% 50% 50% round 16px);transition:clip-path 700ms var(--ease-swap)} .sv__rim--o{background:rgba(255,255,255,.13)} .sv__ring{background:#0B0E15} .sv__rim--i{background:rgba(255,255,255,.14)} .sv__win{background:#0B0E15} .sv--phone .sv__rim--i{background:rgba(255,255,255,.10)} /* the browser bar slides down out of the window's top edge */ .sv__win>.sv__bar{position:absolute;z-index:3;left:0;top:0;width:100%;transform:translate3d(0,-101%,0);transition:transform 700ms var(--ease-swap)} .sv--browser .sv__win>.sv__bar{transform:none} .sv__bar .fr__addr{max-width:min(70%,360px)} /* one media layer: it wipes out to the left, the next wipes in from the right */ .sv__m{position:absolute;left:0;top:0;width:100%;height:100%;overflow:clip;container-type:size; clip-path:inset(0 0 0 0);transition:clip-path 520ms var(--ease-line)} .sv__m.is-out{clip-path:inset(0 100% 0 0);transition:clip-path 260ms var(--ease-leave)} .sv__m.is-pre{clip-path:inset(0 0 0 100%);transition:none} .sv--back .sv__m.is-out{clip-path:inset(0 0 0 100%)} .sv--back .sv__m.is-pre{clip-path:inset(0 100% 0 0)} .sv__m>*{position:absolute;left:0;top:0;width:100%;height:100%;visibility:hidden} .sv__m[data-k="film"]>.sv__i,.sv__m[data-k="film"]>.sv__v,.sv__m[data-k="cuts"]>.sv__i,.sv__m[data-k="slides"]>.sv__slides,.sv__m[data-k="post"]>.sv__post{visibility:visible} .sv__i,.sv__v{object-fit:cover} .sv__v{opacity:0;transition:opacity 200ms ease} .sv__v.is-playing{opacity:1} .sv__slides{display:flex;width:auto;will-change:transform;transition:transform 600ms var(--ease-swap)} .sv__slides img{flex:none;width:var(--sw,100%);height:100%;object-fit:cover} /* a text post, read in the browser: a white post on a mist page */ .sv__post{display:flex;align-items:center;justify-content:center;background:var(--mist);padding:clamp(12px,5cqh,40px) clamp(12px,6cqw,56px)} .sv__card{display:flex;flex-direction:column;width:min(100%,560px);max-height:100%;padding:clamp(16px,4cqw,32px);background:#fff;border-radius:12px; box-shadow:var(--sh-1),inset 0 0 0 1px var(--hair-2);color:var(--ink);text-align:left} .sv__ph{display:flex;flex-direction:column;gap:2px;flex:none} .sv__ph b{font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.3} .sv__ph small{font-size:13px;line-height:1.3;color:var(--ink-3)} .sv__pt{flex:none;margin:clamp(10px,2.4cqh,18px) 0 clamp(8px,1.8cqh,14px);font-family:var(--serif);font-weight:400;font-size:clamp(19px,4.2cqw,30px);line-height:1.18;letter-spacing:-.01em;text-wrap:balance} .sv__px{flex:1 1 auto;min-height:0;overflow:hidden} .sv__px p{font-family:var(--serif);font-size:clamp(16px,2.6cqw,19px);line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden} .sv__pm{flex:none;display:inline-flex;align-items:center;gap:8px;margin-top:clamp(10px,2.4cqh,16px);font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink)} .sv__pm svg{width:14px;height:14px} /* a cut (instant) state for resize and very fast scrolls */ .sv--cut .sv__dev>*,.sv--cut .sv__m,.sv--cut .sv__slides,.sv--cut .sv__win>.sv__bar{transition:none!important} /* ---------------------------------------------------------------- the entries */ .sv__thr{position:absolute;left:3px;top:0;bottom:0;width:1px;background:var(--hair)} .sv__thr>i{position:absolute;inset:0;background:var(--ink-3);transform-origin:50% 0;transform:scaleY(0)} .sv__e{position:relative;height:calc(var(--eh,72) * 1svh);min-height:440px} .sv__ec{position:sticky;top:var(--st,calc(var(--hd) + 22svh));padding:8px 0 28px} .sv__el{position:relative;display:flex;align-items:center;gap:14px} .sv__el .node{position:absolute;left:-44px;top:50%;margin-top:calc(var(--node) / -2);background:#AEB5C0;transition:background-color 300ms,transform 500ms var(--ease-open)} .sv__e.is-on .sv__el .node{background:var(--teal);transform:scale(1.2)} /* the line leaves the active entry and lands its teal tick on the stage */ .sv__ln{position:relative;flex:1 1 auto;align-self:center;height:1px;min-width:24px;margin:0 calc(-1 * var(--gap)) 0 10px;background:rgba(14,17,23,.22); transform:scaleX(0);transform-origin:100% 50%;transition:transform 260ms var(--ease-leave)} .sv__ln .rule__tick{transform:scaleY(0);transition:transform 200ms var(--ease-leave)} .sv__e.is-on .sv__ln{transform:none;transform-origin:0 50%;transition:transform 700ms var(--ease-open) 120ms} .sv__e.is-on .sv__ln .rule__tick{transform:none;transition:transform 400ms var(--ease-open) 520ms} .sv__cl{margin-top:18px;font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.4;color:var(--ink-2)} .sv__t{margin-top:8px;font-size:clamp(28px,2.4vw,38px);line-height:1.1;letter-spacing:-.014em;color:var(--ink-3);transition:color 400ms} .sv__e.is-on .sv__t{color:var(--ink)} .sv__s{margin-top:16px;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:30em} .sv__m2{margin-top:14px} .sv__o{margin-top:10px} .sv__o svg{flex:none} .sv__fig{display:none} /* ---------------------------------------------------------------- stacked (phones, tablets upright) Upright touch tablets up to 1100px (iPad Pro, 1024) stack too: side by side, a 16:9 film filled a fifth of a tall, narrow stage; stacked, the window takes the stage's full width. */ @media(max-width:999px),(hover:none) and (orientation:portrait) and (max-width:1100px){ .sv__head{margin-bottom:calc(var(--hd) + 24px)} .sv__g{grid-template-columns:minmax(0,1fr)} .sv__side{grid-column:1;grid-row:1;position:sticky;top:0;z-index:5;margin-top:calc(-8px - var(--hd));padding-top:calc(var(--hd) + 8px);background:var(--mist); transition:translate 420ms var(--ease-swap)} html.hdr-off .sv__side.is-stuck{translate:0 calc(-1 * var(--hd))} /* the words of the entry above slide under the stage into mist, never sliced by its edge */ /* a line is cut only inside solid mist (the first 19px under the stage), then shows through a 45px fade; the resting entry waits below it, so no half line ever sits against the stage */ .sv__side::after{content:"";position:absolute;left:0;right:0;top:100%;height:64px;pointer-events:none; background:linear-gradient(180deg,var(--mist) 0,var(--mist) 30%,rgba(242,244,248,.8) 50%,rgba(242,244,248,.38) 74%,rgba(242,244,248,0) 100%)} .sv__pin{position:static} .sv__stage.lp{height:48svh;min-height:260px} .sv__stage>.sv__hud{height:46px;padding:0 18px} .sv__stage>.sv__dots{height:36px} .sv__list{grid-column:1;grid-row:2;padding-left:30px;margin-top:4px} .sv__el .node{left:-30px} .sv__ln{display:none} .sv__e{height:calc(var(--eh,72) * .89svh);min-height:360px} .sv__ec{top:calc(var(--hd) + 8px + 48svh + 58px)} .sv__t{font-size:clamp(24px,6.4vw,32px)} .sv__cl{font-size:16px} .sv__s{font-size:17px} } @media(max-width:560px){.sv__hint{display:none}} @media(max-width:999px) and (max-height:760px){.sv__s{display:none}} /* ---------------------------------------------------------------- no motion: every piece inline, at its ratio */ html:not(.js-motion) .sv__side,html:not(.js-motion) .sv__thr{display:none} html:not(.js-motion) .sv__list{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px var(--gap);padding-left:0;margin:0} html:not(.js-motion) .sv__e{height:auto;min-height:0} html:not(.js-motion) .sv__ec{position:static;display:flex;flex-direction:column;align-items:flex-start;padding:0} html:not(.js-motion) .sv__el .node{position:static;margin:0;background:var(--ink-3)} html:not(.js-motion) .sv__ln{display:none} html:not(.js-motion) .sv__t{color:var(--ink)} html:not(.js-motion) .sv__fig{display:block;order:-1;width:100%;margin-bottom:24px} html:not(.js-motion) .sv__head{margin-bottom:clamp(40px,5vw,72px)} @media(max-width:699px){html:not(.js-motion) .sv__list{grid-template-columns:minmax(0,1fr);gap:56px}} .sv__ff{position:relative;display:block;width:min(100%,calc(64svh * var(--ar,1)));overflow:clip;border-radius:var(--r-media);background:#0B0E15;box-shadow:var(--sh-1)} .sv__ff img{width:100%;height:100%;object-fit:cover} .sv__fk{position:absolute;right:12px;bottom:12px;padding:5px 9px;border-radius:8px;background:rgba(11,14,21,.78);color:#fff} .sv__fp{display:block;overflow:clip;border-radius:var(--r-frame);background:var(--mist);box-shadow:var(--sh-1),inset 0 0 0 1px var(--hair-2)} .sv__fb{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:linear-gradient(180deg,#1A2130,#121826)} .sv__fb .node{width:7px;height:7px;background:#3A4458} .sv__fc{display:flex;flex-direction:column;gap:10px;margin:22px;padding:24px;background:#fff;border-radius:12px;box-shadow:var(--sh-1)} .sv__fc b{font-weight:600;font-size:15px} .sv__fc em{font-family:var(--serif);font-style:normal;font-size:24px;line-height:1.2} .sv__fc span{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink-2)} /* ---- 58-archive.css ---- */ /* 58 · LIBRARY: THE ARCHIVE. Every piece at its true ratio under a sticky white filter bar; posts are white text cards. The wall is laid out by script in columns (films 16:9 on two), so a re-sort is a transform: leaving tiles close to a slit, the rest travel, arrivals open last. Without script it is a plain grid. Wander is the drag plane, a night layer opened from its button. */ .ar{padding-top:clamp(40px,6vh,88px)} .ar__head{margin-bottom:clamp(28px,3vw,40px)} /* ---------------------------------------------------------------- the sticky bar */ .ar__bw{position:sticky;top:calc(var(--hd) + 12px);z-index:30;transition:translate 420ms var(--ease-swap)} html.hdr-off .ar__bw.is-stuck{translate:0 calc(-1 * var(--hd))} .ar__bar{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px;background:#fff;border-radius:14px;box-shadow:var(--sh-1),inset 0 0 0 1px var(--hair-2)} .ar__tabs{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding:0 8px} .ar__tabs::-webkit-scrollbar{display:none} /* a rail wider than the bar fades at the edge it continues past, so the next tab is found, never sliced */ .ar__tabs.is-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .ar__tabs.is-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)} .ar__tabs.is-l.is-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)} .ar__rail{position:relative;display:flex;gap:2px;width:max-content} .ar__rail button{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:10px;white-space:nowrap;scroll-snap-align:start; font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink-3);transition:color 200ms,background-color 200ms} .ar__rail button span{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums} .ar__rail button[aria-pressed="true"]{color:var(--ink)} .ar__rail button[aria-pressed="true"] span{color:var(--ink-2)} .ar__rail button:disabled{color:rgba(14,17,23,.28);cursor:default} .ar__rail button:disabled span{color:inherit} @media(hover:hover){.ar__rail button:not(:disabled):hover{color:var(--ink);background:var(--mist)}} .ar__tn{position:absolute;left:0;bottom:1px;width:7px;height:7px;border-radius:var(--r-node);background:var(--teal);transform:translate3d(-20px,0,0);transition:transform 600ms var(--ease-swap);pointer-events:none} .ar__end{flex:none;display:flex;align-items:center;gap:8px} .ar__sel{display:flex;gap:8px} .ar__sel select{height:44px;padding:0 12px;border:0;border-radius:10px;background:var(--mist);font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink)} .ar__menu{position:relative;min-width:0} .ar__mb{display:inline-flex;align-items:center;gap:8px;height:44px;max-width:240px;padding:0 12px 0 14px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hair); font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink);white-space:nowrap;transition:box-shadow 200ms,background-color 200ms} .ar__mb .ar__ml{display:none} .ar__mb b{font-weight:500;overflow:hidden;text-overflow:ellipsis} .ar__mb svg{flex:none;width:14px;height:14px;color:var(--ink-3);transition:transform 320ms var(--ease-open)} .ar__mb[aria-expanded="true"] svg{transform:rotate(180deg)} .ar__mb.is-set{box-shadow:inset 0 0 0 1px var(--ink)} @media(hover:hover){.ar__mb:hover{background:var(--mist)}} .ar__view{display:inline-flex;padding:3px;border-radius:12px;background:var(--mist)} .ar__view button{height:38px;padding:0 14px;border-radius:9px;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink-3);transition:color 200ms,background-color 200ms,box-shadow 200ms} .ar__view button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--sh-1)} html:not(.js) .ar__bw,html:not(.js) .ar__count{display:none} /* under 1360px the formats and the menus no longer fit one row: the tabs take the whole first row (every format visible, no side-scroll on a desktop), the menus and the view the second */ @media(max-width:1359px){ .ar__bar{flex-wrap:wrap;row-gap:4px} .ar__tabs{flex:1 1 100%} .ar__end{flex:1 1 100%;justify-content:space-between;padding-top:4px;border-top:1px solid var(--hair-2)} } @media(max-width:899px){ .ar__bar{flex-wrap:wrap;gap:6px;padding:6px} .ar__tabs{flex:1 1 100%} .ar__end{flex:1 1 100%;gap:6px;justify-content:normal;padding-top:0;border-top:0} .ar__sel{flex:1 1 auto;min-width:0;gap:6px} .ar__menu{flex:1 1 0} .ar__mb{width:100%;max-width:none;justify-content:space-between} } @media(max-width:699px){ .ar__rail button,.ar__mb,.ar__view button,.ar__count{font-size:16px} .ar__rail button{padding:0 12px} .ar__view button[aria-pressed="true"]{display:none} .ar__view{padding:0;background:none} .ar__view button{height:44px;box-shadow:inset 0 0 0 1px var(--hair);border-radius:10px;color:var(--ink)} .ar__mb:not(.is-set) b{display:none} .ar__mb:not(.is-set) .ar__ml{display:inline} .ar__mb{padding:0 10px 0 12px} } /* upright tablets (600 to 899px): the eight formats stand in a grid of four columns on two rows, every one in view and none behind a scroll (the teal node follows its row); from 900 to 999px they hold one row with tighter tabs */ @media(min-width:600px) and (max-width:899px){ .ar__tabs{overflow:visible;scroll-snap-type:none} .ar__tabs.is-l,.ar__tabs.is-r{-webkit-mask-image:none;mask-image:none} .ar__rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;width:auto} .ar__rail button{justify-content:center;padding:0 8px} } @media(min-width:900px) and (max-width:999px){.ar__rail button{padding:0 11px}} /* ---------------------------------------------------------------- menus: a popover, a sheet on touch */ .ar__pop{position:fixed;z-index:1100;left:0;top:0;min-width:260px;max-height:min(62svh,440px);overflow:auto;padding:6px;background:#fff;border-radius:12px; box-shadow:var(--sh-2),inset 0 0 0 1px var(--hair-2);visibility:hidden;clip-path:inset(0 0 100% 0 round 12px); transition:clip-path 260ms var(--ease-leave),visibility 0s linear 260ms} .ar__pop.is-open{visibility:visible;clip-path:inset(0 0 0 0 round 12px);transition:clip-path 420ms var(--ease-open)} .ar__poph{display:none} .ar__pop [role="option"]{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border-radius:8px;text-align:left; font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink)} .ar__pop [role="option"] span{flex:1} .ar__pop [role="option"] small{font-size:13px;color:var(--ink-3)} .ar__pop [role="option"] .node{background:transparent;box-shadow:inset 0 0 0 1px var(--hair)} .ar__pop [role="option"][aria-selected="true"] .node{background:var(--teal);box-shadow:none} .ar__pop [role="option"]:disabled{color:rgba(14,17,23,.3);cursor:default} @media(hover:hover){.ar__pop [role="option"]:not(:disabled):hover{background:var(--mist)}} .ar__pop [role="option"]:focus-visible{background:var(--mist);outline-offset:-2px} .ar__veil{display:none} @media(hover:none){ .ar__pop{left:0;right:0;top:auto;bottom:0;min-width:0;max-height:72svh;padding:8px 12px calc(16px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0; clip-path:none;transform:translate3d(0,102%,0);transition:transform 360ms var(--ease-leave),visibility 0s linear 360ms} .ar__pop.is-open{clip-path:none;transform:none;transition:transform 560ms var(--ease-open)} .ar__poph{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 4px 0 12px;border-bottom:1px solid var(--hair-2);margin-bottom:6px} .ar__popx{height:44px;padding:0 12px;border-radius:10px;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)} .ar__pop [role="option"]{min-height:52px;font-size:16px} .ar__veil{display:block;position:fixed;inset:0;z-index:1090;background:rgba(8,10,17,.46);opacity:0;visibility:hidden;transition:opacity 300ms,visibility 0s linear 300ms} .ar__veil.is-open{opacity:1;visibility:visible;transition:opacity 300ms} } /* ---------------------------------------------------------------- count and wall */ .ar__count{display:flex;align-items:center;flex-wrap:wrap;gap:0 .3em;margin:32px 0 28px;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink-2)} .ar__n{display:inline-flex;color:var(--ink);font-variant-numeric:tabular-nums} .ar__n .ct__w{display:inline-flex;height:1em;line-height:1;overflow:clip;align-items:flex-start} .ar__n .ct__d{display:inline-block;height:1em;overflow:clip} .ar__n .ct__s{display:block;white-space:pre;line-height:1} .ar__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:52px var(--gap);align-items:start} .ar__grid>.ar__t--wide{grid-column:span 2} .ar__grid.is-laid{display:block;position:relative} .ar__grid.is-laid>.ar__t{position:absolute;left:0;top:0} .ar__grid.is-flip>.ar__t{transition:transform 700ms var(--ease-swap)} .ar__grid>.ar__t[hidden]{display:none} html.js .ar[data-default="selected"]:not(.is-ready) .ar__t:not([data-sel]){display:none} @media(max-width:999px){.ar__grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:599px){.ar__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}.ar__grid>.ar__t--post{grid-column:span 2}} /* tiles */ .ar__b{display:block;width:100%;text-align:left;color:inherit;-webkit-tap-highlight-color:transparent} .ar__f{position:relative;display:block;overflow:clip;border-radius:var(--r-media);background:#DCE0E7;box-shadow:var(--sh-1); transition:clip-path 1000ms var(--ease-open) var(--dl,0ms),translate 240ms var(--ease-open),box-shadow 240ms ease} .ar__f img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-open)} .ar__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 200ms ease} .ar__v.is-playing{opacity:1} .ar__dur{position:absolute;right:10px;bottom:10px;z-index:1;padding:5px 8px;border-radius:8px;background:rgba(11,14,21,.78);color:#fff;line-height:1.2} .ar__t .lab{display:block;margin-top:14px} .ar__h{display:block;margin-top:6px;font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.25;letter-spacing:-.005em;color:var(--ink);text-wrap:balance} .ar__card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px 24px 22px;background:#fff;border-radius:var(--r-media); box-shadow:var(--sh-1),inset 0 0 0 1px var(--hair-2);transition:clip-path 1000ms var(--ease-open) var(--dl,0ms),translate 240ms var(--ease-open),box-shadow 240ms ease} .ar__card .lab{margin:0} .ar__card .ar__h{margin:0;font-size:23px;line-height:1.2} .ar__q{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .ar__more{display:inline-flex;align-items:center;gap:8px;margin-top:2px;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink)} .ar__more svg{width:14px;height:14px;transition:transform 320ms var(--ease-open)} @media(hover:hover){.ar__b:hover .ar__more svg{transform:translate3d(4px,0,0)}} @media(hover:hover) and (pointer:fine){ .ar__b:hover .ar__f,.ar__b:hover .ar__card{translate:0 -4px;box-shadow:var(--sh-2)} .ar__b:hover .ar__card{box-shadow:var(--sh-2),inset 0 0 0 1px var(--hair-2)} .ar__b:hover .ar__f img{transform:scale(1.03)} } .ar__b:focus-visible{outline:0;box-shadow:none} .ar__b:focus-visible .ar__f,.ar__b:focus-visible .ar__card{outline:2px solid var(--teal);outline-offset:3px} @media(max-width:599px){.ar__h{font-size:18px}.ar__card .ar__h{font-size:21px}.ar__card{padding:20px}} /* leaving tiles close to a slit; arrivals wait closed, then open */ html.js-motion .ar__grid .ar__t.is-leave .op{clip-path:inset(0 calc(50% - 1px) 0 calc(50% - 1px) round var(--r));transition:clip-path 240ms var(--ease-leave)} html.js-motion .ar__grid .ar__t.is-pre .op{clip-path:inset(0 calc(50% - 1px) 0 calc(50% - 1px) round var(--r));transition:none} html.js-motion .ar__grid .ar__t.in:not(.is-pre):not(.is-leave) .op{transition-duration:800ms} .ar__none{padding:40px 0 24px} .ar__none .btn{margin-top:20px} /* ---------------------------------------------------------------- WANDER */ .wd.lp{position:fixed;inset:0;z-index:1150;margin:0;border-radius:0;overflow:hidden;clip-path:inset(0 round 0px);transition:clip-path 700ms var(--ease-open);touch-action:none} .wd[hidden]{display:none} html.wd-open,html.wd-open body{overflow:hidden} .wd.lp>.wd__plane{position:absolute;inset:0;z-index:2;cursor:grab;touch-action:none} .wd__plane.is-drag{cursor:grabbing} .wd.lp>.wd__top{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--gut);pointer-events:none} .wd__top>*{pointer-events:auto} .wd__back svg{width:14px;height:14px} /* the hint is solid: a poster's own words never show through it */ .wd__hint{padding:8px 12px;border-radius:10px;background:#0B0E15;box-shadow:0 0 0 1px rgba(255,255,255,.08)} @media(hover:none){.wd__hint-f{display:none}} @media(hover:hover){.wd__hint-t{display:none}} @media(max-width:699px){.wd__hint{display:none}} /* phones: the top hint has no room, so a chip says it once, for two seconds, then closes */ .wd.lp>.wd__drag{position:absolute;z-index:3;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));display:none;padding:12px 18px;border-radius:12px;background:#0B0E15; box-shadow:0 0 0 1px rgba(255,255,255,.12),0 20px 40px -20px rgba(0,0,0,.8);color:#fff;font:500 15px/1.2 var(--sans);white-space:nowrap;pointer-events:none; transform:translate3d(-50%,0,0);clip-path:inset(0 50% 0 50% round 12px);transition:clip-path 420ms var(--ease-leave)} .wd.lp>.wd__drag.is-on{clip-path:inset(0 0 0 0 round 12px);transition:clip-path 700ms var(--ease-open)} @media(max-width:699px){.wd.lp>.wd__drag{display:block}} /* a tile is its picture with its name under it: the caption never lies on a poster's own words */ .wd__it{position:absolute;left:0;top:0;display:block;text-align:left;will-change:transform;color:#fff} .wd__pic{position:relative;display:block;overflow:clip;border-radius:14px;background:#131926;box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)} .wd__it img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none} .wd__it small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:10px;padding:0 2px;font-family:var(--sans);font-weight:500;font-size:13px;line-height:1.35;color:rgba(242,244,248,.86);pointer-events:none} .wd__it.is-film .wd__pic::after{content:"";position:absolute;right:10px;top:10px;width:7px;height:7px;border-radius:var(--r-node);background:var(--teal)} .wd__it.is-post{display:flex;flex-direction:column;gap:8px;padding:18px;overflow:clip;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)} .wd__it.is-post .lab{color:var(--ink-3)} .wd__it.is-post b{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden} .wd__q{font-family:var(--serif);font-size:15px;line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} .wd__it.is-post small{display:none} /* coarse pointers: the Browse / Wander switch keeps its look, its hit area reaches 44px */ @media (pointer:coarse){.ar__view button{position:relative}.ar__view button::after{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}} /* ---- 59-unbuilt.css ---- */ /* 59 · UNBUILT (M27), the 404. The only page left as a raw curved grid: a canvas lattice of rounded cells that bends like a lens toward the pointer or the finger. The address the visitor asked for is typed back and struck through in teal, and the nearest real page types beneath it. Then three doors that do open. Without JS the static grid texture stays and the address block is not shown. */ /* ---- 1 · the unbuilt panel ------------------------------------------------ */ .ub{position:relative} .ub__panel{margin-top:var(--inset);min-height:calc(100svh - var(--hd) - var(--inset) * 2);display:grid;align-items:center; padding-block:clamp(40px,8vh,96px)} html.js .ub__panel::after{background:url(/assets/img/sys/grain-128.png) repeat} .ub__panel>.ub__grid{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none} /* the lens light: teal, moved and scaled by transform only (it replaces the pointer lights here) */ .ub__panel>.ub__glow{position:absolute;left:0;top:0;z-index:1;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;pointer-events:none; will-change:transform;transform:translate3d(-9999px,0,0); background:radial-gradient(closest-side,rgba(0,194,184,.2),rgba(0,194,184,.07) 45%,transparent 100%)} html:not(.js) .ub__panel>.ub__glow{display:none} .ub__text{max-width:640px} .ub__slate{margin-bottom:26px} .ub__h{max-width:9.5em} .ub__lead{margin-top:24px;max-width:28em} .ub__addr{margin-top:40px;width:min(100%,560px)} .ub__acts{margin-top:36px} /* the browser bar, at reading size: three square nodes and a field */ .ub__bar{display:flex;align-items:center;height:48px;padding:0 9px 0 16px;border-radius:var(--r-ctl); background:linear-gradient(180deg,#1A2130,#121826);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 22px 44px -26px rgba(0,0,0,.7)} .ub__nodes{display:flex;gap:6px;flex:none;margin-right:12px} .ub__nodes .node{width:7px;height:7px;border-radius:2px;background:#3A4458} .ub__nodes .ub__lit{background:var(--teal)} .ub__field{flex:1;min-width:0;height:32px;display:flex;align-items:center;padding:0 12px;border-radius:var(--r-chip);background:rgba(255,255,255,.06);overflow:hidden} .ub__w{position:relative;display:inline-block;max-width:100%;white-space:nowrap} .ub__txt,.ub__txt.ty{display:inline-block;white-space:pre;font-family:var(--sans);font-weight:500;font-size:16px;line-height:32px; font-variant-numeric:tabular-nums;letter-spacing:.005em;color:rgba(242,244,248,.88)} .ub__strike{position:absolute;left:-3px;right:-3px;top:53%;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left center; transition:transform 400ms var(--ease-open)} .ub__addr.is-struck .ub__strike{transform:scaleX(1)} .ub__addr.is-struck .ub__bar--was .ub__txt{color:var(--on-n-3)} .ub__bar--to{background:linear-gradient(180deg,#1F2839,#151C2B);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 22px 44px -26px rgba(0,0,0,.7)} .ub__bar--to .ub__field{background:rgba(255,255,255,.09)} .ub__bar--to .ub__txt{color:var(--on-n)} /* the line that joins the struck address to the page that exists */ .ub__link{display:block;width:1px;height:18px;margin-left:19px;background:rgba(255,255,255,.3);transform-origin:center top} .ub__title{margin-top:16px;min-height:1.3em;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.3;color:var(--on-n);letter-spacing:-.005em;text-wrap:balance} .ub__back[hidden]{display:none} /* portrait screens: the words first, the raw grid and its lens below them */ @media(orientation:portrait){.ub__panel{align-items:start}} /* portrait tablets (iPad, mini, iPad Pro): a phone-sized block at the top left half the screen as bare grid. The words take tablet scale and stand in the middle of the panel, with the lattice framing them above and below; the lens rests beside them when there is room (iPad Pro), else in the band under them (unbuilt.js) */ @media(orientation:portrait) and (min-width:700px){ .ub__panel{align-items:center} .ub__h{font-size:clamp(52px,7.4vw,84px)} .ub__lead{font-size:clamp(22px,2.5vw,26px)} .ub__addr{margin-top:48px} .ub__acts{margin-top:40px} } /* arrivals: the bar opens from its left edge, then types; the answer opens after the strike */ html.js-motion .ub__bar--was{clip-path:inset(0 100% 0 0 round var(--r-ctl));transition:clip-path 720ms var(--ease-open) var(--dl,0ms)} html.js-motion .ub__addr.in .ub__bar--was{clip-path:inset(0 0 0 0 round var(--r-ctl))} html.js-motion .ub__link{transform:scaleY(0);transition:transform 320ms var(--ease-open)} html.js-motion .ub__bar--to{clip-path:inset(0 100% 0 0 round var(--r-ctl));transition:clip-path 640ms var(--ease-open) 160ms} html.js-motion .ub__addr.is-b .ub__link{transform:none} html.js-motion .ub__addr.is-b .ub__bar--to{clip-path:inset(0 0 0 0 round var(--r-ctl))} /* without a script the path cannot be read: no address, no 'Open it' */ html:not(.js) .ub__addr,html:not(.js) .ub__open{display:none} @media(max-width:700px){ .ub__panel{align-items:start;padding-block:40px 32px} .ub__slate{margin-bottom:18px;max-width:22em} .ub__lead{margin-top:18px} .ub__addr{margin-top:28px} .ub__bar{height:46px;padding:0 6px 0 14px} .ub__nodes{margin-right:10px} .ub__nodes .node{width:5px;height:5px} .ub__nodes .node+.node{display:none} .ub__field{padding:0 10px} .ub__link{margin-left:16px} .ub__title{font-size:22px;min-height:2.6em} .ub__acts{margin-top:26px} } /* ---- 2 · doors that do open ----------------------------------------------- */ .ub-doors{overflow-x:clip} .ub-doors__head{display:grid;grid-template-columns:auto minmax(40px,1fr);align-items:end;column-gap:32px;margin-bottom:clamp(36px,5vw,64px)} .ub-doors__rule{padding-bottom:.9em} .ub-rail__in{width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)} .ub-door{position:relative;display:block;color:var(--on-n);border-radius:var(--r-panel);-webkit-tap-highlight-color:transparent} .ub-door:focus-visible{border-radius:var(--r-panel);outline-offset:4px} .ub-door .op__sh{--r:var(--r-panel);box-shadow:var(--sh-2)} .ub-door__p{--r:var(--r-panel);margin:0;height:100%;border-radius:var(--r-panel)} .ub-door__c{display:flex;flex-direction:column;height:100%;padding:clamp(20px,2vw,28px);container-type:inline-size} .ub-door__h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px} .ub-door__st{position:relative;height:calc(34px + 100cqw / 1.6);display:grid;place-items:center;margin-bottom:26px} .ub-door__fr{width:100%;align-self:stretch} .ub-door__fr .fr__win{--ar:1.6} .ub-door__fr .fr__strip>img{transition:transform 900ms var(--ease-open);transform-origin:50% 0} .ub-door__t{font-size:26px;line-height:1.18;font-weight:400;color:var(--on-n);text-wrap:balance} .ub-door__cap{margin:10px 0 22px} .ub-door__go{margin-top:auto;align-self:flex-start;color:var(--on-n)} @media(hover:hover){ .ub-door:hover .ub-door__go::after{transform:scaleX(1);transform-origin:left} .ub-door:hover .ub-door__go::before{transform:scaleX(1);transition-delay:160ms} .ub-door:hover .ub-door__go svg{transform:translate3d(4px,0,0)} .ub-door:hover .ub-door__fr .fr__strip>img{transform:scale(1.03)} } /* the latest dossier: a white A4 cover on the night panel, two sheets behind it */ .ub-docs{position:relative;height:calc(100% - 16px);margin:16px 20px 0 0;aspect-ratio:.7072} .ub-docs__sheet,.ub-doc{position:absolute;inset:0;border-radius:6px} .ub-docs__sheet--3{background:#9AA3B2;transform:translate3d(20px,-16px,0)} .ub-docs__sheet--2{background:#CDD3DC;transform:translate3d(10px,-8px,0)} .ub-doc{display:flex;flex-direction:column;padding:11% 10% 10%;background:var(--white);color:var(--ink);box-shadow:0 26px 50px -24px rgba(0,0,0,.75)} .ub-doc__top{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:500;font-size:12px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3); padding-bottom:12px;border-bottom:1px solid var(--hair)} .ub-doc__top .node{width:6px;height:6px} .ub-doc__t{margin-top:14px;font-family:var(--serif);font-weight:400;font-size:max(16px,5cqw);line-height:1.16;letter-spacing:-.01em;color:var(--ink);text-wrap:balance} .ub-doc__m span{display:block} .ub-doc__m{margin-top:auto;line-height:1.5;font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums} /* Madrid and Sao Paulo, each with its clock */ .ub-cities{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;height:100%} .ub-city{display:flex;flex-direction:column;min-height:0;margin:0;container-type:inline-size} .ub-city__ph{flex:1;min-height:0} .ub-city__cap{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:12px} .ub-city__t{font-family:var(--sans);font-weight:300;font-size:24px;line-height:1;font-variant-numeric:tabular-nums;color:var(--on-n)} html:not(.js) .ub-city__t{visibility:hidden} @container (max-width:160px){.ub-city__cap{flex-direction:column;align-items:flex-start;gap:6px;padding-top:10px}} /* touch and narrow screens: a snap rail, the centred door's light walks with the swipe */ @media(max-width:1000px){ .ub-rail{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none; padding:8px 0 110px;margin:-8px 0 -110px} .ub-rail::-webkit-scrollbar{display:none} .ub-rail__in{display:flex;width:max-content;gap:12px;padding-inline:var(--gut)} .ub-door{flex:none;width:min(80vw,400px);scroll-snap-align:center} .ub-doors__head{grid-template-columns:1fr} .ub-doors__rule{display:none} } @media(max-width:700px){ .ub-door__t{font-size:24px} .ub-city__t{font-size:22px} } /* ---- 60-case.css ---- */ /* 60 · CASE PAGE SECTIONS (hero, proof, situation, insight, built, up close, result). */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:26px} .lp .crumbs .u{color:var(--on-n-2)} /* hero: the match-cut target. Our browser frame holds three real pages of the case. It holds its column (sticky) while the text leaves, then casehero.js grows it to the full panel and walks the pages (the 1:1 moment). */ .csh{margin-top:12px} .csh .csh__in{padding-block:clamp(48px,7vw,96px);row-gap:40px;align-items:start} .csh__txt{grid-column:1/7;grid-row:1} .csh__dock{grid-column:7/13;grid-row:1;position:relative;z-index:3} .csh__logo{display:block;width:auto;height:auto;max-width:100%;margin-bottom:30px;opacity:.96} /* logos sized by their lockup (trimmed of their margins): the palace mark carries its wordmark underneath, so it needs the most room */ .csh__logo--ip{width:clamp(160px,13vw,196px)} .csh__logo--mh{width:clamp(180px,15vw,228px)} .csh__logo--po{width:clamp(136px,11.5vw,176px)} .csh__logo--mgni{width:clamp(150px,12.5vw,190px)} .csh h1{font-size:clamp(40px,4.9vw,76px);line-height:1.02;color:#fff;max-width:12.5em} .csh .lead{margin-top:24px;max-width:30em} .csh__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 20px;margin-top:40px;padding-top:22px;border-top:1px solid var(--hair-n)} .csh__f{display:flex;flex-direction:column;gap:6px;min-width:0} .csh__v{font-size:15px;line-height:1.35;color:var(--on-n)} .csh__slate{margin-top:14px;max-width:44em} .csh__run{display:none} .csh__ph{display:none} /* the window: the pages stacked, the next one wipes in from the right. A capture is never cropped at its sides: the window is never narrower than the page it shows (casehero.js), and a portrait phone gets the site's own phone capture */ .csh__fr .fr__win{background:#E8E3D7} .csh__fr--doc .fr__win{background:#fff;border-radius:3px} .csh__shot{position:absolute;inset:0;overflow:clip;clip-path:inset(0 0 0 100%)} .csh__shot.is-on{clip-path:inset(0 0 0 0)} .csh__shot picture{display:contents} .csh__shot img{position:absolute;left:0;top:0;display:block;width:100%;height:auto;max-width:none;transform-origin:0 0} .csh__shot[data-fit="cover"] img{height:100%;object-fit:cover;object-position:0 0} html.js-motion .csh__shot{transition:clip-path 820ms var(--ease-swap)} /* a portrait phone rests on the desktop page (whole in the rest window), then walks the site's own phone pages; a page with no phone capture steps out there */ .csh__shot--rest{display:none} @media (max-width:600px) and (orientation:portrait){ html.js-motion .csh__shot--rest[data-po="phone"]{display:block} html.js-motion .csh__shot[data-pp="0"]{display:none} } @media (max-width:1100px) and (orientation:portrait){html.js-motion .csh__shot--rest[data-po="port"]{display:block}} /* a portrait tablet: the page whole in the browser frame, the same page on a phone under its right edge, in its own column beside the text (casehero.js sets .csh--duo, the phone's rect and the text's measure). The phone rises once as the hero arrives, a clip opening from its foot (.is-up, when its first page is in). Corners scale with the phone's width */ .csh__duo{display:none} html.js-motion .csh--duo .csh__duo{display:block;position:absolute;left:0;top:0;z-index:3;padding:8px;border-radius:14% / 6.5%;will-change:transform; clip-path:inset(100% -40px 0 -40px);translate:0 56px;transition:clip-path 1000ms var(--ease-open) 260ms,translate 1000ms var(--ease-open) 260ms} html.js-motion .csh--duo .csh__duo.is-up{clip-path:inset(-40px -40px -40px -40px);translate:0 0} /* the text beside the phone: the facts two by two in the narrower column */ @media (max-width:900px){.csh--duo .csh__facts{grid-template-columns:1fr 1fr}} .csh__duo .fr__win{height:100%;aspect-ratio:auto;border-radius:11% / 5%} .csh__pshot{position:absolute;inset:0;overflow:clip;clip-path:inset(0 0 0 100%)} .csh__pshot.is-on{clip-path:inset(0 0 0 0)} .csh__pshot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0} html.js-motion .csh__pshot{transition:clip-path 820ms var(--ease-swap)} /* motion: the dock is stuck on its line through the text and the run; the frame sits over a placeholder of its rest size, so growing it never moves the layout */ html.js-motion .csh .csh__in{padding-bottom:var(--csh-pb,clamp(48px,7vw,96px))} html.js-motion .csh__dock{grid-row:1/3;align-self:start;position:sticky;top:var(--csh-top,120px);margin-top:var(--csh-dy,0px)} html.js-motion .csh__run{display:block;grid-column:1/7;grid-row:2;height:var(--csh-run,150vh);margin-top:var(--csh-pull,0px)} html.js-motion .csh__ph{display:block;aspect-ratio:var(--csh-ar,1.6);margin-top:34px} html.js-motion .csh--doc .csh__ph{margin-top:0} html.js-motion .csh__fr{position:absolute;left:0;top:0;width:100%;z-index:2;transform-origin:0 0} html.js-motion .csh--live .csh__fr{display:flex;flex-direction:column} html.js-motion .csh--live .csh__fr .fr__bar{flex:none} html.js-motion .csh--live .csh__fr .fr__win{flex:1 1 0;min-height:0;aspect-ratio:auto} html.js-motion .csh--live .csh__shot img{width:100%;height:auto;object-fit:fill} html.js-motion .csh__slate{position:relative;z-index:1;will-change:transform} /* reduced motion and no script: the large frame, still, under the text */ html:not(.js-motion) .csh__txt{grid-column:1/9} html:not(.js-motion) .csh__dock{grid-column:1/-1;grid-row:2;margin-top:8px} html:not(.js-motion) .csh--doc .csh__dock{max-width:min(100%,calc((100svh - var(--hd) - 120px) * var(--csh-ar)))} /* landscape screens up to about 940px tall (laptop, iPad landscape, 1024x768): the text column is fitted so its facts row ends above the fold at rest */ @media (min-width:901px) and (orientation:landscape) and (max-height:940px){ .csh .csh__in{padding-top:clamp(64px,5.6vw,96px)} .csh .crumbs{margin-bottom:18px} .csh__logo{margin-bottom:20px} .csh h1{font-size:min(clamp(40px,4.9vw,76px),7.2svh)} .csh .lead{margin-top:18px;font-size:19px;line-height:1.42} .csh__facts{margin-top:24px;padding-top:14px} } @media (min-width:901px) and (max-width:1100px) and (orientation:landscape) and (max-height:940px){ .csh .lead{font-size:17px} .csh__logo--ip{width:140px} .csh__logo--mh{width:170px} .csh__logo--po{width:124px} .csh__logo--mgni{width:136px} } /* stacked: phones and every portrait tablet (touch up to 1100px). The frame docks under the header, the text closes under the slate's hairline as it grows */ @media (max-width:900px) and (orientation:portrait),(max-width:900px) and (min-height:501px),(hover:none) and (orientation:portrait) and (max-width:1100px){ .csh .csh__in{display:flex;flex-direction:column;align-items:stretch;row-gap:36px} .csh__dock{order:-1} html.js-motion .csh__dock{align-self:stretch} html:not(.js-motion) .csh__dock{order:0} html:not(.js-motion) .csh--doc .csh__dock{max-width:none} /* the line the text closes under while the frame comes down */ html.js-motion .csh__slate{padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.16)} .csh h1{font-size:clamp(44px,6.4vw,64px)} .csh .lead{max-width:34em} } @media (max-width:700px){ .csh h1{font-size:clamp(34px,9vw,44px)} .csh__facts{grid-template-columns:1fr 1fr} .csh__logo--ip{width:160px} .csh__logo--mh{width:184px} .csh__logo--po{width:140px} .csh__logo--mgni{width:156px} } /* the shortest portrait phones (320x568): a smaller resting frame and a tighter lead, so each hero paragraph fits whole between the slate's line and the fold */ @media (max-height:620px) and (orientation:portrait){ html.js-motion .csh__dock{align-self:center;width:84%} .csh .lead{font-size:17px;line-height:1.42} } /* phone landscape: the wide layout (text left, the frame docked right), the dock sized so the whole frame and its slate fit the short screen */ @media (orientation:landscape) and (max-height:500px){ .csh .csh__in{padding-block:calc(var(--hd) - 4px) 32px;row-gap:24px} .csh__dock{justify-self:end;width:100%;max-width:calc((100svh - var(--hd) - 108px) * 1.6)} .csh--doc .csh__dock{max-width:calc((100svh - var(--hd) - 104px) * var(--csh-ar))} .csh .crumbs{margin-bottom:12px} .csh__logo{margin-bottom:14px} .csh__logo--ip{width:104px} .csh__logo--mh{width:150px} .csh__logo--po{width:108px} .csh__logo--mgni{width:104px} .csh h1{font-size:min(clamp(28px,4.4vw,40px),9.6svh)} .csh .lead{margin-top:14px;font-size:16px;line-height:1.45} .csh__facts{grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:20px;padding-top:14px} .csh__v{font-size:14px} } /* proof counters: tabular odometers on mist, the rule leaves to the edge. The figures are sized to the column by the row's longest figure (--w, in em): never wider than 80% of the column, so two figures never read as one run */ .pf__row{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:24px} .pf__c{min-width:0;container-type:inline-size} .pf__n{font-size:clamp(48px,6.1vw,88px);font-size:min(clamp(48px,6.1vw,88px),calc(80cqi / var(--w,2)));line-height:1;color:var(--ink);letter-spacing:-.03em;white-space:nowrap} .pf__c .cap{margin-top:12px;max-width:22ch} .pf__rule{margin-top:36px} @media(max-width:900px){ .pf__row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px} .pf__n{font-size:56px;font-size:min(56px,calc(84cqi / var(--w,2)))} } @media(max-width:900px) and (min-width:601px){.pf__row[style*="--n:3"]{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:600px){.pf__row>:nth-child(3):last-child{grid-column:1/-1}} /* situation */ /* the capture is the first picture after the hero: half the row, never a thumbnail */ .cs-sit__txt{grid-column:1/7;padding-right:clamp(0px,1.6vw,24px)} .cs-sit__body{margin-top:28px;font-family:var(--serif);font-size:20px;line-height:1.62;color:var(--ink-2);max-width:34em} .cs-sit__body p+p{margin-top:1em} .cs-sit__fig{grid-column:7/13;align-self:center} .cs-fig--port{max-width:min(100%,400px);margin-inline:auto} .cs-fig__f{box-shadow:var(--sh-2)} .cs-fig__f--shot{background:#fff} .cs-fig figcaption{margin-top:12px} @media(max-width:900px),(hover:none) and (orientation:portrait) and (max-width:1100px){ .cs-sit__txt,.cs-sit__fig{grid-column:1/-1}.cs-sit__txt{padding-right:0}.cs-sit__fig{margin-top:40px}} @media(max-width:900px){.cs-sit__body{font-size:18px}} /* a capture that carries text travels vertically only: the frame is 90% of the capture's height (case_parts.TRAVEL), the picture keeps its full width, so it is never cropped at the sides; still, it shows its top */ .cs-fig__f .dio__p,.uc__f .dio__p{left:0;width:100%;top:-5.5556%;height:111.1111%;object-fit:cover} html:not(.js-motion) .cs-fig__f .dio__p,html:not(.js-motion) .uc__f .dio__p{top:0;height:111.1111%} /* insight: a lit night band (.lp--lit): a serif italic, the filament under the key phrase, and the case's own page behind it, sharp, in a navy duotone at about a third of its strength. The text keeps the left half; the page lights the right 45% and is masked to nothing before the text column (at the panel's foot on a stacked screen, under the text). The body is set brighter than a lead so it holds 4.5:1 where the scroll walks the lamp under it on touch */ .ins{margin-block:var(--sec)} .ins__in{padding:clamp(72px,10vw,150px) 0} .ins__lab{grid-column:1/4} .ins__q{grid-column:4/12;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(30px,3.4vw,52px);line-height:1.2;color:#fff;text-wrap:balance} .ins__key{position:relative;white-space:nowrap} .ins__fil{position:absolute;left:0;right:0;bottom:-.08em;height:1px;background:rgba(255,255,255,.6);transform-origin:left;transform:scaleX(0);transition:transform 900ms var(--ease-open) 700ms} .ins__fil::after{content:"";position:absolute;right:-1px;top:-6px;width:2px;height:12px;background:var(--teal);transform:scaleY(0);transition:transform 400ms var(--ease-open) 1500ms} .ins__q.in .ins__fil,html:not(.js-motion) .ins__fil{transform:scaleX(1)} .ins__q.in .ins__fil::after,html:not(.js-motion) .ins__fil::after{transform:scaleY(1)} .ins__b{grid-column:4/11;margin-top:32px} .lp.ins .ins__b{color:rgba(242,244,248,.88)} .ins--img .ins__lab{grid-column:1/-1} .ins--img .ins__q{grid-column:1/7;margin-top:22px} .ins--img .ins__b{grid-column:1/7} .ins>.ins__ph{--lp-mask:linear-gradient(90deg,transparent 54%,rgba(0,0,0,.5) 68%,#000 88%)} /* a page's photograph alone: the right 44% of the panel, fading in from its left */ .lp.ins>img.ins__ph--crop{left:auto;right:0;width:44%;object-fit:cover;object-position:50% 40%;border-radius:0 var(--r-panel) var(--r-panel) 0; --lp-mask:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 22%,#000 46%)} @media(max-width:900px){ .ins__lab,.ins__q,.ins__b,.ins--img .ins__q,.ins--img .ins__b{grid-column:1/-1} .ins__q{margin-top:18px;font-size:34px}.ins__key{white-space:normal} /* the page is a band along the panel's foot, under the text, never behind it */ .ins--img .ins__in{padding-bottom:calc(min(56vw,420px) + 8px)} .ins>.ins__ph{top:auto;height:min(56vw,420px);border-radius:0 0 var(--r-panel) var(--r-panel); --lp-mask:linear-gradient(0deg,#000 30%,transparent 100%);--lp-mask-sm:linear-gradient(0deg,#000 30%,transparent 100%)} .lp.ins>img.ins__ph--crop{left:0;width:100%;object-fit:cover;object-position:50% 12%;border-radius:0 0 var(--r-panel) var(--r-panel); --lp-mask:linear-gradient(0deg,#000 30%,transparent 100%)} } /* what we built: white cards opening from their centre */ .bt__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .bt__c{height:100%;padding:28px 26px 30px} .bt__c h3{margin-top:14px;font-size:24px;line-height:1.2;font-weight:400} .bt__c p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink-2)} @media(max-width:1000px){.bt__g{grid-template-columns:1fr 1fr}} @media(max-width:640px){.bt__g{grid-template-columns:1fr}} /* the work up close: the frames and the captions never move, each picture travels inside its own frame */ .uc__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px 24px;align-items:start} .uc__i button{display:block;width:100%;cursor:zoom-in} .uc__f .op{--r:var(--r-media);overflow:clip;background:#fff;box-shadow:var(--sh-2)} .uc__f .op img{transition:transform 900ms var(--ease-open)} @media(hover:hover){.uc__i button:hover .op img{transform:scale(1.03)}} .uc__i figcaption{margin-top:12px} /* a row that pairs a tall page with wide ones is justified: each frame takes width in proportion to its ratio (--ur), so every frame in the row has the same height */ .uc__row{grid-column:1/-1;display:flex;gap:24px;align-items:flex-start} .uc__row>.uc__i{flex:var(--ur,1) 1 0;min-width:0} /* tablets: two to a row; the row regroups tall with tall and wide with wide (--spt, set per page by case_parts.up_close), a lone tall page centred on its own row */ @media(max-width:900px){.uc__row{display:contents}.uc__g .uc__i{grid-column:span var(--spt,6)!important} .uc__g .gal__phone .op{max-width:300px;margin-inline:auto}} @media(max-width:560px){.uc__g .uc__i{grid-column:1/-1!important}.uc__g .gal__phone .op{max-width:260px}} /* result: a night panel. The result on the left, the case's strongest figure rolls again on the right, on a rule that draws down; the figure is sized to its column by its own width (--w, in em) */ .res{margin-block:var(--sec)} .res__in{padding:clamp(72px,9vw,136px) 0;align-items:start} .res__lab{grid-column:1/4;padding-top:.8em} .res__b{grid-column:4/9} .res__b h2{color:#fff} .res__rule{margin-top:26px} .res__t{margin-top:28px;font-family:var(--serif);font-size:20px;line-height:1.62;color:var(--on-n-2);max-width:34em} .res__t p+p{margin-top:1em} .res__fig{grid-column:9/13;position:relative;margin:0;padding:6px 0 0 clamp(24px,2.6vw,40px);container-type:inline-size;align-self:stretch} .res__vr{position:absolute;left:0;top:0;bottom:0;width:1px} .res__vr .rule{width:1px;height:100%;transform-origin:center top} html.js-motion .res__vr:not(.in) .rule{transform:scaleY(0)} .res__vr .rule__tick{right:auto;left:-6px;top:auto;bottom:0;width:12px;height:2px} .res__n{font-size:clamp(72px,9vw,150px);font-size:min(clamp(72px,9vw,150px),calc(96cqi / var(--w,2)));line-height:1;color:#fff;white-space:nowrap} .res__n .ct{letter-spacing:-.03em} .res__c{margin-top:18px;max-width:24ch;font-size:15px;color:var(--on-n-2)} @media(max-width:900px){ .res__lab,.res__b,.res__fig{grid-column:1/-1} .res__b{margin-top:18px}.res__t{font-size:18px} .res__fig{margin-top:48px;padding:36px 0 0} .res__vr{left:0;right:0;top:0;bottom:auto;width:auto;height:1px} .res__vr .rule{width:100%;height:1px;transform-origin:left center} html.js-motion .res__vr:not(.in) .rule{transform:scaleX(0)} .res__vr .rule__tick{left:auto;right:0;top:-6px;bottom:auto;width:2px;height:12px} .res__n{font-size:min(96px,calc(92cqi / var(--w,2)))} } /* the before and after feeds pair up at their native width */ .uc__i.fig--native .op{max-width:300px} @media(max-width:560px){.uc__g .uc__i.fig--native{grid-column:span 6!important}} /* ... as one diptych (case_parts.up_close): centred in the row, the two frames the same height at about their pixel size (--uh; never upscaled past it), a rule drawn down between them; on a phone the pair shrinks side by side */ .uc__pair{grid-column:1/-1;display:flex;justify-content:center;align-items:flex-start;--uh:360px;--vsw:clamp(36px,8vw,120px);container-type:inline-size} .uc__pair>.uc__i{flex:0 1 calc(var(--ur,1) * var(--uh));min-width:0} .uc__pair>.uc__i.fig--native .op{max-width:none} /* the rule runs the frames' height: both shrink by one factor, so it is the smaller of --uh and the row's width over the two ratios (--urs, set by up_close) */ .uc__vs{flex:0 0 var(--vsw);position:relative;height:min(var(--uh),calc((100cqi - var(--vsw)) / var(--urs,1.67)))} .uc__vs .rule{position:absolute;left:50%;top:0;bottom:0;width:1px;height:auto;transform-origin:center top} html.js-motion .uc__vs:not(.in) .rule{transform:scaleY(0)} .uc__vs .rule__tick{right:auto;left:-6px;top:auto;bottom:0;width:12px;height:2px} /* ---- 61-home.css ---- */ /* 61 · HOME SECTIONS that are not modules: You know them; the research head. */ .kn3__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start} .kn3__i{transform:translate3d(0,var(--off,0px),0)} .kn3__f{box-shadow:var(--sh-2)} /* one grade for the four photographs (four sources, one series): colour pulled back, blacks lifted, a cool ink wash that meets the mist of the page */ .kn3__f .dio__p{filter:saturate(.72) contrast(.92) brightness(1.03)} .kn3__f::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit; background:linear-gradient(180deg,rgba(26,31,42,.06),rgba(26,31,42,.16))} .kn3__i figcaption{margin-top:18px} .kn3__l{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.3;color:var(--ink);text-wrap:balance} .kn3__i .lab{display:block;margin-top:10px} .kn3__rule{margin-top:clamp(120px,12vw,180px)} @media(max-width:900px){ .kn3__g{grid-template-columns:1fr 1fr;gap:18px 16px} .kn3__i{transform:none} .kn3__i:nth-child(2n){transform:translate3d(0,40px,0)} .kn3__l{font-size:18px} .kn3__rule{margin-top:80px} } /* Research: the lead and its links start level with the eyebrow (the head aligns to the end elsewhere; here the right column is the taller one) */ #research>.wrap>.head{align-items:start} /* ---- 62-sectors.css ---- */ /* 62 · SECTORS. The header panel opens on a title band on its own ground (slate, H1 and lead on the page grid: no word ever lies across a photograph or a seam), then the aperture rail (M14, used as it is) fills the rest of the first screen on a desktop and pins on touch. Its edge is set so the open light's words start on the page grid too. Then six sheets. Each says what the rail did not: two fields, then 'What we build' on night with the proof (the case study's pages in our frame, or the dossiers). The plate (the light's photograph and the name) changes side from one sheet to the next: a triptych on a desktop (plate, words, night), two rows on a tablet, a stack under a sticky band on a phone. fx/sectors.js moves the plate's picture, its reading hairline and the capture inside its window. */ /* ---------------------------------------------------------------- header + rail */ .sx-h{margin-top:12px;--sx-in:12px;--sx-ap:clamp(20px,2.2vw,32px)} .sx-hd{padding:clamp(36px,4.6vw,64px) 0 clamp(24px,2.6vw,36px)} .sx-hd h1{color:#fff;max-width:11em} .sx-hd .kick{margin-bottom:16px} .sx-hd__l{margin-top:20px;max-width:34em} @media(min-width:1000px){ .sx-hd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end} .sx-hd__t{grid-column:1/8} .sx-hd__l{grid-column:8/13;margin:0;padding-bottom:.35em;font-size:clamp(18px,1.45vw,22px)} } /* the rail: its sides are set so the open light's words (its --ap-pad inside the light) start where the page grid starts, on every width; never closer than the panel inset */ .sx-st__r{position:relative;padding:0 max(var(--sx-in),calc((100% - min(var(--max),100% - (var(--gut) - var(--inset)) * 2)) / 2 - var(--sx-ap))) var(--sx-in)} /* the rail keeps its place before its script runs: no column of panels flashes, nothing jumps */ html.js-motion .sx-h .ap:not(.is-live) .ap__rail{visibility:hidden;overflow:clip;animation:sx-failsafe 0s 3.2s forwards} @media(hover:hover){html.js-motion .sx-h .ap:not(.is-live) .ap__rail{height:clamp(460px,80svh,960px)}} /* touch: this page's rail is its index, so it pins a little shorter than the home rail (.5 of a screen per light instead of .6): about 340px of scroll per sector on a phone */ @media(hover:none){html.js-motion .sx-h .ap:not(.is-live) .ap__rail{height:calc(100svh * (.5 * var(--n,6) + .4))}} html.js-motion .sx-h .ap.is-pin{height:calc(100svh * (.5 * var(--n,6) + .4))} @keyframes sx-failsafe{to{visibility:visible;overflow:visible;height:auto}} /* desktop: the panel is the first screen; the band keeps its height, the rail takes the rest */ @media(hover:hover) and (min-width:1000px){ html.js-motion .sx-h--ap{display:flex;flex-direction:column;height:max(calc(100svh - var(--hd) - 12px),620px)} html.js-motion .sx-h--ap>.sx-hd{flex:none;padding:clamp(28px,6svh,64px) 0 clamp(20px,3.4svh,36px)} html.js-motion .sx-h--ap>.sx-st__r{flex:1 1 0;min-height:0;display:flex;flex-direction:column} html.js-motion .sx-st__r>.ap,html.js-motion .sx-st__r .ap__stage{flex:1 1 0;min-height:0;display:flex;flex-direction:column} html.js-motion .sx-h .ap .ap__rail{flex:1 1 0;height:auto;min-height:0} } @media(max-width:699px){ .sx-h{--sx-in:8px} .sx-hd{padding:30px 0 22px} .sx-hd__l{margin-top:16px} } /* touch: the pinned stage keeps a header-high margin above its rail for when it pins; before it pins, that margin would be an empty band under the lead, so the stage tucks under it */ @media(hover:none){html.js-motion .sx-st__r>.ap{margin-top:calc(-1 * var(--hd) - 8px)}} html:not(.js-motion) .sx-st__r{padding-bottom:var(--sx-in)} /* the edition 3 header without the rail (header(), kept importable) */ .sx-h__in{padding:clamp(64px,9vw,140px) 0 clamp(56px,7vw,110px)} .sx-h__in h1{color:#fff;max-width:14em} .sx-h__in .lead{margin-top:24px} .sx-fil{position:relative;margin-top:clamp(48px,6vw,88px)} .sx-fil .rule{position:absolute;left:0;right:0;top:3px} .sx-nodes{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))} .sx-n a{display:inline-flex;flex-direction:column;gap:14px;align-items:flex-start;min-width:44px;min-height:44px;padding-bottom:6px;color:var(--on-n-2);font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.1;transition:color 300ms} .sx-n a:hover{color:#fff} .sx-n .node{color:#fff;transform:scale(0);transition:transform 400ms var(--ease-open) calc(200ms + var(--i) * 110ms)} .sx-fil.in .sx-n .node,html:not(.js-motion) .sx-n .node{transform:none} .sx-n a:hover .node{background:var(--teal)} @media(max-width:700px){.sx-nodes{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}.sx-fil .rule{display:none}} /* ---------------------------------------------------------------- the sheets */ .sx-sheets{display:grid;gap:clamp(16px,2vw,28px);padding:clamp(20px,2.4vw,32px) 0 var(--sec)} .sx-s{scroll-margin-top:calc(var(--hd) + 12px);overflow:clip} .sx-s__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(24px,2.4vw,32px);align-items:stretch;padding:clamp(32px,3.6vw,56px) 0} .sx-s__b{min-width:0} /* the plate: the light carried out of the rail, with the sector's name */ .sx-pl{position:relative;z-index:3;min-width:0} .sx-pl__f{--r:var(--r-media);--pp:clamp(20px,2vw,28px);position:relative;height:100%;min-height:clamp(380px,50svh,540px);overflow:clip;border-radius:var(--r);background:#131926} .sx-pl__img{position:absolute;left:0;top:-6%;width:100%;height:112%;max-width:none;object-fit:cover} html:not(.js-motion) .sx-pl__img{top:0;height:100%} .sx-pl__f::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:62%;pointer-events:none; background:linear-gradient(to top,rgba(8,10,16,.84) 0,rgba(8,10,16,.72) 32%,rgba(8,10,16,.42) 58%,rgba(8,10,16,.12) 82%,rgba(8,10,16,0) 100%)} .sx-pl__t{position:absolute;z-index:2;left:var(--pp);right:var(--pp);bottom:calc(var(--pp) + 22px);color:#fff} .sx-pl__t .slate{color:rgba(242,244,248,.92)} .sx-pl__t h2{margin-top:12px;color:#fff;font-size:clamp(32px,2.9vw,46px);max-width:9em} .sx-pl__bar{position:absolute;z-index:2;left:var(--pp);right:var(--pp);bottom:var(--pp);height:1px;background:rgba(255,255,255,.24)} .sx-pl__bar>i{position:absolute;inset:0;background:var(--teal);transform-origin:0 50%;transform:scaleX(0)} html:not(.js-motion) .sx-pl__bar{display:none} /* a photograph already dark under its title (the bowls on their table): a light scrim, and the picture drawn toward what it shows, so the plate opens on the bowls and not on the black */ .sx-s--dark .sx-pl__f::after{opacity:.5} .sx-s--dark .sx-pl__img{--sx-z0:2.1;--sx-z1:1.5;transform-origin:50% 100%;scale:var(--sx-z1)} /* the words: two fields, a hairline between them that draws and lands its tick */ .sx-duo{position:relative;display:grid;grid-template-columns:minmax(0,1fr)} .sx-q{position:relative;padding:0 0 30px} .sx-q+.sx-q{padding:30px 0 0} .sx-x{position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);transform-origin:left;transition:transform 900ms var(--ease-open) 200ms} .sx-x .rule__tick{transition-delay:900ms} html.js-motion .sx-duo:not(.in) .sx-x{transform:scaleX(0)} html.js-motion .sx-duo:not(.in) .sx-x .rule__tick{transform:scaleY(0)} .sx-q h3{font-size:22px;line-height:1.2;font-weight:400} .sx-q p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:34em} /* the index of dossiers: rows of 52px */ .sx-ix{margin-top:clamp(28px,3vw,40px);border-top:1px solid var(--hair)} .sx-ix__a{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;column-gap:14px;min-height:52px;padding:12px 0;border-bottom:1px solid var(--hair);color:var(--ink);-webkit-tap-highlight-color:transparent} .sx-ix__k{white-space:nowrap} .sx-ix__t{font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.4;text-wrap:pretty} .sx-nw{white-space:nowrap} .sx-nw svg{display:inline-block;width:14px;height:14px;margin-left:8px;vertical-align:-2px;transition:transform 320ms var(--ease-open)} @media(hover:hover){ .sx-ix__a:hover .sx-nw svg{transform:translate3d(4px,0,0)} .sx-ix__a:hover .sx-ix__k{color:var(--ink)} } /* WHAT WE BUILD: a night strip on flat ink (the work is the light), with the proof */ .sx-bd{position:relative;min-width:0} .sx-bd__f{--r:var(--r-media);position:relative;height:100%;display:flex;flex-direction:column;gap:clamp(20px,2vw,28px);padding:clamp(20px,2vw,28px); border-radius:var(--r);background:#0B0E15;color:var(--on-n);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),var(--sh-1)} .sx-bd__t{display:flex;flex-direction:column;flex:1 1 auto;min-width:0} .sx-bd__h{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2vw,30px);line-height:1.12;color:#fff} .sx-bd__p{margin-top:12px;font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.3vw,19px);line-height:1.5;color:rgba(242,244,248,.86);text-wrap:pretty} .sx-bd .sx-ix{margin-top:auto;padding-top:24px;border-top:0} .sx-bd .sx-ix>li:first-child .sx-ix__a{border-top:1px solid rgba(255,255,255,.16)} .sx-ix--n .sx-ix__a{color:#fff;border-bottom-color:rgba(255,255,255,.16)} .sx-ix--n .sx-ix__k{color:rgba(242,244,248,.66)} @media(hover:hover){.sx-ix--n .sx-ix__a:hover .sx-ix__k{color:#fff}} /* the proof: the case study's own pages in our frame (a browser for a site, paper for a guide) */ .sx-bd__m{display:block;flex:none;-webkit-tap-highlight-color:transparent} .sx-fr{--ar:1.8;box-shadow:0 30px 60px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.10)} .sx-fr .fr__bar{height:30px} .sx-fr .fr__addr{height:20px;line-height:20px;font-size:12px} .sx-fr__w{display:block} .sx-fr__w .sx-fr__img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none} .sx-doc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(8px,1vw,12px)} .sx-doc .fr--doc{padding:clamp(6px,.6vw,9px);border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.85)} .sx-doc .fr__win{display:block;border-radius:2px} .sx-doc .sx-fr__img{display:block;width:100%;height:100%;object-fit:cover;object-position:top} @media(hover:hover){ .sx-bd__m .fr,.sx-bd__m .fr--doc{transition:translate 320ms var(--ease-open)} .sx-bd__m:hover .fr,.sx-bd__m:hover .fr--doc{translate:0 -3px} } /* ---- desktop: the triptych, mirrored from one sheet to the next (plate, words, night) */ @media(min-width:1100px){ .sx-s--l .sx-pl{grid-column:1/5;grid-row:1} .sx-s--l .sx-s__b{grid-column:5/9;grid-row:1} .sx-s--l .sx-bd{grid-column:9/13;grid-row:1} .sx-s--r .sx-bd{grid-column:1/5;grid-row:1} .sx-s--r .sx-s__b{grid-column:5/9;grid-row:1} .sx-s--r .sx-pl{grid-column:9/13;grid-row:1} .sx-s__b{padding:6px 4px 0} /* no case study: the plate stands beside two rows, the fields side by side, then the night strip (the answer and its dossiers side by side), so no column runs short */ .sx-s:not(.sx-s--proof) .sx-s__in{grid-template-rows:auto 1fr} .sx-s--l:not(.sx-s--proof) .sx-pl{grid-column:1/5;grid-row:1/3} .sx-s--l:not(.sx-s--proof) .sx-s__b{grid-column:5/13;grid-row:1} .sx-s--l:not(.sx-s--proof) .sx-bd{grid-column:5/13;grid-row:2} .sx-s--r:not(.sx-s--proof) .sx-pl{grid-column:9/13;grid-row:1/3} .sx-s--r:not(.sx-s--proof) .sx-s__b{grid-column:1/9;grid-row:1} .sx-s--r:not(.sx-s--proof) .sx-bd{grid-column:1/9;grid-row:2} .sx-s:not(.sx-s--proof) .sx-s__b{padding:6px 0 0} .sx-s:not(.sx-s--proof) .sx-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px} .sx-s:not(.sx-s--proof) .sx-q,.sx-s:not(.sx-s--proof) .sx-q+.sx-q{padding:0} .sx-s:not(.sx-s--proof) .sx-x{left:-28px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:top} html.js-motion .sx-s:not(.sx-s--proof) .sx-duo:not(.in) .sx-x{transform:scaleY(0)} .sx-s:not(.sx-s--proof) .sx-x .rule__tick{right:-6px;top:auto;bottom:0;width:12px;height:2px} .sx-bd:not(.sx-bd--proof) .sx-bd__t{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,3vw,48px);align-items:start;align-content:start} .sx-bd:not(.sx-bd--proof) .sx-bd__t>.sx-ix{grid-column:2;grid-row:1/3;margin:0;padding:0} } /* ---- tablets: plate and words side by side, the night strip under them */ @media(min-width:900px) and (max-width:1099px){ .sx-s--l .sx-pl{grid-column:1/6;grid-row:1} .sx-s--l .sx-s__b{grid-column:7/13;grid-row:1} .sx-s--r .sx-pl{grid-column:8/13;grid-row:1} .sx-s--r .sx-s__b{grid-column:1/7;grid-row:1} .sx-bd{grid-column:1/-1;grid-row:2} .sx-pl__f{min-height:clamp(360px,34svh,460px)} } @media(min-width:700px) and (max-width:1099px){ .sx-bd__f{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,3.4vw,40px);padding:clamp(20px,2.6vw,28px)} .sx-s--l .sx-bd__m{order:2} .sx-bd:not(.sx-bd--proof) .sx-bd__f{display:block} .sx-bd:not(.sx-bd--proof) .sx-bd__t{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,48px);align-items:start;align-content:start} .sx-bd:not(.sx-bd--proof) .sx-bd__t>.sx-ix{grid-column:2;grid-row:1/3;margin:0;padding:0} .sx-bd--proof .sx-ix{padding-top:20px} .sx-doc{max-width:420px;justify-self:center;width:100%} } /* ---- phones and upright tablets: the plate becomes a band that sticks at the top of its sheet */ @media(max-width:899px){ .sx-s__in{display:block;padding:clamp(12px,2vw,20px) 0 24px} .sx-s .sx-pl{position:sticky;top:calc(var(--hd) + 8px);margin-inline:calc(var(--inset) - var(--gut));background:var(--white);transition:top 420ms var(--ease-swap)} html.hdr-off .sx-s .sx-pl{top:8px} /* white above it (the words never show between it and the header) and a fade under it */ .sx-s .sx-pl::before{content:"";position:absolute;left:-24px;right:-24px;bottom:100%;height:calc(var(--hd) + 24px);background:var(--white)} .sx-s .sx-pl::after{content:"";position:absolute;left:-24px;right:-24px;top:100%;height:26px;pointer-events:none;background:linear-gradient(180deg,var(--white) 18%,rgba(255,255,255,0))} .sx-pl__f{--pp:16px;height:clamp(136px,19svh,220px);min-height:0;--r:14px} .sx-pl__img{top:-15%;height:130%} .sx-pl__f::after{height:100%;background:linear-gradient(to top,rgba(8,10,16,.9) 0,rgba(8,10,16,.84) 34%,rgba(8,10,16,.66) 58%,rgba(8,10,16,.26) 84%,rgba(8,10,16,.06) 100%)} .sx-pl__t{bottom:calc(var(--pp) + 12px)} .sx-pl__t h2{margin-top:6px;font-size:clamp(26px,5.6vw,40px);max-width:none} .sx-s--dark .sx-pl__img{--sx-z0:1;--sx-z1:1;scale:1;object-position:50% 90%!important} .sx-s__b{padding:26px 0 0} .sx-bd{margin-top:24px} .sx-q h3{font-size:19px} } @media(min-width:700px) and (max-width:899px){ .sx-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px} .sx-q,.sx-q+.sx-q{padding:0} .sx-x{left:-20px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:top} html.js-motion .sx-duo:not(.in) .sx-x{transform:scaleY(0)} .sx-x .rule__tick{display:none} .sx-s--proof .sx-ix{margin-top:28px} } @media(max-width:699px){ .sx-q{padding:0 0 22px} .sx-q+.sx-q{padding:22px 0 0} .sx-q h3{font-size:18px} .sx-q p{margin-top:8px;font-size:15.5px;line-height:1.55} .sx-x .rule__tick{display:none} .sx-ix{margin-top:24px} .sx-ix__a{grid-template-columns:78px minmax(0,1fr);column-gap:12px;min-height:48px;padding:10px 0} .sx-bd__f{padding:16px 16px 18px;gap:18px;--r:14px} .sx-bd__h{font-size:24px} .sx-bd__p{margin-top:8px;font-family:var(--sans);font-size:15.5px;line-height:1.55} .sx-bd .sx-ix{padding-top:18px} .sx-fr{--ar:2} .sx-doc{padding:0 12%} } /* ---- 63-pages.css ---- */ /* 63 · PAGE JOINTS. The seams between modules that no module owns: the home rail's foot, the closing panel that carries the two operators, the case system section, the engagement axis on the hub, and the privacy page. */ /* home rail foot: rule to the edge, consent line, the link to all the work */ .ap-after{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end} .ap-after__r{grid-column:1/-1} .ap-after__c{grid-column:1/9;margin-top:18px;font-style:italic} .ap-after__a{grid-column:9/13;justify-self:end;margin-top:10px} @media(max-width:700px){.ap-after__c,.ap-after__a{grid-column:1/-1;justify-self:start}} /* closing panel: the operators' device now lives in 08-chrome.css (.clo--dev) */ /* case: the system section */ .sys .head{margin-bottom:clamp(32px,4vw,56px)} /* hub: the engagement axis */ .tl-sec .head{margin-bottom:clamp(24px,3vw,40px)} /* sectors: the rail sits between the head panel and the sheets */ .sc3-rail{padding-top:clamp(20px,3vw,40px)} /* privacy */ .pv-h{margin-top:var(--inset,12px)} .pv-h__g{min-height:min(68svh,720px);align-items:end;padding-block:clamp(56px,8vw,120px) clamp(40px,5vw,72px)} .pv-h__txt{grid-column:1/8;display:flex;flex-direction:column;gap:22px} .pv-h__txt .d1{max-width:13em} .pv-h__m{color:rgba(255,255,255,.7)} .pv-h__dev{grid-column:9/13;align-self:center;justify-self:end;width:min(100%,360px)} @media(max-width:900px){.pv-h__txt,.pv-h__dev{grid-column:1/-1}.pv-h__dev{justify-self:start;width:min(64vw,260px);order:-1}.pv-h__g{row-gap:32px}} /* ---- 64-privacy.css ---- */ /* 64 · PRIVACY on the article template (M24). The body is the dossier reading sheet: the rail of its fifteen numbered sections on desktop, the relay bar on touch, the margin thread, node markers on its lists, the facts tables as small night cards. The night head keeps a device, a seal that draws once on arrival: three rounded squares trace themselves, the two inner ones turn a quarter into place, then the square node lights. Nothing loops. (63-pages.css still carries the edition 2 privacy rules; this file comes after it and wins where they meet.) */ /* ---------------------------------------------------------------- the seal */ @media(min-width:901px){.pv3 .pv-h__dev{width:min(100%,340px)}} .pv-seal__p{--r:var(--r-panel);position:relative;aspect-ratio:1;display:grid;place-items:center; background:radial-gradient(58% 58% at 50% 50%,rgba(0,194,184,.10),transparent 70%)} .pv-seal__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .pv-seal__r{stroke-width:.7;stroke-dasharray:1 1;stroke-dashoffset:0;transform-box:fill-box;transform-origin:center} .pv-seal__r--1{stroke:rgba(255,255,255,.24);--d:200ms} .pv-seal__r--2{stroke:rgba(0,194,184,.6);--d:420ms} .pv-seal__r--3{stroke:rgba(157,112,214,.85);--d:640ms} /* the node: the site's square, never a circle; it lights once when the seal has closed */ .pv-seal__n{position:relative;width:14px;height:14px;border-radius:3px;background:var(--teal);box-shadow:0 0 0 7px rgba(0,194,184,.14),0 0 30px rgba(0,194,184,.5)} /* keyframes, not transitions: the head lands before the first paint, and an animation still runs from its first frame (an instant landing sets its duration to 0 and shows the end) */ @keyframes pv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes pv-turn-a{from{transform:rotate(45deg)}to{transform:none}} @keyframes pv-turn-b{from{transform:rotate(-45deg)}to{transform:none}} @keyframes pv-light{from{transform:scale(0);box-shadow:0 0 0 0 rgba(0,194,184,0),0 0 0 rgba(0,194,184,0)} 60%{transform:none;box-shadow:0 0 0 2px rgba(0,194,184,.1),0 0 8px rgba(0,194,184,.2)} to{transform:none;box-shadow:0 0 0 7px rgba(0,194,184,.14),0 0 30px rgba(0,194,184,.5)}} html.js-motion .pv-seal:not(.in) .pv-seal__r{stroke-dashoffset:1} html.js-motion .pv-seal:not(.in) .pv-seal__n{transform:scale(0)} html.js-motion .pv-seal.in .pv-seal__r{animation:pv-draw 1400ms var(--ease-open) var(--d) both} html.js-motion .pv-seal.in .pv-seal__r--2{animation:pv-draw 1400ms var(--ease-open) var(--d) both,pv-turn-a 1700ms var(--ease-open) var(--d) both} html.js-motion .pv-seal.in .pv-seal__r--3{animation:pv-draw 1400ms var(--ease-open) var(--d) both,pv-turn-b 1700ms var(--ease-open) var(--d) both} html.js-motion .pv-seal.in .pv-seal__n{animation:pv-light 1100ms var(--ease-open) 1250ms both} .pv-seal__l{position:absolute;left:0;right:0;bottom:5%;text-align:center;color:rgba(255,255,255,.62)} /* the edition 2 lock, if it is ever printed again, does not loop either */ .pv-lock__ring,.pv-lock__n{animation:none!important} .pv-lock__n{border-radius:3px} /* ---------------------------------------------------------------- the reading sheet */ .pv{margin-top:clamp(28px,3vw,40px)} .pv__sheet{padding-bottom:clamp(64px,7vw,104px)} /* rail: the section number before its name */ .pv .rd__ti{font-size:14px} .rd__tn{display:inline-block;min-width:2em;margin-right:4px;color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums} .rd__ti.is-on .rd__tn,.rd__ti:hover .rd__tn{color:var(--ink)} /* each numbered section opens as a chapter: 96px of white, a hairline that draws across the measure and lands its tick, then the eyebrow (node, number, name) and the heading */ .pv .rd__text>.pv-k{margin:96px 0 0;max-width:var(--tw)} .pv .rd__text>.pv-k:nth-child(3){margin-top:64px} .pv-k__r{margin-bottom:20px} .pv-k__l{display:flex;align-items:center;gap:10px;margin:0 0 .9em;color:var(--ink-3)} .pv-k__l .node{background:var(--teal)} .pv-k__l .num{color:var(--ink)} .pv-k+.rd__h2{margin-top:0} .pv-h2{scroll-margin-top:calc(var(--hd) + 100px)} /* the breadcrumb's one short word keeps a 45px target on touch without moving or growing its line */ @media(pointer:coarse){ .pv-h .crumbs a.u{margin-inline:-3px;padding-inline:3px} .pv-h .crumbs a.u::after{left:3px;right:3px} } .pv .prose li a,.pv .prose>p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere} .pv .prose>p>strong:only-child{font-weight:500} /* facts tables as night cards, label over value */ .pv-card{margin:1.5em 0 2em} .pv-card__op{--r:var(--r-media);margin-inline:0;border-radius:var(--r-media);padding:clamp(22px,2.4vw,32px)} .pv-card__l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;margin:0} .pv-card__r{margin:0;min-width:0} .pv-card__r dt{color:var(--on-n-3)} .pv-card__r dd{margin:7px 0 0;font-family:var(--sans);font-size:16px;line-height:1.45;color:#fff;overflow-wrap:anywhere} .pv-card__r dd a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} /* under the relay bar a jump lands the chapter break 20px under the bar (the page's scroll-padding already holds the header, so only the bar and the break are added here); thread.js refines it per tap for the header's state after the jump */ @media(max-width:999px){.pv-h2{scroll-margin-top:calc(36px + var(--pv-k, 49px))}} @media(max-width:700px){.pv-h2{--pv-k:45px}} @media(max-width:700px){ .pv-card__l{grid-template-columns:minmax(0,1fr);gap:16px} .pv .rd__text>.pv-k{margin-top:72px} .pv .rd__text>.pv-k:nth-child(3){margin-top:48px} .pv-k__r{margin-bottom:16px} } /* the night cards keep the text column (the margin holds the seal); the thread runs under them */ .pv-card{position:relative;z-index:1} /* touch and narrow: the words, the eyebrows and their rules take the centred reading column */ @media(max-width:900px),(hover:none) and (max-width:999px){.pv .rd__text>.pv-k{margin-inline:auto;width:100%}} /* ---------------------------------------------------------------- the margin seal */ /* Sticky beside the reading (the margin the dossiers give their sources). The head's three rounded squares again: the outer one draws with the reading from its top centre, clockwise, and reaches each of its fifteen nodes as that section starts; the node being read is teal, the ones read are white; the two inner squares turn a quarter (in opposite ways) at each new section. In the centre the section's number relays; under the seal, the section's key term, quoted from its own text. A flat ink plate with one teal glow, not the panel recipe. */ .pv-mg{display:none} @media(min-width:901px) and (hover:hover),(min-width:1000px){ html.js .pv-mg{display:block;grid-row:1;align-self:start;position:sticky;top:calc(var(--hd) + 32px);z-index:2;min-width:0} } /* the thread runs one gap after the 540px measure: where the text column is no wider than the measure (up to about 1280px) the seal keeps the notes' 34px from it, on wider screens the column's own gap already does */ @media(min-width:1000px){html.js .pv-mg{grid-column:10/13;margin-left:clamp(0px,calc(588px - 45.77vw),34px)}} @media(min-width:901px) and (max-width:999px) and (hover:hover){html.js .pv-mg{grid-column:9/13;margin-left:34px}} .pv-mg__p{--r:var(--r-media);position:relative;padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,26px) clamp(16px,1.6vw,22px);border-radius:var(--r-media); color:var(--on-n);container-type:inline-size; background:radial-gradient(62% 50% at 50% 42%,rgba(0,194,184,.14),transparent 72%),linear-gradient(180deg,var(--night-0),var(--night-2)); box-shadow:var(--sh-2),inset 0 0 0 1px rgba(255,255,255,.07)} .pv-mg__seal{position:relative;aspect-ratio:1} .pv-mg__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .pv-mg__track{stroke:rgba(255,255,255,.13);stroke-width:1} .pv-mg__ring{stroke:rgba(255,255,255,.84);stroke-width:1.4;stroke-dasharray:1 1;stroke-dashoffset:1} .pv-mg__r{stroke-width:.8;transform-box:fill-box;transform-origin:center;transition:transform 1100ms var(--ease-open)} .pv-mg__r--2{stroke:rgba(0,194,184,.5)} .pv-mg__r--3{stroke:rgba(255,255,255,.22)} .pv-mg__n{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:2px;background:var(--night-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42); transition:background 220ms,box-shadow 220ms,transform 420ms var(--ease-open)} .pv-mg__n.is-past{background:rgba(255,255,255,.86);box-shadow:none} .pv-mg__n.is-on{background:var(--teal);box-shadow:0 0 0 4px rgba(0,194,184,.16),0 0 18px rgba(0,194,184,.55);transform:scale(1.4)} .pv-mg__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px} .pv-mg__num{font-family:var(--sans);font-weight:300;font-size:21cqi;line-height:1;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums lining-nums} .pv-mg__num .relay__in{display:flex;align-items:center;justify-content:center;height:1em} .pv-mg__nd{width:12px;height:12px;border-radius:3px;background:var(--teal);box-shadow:0 0 0 6px rgba(0,194,184,.14),0 0 24px rgba(0,194,184,.5)} .pv-mg__of{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--on-n-3)} .pv-mg__key{display:grid;margin-top:clamp(12px,1.4vw,18px);font-size:12.5px;line-height:1.45;letter-spacing:.09em;color:rgba(255,255,255,.8);text-align:center} .pv-mg__key>.relay__i{min-height:calc(2 * 1.45em)} .pv-mg__key .relay__in{display:block;text-wrap:balance} html:not(.js-motion) .pv-mg__r,html:not(.js-motion) .pv-mg__n{transition:none} /* phones: a smaller seal, so the headline and its date sit in the first screen with it */ @media(max-width:700px){.pv3 .pv-h__dev{width:min(50vw,190px)}} /* ---- 65-agency.css ---- */ /* 65 · AGENCY (home, 2026-09-29, reworked after the final review). One lit night panel: the story with its route drawn as a fork, a pinned pairing (one of your clients, lit behind at about 30%, then the lived line of one of us), and the standard as a ledger whose ticks draw as they arrive. Two compositions: side (at least 1100 x 760): the whole stage pins; head on top, story and fork bottom left, the pairing bottom right, the photograph top right. stacked (everything else): the story and the fork flow, then the pairing pins on its own, the photograph a band across the top of it. agency.js reads which one is live from the stage's computed position. */ .ag{--n:3;--run:calc(var(--n) * max(25svh, 210px));--fk-x:30px} /* ---- the head and the story (shared) */ .ag__h{margin:0;max-width:19em} .ag__story{margin:0;max-width:34em;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.58;color:var(--on-n-2);text-wrap:pretty} /* ---- the fork: West Africa, then one arc to each founder */ .ag-fk{position:relative;margin-top:clamp(28px,4vh,40px)} .ag-fk__svg{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none} .ag-fk__a{fill:none;stroke-width:1.25;stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round} html.js-motion .ag-fk__a{transition:stroke-dashoffset 1100ms var(--ease-open) calc(260ms + var(--k) * 180ms)} html.js-motion .ag-fk:not(.in) .ag-fk__a{stroke-dashoffset:1} html:not(.js) .ag-fk__svg{display:none} .ag-fk__n{position:relative;z-index:1;flex:none;color:var(--teal);box-shadow:0 0 0 3px rgba(0,194,184,.14)} html.js-motion .ag-fk__n{transition:transform 420ms var(--ease-open)} html.js-motion .ag-fk:not(.in) .ag-fk__n{transform:scale(0)} html.js-motion .ag-fk__f .ag-fk__n{transition-delay:calc(1000ms + var(--k) * 180ms)} .ag-fk__o,.ag-fk__c{display:flex;align-items:center;gap:12px;margin:0} .ag-fk__o .slate,.ag-fk__c .slate{color:var(--on-n-2)} .ag-fk__fs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);margin:0;padding:0;list-style:none} .ag-fk__f{position:relative;z-index:1;min-width:0} .ag-fk__nm{margin:12px 0 0;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15;color:var(--on-n)} .ag-fk__r{margin:5px 0 0} .ag-fk__l{margin:10px 0 0;max-width:30em;font-size:15px;line-height:1.55;color:var(--on-n-2);text-wrap:pretty} /* wishbone: the origin sits above the midpoint of the two column nodes */ .ag-fk__o{margin-left:calc(25% + var(--gap) / 4)} .ag-fk__fs{margin-top:clamp(44px,6vh,64px)} /* phones: a tree, the origin on top, the two founders under it, each reached by its own arc */ @media (max-width:600px){ .ag-fk__o{margin-left:0} .ag-fk__fs{grid-template-columns:1fr;row-gap:26px;margin-top:22px;padding-left:var(--fk-x)} .ag-fk__nm{font-size:21px} } /* ---- the pairing (shared parts) */ .ag-p__ph{position:absolute;z-index:0;pointer-events:none;overflow:clip;opacity:.3} .ag-p__pi{position:absolute;inset:0;z-index:var(--z,1)} .ag-p__pi img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,50% 50%);filter:saturate(.8)} html.js-motion .ag-p__pi{clip-path:inset(100% 0 0 0);transition:clip-path 900ms var(--ease-open)} html.js-motion .ag-p__pi.is-open{clip-path:inset(0 0 0 0)} html:not(.js-motion) .ag-p__pi:not(:first-child){display:none} .ag-p__tx{position:relative;z-index:1} .ag-p__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;max-width:40em} .ag-p__k,.ag-p__c{margin:0;color:var(--on-n-2)} .ag-p__relay{margin-top:18px} .ag-p__cl{margin:0;max-width:24em;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,1.6vw,25px);line-height:1.32;color:var(--on-n);text-wrap:pretty} .ag-p__us{margin:22px 0 0;color:var(--on-n-2)} .ag-p__lv{margin:10px 0 0;max-width:17em;font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.6vw,40px);line-height:1.12;letter-spacing:-.015em;color:#fff;text-wrap:balance} .ag-p__rail{position:relative;display:flex;justify-content:space-between;max-width:220px;margin:26px 0 0;padding:0;list-style:none} .ag-p__line{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.2)} .ag-p__fill{position:absolute;inset:0;background:var(--teal);transform-origin:left;transform:scaleX(0);transition:transform 600ms var(--ease-open)} .ag-p__s{position:relative;z-index:1;display:flex;color:rgba(255,255,255,.34);transition:color 300ms} .ag-p__s.is-on{color:var(--teal)} .ag-p__end{margin:22px 0 0;max-width:26em;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(19px,1.5vw,23px);line-height:1.35;color:var(--on-n)} html.js-motion .ag-p__end{clip-path:inset(0 0 100% 0);transform:translate3d(0,14px,0);transition:clip-path 700ms var(--ease-open),transform 700ms var(--ease-open)} html.js-motion .ag.is-end .ag-p__end{clip-path:inset(-10% -2% -20% -2%);transform:none} /* ---- stacked (the default): story and fork flow, the pairing pins by itself */ .ag__in{padding-top:clamp(64px,9vw,112px)} .ag__st{margin-top:clamp(22px,3vw,34px)} .ag-p__run{position:relative;height:calc(100svh - 2 * var(--inset) + var(--run));margin-top:clamp(8px,2vw,32px)} .ag-p{position:sticky;top:var(--inset);height:calc(100svh - 2 * var(--inset));display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hd) + 12px) 0 clamp(24px,4vh,48px)} /* the photograph: a band across the top of the pinned box, edge to edge of the panel */ .ag-p__ph{top:0;left:calc(var(--inset) - var(--gut));right:calc(var(--inset) - var(--gut));height:60%; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,rgba(0,0,0,.8) 52%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 16%,rgba(0,0,0,.8) 52%,transparent 100%)} @media (max-width:600px){ .ag__story{font-size:17px;line-height:1.55} .ag-p__cl{font-size:20px} .ag-p__lv{font-size:clamp(24px,7.2vw,30px)} .ag-p__us{margin-top:18px} } /* portrait tablets: the pinned box is tall, the line takes its room */ @media (min-width:700px) and (orientation:portrait){ .ag-p__lv{font-size:clamp(30px,3.4vw,40px)} .ag-p__cl{font-size:clamp(22px,2.7vw,28px)} .ag-p__ph{height:62%} } /* landscape (phones, 1024 x 768 and the like): the photograph on the right half, the words on the left */ @media (orientation:landscape){ .ag-p__ph{top:0;bottom:0;height:auto;left:auto;width:52%; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%),linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0%,#000 55%),linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%); mask-composite:intersect} .ag-p__tx{max-width:min(62%,40em)} } @media (max-height:500px) and (orientation:landscape){ .ag__in{padding-top:48px} .ag-p{padding:calc(var(--hd) + 4px) 0 16px} .ag-p__relay{margin-top:10px} .ag-p__cl{font-size:18px} .ag-p__us{margin-top:10px} .ag-p__lv{margin-top:6px;font-size:clamp(26px,7.4vh,30px)} .ag-p__rail{margin-top:14px} .ag-p__end{margin-top:12px;font-size:18px} } /* ---- side (large screens): the whole stage pins */ @media (min-width:1100px) and (min-height:760px){ .ag__run{height:calc(100svh - 2 * var(--inset) + var(--run))} .ag__stage{position:sticky;top:var(--inset);height:calc(100svh - 2 * var(--inset))} .ag__in{display:grid;height:100%;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;align-content:center;column-gap:var(--gap); row-gap:clamp(28px,5vh,60px);padding-block:calc(var(--hd) + clamp(8px,2vh,24px)) clamp(20px,3vh,36px)} .ag__hd{grid-column:1/10;grid-row:1;position:relative;z-index:1} .ag__st{grid-column:1/6;grid-row:2;align-self:end;margin:0;position:relative;z-index:1} .ag-p__run{grid-column:7/13;grid-row:2;align-self:end;height:auto;margin:0;position:static} .ag-p{position:static;height:auto;display:block;padding:0} .ag-p__tx{max-width:none} /* the photograph, top right of the stage (not the text's corner): at 30%, faded off toward the head on the left and toward the words below */ .ag-p__ph{top:0;right:0;bottom:auto;left:auto;width:52%;height:64%; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%),linear-gradient(180deg,transparent 0%,#000 12%,#000 46%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0%,#000 42%),linear-gradient(180deg,transparent 0%,#000 12%,#000 46%,transparent 100%); mask-composite:intersect} } /* ---- the standard: a ledger on the same panel, each tick drawing as it arrives */ .ag-q{padding-block:clamp(36px,4.4vw,64px) clamp(48px,5.6vw,84px)} .ag-q__rule{margin-bottom:clamp(28px,3vw,44px)} .ag-q__hd{margin-bottom:clamp(22px,2.8vw,40px)} .ag-q__hd .d2{margin:0;max-width:18em} .ag-q__l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows,3),auto);grid-auto-flow:column;column-gap:calc(var(--gap) * 2.5);margin:0;padding:0;list-style:none} .ag-q__i{display:grid;grid-template-columns:20px 26px minmax(0,1fr);column-gap:14px;align-items:start;padding:18px 0 20px;border-top:1px solid var(--hair-n)} .ag-q__tk{width:20px;height:20px;margin-top:1px;overflow:visible} .ag-q__bx{fill:none;stroke:rgba(255,255,255,.26)} .ag-q__ck{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0} .ag-q__n{margin-top:3px;color:var(--on-n-3)} .ag-q__t{margin:0;font-size:16px;line-height:1.55;color:var(--on-n-2);text-wrap:pretty} .ag-q__t strong{font-weight:600;color:var(--on-n)} html.js-motion .ag-q__ck{transition:stroke-dashoffset 620ms var(--ease-open) calc(var(--dl,0ms) + 380ms)} html.js-motion .ag-q__i:not(.in) .ag-q__ck{stroke-dashoffset:1} html.js-motion .ag-q__t{transition:clip-path 760ms var(--ease-open) var(--dl,0ms),transform 760ms var(--ease-open) var(--dl,0ms)} html.js-motion .ag-q__i:not(.in) .ag-q__t{clip-path:inset(0 0 100% 0);transform:translate3d(0,16px,0)} @media (max-width:760px){ .ag-q__l{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row} .ag-q__i{padding:13px 0 14px} .ag-q__t{font-size:15.5px;line-height:1.5} } /* phones: the order is the list's, the tick carries the line */ @media (max-width:600px){ .ag-q__i{grid-template-columns:20px minmax(0,1fr)} .ag-q__n{display:none} } /* ---- no script or reduced motion: every end state, the pairs as a list */ html:not(.js-motion) .ag__run,html:not(.js-motion) .ag-p__run{height:auto} html:not(.js-motion) .ag__stage,html:not(.js-motion) .ag-p{position:relative;top:auto;height:auto} /* stacked: the first client's photograph is a band above the list */ html:not(.js-motion) .ag-p{padding:min(40vw,240px) 0 clamp(24px,5vw,48px)} html:not(.js-motion) .ag-p__ph{height:min(58vw,340px)} html:not(.js-motion) .ag-p__relay{display:block;margin-top:6px} html:not(.js-motion) .ag-p__relay .relay__i{display:block!important;visibility:visible;margin:0;padding:22px 0 24px;border-top:1px solid var(--hair-n)} html:not(.js-motion) .ag-p__relay .relay__i:first-child{border-top:0;padding-top:12px} html:not(.js-motion) .ag-p__relay .relay__in{transform:none} html:not(.js-motion) .ag-p__lv{font-size:clamp(24px,3vw,32px)} html:not(.js-motion) .ag-p__c,html:not(.js-motion) .ag-p__rail{display:none} @media (min-width:1100px) and (min-height:760px){ html:not(.js-motion) .ag__in{height:auto} /* side: the photograph keeps the stage's top right corner, the list runs from the top */ html:not(.js-motion) .ag-p{position:static;padding:0} html:not(.js-motion) .ag-p__ph{height:64%;max-height:760px} html:not(.js-motion) .ag__st,html:not(.js-motion) .ag-p__run{align-self:start} } @media (orientation:landscape) and (max-width:1099px),(orientation:landscape) and (max-height:759px){ html:not(.js-motion) .ag-p{padding-top:28px} html:not(.js-motion) .ag-p__ph{height:auto} } /* ---- 90-lightbox.css ---- */ /* 90 · THE VIEWER. Opaque night veil (two texts never share pixels), media capped in svh, caption and counter always on screen. On a phone held upright a wide capture opens at a height where its text reads (about 70svh) and pans sideways under the finger, from its left edge, with a one-line hint. Controls keep clear of the notch and the rounded corners. */ /* the one grid cell is the padded box itself (minmax(0,1fr) both ways): an auto track would grow to the full-bleed pan strip in WebKit and push the column 12px right, so the caption and the hint sat off centre and a capture's end was unreadable */ .lbx{--lbx-pad:clamp(12px,3vw,48px);position:fixed;inset:0;z-index:1200;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;visibility:hidden;pointer-events:none; padding:max(var(--lbx-pad),env(safe-area-inset-top,0px)) max(var(--lbx-pad),env(safe-area-inset-right,0px)) max(var(--lbx-pad),env(safe-area-inset-bottom,0px)) max(var(--lbx-pad),env(safe-area-inset-left,0px))} .lbx.is-open{visibility:visible;pointer-events:auto} .lbx__veil{position:absolute;inset:0;opacity:0;transition:opacity 340ms ease; background:radial-gradient(80% 60% at 20% 110%,rgba(107,63,160,.22),transparent 60%),radial-gradient(60% 50% at 90% 110%,rgba(0,194,184,.14),transparent 60%),linear-gradient(170deg,#121827,#080A11)} .lbx.is-open .lbx__veil{opacity:1} .lbx__box{position:relative;z-index:2;max-width:min(1200px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px; opacity:0;transform:translate3d(0,14px,0);transition:transform 600ms var(--ease-open) 300ms,opacity 300ms ease 300ms} .lbx.is-open .lbx__box{opacity:1;transform:none} .lbx__media{display:block;max-width:100%} .lbx__media video,.lbx__media img{display:block;max-width:100%;max-height:calc(100svh - 2 * var(--lbx-pad) - 110px);width:auto;height:auto;border-radius:var(--r-frame);background:#000;box-shadow:var(--sh-panel)} .lbx__cap{max-width:62ch;max-height:6.4em;overflow:auto;text-align:center;font-size:14px;line-height:1.5;color:var(--on-n-2)} .lbx__cap b{color:#fff;font-weight:600} .lbx__count{font-size:12px;letter-spacing:.08em;color:var(--on-n-3);font-variant-numeric:tabular-nums} .lbx__x{position:absolute;z-index:3;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));height:44px;padding:0 16px;border-radius:var(--r-ctl);background:rgba(255,255,255,.08);color:#fff;font-size:14px;font-weight:600} .lbx__nav{position:absolute;z-index:3;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:var(--r-ctl);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center} .lbx__nav svg{width:18px;height:18px} .lbx__nav--p{left:calc(10px + env(safe-area-inset-left,0px))}.lbx__nav--n{right:calc(10px + env(safe-area-inset-right,0px))} .lbx__nav[hidden]{display:none} .lbx__post{max-width:620px;max-height:calc(100svh - 150px);overflow:auto;background:#fff;color:var(--ink);padding:30px 32px;border-radius:var(--r-media);text-align:left;font-size:16px;line-height:1.65;white-space:pre-line} .lbx__post header{display:block;margin-bottom:16px;white-space:normal} .lbx__post header b{display:block;font-family:var(--serif);font-size:22px;font-weight:400} .lbx__post header small{display:block;font-size:13px;color:var(--ink-3)} body.lbx-open{overflow:hidden} @media(max-width:1100px){.lbx{padding-top:max(64px,calc(env(safe-area-inset-top,0px) + 58px))}.lbx__media video,.lbx__media img{max-height:calc(100svh - 64px - 12px - 110px)}} /* a wide capture on an upright phone: full-bleed strip, the picture at a reading height, dragged sideways; the hint leaves once the reader has moved it */ .lbx__media--pan{display:flex;width:100vw;max-width:none;margin-inline:calc(50% - 50vw);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pinch-zoom; padding-inline:max(12px,env(safe-area-inset-left,0px)) 0} .lbx__media--pan::-webkit-scrollbar{display:none} .lbx__media--pan img{flex:none;width:auto;max-width:none;height:min(70svh,calc(100svh - 230px),var(--nat-h,9999px));max-height:none} /* the far margin is a real item: WebKit leaves a scroller's end padding out of its scroll width, so the capture's last pixels and its corner could never be reached */ .lbx__media--pan::after{content:"";flex:none;width:max(12px,env(safe-area-inset-right,0px))} .lbx__hint{display:none;align-items:center;gap:10px;color:var(--on-n-2)} .lbx__hint i{position:relative;display:block;width:28px;height:1px;background:rgba(255,255,255,.4)} .lbx__hint i::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-radius:2px;background:var(--teal)} .lbx.is-pan .lbx__hint{display:inline-flex} .lbx.is-pan.is-panned .lbx__hint{visibility:hidden}