/* ------------------------------------------------------------------ psychosis.au — stylesheet Layout: a reading column (about 66 characters) for prose, widening to an 1100px frame for grids, tools and diagrams. Theme: a daytime sky (light blue ground, white cloud surfaces, deep blue bands with drifting clouds) and, in dark mode, open space (near- black blue with a field of stars, no planets). The Safety Net Card is a printed object and stays light in both. Every icon is an inline SVG symbol drawn with currentColor. ------------------------------------------------------------------ */ :root { /* Textures (SVG data URIs, generated by build notes in README) */ --clouds-body: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='700' viewBox='0 0 1600 700'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='%23fff' opacity='0.85' filter='url%28%23b%29'%3E%3Cellipse cx='227' cy='176' rx='73' ry='40'/%3E%3Cellipse cx='303' cy='147' rx='85' ry='42'/%3E%3Cellipse cx='365' cy='156' rx='86' ry='50'/%3E%3Cellipse cx='443' cy='174' rx='81' ry='54'/%3E%3Cellipse cx='713' cy='118' rx='57' ry='31'/%3E%3Cellipse cx='757' cy='101' rx='68' ry='34'/%3E%3Cellipse cx='810' cy='91' rx='63' ry='37'/%3E%3Cellipse cx='868' cy='88' rx='63' ry='34'/%3E%3Cellipse cx='923' cy='98' rx='57' ry='44'/%3E%3Cellipse cx='982' cy='113' rx='62' ry='46'/%3E%3Cellipse cx='1105' cy='227' rx='109' ry='57'/%3E%3Cellipse cx='1206' cy='204' rx='114' ry='57'/%3E%3Cellipse cx='1264' cy='208' rx='116' ry='60'/%3E%3Cellipse cx='1347' cy='208' rx='79' ry='47'/%3E%3Cellipse cx='1433' cy='228' rx='85' ry='54'/%3E%3Cellipse cx='486' cy='475' rx='51' ry='36'/%3E%3Cellipse cx='515' cy='448' rx='73' ry='32'/%3E%3Cellipse cx='582' cy='454' rx='58' ry='38'/%3E%3Cellipse cx='628' cy='456' rx='67' ry='29'/%3E%3Cellipse cx='665' cy='445' rx='55' ry='39'/%3E%3Cellipse cx='724' cy='468' rx='59' ry='38'/%3E%3Cellipse cx='963' cy='525' rx='83' ry='51'/%3E%3Cellipse cx='1012' cy='516' rx='93' ry='50'/%3E%3Cellipse cx='1097' cy='516' rx='82' ry='44'/%3E%3Cellipse cx='1151' cy='501' rx='94' ry='44'/%3E%3Cellipse cx='1207' cy='530' rx='80' ry='41'/%3E%3C/g%3E%3C/svg%3E"); --clouds-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='700' viewBox='0 0 1600 700'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='16'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='%23fff' opacity='0.22' filter='url%28%23b%29'%3E%3Cellipse cx='213' cy='167' rx='77' ry='54'/%3E%3Cellipse cx='306' cy='143' rx='78' ry='39'/%3E%3Cellipse cx='370' cy='158' rx='96' ry='54'/%3E%3Cellipse cx='446' cy='170' rx='85' ry='57'/%3E%3Cellipse cx='693' cy='101' rx='57' ry='38'/%3E%3Cellipse cx='751' cy='99' rx='85' ry='39'/%3E%3Cellipse cx='814' cy='96' rx='57' ry='36'/%3E%3Cellipse cx='857' cy='101' rx='88' ry='41'/%3E%3Cellipse cx='914' cy='102' rx='81' ry='42'/%3E%3Cellipse cx='992' cy='115' rx='81' ry='36'/%3E%3Cellipse cx='1106' cy='235' rx='108' ry='52'/%3E%3Cellipse cx='1194' cy='206' rx='118' ry='53'/%3E%3Cellipse cx='1280' cy='203' rx='116' ry='62'/%3E%3Cellipse cx='1346' cy='207' rx='117' ry='58'/%3E%3Cellipse cx='1424' cy='224' rx='91' ry='57'/%3E%3Cellipse cx='538' cy='472' rx='71' ry='33'/%3E%3Cellipse cx='570' cy='461' rx='72' ry='34'/%3E%3Cellipse cx='625' cy='457' rx='60' ry='37'/%3E%3Cellipse cx='673' cy='467' rx='68' ry='39'/%3E%3Cellipse cx='971' cy='538' rx='70' ry='48'/%3E%3Cellipse cx='1014' cy='513' rx='73' ry='38'/%3E%3Cellipse cx='1101' cy='502' rx='82' ry='50'/%3E%3Cellipse cx='1145' cy='504' rx='95' ry='42'/%3E%3Cellipse cx='1223' cy='521' rx='76' ry='37'/%3E%3C/g%3E%3C/svg%3E"); --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0.32'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='579' cy='365' r='7' fill='url%28%23g%29'/%3E%3Ccircle cx='334' cy='334' r='0.8' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='792' cy='380' r='0.8' fill='%23fff3d9' opacity='0.44'/%3E%3Ccircle cx='189' cy='3' r='1.3' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='55' cy='635' r='1.1' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='34' cy='798' r='1.5' fill='%23dbe9ff' opacity='0.58'/%3E%3Ccircle cx='765' cy='432' r='0.7' fill='%23fff' opacity='0.59'/%3E%3Ccircle cx='19' cy='593' r='1.0' fill='%23fff' opacity='0.42'/%3E%3Ccircle cx='363' cy='442' r='0.7' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='150' cy='30' r='0.8' fill='%23fff' opacity='0.41'/%3E%3Ccircle cx='167' cy='775' r='0.8' fill='%23fff3d9' opacity='0.70'/%3E%3Ccircle cx='98' cy='381' r='0.7' fill='%23dbe9ff' opacity='0.45'/%3E%3Ccircle cx='710' cy='328' r='0.8' fill='%23fff' opacity='0.69'/%3E%3Ccircle cx='309' cy='796' r='1.3' fill='%23dbe9ff' opacity='0.47'/%3E%3Ccircle cx='127' cy='573' r='0.7' fill='%23dbe9ff' opacity='0.39'/%3E%3Ccircle cx='440' cy='599' r='0.7' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='445' cy='498' r='1.0' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='279' cy='742' r='1.5' fill='%23fff' opacity='0.62'/%3E%3Ccircle cx='197' cy='135' r='1.0' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='128' cy='29' r='1.0' fill='%23fff3d9' opacity='0.67'/%3E%3Ccircle cx='326' cy='791' r='0.8' fill='%23fff3d9' opacity='0.39'/%3E%3Ccircle cx='393' cy='300' r='1.0' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='130' cy='55' r='0.8' fill='%23dbe9ff' opacity='0.63'/%3E%3Ccircle cx='46' cy='230' r='1.1' fill='%23fff' opacity='0.59'/%3E%3Ccircle cx='336' cy='137' r='0.7' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='719' cy='787' r='1.5' fill='%23dbe9ff' opacity='0.40'/%3E%3Ccircle cx='767' cy='421' r='0.8' fill='%23dbe9ff' opacity='0.39'/%3E%3Ccircle cx='720' cy='293' r='0.8' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='618' cy='388' r='1.3' fill='%23dbe9ff' opacity='0.48'/%3E%3Ccircle cx='471' cy='111' r='1.3' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='763' cy='19' r='0.8' fill='%23fff3d9' opacity='0.49'/%3E%3Ccircle cx='681' cy='467' r='0.8' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='107' cy='76' r='0.8' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='357' cy='113' r='1.5' fill='%23fff' opacity='0.59'/%3E%3Ccircle cx='243' cy='754' r='0.8' fill='%23dbe9ff' opacity='0.54'/%3E%3Ccircle cx='497' cy='145' r='0.8' fill='%23dbe9ff' opacity='0.45'/%3E%3Ccircle cx='440' cy='37' r='1.5' fill='%23fff3d9' opacity='0.66'/%3E%3Ccircle cx='633' cy='6' r='0.7' fill='%23dbe9ff' opacity='0.66'/%3E%3Ccircle cx='611' cy='140' r='1.1' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='484' cy='597' r='1.5' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='581' cy='792' r='1.0' fill='%23fff3d9' opacity='0.64'/%3E%3Ccircle cx='759' cy='79' r='1.1' fill='%23fff3d9' opacity='0.40'/%3E%3Ccircle cx='588' cy='774' r='1.3' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='421' cy='449' r='1.3' fill='%23fff' opacity='0.58'/%3E%3Ccircle cx='781' cy='284' r='1.0' fill='%23fff' opacity='0.59'/%3E%3Ccircle cx='86' cy='61' r='1.1' fill='%23fff' opacity='0.58'/%3E%3Ccircle cx='404' cy='758' r='1.1' fill='%23dbe9ff' opacity='0.53'/%3E%3Ccircle cx='312' cy='321' r='1.3' fill='%23fff' opacity='0.39'/%3E%3Ccircle cx='347' cy='198' r='1.5' fill='%23fff3d9' opacity='0.64'/%3E%3C/svg%3E"); --stars-dense: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0.32'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='330' cy='764' r='10' fill='url%28%23g%29'/%3E%3Ccircle cx='613' cy='75' r='9' fill='url%28%23g%29'/%3E%3Ccircle cx='776' cy='211' r='8' fill='url%28%23g%29'/%3E%3Ccircle cx='194' cy='490' r='0.8' fill='%23dbe9ff' opacity='0.44'/%3E%3Ccircle cx='592' cy='703' r='0.7' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='256' cy='481' r='0.7' fill='%23fff3d9' opacity='0.60'/%3E%3Ccircle cx='566' cy='39' r='1.1' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='337' cy='144' r='1.0' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='619' cy='769' r='1.6' fill='%23fff3d9' opacity='0.40'/%3E%3Ccircle cx='490' cy='207' r='1.0' fill='%23dbe9ff' opacity='0.48'/%3E%3Ccircle cx='697' cy='765' r='1.9' fill='%23fff3d9' opacity='0.43'/%3E%3Ccircle cx='216' cy='554' r='1.9' fill='%23dbe9ff' opacity='0.40'/%3E%3Ccircle cx='721' cy='336' r='1.3' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='706' cy='318' r='1.3' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='318' cy='20' r='1.0' fill='%23fff3d9' opacity='0.57'/%3E%3Ccircle cx='422' cy='606' r='1.3' fill='%23fff3d9' opacity='0.52'/%3E%3Ccircle cx='797' cy='285' r='0.7' fill='%23dbe9ff' opacity='0.63'/%3E%3Ccircle cx='744' cy='762' r='0.7' fill='%23fff3d9' opacity='0.46'/%3E%3Ccircle cx='77' cy='716' r='0.7' fill='%23fff' opacity='0.39'/%3E%3Ccircle cx='279' cy='263' r='1.1' fill='%23fff' opacity='0.58'/%3E%3Ccircle cx='30' cy='428' r='1.1' fill='%23fff' opacity='0.59'/%3E%3Ccircle cx='42' cy='329' r='0.7' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='35' cy='96' r='1.1' fill='%23fff3d9' opacity='0.43'/%3E%3Ccircle cx='793' cy='595' r='1.0' fill='%23dbe9ff' opacity='0.53'/%3E%3Ccircle cx='515' cy='283' r='0.7' fill='%23fff' opacity='0.64'/%3E%3Ccircle cx='207' cy='96' r='1.3' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='51' cy='78' r='1.6' fill='%23fff3d9' opacity='0.52'/%3E%3Ccircle cx='142' cy='61' r='1.0' fill='%23fff' opacity='0.50'/%3E%3Ccircle cx='795' cy='428' r='0.7' fill='%23dbe9ff' opacity='0.66'/%3E%3Ccircle cx='19' cy='602' r='0.8' fill='%23fff3d9' opacity='0.53'/%3E%3Ccircle cx='322' cy='94' r='0.8' fill='%23fff3d9' opacity='0.65'/%3E%3Ccircle cx='190' cy='673' r='0.7' fill='%23fff3d9' opacity='0.40'/%3E%3Ccircle cx='603' cy='508' r='0.8' fill='%23fff' opacity='0.62'/%3E%3Ccircle cx='336' cy='203' r='1.6' fill='%23fff' opacity='0.42'/%3E%3Ccircle cx='745' cy='453' r='0.7' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='255' cy='24' r='1.6' fill='%23fff' opacity='0.58'/%3E%3Ccircle cx='678' cy='560' r='0.7' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='172' cy='649' r='0.7' fill='%23dbe9ff' opacity='0.65'/%3E%3Ccircle cx='354' cy='344' r='0.8' fill='%23fff' opacity='0.49'/%3E%3Ccircle cx='777' cy='551' r='1.9' fill='%23dbe9ff' opacity='0.58'/%3E%3Ccircle cx='140' cy='642' r='0.7' fill='%23fff3d9' opacity='0.56'/%3E%3Ccircle cx='223' cy='676' r='1.0' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='420' cy='278' r='1.0' fill='%23fff3d9' opacity='0.54'/%3E%3Ccircle cx='654' cy='779' r='1.1' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='699' cy='609' r='1.0' fill='%23dbe9ff' opacity='0.59'/%3E%3Ccircle cx='156' cy='129' r='1.3' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='189' cy='414' r='1.0' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='692' cy='479' r='1.0' fill='%23fff3d9' opacity='0.49'/%3E%3Ccircle cx='17' cy='759' r='1.9' fill='%23fff' opacity='0.64'/%3E%3Ccircle cx='52' cy='456' r='1.9' fill='%23fff' opacity='0.47'/%3E%3Ccircle cx='751' cy='727' r='1.0' fill='%23dbe9ff' opacity='0.57'/%3E%3Ccircle cx='592' cy='266' r='1.3' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='410' cy='762' r='1.9' fill='%23fff' opacity='0.39'/%3E%3Ccircle cx='46' cy='741' r='0.8' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='90' cy='726' r='1.0' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='381' cy='332' r='0.8' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='245' cy='433' r='1.1' fill='%23fff3d9' opacity='0.69'/%3E%3Ccircle cx='723' cy='371' r='1.0' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='74' cy='658' r='0.8' fill='%23fff' opacity='0.56'/%3E%3Ccircle cx='39' cy='796' r='1.1' fill='%23fff' opacity='0.42'/%3E%3Ccircle cx='261' cy='133' r='1.1' fill='%23dbe9ff' opacity='0.41'/%3E%3Ccircle cx='165' cy='106' r='1.0' fill='%23fff3d9' opacity='0.67'/%3E%3Ccircle cx='505' cy='39' r='1.1' fill='%23dbe9ff' opacity='0.64'/%3E%3Ccircle cx='352' cy='167' r='1.6' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='124' cy='363' r='0.7' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='633' cy='214' r='1.1' fill='%23fff' opacity='0.39'/%3E%3Ccircle cx='468' cy='243' r='0.8' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='746' cy='270' r='0.8' fill='%23dbe9ff' opacity='0.53'/%3E%3Ccircle cx='140' cy='325' r='1.6' fill='%23dbe9ff' opacity='0.56'/%3E%3Ccircle cx='340' cy='622' r='1.9' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='515' cy='216' r='0.8' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='742' cy='489' r='1.3' fill='%23fff' opacity='0.50'/%3E%3Ccircle cx='646' cy='786' r='1.9' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='279' cy='299' r='0.8' fill='%23fff' opacity='0.40'/%3E%3Ccircle cx='403' cy='521' r='1.3' fill='%23fff' opacity='0.42'/%3E%3Ccircle cx='407' cy='734' r='1.6' fill='%23dbe9ff' opacity='0.43'/%3E%3Ccircle cx='404' cy='593' r='1.0' fill='%23fff' opacity='0.39'/%3E%3Ccircle cx='797' cy='268' r='1.1' fill='%23dbe9ff' opacity='0.68'/%3E%3Ccircle cx='478' cy='565' r='1.3' fill='%23fff' opacity='0.50'/%3E%3Ccircle cx='136' cy='572' r='1.1' fill='%23fff3d9' opacity='0.60'/%3E%3Ccircle cx='355' cy='361' r='1.6' fill='%23fff3d9' opacity='0.49'/%3E%3Ccircle cx='144' cy='687' r='1.9' fill='%23fff' opacity='0.58'/%3E%3Ccircle cx='56' cy='661' r='1.0' fill='%23fff3d9' opacity='0.69'/%3E%3C/svg%3E"); /* Sky (page ground) */ --paper: #EAF3FB; --paper-raised: #FFFFFF; --paper-tint: rgba(255, 255, 255, 0.55); --ink: #15283E; --ink-muted: #51677F; --line: #C5DAEC; /* Accent: deep sky blue */ --accent: #1A66AE; --accent-ink: #FFFFFF; --accent-soft: #DCEBF8; /* Urgent: used only for 000 and red-flag notices */ --urgent: #B8402F; --urgent-soft: #FBE4DF; --urgent-ink: #FFFFFF; /* Bands (header, hero, page heads, statement, footer): deeper sky */ --night: #1D528A; --night-raised: #27649F; --night-fg: #F5FAFF; --night-muted: #BCD6EE; --night-line: #3C78B2; --night-accent: #BFE2FF; /* Layered backgrounds */ --bg-image: var(--clouds-body) center top / 1600px 700px repeat, linear-gradient(180deg, #CFE5F8 0%, #E6F1FA 520px, #EDF5FC 100%); --band-image: var(--clouds-band) center / 1600px 700px repeat, linear-gradient(180deg, #1A4C82 0%, #2566A3 100%); --shadow-soft: 0 12px 30px -18px rgba(26, 82, 138, 0.35); /* The printed card */ --card-bg: #FBFBF8; --card-fg: #1A2129; --card-muted: #5A6570; --card-line: #DADFD9; --card-alert: #A8372B; --card-accent: #1A66AE; /* Type */ --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-body: "Atkinson Hyperlegible", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; --measure: 66ch; --frame: 1100px; --gutter: clamp(16px, 4vw, 40px); --radius: 6px; --radius-lg: 12px; color-scheme: light; } /* Space (dark): chosen with the header switch */ :root[data-theme="dark"] { --paper: #060A14; --paper-raised: #0F1627; --paper-tint: rgba(255, 255, 255, 0.035); --ink: #E7EDF6; --ink-muted: #9AA9BF; --line: #223049; --accent: #6FC2FF; --accent-ink: #06101C; --accent-soft: #163C62; --urgent: #E58B7C; --urgent-soft: #3A1C19; --urgent-ink: #0F1620; --night: #02050C; --night-raised: #0B1222; --night-fg: #EEF3FA; --night-muted: #9DAEC6; --night-line: #1E2B44; --night-accent: #8BD0FF; --bg-image: var(--stars) center top / 800px 800px repeat, linear-gradient(180deg, #080D1A 0%, #060A14 100%); --band-image: var(--stars-dense) center / 800px 800px repeat, linear-gradient(180deg, #03060F 0%, #060B18 100%); --shadow-soft: 0 12px 30px -18px rgba(0, 0, 0, 0.8); --card-bg: #EEF0EA; color-scheme: dark; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; } html.text-large { font-size: 118%; } body { margin: 0; background: var(--bg-image), var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; } @media (min-width: 48em) { body { font-size: 1.125rem; } } img, svg { max-width: 100%; display: block; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.005em; } h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; } h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); } h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); } h4 { font-size: 1.15rem; } p, ul, ol, dl, blockquote, figure { margin: 0; } dd { margin: 0; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } button { font: inherit; color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- Utilities ---------- */ .container { width: 100%; max-width: var(--frame); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 56rem; } .prose { max-width: var(--measure); display: flex; flex-direction: column; gap: 1rem; } .prose > ul, .prose > ol { padding-left: 1.3rem; display: grid; gap: 0.4rem; } .prose h3 { margin-top: 0.75rem; } .prose .muted, .muted { color: var(--ink-muted); } .small { font-size: 0.9em; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .eyebrow { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 0.5rem; } .eyebrow--night { color: var(--night-accent); } .eyebrow .icon { width: 1rem; height: 1rem; } .icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.3em; display: inline-block; } .icon--lg { width: 1.9rem; height: 1.9rem; stroke-width: 1.5; } .icon--xl { width: 2.6rem; height: 2.6rem; stroke-width: 1.3; } .icon--accent { color: var(--accent); } .icon--urgent { color: var(--urgent); } .skip-link { position: absolute; left: 1rem; top: -100%; z-index: 100; padding: 0.5rem 0.75rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); } .skip-link:focus { top: 1rem; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.9rem; padding: 0.6rem 1.25rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } .button .icon { width: 1.15em; height: 1.15em; } .button--small { min-height: 2.3rem; padding: 0.3rem 0.9rem; font-size: 0.9rem; } .button--light { background: var(--night-fg); color: var(--night); border-color: var(--night-fg); } .button--light:hover { background: var(--night-accent); border-color: var(--night-accent); } .button--ghost { background: transparent; color: var(--night-fg); border-color: var(--night-line); } .button--ghost:hover { border-color: var(--night-fg); } .button--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .button--accent:hover { filter: brightness(1.08); } .button--outline { background: transparent; color: var(--ink); border-color: var(--line); } .button--outline:hover { border-color: var(--ink); } .button--urgent { background: var(--urgent); color: var(--urgent-ink); border-color: var(--urgent); } .button--urgent:hover { filter: brightness(1.08); } .button[disabled] { opacity: 0.55; cursor: not-allowed; } .num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; } /* ---------- Help strip (collapsible on phones) ---------- */ .help-strip { background: var(--accent-soft); color: var(--ink); border-bottom: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.5; } .help-strip summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.6rem; max-width: var(--frame); margin-inline: auto; padding: 0.6rem var(--gutter); } .help-strip summary::-webkit-details-marker { display: none; } .help-strip summary .icon { color: var(--accent); flex: 0 0 auto; } .help-strip__chev { transition: transform 150ms ease; } .help-strip[open] .help-strip__chev { transform: rotate(180deg); } .help-strip a { color: inherit; text-decoration: none; } .help-strip strong a { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .help-strip a:hover { text-decoration: underline; } .help-strip__more { text-decoration: underline !important; color: var(--accent) !important; margin-left: 0.25rem; white-space: nowrap; } .help-strip__body { max-width: var(--frame); margin-inline: auto; padding: 0 var(--gutter) 0.8rem; display: grid; gap: 0.3rem; } .help-strip__body p { padding-left: calc(1.25em + 0.6rem); } .help-strip__short { font-weight: 700; } @media (max-width: 47.99em) { .help-strip__long { display: none; } .help-strip summary { justify-content: flex-start; } } @media (min-width: 48em) { .help-strip__short, .help-strip__chev, .help-strip__body { display: none !important; } .help-strip summary { pointer-events: none; } .help-strip summary a { pointer-events: auto; } } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--band-image), var(--night); color: var(--night-fg); border-bottom: 1px solid var(--night-line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; flex-wrap: wrap; } .wordmark { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.01em; color: var(--night-fg); text-decoration: none; line-height: 1; } .wordmark em { font-style: normal; color: var(--night-accent); } .wordmark__mark { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--night-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--night-accent); } .site-header__tools { display: flex; align-items: center; gap: 0.6rem; } .site-header__cta { display: none; } .text-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; background: transparent; color: var(--night-fg); border: 1.5px solid var(--night-line); border-radius: 999px; cursor: pointer; } .text-toggle .icon { width: 1.2rem; height: 1.2rem; } .text-toggle[aria-pressed="true"] { background: var(--night-accent); color: var(--night); border-color: var(--night-accent); } .site-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.25rem 1.2rem; flex-wrap: wrap; } .site-nav a { color: var(--night-fg); text-decoration: none; font-size: 0.92rem; padding: 0.35rem 0; border-bottom: 1.5px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; } .site-nav a .icon { width: 1rem; height: 1rem; color: var(--night-accent); } .site-nav a:hover { border-bottom-color: var(--night-accent); } .site-nav a[aria-current="page"] { border-bottom-color: var(--night-accent); color: var(--night-accent); } .menu-toggle { display: none; align-items: center; gap: 0.6rem; background: transparent; color: var(--night-fg); border: 1.5px solid var(--night-line); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.9rem; cursor: pointer; } .menu-toggle__icon { width: 16px; height: 10px; position: relative; } .menu-toggle__icon::before, .menu-toggle__icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 150ms ease; } .menu-toggle__icon::before { top: 0; } .menu-toggle__icon::after { bottom: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(4.25px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-4.25px) rotate(-45deg); } @media (min-width: 64em) { .site-header__tools { order: 3; } .site-nav { order: 2; margin-left: auto; margin-right: 1.25rem; } .site-header__inner { flex-wrap: nowrap; } } @media (max-width: 63.99em) { .menu-toggle { display: inline-flex; } .site-nav { flex-basis: 100%; display: none; padding-bottom: 0.75rem; } .site-nav.is-open { display: block; } .site-nav ul { flex-direction: column; gap: 0; } .site-nav a { display: flex; padding: 0.7rem 0; border-bottom: 1px solid var(--night-line); font-size: 1.05rem; gap: 0.7rem; } .site-nav a .icon { width: 1.25rem; height: 1.25rem; } .site-nav li:last-child a { border-bottom-color: transparent; } } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; background: transparent; color: var(--night-fg); border: 1.5px solid var(--night-line); border-radius: 999px; cursor: pointer; } .theme-toggle .icon { width: 1.2rem; height: 1.2rem; } .theme-toggle .icon--sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon--moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon--sun { display: inline-block; } /* ---------- Hero (home) and page heads ---------- */ .hero--home .hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .hero--home .hero__copy { padding-top: clamp(0.5rem, 2vw, 1.5rem); padding-bottom: clamp(2rem, 6vw, 4.5rem); } .hero--home .hero__copy { align-items: center; gap: 1rem; } .hero--home .hero__title { max-width: none; font-size: clamp(3rem, 1.6rem + 6.8vw, 6.25rem); display: flex; flex-direction: column; align-items: center; line-height: 1; } .hero__line { display: block; } .hero__line--small { font-size: 0.6em; margin-bottom: 0.1em; } .hero__line--big { font-size: 1.035em; letter-spacing: -0.02em; } .hero--home .hero__lede { max-width: 30rem; } .hero__paths { list-style: none; padding: 0; display: grid; gap: 0.6rem; width: 100%; max-width: 34rem; grid-template-columns: minmax(0, 1fr); } .ptile { display: flex; align-items: center; gap: 0.9rem; text-align: left; min-height: 3.6rem; padding: 0.55rem 1rem 0.55rem 0.6rem; min-width: 0; background: var(--paper-raised); color: var(--ink); text-decoration: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255,255,255,0.4) inset; transition: transform 150ms ease, box-shadow 150ms ease; } .ptile:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(0,0,0,0.45); } .ptile:focus-visible { outline-color: var(--night-fg); } .ptile__icon { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } .ptile__icon .icon { width: 1.4rem; height: 1.4rem; stroke-width: 1.6; } .ptile h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; } @media (min-width: 48em) { .ptile h2 { font-size: 1.05rem; } } /* Start with a card (home) */ .cardintro { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 60em) { .cardintro { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 4rem; } } .cardintro__copy { display: flex; flex-direction: column; gap: 1.1rem; max-width: 36rem; } .cardintro__copy .hero__facts { color: var(--ink-muted); } .cardintro__copy .hero__facts .icon { color: var(--accent); } .cardintro .hero__card { justify-self: center; } .cardintro .hero__caption { color: var(--ink-muted); } .hero { background: var(--band-image), var(--night); color: var(--night-fg); padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); border-bottom: 1px solid var(--night-line); } .hero__inner { display: grid; gap: 3rem; align-items: center; } @media (min-width: 60em) { .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 4rem; } } .hero__copy { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; } .hero__title { font-size: clamp(2.6rem, 1.4rem + 5.5vw, 5rem); max-width: 14ch; } .hero__lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.55; color: var(--night-muted); max-width: 34rem; } .hero__lede::first-line { color: var(--night-fg); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .hero__facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.9rem; color: var(--night-muted); } .hero__facts li { display: inline-flex; align-items: center; gap: 0.4rem; } .hero__facts .icon { color: var(--night-accent); width: 1.1rem; height: 1.1rem; } .hero__card { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; justify-self: center; width: 100%; max-width: 26rem; } .hero__caption { font-size: 0.9rem; color: var(--night-muted); text-align: center; text-wrap: balance; } .page-head { background: var(--band-image), var(--night); color: var(--night-fg); padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--night-line); } .page-head__inner { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; } .page-head h1 { max-width: 18ch; } .page-head__lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--night-muted); line-height: 1.55; } .page-head__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.25rem; } .page-head__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.92rem; color: var(--night-muted); } .page-head__list a { color: var(--night-fg); } /* ---------- Safety Net Card ---------- */ .net-card { background: var(--card-bg); color: var(--card-fg); border-radius: 10px; padding: 1.1rem 1.25rem 0; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 20px 50px -20px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 0.8rem; font-size: 0.9rem; line-height: 1.45; overflow: hidden; } .net-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; } .net-card__tag { color: var(--card-accent); font-weight: 500; display: inline-flex; align-items: center; gap: 0.4rem; } .net-card__tag .icon { width: 0.95rem; height: 0.95rem; } .net-card__example { color: var(--card-muted); border: 1px solid var(--card-line); border-radius: 999px; padding: 0.1rem 0.5rem; } .net-card__example--live { color: var(--card-accent); border-color: var(--card-accent); } .net-card__name { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; } .net-card__about { color: var(--card-muted); } .net-card__fields { display: grid; gap: 0.6rem; border-top: 1px solid var(--card-line); padding-top: 0.8rem; } .net-card__fields div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; } .net-card__fields dt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--card-muted); padding-top: 0.2rem; } .net-card__fields dd { min-width: 0; white-space: pre-line; overflow-wrap: anywhere; } .net-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--card-line); padding-top: 0.8rem; } .net-card__legal { font-size: 0.8rem; color: var(--card-muted); min-width: 0; } .net-card__qr { flex: 0 0 auto; border: 1px solid var(--card-line); padding: 3px; background: #fff; } .net-card .num { color: inherit; } .net-card__emergency { margin-inline: -1.25rem; padding: 0.55rem 1.25rem; background: var(--card-alert); color: #fff; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; } .net-card .is-empty { color: var(--card-muted); font-style: italic; } @media (max-width: 24em) { .net-card__fields div { grid-template-columns: 1fr; gap: 0.15rem; } } /* Cloud surfaces */ .path, .tool, .card, .evidence__item, .now__box, .dodont__col, .myth, .checklist__group, .plan-section, .stage, .state, .line, .fact, details.fold { box-shadow: var(--shadow-soft); } .assurances { background: var(--paper-tint); } /* ---------- Sections ---------- */ .section { padding-block: clamp(3rem, 8vw, 6rem); } .section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); } .section--tint { background: var(--paper-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section--tint + .section--tint { border-top: 0; } .section__head { display: flex; flex-direction: column; gap: 1rem; max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); } .section__head--center { margin-inline: auto; text-align: center; align-items: center; } .section__lede { color: var(--ink-muted); font-size: 1.05em; max-width: var(--measure); } .section__more { margin-top: clamp(1.5rem, 4vw, 2.5rem); display: flex; flex-wrap: wrap; gap: 0.75rem; } /* Assurances */ .assurances { border-bottom: 1px solid var(--line); } .assurances__list { list-style: none; padding-block: 1rem; display: grid; gap: 0.75rem 2rem; font-size: 0.92rem; } @media (min-width: 48em) { .assurances__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 72em) { .assurances__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .assurances__list li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--ink-muted); min-width: 0; } .assurances__list .icon { color: var(--accent); margin-top: 0.1rem; } .assurances__list strong { color: var(--ink); } /* Start where you are: audience paths */ .paths { list-style: none; padding: 0; display: grid; gap: 1rem; } @media (min-width: 40em) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64em) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .path { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem 1.4rem 1.25rem; min-width: 0; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: border-color 150ms ease, transform 150ms ease; } .path:hover { border-color: var(--accent); transform: translateY(-2px); } .path .icon--lg { color: var(--accent); } .path h3 { font-size: 1.3rem; } .path p { color: var(--ink-muted); font-size: 0.95em; } .path__go { margin-top: auto; padding-top: 0.5rem; color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95em; } /* Right now */ .now { padding-block: clamp(2rem, 5vw, 3.5rem); } .now__box { background: var(--paper-raised); border: 1px solid var(--line); border-left: 4px solid var(--urgent); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.5rem; } @media (min-width: 60em) { .now__box { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 2.5rem; align-items: start; } } .now__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); } .now__sub { color: var(--ink-muted); margin-top: 0.5rem; font-size: 0.95em; } .now__options { list-style: none; padding: 0; display: grid; gap: 0.75rem; } @media (min-width: 40em) { .now__options { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .now__options li { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; overflow: hidden; } .now__options .icon--lg { color: var(--urgent); } .now__label { font-size: 0.9rem; color: var(--ink-muted); } .now__action { margin-top: auto; font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.05rem; min-width: 0; } .now__action:hover { color: var(--accent); } /* Steps (real sequence) */ .steps { list-style: none; padding: 0; display: grid; gap: 2rem; } @media (min-width: 48em) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } } .step { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .step__badge { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } .step__num { position: absolute; right: -0.35rem; top: -0.35rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.8rem; display: grid; place-items: center; } .step h3 { font-size: 1.45rem; } .step p { color: var(--ink-muted); } /* Tools row */ .tools { list-style: none; padding: 0; display: grid; gap: 1rem; } @media (min-width: 40em) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 72em) { .tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .tool { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem; min-width: 0; color: inherit; text-decoration: none; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color 150ms ease; } .tool:hover { border-color: var(--accent); } .tool__meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .tool__meta .icon--lg { color: var(--accent); } .tool__time { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); } .tool h3 { font-size: 1.3rem; } .tool p { color: var(--ink-muted); font-size: 0.95em; } .tool__go { margin-top: auto; padding-top: 0.5rem; color: var(--accent); font-weight: 700; font-size: 0.95em; display: inline-flex; gap: 0.4rem; align-items: center; } /* Facts */ .facts { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } @media (min-width: 48em) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 72em) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .fact { background: var(--paper-raised); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; } .fact__big { font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem); line-height: 1; color: var(--accent); } .fact h3 { font-size: 1.2rem; } .fact p { color: var(--ink-muted); font-size: 0.95em; } /* Moments and evidence */ .moments { list-style: none; padding: 0; display: grid; gap: 2rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); } @media (min-width: 48em) { .moments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } } .moment { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; padding-top: 1.25rem; border-top: 2px solid var(--ink); } .moment__icon { color: var(--accent); } .moment h3 { font-size: 1.45rem; } .moment p { color: var(--ink-muted); } .evidence { list-style: none; padding: 0; display: grid; gap: 1.25rem; } @media (min-width: 48em) { .evidence { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } } .evidence__item { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .evidence__item .icon--lg { color: var(--accent); } .evidence__item h3 { font-size: 1.35rem; } .evidence__item p { color: var(--ink-muted); } .evidence__item .cite { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } /* 2am statement */ .statement { background: var(--band-image), var(--night); color: var(--night-fg); padding-block: clamp(3.5rem, 9vw, 7rem); } .statement__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; text-align: center; } @media (min-width: 48em) { .statement__inner { flex-direction: row; gap: 2.5rem; text-align: left; } } .statement__icon { flex: 0 0 auto; } .statement__time { font-family: var(--font-mono); font-size: clamp(2rem, 1rem + 4vw, 3.5rem); line-height: 1; color: var(--night-accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.4em; } .statement__time .icon { width: 0.7em; height: 0.7em; stroke-width: 1.4; } .statement__time span { font-size: 0.45em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); align-self: flex-start; margin-top: 0.2em; } .statement__icon { width: clamp(4rem, 2rem + 6vw, 7rem); height: clamp(4rem, 2rem + 6vw, 7rem); border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--night-line); display: grid; place-items: center; color: var(--night-accent); } .statement__icon .icon { width: 55%; height: 55%; stroke-width: 1.3; } .statement__text { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.25; max-width: none; } @media (max-width: 30em) { .statement__text br { display: none; } .statement__text { text-wrap: balance; } } /* ---------- Diagram: early warning window ---------- */ .diagram { display: flex; flex-direction: column; gap: 1.5rem; } .diagram__plot { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.5rem 0.75rem; align-items: stretch; } .diagram__axis-y { grid-row: 1; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); text-align: center; } .diagram__axis-x { grid-row: 2; grid-column: 2; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); text-align: center; } .diagram__canvas { grid-row: 1; grid-column: 2; position: relative; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; } .diagram__svg { width: 100%; height: auto; aspect-ratio: 800 / 320; display: block; } .diagram__window { fill: var(--accent); opacity: 0.12; } .diagram__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 6; fill: none; } .diagram__edge { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 5; fill: none; opacity: 0.8; } .diagram__fill { fill: var(--accent); opacity: 0.08; } .diagram__curve { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; } .diagram__window-label { position: absolute; left: 37.5%; top: 5%; transform: translateX(-50%); width: 25%; text-align: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); display: flex; flex-direction: column; gap: 0.1rem; } .diagram__window-label small { font-family: var(--font-body); font-size: 0.78rem; text-transform: none; letter-spacing: 0; color: var(--ink-muted); } .diagram__dot { position: absolute; width: 1.6rem; height: 1.6rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.8rem; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--paper-raised); } @media (max-width: 40em) { .diagram__window-label small { display: none; } .diagram__dot { width: 1.3rem; height: 1.3rem; font-size: 0.7rem; } } .diagram__stages { list-style: none; padding: 0; display: grid; gap: 1rem; } @media (min-width: 40em) { .diagram__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64em) { .diagram__stages { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stage { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); min-width: 0; } .stage--window { background: var(--accent-soft); border-color: transparent; } .stage__num { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.8rem; display: grid; place-items: center; } .stage h3 { font-size: 1.2rem; } .stage p { color: var(--ink-muted); font-size: 0.93em; } .diagram__note { font-size: 0.85rem; color: var(--ink-muted); } /* ---------- Diagram: stress bucket ---------- */ .bucket { display: grid; gap: 2rem; align-items: center; } @media (min-width: 60em) { .bucket { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; } } .bucket__figure { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .bucket__svg { width: 100%; height: auto; display: block; } .bucket__svg .b-wall { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; } .bucket__svg .b-water { fill: var(--accent); opacity: 0.25; } .bucket__svg .b-wave { fill: none; stroke: var(--accent); stroke-width: 2; } .bucket__svg .b-drop { fill: var(--ink-muted); } .bucket__svg .b-tap { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; } .bucket__svg .b-flow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 4; } .bucket__svg .b-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink-muted); } .bucket__svg .b-label--accent { fill: var(--accent); } .bucket__svg .b-mark { fill: none; stroke: var(--urgent); stroke-width: 1.5; stroke-dasharray: 3 3; } .bucket__svg .b-mark-label { fill: var(--urgent); } .bucket__caption { font-size: 0.85rem; color: var(--ink-muted); } .bucket__keys { display: grid; gap: 1rem; } .bucket__key { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; } .bucket__key .icon--lg { color: var(--accent); margin-top: 0.1rem; } .bucket__key h3 { font-size: 1.25rem; } .bucket__key p { color: var(--ink-muted); font-size: 0.95em; } /* ---------- Plan parts, rings ---------- */ .plan { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } @media (min-width: 48em) { .plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 72em) { .plan { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plan__part:nth-child(4) { grid-column: span 2; } } .plan__part { background: var(--paper-raised); padding: 1.75rem 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; } .plan__part h3 { font-size: 1.3rem; } .plan__part > p { color: var(--ink-muted); font-size: 0.97em; } .plan__tag { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 0.5rem; } .plan__tag .icon { width: 1.1rem; height: 1.1rem; } .plan__sample { border-left: 3px solid var(--accent); padding: 0.25rem 0 0.25rem 1rem; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.4; } .plan__order { padding-left: 1.4rem; display: grid; gap: 0.25rem; font-size: 0.97em; color: var(--ink-muted); } .plan__order li::marker { font-family: var(--font-mono); color: var(--accent); font-size: 0.85em; } .family-view { background: var(--accent-soft); border-radius: var(--radius); padding: 1rem 1.1rem; display: grid; gap: 0.5rem; font-size: 0.97em; } .family-view__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 0.4rem; } .rings { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 2rem; align-items: center; } @media (min-width: 60em) { .rings { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; } } .rings__graphic { position: relative; max-width: 22rem; margin-inline: auto; width: 100%; } .rings__svg { width: 100%; height: auto; } .rings__outer { fill: var(--accent); opacity: 0.1; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 4; } .rings__middle { fill: var(--accent); opacity: 0.22; stroke: var(--accent); stroke-width: 1; } .rings__inner { fill: var(--accent); stroke: none; } .rings__spoke { stroke: var(--paper-raised); stroke-width: 2; } .rings__label { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .rings__label--inner { top: 50%; transform: translate(-50%, -50%); color: var(--accent-ink); font-weight: 500; } .rings__label--middle { top: 24%; color: var(--accent); } .rings__label--outer { top: 7%; color: var(--ink-muted); } .rings__copy { display: flex; flex-direction: column; gap: 1rem; } .rings__copy h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); } .rings__legend { list-style: none; padding: 0; display: grid; gap: 0.6rem; color: var(--ink-muted); } .rings__legend li { display: flex; gap: 0.6rem; align-items: baseline; } .rings__legend strong { color: var(--ink); } .swatch { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex: 0 0 auto; display: inline-block; transform: translateY(0.05rem); } .swatch--inner { background: var(--accent); } .swatch--middle { background: var(--accent); opacity: 0.4; } .swatch--outer { background: var(--accent); opacity: 0.15; border: 1px dashed var(--accent); } /* ---------- Lists: who, do/don't, myths, cards ---------- */ .check-list { list-style: none; padding: 0; display: grid; gap: 0.75rem; max-width: 44rem; } .check-list li { display: flex; gap: 0.75rem; align-items: flex-start; } .check-list .icon { color: var(--accent); margin-top: 0.2rem; } .dodont { display: grid; gap: 1.25rem; } @media (min-width: 48em) { .dodont { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dodont__col { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; } .dodont__col h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.3rem; } .dodont__col--do h3 .icon { color: var(--accent); } .dodont__col--dont h3 .icon { color: var(--urgent); } .dodont__col ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; color: var(--ink-muted); } .dodont__col li { display: flex; gap: 0.6rem; align-items: flex-start; } .dodont__col li .icon { margin-top: 0.2rem; width: 1rem; height: 1rem; } .dodont__col--do li .icon { color: var(--accent); } .dodont__col--dont li .icon { color: var(--urgent); } .dodont__col strong { color: var(--ink); } .myths { list-style: none; padding: 0; display: grid; gap: 1rem; } @media (min-width: 48em) { .myths { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .myth { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; display: grid; gap: 0.6rem; min-width: 0; } .myth__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); display: flex; align-items: center; gap: 0.4rem; } .myth__label--fact { color: var(--accent); } .myth__label .icon { width: 1rem; height: 1rem; } .myth__claim { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; text-decoration: line-through; text-decoration-color: var(--urgent); text-decoration-thickness: 1.5px; } .myth__truth { color: var(--ink-muted); } .cards { list-style: none; padding: 0; display: grid; gap: 1rem; } @media (min-width: 48em) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 72em) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; } .card .icon--lg { color: var(--accent); } .card h3 { font-size: 1.3rem; } .card p, .card li { color: var(--ink-muted); font-size: 0.97em; } .card ul { padding-left: 1.2rem; display: grid; gap: 0.3rem; } .card--urgent { border-left: 4px solid var(--urgent); } .card--urgent .icon--lg { color: var(--urgent); } .lines { list-style: none; padding: 0; display: grid; gap: 0.75rem; } @media (min-width: 48em) { .lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 72em) { .lines--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .line { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 0.9rem; align-items: start; min-width: 0; } .line .icon--lg { color: var(--accent); grid-row: span 3; margin-top: 0.15rem; } .line--urgent .icon--lg { color: var(--urgent); } .line--urgent { border-left: 4px solid var(--urgent); } .line__name { font-weight: 700; } .line__num { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 500; text-decoration: none; color: var(--ink); font-variant-numeric: tabular-nums; } .line__num:hover { color: var(--accent); } .line__note { color: var(--ink-muted); font-size: 0.88rem; } .states { list-style: none; padding: 0; display: grid; gap: 0.75rem; } @media (min-width: 48em) { .states { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .state { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .state__name { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; } .state__name .icon { color: var(--accent); } .state__abbr { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ink-muted); } .state a.line__num { font-size: 1.05rem; } .state__note { color: var(--ink-muted); font-size: 0.88rem; } .callout { background: var(--paper-raised); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1.1rem 1.3rem; display: flex; gap: 0.8rem; align-items: flex-start; max-width: var(--measure); } .callout .icon { color: var(--accent); margin-top: 0.15rem; } .callout--urgent { border-left-color: var(--urgent); background: var(--urgent-soft); } .callout--urgent .icon { color: var(--urgent); } .callout--wide { max-width: none; } .callout p + p { margin-top: 0.4rem; } .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); } table { border-collapse: collapse; width: 100%; font-size: 0.95em; } th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; } tr:last-child td { border-bottom: 0; } td.say { color: var(--accent); font-weight: 700; } td.avoid { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--urgent); } /* The gap + how it's built */ .gap { display: grid; gap: 2.5rem; align-items: start; } @media (min-width: 60em) { .gap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 4rem; } } .gap__copy { display: flex; flex-direction: column; gap: 1rem; max-width: var(--measure); } .gap__copy h2 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.3rem); } .gap__copy p { font-size: 1.05em; } .gap__build { border-top: 2px solid var(--ink); padding-top: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .gap__build ul { list-style: none; padding: 0; display: grid; gap: 0.75rem; color: var(--ink-muted); font-size: 0.97em; } .gap__build li { display: flex; gap: 0.6rem; align-items: flex-start; } .gap__build li .icon { color: var(--accent); margin-top: 0.2rem; } /* Funding, principles */ .funding { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); } .funding__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem 1.25rem; padding-block: 1.6rem; border-bottom: 1px solid var(--line); min-width: 0; } .funding__item .icon--lg { color: var(--accent); margin-top: 0.2rem; } .funding__item h3 { font-size: 1.35rem; margin-bottom: 0.4rem; } .funding__item p { color: var(--ink-muted); max-width: var(--measure); } .principles { display: grid; gap: 1.5rem; } @media (min-width: 48em) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; } } .principle { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.1rem; border-top: 2px solid var(--accent); min-width: 0; } .principle .icon--lg { color: var(--accent); } .principle dt { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; line-height: 1.15; } .principle dd { color: var(--ink-muted); } /* Details (collapsible) */ details.fold { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-raised); } details.fold + details.fold { margin-top: 0.75rem; } details.fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; font-family: var(--font-display); font-size: 1.25rem; } details.fold summary::-webkit-details-marker { display: none; } details.fold summary .icon { color: var(--accent); transition: transform 150ms ease; } details.fold[open] summary .icon { transform: rotate(180deg); } details.fold .fold__body { padding: 0 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 0.9rem; color: var(--ink-muted); max-width: none; } details.fold .fold__body strong { color: var(--ink); } details.fold .fold__body ul { padding-left: 1.2rem; display: grid; gap: 0.35rem; } /* ---------- Forms and tools ---------- */ .builder__grid { display: grid; gap: 2.5rem; align-items: start; } @media (min-width: 60em) { .builder__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3.5rem; } } .builder__form { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; } .builder__preview { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } @media (min-width: 60em) { .builder__preview { position: sticky; top: 5rem; } } .builder__hint { font-size: 0.9rem; color: var(--ink-muted); } .builder__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding-top: 0.5rem; } .builder__status { flex-basis: 100%; display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-muted); } .builder__status .icon { width: 1rem; height: 1rem; color: var(--accent); } .field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .field label, .field legend { font-weight: 700; } .field__hint { font-size: 0.88rem; color: var(--ink-muted); margin-top: -0.2rem; } input[type="text"], input[type="tel"], input[type="search"], textarea, select { width: 100%; min-height: 2.9rem; padding: 0.65rem 0.9rem; font: inherit; color: var(--ink); background: var(--paper-raised); border: 1.5px solid var(--line); border-radius: var(--radius); } textarea { resize: vertical; line-height: 1.5; } input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); outline-offset: 0; } ::placeholder { color: var(--ink-muted); opacity: 0.8; } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.1rem; padding: 0.25rem 0.75rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper-raised); color: var(--ink); font-size: 0.88rem; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; } .chip:hover { border-color: var(--accent); } .chip.is-used { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); } .chip .icon { width: 0.9rem; height: 0.9rem; } .seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 0.2rem; background: var(--paper-raised); gap: 0.2rem; } .seg button { border: 0; background: transparent; padding: 0.4rem 1rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; cursor: pointer; color: var(--ink-muted); } .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } /* Checklist */ .checklist { display: grid; gap: 1.25rem; } .checklist__group { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; display: grid; gap: 0.75rem; min-width: 0; } .checklist__group legend, .checklist__group h3 { font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; } .checklist__group h3 .icon { color: var(--accent); } .checklist__items { list-style: none; padding: 0; display: grid; gap: 0.4rem; } .check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; padding: 0.55rem 0.6rem; border-radius: var(--radius); cursor: pointer; } .check:hover { background: var(--paper-tint); } .check input { width: 1.3rem; height: 1.3rem; margin: 0.2rem 0 0; accent-color: var(--accent); cursor: pointer; } .check--flag { border: 1px solid var(--urgent-soft); } .check--flag input { accent-color: var(--urgent); } .checklist__result { background: var(--paper-raised); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); padding: 1.4rem; display: grid; gap: 0.9rem; } .checklist__result h3 { font-size: 1.4rem; } .checklist__count { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--accent); } .checklist__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } @media (min-width: 60em) { .checklist__layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 2.5rem; align-items: start; } .checklist__side { position: sticky; top: 5rem; display: grid; gap: 1rem; } } .checklist__side { display: grid; gap: 1rem; } /* Tonight tool */ .tonight { display: grid; gap: 1.5rem; } .tonight__pick { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tonight__pick button { min-width: 3.4rem; } .tonight__pick button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .tonight__steps { list-style: none; padding: 0; display: grid; gap: 1rem; counter-reset: tstep; } .tstep { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem 1.25rem 3.6rem; position: relative; display: grid; gap: 0.6rem; min-width: 0; } .tstep::before { counter-increment: tstep; content: counter(tstep); position: absolute; left: 1.1rem; top: 1.25rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.85rem; display: grid; place-items: center; } .tstep--urgent::before { background: var(--urgent); color: var(--urgent-ink); } .tstep h3 { font-size: 1.25rem; } .tstep p, .tstep li { color: var(--ink-muted); } .tstep ul { padding-left: 1.2rem; display: grid; gap: 0.3rem; } .tstep .line__num { font-size: 1.3rem; } .script { background: var(--paper-tint); border-radius: var(--radius); padding: 1rem 1.1rem; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.45; color: var(--ink); white-space: pre-line; } .script__fields { display: grid; gap: 0.75rem; } @media (min-width: 48em) { .script__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tonight__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .copy-status { font-size: 0.85rem; color: var(--accent); min-height: 1.2em; } /* Contacts list builder */ .contacts { list-style: none; padding: 0; display: grid; gap: 0.6rem; } .contact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.75rem; min-width: 0; } .contact__n { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.8rem; display: grid; place-items: center; } .contact__fields { display: grid; gap: 0.4rem; min-width: 0; } @media (min-width: 40em) { .contact__fields { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr); } } .contact__fields input { min-height: 2.4rem; padding: 0.4rem 0.7rem; font-size: 0.95em; } .contact__tools { display: flex; flex-direction: column; gap: 0.25rem; } .icon-button { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 50%; background: var(--paper-raised); cursor: pointer; color: var(--ink-muted); padding: 0; } .icon-button:hover { border-color: var(--accent); color: var(--accent); } .icon-button .icon { width: 1rem; height: 1rem; } .icon-button[disabled] { opacity: 0.4; cursor: not-allowed; } /* Plan document preview */ .doc { background: var(--card-bg); color: var(--card-fg); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 20px 50px -24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.15); display: flex; flex-direction: column; gap: 1.1rem; font-size: 0.95rem; line-height: 1.5; } .doc__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; border-bottom: 2px solid var(--card-fg); padding-bottom: 0.75rem; } .doc__title { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; } .doc__tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--card-accent); } .doc__section { display: grid; gap: 0.3rem; } .doc__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--card-muted); } .doc__text { white-space: pre-line; overflow-wrap: anywhere; } .doc__text.is-empty { color: var(--card-muted); font-style: italic; } .doc ol { padding-left: 1.3rem; display: grid; gap: 0.2rem; } .doc ol li::marker { font-family: var(--font-mono); color: var(--card-accent); } .doc__foot { border-top: 1px solid var(--card-line); padding-top: 0.75rem; font-size: 0.8rem; color: var(--card-muted); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .doc__emergency { background: var(--card-alert); color: #fff; font-weight: 700; padding: 0.5rem 0.9rem; border-radius: var(--radius); font-size: 0.85rem; } .plan-sections { display: grid; gap: 1rem; } .plan-section { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; display: grid; gap: 1rem; min-width: 0; } .plan-section__head { display: flex; align-items: center; gap: 0.6rem; } .plan-section__head .icon--lg { color: var(--accent); } .plan-section__head h3 { font-size: 1.3rem; } .plan-section__head .plan-section__n { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-muted); } .toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } /* ---------- Footer ---------- */ .site-footer { background: var(--band-image), var(--night); color: var(--night-fg); padding-block: clamp(3rem, 7vw, 5rem) 2.5rem; border-top: 1px solid var(--night-line); } .site-footer__inner { display: grid; gap: 2.5rem; } @media (min-width: 60em) { .site-footer__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); align-items: start; } .site-footer__fine { grid-column: 1 / -1; } } .site-footer__brand { display: flex; flex-direction: column; gap: 0.75rem; } .wordmark--footer { font-size: 2rem; } .wordmark--footer .wordmark__mark { width: 2rem; height: 2rem; } .site-footer__tag { color: var(--night-muted); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.3; white-space: nowrap; } .site-footer__ack { color: var(--night-muted); font-size: 0.85rem; max-width: 34rem; } .site-footer__cols { display: grid; gap: 2rem; } @media (min-width: 40em) { .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .site-footer__heading { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-accent); margin-bottom: 0.75rem; } .site-footer__cols ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; } .site-footer__cols a { color: var(--night-fg); text-decoration: none; font-size: 0.95rem; } .site-footer__cols a:hover { color: var(--night-accent); text-decoration: underline; } .help-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--night-line); flex-wrap: nowrap; } .help-list span { flex: 1 1 auto; min-width: 0; } .help-list a { flex: 0 0 auto; } .help-list span { color: var(--night-muted); font-size: 0.95rem; } .help-list a { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; } .site-footer__fine { color: var(--night-muted); font-size: 0.85rem; max-width: none; padding-top: 1.5rem; border-top: 1px solid var(--night-line); } .site-footer__fine a { color: var(--night-fg); } .site-footer__legal { color: var(--night-muted); font-size: 0.8rem; margin-top: 0.75rem; } @media (min-width: 60em) { .site-footer__legal { grid-column: 1 / -1; } } /* ---------- Print ---------- */ @media print { .help-strip, .site-header, .site-footer, .skip-link { display: none !important; } body { background: #fff; color: #000; padding: 0; } body[data-page="card"] main > * { display: none; } body[data-page="card"] main > .builder { display: block; padding: 0; } body[data-page="card"] .builder .section__head, body[data-page="card"] .builder__form, body[data-page="card"] .builder__hint { display: none; } body[data-page="card"] .builder__grid { display: block; } body[data-page="card"] .net-card--live { box-shadow: none; border: 1px solid #999; width: 100mm; margin: 0; page-break-inside: avoid; } body[data-page="plan"] main > * { display: none; } body[data-page="plan"] main > .builder { display: block; padding: 0; } body[data-page="plan"] .builder .section__head, body[data-page="plan"] .builder__form, body[data-page="plan"] .builder__hint, body[data-page="plan"] .toolbar { display: none; } body[data-page="plan"] .builder__grid { display: block; } body[data-page="plan"] .doc { box-shadow: none; border: 1px solid #999; } @page { margin: 14mm; } } /* ------------------------------------------------------------------ Sky and space: edges, drift, illustrations, animation ------------------------------------------------------------------ */ :root { --ground-top: #CFE5F8; --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='28' viewBox='0 0 480 28'%3E%3Cpath d='M0 28V18C40 2 80 2 120 16c30 10 60-10 120-4 50 6 80-12 120-2 40 10 80-6 120 8V28z' fill='%23000'/%3E%3C/svg%3E"); --bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5 5.5-6'/%3E%3C/svg%3E"); } :root[data-theme="dark"] { --ground-top: #080D1A; } /* Band positions are explicit so the texture layer can drift */ .hero, .page-head, .statement, .site-footer { background-position: 0 0, 0 0, 0 0; } /* Cloud-shaped edge where a band meets the ground */ .hero, .page-head { position: relative; border-bottom: 0; padding-bottom: calc(clamp(3rem, 7vw, 5rem) + 28px); } .hero::after, .page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px; pointer-events: none; background: var(--ground-top); -webkit-mask: var(--edge) repeat-x bottom / 480px 28px; mask: var(--edge) repeat-x bottom / 480px 28px; } .hero--home .hero__inner, .page-head__grid { position: relative; z-index: 1; } /* Page heads: text beside a geometric illustration */ .page-head__grid { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 60em) { .page-head__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); gap: 3rem; } } .page-head__art { color: var(--night-accent); width: 100%; max-width: 15rem; justify-self: center; } @media (max-width: 59.99em) { .page-head__art { max-width: 8.5rem; order: -1; justify-self: start; } } .art { width: 100%; height: auto; display: block; overflow: visible; } .art [class*="art-"] { transform-box: view-box; transform-origin: 50% 50%; } .art .art-ping, .art .art-breathe, .art .art-pulse, .art .art-float, .art .art-grow { transform-box: fill-box; transform-origin: center; } .art .art-grow { transform-origin: center bottom; } /* Home hero */ .hero__question { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); color: var(--night-muted); font-style: italic; margin-bottom: 0.25rem; } .ptile__title { font-weight: 700; font-size: 1.1rem; line-height: 1.3; flex: 1 1 auto; min-width: 0; } @media (min-width: 48em) { .ptile__title { font-size: 1.2rem; } } .ptile__arrow { color: var(--accent); width: 1.3rem; height: 1.3rem; transition: transform 150ms ease; } .ptile:hover .ptile__arrow { transform: translateX(4px); } .ptile:hover .ptile__icon { transform: scale(1.08); } .ptile__icon { transition: transform 150ms ease; } /* Prose bullets as small geometric marks */ .prose > ul { list-style: none; padding-left: 0; } .prose > ul > li { position: relative; padding-left: 1.7rem; } .prose > ul > li::before { content: ""; position: absolute; left: 0; top: 0.4em; width: 1rem; height: 1rem; background: var(--accent); -webkit-mask: var(--bullet) center / contain no-repeat; mask: var(--bullet) center / contain no-repeat; } .site-footer__heading { display: flex; align-items: center; gap: 0.4rem; } .site-footer__heading .icon { width: 0.95rem; height: 0.95rem; } /* Diagram accents */ .diagram__dot--live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; } .statement__time .icon { color: var(--night-accent); } /* ---------- Motion (only when the visitor hasn't asked for less) ---------- */ @media (prefers-reduced-motion: no-preference) { .hero, .page-head, .statement, .site-footer { animation: band-drift 240s linear infinite; } @keyframes band-drift { to { background-position: 1600px 0, 0 0, 0 0; } } .hero__paths .ptile { animation: rise 600ms cubic-bezier(.2,.7,.2,1) both; } .hero__paths li:nth-child(1) .ptile { animation-delay: 60ms; } .hero__paths li:nth-child(2) .ptile { animation-delay: 120ms; } .hero__paths li:nth-child(3) .ptile { animation-delay: 180ms; } .hero__paths li:nth-child(4) .ptile { animation-delay: 240ms; } .hero__paths li:nth-child(5) .ptile { animation-delay: 300ms; } .hero__paths li:nth-child(6) .ptile { animation-delay: 360ms; } @keyframes rise { from { transform: translateY(14px); } to { transform: translateY(0); } } .art-spin { animation: art-spin 70s linear infinite; } .art-spin--slow { animation-duration: 140s; } .art-orbit { animation: art-spin 36s linear infinite; } .art-orbit--rev { animation-direction: reverse; animation-duration: 52s; } .art-orbit--slow { animation-duration: 80s; } @keyframes art-spin { to { transform: rotate(360deg); } } .art-float { animation: art-float 6s ease-in-out infinite alternate; } .art-float--2 { animation-delay: -3s; } @keyframes art-float { from { transform: translateY(3px); } to { transform: translateY(-5px); } } .art-ping { animation: art-ping 3s ease-out infinite; } @keyframes art-ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3); opacity: 0; } } .art-breathe { animation: art-breathe 7s ease-in-out infinite alternate; } .art-breathe--2 { animation-delay: -2.3s; } .art-breathe--3 { animation-delay: -4.6s; } @keyframes art-breathe { from { transform: scale(.97); } to { transform: scale(1.04); } } .art-pulse { animation: art-pulse 3.2s ease-in-out infinite; } .art-pulse--2 { animation-delay: .8s; } .art-pulse--3 { animation-delay: 1.6s; } .art-pulse--4 { animation-delay: 2.4s; } @keyframes art-pulse { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.6); opacity: 1; } } .art-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: art-draw 2.4s ease-out .3s forwards; } @keyframes art-draw { to { stroke-dashoffset: 0; } } .art-grow { animation: art-grow 1.4s cubic-bezier(.2,.7,.2,1) both; } .art-grow--2 { animation-delay: .15s; } .art-grow--3 { animation-delay: .3s; } .art-grow--4 { animation-delay: .45s; } @keyframes art-grow { from { transform: scaleY(.3); } to { transform: scaleY(1); } } .diagram__curve { stroke-dasharray: 100; stroke-dashoffset: 100; animation: art-draw 2.6s ease-out .2s forwards; } .diagram__dot--live::after { animation: dot-ping 3s ease-out infinite; } @keyframes dot-ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.4); opacity: 0; } } .bucket__svg .b-wave { animation: wave 6s ease-in-out infinite alternate; } @keyframes wave { from { transform: translateX(-6px); } to { transform: translateX(6px); } } .bucket__svg .b-drop path { transform-box: fill-box; transform-origin: center; animation: drop 4s ease-in infinite; } .bucket__svg .b-drop path:nth-child(2) { animation-delay: 1.3s; } .bucket__svg .b-drop path:nth-child(3) { animation-delay: 2.6s; } @keyframes drop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 80% { transform: translateY(80px); opacity: .9; } 100% { transform: translateY(100px); opacity: 0; } } .rings__outer { transform-box: view-box; transform-origin: 50% 50%; animation: art-spin 120s linear infinite; } .statement__time .icon { animation: art-float 5s ease-in-out infinite alternate; } .step__badge, .tool__meta .icon--lg, .path .icon--lg, .card .icon--lg { transition: transform 200ms ease; } .step:hover .step__badge, .tool:hover .tool__meta .icon--lg, .card:hover .icon--lg { transform: translateY(-3px); } } /* ---------- Home hero sky: sun and clouds (light theme) ---------- */ .hero--home { overflow: hidden; } .sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .sky__sun { position: absolute; right: 4%; top: 3%; width: clamp(170px, 25vw, 360px); height: auto; } .sky__sun .sun-glow { fill: url(#sun-glow); } .sky__sun .sun-core { fill: #FFE9A8; } .sky__sun .sun-rays { fill: none; stroke: #FFE9A8; stroke-width: 2; stroke-linecap: round; opacity: .7; } .sky__cloud { position: absolute; fill: #fff; opacity: .9; filter: blur(7px); height: auto; } @media (max-width: 47.99em) { .sky__cloud { filter: blur(4px); } } .sky__cloud--1 { width: clamp(260px, 36vw, 560px); left: -5%; top: 52%; } .sky__cloud--2 { display: none; } .sky__cloud--3 { display: none; } .sky__cloud--4 { width: clamp(190px, 24vw, 340px); right: -4%; top: -5%; opacity: .75; } .sky__cloud--5 { width: clamp(240px, 30vw, 440px); left: -3%; top: 58%; opacity: .9; } .sky__cloud--6 { width: clamp(220px, 26vw, 400px); right: -5%; top: 66%; opacity: .9; } @media (max-width: 47.99em) { .sky__sun { right: -6%; top: 1%; width: 150px; } .sky__cloud--5, .sky__cloud--6 { opacity: .6; } } :root[data-theme="dark"] .sky__sun, :root[data-theme="dark"] .sky__cloud, :root[data-theme="dark"] .sky__bank { display: none; } @media (prefers-reduced-motion: no-preference) { .sky__cloud { left: 0; right: auto; transform: translateX(100vw); animation: cloud-pass linear infinite; } .sky__cloud--1 { animation-duration: 260s; animation-delay: -70s; } .sky__cloud--3 { animation-duration: 320s; animation-delay: -210s; } .sky__cloud--4 { animation-duration: 220s; animation-delay: -165s; } .sky__cloud--5 { animation-duration: 280s; animation-delay: -30s; } .sky__cloud--6 { animation-duration: 240s; animation-delay: -120s; } @keyframes cloud-pass { from { transform: translateX(100vw); } to { transform: translateX(-100%); } } .sky__sun .sun-rays { transform-box: fill-box; transform-origin: center; animation: art-spin 180s linear infinite; } } /* ---------- Hero word: a slow light sweep and a drawn underline ---------- */ .hero__word { position: relative; display: inline-block; white-space: nowrap; background: linear-gradient(100deg, var(--night-fg) 0%, var(--night-fg) 38%, #FFE9A8 48%, var(--night-accent) 56%, var(--night-fg) 66%, var(--night-fg) 100%); background-size: 300% 100%; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; color: transparent; } @media (prefers-reduced-motion: no-preference) { .hero__word { animation: word-sweep 4s ease-in-out 1s infinite; } @keyframes word-sweep { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } } @keyframes word-underline { to { transform: scaleX(1); } } } /* Cloud bank along the bottom of the home hero, merging into the strip below */ .sky__bank { position: absolute; left: -8%; width: 116%; bottom: -3px; height: auto; filter: blur(3px); } .hero--home { padding-bottom: clamp(7rem, 16vw, 12rem); } .hero--home::after { background: var(--paper-raised); } .assurances { background: var(--paper-raised); } :root[data-theme="dark"] .hero--home::after { background: var(--ground-top); } :root[data-theme="dark"] .assurances { background: var(--paper-tint); } /* ---------- Fact diagrams ---------- */ .fviz { width: 100%; height: auto; display: block; margin-bottom: 0.35rem; overflow: visible; } .fviz .fv-dot { fill: var(--ink-muted); opacity: .28; } .fviz .fv-lit { fill: var(--accent); } .fviz .fv-ring { fill: none; stroke: var(--ink-muted); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .7; } .fviz .fv-core { fill: var(--accent); } .fviz .fv-axis, .fviz .fv-tick { fill: none; stroke: var(--ink-muted); stroke-width: 1.2; opacity: .6; } .fviz .fv-band { fill: var(--accent); opacity: .28; } .fviz .fv-marker { fill: var(--accent); } .fviz .fv-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; fill: var(--ink-muted); } .fviz .fv-track { fill: none; stroke: var(--ink-muted); stroke-width: 6; opacity: .22; } .fviz .fv-arc { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 76 100; stroke-dashoffset: 0; } .fviz .fv-orbit, .fviz .fv-lit, .fviz .fv-marker, .fviz .fv-band { transform-box: fill-box; transform-origin: center; } .fviz .fv-orbit { transform-box: view-box; transform-origin: 50% 50%; } @media (prefers-reduced-motion: no-preference) { .fviz .fv-lit { animation: fv-glow 3.6s ease-in-out infinite; } .fviz .fv-lit--2 { animation-delay: 1.2s; } .fviz .fv-lit--3 { animation-delay: 2.4s; } @keyframes fv-glow { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.6); opacity: 1; } } .fviz .fv-orbit { animation: art-spin 90s linear infinite; } .fviz .fv-core { animation: fv-breathe 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; } @keyframes fv-breathe { from { transform: scale(.94); } to { transform: scale(1.08); } } .fviz .fv-band { animation: fv-band 1.4s cubic-bezier(.2,.7,.2,1) .3s both; transform-origin: left center; } @keyframes fv-band { from { transform: scaleX(0); } to { transform: scaleX(1); } } .fviz .fv-marker { animation: fv-glow 3s ease-in-out 1.6s infinite; } .fviz .fv-arc { stroke-dashoffset: 76; animation: fv-arc 2.2s cubic-bezier(.2,.7,.2,1) .4s forwards; } @keyframes fv-arc { to { stroke-dashoffset: 0; } } } /* Home hero: lift the elements off the clouds */ .hero--home .hero__title, .hero--home .hero__question { filter: drop-shadow(0 2px 10px rgba(8, 36, 74, 0.38)); } .hero--home .ptile { box-shadow: 0 16px 32px -14px rgba(8, 36, 74, 0.5), 0 2px 6px rgba(8, 36, 74, 0.12), 0 0 0 1px rgba(255,255,255,0.4) inset; } .hero--home .ptile:hover { box-shadow: 0 22px 40px -16px rgba(8, 36, 74, 0.55), 0 3px 8px rgba(8, 36, 74, 0.14), 0 0 0 1px rgba(255,255,255,0.4) inset; } :root[data-theme="dark"] .hero--home .hero__title, :root[data-theme="dark"] .hero--home .hero__question { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.6)); } :root[data-theme="dark"] .hero--home .ptile { box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255,255,255,0.05) inset; } /* Scroll cue under the hero list */ .hero__scroll { margin-top: 0.75rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; color: var(--night-fg); border: 1.5px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.12); text-decoration: none; transition: background-color 150ms ease, transform 150ms ease; } .hero__scroll .icon { width: 1.3rem; height: 1.3rem; } .hero__scroll:hover { background: rgba(255,255,255,0.24); transform: translateY(2px); } :root[data-theme="dark"] .hero__scroll { border-color: var(--night-line); background: rgba(255,255,255,0.06); } @media (prefers-reduced-motion: no-preference) { .hero__scroll .icon { animation: bob 2.4s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } } /* ---------- Phone refinements ---------- */ @media (max-width: 30em) { .wordmark { font-size: 1.3rem; } .wordmark__mark { width: 1.35rem; height: 1.35rem; } .site-header__tools { gap: 0.4rem; } .menu-toggle { padding: 0.35rem 0.7rem; font-size: 0.85rem; } .text-toggle, .theme-toggle { width: 2.2rem; height: 2.2rem; } } @media (max-width: 47.99em) { .sky__sun { right: -14%; top: -7%; width: 140px; } .eyebrow, .tool__time, .state__abbr, .myth__label, .site-footer__heading, th, .plan-section__n, .diagram__axis-y, .diagram__axis-x, .diagram__window-label, .cite, .family-view__label, .doc__tag, .doc__label, .net-card__head, .net-card__fields dt, .plan__tag, .plan-section__head .plan-section__n, .rings__label { font-size: 0.75rem; } } @media (max-width: 40em) { .table-wrap { overflow: visible; } .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; } .table-wrap thead { display: none; } .table-wrap tr { padding: 0.9rem 1rem 1rem; border-bottom: 1px solid var(--line); } .table-wrap tr:last-child { border-bottom: 0; } .table-wrap td { border: 0; padding: 0.1rem 0; } .table-wrap td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 0.55rem; } .table-wrap td:first-child::before { margin-top: 0; } } /* Diagram window label: never wrap, stay legible over the band, sit above the markers */ .diagram__window-label { white-space: nowrap; width: auto; z-index: 2; padding: 0.15rem 0.45rem; border-radius: 4px; background: color-mix(in srgb, var(--paper-raised) 85%, transparent); } .diagram__dot { z-index: 1; } @media (max-width: 47.99em) { .diagram__window-label { top: auto; bottom: 6%; font-size: 0.75rem; } .diagram__window-label small { display: none; } } /* Diagram: the marker layer must match the curve exactly, whatever the axis label's height */ .diagram__canvas { aspect-ratio: 800 / 320; align-self: start; } .diagram__svg { height: 100%; } .diagram__axis-y { align-self: center; max-height: 100%; } @media (max-width: 47.99em) { .diagram__axis-y, .diagram__axis-x { font-size: 0.75rem; letter-spacing: 0.06em; } }