/* ============================================================================= SURVIVING THE FEDS: THE FIELD MANUAL One stylesheet: tokens, every component, the new site's chrome and its Display settings, and print. Re-skinned to the new site (s2): warm paper #FAF6EE, dark ink, brand orange #E8742C that only ever means "you are here" or "act now", and only as a fill (orange text uses --orange-ink). Headlines in Black Ops One, set in capitals; labels, numbers and buttons in Barlow Condensed; reading text in Barlow. Square corners, 3px ink rules, solid ink code squares. A dashed border always means "you can print this on its own". No rounded cards, no shadows. Contents 1 Fonts and tokens 14 Clocks and the 30-day timeline 2 Base 15 Figures and plates 3 Small type and utilities 16 Tools 4 (the old masthead: gone) 17 Books 5 (the old menu: gone) 18 Home 6 Sheets, readout, 19 Hubs and guides: openers, bylines, quiz the margin, endings 7 The case path 20 Story, utility pages, journal 8 Strip and breadcrumbs 21 Preview notes, placeholders 9 Section heads 22 Ink bands 10 The manual grid and the 23 Display settings: colors margin 24 Reduced motion 11 Boxes: notes, rules, 25 Print 26 The new site's chrome 27 Headlines in Black Ops One answer, CPR, say, script 12 Print control, sheets, buttons 13 Checklists, steps, the situation switch ========================================================================== */ /* 1 ─ FONTS AND TOKENS ───────────────────────────────────────────────────── The new site's fonts, self-hosted (latin subset, 9 files): Black Ops One (one weight), Barlow 400/500/600/700 + italic, Barlow Condensed 500/600/700. The @font-face rules are printed inline by stf_head() in _layout.php (stf_fonts()), built with asset(), so each font has one URL and the app's service worker keeps it offline. Don't add them here. Weights above 700 render at 700: html sets font-synthesis-weight:none, so nothing is faux-bolded (Black Ops One always draws at its one weight). */ :root{ --paper:#FAF6EE; /* the sheet: the new site's warm paper */ --card:#FFFFFF; /* raised panels (the Display settings) */ --band:#F1EADD; /* paper bands */ --silver:#DDD2BF; /* hairlines */ --line2:#C3B49A; /* stronger hairlines (chrome buttons) */ --steel:#9A8D78; /* decorative strokes only, never text */ --graphite:#3E3E44; /* secondary text, 9.7:1 on paper */ --dim:#55555C; /* quiet text (footer), 7.0:1 */ --ink:#1C1C1F; /* text, heavy rules, the path, 16:1 */ --orange:#E8742C; /* brand orange: a fill only. "You are here" / "act now" */ --orange-hi:#F08A3C; /* orange hover */ --orange-ink:#97470A; /* orange-family text on paper, 6.6:1 */ --wash:#FBE6D3; /* faint warm wash (drawings only) */ --black:#0B0C0F; /* fixed ink for things that stay black in every mode */ --white:#F2F0EC; --on-orange:#1C1C1F; /* text on orange: 5.6:1 */ --black-band:#0B0C0F; /* the ink bands at the end of pages */ --band-rule:#2A2D35; /* hairlines on the ink bands */ --band-text:#C9CDD3; /* quiet text on the ink bands */ --es-bg:#FBF6EC; /* the Spanish bar stays light in every mode */ /* the chrome's surfaces */ --c-top:rgba(250,246,238,.95); --c-tab:rgba(255,253,248,.97); --c-rail:#F3EDE1; --c-menu:#FAF6EE; --c-shadow:0 12px 30px rgba(60,40,10,.18); --head:"Black Ops One",Impact,"Arial Black",sans-serif; /* headlines, in capitals */ --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; /* labels, nav, numbers, buttons, table heads */ --text:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; /* reading text */ --maxw:1296px; --gutter:16px; --rail:212px; /* the manual's contents column (not the nav rail) */ --navrail:104px; /* the new site's nav rail, from 1100px */ --col:700px; /* the reading column, the same in every section */ --note:248px; /* the margin: From inside, sources, the clock, print */ --gap:44px; --hair:1px solid var(--silver); --rule:3px solid var(--ink); --sheet-pad:14px; } @media (min-width:600px){:root{--gutter:24px;--sheet-pad:20px}} @media (min-width:1100px){:root{--gutter:40px}} /* 2 ─ BASE ──────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px;font-synthesis-weight:none;background:var(--paper);color-scheme:light} @media (min-width:1100px){html{scroll-padding-top:16px}} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--text);font-size:19px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:clip;overflow-wrap:break-word; } img,svg{max-width:100%} img{height:auto;display:block} a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.18em} a:hover{text-decoration-thickness:2.5px;text-decoration-color:var(--ink)} p{margin:0 0 1em} h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:0;line-height:1.1;margin:0} h1,h2{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;overflow-wrap:break-word} h1,.sh-t,.ro-name,.bp-t{text-wrap:balance} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} [hidden]{display:none!important} :focus-visible{outline:3px solid var(--ink);outline-offset:3px} main:focus{outline:none} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} sup{line-height:0} ul,ol{padding-left:1.3em} li{margin:0 0 .35em} blockquote{margin:0} table{border-collapse:collapse} code{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:.82em;background:var(--band);padding:1px 5px} strong.caps,b.caps{font-variant-caps:all-small-caps;letter-spacing:.045em;font-weight:700} /* 3 ─ SMALL TYPE AND UTILITIES ─────────────────────────────────────────── */ .label{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;line-height:1.35} .num{font-family:var(--display);font-variant-numeric:tabular-nums} .muted{color:var(--graphite)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .ico{width:20px;height:20px;flex:none} .ico.sm{width:16px;height:16px} .print-head,.print-legal,.print-only,.paper-only,.st-moves{display:none} .tag{display:inline-block;background:var(--ink);color:var(--paper);padding:6px 10px 5px;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;line-height:1.3} /* 4 ─ THE RIGHT NOW BUTTON (the old masthead, drop-down and phone menu gave way to the new site's chrome: section 26) ───────────────────────── */ .btn-now{ display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;white-space:nowrap; background:var(--orange);color:var(--on-orange);text-decoration:none;border:2px solid var(--black); font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.01em;flex:none } .btn-now::before{content:"";width:8px;height:8px;background:var(--on-orange);display:none} @media (min-width:400px){.btn-now::before{display:block}} .btn-now:hover{background:var(--orange-hi);text-decoration:none} /* 6 ─ SHEETS, READOUT, QUIZ ─────────────────────────────────────────────── */ .scrim{position:fixed;inset:0;z-index:70;background:rgba(16,17,19,.55)} .sheet{ position:fixed;left:0;right:0;bottom:0;z-index:80;max-height:88vh;display:flex;flex-direction:column; background:var(--paper);border-top:var(--rule);padding-bottom:env(safe-area-inset-bottom); transform:translateY(0);transition:transform .22s cubic-bezier(.2,.7,.2,1) } .sheet.is-entering{transform:translateY(100%)} @media (min-width:700px){.sheet{left:50%;right:auto;width:560px;margin-left:-280px;border:var(--rule);border-bottom:0}} .sheet-grab{width:44px;height:5px;background:var(--ink);margin:10px auto 4px;flex:none} .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px var(--gutter) 10px;border-bottom:var(--hair);flex:none} .sheet-head h2{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase} .sheet-x{width:44px;height:44px;display:grid;place-items:center;background:none;border:2px solid var(--ink)} .sheet-body{overflow-y:auto;padding:12px var(--gutter) 20px;overscroll-behavior:contain} .toc-sheet{list-style:none;margin:0;padding:0} .toc-sheet li{margin:0;border-bottom:var(--hair)} .toc-sheet a{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;min-height:54px;padding:6px 0;text-decoration:none;font-family:var(--display);font-stretch:90%;font-weight:700;font-size:18px;line-height:1.2} .toc-sheet .k{display:grid;place-items:center;min-width:40px;height:34px;padding:0 5px;background:var(--ink);color:var(--paper);font-stretch:70%;font-weight:900;font-size:16px} .quiz-btn{ display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin-top:14px;padding:0 14px; background:var(--paper);border:2.5px solid var(--ink);font-family:var(--display);font-weight:800;font-size:17px;text-align:left } .quiz-btn:hover{background:var(--band)} .readout{border:var(--rule);background:var(--paper);margin-top:14px;position:relative} .ro-bar{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);padding:10px 14px} .ro-bar .sq{width:40px;height:40px;display:grid;place-items:center;background:var(--orange);color:var(--on-orange);border:2px solid var(--paper);font-family:var(--display);font-stretch:68%;font-weight:900;font-size:24px;flex:none} .ro-bar .sq.dbl{border-style:double;border-width:5px} .ro-name{font-family:var(--display);font-stretch:84%;font-weight:800;font-size:21px;line-height:1.12} .ro-kicker{display:block;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;opacity:.85;margin-bottom:2px} .ro-body{padding:14px} .ro-desc{font-size:16.5px;color:var(--graphite);margin:0 0 10px} .ro-moves{list-style:none;margin:0;padding:0;counter-reset:mv;border-top:2px solid var(--ink)} .ro-moves li{counter-increment:mv;display:grid;grid-template-columns:32px 1fr;gap:10px;padding:10px 0;border-bottom:var(--hair);margin:0;font-size:17px;line-height:1.45} .ro-moves li::before{content:counter(mv);display:grid;place-items:center;width:26px;height:26px;background:var(--ink);color:var(--paper);font-family:var(--display);font-stretch:70%;font-weight:900;font-size:16px;margin-top:1px} .ro-clock{display:grid;grid-template-columns:22px 1fr;gap:8px;margin:12px 0 0;padding:10px 12px;background:var(--band);font-size:16px;line-height:1.4} .ro-clock .rule{display:block;font-family:var(--display);font-weight:700;font-size:14px;color:var(--graphite);margin-top:3px;letter-spacing:.02em} .ro-actions{display:flex;flex-wrap:wrap;gap:10px;padding:0 14px 14px} .ro-moves a{color:var(--ink);text-decoration-thickness:1.5px} .ro-body .ro-h{margin:14px 0 4px;color:var(--graphite)} .ro-links{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)} .ro-links li{margin:0;border-bottom:var(--hair)} .ro-links a{display:grid;grid-template-columns:auto minmax(0,1fr) 18px;gap:10px;align-items:center;min-height:48px;padding:6px 0;color:var(--ink);text-decoration:none;font-family:var(--display);font-stretch:92%;font-weight:700;font-size:16.5px;line-height:1.25} .ro-links a:hover .t{text-decoration:underline;text-decoration-thickness:2px} .ro-links .k{display:grid;place-items:center;min-width:36px;height:28px;padding:0 4px;background:var(--ink);color:var(--paper);font-stretch:70%;font-weight:900;font-size:15px} .ro-links .k.tk{background:none;color:var(--ink);min-width:20px;padding:0} .ro-links .ico{width:18px;height:18px} .btn-go{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 18px;background:var(--orange);color:var(--on-orange);border:2px solid var(--black);text-decoration:none;font-family:var(--display);font-weight:800;font-size:17px} .btn-go:hover{background:#F08A3C} .quiz-q{font-family:var(--display);font-stretch:84%;font-weight:800;font-size:clamp(22px,4vw,28px);line-height:1.15;margin:4px 0 14px} .quiz-dots{display:flex;gap:6px;margin-left:auto} .quiz-dots i{width:12px;height:12px;border:2px solid var(--paper)} .quiz-dots i.on{background:var(--orange);border-color:var(--orange)} .quiz-a{display:flex;flex-wrap:wrap;gap:10px} .quiz-a .btn{min-width:110px;justify-content:center} .quiz-note{font-size:15.5px;color:var(--graphite);margin:12px 0 0} /* 7 ─ THE CASE PATH ─────────────────────────────────────────────────────── */ .casepath{list-style:none;margin:0;padding:0;position:relative} .casepath li{margin:0} .station{position:relative} .station > a{position:relative;display:grid;grid-template-columns:50px 1fr 22px;gap:14px;align-items:center;min-height:84px;padding:12px 0;text-decoration:none} .station + .station > a{border-top:var(--hair)} .sq{ position:relative;z-index:1;width:50px;height:50px;display:grid;place-items:center;background:var(--paper);border:3px solid var(--ink); font-family:var(--display);font-stretch:68%;font-weight:900;font-size:28px;line-height:1;transition:background .15s,color .15s } .st-text{min-width:0} .st-name{display:block;font-family:var(--display);font-stretch:84%;font-weight:800;font-size:21px;line-height:1.1} .st-desc{display:block;font-size:16px;line-height:1.4;color:var(--graphite);margin-top:3px} .st-desc b{font-weight:600;color:var(--ink)} .st-clock{display:flex;gap:6px;align-items:flex-start;margin-top:8px;font-family:var(--display);font-stretch:100%;font-weight:600;font-size:14px;line-height:1.35;color:var(--ink)} .st-clock .ico{margin-top:1px} .st-go{width:20px;height:20px;align-self:center} /* hover is ink (orange is kept for "you are here" and "act now") */ .station > a:hover .sq,.station > a:focus-visible .sq,.track-l:hover .sq{background:var(--ink);color:var(--paper)} .station > a:hover .st-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em} .station.is-picked .sq,.track-l.is-picked .sq{background:var(--orange);color:var(--on-orange)} .station.suggest .sq,.track-l.suggest .sq{outline:3px dashed var(--orange);outline-offset:5px} @media (max-width:1023px){ .station::before,.station::after{content:"";position:absolute;left:23px;width:4px;background:var(--ink)} .station::before{top:0;height:50%} .station::after{top:50%;height:50%} .station:first-child::before,.station:last-child::after{display:none} } .track-l{display:grid;grid-template-columns:50px 1fr 22px;gap:14px;align-items:center;margin-top:10px;padding:16px 0;border-top:var(--rule);text-decoration:none;min-height:84px;position:relative} .track-l .sq{border-style:double;border-width:6px;font-size:26px} .tl-label{display:none} .compact .station > a{min-height:60px;padding:6px 0;grid-template-columns:40px 1fr 20px} .compact .sq{width:40px;height:40px;font-size:22px} .compact .station::before,.compact .station::after{left:18px} .compact .st-name{font-size:18.5px} .compact .track-l{min-height:60px;padding:10px 0;grid-template-columns:40px 1fr 20px;margin-top:6px} .compact .track-l .sq{border-width:5px;font-size:20px} @media (min-width:1024px){ .casepath-wrap:not(.compact){position:relative} .casepath-wrap:not(.compact) .casepath{display:grid;grid-template-columns:repeat(7,1fr)} .casepath-wrap:not(.compact) .casepath::before{content:"";position:absolute;left:0;right:calc(100% / 7 - 29px);top:27px;height:4px;background:var(--ink);transform-origin:left} .casepath-wrap:not(.compact) .station > a{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0 18px 22px 0;min-height:0;height:100%} .casepath-wrap:not(.compact) .station + .station > a{border-top:0} .casepath-wrap:not(.compact) .sq{width:58px;height:58px;font-size:34px;margin-bottom:18px} .casepath-wrap:not(.compact) .st-text{display:flex;flex-direction:column;flex:1;width:100%} .casepath-wrap:not(.compact) .st-name{font-size:20px;min-height:3.3em} .casepath-wrap:not(.compact) .st-desc{font-size:15.5px;margin-top:6px;min-height:7.1em} .casepath-wrap:not(.compact) .st-clock{margin-top:12px;padding-top:14px;border-top:var(--hair);width:100%} .casepath-wrap:not(.compact) .st-go{display:none} .casepath-wrap:not(.compact) .track-l{display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:58px auto;column-gap:20px;row-gap:12px;align-items:center;border-top:0;margin-top:22px;padding:4px 0 6px} .casepath-wrap:not(.compact) .track-l::before{content:"";position:absolute;left:58px;right:calc(100% / 7 - 29px);top:28px;height:12px;border-top:3.5px solid var(--ink);border-bottom:3.5px solid var(--ink)} .casepath-wrap:not(.compact) .track-l::after{content:"";position:absolute;right:calc(100% / 7 - 29px - 2px);top:22px;width:4px;height:24px;background:var(--ink)} .casepath-wrap:not(.compact) .track-l .sq{grid-column:1;grid-row:1;width:58px;height:58px;font-size:30px} .casepath-wrap:not(.compact) .track-l .st-text{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px} .casepath-wrap:not(.compact) .track-l .st-name{min-height:0;font-size:20px} .casepath-wrap:not(.compact) .track-l .st-desc{min-height:0;margin:0} .casepath-wrap:not(.compact) .track-l .tl-label{display:block;position:absolute;left:calc(58px + 28px);top:21px;padding:2px 10px;background:var(--paper);font-family:var(--display);font-stretch:112%;font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);line-height:1.6} .casepath-wrap:not(.compact) .track-l .st-go{display:none} /* the readout opens right under the station that was tapped, with a notch pointing up at it */ .readout-inline{margin:4px 0 26px;max-width:620px;--notch:40px} .readout-inline::before,.readout-inline::after{content:"";position:absolute;left:var(--notch);border:solid transparent;pointer-events:none} .readout-inline::before{top:-17px;margin-left:-14px;border-width:0 14px 14px;border-bottom-color:var(--ink)} .readout-inline::after{top:-11px;margin-left:-10px;border-width:0 10px 10px;border-bottom-color:var(--ink)} .readout-inline.no-notch::before,.readout-inline.no-notch::after{display:none} } @media (max-width:1023px){.readout-inline{display:none!important}} @media (prefers-reduced-motion:no-preference){ .casepath.draw::before{animation:drawPath .9s cubic-bezier(.6,0,.2,1) both} .casepath.draw .station{animation:tick .35s ease-out both} .casepath.draw .station:nth-child(2){animation-delay:.08s} .casepath.draw .station:nth-child(3){animation-delay:.16s} .casepath.draw .station:nth-child(4){animation-delay:.24s} .casepath.draw .station:nth-child(5){animation-delay:.32s} .casepath.draw .station:nth-child(6){animation-delay:.40s} .casepath.draw .station:nth-child(7){animation-delay:.48s} } @keyframes drawPath{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes tick{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* 8 ─ STRIP AND BREADCRUMBS ──────────────────────────────────────────────── */ .where{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:14px 0 0;font-family:var(--display);font-size:14.5px;color:var(--graphite)} .where-note{display:none} @media (min-width:700px){.where-note{display:block}} .strip{display:flex;flex-wrap:nowrap;align-items:center;list-style:none;margin:0;padding:0} .strip li{display:flex;align-items:center;margin:0;position:relative;flex:none} .strip li + li::before{content:"";width:10px;height:3px;background:var(--ink)} .strip li.l-gap::before{width:14px;background:none;border-top:3px dotted var(--steel);height:0} .strip a,.strip span.s{ display:grid;place-items:center;width:clamp(28px,8vw,34px);height:clamp(28px,8vw,34px);border:2.5px solid var(--ink);background:var(--paper);text-decoration:none;color:var(--ink); font-family:var(--display);font-stretch:70%;font-weight:900;font-size:clamp(16px,4.4vw,18px);line-height:1 } @media (max-width:399px){.strip li + li::before{width:6px}.strip li.l-gap::before{width:10px}} .strip .l a,.strip .l span.s{border-style:double;border-width:4.5px} .strip a:hover{background:var(--ink);color:var(--paper)} .strip .on a,.strip .on span.s{background:var(--orange);color:var(--on-orange)} .strip .on a:hover{background:var(--orange);color:var(--on-orange)} .strip.bk span.s{width:30px;height:30px;font-size:16px;background:var(--paper);color:var(--graphite);border-color:var(--silver)} .strip.bk .on span.s{background:var(--ink);color:var(--paper);border-color:var(--ink)} .strip.bk li + li::before{background:var(--silver)} .crumbs{padding:12px 0 0;font-family:var(--display);font-size:15px;color:var(--graphite);display:flex;flex-wrap:wrap;align-items:baseline} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;flex:1 1 0;min-width:0} .crumbs li{margin:0} .crumbs li + li::before{content:"/";margin:0 8px;color:var(--steel)} .crumbs a{color:var(--graphite)} .crumbs [aria-current]{color:var(--ink);font-weight:700} .crumbs .yah{font-weight:700;color:var(--ink);margin-right:8px;flex:none} .crumb-up{display:none} /* phones: one line, the last two steps, with the step above as the big back link: "You are here: ‹ 3. Court / 3A. Plea deals" */ @media (max-width:699px){ .crumbs{padding-top:6px;font-size:13.5px;flex-wrap:nowrap;align-items:center} .crumbs .yah{order:1;margin-right:6px} .crumb-up{order:2;display:flex;flex:0 0 auto;max-width:58%;min-width:0;align-items:center;gap:5px;min-height:40px;color:var(--ink)!important;text-decoration:none;font-weight:700;font-size:15.5px} .crumb-up > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1.5px solid var(--silver);line-height:1.25} .crumb-up .ico{width:16px;height:16px} .crumbs ol{order:3;flex:0 4 auto;min-width:0;flex-wrap:nowrap;white-space:nowrap;overflow:hidden} .crumbs li{display:none} .crumbs li:last-child{display:flex;min-width:0} .crumbs li:last-child::before{margin:0 7px;flex:none} .crumbs li:last-child > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } @media (max-width:359px){.crumb-up{max-width:48%}} /* 9 ─ SECTION HEADS: one system, everywhere ──────────────────────────────── */ .sec{padding:40px 0 8px} .sh{border-top:var(--rule);padding-top:14px;margin:0 0 18px} .sh h2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;margin:0;font-size:clamp(27px,6.4vw,40px);font-stretch:78%;font-weight:850;line-height:1.04} .sh-k{display:grid;place-items:center;min-width:46px;height:46px;padding:0 6px;background:var(--ink);color:var(--paper);font-stretch:68%;font-weight:900;font-size:24px;letter-spacing:0;line-height:1} .sh-k.long{font-size:19px;font-stretch:66%} .sh-k.xlong{font-size:17px;font-stretch:62%} .sh-k .ico{width:24px;height:24px} .sh-t{padding-top:calc((46px - 1.04em) / 2)} .sh.here .sh-k{background:var(--orange);color:var(--on-orange);box-shadow:inset 0 0 0 2.5px var(--black)} .sh.xl{border-top:0;padding-top:0;margin-bottom:12px} .sh.xl h2{font-size:clamp(32px,7.6vw,52px);font-stretch:76%;font-weight:900;line-height:.98;gap:16px} .sh.xl .sh-k{min-width:52px;height:52px} .sh.xl .sh-k .ico{width:28px;height:28px} .sh.xl .sh-t{padding-top:calc((52px - .98em) / 2)} .sh.sm h2{font-size:24px} .sh.sm .sh-k{min-width:36px;height:36px;font-size:20px;font-stretch:90%} .sh.sm .sh-t{padding-top:calc((36px - 1.04em) / 2)} .intro{font-size:18px;line-height:1.5;color:var(--graphite);max-width:40em;margin:0 0 22px} .prose p,.sec.g > p{max-width:36em} .sec.g > h3,.prose h3{font-size:clamp(22px,4.4vw,27px);font-stretch:82%;margin:26px 0 10px;line-height:1.12} .sec.g > ul,.sec.g > ol{max-width:36em} sup.fn a{font-family:var(--display);font-weight:800;font-size:12.5px;text-decoration:none;padding:0 2px;color:var(--ink);border-bottom:1.5px solid var(--silver)} sup.fn a:hover{border-bottom-color:var(--ink)} /* a side note (the source, beside its sentence) shows only on wide screens, see 10 */ .sn{display:none} /* 10 ─ THE MANUAL GRID AND THE MARGIN ───────────────────────────────────── Phone: one column. From 1100px: the rail, then every section is a 700px reading column with a 248px margin on its right. Everything in the margin (From inside, the sources, the clock, "Print just this list") floats there and stacks without overlapping. Nothing shifts between sections. */ .manual{display:block} .m-rail{display:none} .m-body{min-width:0} .note-side{display:none} @media (min-width:1100px){ .sec.g > .note-flow,.opener.g > .note-flow{display:none!important} .manual{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--gap)} .m-rail{display:block} .m-body{max-width:calc(var(--col) + var(--gap) + var(--note))} .sec.g,.opener.g{display:flow-root;padding-right:calc(var(--note) + var(--gap))} .sec.g > .sh,.sec.g > .wide,.opener.g > .wide{margin-right:calc(-1 * (var(--note) + var(--gap)))} .sec.g > p,.sec.g > ul,.sec.g > ol,.opener.g > p:not(.kicker){max-width:none} .note-flow{display:none} .note-side{display:block} .opener.g{position:relative} .opener.g > .note.opener-note{position:absolute;top:96px;right:0;width:var(--note);margin:0;float:none} .sec.g > .note,.opener.g > .note,.sec.g > .mclock, .sec.g > p > .sn,.sec.g > ul > li > .sn,.sec.g > ol > li > .sn,.opener.g > p > .sn{ display:block;float:right;clear:right;width:var(--note);margin:4px calc(-1 * (var(--note) + var(--gap))) 18px 0 } .sn{font-family:var(--text);font-size:14.5px;line-height:1.45;color:var(--graphite);font-style:normal;font-weight:400;text-align:left;padding-top:8px;border-top:var(--hair);margin-top:.35em!important} .sn b{font-family:var(--display);font-weight:800;color:var(--ink);margin-right:4px} .sn em,.sn i{font-style:italic} /* the sheet's own print button sits in the margin, at the top of its sheet */ .sec.g .sheet-box > .sheet-top{float:right;clear:right;width:var(--note);margin:-4px calc(-1 * (var(--note) + var(--gap) + var(--sheet-pad) + 2px)) 12px 0;display:block} .sec.g .sheet-box > .sheet-top .btn-print{width:100%} .sec.g .sheet-box > .sheet-top .sheet-hint{display:block} } .thumbs{position:sticky;top:20px;padding-top:30px} .thumbs > .label{color:var(--graphite);margin-bottom:10px} /* the way back to Right now, always in reach on a long page */ .thumbs .rail-now{display:flex;width:calc(100% - 10px);min-height:46px;margin:0 0 24px;padding:0 14px;font-size:16.5px} .thumbs ol{list-style:none;margin:0;padding:0;border-left:3px solid var(--ink)} .thumbs li{margin:0} .thumbs li a{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;min-height:40px;padding:4px 10px 4px 0;text-decoration:none;font-family:var(--display);font-stretch:90%;font-weight:600;font-size:15px;line-height:1.2} .thumbs li a .k{font-stretch:70%;font-weight:900;font-size:18px;text-align:center} .thumbs li a:hover{background:var(--band)} .thumbs li.on a{background:var(--orange);color:var(--on-orange);margin-left:-3px;padding-left:3px;margin-right:-22px;font-weight:800} .thumbs .toc{margin-top:26px} .thumbs .toc ol{border-left:1px solid var(--silver)} .thumbs .toc a{display:block;padding:6px 0 6px 12px;font-family:var(--text);font-size:15px;line-height:1.35;text-decoration:none;color:var(--graphite)} .thumbs .toc a .k{font-family:var(--display);font-weight:700;color:var(--ink);margin-right:6px;font-size:13.5px} .thumbs .toc a:hover,.thumbs .toc a.is-active{color:var(--ink)} .thumbs .toc a.is-active{box-shadow:inset 3px 0 0 var(--ink);margin-left:-1px;font-weight:600} /* "On this page", folded, on phones and tablets (the rail has it on desktop) */ .toc-fold{margin:22px 0 0;border-top:var(--rule);border-bottom:var(--hair);max-width:var(--col)} .toc-fold summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:54px;cursor:pointer} .toc-fold summary::-webkit-details-marker{display:none} .toc-fold summary::after{content:"";margin-left:auto;width:20px;height:20px;background:linear-gradient(var(--ink),var(--ink)) center/14px 3px no-repeat,linear-gradient(var(--ink),var(--ink)) center/3px 14px no-repeat} .toc-fold[open] summary::after{background:linear-gradient(var(--ink),var(--ink)) center/14px 3px no-repeat} .toc-fold .tf-n{font-family:var(--display);font-size:15px;color:var(--graphite)} .toc-fold ol{list-style:none;margin:0 0 10px;padding:0} .toc-fold li{margin:0;border-top:var(--hair)} .toc-fold a{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;min-height:46px;padding:5px 0;text-decoration:none;font-family:var(--display);font-stretch:92%;font-weight:700;font-size:17px;line-height:1.2} .toc-fold .k{font-stretch:70%;font-weight:900;font-size:16px} @media (min-width:1100px){.toc-fold{display:none}} /* a hub's guides and tools, nested under their contents entry (fold and Contents sheet): pages, so outlined squares */ .toc-sub{list-style:none;margin:0 0 8px 58px;padding:0} .toc-fold .toc-sub li,.toc-sheet .toc-sub li{border-top:var(--hair);border-bottom:0} .toc-fold .toc-sub a,.toc-sheet .toc-sub a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;min-height:44px;padding:5px 0;font-family:var(--display);font-stretch:92%;font-weight:600;font-size:16px;line-height:1.25;text-decoration:none} .toc-sub .k{display:grid;place-items:center;min-width:0;width:40px;height:28px;padding:0;background:none;color:var(--ink);border:2px solid var(--ink);font-stretch:70%;font-weight:900;font-size:14.5px} .toc-sub .k.tk{border:0} .toc-sub .k .ico{width:18px;height:18px} .toc-sheet > li > .toc-sub{margin-left:52px} /* "Go straight to": the hub's guides (rows) and tools (two to a row), right under the byline */ .jump{margin:22px 0 0;max-width:var(--col);border-top:var(--rule)} .jump > .label{margin:9px 0 2px;color:var(--graphite)} .jump ul{list-style:none;margin:0;padding:0} .jump li{margin:0;border-bottom:var(--hair)} .jump a{display:grid;grid-template-columns:auto minmax(0,1fr) 18px;gap:12px;align-items:center;min-height:52px;padding:7px 0;color:var(--ink);text-decoration:none;font-family:var(--display);font-stretch:90%;font-weight:800;font-size:18px;line-height:1.2} .jump a:hover .t,.jump a:focus-visible .t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} .jump .k{display:grid;place-items:center;min-width:42px;height:32px;padding:0 5px;background:var(--ink);color:var(--paper);font-stretch:70%;font-weight:900;font-size:16px} .jump .ico{width:18px;height:18px} .jump .j-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px} .jump .j-tools.one{grid-template-columns:1fr} .jump .j-tools a{grid-template-columns:20px minmax(0,1fr);gap:9px;min-height:48px;padding:6px 0;font-weight:700;font-size:15.5px;font-stretch:92%;line-height:1.22} .jump .j-tools .ico{width:20px;height:20px} @media (min-width:700px){.jump .j-tools{grid-template-columns:repeat(3,minmax(0,1fr))}.jump .j-tools.one{grid-template-columns:1fr}} /* 11 ─ BOXES ─────────────────────────────────────────────────────────────── */ /* From inside: Bilal's own lines. An ink rule and his mark, no fill, on every screen. */ .note{margin:22px 0;padding:2px 0 2px 16px;border-left:3px solid var(--ink)} .note .label{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-style:normal} .note-mark{width:17px;height:auto;color:var(--ink)} .note blockquote p{font-style:italic;font-size:20.5px;line-height:1.45;margin:0 0 6px} .note cite{font-style:normal;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--graphite)} .note .gloss{font-family:var(--text);font-size:15.5px;line-height:1.45;color:var(--graphite);margin:10px 0 0;padding-top:8px;border-top:var(--hair)} @media (min-width:1100px){.sec.g > .note blockquote p,.opener.g > .note blockquote p{font-size:19px}} /* From the book: his passages, verbatim. Ruled, not filled; two side by side share one block. */ .rulebox,.rulebook{margin:24px 0;padding:12px 0 14px;border-top:var(--rule);border-bottom:1.5px solid var(--ink);max-width:var(--col)} .rulebox > .label,.rulebook > .label{display:flex;align-items:center;gap:8px;color:var(--graphite);margin:0 0 8px} .rulebox h3,.rulebook h3{font-size:clamp(23px,4.4vw,28px);font-stretch:80%;margin:0 0 8px} .rb-text p{font-size:18px;line-height:1.5;margin:0 0 .6em} .rb-cite{font-family:var(--display);font-weight:700;font-size:14px;margin:6px 0 0;color:var(--graphite)} .rb-cols{display:grid;gap:18px} .rb-col + .rb-col{border-top:var(--hair);padding-top:16px} @media (min-width:760px){ .rb-cols{grid-template-columns:1fr 1fr;gap:0} .rb-col{padding-right:24px} .rb-col + .rb-col{border-top:0;border-left:var(--hair);padding:0 0 0 24px} } .answer{margin:22px 0 0;padding:4px 0 4px 18px;border-left:8px solid var(--ink)} .answer .label{display:block;margin-bottom:6px;color:var(--graphite)} .answer p{font-size:clamp(21px,3vw,25px);line-height:1.42;margin:0;font-variation-settings:"opsz" 30;font-weight:460} /* the CPR note: a quiet aside under the answer, word for word */ .cpr{margin:22px 0 4px;padding:12px 0 14px;border-top:var(--hair);border-bottom:var(--hair);max-width:var(--col)} .cpr-h{display:flex;align-items:center;gap:10px;margin:0 0 6px;color:var(--graphite)} .cpr-h .label{color:var(--graphite)} .cpr-ico{width:42px;height:14px;color:var(--ink);flex:none} .cpr-t{font-size:16px;line-height:1.55;margin:0} .warn{margin:20px 0;padding:14px 16px 6px;border:var(--rule);border-left-width:10px;max-width:var(--col)} .warn-h{display:flex;align-items:center;gap:10px;font-family:var(--display);font-stretch:90%;font-weight:800;font-size:20px;line-height:1.2;margin:0 0 8px} .warn-h .ico{width:24px;height:24px} .warn p{font-size:17.5px;margin:0 0 .7em} .say{display:block;margin:10px 0;padding:12px 14px;background:var(--black);color:var(--white);font-family:var(--display);font-stretch:92%;font-weight:800;font-size:20px;line-height:1.25;max-width:var(--col)} .say small{display:block;font-family:var(--display);font-stretch:112%;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#C9CDD0;margin-bottom:4px} /* "In the book's words": one of his long all-caps warnings, set in normal case (a long line of capitals is hard to read) */ .bookwords{margin:14px 0 18px;padding:12px 16px 12px;background:var(--black);color:var(--white);max-width:var(--col)} .bookwords .label{display:flex;align-items:center;gap:7px;margin:0 0 5px;font-size:13px;color:#C9CDD0} .bookwords .label .ico{width:16px;height:16px} .bookwords .bw-t{margin:0;font-family:var(--text);font-size:19px;font-weight:600;line-height:1.5} .bookwords .bw-src{margin:6px 0 0;font-family:var(--display);font-size:13px;color:#C9CDD0} li > .bookwords{margin:8px 0} /* inside a "From the book" block the label is already said: just the words, bold, in normal case */ .rb-text .bookwords{margin:0;padding:0;background:none!important;border:0!important;color:inherit} .rb-text .bookwords .label{display:none} .rb-text .bookwords .bw-t{font-size:inherit;font-weight:700;line-height:inherit} .rb-text .bookwords .bw-src{color:var(--graphite)} .bw-in{font-weight:700} .bw-note{font-family:var(--display);font-style:normal;font-weight:600;font-size:.74em;color:var(--graphite);white-space:nowrap} .script{border:2.5px solid var(--ink);margin:12px 0;max-width:600px;background:var(--paper)} .script-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;background:var(--ink);color:var(--paper);padding:8px 12px} .script-h .label{color:inherit} .script-sub{font-family:var(--display);font-weight:600;font-size:14px;opacity:.85} .script-text{font-family:var(--text);font-size:20px;line-height:1.75;margin:0;padding:12px 14px 8px} .blank{display:inline-block;min-width:7.5em;border-bottom:2px solid var(--ink);line-height:1.25;padding:0 4px;font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--graphite);letter-spacing:.02em;vertical-align:baseline} .script-foot{font-size:15.5px;line-height:1.45;color:var(--graphite);margin:0;padding:8px 14px 12px;border-top:var(--hair)} .scope{margin:18px 0;max-width:var(--col)} .scope-h{margin:0 0 8px;color:var(--graphite)} .scope-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border:var(--rule)} .scope-grid li{margin:0;padding:14px 14px 16px;border-right:var(--hair);border-bottom:var(--hair)} .scope-grid li:nth-child(2n){border-right:0} .scope-grid li:nth-last-child(-n+2){border-bottom:0} .scope-grid b{display:block;font-family:var(--display);font-stretch:70%;font-weight:900;font-size:30px;line-height:1;margin-bottom:6px} .scope-grid span{display:block;font-size:16.5px;line-height:1.4} .blank-table-wrap{max-width:var(--col);overflow-x:auto;margin:14px 0} .blank-table{width:100%;border:2.5px solid var(--ink);font-family:var(--display)} .blank-table caption{text-align:left;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite);padding-bottom:6px} .blank-table th{background:var(--ink);color:var(--paper);text-align:left;padding:8px 10px;font-size:15px;font-weight:800} .blank-table td{height:44px;border:1.5px solid var(--ink);border-top:0} /* Cards: one numbered card per objection, claim, waiver or warning sign (cards_html, :::cards). A ruled form, not a tile: square, no fill, no shadow; the solid number square is the section-head square, smaller. */ .cards{margin:22px 0 26px;max-width:var(--col)} .cards-intro p{font-size:18px;margin:0 0 12px} .cards-list{list-style:none;margin:0;padding:0;display:grid;gap:14px} .card{margin:0;border:2.5px solid var(--ink);background:var(--paper)} .cd-head{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:stretch;border-bottom:var(--rule)} .cd-n{display:grid;place-items:center;background:var(--ink);color:var(--paper);font-family:var(--display);font-stretch:68%;font-weight:900;font-size:22px;line-height:1} .cd-t{align-self:center;padding:9px 12px 9px 0;font-size:clamp(20px,4.8vw,23px);font-stretch:82%;line-height:1.14} .cd-lead{margin:0;padding:11px 14px 0;font-size:17.5px;line-height:1.48} .cd-rows{margin:0;padding:4px 14px 8px} .cd-row{padding:8px 0;border-top:var(--hair);font-size:16.5px;line-height:1.48} .cd-row:first-child{border-top:0} /* phones: the label runs in, like the clocks' "Source", so a card stays short */ .cd-row dt{display:inline;margin-right:7px;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;line-height:1.35;color:var(--graphite)} .cd-row dt .ico{vertical-align:-3px;margin-right:5px} .cd-row dt:empty{margin:0} /* an unlabelled row (guides fix round 3): no run-in gap on phones or paper; wide screens keep the text column */ .cd-row dd{display:inline;margin:0;font-size:16.5px;line-height:1.48} .cd-book dd{font-style:italic} .cd-book dd em{font-style:normal} .cd-show{border-top:0;margin:4px -14px;padding:10px 14px 10px 10px;border-left:4px solid var(--ink);background:var(--band)} .cd-show dt{color:var(--ink)} .cd-src dd{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.4;color:var(--graphite)} .cd-src dd em{font-family:var(--text);font-size:15px} @media (min-width:600px){ .cd-row{display:grid;grid-template-columns:150px 1fr;column-gap:16px} .cd-row dt{display:flex;align-items:flex-start;gap:6px;margin:0;padding-top:3px} .cd-row dt .ico{margin:0} .cd-row dd{display:block} .cd-show{padding-left:10px} } /* 12 ─ PRINT CONTROL, SHEETS, BUTTONS ────────────────────────────────────── */ .pc{display:grid;gap:8px;margin:20px 0 0;max-width:var(--col)} .pc-line{margin:0;font-size:15px;line-height:1.45;color:var(--graphite)} /* the print button couldn't print (an app's built-in browser): how to get to one that can. Ink, never orange */ .print-fail{margin:0;padding:10px 12px;border:2px solid var(--ink);border-left-width:8px;background:var(--paper);color:var(--ink);font-family:var(--display);font-stretch:95%;font-weight:600;font-size:15.5px;line-height:1.45;max-width:var(--col)} .print-fail:empty{padding:0;border-width:0} .sheet-top + .print-fail{margin:0 0 10px} .pc-how{display:inline-flex;align-items:center;gap:7px;justify-self:start;min-height:40px;margin-top:-4px;color:var(--ink);font-family:var(--display);font-stretch:90%;font-weight:700;font-size:15px;line-height:1.3;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em} .pc-how .ico{width:17px;height:17px;flex:none} .btn-print{ display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 18px;width:100%; background:var(--ink);color:var(--paper);border:0;font-family:var(--display);font-stretch:92%;font-weight:800;font-size:18px;text-decoration:none;line-height:1.15;text-align:left } .btn-print .ico{width:22px;height:22px} .btn-print:hover{background:#2A2C30} .pc-n{display:inline-flex;align-items:center;padding-left:10px;margin-left:2px;border-left:1.5px solid rgba(244,245,242,.45);font-weight:700;font-stretch:100%;font-size:15px;white-space:nowrap} @media (max-width:519px){ .btn-print:has(.pc-n){display:grid;grid-template-columns:auto 1fr;column-gap:12px;justify-items:start;padding:9px 16px} .btn-print:has(.pc-n) .ico{grid-row:span 2} .btn-print .pc-n{border-left:0;padding-left:0;margin:2px 0 0;font-size:14.5px;opacity:.9} } .btn-print.sm{min-height:44px;font-size:16px;width:auto;padding:0 14px} .btn-print.sm .ico{width:18px;height:18px} @media (min-width:600px){.pc .btn-print{width:auto;justify-self:start}} .pc.compact .btn-print{min-height:48px;font-size:17px} /* a sheet: the printable object. The only dashed thing on the site. */ .sheet-box{position:relative;margin:22px 0 10px;padding:18px var(--sheet-pad) 4px;border:2px dashed var(--ink);background:var(--paper);max-width:var(--col)} .sheet-box::before{content:"";position:absolute;top:-12px;left:16px;width:26px;height:22px;background:var(--paper)} .sheet-box::after{content:"";position:absolute;top:-11px;left:18px;width:22px;height:22px;background:var(--ink); -webkit-mask: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='square'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.1 15.9M14.5 14.5 20 20M8.1 8.1 12 12'/%3E%3C/svg%3E") center/18px no-repeat; mask: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='square'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.1 15.9M14.5 14.5 20 20M8.1 8.1 12 12'/%3E%3C/svg%3E") center/18px no-repeat} .sec.now .sheet-box::before{background:var(--band)} .sheet-top{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:-6px 0 8px} .sheet-hint{display:none;font-family:var(--display);font-size:14px;line-height:1.35;color:var(--graphite);margin-top:8px} .sheet-line{display:none} .btn{ display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 18px;text-decoration:none; font-family:var(--display);font-stretch:92%;font-weight:800;font-size:17px;border:2.5px solid var(--ink);background:var(--paper);color:var(--ink) } .btn:hover{background:var(--band)} .btn.solid{background:var(--ink);color:var(--paper)} .btn.solid:hover{background:#2A2C30} .btn .ico{width:18px;height:18px} .btn[disabled]{opacity:.5;cursor:not-allowed} .go{font-family:var(--display);font-weight:800;font-size:17px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border-bottom:3px solid var(--ink);padding-bottom:2px;min-height:44px} .go .ico{width:18px;height:18px;transition:transform .15s} .go:hover .ico{transform:translateX(3px)} .more{margin:20px 0 0} /* 13 ─ CHECKLISTS, STEPS, SITUATION SWITCH ──────────────────────────────── */ .checklist{margin:0 0 10px;max-width:var(--col)} .cl-title{font-family:var(--display);font-stretch:90%;font-weight:800;font-size:20px;margin:0 0 8px} .cl-meter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:4px 0 12px;font-family:var(--display);font-size:15px} .cl-count{font-weight:700} .cl-count b{font-weight:900} .cl-bar{flex:1;min-width:80px;height:8px;border:2px solid var(--ink);position:relative;overflow:hidden} .cl-bar i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform .25s} .cl-clear{background:none;border:0;border-bottom:2px solid var(--ink);padding:4px 0;min-height:36px;font-family:var(--display);font-weight:700;font-size:15px} .cl-intro{margin:6px 0 10px} .check-group{margin:0 0 20px} .check-group h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:2px solid var(--ink);font-family:var(--display);font-size:15px;font-stretch:112%;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.3} .cg-n{color:var(--graphite);font-weight:600;letter-spacing:.03em;white-space:nowrap} .check{list-style:none;margin:0;padding:0} .check li{border-bottom:var(--hair);margin:0} .check li:last-child{border-bottom:0} .check label{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:14px 0;cursor:pointer;align-items:start} input[type=checkbox]{appearance:none;-webkit-appearance:none;margin:0;flex:none;display:grid;place-items:center;cursor:pointer;background:var(--paper)} .check input{width:28px;height:28px;margin-top:2px;border:2.5px solid var(--ink)} /* ticked: ink fill, paper tick */ input[type=checkbox]:checked{background:var(--ink)} input[type=checkbox]:checked::after{content:"";width:12px;height:7px;border-left:3px solid var(--paper);border-bottom:3px solid var(--paper);transform:translateY(-2px) rotate(-45deg)} @media (prefers-reduced-motion:no-preference){input[type=checkbox]:checked::after{animation:tickIn .18s ease-out}} @keyframes tickIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} .check .do{display:block;font-family:var(--display);font-stretch:90%;font-weight:800;font-size:19.5px;line-height:1.22} .check .why{display:block;font-size:17px;line-height:1.5;color:var(--graphite);margin-top:4px} .check .why b,.check .why strong{color:var(--ink);font-weight:600} .check li .say{margin:0 0 14px 46px} .check input:checked + .ck-body .do{text-decoration:line-through;text-decoration-thickness:2px} /* steps: the numbered square IS the tick box */ .steps{list-style:none;margin:0;padding:0;border-top:var(--rule)} .steps > li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:var(--hair);margin:0} .steps > li:last-child{border-bottom:0} .step-k{position:relative;display:block;width:46px;height:46px;cursor:pointer} .step-k input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:2;border:0;background:none} .step-k .sq{width:46px;height:46px;font-size:26px;border-width:3px;background:var(--paper)} .step-k input:checked + .sq{background:var(--ink);color:transparent} .step-k input:checked + .sq::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:10px;margin:-8px 0 0 -9px;border-left:4px solid var(--paper);border-bottom:4px solid var(--paper);transform:rotate(-45deg)} .step-k input:focus-visible + .sq{outline:3px solid var(--ink);outline-offset:3px} .step-k:hover .sq{background:var(--band)} .step-k:hover input:checked + .sq{background:var(--ink)} .step-body{min-width:0} .step-body > h3{font-size:clamp(23px,4.4vw,27px);font-stretch:82%;margin:8px 0 8px;line-height:1.12} .steps p{font-size:18px;margin:0 0 .7em;max-width:36em} .step-body .why,.steps p.why{color:var(--graphite);font-size:17px} .steps li:has(.step-k input:checked) .step-body > h3{text-decoration:line-through;text-decoration-thickness:2px} @media (max-width:699px){ .steps > li{grid-template-columns:40px minmax(0,1fr);column-gap:12px} .step-k,.step-k .sq{width:40px;height:40px} .step-k .sq{font-size:23px} .step-body{display:contents} .step-body > h3{grid-column:2;margin-top:5px} .step-body > :not(h3){grid-column:1 / -1} .script-text{font-size:19px;padding:10px 12px 6px} } .sit{margin:6px 0 16px;max-width:var(--col)} .sit-q{margin:0 0 8px;color:var(--graphite)} .sit-row{display:flex;flex-wrap:wrap;gap:0} .sit-row button{flex:1 1 auto;min-height:48px;padding:8px 12px;background:var(--paper);border:2px solid var(--ink);margin:0 -2px -2px 0;font-family:var(--display);font-weight:800;font-size:16px;text-align:left;line-height:1.2;position:relative} .sit-row button[data-sit-val=""]{flex:0 0 auto;min-width:72px;text-align:center} .sit-row button[aria-pressed="true"]{background:var(--ink);color:var(--paper);z-index:1} .sit-row button:hover:not([aria-pressed="true"]){background:var(--band)} .sit-now{margin:10px 0 0;font-family:var(--display);font-size:15px;color:var(--graphite)} .sit-now b{color:var(--ink)} .check-group.is-filtered{display:none} @media (max-width:599px){.sit-row{display:grid;grid-template-columns:auto 1fr}.sit-row button[data-sit-val=""]{grid-row:span 3}} /* 14 ─ CLOCKS AND THE 30-DAY TIMELINE ───────────────────────────────────── */ .clocks{display:grid;border:2.5px solid var(--ink);margin:0 0 8px;max-width:var(--col);background:var(--paper)} .clock{padding:16px;border-bottom:var(--hair);display:grid;gap:4px;align-content:start} .clock:last-child{border-bottom:0} .clock .cfig{font-family:var(--display);font-stretch:66%;font-weight:900;font-size:44px;line-height:.95;letter-spacing:-.01em} .clock .cfig small{font-size:.5em;font-stretch:80%;font-weight:800;letter-spacing:0} .clock .cfig.word{font-size:28px;font-stretch:76%;font-weight:850;line-height:1.05;padding-top:6px} .clock .cfig.word small{font-size:1em;font-weight:850;font-stretch:76%} .clock .when{font-family:var(--display);font-weight:700;font-size:14px;color:var(--graphite);margin:0} .clock h3{font-size:20px;font-stretch:86%;margin:4px 0 0} .clock p{margin:4px 0 0;font-size:16.5px;line-height:1.45} .cite{margin:10px 0 0;font-family:var(--display);font-stretch:100%;font-weight:600;font-size:14px;line-height:1.35;color:var(--graphite)} .src-k{font-variant-caps:all-small-caps;font-weight:800;letter-spacing:.08em;color:var(--ink);margin-right:4px} @media (min-width:700px){ .clocks{grid-template-columns:1fr 1fr} .clock{border-right:var(--hair)} .clock:nth-child(2n){border-right:0} .clock:nth-last-child(-n+2):nth-child(2n+1),.clock:nth-last-child(-n+2):nth-child(2n+1) ~ .clock{border-bottom:0} .clocks:has(> .clock:only-child){grid-template-columns:1fr} .clocks.four{grid-template-columns:repeat(4,1fr)} .clocks.four .clock{border-bottom:0;border-right:var(--hair)} .clocks.four .clock:last-child{border-right:0} } @media (min-width:700px) and (max-width:1099px){ .clocks.four{grid-template-columns:1fr 1fr} .clocks.four .clock:nth-child(-n+2){border-bottom:var(--hair)} .clocks.four .clock:nth-child(2n){border-right:0} } .timeline{margin:6px 0 18px;border:2.5px solid var(--ink);padding:10px 12px 0;max-width:calc(var(--col) + var(--gap) + var(--note))} .fig.bare{border:0;margin:0;max-width:none} .fig.bare figcaption{border-top:var(--hair);padding:10px 0} .clocks.wide{max-width:calc(var(--col) + var(--gap) + var(--note))} .timeline .fig-art{margin:0} @media (max-width:699px){.timeline{display:none}} .clock-foot{font-size:15.5px;color:var(--graphite);max-width:var(--col);margin:8px 0 0} /* the stage's clock: the page's one big number. In the margin of the act-now section on wide screens. */ .mclock{margin:0 0 18px;padding:10px 0 12px;border-top:var(--hair);border-bottom:var(--hair);max-width:var(--col)} .mclock .label{display:flex;align-items:center;gap:8px;color:var(--graphite);margin:0;font-stretch:100%;letter-spacing:.05em} .mc-fig{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:56px;line-height:.9;margin:8px 0 6px;letter-spacing:-.01em} .mc-fig small{font-size:.42em;font-stretch:80%;font-weight:800;letter-spacing:0;margin-left:2px} /* "up to 3 working days": the words above and below the number, so the figure stays narrow */ .mc-fig.long small{display:block;margin:0;line-height:1.05} .mc-fig.long small:first-child{margin-bottom:2px} .mc-t{font-size:16px;line-height:1.45;margin:0} .mclock .cite{margin-top:6px} @media (max-width:1099px){ .mclock{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center} .mclock .label{grid-column:1 / -1} .mc-fig{font-size:44px;margin:4px 0 0;grid-row:span 2} .mclock .cite{margin-top:0} .mclock:not(:has(.mc-fig)) .mc-t,.mclock:not(:has(.mc-fig)) .cite{grid-column:1 / -1} } @media (min-width:1100px){.mc-fig{font-size:76px}} /* 15 ─ FIGURES AND PLATES ──────────────────────────────────────────────── */ figure{margin:0} .fig{margin:18px 0 10px;border:2.5px solid var(--ink);background:var(--paper);max-width:var(--col)} .fig-art{padding:12px} .fig-art svg{display:block;width:100%;height:auto} .fig figcaption{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 12px;border-top:2.5px solid var(--ink);font-size:15.5px;line-height:1.45} .fig figcaption b{font-family:var(--display);font-weight:800;white-space:nowrap} .fig-legend{list-style:none;margin:0;padding:4px 12px 8px;border-top:var(--hair);display:grid;gap:0} .fig-legend li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:7px 0;margin:0;font-size:16px;line-height:1.4;border-bottom:var(--hair)} .fig-legend li:last-child{border-bottom:0} .fig-legend b{display:grid;place-items:center;width:26px;height:26px;background:var(--ink);color:var(--paper);font-family:var(--display);font-stretch:70%;font-weight:900;font-size:16px} @media (min-width:760px){.fig-legend{grid-template-columns:1fr 1fr;column-gap:20px}.fig-legend li:nth-last-child(2):nth-child(odd){border-bottom:0}} .fig-pair{display:grid;gap:16px;max-width:var(--col)} .fig-pair .fig{margin:0} /* drawing classes shared by every figure */ .fg{overflow:visible} .fg text{font-family:var(--display)} .fg-ink{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:square} .fg-ink2{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:square} .fg-hair{fill:none;stroke:var(--steel);stroke-width:1.5} .fg-dash{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:6 5} .fg-box{fill:var(--paper);stroke:var(--ink);stroke-width:3} .fg-box2{fill:var(--paper);stroke:var(--ink);stroke-width:2} .fg-sheet{fill:var(--paper);stroke:var(--ink);stroke-width:3} .fg-check{fill:var(--paper);stroke:var(--ink);stroke-width:2} .fg-band{fill:var(--band)} .fg-wash{fill:var(--wash);stroke:var(--ink);stroke-width:1.5} .fg-ink-fill{fill:var(--ink)} .fg-node{fill:var(--paper);stroke:var(--ink);stroke-width:3} .fg-here{fill:var(--orange);stroke:var(--black);stroke-width:2} .fg-lbl{fill:var(--ink);font-weight:700;font-size:12.5px;letter-spacing:.08em;font-stretch:108%} .fg-lbl-rev{fill:var(--paper);font-weight:700;font-size:12.5px;letter-spacing:.08em;font-stretch:108%} .fg-small{fill:var(--graphite);font-weight:600;font-size:13px} .fg-tick{fill:var(--graphite);font-weight:700;font-size:12px;letter-spacing:.06em} .fg-cell{fill:var(--on-orange);font-weight:900;font-size:14px;font-stretch:80%} .fg-tag rect{fill:var(--ink)} .fg-tag text{fill:var(--paper);font-weight:900;font-size:17px;font-stretch:70%} .fg-yah rect{fill:var(--orange);stroke:var(--black);stroke-width:1.5} .fg-yah text{fill:var(--on-orange);font-weight:800;font-size:12.5px;letter-spacing:.06em} .fg-stn rect{fill:var(--paper);stroke:var(--ink);stroke-width:3} .fg-stn text{fill:var(--ink);font-weight:900;font-size:22px;font-stretch:68%} .fg-stn-l rect{stroke-width:6;paint-order:stroke} /* tool icons: every stroke the same visual weight at any size (3px lines, 1.5px hairlines) */ .fg-tool .fg-ink,.fg-tool .fg-ink2,.fg-tool .fg-box,.fg-tool .fg-box2,.fg-tool .fg-sheet,.fg-tool .fg-check,.fg-tool .fg-here,.fg-tool .fg-dash{vector-effect:non-scaling-stroke;stroke-width:3px} .fg-tool .fg-hair{vector-effect:non-scaling-stroke;stroke-width:1.5px;stroke:var(--graphite)} .fg-tool .fg-dash{stroke-dasharray:5 4} /* the floor plan */ .fp-wall{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:square} .fp-thin{fill:none;stroke:var(--steel);stroke-width:1.5} .fp-corner{fill:var(--ink)} .fp-walk{fill:none;stroke:var(--orange);stroke-width:4;stroke-dasharray:10 7} .fp-stop rect{fill:var(--ink)} .fp-stop text{fill:var(--paper);font-weight:900;font-size:15px;font-stretch:70%;font-family:var(--display)} .fp-room{fill:var(--graphite);font-weight:700;font-size:11.5px;letter-spacing:.09em;font-stretch:112%;font-family:var(--display)} .fp-call{fill:var(--ink);font-weight:700;font-size:12.5px;font-family:var(--display)} .fp-tall .fp-room{font-size:14.5px;letter-spacing:.06em} .fp-tall .fp-call{font-size:14.5px} .fp-table{fill:var(--paper);stroke:var(--ink);stroke-width:2} .fp-paper{fill:var(--wash);stroke:var(--ink);stroke-width:1.5} .fp-dmg{fill:none;stroke:var(--ink);stroke-width:2.5} .fp-tall{display:none!important} @media (max-width:699px){.fp-wide{display:none!important}.fp-tall{display:block!important}} /* the photo plate: art-directed, toned ink and orange, never printed. Its caption carries no number (images fix round 1): photos are never referred to or printed. */ .plate{margin:0;border:2.5px solid var(--ink);background:var(--black)} .plate img,.plate .img-ph{width:100%;aspect-ratio:3/2;object-fit:cover} .plate figcaption{display:block;padding:10px 12px;border-top:2.5px solid var(--ink);background:var(--paper);font-size:15px;line-height:1.45} @media (max-width:699px){.plate img{aspect-ratio:4/5}} /* a photo beside a page title stays a short wide band on phones, so the page's content starts on the first screen */ @media (max-width:699px){.page-head.with-plate .plate img,.page-head.with-plate .plate .img-ph{aspect-ratio:21/9}.page-head.with-plate .plate{margin-top:16px}.page-head.with-plate .plate figcaption{padding:7px 10px;font-size:14px}} .sec.g > .plate{margin-top:4px;margin-bottom:26px} @media (min-width:700px){.sec.g > .plate img,.sec.g > .plate .img-ph{aspect-ratio:21/9}} /* 16 ─ TOOLS ─────────────────────────────────────────────────────────────── */ .band{background:var(--band);border-bottom:var(--hair)} .forms{display:grid;gap:18px} @media (min-width:760px){.forms{grid-template-columns:1fr 1fr}} @media (min-width:1100px){.forms.three{grid-template-columns:repeat(3,1fr)}} .form{background:var(--paper);border:2.5px solid var(--ink);display:flex;flex-direction:column} .form-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 14px;border-bottom:2.5px solid var(--ink)} .form-head .label{color:var(--graphite)} .form-main{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:start;padding:16px 14px 6px} .form-fig{display:grid;place-items:center;width:56px;height:56px;border:2px solid var(--ink);background:var(--paper)} .form-fig svg{display:block;width:46px;height:auto} .form h3{font-size:23px;font-stretch:82%;margin:2px 0 6px;line-height:1.1} .form h3 a{text-decoration:none} .form h3 a:hover{text-decoration:underline;text-decoration-thickness:2px} .form .what{font-size:16.5px;line-height:1.45;color:var(--graphite);margin:0} .form-needs{padding:6px 14px 4px;flex:1} .form-needs > .label{color:var(--graphite);margin:8px 0 4px;font-size:13px} .needs{margin:0 0 10px;padding-left:1.1em;font-size:16px;line-height:1.4} .needs li{margin:0 0 3px} .gives{font-size:16px;line-height:1.45;margin:4px 0 12px;padding-top:10px;border-top:var(--hair)} .gives b{font-family:var(--display);font-weight:700} .form-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-top:2.5px solid var(--ink)} .form-foot .src{font-family:var(--display);font-size:14px;color:var(--graphite);letter-spacing:.02em;line-height:1.3} @media (min-width:700px){ .form-main{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:18px 16px 6px} .form-fig{width:72px;height:72px} .form-fig svg{width:60px} .form-needs,.form-foot,.form-head{padding-left:16px;padding-right:16px} } /* the tools index: rows line up across cards */ @supports (grid-template-rows:subgrid){ @media (min-width:760px){ .forms.aligned{grid-auto-rows:auto} .forms.aligned .form{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0} } } /* compact rows (home) */ .trows{list-style:none;margin:0;padding:0;border-top:var(--rule);max-width:980px} .trows li{margin:0;border-bottom:var(--hair)} .trows a{display:grid;grid-template-columns:64px 1fr 22px;gap:14px;align-items:center;padding:12px 0;text-decoration:none;min-height:72px} .trow-fig{display:grid;place-items:center;width:64px;height:52px;border:2px solid var(--ink);background:var(--paper)} .trow-fig svg{display:block;width:52px;height:auto} .trow-t{display:block;font-family:var(--display);font-stretch:86%;font-weight:800;font-size:20px;line-height:1.15} .trow-d{display:block;font-size:16px;line-height:1.4;color:var(--graphite);margin-top:2px} .trow-r{display:none;font-family:var(--display);font-size:14px;color:var(--graphite);text-align:right} .trows a:hover .trow-t{text-decoration:underline;text-decoration-thickness:2px} .trows a:hover .trow-fig{background:var(--band)} @media (min-width:900px){.trows a{grid-template-columns:96px minmax(0,1fr) 210px 22px}.trow-fig{width:96px;height:64px}.trow-fig svg{width:76px}.trow-r{display:block}} /* the search journal app: its own five-across tab bar */ .appbox{border:2.5px solid var(--ink);max-width:var(--col);background:var(--paper);margin:0 0 18px} .appbox .ah{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;padding:16px} .appbox .ah-fig{display:grid;place-items:center;width:72px;height:72px;border:2px solid var(--ink)} .appbox .ah-fig svg{width:60px;height:auto;display:block} .appbox h3 a{text-decoration:none} .appbox h3{font-size:24px;font-stretch:82%;margin:0 0 6px} .appbox .ah p{font-size:16.5px;line-height:1.45;margin:0;color:var(--graphite)} .app-bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--black);border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink)} .app-bar li{margin:0} .app-bar li + li{border-left:1px solid #3A3D42} .app-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:68px;padding:8px 2px;color:var(--white);text-decoration:none;font-family:var(--display);font-weight:800;font-size:14px;line-height:1.1;text-align:center} .app-bar a .ico{width:22px;height:22px} .app-bar li:first-child a .ico{color:var(--orange)} .app-bar a:hover{background:#26282C} .app-bar a:focus-visible{outline-color:var(--white);outline-offset:-5px} .appbox .af{display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px} /* 17 ─ BOOKS ─────────────────────────────────────────────────────────────── */ .vols{display:grid;gap:30px} .vol{display:grid;grid-template-columns:110px 1fr;gap:14px 18px;align-items:start;padding-bottom:26px;border-bottom:var(--hair)} .vol:last-child{border-bottom:0} .vol .cover{border:2px solid var(--ink);background:var(--band)} .vol .label{color:var(--graphite);display:block;margin-bottom:4px} .vol .vol-t{font-size:clamp(25px,5.6vw,32px);font-stretch:80%;margin:0 0 4px} .vol h1.vol-t{font-size:clamp(34px,7vw,52px);font-stretch:76%;font-weight:900} .vol .vol-t a{text-decoration:none} .vol .sub{font-style:italic;font-size:16px;color:var(--graphite);margin:0;line-height:1.35} .vol .when{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;background:var(--black);color:var(--white);font-family:var(--display);font-stretch:92%;font-weight:800;font-size:19px;line-height:1.25} .vol .when .ico{margin-top:3px} .vol .cov{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 0;border-bottom:var(--hair)} .vol .cov .label{margin:0} .vol dl{margin:0;display:grid;gap:10px;grid-column:1/-1} .vol dt{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite)} .vol dd{margin:2px 0 0;font-size:16.5px;line-height:1.45} .vol .buy{grid-column:1/-1} .buy{display:flex;flex-wrap:wrap;gap:10px} .disclose{font-size:15px;color:var(--graphite);margin:4px 0 0;line-height:1.45} @media (min-width:640px){.vol{grid-template-columns:150px 1fr}} @media (min-width:1024px){ .vols{grid-template-columns:1fr 1fr;gap:56px} .vol{grid-template-columns:170px 1fr;border-bottom:0;padding-bottom:0} .vol .cover{grid-row:1/6} .vol .when,.vol .cov,.vol dl,.vol .buy{grid-column:2} } .mailnote{margin-top:24px;display:grid;grid-template-columns:28px 1fr;gap:12px;padding:14px 0;border-top:var(--rule);border-bottom:var(--hair);font-size:16.5px;line-height:1.45;max-width:980px} .mailnote .ico{width:26px;height:26px} .mailnote p{margin:0} .bookcard{display:grid;grid-template-columns:96px 1fr;gap:12px 18px;border:2.5px solid var(--ink);padding:16px;background:var(--paper);align-items:start;margin:26px 0 0;max-width:var(--col)} .bookcard .bc-cover{border:2px solid var(--ink)} .bookcard .label{color:var(--graphite);display:block;margin-bottom:4px} .bookcard h3{font-size:26px;font-stretch:80%;margin:0 0 8px} .bookcard h3 a{text-decoration:none} .bookcard p{font-size:16.5px;line-height:1.5;margin:0} .bookcard .buy,.bookcard .disclose{grid-column:1/-1} @media (min-width:640px){.bookcard{grid-template-columns:130px 1fr;padding:20px}.bookcard .bc-cover{grid-row:1/4}.bookcard .buy,.bookcard .disclose{grid-column:2}} /* two covers side by side (home, footer) */ .bookpair{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:980px} .bookpair li{margin:0} .bookpair a{display:grid;gap:10px;text-decoration:none;height:100%} .bp-cover{width:100%;height:auto;border:2px solid var(--ink);background:var(--band)} .bp-text .label{display:block;color:var(--graphite);font-size:13px} .bp-t{display:block;font-family:var(--display);font-stretch:80%;font-weight:850;font-size:clamp(21px,5vw,28px);line-height:1.05;margin:2px 0 6px} .bp-when{display:block;font-size:15.5px;line-height:1.4;color:var(--graphite)} .bookpair a:hover .bp-t{text-decoration:underline;text-decoration-thickness:2px} @media (min-width:700px){.bookpair{gap:36px}.bookpair a{grid-template-columns:150px 1fr;gap:20px;align-items:start}} .bookpair.sm{grid-template-columns:1fr 1fr;gap:12px} .bookpair.sm a{grid-template-columns:52px 1fr;gap:10px;align-items:center} .bookpair.sm .bp-cover{width:52px;border-color:var(--band-rule)} .bookpair.sm .bp-t{font-size:16px;font-stretch:88%;margin:0} /* 18 ─ HOME ──────────────────────────────────────────────────────────────── */ .hero{padding-top:22px;padding-bottom:30px} .hero-tag{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 16px} .hero-from{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--graphite)} .fw-quote{margin:0;font-family:var(--text);font-weight:420;font-size:clamp(25px,6.7vw,54px);line-height:1.18;letter-spacing:-.012em;font-variation-settings:"opsz" 48} .fw-quote p{margin:0} .fw-quote .free{text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:.1em;text-underline-offset:.12em;text-decoration-skip-ink:none;font-weight:560} .fw-sign{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;margin-top:20px;padding-top:14px;border-top:var(--hair)} .fw-sign img{width:56px;height:70px;object-fit:cover;filter:grayscale(1) contrast(1.05);border:2px solid var(--ink)} .fw-sign strong{display:block;font-family:var(--display);font-stretch:90%;font-weight:800;font-size:19px;line-height:1.1} .fw-sign span{display:block;font-size:15.5px;line-height:1.4;color:var(--graphite);margin-top:3px} .hero-portrait{display:none} .pc-phone{margin-top:18px} @media (min-width:1024px){ .hero{padding-top:44px;padding-bottom:40px} .hero-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:64px;align-items:start} .hero-q{padding-top:10px} .fw-sign{display:none} .hero-portrait{display:block;margin:0;border:3px solid var(--ink);background:var(--paper)} .hero-portrait img,.hero-portrait .img-ph{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.06)} .hero-portrait figcaption{padding:12px 14px 14px;border-top:3px solid var(--ink)} .hero-portrait figcaption b{display:block;font-family:var(--display);font-stretch:90%;font-weight:850;font-size:21px;line-height:1.1} .hero-portrait figcaption span{display:block;font-size:15px;line-height:1.4;color:var(--graphite);margin-top:4px} } @media (min-width:1300px){.hero-grid{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr)}} /* how to use: drawn with the path squares (wide), a short list (phones) */ .howto-strip{display:none} .howto-strip > h2,.howto-compact > h2{margin:0 0 16px;color:var(--graphite)} .ht-path,.ht-list{list-style:none;margin:0;padding:0} .ht-text strong{display:block;font-family:var(--display);font-stretch:84%;font-weight:850;font-size:21px;line-height:1.1} .ht-text span{display:block;font-size:16px;line-height:1.45;color:var(--graphite);margin-top:4px} .ht-path .sq,.ht-list .sq{width:46px;height:46px;font-size:26px;flex:none} .ht-path li.now .sq,.ht-list li.now .sq{background:var(--orange);color:var(--on-orange)} .promise{margin:18px 0 0;padding-top:12px;border-top:var(--hair);font-family:var(--display);font-weight:700;font-size:15px;line-height:1.35} @media (min-width:768px){ .howto-strip{display:block;padding-top:6px;padding-bottom:36px} .ht-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;padding-top:2px} .ht-path::before{content:"";position:absolute;left:23px;width:66.67%;top:23px;height:4px;background:var(--ink)} .ht-path li{display:block;padding-right:36px;margin:0;position:relative} .ht-path .ht-text{display:block;padding-top:14px;max-width:24em} .howto-compact{display:none} } .howto-compact{padding-top:34px;padding-bottom:30px;border-top:var(--hair)} .ht-list li{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start;padding:0 0 18px;margin:0;position:relative} .ht-list li:not(:last-child)::before{content:"";position:absolute;left:21px;top:46px;bottom:0;width:4px;background:var(--ink)} /* RIGHT NOW band: the words are on the page, no tap needed */ .rnbar{background:var(--orange);color:var(--on-orange);border-top:3px solid var(--black);border-bottom:3px solid var(--black)} .rnbar .wrap{padding-top:24px;padding-bottom:26px} .rnbar .label{display:block;margin-bottom:6px} .rnbar h2{font-size:clamp(30px,8vw,52px);font-stretch:74%;font-weight:900;line-height:.98;margin:0 0 8px} .rnbar .lead{font-size:17.5px;line-height:1.45;margin:0 0 16px;max-width:36em} .rn-say{background:var(--black);color:var(--white);padding:14px 16px;margin:0 0 18px} .rn-say small{display:block;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#C9CDD0;margin-bottom:6px} .rn-say blockquote{margin:0;font-family:var(--display);font-stretch:88%;font-weight:800;font-size:clamp(22px,4.6vw,28px);line-height:1.15} .rn-say p{margin:8px 0 0;font-size:16px;line-height:1.4;color:#E4E7E8} .rn-keys{list-style:none;margin:0;padding:0;display:grid;gap:10px} .rn-keys li{margin:0} .rn-keys a{display:grid;grid-template-columns:1fr 22px;align-items:center;gap:12px;min-height:66px;padding:10px 16px;background:var(--black);color:var(--white);text-decoration:none} .rn-keys strong{display:block;font-family:var(--display);font-stretch:88%;font-weight:800;font-size:20px;line-height:1.15} .rn-keys span{display:block;font-size:15.5px;line-height:1.35;color:#D2D6D9;margin-top:2px} .rn-keys a:hover{background:#26282C} .rn-keys a:focus-visible{outline-color:var(--white)} @media (min-width:1024px){ .rnbar .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start;padding-top:34px;padding-bottom:34px} .rn-say{margin-bottom:0} } .home-path{padding-top:40px;padding-bottom:40px} .hp-head{display:grid;gap:8px 48px;margin-bottom:24px} @media (min-width:1024px){.hp-head{grid-template-columns:minmax(0,1fr) 380px;align-items:start}} .hp-head .note{margin:0} .path-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px} .path-tools .quiz-btn{width:auto;margin:0} .tools-home{padding-top:40px;padding-bottom:40px} .contents{padding-top:40px;padding-bottom:44px} .books-home{padding-top:40px;padding-bottom:48px} .story-band{padding-top:40px;padding-bottom:44px} .story-grid{display:grid;gap:24px} .story-grid p{max-width:34em} @media (min-width:1024px){.story-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:center}} .toc-list{list-style:none;margin:0;padding:0;border-top:var(--rule)} .toc-list li{border-bottom:var(--hair);margin:0} .toc-list a{display:grid;grid-template-columns:48px 1fr;gap:4px 12px;padding:14px 0;text-decoration:none;min-height:56px} .toc-list .code{grid-row:1/3;font-family:var(--display);font-stretch:72%;font-weight:900;font-size:22px;line-height:1.1} .toc-list .t{font-family:var(--display);font-stretch:88%;font-weight:700;font-size:19.5px;line-height:1.2} .toc-list .m{font-family:var(--display);font-size:14px;color:var(--graphite)} .toc-list .lead{display:none} .toc-list a:hover .t{text-decoration:underline;text-decoration-thickness:2px} @media (min-width:1024px){ .toc-list a{grid-template-columns:64px minmax(0,auto) 1fr auto;align-items:baseline;gap:0 14px} .toc-list .code{grid-row:auto} .toc-list .lead{display:block;border-bottom:2px dotted var(--steel);transform:translateY(-6px)} .toc-list .m{white-space:nowrap} } /* 19 ─ HUBS AND GUIDES ───────────────────────────────────────────────────── */ .opener{padding:6px 0 6px} .opener .row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:end;margin-top:16px} .bignum{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:clamp(96px,26vw,210px);line-height:.74;letter-spacing:-.03em;margin-bottom:-2px} .opener .kicker{color:var(--graphite);margin:0} @media (max-width:699px){.opener .row .kicker{font-size:12.5px;font-stretch:100%;letter-spacing:.04em}} .opener h1{font-size:clamp(38px,10vw,78px);font-stretch:74%;font-weight:900;line-height:.94;margin:6px 0 0} .opener .dek{font-size:clamp(19px,2.4vw,23px);line-height:1.45;margin:16px 0 0;max-width:34em} .guide-open .kicker{display:flex;flex-wrap:wrap;gap:2px 8px;margin:16px 0 0;color:var(--graphite);font-stretch:100%;letter-spacing:.045em;font-size:13.5px} .guide-open .kicker .k-code{color:var(--ink)} .guide-open h1{font-size:clamp(31px,8.2vw,58px);font-stretch:76%;font-weight:900;line-height:.99;margin:8px 0 0;max-width:15em} /* the byline: his photo, From Bilal, review state, read time, and the print control */ .byline{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;margin:20px 0 0;padding:14px 0 0;border-top:var(--hair);max-width:var(--col)} .bl-photo{width:48px;height:60px;object-fit:cover;filter:grayscale(1) contrast(1.05);border:2px solid var(--ink)} .bl-who strong{display:block;font-family:var(--display);font-stretch:90%;font-weight:850;font-size:19px;line-height:1.15} .bl-meta,.bl-facts{display:block;font-family:var(--display);font-size:14.5px;line-height:1.35;color:var(--graphite)} .bl-facts{color:var(--ink);font-weight:600} .byline .bl-print{grid-column:1 / -1;margin-top:4px} .byline .btn-print:has(.pc-n){display:grid;grid-template-columns:auto 1fr;column-gap:12px;justify-items:start;padding:9px 16px} .byline .btn-print:has(.pc-n) .ico{grid-row:span 2} .byline .btn-print .pc-n{border-left:0;padding-left:0;margin:2px 0 0;font-size:14.5px;opacity:.9} @media (min-width:760px){ .byline{grid-template-columns:56px minmax(0,1fr) minmax(0,300px);gap:16px;align-items:start} .bl-photo{width:56px;height:70px} .byline .bl-print{grid-column:3;grid-row:1;margin:0} .byline .bl-print .btn-print{width:100%;justify-self:stretch;font-size:16.5px;min-height:50px} .byline .pc-line{font-size:14px} } /* the end of a letter */ .signoff{margin:28px 0 0;padding-top:20px;border-top:var(--rule);max-width:var(--col)} .so-line{font-family:var(--text);font-style:italic;font-size:26px;line-height:1.3;margin:0} .so-who{display:flex;align-items:center;gap:14px;margin:14px 0 0} .so-photo{width:44px;height:55px;object-fit:cover;filter:grayscale(1) contrast(1.05);border:2px solid var(--ink)} .so-who span{font-family:var(--text);font-style:italic;font-weight:600;font-size:22px;line-height:1} .edu{font-size:15px;line-height:1.5;color:var(--graphite);border-top:var(--hair);padding:12px 0 0;margin:22px 0 0;max-width:var(--col)} .guide-end{padding-bottom:44px} .endnotes{margin:44px 0 40px;max-width:calc(var(--col) + var(--gap) + var(--note))} .endnotes ol{margin:10px 0 0;padding-left:28px;font-size:15.5px;line-height:1.5} .endnotes li{padding:6px 0 6px 4px;border-bottom:var(--hair);margin:0} .endnotes li::marker{font-family:var(--display);font-weight:800} .endnotes .back{font-family:var(--display);font-size:13.5px;font-weight:700;color:var(--graphite)} @media (min-width:1100px){.endnotes ol{columns:2;column-gap:var(--gap)}.endnotes li{break-inside:avoid}} .nextstage{display:grid;border-top:var(--rule);margin-top:34px} .nextstage a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:18px 0;text-decoration:none;min-height:72px} .nextstage a + a{border-top:var(--hair)} .nextstage .sq{width:48px;height:48px;font-size:26px} .nextstage .sq.dbl{border-style:double;border-width:6px} .nextstage .sq.sm{font-size:19px} .nextstage .label{display:block;color:var(--graphite)} .nextstage strong{font-family:var(--display);font-stretch:84%;font-weight:800;font-size:22px;line-height:1.1} .nextstage a:hover .sq{background:var(--ink);color:var(--paper)} @media (min-width:900px){.nextstage{grid-template-columns:1fr 1fr}.nextstage a + a{border-top:0;border-left:var(--hair);padding-left:24px}} .files{display:grid;gap:18px;max-width:var(--col)} .file{display:block;text-decoration:none;border:2.5px solid var(--ink);background:var(--paper);position:relative;margin-top:16px} .file .ftab{position:absolute;top:-17px;left:-2.5px;background:var(--ink);color:var(--paper);padding:3px 12px 2px;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.04em} .file .fb{padding:20px 16px 14px} .file h3{font-size:23px;font-stretch:82%;margin:0 0 6px;line-height:1.12} .file p{font-size:16.5px;line-height:1.45;margin:0 0 10px;color:var(--graphite)} .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--display);font-size:14px;color:var(--graphite);border-top:var(--hair);padding-top:10px} .m-pages{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:700} .m-stub{color:var(--graphite);font-weight:700} .file:hover{background:var(--band)} .file:hover h3{text-decoration:underline;text-decoration-thickness:2px} .qa{border-top:var(--rule);max-width:var(--col)} .qa details{border-bottom:var(--hair)} .qa summary{list-style:none;display:grid;grid-template-columns:1fr 28px;gap:12px;align-items:center;min-height:60px;padding:12px 0;cursor:pointer;font-family:var(--display);font-stretch:88%;font-weight:800;font-size:20px;line-height:1.2} .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"";width:22px;height:22px;justify-self:end;background:linear-gradient(var(--ink),var(--ink)) center/16px 3px no-repeat,linear-gradient(var(--ink),var(--ink)) center/3px 16px no-repeat} .qa details[open] summary::after{background:linear-gradient(var(--ink),var(--ink)) center/16px 3px no-repeat} .qa .ans{padding:0 0 16px;font-size:18px} .qa .ans p{max-width:36em;margin:0 0 .6em} .hub-fig{max-width:var(--col)} /* hubs on phones: the Contents button (section 26) replaces the "On this page" fold. Crisis hubs (stages 1 and 2) also move "Go straight to" and the opener's From inside below section n.1 there, so the first instruction is on the first screen. The late copy never prints (paper keeps the opener's) and never shows on wider screens. */ .hub-late{display:none!important} @media screen and (max-width:699px){ .is-hub .toc-fold{display:none} .is-crisis .hub-early{display:none!important} .is-crisis .hub-late{display:block!important} } .stub-box{border:1.5px solid var(--silver);padding:16px;margin:12px 0;max-width:var(--col);color:var(--graphite);font-size:17px;background:var(--paper)} /* the act-now section: a silver band, so the page has a rhythm */ .sec.now{background:var(--band);margin:18px calc(-1 * var(--gutter)) 0;padding:26px var(--gutter) 24px;border-top:3px solid var(--ink)} .sec.now > .sh{border-top:0;padding-top:0} @media (min-width:1100px){.sec.now{margin-left:-28px;margin-right:-28px;padding-left:28px;padding-right:calc(28px + var(--note) + var(--gap))}} /* 20 ─ STORY, UTILITY PAGES, JOURNAL ─────────────────────────────────────── */ .story-head{padding:18px 0 22px;max-width:980px} .story-head h1{font-size:clamp(40px,10.5vw,96px);font-stretch:72%;font-weight:900;line-height:.92;margin:8px 0 0} .story-head .dek{font-size:clamp(19px,2.4vw,23px);line-height:1.45;margin:16px 0 0;max-width:34em} .frames-band{background:var(--black-band);padding:22px 0 20px;margin:0 0 10px} .frames{display:grid;gap:12px} @media (min-width:600px){.frames.n3{grid-template-columns:repeat(3,1fr)}.frames.n2{grid-template-columns:repeat(2,1fr)}.frames.n1{grid-template-columns:minmax(0,420px)}} .frame .ph{aspect-ratio:4/5;border:2px solid var(--band-rule);background:#1C1D20;position:relative;overflow:hidden} .frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)} .frame .img-ph{width:100%;height:100%;border:0;background-color:#1C1D20;background-image:repeating-linear-gradient(135deg,transparent 0 9px,rgba(244,245,242,.05) 9px 10px)} .frame .img-ph-mark{color:#55595F} .frame figcaption{display:flex;gap:10px;align-items:baseline;margin-top:10px;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.25;color:var(--white)} .frame figcaption b{display:grid;place-items:center;min-width:28px;height:28px;background:var(--white);color:var(--black);font-stretch:70%;font-weight:900;font-size:17px} @media (max-width:599px){.frames.n3{grid-template-columns:1fr 1fr}.frames.n3 .frame:first-child{grid-column:1 / -1}.frames.n3 .frame:first-child .ph{aspect-ratio:4/3}} .story-body{max-width:var(--col);padding-top:8px} .newsnote{display:grid;grid-template-columns:44px 1fr;gap:14px;margin:26px 0 8px;padding:14px 0;border-top:var(--rule);border-bottom:var(--hair)} .nn-ico{width:40px;height:32px;color:var(--ink)} .newsnote .label{margin:0 0 4px;color:var(--graphite)} .newsnote p{margin:0;font-size:17px;line-height:1.5} .chapter{margin:40px 0 0} .ch-mark{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-family:var(--display)} .ch-mark span{font-stretch:112%;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)} .ch-mark b{display:grid;place-items:center;min-width:46px;height:46px;padding:0 6px;background:var(--ink);color:var(--paper);font-family:var(--text);font-weight:600;font-size:22px;letter-spacing:.04em} .ch-mark::after{content:"";flex:1;height:3px;background:var(--ink)} .chapter h2{font-size:clamp(30px,6.6vw,46px);font-stretch:76%;font-weight:900;margin:0 0 14px} .chapter p{font-size:19px} .pullq{margin:46px 0;padding:26px 0;border-top:var(--rule);border-bottom:var(--rule)} .pullq blockquote p{font-family:var(--text);font-style:italic;font-weight:500;font-size:clamp(30px,6.4vw,50px);line-height:1.16;letter-spacing:-.012em;margin:0} .pullq figcaption{margin-top:14px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--graphite)} .story-body > .plate{margin:30px 0 0} @media (min-width:1100px){.story-body{margin-left:calc(var(--rail) + var(--gap))}.pullq{margin-left:-80px;margin-right:-180px;padding-left:80px}} .page-head{padding:18px 0 4px} .page-head h1{font-size:clamp(36px,9vw,68px);font-stretch:74%;font-weight:900;line-height:.96;margin:8px 0 0;max-width:16em} .page-head .dek{font-size:clamp(19px,2.4vw,22px);line-height:1.45;margin:14px 0 0;max-width:34em} .page-head .pc{margin-top:20px} .page-head.with-plate .plate,.page-head.with-plate > .fig{margin-top:22px} @media (min-width:1024px){.page-head.with-plate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:end}.page-head.with-plate .plate,.page-head.with-plate > .fig{margin:0}} .page-body{max-width:var(--col)} .page-body > p,.page-body li{font-size:19px} .page-body h2{font-size:clamp(26px,5vw,34px);font-stretch:80%;margin:34px 0 10px;padding-top:12px;border-top:var(--rule)} .page-body .sh h2,.page-wide .sh h2{padding-top:0;border-top:0;margin:0} .page-wide{max-width:none;padding-top:10px} .journal-stage{margin:30px 0 0} .journal-stage .js-head{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:0 0 10px} .journal-stage .sq{width:46px;height:46px;font-size:26px} .journal-stage .sq.dbl{border-style:double;border-width:6px} .journal-stage h2{font-size:clamp(24px,4.6vw,30px);font-stretch:80%} .journal-stage h2 a{text-decoration:none} .journal-stage .empty{font-size:16px;color:var(--graphite);padding:12px 0;border-top:var(--rule)} /* page bits: right now, contact, tools, books, app */ .rn-jump{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px} .rn-jump .btn{background:var(--paper)} .is-rightnow .sec .say{margin-bottom:6px} .contact-mail .btn{font-size:clamp(14.5px,4.5vw,18px);max-width:100%;padding:0 14px;overflow-wrap:anywhere} .lead-bio{font-size:clamp(20px,2.6vw,23px);line-height:1.45;margin:18px 0} .gloss-list{margin:16px 0;border-top:var(--rule);max-width:var(--col)} .gloss-list > div{padding:12px 0;border-bottom:var(--hair)} .gloss-list dt{font-family:var(--display);font-stretch:86%;font-weight:800;font-size:21px} .gloss-list dd{margin:4px 0 0;font-size:17.5px} .tool-top{display:grid;gap:16px;margin:4px 0 0} .tool-top .pc{margin:0} .tool-hero{max-width:260px;margin:12px 0 0} .tool-hero .fig-art{padding:16px 22px} @media (min-width:700px){.tool-top{grid-template-columns:220px minmax(0,1fr);align-items:center;gap:28px}.tool-hero{margin:0}} .tool-ui{margin:18px 0 8px;max-width:var(--col)} .tool-blank{max-width:var(--col)} .book-head .vols.one{grid-template-columns:1fr;max-width:860px} .book-head .vol{border-bottom:0} .app-tabs ol{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:var(--rule);max-width:var(--col)} .app-tabs li{margin:0} .app-tabs a{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:72px;padding:8px 4px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:14px;text-align:center;border-right:var(--hair);line-height:1.15} .app-tabs li:last-child a{border-right:0} .app-tabs a .sq{display:none} .app-tabs a[aria-current]{background:var(--ink);color:var(--paper)} .app-tiles{list-style:none;margin:16px 0;padding:0;border-top:var(--rule);max-width:var(--col)} .app-tiles li{margin:0;border-bottom:var(--hair)} .app-tiles a{display:grid;grid-template-columns:48px 1fr 22px;gap:14px;align-items:center;min-height:84px;padding:12px 0;text-decoration:none} .app-tiles .sq{width:46px;height:46px;font-size:24px} .at-text strong{display:block;font-family:var(--display);font-stretch:86%;font-weight:800;font-size:22px;line-height:1.1} .at-text span{display:block;font-size:16px;color:var(--graphite);margin-top:2px} .app-promise{margin:22px 0 0;color:var(--graphite)} .rnbar-mini{margin:10px 0 24px} /* 21 ─ PREVIEW NOTES, PLACEHOLDERS ──────────────────────────────────────── */ .pv-note{border:2px solid var(--orange-ink);border-left-width:8px;padding:10px 12px;font-family:var(--display);font-size:15px;line-height:1.45;color:var(--ink);background:var(--paper);max-width:var(--col);margin:14px 0} .pv-note .label{color:var(--orange-ink);margin-right:6px} .pv-tag{margin:8px 0 0;padding-top:6px;border-top:1px solid var(--orange-ink);font-family:var(--display);font-weight:700;font-size:13.5px;line-height:1.35;color:var(--orange-ink)} .img-ph{position:relative;display:grid;place-items:center;background:var(--band) repeating-linear-gradient(135deg,transparent 0 9px,rgba(16,17,19,.07) 9px 10px);border:2px solid var(--ink);overflow:hidden} .img-ph-mark{width:22%;max-width:72px;height:auto;color:var(--steel);opacity:.55} .img-ph-label{position:absolute;left:8px;right:8px;bottom:8px;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);padding:3px 6px;line-height:1.3} /* styleguide helpers (preview only) */ .sg-sec{padding:30px 0 10px;border-top:var(--rule);margin-top:30px} .sg-sec > h2{font-size:30px;font-stretch:80%;margin:0 0 6px;border:0;padding:0} .sg-sec > p.sg-what{font-size:16px;color:var(--graphite);margin:0 0 16px;max-width:44em} .sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .sg-sw{border:2px solid var(--ink)} .sg-sw i{display:block;height:64px;border-bottom:2px solid var(--ink)} .sg-sw span{display:block;padding:6px 8px;font-family:var(--display);font-size:13.5px;line-height:1.35} .sg-code{background:var(--band);border:var(--hair);padding:12px 14px;font-size:14px;line-height:1.5;overflow-x:auto;max-width:var(--col);white-space:pre-wrap} .sec-h{font-family:var(--display);font-size:clamp(32px,7.6vw,52px);font-stretch:76%;font-weight:900;line-height:.98;margin:0 0 10px} /* 22 ─ INK BANDS (the footer is the new site's: section 26) ─────────────── */ .band-ink{background:var(--black-band);color:var(--white)} .band-ink a{color:var(--white)} .band-ink .label{color:#C9CDD0} @media (min-width:1100px){.m-align{padding-left:calc(var(--rail) + var(--gap));max-width:calc(var(--rail) + var(--gap) + var(--col) + var(--gap) + var(--note))}} .bookband{padding:40px 0 42px} .bookband .bookcard{background:transparent;border:0;padding:0;margin:0;color:var(--white);max-width:calc(var(--col) + var(--gap) + var(--note))} .bookband .bookcard h3{font-size:clamp(28px,5vw,40px)} .bookband .bookcard p{font-size:17.5px;color:#E4E7E8} .bookband .bc-cover{border-color:var(--white)} .bookband .btn{background:transparent;color:var(--white);border-color:var(--white)} .bookband .btn:hover{background:#26282C} .bookband .btn.solid{background:var(--white);color:var(--black)} .bookband .btn.solid:hover{background:#D9DCDE} .bookband .disclose{color:var(--band-text)} .bookband .nobook{margin:0;font-family:var(--display);font-weight:700;font-size:18px} @media (min-width:640px){.bookband .bookcard{grid-template-columns:150px 1fr;gap:12px 28px}} .nextband{padding:6px 0 4px} .nextband .nextstage{border-top:0;margin:0} .nextband .nextstage a{min-height:96px;padding:22px 0} .nextband .nextstage a + a{border-top:1px solid var(--band-rule)} .nextband .sq{background:transparent;color:var(--white);border-color:var(--white)} .nextband .label{color:#C9CDD0} .nextband .nextstage strong{font-size:clamp(22px,3vw,28px)} .nextband .nextstage a:hover .sq{background:var(--white);color:var(--black)} .nextband .nextstage a:focus-visible{outline-color:var(--white)} @media (min-width:900px){.nextband .nextstage a + a{border-top:0;border-left:1px solid var(--band-rule)}} /* 23 ─ DISPLAY SETTINGS: COLORS ──────────────────────────────────────────── The Display panel (section 26) sets classes on . Pages are light paper by default, like the new site's reading pages; "Dark background" is the manual under a lamp, "High contrast" is white on black. Screen only: paper always prints black on white. */ @media screen{ html.a-color-dark{ --paper:#0A0B0E;--card:#111318;--band:#181B22;--silver:#323744;--line2:#4A5060;--steel:#6F7480;--graphite:#AEB2BA;--dim:#9095A0;--ink:#F2F0EC; --orange-ink:#F39A5A;--wash:#33231A;--black-band:#050608;--band-rule:#252932; --c-top:rgba(10,11,14,.88);--c-tab:rgba(13,14,18,.96);--c-rail:#0D0E12;--c-menu:rgba(8,9,12,.97);--c-shadow:0 20px 50px rgba(0,0,0,.55); color-scheme:dark } html.a-color-contrast{ --paper:#000;--card:#000;--band:#0C0C0C;--silver:#9A9A9A;--line2:#D0D0D0;--steel:#D0D0D0;--graphite:#FFF;--dim:#ECECEC;--ink:#FFF; --orange:#FFA94D;--orange-hi:#FFC888;--orange-ink:#FFC888;--wash:#000;--black:#000;--white:#FFF;--on-orange:#000;--black-band:#000;--band-rule:#9A9A9A;--band-text:#FFF; --c-top:#000;--c-tab:#000;--c-rail:#000;--c-menu:#000;--c-shadow:none; color-scheme:dark } html.a-color-contrast :focus-visible{outline:3px solid #fff;outline-offset:3px} html.a-color-contrast :is(input,select,textarea){border-width:2px!important} html.a-color-gray{filter:grayscale(1)} :is(html.a-color-dark,html.a-color-contrast) :is(.fw-sign img,.byline .bl-photo,.so-photo,.frame img,.hero-portrait img){filter:grayscale(1) contrast(1.02) brightness(.92)} :is(html.a-color-dark,html.a-color-contrast) .scrim{background:rgba(0,0,0,.7)} :is(html.a-color-dark,html.a-color-contrast) .img-ph{background-image:repeating-linear-gradient(135deg,transparent 0 9px,rgba(242,237,229,.06) 9px 10px)} :is(html.a-color-dark,html.a-color-contrast) .plate{border-color:var(--silver)} :is(html.a-color-dark,html.a-color-contrast) .ro-bar{background:var(--band);color:var(--ink);border-bottom:3px solid var(--ink)} :is(html.a-color-dark,html.a-color-contrast) :is(.btn-print:hover,.btn.solid:hover){background:#D9D3CA} :is(html.a-color-dark,html.a-color-contrast) :is(.say,.bookwords,.vol .when){background:var(--black-band);border:2px solid var(--silver)} :is(html.a-color-dark,html.a-color-contrast) .app-bar{background:var(--black-band)} } /* 24 ─ REDUCED MOTION ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .sheet.is-entering{transform:none} } /* 25 ─ PRINT: built for a mailroom and a reader in a cell ─────────────────── */ @page{size:letter;margin:.65in .7in .7in; @top-left{font-family:Georgia,"Times New Roman",serif;font-size:9pt;color:#000;vertical-align:bottom;padding-bottom:6pt} @top-right{font-family:Georgia,"Times New Roman",serif;font-size:9pt;color:#000;vertical-align:bottom;padding-bottom:6pt} @bottom-left{content:"Surviving the Feds \2022 Free. Copy it. Mail it inside. Just don\2019t sell it.";font-family:Georgia,"Times New Roman",serif;font-size:9pt;color:#000} @bottom-right{content:"Page " counter(page) " of " counter(pages);font-family:Georgia,"Times New Roman",serif;font-size:10pt;font-weight:bold;color:#000} } @page:first{@top-left{content:none}@top-right{content:none}} @media print{ :root{--paper:#fff;--band:#fff;--silver:#888;--steel:#555;--graphite:#222;--ink:#000;--orange:#fff;--orange-ink:#000;--wash:#fff;--black:#000;--white:#fff;--on-orange:#000;--black-band:#fff} *,*::before,*::after{animation:none!important;transition:none!important} html,body{background:#fff!important;color:#000!important;font-size:12pt;line-height:1.4;padding:0!important;overflow:visible} p{margin:0 0 .6em} h1,h2,h3,h4,.qhead h2,.step-body > h3,.check .do,.sh h2{font-stretch:100%!important;letter-spacing:0!important;word-spacing:.06em} .prose p,.sec.g > p,.sec.g > ul,.sec.g > ol,.steps p,.page-body,.story-body,.checklist,.qa,.scope,.blank-table-wrap,.answer,.cpr,.warn,.signoff,.edu,.bookcard,.rulebox,.rulebook{max-width:none!important} .qa .ans p,.qa .ans{max-width:none} /* the print header already carries the title: no second H1 on paper */ .guide-open h1,.is-guide .opener h1,.is-hub .opener h1,.guide-open .kicker,.page-head h1,.story-head h1,.page-head .label.muted,.story-head .label{display:none} .form:not(.tool-blank),.appbox,.tool-hero{display:none!important} .topbar,.es-bar,.rail,.tabbar,.menu,.a11y,.toc-btn,.sheet,.scrim,.crumbs,.m-rail,.foot,.nextband,.pc,.sheet-top,.cl-meter,.sit,.readout,.quiz-btn,.path-tools, .plate,.btn,.btn-go,.btn-print,.buy,.back,.skip,.pv-note,.no-print,.st-go,.where,.dd-panel,.story-band,.go,.toc-fold,.note-side,.sn, .hero-portrait,.howto-strip,.frames-band,.mclock,.bl-photo,.so-photo,.more,.newsnote .nn-ico,.jump,.pc-how,.pv-tag,.rail-now,.print-fail{display:none!important} img,picture,.img-ph{display:none!important} .note-flow{display:block!important} .print-only{display:block!important;font-size:11pt;font-style:italic} a{color:#000;text-decoration:none} .wrap{max-width:none;padding:0} .m-align{padding:0!important} .print-head{display:block;border-bottom:2pt solid #000;padding-bottom:6pt;margin-bottom:10pt} .print-head .t{font-family:Georgia,serif;font-size:17pt;font-weight:bold;line-height:1.15} .print-head .m{font-family:Georgia,serif;font-size:10pt;margin-top:3pt} .print-legal{display:block;margin-top:6pt;padding-top:3pt;border-top:1pt solid #000;font-size:8.5pt;line-height:1.3;break-inside:avoid;break-before:avoid} .manual,.sec.g,.opener.g,.withnote{display:block!important;padding-right:0!important} .m-body{max-width:none} .sec.g > .sh,.sec.g > .wide{margin-right:0!important} h1,h2,h3,h4{break-after:avoid;color:#000} p,li{orphans:3;widows:3} .sec{padding-top:4pt} .sec.now{background:#fff!important;margin:0!important;padding:4pt 0 0!important;border-top:0} .opener .row{display:block} .bignum{display:none} .opener .kicker{display:none} .opener .dek{font-size:12pt;margin-top:4pt} .byline{display:block;border:0;padding:0;margin:4pt 0} .bl-who strong{display:inline;font-size:11pt} .bl-meta,.bl-facts{display:inline;font-size:10pt;color:#000;margin-left:6pt} .answer{border-left:4pt solid #000;padding:2pt 0 2pt 10pt;margin-top:8pt} .answer p{font-size:12.5pt;line-height:1.35} .cpr{border-top:.8pt solid #000;border-bottom:.8pt solid #000;padding:4pt 0;margin:6pt 0} .cpr p.cpr-t{font-size:10.5pt;line-height:1.35} .cpr-h{margin-bottom:2pt} .cpr-h .label{font-size:8.5pt} .cpr-ico{width:28pt;height:10pt} /* a section head never sits alone at the foot of a sheet */ .sh{border-top:2pt solid #000;padding-top:5pt;margin:6pt 0 5pt;break-inside:avoid;break-after:avoid} /* keep-with-next that Chrome honours: the head reserves an inch below itself */ .sh::after{content:"";display:block;height:1.1in;margin-bottom:-1.1in} .sh + *{break-before:avoid} .sh h2{font-size:15pt;gap:7pt;align-items:center} .sh-k{min-width:24pt;height:20pt;padding:0 4pt;background:#fff!important;color:#000!important;border:1.2pt solid #000;box-shadow:none!important;font-size:11pt!important;font-stretch:90%} .sh-t{padding-top:0!important} .sh.xl h2{font-size:16pt} .sh.sm h2{font-size:12pt} .sec h2,.sec-h{font-size:15pt} .note{background:none!important;border-left:3pt solid #000;padding:1pt 0 1pt 9pt;margin:6pt 0;break-inside:avoid;float:none!important;width:auto!important;margin-right:0!important} .note .label{display:inline;font-size:8.5pt;margin:0 6pt 0 0} .note blockquote,.note blockquote p{display:inline;font-size:11pt;margin:0} .note cite{display:inline;font-size:9pt;margin-left:6pt} .note .gloss{font-size:10pt;margin:3pt 0 0;padding-top:2pt} .note-mark{display:none} .rulebox,.rulebook{border-top:2pt solid #000;border-bottom:1pt solid #000;padding:5pt 0;margin:8pt 0;break-inside:avoid} .rulebox h3,.rulebook h3{font-size:13pt} .rb-text p{font-size:11.5pt} .rb-cols{grid-template-columns:1fr 1fr!important;gap:0 14pt} .rb-col + .rb-col{border-left:.8pt solid #000;border-top:0;padding:0 0 0 12pt} .warn{border:1.5pt solid #000;border-left-width:5pt;padding:4pt 8pt;margin:6pt 0;break-inside:avoid} .warn p{font-size:11pt;margin:0} .warn-h{font-size:12pt;margin:0 0 2pt} .say{background:#fff!important;color:#000!important;border:1.5pt solid #000;font-size:13pt;padding:4pt 8pt;break-inside:avoid} .say small{color:#000} .bookwords{background:#fff!important;color:#000!important;border:1.5pt solid #000;border-left-width:5pt;padding:4pt 8pt;break-inside:avoid} .bookwords .label,.bookwords .bw-src{color:#000;font-size:8.5pt} .bookwords .bw-t{font-size:12pt;font-weight:bold} .script{border:1.5pt solid #000;max-width:5.8in} .script-h{break-after:avoid;background:#fff;color:#000;border-bottom:1pt solid #000;padding:4pt 8pt} .script-text{font-size:12.5pt;line-height:2;padding:6pt 8pt} .script-foot{font-size:10pt;padding:4pt 8pt} .blank{display:inline-block;min-width:1.9in;border-bottom:1pt solid #000;color:#000;font-size:9pt} .scope-grid{border:1.5pt solid #000} .scope-grid li{padding:4pt 8pt;border-color:#000} .scope-grid b{font-size:13pt;margin-bottom:2pt} .scope-grid span{font-size:11pt} .scope{break-inside:avoid} .blank-table-wrap{break-inside:avoid;overflow:visible} .blank-table{border:1.5pt solid #000} .blank-table th{background:#fff;color:#000;border:1pt solid #000;font-size:10.5pt;padding:4pt 6pt} .blank-table td{height:22pt;border:1pt solid #000} .blank-table caption{font-size:9pt} /* cards print as one ruled column with run-in labels, flowing like text (a card may run onto the next sheet, never its title alone) */ .cards{margin:6pt 0 8pt;max-width:none} .cards-list{display:block} .card{border:1pt solid #000;margin:0 0 5pt;break-inside:auto;-webkit-box-decoration-break:clone;box-decoration-break:clone} .cd-head{break-inside:avoid;break-after:avoid} .cd-lead{break-before:avoid} .cd-head{grid-template-columns:20pt 1fr;column-gap:6pt;border-bottom:1pt solid #000} .cd-n{background:#fff!important;color:#000!important;border-right:1pt solid #000;font-size:11.5pt} .cd-t{font-size:11.5pt;padding:3pt 5pt 3pt 0} .cd-lead{font-size:10.5pt;line-height:1.35;padding:3pt 6pt 0} .cd-rows{padding:1pt 6pt 3pt} .cd-row,.cd-row:first-child{display:block;padding:2pt 0;border-top:.5pt solid #999;font-size:10.5pt;line-height:1.35} .cd-row:first-child{border-top:0} .cd-row dt{display:inline;margin:0 4pt 0 0;padding:0;font-size:7.5pt} .cd-row dt .ico{display:none} .cd-row dd{display:inline;font-size:10.5pt;line-height:1.35} .cd-show{margin:2pt -6pt;padding:2pt 6pt 2pt 4pt;border-left:2.5pt solid #000;background:#fff!important} .cd-src dd,.cd-src dd em{font-size:9pt} .sheet-box{border:1.5pt dashed #000;padding:6pt 8pt 2pt;margin:8pt 0;-webkit-box-decoration-break:clone;box-decoration-break:clone} .sheet-box::before,.sheet-box::after{display:none} .checklist{margin:4pt 0 8pt} .check-group{margin:0 0 8pt} .check-group h3{font-size:9.5pt;padding:3pt 0;border-bottom:1.2pt solid #000} .check label{grid-template-columns:18pt 1fr;gap:8pt;padding:5pt 0} .check li{break-inside:avoid;border-color:#999} input[type=checkbox]{-webkit-appearance:none;appearance:none;width:13pt!important;height:13pt!important;border:1.5pt solid #000!important;background:#fff!important;margin-top:1pt} input[type=checkbox]::after,input[type=checkbox]:checked::after{content:none!important;display:none} .check .do{font-size:12pt} .check .why{font-size:11pt;margin-top:1pt} .check input:checked + .ck-body .do,.steps li .step-body > h3{text-decoration:none!important} .steps{border-top:1.5pt solid #000} .steps > li{grid-template-columns:24pt 1fr;gap:9pt;padding:6pt 0;border-color:#999;break-inside:avoid-page} .step-k,.step-k .sq{width:22pt!important;height:22pt!important} .step-k .sq{border:1.5pt solid #000;background:#fff!important;color:#000!important;font-size:13pt} .step-k .sq::after{display:none!important} .step-k input{display:none!important} .step-body > h3{font-size:13.5pt;margin:2pt 0 3pt} .steps p{font-size:11.5pt;margin:0 0 3pt} .step-body .why,.steps p.why{font-size:11pt} /* clocks print as boxes two across that can run onto the next sheet (a grid would move whole) */ .clocks,.clocks.four{display:block!important;border:0;break-inside:auto;orphans:1;widows:1} .clock{display:inline-block!important;vertical-align:top;width:calc(50% - 5pt);margin:0 6pt 6pt 0;padding:6pt 8pt;border:1pt solid #000!important;break-inside:avoid} .clock:nth-child(2n){margin-right:0} .clock .cfig{font-size:17pt} .clock .cfig.word{font-size:13pt} .clock p{font-size:10.5pt} .cite{font-size:9pt;margin-top:2pt} .timeline{display:block!important;border:1.2pt solid #000;padding:6pt;break-inside:avoid} .fig{border:1.2pt solid #000;max-width:4.6in;margin:6pt 0;break-inside:avoid} .fig-floorplan,.fig-warrant-papers{max-width:none;display:grid;grid-template-columns:3.1in 1fr;align-items:start} .fig-floorplan .fig-art,.fig-warrant-papers .fig-art{grid-row:1 / span 2;border-right:1pt solid #000} .fig-floorplan figcaption,.fig-warrant-papers figcaption{border-top:0;display:block} .fig-warrant-papers .fig-legend{grid-column:2;grid-template-columns:1fr!important;border-top:0} .fig-warrant-papers figcaption{grid-column:2;border-top:1pt solid #000} .fig-floorplan figcaption b,.fig-warrant-papers figcaption b{display:block} .fig-art{padding:4pt} .fig figcaption{border-top:1pt solid #000;font-size:9.5pt;padding:4pt 6pt} .fig-legend{border-top:1pt solid #000;padding:2pt 6pt;grid-template-columns:1fr 1fr!important} .fig-legend li{font-size:9.5pt;padding:2pt 0;grid-template-columns:16pt 1fr;gap:5pt} .fig-legend b{width:13pt;height:13pt;font-size:9pt;background:#000;color:#fff} .fig-pair{grid-template-columns:1fr 1fr;gap:8pt;max-width:none} .fig-pair .fig{max-width:none} .fp-wide{display:block!important} .fp-tall{display:none!important} .fp-walk{stroke:#000} .fp-paper,.fg-wash{fill:#fff} .fg-here,.fg-yah rect{fill:#fff;stroke:#000} .fg-band{fill:#e6e6e6} .qa{border-top:1.5pt solid #000} .qa details{break-inside:avoid;border:0} .qa summary{min-height:0;padding:4pt 0 1pt;font-size:12pt} .qa summary::after{display:none} .qa .ans{font-size:11pt;padding-bottom:3pt} .qa details > *:not(summary){display:block!important} .qa details::details-content{content-visibility:visible;display:block} .signoff{margin-top:10pt;padding-top:5pt;border-top:1.5pt solid #000;break-inside:avoid} .so-line{font-size:13pt;display:inline} .so-who{display:inline;margin:0 0 0 6pt} .so-who span{font-size:13pt} .edu{font-size:9.5pt;margin:5pt 0 0;padding:4pt 0 0} .guide-end{padding-bottom:0} .bookband{padding:0;color:#000} .bookband .bookcard,.bookcard{display:block;border:1pt solid #000;padding:5pt 8pt;margin:8pt 0 0;break-inside:avoid;color:#000} .bookcard .label{display:inline;font-size:8.5pt;margin-right:6pt;color:#000!important} .bookcard h3{display:inline;font-size:12pt;margin:0 0 2pt} .bookcard p,.bookband .bookcard p{font-size:10.5pt;color:#000} .bookcard .disclose{font-size:9pt;color:#000} .band-ink,.band-ink a{background:#fff!important;color:#000!important} .endnotes{margin:10pt 0 0;break-before:auto} .endnotes .sh{break-after:avoid} .endnotes ol{columns:2;column-gap:.3in;font-size:9pt;line-height:1.28;padding-left:14pt;margin-top:3pt} .endnotes li{padding:1pt 0;border:0;break-inside:avoid} sup.fn a{color:#000;font-size:8.5pt;border:0} .files{display:block} .file{border:1pt solid #000;margin:8pt 0;break-inside:avoid} .file .ftab{position:static;display:inline-block;background:#fff;color:#000;border:1pt solid #000} .file::after{content:attr(data-addr);display:block;padding:0 8pt 5pt;font-size:9.5pt} .file .meta .m-pages .ico{display:none} /* tools are online-only: their section stays (numbers never skip), with one line saying where they are */ #s-tools .forms,#s-tools .appbox,#s-tools .intro{display:none!important} .rnbar{background:#fff;color:#000;border:1.5pt solid #000;margin:8pt 0} .rnbar .wrap{display:block!important;padding:6pt 8pt} .rn-say,.rn-keys a{background:#fff;color:#000;border:1pt solid #000} .rn-say small,.rn-say p,.rn-keys span{color:#000} .station::before,.station::after,.casepath::before,.ht-path::before,.ht-list li::before{background:#000} .sq{background:#fff!important;color:#000!important;border-color:#000} .vol .when{background:#fff;color:#000;border:1pt solid #000} .form{border:1pt solid #000;break-inside:avoid} .form-foot{border-top:1pt solid #000} /* every link a reader inside would ask for prints its short address (stations, Right now, tools, guides, books) */ a[data-short]::after{content:" \2014 " attr(data-short);font-weight:400} .paper-only{display:block!important} /* home: a two-sheet map of a federal case (foundation fix round 2). The quote, Right now with its addresses, every stage with its three first moves, its deadline and its address, then the tools, the guides and the books. Nothing that only works on a screen ("Tap...", the quiz). */ .hero-grid,.fw-sign{display:block!important} .is-home .hero{padding:0 0 4pt} .howto-compact,.howto-strip{display:none!important} /* "start with the orange band", "tap": screen how-to, not for paper */ .is-home .hero-tag{display:none} .fw-quote{font-size:13.5pt;line-height:1.25} .fw-sign{margin-top:3pt;font-size:9.5pt;line-height:1.3} .fw-sign strong{font-size:11pt;margin-right:5pt} .fw-sign strong,.fw-sign span{display:inline} .home-path{padding:0} .is-home .print-head{margin-bottom:6pt} .is-home .sh{margin:5pt 0 2pt;padding-top:3pt} .is-home .sh::after{display:none} .is-home .sh.xl h2{font-size:13.5pt;gap:6pt} .is-home .sh .sh-k{min-width:18pt;height:18pt} .is-home .sh .sh-k .ico{width:11pt;height:11pt} .is-home .intro{font-size:10.5pt;line-height:1.35;margin:0 0 4pt;max-width:none} .is-home .hero-q,.is-home .fw-sign,.is-home .fw-sign > div,.is-home .fw-quote{max-width:none} .is-home .home-path .intro:not(.paper-only),.is-home .tools-home .intro:not(.paper-only){display:none!important} .is-home .hp-head{display:block;margin:0 0 4pt} .is-home .hp-head .note{display:none} .rnbar{margin:4pt 0 2pt} .rnbar .label{font-size:8.5pt;margin:0 0 1pt} .rnbar h2{font-size:15pt;margin:0 0 2pt;line-height:1.1} .rnbar .lead{display:none} .rn-say{padding:2pt 7pt;margin:0 0 4pt} .rn-say small{font-size:8.5pt} .rn-say blockquote{font-size:13pt;margin:1pt 0} .rn-say p{font-size:10pt;margin:0} .rn-keys{display:grid!important;grid-template-columns:repeat(3,1fr);gap:0 10pt;margin:0} .rn-keys li{margin:0} .rn-keys a{display:block;min-height:0;height:100%;padding:2pt 0 0;border:0!important;border-top:.6pt solid #000!important} .rn-keys a .ico{display:none} .rn-keys strong{font-size:11pt} .rn-keys strong + span{display:none!important} .rn-keys a::after{display:block;content:attr(data-short);font-size:9pt;font-family:Georgia,serif;font-weight:700;margin-top:1pt} /* the path: one column, the line joining the stages; each stage's name with its address on the right, its deadline under it, then its three first moves. A stage never splits across sheets. */ .is-home .casepath{display:block!important} .is-home .station{break-inside:auto;padding:0 0 2pt} .is-home .station > a{break-inside:avoid;break-after:avoid} .st-moves li{break-inside:avoid} .is-home .station > a{display:grid;grid-template-columns:20pt minmax(0,1fr) auto;gap:0 8pt;align-items:start;min-height:0;padding:3pt 0 0;border-top:0!important} .is-home .station > a .st-text{display:contents} .is-home .station > a .st-name{grid-column:2;grid-row:1} .is-home .station > a .st-clock{grid-column:2 / span 2;grid-row:2} .is-home .station > a .sq{grid-row:1 / span 2} .is-home .station > a::after,.is-home .track-l::after{grid-column:3;grid-row:1;content:attr(data-short);font-family:Georgia,serif;font-weight:700;font-size:9.5pt;line-height:1.3;padding-top:1pt;text-align:right} .is-home .casepath .sq,.is-home .track-l .sq{width:20pt;height:20pt;font-size:12pt;border-width:1.5pt} .is-home .track-l .sq{border-style:double;border-width:3.5pt} .is-home .station::before,.is-home .station::after{left:9.25pt;width:1.5pt} .is-home .station::before{top:0;height:6pt} .is-home .station::after{top:6pt;height:calc(100% - 6pt)} .is-home .station:first-child::before,.is-home .station:last-child::after{display:none} .is-home .st-name{font-size:12pt;line-height:1.2} .is-home .st-desc{display:none} .is-home .st-clock{display:block;font-size:9.5pt;line-height:1.28;margin-top:0} .is-home .st-clock .ico{display:none} .st-moves{display:block!important;margin:1pt 0 0 28pt;padding:0 0 0 13pt;font-size:10pt;line-height:1.25} .st-moves li{margin:0;padding:0} .mv-addr{font-style:italic;white-space:nowrap} .is-home .track-l{display:grid;grid-template-columns:20pt minmax(0,1fr) auto;gap:0 8pt;align-items:start;min-height:0;margin:3pt 0 0;padding:4pt 0 0;border-top:1.5pt solid #000;break-after:avoid} .is-home .track-l .st-text{grid-column:2;grid-row:1} .is-home .track-l .st-desc{display:none} .l-moves{margin-left:28pt} /* tools and guides: one line each, with the address to ask for */ .tools-home{padding:0} .trows{display:grid;grid-template-columns:1fr 1fr;gap:0 18pt;border-top:1pt solid #000;margin:0;max-width:none} .trows li{break-inside:avoid;border:0} .trows a{display:block;min-height:0;padding:2pt 0 3pt} .trow-fig,.trow-r,.trow-go,.trow-d{display:none!important} .trow-t{font-size:11pt} .trows a::after,.toc-list a::after,.bookpair a::after{display:block;content:attr(data-short);font-family:Georgia,serif;font-size:9pt;line-height:1.3} .is-home .contents{padding:0} .toc-list a{display:grid;grid-template-columns:24pt 1fr;gap:0 8pt;padding:2pt 0;min-height:0} .toc-list .code{grid-row:1 / span 3;font-size:12pt} .toc-list .t{font-size:11pt;line-height:1.2} .toc-list .m{font-size:9pt;grid-column:2} .toc-list a::after{grid-column:2} .is-home .toc-list{display:grid;grid-template-columns:1fr 1fr;gap:0 18pt} .is-home .toc-list li{break-inside:avoid} .is-home .toc-list .m,.is-home .toc-list .t2{display:none} .is-home .contents .intro{display:none} /* the books: what each is for, one short block, no covers */ .books-home{padding:0} .books-home .intro{display:none} .bookpair{gap:4pt 18pt;break-inside:avoid} .bookpair li{break-inside:avoid} .bp-text .label{display:none} .bookpair a{display:block} .bp-t{font-size:12pt;margin:0} .bp-when{font-size:10pt;line-height:1.28} .mailnote{display:block;margin-top:3pt;padding:2pt 0 0;font-size:9.5pt;line-height:1.28;border-top:.6pt solid #000;border-bottom:0} .mailnote .ico{display:none} /* right now: each list on its own sheet, as the page promises */ .is-rightnow #left,.is-rightnow #call{break-before:page} /* story */ .pullq{margin:10pt 0;padding:6pt 0;border-top:1.5pt solid #000;border-bottom:1.5pt solid #000} .pullq blockquote p{font-size:16pt} .chapter{margin:10pt 0 0} .ch-mark b{background:#fff;color:#000;border:1pt solid #000} .ch-mark::after{background:#000;height:1.5pt} /* printing one sheet only ("Print just this list") */ html.print-sheet body > *:not(#print-only){display:none!important} #print-only{display:block!important} #print-only .sheet-line{display:block;font-size:9.5pt;margin:6pt 0 2pt;padding-top:4pt;border-top:.8pt solid #000} #print-only .endnotes{margin-top:8pt} } #print-only{display:none} /* 26 ─ THE NEW SITE'S CHROME ───────────────────────────────────────────────── The same markup and behaviour as the new site (s2/_core.php nav() and page_foot(); s2/assets/css/site.css): the top bar and the tab bar on phones and tablets, the rail from 1100px, the Spanish bar, the menu, the Display panel and the footer. Its icons are .ic (the manual's are .ico). */ .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-999px;top:8px;background:var(--orange);color:#111;padding:8px 14px;border-radius:8px;z-index:100;font-family:var(--text);font-size:18px;text-decoration:none} .skip:focus{left:8px} .ic{width:22px;height:22px;flex:none} .topbar,.tabbar,.rail,.menu,.a11y,.es-bar,.foot,.toc-btn{font-family:var(--text);line-height:1.55} :is(.topbar,.tabbar,.rail,.menu,.a11y,.foot) a{text-decoration:none;color:inherit} :is(.topbar,.tabbar,.rail,.a11y,.toc-btn) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} /* the shield, with a slow light sweep (as on the new site) */ .shield{position:relative;display:inline-block;line-height:0} .shield img{width:100%;height:auto} .shield::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 35%,rgba(255,236,205,.55) 48%,transparent 60%) no-repeat; background-size:300% 100%;background-position:150% 0; -webkit-mask:url(../img/sf-shield.svg) center/contain no-repeat;mask:url(../img/sf-shield.svg) center/contain no-repeat; animation:sweep 7s cubic-bezier(.2,.7,.2,1) infinite 1.2s} @keyframes sweep{0%{background-position:150% 0}28%{background-position:-50% 0}100%{background-position:-50% 0}} .shield--sm{width:40px}.shield--rail{width:52px} /* top bar (phones and tablets) */ .topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between; padding:10px 16px;background:var(--c-top);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--silver);color:var(--ink)} .topbar .brand{display:flex;align-items:center;gap:10px} .wordmark{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.07em;font-size:15px;line-height:1.05} .topbar-btns{display:flex;gap:8px;align-items:center} .topbar .menu-btn{width:46px;height:46px;border:1px solid var(--line2);border-radius:12px;display:grid;place-items:center} .topbar .a11y-btn{display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;border:1px solid var(--line2);border-radius:12px;font-size:14px;font-weight:600;color:var(--graphite)} .a11y-btn:hover{color:var(--ink)} /* the open menu sits under the top bar, so its button closes it */ body.menu-open .topbar{z-index:45} body.menu-open{overflow:hidden} /* the Spanish bar */ .es-bar{position:relative;z-index:20;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap; min-height:48px;padding:9px 16px;background:var(--es-bg);color:#2B2B2E;border-bottom:3px solid #C86A14;font-size:17px;line-height:1.25;text-align:center;text-decoration:none} .es-q{font-weight:700} .es-go{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#fff;background:#B95E14;padding:6px 14px;border-radius:999px} .es-go .ic{width:18px;height:18px} .es-bar:hover .es-go{background:#97470A} html.a-color-contrast .es-bar{background:#fff;color:#000;border-bottom-color:#000} html.a-color-contrast .es-go{background:#000;color:#fff} /* tab bar (phones and tablets) */ .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(6,1fr); background:var(--c-tab);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--silver); padding:6px 4px calc(6px + env(safe-area-inset-bottom))} .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;font-weight:600;line-height:1.3;color:var(--graphite);padding:6px 0;border-radius:10px;min-width:0;text-align:center} .tabbar [aria-current]{color:var(--orange-ink)} .rail{display:none} /* the menu */ .menu{position:fixed;inset:0;z-index:40;background:var(--c-menu);color:var(--ink);overflow:auto;overscroll-behavior:contain;padding:76px 18px 110px} .menu[hidden]{display:none} .menu-inner{max-width:640px;margin:0 auto} .menu-kicker{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--orange-ink);margin:0 0 12px} .menu-stages{list-style:none;display:grid;gap:8px;margin:0;padding:0} .menu-stages li{margin:0} .menu-stages a{display:flex;gap:14px;align-items:center;padding:13px 14px;background:var(--band);border:1px solid var(--silver);border-radius:12px;font-weight:600;line-height:1.35} .menu-stages b{font-family:var(--display);font-weight:700;color:var(--orange-ink);font-size:20px;width:20px;text-align:center;flex:none} .menu-stages small{display:block;font-weight:400;color:var(--graphite);font-size:13.5px} .menu-more{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:4px} .menu-more li{margin:0} .menu-more a{display:block;padding:12px 4px;border-bottom:1px solid var(--silver);color:var(--graphite);font-weight:600} /* the footer */ .foot{padding:26px 16px calc(100px + env(safe-area-inset-bottom));border-top:1px solid var(--silver);color:var(--dim);font-size:13.5px;line-height:1.6;margin-top:40px} main:has(> .nextband:last-child) + .foot{margin-top:0} .foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--graphite);font-size:14px} .foot p{max-width:62em;margin:0 0 8px} .foot-print{color:var(--graphite)} .foot-social{margin:6px 0 18px} .foot-follow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--orange-ink);margin-bottom:10px!important} .foot-social ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0} .foot-social li{margin:0} .foot-social a{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:50%;color:var(--ink);transition:border-color .2s,color .2s,background .2s} .foot-social a:hover{border-color:var(--orange);color:var(--orange-ink);background:rgba(232,134,43,.08)} .foot-social .ic{width:22px;height:22px} @media (min-width:700px){.foot{padding-left:40px;padding-right:40px}} /* the Display settings panel */ .a11y{position:fixed;z-index:60;right:12px;top:72px;width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 160px);overflow:auto; background:var(--card);color:var(--ink);border:1px solid var(--line2);border-radius:16px;padding:16px 18px 18px;box-shadow:var(--c-shadow);font-size:16px} .a11y[hidden]{display:none} .a11y-head{display:flex;justify-content:space-between;align-items:center} .a11y h2{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:17px;color:var(--orange-ink)} .a11y-x{width:40px;height:40px;display:grid;place-items:center;border-radius:10px} .a11y-note{font-size:14px;color:var(--graphite);margin:4px 0 10px} .a11y-set{border:0;border-top:1px solid var(--silver);padding:10px 0 8px;margin:0;min-width:0} .a11y-set legend{float:left;width:100%;font-weight:700;font-size:14.5px;margin-bottom:4px;padding:0;color:var(--ink)} .a11y-set legend+label{clear:both} .a11y-set label{display:flex;align-items:center;gap:10px;min-height:40px;font-size:1em;color:var(--ink);cursor:pointer} .a11y-set input{width:20px;height:20px;accent-color:#C86A14;flex:none;margin:0} .a11y-set input[type=checkbox]{appearance:auto;-webkit-appearance:auto;border:0;background:none} .a11y-set input[type=checkbox]:checked::after{content:none} .btn-ghost{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:12px;background:none;color:var(--ink);font:inherit;font-weight:600;cursor:pointer} .a11y-reset{margin-top:6px} /* Contents (guides and hubs, below 1100px): opens the "On this page" sheet, above the tab bar */ .toc-btn{position:fixed;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:35;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 13px; background:var(--ink);color:var(--paper);border:0;border-radius:999px;box-shadow:0 6px 18px rgba(30,20,5,.25);font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.02em;cursor:pointer} .toc-btn .ic{width:20px;height:20px} /* it waits until the reader has scrolled past the page's opening (site.js adds .toc-on) */ html.js-toc .toc-btn{opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,visibility .2s,transform .2s} html.js-toc.toc-on .toc-btn{opacity:1;visibility:visible;transform:none} .toc-btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px} body.has-toc .foot{padding-bottom:calc(150px + env(safe-area-inset-bottom))} /* large screens: the rail replaces the top bar and the tab bar */ @media (min-width:1100px){ body{padding-left:var(--navrail)} .topbar,.tabbar,.menu,.toc-btn{display:none!important} body.has-toc .foot{padding-bottom:34px} .rail{display:flex;flex-direction:column;align-items:center;position:fixed;inset:0 auto 0 0;width:var(--navrail);z-index:30; background:var(--c-rail);border-right:1px solid var(--silver);padding:22px 0 20px;overflow-y:auto} .rail-brand{margin-bottom:34px} .rail ul{list-style:none;display:grid;gap:6px;width:100%;margin:0;padding:0} .rail li{margin:0} .rail a,.rail .rail-print{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;margin:0 12px;border-radius:12px;color:var(--graphite);font-size:12.5px;font-weight:600;letter-spacing:.02em;line-height:1.3;transition:color .2s,background .2s} .rail ul a{margin:0 12px} .rail a:hover,.rail .rail-print:hover{color:var(--ink);background:var(--band)} .rail [aria-current]{color:var(--orange-ink);background:rgba(232,134,43,.09)} .rail .rail-print{margin-top:auto;width:calc(100% - 24px)} .rail .rail-print.a11y-btn{margin-top:0} .a11y{left:calc(var(--navrail) + 12px);right:auto;top:auto;bottom:16px;max-height:calc(100vh - 32px)} .es-bar{font-size:18px} .foot{padding:28px 56px 34px} } /* the menu has no button from 1100px; the rail is the nav */ /* Display settings: text size, font, spacing, links, movement (colors: section 23) */ @media screen{ html.a-text-lg :is(main,.foot){zoom:1.18} html.a-text-lg .a11y{font-size:19px} html.a-text-xl :is(main,.foot){zoom:1.38} html.a-text-xl .a11y{font-size:21px} /* the stage strip never wraps at normal size; zoomed, it may */ html:is(.a-text-lg,.a-text-xl) .strip{flex-wrap:wrap;row-gap:6px} html.a-font{--head:'Atkinson Hyperlegible',Verdana,sans-serif;--display:'Atkinson Hyperlegible',Verdana,sans-serif;--text:'Atkinson Hyperlegible',Verdana,sans-serif} html.a-font :is(h1,h2,.wordmark){text-transform:none;letter-spacing:0} html.a-space :is(main,.foot) :is(p,li,dd,label,td,small,span){line-height:1.9!important;letter-spacing:.06em!important;word-spacing:.16em!important} html.a-space :is(main,.foot) p{margin-bottom:1.2em} html.a-links :is(main,.foot,.menu) a:not(.btn):not(.btn-go):not(.btn-now){text-decoration:underline!important;text-underline-offset:3px} html.a-still *,html.a-still *::before,html.a-still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} } @media (prefers-reduced-motion:reduce){.shield::after{animation:none}} /* 27 ─ HEADLINES IN BLACK OPS ONE ─────────────────────────────────────────── h1 and h2 are set in Black Ops One, in capitals (section 2). It is a wide face, so every headline is smaller than the condensed face it replaces. An h2 that is really a label (.label, sheet heads) stays Barlow Condensed. */ .opener h1{font-size:clamp(30px,7.4vw,56px);line-height:1.04} .guide-open h1{font-size:clamp(26px,6.4vw,44px);line-height:1.08;max-width:18em} .page-head h1{font-size:clamp(28px,7vw,50px);line-height:1.06} .story-head h1{font-size:clamp(30px,8vw,68px);line-height:1.02} .vol h1.vol-t{font-size:clamp(26px,6vw,40px)} .vol .vol-t{font-size:clamp(21px,4.6vw,26px)} .sh h2{font-size:clamp(22px,5vw,30px);line-height:1.1} .sh.xl h2,.sec-h{font-size:clamp(25px,6vw,38px);line-height:1.06} .sh.sm h2{font-size:20px} .sh-t{padding-top:calc((46px - 1.1em) / 2)} .sh.xl .sh-t{padding-top:calc((52px - 1.06em) / 2)} .sh.sm .sh-t{padding-top:calc((36px - 1.1em) / 2)} .rnbar h2{font-size:clamp(25px,6.2vw,40px);line-height:1.04} .chapter h2{font-size:clamp(24px,5.4vw,34px)} .page-body h2{font-size:clamp(22px,4.4vw,28px)} .journal-stage h2{font-size:clamp(20px,4vw,24px)} .sg-sec > h2{font-size:24px} .sheet-head h2,.foot h2,h2.label,.a11y h2{text-transform:uppercase} @media print{ h1,h2{letter-spacing:.01em!important} } /* Footer links */ .foot-links{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px;padding:0} .foot-links a{font-family:var(--label,'Barlow Condensed'),sans-serif;font-size:15px;text-decoration:underline;text-underline-offset:3px} @media print{.foot-links{display:none}} /* Bottom bar and side margins on tablets (matches the main site) */ @media (min-width:600px) and (max-width:1099px){ :root{--gutter:40px} .tabbar{padding:8px 12px calc(8px + env(safe-area-inset-bottom))} .tabbar a,.tabbar button{font-size:15px;gap:4px;padding:8px 0} .tabbar .ic{width:28px;height:28px} } /* Byline: explains who is writing and why it isn't legal advice */ .bl-who .bl-meta{font-family:var(--text);font-size:15px;line-height:1.5;margin-top:2px} .bl-who .bl-meta cite{font-style:italic} .bl-who .bl-meta a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}