/* Theme Name: Thad Theme URI: https://thadkerkhoff.example Author: Kerkhoff project Description: Your Mortgage First Responder. A classic theme on purpose: the standing footer, the license number and the structured data belong in code where they cannot be edited by accident. Posts, series, stories and takeaways are yours to edit. Version: 1.0.0 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 8.1 License: Proprietary Text Domain: thad */ /* ========================================================================= Thad Kerkhoff, Your Mortgage First Responder Token layer. Every color and typeface here traces to docs/design-tokens.md. Do not add a value that is not in that file. ========================================================================= */ :root{ /* palette */ --amber:#F2A63B; --amber-lift:#FFBE5C; --brown-deep:#231402; --brown-deeper:#1B1000; --ink:#0C161B; --ink-body:#0F1D18; --ink-raised:#1A2A25; --ink-raised-2:#10201B; --slate:#22404B; --slate-deep:#132630; --teal:#218073; --steel:#89A3AB; --sage:#5C6E68; --sage-2:#6B7B75; --sage-3:#6C7A75; --sage-pale:#C3CCC5; --sage-pale-2:#C8D3D1; --sage-pale-3:#D6DEDC; --paper:#EDF1EF; --paper-warm:#E4E8E3; /* accent, split by job. Amber stays the one accent in both modes: as a fill, a bar or display type it is always amber. As small text on a light ground it cannot meet contrast, so it hands over to amber's own shadow. */ --accent-text:#F2A63B; --amber-display:#F2A63B; /* management pages sit a shade off the site ground in both modes */ --mgmt-ground:#0A1216; /* type */ --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Source Serif 4',Georgia,'Times New Roman',serif; --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; /* metrics */ --measure:34rem; --pad:clamp(1.25rem,5vw,4rem); --rail:8.5rem; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--body); font-size:1.0625rem; line-height:1.62; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,.mono,.btn,button,nav a,.eyebrow{font-family:var(--display)} p{margin:0 0 1.1em} a{color:inherit} img{max-width:100%;height:auto;display:block} ::selection{background:var(--amber);color:var(--brown-deeper)} /* accent-text, not amber: amber on paper is 1.79 to 1 and a focus ring has to clear 3 to 1. On the dark ground accent-text is amber anyway. */ :focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:2px} .skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--amber);color:var(--brown-deeper); font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase; padding:.75rem 1.25rem;text-decoration:none; } .skip:focus{left:0} .visually-hidden{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------- staging gate ------------------------------------------------ */ /* Driven by data-verified on . When facts are confirmed the flag flips to "true", every badge disappears, and only then may this reach production. */ .staging-bar{ background:var(--amber);color:var(--brown-deep); font-family:var(--mono);font-size:.75rem;line-height:1.6; letter-spacing:.01em; padding:.7rem var(--pad);text-align:center; padding-right:clamp(9rem,22vw,13rem); } .staging-bar b{font-weight:500;letter-spacing:.02em} .staging-bar .tag{ display:inline-block;font-weight:500;font-size:.625rem; letter-spacing:.16em;text-transform:uppercase; border:1px solid rgba(35,20,2,.35);border-radius:2px; padding:.1em .5em;margin-right:.6em;vertical-align:.05em; } html[data-verified="true"] .staging-bar{display:none} .tv{ display:inline-block;vertical-align:baseline; font-family:var(--mono);font-size:.5625rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase; color:var(--brown-deep);background:var(--amber); padding:.15em .5em;border-radius:2px;margin-left:.45em; white-space:nowrap; } .tv.missing{background:var(--slate);color:var(--paper)} html[data-verified="true"] .tv{display:none} /* ---------- shell ------------------------------------------------------- */ .wrap{max-width:72rem;margin-inline:auto;padding-inline:var(--pad)} main section{border-top:1px solid var(--slate)} /* The rail. On a phone it becomes a hairline the label sits against, so the device survives instead of collapsing into an orphaned line of text. */ .bay{ display:grid;grid-template-columns:var(--rail) 1fr; padding-block:clamp(3rem,7vw,6rem); } @media(max-width:820px){ .bay{grid-template-columns:1fr;gap:1.5rem} .stamp{border-left:2px solid var(--slate);padding-left:.9rem} } .stamp{font-family:var(--mono);font-size:.75rem;line-height:1.5;color:var(--steel)} .stamp b{display:block;color:var(--accent-text);font-weight:500;font-size:1.0625rem;letter-spacing:-.01em} .stamp span{display:block;text-transform:uppercase;letter-spacing:.13em;font-size:.625rem;margin-top:.35rem} .body-col{max-width:var(--measure)} .lede{font-size:1.15rem;color:var(--sage-pale-3);max-width:var(--measure)} h2{font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.06;letter-spacing:-.03em;font-weight:700;margin:0 0 1.1rem;max-width:24ch} h3{font-size:1.0625rem;letter-spacing:-.01em;margin:0 0 .5rem;font-weight:700} .eyebrow{ font-family:var(--mono);font-size:.6875rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text); margin:0 0 1rem; } /* ---------- nav --------------------------------------------------------- */ /* The header floats, which was Chris's ask: always have a menu. It is only possible because this header is short. If it ever grows a fourth row, it stops being sticky rather than eating a third of a phone screen. Below the switches at z-index 60, above everything else. */ .topbar{ background:var(--ink); border-bottom:1px solid transparent; transition:border-color .2s ease,box-shadow .2s ease; } /* It only sticks where it is short. On a desktop this header is about a hundred and sixty pixels, which is a fair price for always having the way back. On a phone the links wrap to two rows and the mark wraps to two lines, and a header that tall following you down the page takes a third of the screen to give you something you can reach by scrolling up. So below this width it behaves like a normal header, and the footer carries the same links for anybody who got to the bottom. */ @media(min-width:760px){ .topbar{position:sticky;top:0;z-index:50} html{scroll-padding-top:11rem} } /* Only once it is actually floating over something does it need an edge. */ body.scrolled .topbar{border-bottom-color:var(--slate);box-shadow:0 10px 30px rgba(0,0,0,.35)} /* The three things, always in view. Chris: they convince without arguing. They scroll sideways rather than stacking on a phone, because three lines of this at the top of every page would be a wall rather than a reassurance. */ .three{ margin:0;padding-bottom:.85rem; display:flex;gap:1.5rem;overflow-x:auto;scrollbar-width:none; font-family:var(--mono);font-size:.625rem;letter-spacing:.13em; text-transform:uppercase;color:var(--steel);line-height:1; /* On a phone the third one runs off the edge. Fade it rather than chop it, so it reads as more to see instead of as a bug. */ -webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%); mask-image:linear-gradient(to right,#000 88%,transparent 100%); } @media(min-width:760px){.three{-webkit-mask-image:none;mask-image:none}} .three::-webkit-scrollbar{display:none} .three span{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap} .three span::before{ content:"";width:5px;height:5px;border-radius:50%;flex:none; background:var(--amber);opacity:.75; } /* The lights switch is fixed to the top right corner and floats over whatever happens to be under it. It was landing on the apply button at around twelve hundred pixels and on Thad's own name on a phone. Reserve the corner rather than hope nothing grows into it. */ .topnav{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding-block:1.1rem;flex-wrap:wrap; padding-right:clamp(6.5rem,12vw,9.5rem); } @media(max-width:520px){.topnav{padding-right:5.5rem}} .mark{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1rem;text-transform:uppercase;text-decoration:none} .mark em{font-style:normal;color:var(--accent-text)} .mark-name{display:block} /* Job title and license number, under the first mention of his name on every page. Quiet type, but never smaller than the navigation beside it: a regulator reading this should not have to hunt for it. */ .mark-id{ display:block;margin-top:.3rem; font-family:var(--mono);font-weight:400;font-size:.6875rem; letter-spacing:.11em;color:var(--steel); } .navlinks{display:flex;gap:1.35rem;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);align-items:center} .navlinks a{text-decoration:none;padding-block:.35rem} .navlinks a:hover{color:var(--accent-text)} .navlinks a[aria-current="page"]{color:var(--paper);box-shadow:inset 0 -2px 0 var(--accent-text)} /* ---------- buttons ----------------------------------------------------- */ .btn{ display:inline-block;text-decoration:none;font-weight:700;font-size:.9rem; padding:.85rem 1.5rem;border:1.5px solid var(--amber);border-radius:2px; transition:background .18s ease,border-color .18s ease,color .18s ease; } .btn.solid{background:var(--amber);color:var(--brown-deeper)} .btn.solid:hover{background:var(--amber-lift);border-color:var(--amber-lift)} .btn.ghost{color:var(--accent-text)} .btn.ghost:hover{background:rgba(242,166,59,.12)} .cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem} /* ---------- hero -------------------------------------------------------- */ .hero{ display:grid;grid-template-columns:1fr clamp(20rem,30vw,27rem); gap:clamp(1.5rem,4vw,3.5rem);align-items:end; padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,5.5rem); } @media(max-width:900px){.hero{grid-template-columns:1fr}} h1{ font-size:clamp(2.6rem,8.6vw,6.4rem);line-height:.92;letter-spacing:-.045em; font-weight:800;text-transform:uppercase;margin:.6rem 0 0; } h1 .your{display:block;color:var(--amber-display)} .tagline{font-size:clamp(1.15rem,2.4vw,1.6rem);margin:1.4rem 0 0;max-width:26rem} /* The amber left bar means Thad is speaking. Nothing that is not his own words may use this class. Third parties use .quote-pale. */ .thad-bar{ border-left:2px solid var(--amber);padding-left:1rem; max-width:30rem;margin:1.9rem 0 0; } .proof{font-family:var(--mono);font-size:.8125rem;line-height:1.8;color:var(--steel);margin:0} /* The five things he writes, on a loop. Chris wanted them pulled out the way the handle is, to draw the eye back to that spot. The reel is a fixed height with all five stacked inside it and one shown at a time. Take the animation away, by preference or by an old browser, and the rules below collapse to a plain wrapped list of five links, which is what a screen reader reads either way. Nothing here is the only copy of anything. */ .loop{ margin:1.1rem 0 0;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap; font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em; text-transform:uppercase;color:var(--steel); } .loop-lead::after{content:"\00b7";margin-left:.55rem;color:var(--slate)} .loop-reel{display:inline-flex;flex-wrap:wrap;gap:.6rem} .loop-reel b{color:var(--accent-text);font-weight:500} /* The keyframes below divide the cycle into fifths, so the reel only runs when there are exactly five names in it. kb/04 says there are five series and the whole standing line is built on that, but a sixth would silently break the timing, and a silently broken loop is worse than a list. Six names and this falls back to the plain wrapped list, which was always the floor. */ @media(prefers-reduced-motion:no-preference){ .loop.is-five .loop-reel{ position:relative;display:block;height:1.6em;overflow:hidden; min-width:11.5rem; } .loop.is-five .loop-reel b{ --s:0; position:absolute;left:0;top:0;white-space:nowrap; opacity:0; /* Two and a half seconds each, so five is a twelve and a half second loop: long enough to read, slow enough to ignore. */ animation:reel 12.5s linear infinite both; animation-delay:calc(var(--s) * 2.5s); } } @keyframes reel{ 0%{opacity:0;transform:translateY(.5em)} 3%{opacity:1;transform:translateY(0)} 17%{opacity:1;transform:translateY(0)} 20%{opacity:0;transform:translateY(-.5em)} 100%{opacity:0;transform:translateY(-.5em)} } /* ---------- the map ----------------------------------------------------- */ /* What used to be here was a framed placeholder waiting on a photograph of Thad at his desk. The photograph never came, and a visitor gets more out of knowing whether their state is one of the five than out of a picture. Outlines are generated, see tools/make-us-map.py. The five states come from thad_licensed_states(), the same array the contact page and the structured data read, so this cannot end up showing a state the prose does not claim. Two movements, overlapping on purpose: Washington lights while the eastern states are still arriving, so the thing has some life in it rather than waiting its turn. The country comes in west to east, then his five light one at a time: a flash of the lifted amber settling to the flat one, which is the same gesture as a lamp coming on, and a ripple in the state's own outline. CSS only. Every step fills both ways, so the site wide prefers-reduced-motion rule lands on the finished map instead of an empty frame, and the whole thing works with scripting off. */ .licensed{ margin:0;border:1px solid var(--slate);background:var(--slate-deep); padding:1.1rem;overflow:hidden; /* When the first state lights, and how long between them. One place. */ --lit-in:.52s;--lit-step:.28s; } .usmap{display:block;width:100%;height:auto} /* Everywhere else. --w is how far across the country the state sits, nought at the Pacific and one at the Atlantic, so the sweep follows geography rather than the order the paths happen to be written in. */ .usmap .rest path{ --w:0; fill:var(--slate);stroke:var(--slate-deep);stroke-width:1.6;stroke-linejoin:round; animation:map-arrive .42s ease-out both; animation-delay:calc(.05s + var(--w) * .34s); } .usmap .st{--i:0;--w:0} /* His five arrive slate with their neighbours and then turn amber. Two animations: the first owns opacity, the second owns fill and transform, so they never argue over a property. */ .usmap .land{ fill:var(--slate);stroke:var(--slate-deep);stroke-width:1.8;stroke-linejoin:round; transform-box:fill-box;transform-origin:center; animation:map-arrive .42s ease-out both,map-lit .62s cubic-bezier(.16,.84,.3,1) both; animation-delay:calc(.05s + var(--w) * .34s),calc(var(--lit-in) + var(--i) * var(--lit-step)); } /* The state's own outline, thrown outwards once as it lights. A circle here read as a map pin. This reads as the state. */ .usmap .ripple{ fill:none;stroke:var(--amber);stroke-width:3; transform-box:fill-box;transform-origin:center; animation:map-ripple 1.15s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--lit-in) + var(--i) * var(--lit-step)); } /* Amber's own shadow, because small text on amber cannot carry the amber. */ .usmap text{ font-family:var(--mono);font-weight:600;font-size:32px;letter-spacing:.03em; fill:var(--brown-deep);text-anchor:middle; animation:map-tag .4s ease-out both; animation-delay:calc(var(--lit-in) + var(--i) * var(--lit-step) + .26s); } /* One glow around the five of them, blooming as the last one lands and then breathing on the site's own six second rhythm, so the map settles rather than freezes. Filtering the group costs one pass, not five. */ .usmap .lit{ animation:map-bloom .9s ease-out both,map-glow 6s ease-in-out infinite; animation-delay:calc(var(--lit-in) + 4 * var(--lit-step)),calc(var(--lit-in) + 4 * var(--lit-step) + .9s); } .licensed figcaption{margin-top:1.15rem} .licensed .k{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)} .licensed figcaption p{ margin:.5rem 0 0;color:var(--paper);font-size:.95rem;line-height:1.5; display:flex;flex-wrap:wrap;gap:0 .38rem; } .licensed figcaption span{ --i:0; animation:map-name .45s ease-out both; animation-delay:calc(var(--lit-in) + var(--i) * var(--lit-step) + .26s); } .licensed figcaption span+span::before{content:"\00b7";margin-right:.38rem;color:var(--steel)} @keyframes map-arrive{from{opacity:0}to{opacity:1}} /* The flash of the lifted amber settling to the flat one is a lamp coming on, which is the oldest idea on this site. */ @keyframes map-lit{ 0%{fill:var(--slate);transform:scale(1)} /* Slate is a blue grey and the lifted amber is nearly yellow, so the colours between them are olive. Get across that gap in fifty milliseconds and it reads as a switch. Linger in it and the state looks muddy on its way in. */ 8%{fill:var(--amber-lift)} 30%{fill:var(--amber-lift);transform:scale(1.05)} 100%{fill:var(--amber);transform:scale(1)} } @keyframes map-ripple{ 0%{opacity:0;transform:scale(1);stroke-width:3} 12%{opacity:.85} 100%{opacity:0;transform:scale(1.45);stroke-width:1} } @keyframes map-tag{from{opacity:0}to{opacity:1}} @keyframes map-name{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} @keyframes map-bloom{ 0%{filter:drop-shadow(0 0 0 rgba(242,166,59,0))} 40%{filter:drop-shadow(0 0 16px rgba(242,166,59,.55))} 100%{filter:drop-shadow(0 0 7px rgba(242,166,59,.32))} } @keyframes map-glow{ 0%,100%{filter:drop-shadow(0 0 7px rgba(242,166,59,.32))} 50%{filter:drop-shadow(0 0 12px rgba(242,166,59,.5))} } /* ---------- answer first ------------------------------------------------ */ .answer{font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.5;max-width:38rem;margin:0} .answer strong{color:var(--accent-text);font-weight:400} /* ---------- the three rooms --------------------------------------------- */ .rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--slate);border:1px solid var(--slate);margin-top:2.5rem} @media(max-width:820px){.rooms{grid-template-columns:1fr}} .room{background:var(--ink);padding:1.75rem 1.5rem 1.9rem;text-decoration:none;display:block;transition:background .2s ease} .room:hover,.room:focus-visible{background:var(--slate-deep)} .room .num{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--accent-text);text-transform:uppercase} .room h3{margin-top:1.1rem;font-size:1.25rem} .room .standing{font-style:italic;color:var(--accent-text);margin:.2rem 0 .8rem;font-size:1rem} .room p{font-size:.95rem;color:var(--sage-pale-2);margin:0} .room .go{display:block;margin-top:1.2rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)} /* ---------- on my desk -------------------------------------------------- */ .desk{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start} @media(max-width:760px){.desk{grid-template-columns:1fr}} .bignum{font-family:var(--display);font-weight:800;font-size:clamp(4.5rem,13vw,9rem);line-height:.82;letter-spacing:-.06em;color:var(--amber)} .bignum sub{font-size:.22em;vertical-align:super;letter-spacing:.05em;font-weight:500} .desk-cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-top:.9rem;max-width:14rem;line-height:1.7} .noforecast{border-top:1px solid var(--slate);margin-top:1.8rem;padding-top:1.2rem;font-style:italic;color:var(--accent-text);font-size:1.05rem;max-width:var(--measure)} /* ---------- social proof, pale box -------------------------------------- */ /* Third party words. Never the amber bar. */ .quote-pale{ background:var(--paper);color:var(--ink-body); border:1px solid var(--sage-pale);border-radius:2px; padding:1.6rem 1.75rem;max-width:38rem; } .quote-pale blockquote{margin:0;font-size:1.0625rem;line-height:1.6} .quote-pale .who{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase; color:var(--sage);margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--sage-pale); } .wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.25rem;margin-top:2.5rem} .story{border:1px solid var(--slate);padding:1.5rem;display:flex;flex-direction:column} .story.filled{background:var(--paper);color:var(--ink-body);border-color:var(--sage-pale)} .story.filled .who{color:var(--sage);border-top-color:var(--sage-pale)} .story .face{aspect-ratio:1;width:3.25rem;border-radius:50%;background:var(--slate-deep);border:1px solid var(--slate);display:grid;place-items:center;font-family:var(--mono);font-size:.55rem;color:var(--steel);letter-spacing:.08em;margin-bottom:1.1rem;text-align:center} .story.filled .face{background:var(--paper-warm);border-color:var(--sage-pale);color:var(--sage)} .story blockquote{margin:0;font-size:1rem;line-height:1.6} .story .who{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--steel);margin-top:auto;padding-top:1rem;border-top:1px solid var(--slate)} .story.open{opacity:.55} .story.open p{font-family:var(--mono);font-size:.75rem;color:var(--steel);letter-spacing:.05em;line-height:1.8} /* ---------- daylight flip: takeaways ------------------------------------ */ .daylight{background:var(--paper);color:var(--ink-raised-2);border-top:1px solid var(--paper)} .daylight .stamp{color:var(--sage)} .daylight .stamp b{color:var(--teal)} .daylight .lede{color:#2C3A36} .daylight h2{color:var(--ink-raised-2)} @media(max-width:820px){.daylight .stamp{border-left-color:var(--sage-pale)}} .takeaways{margin-top:2.25rem;border-top:1px solid var(--sage-pale)} .take{display:grid;grid-template-columns:6.5rem 1fr;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--sage-pale);align-items:baseline} @media(max-width:620px){.take{grid-template-columns:1fr;gap:.4rem}} .take .src{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sage)} .take q{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2.6vw,1.55rem);line-height:1.25;letter-spacing:-.035em;quotes:none;display:block} .take.pending q{font-family:var(--body);font-weight:400;font-style:italic;color:var(--sage-3);font-size:1rem;letter-spacing:0} .take a{color:inherit;text-decoration-color:var(--sage-pale);text-underline-offset:3px} .daylight .btn.ghost{color:var(--teal);border-color:var(--teal)} .daylight .btn.ghost:hover{background:rgba(33,128,115,.1)} /* ---------- faq --------------------------------------------------------- */ details{border-bottom:1px solid var(--slate);padding:1.1rem 0} summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline} summary::-webkit-details-marker{display:none} summary::after{content:'+';color:var(--accent-text);font-weight:500;font-size:1.3rem;line-height:1} details[open] summary::after{content:'\2013'} details p{margin:.9rem 0 .2rem;max-width:var(--measure);color:var(--sage-pale-2);font-size:1rem} /* ---------- article ----------------------------------------------------- */ .article{max-width:var(--measure);font-size:1.125rem} .article h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-top:2.6rem} .article .dateline{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--steel);line-height:1.9;margin-bottom:1.6rem} .article .dateline b{color:var(--accent-text);font-weight:500} .pull{ border-left:2px solid var(--amber);padding-left:1.25rem;margin:2.4rem 0; font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1.28;letter-spacing:-.025em; } .takeaway-card{ background:var(--paper);color:var(--ink-raised-2);border-radius:2px; padding:1.75rem;margin:2.8rem 0 0; } .takeaway-card .src{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin:0 0 .8rem} .takeaway-card q{font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1.25;letter-spacing:-.035em;quotes:none;display:block} /* ---------- series index ------------------------------------------------ */ .series{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1px;margin-top:2.5rem} .serie{background:var(--ink);box-shadow:0 0 0 1px var(--slate);padding:1.6rem 1.5rem;display:block;text-decoration:none} .serie:hover,.serie:focus-visible{background:var(--slate-deep)} .serie h3{color:var(--paper);font-size:1.15rem;margin-bottom:.4rem} .serie p{font-size:.95rem;color:var(--sage-pale-2);margin:0} .serie .count{display:block;margin-top:1rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)} .postlist{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--slate)} .postlist li{border-bottom:1px solid var(--slate);padding:1.5rem 0} .postlist .meta{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:0 0 .5rem} .postlist h3{font-size:1.25rem;margin:0 0 .4rem} .postlist h3 a{text-decoration:none} .postlist h3 a:hover{color:var(--accent-text)} .postlist p{font-size:.98rem;color:var(--sage-pale-2);margin:0;max-width:var(--measure)} /* ---------- contact / data ---------------------------------------------- */ .datalist{margin:2.5rem 0 0;border-top:1px solid var(--slate)} .datalist div{display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--slate);align-items:baseline} @media(max-width:620px){.datalist div{grid-template-columns:1fr;gap:.3rem}} .datalist dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)} .datalist dd{margin:0;font-size:1.0625rem} .datalist dd a{color:var(--accent-text)} /* ---------- form -------------------------------------------------------- */ .signup{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;max-width:32rem} .signup label{display:block} .signup label span{ display:block;margin-bottom:.4rem; font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em; text-transform:uppercase;color:var(--steel); } .signup input{ width:100%;font-family:var(--body);font-size:1rem;color:var(--paper); background:var(--slate-deep);border:1px solid var(--slate);border-radius:2px; padding:.85rem 1rem; } .signup input::placeholder{color:var(--steel)} .signup-go{margin:.4rem 0 0} .signup-go .btn{cursor:pointer;font-family:var(--display)} /* Off the page rather than display:none, because a field a robot cannot see at all is a field it does not bother filling in. */ .signup-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .signup-said{ border-left:2px solid var(--amber);padding:.1rem 0 .1rem 1rem;margin:0; font-size:1rem;line-height:1.6; } .signup-said.bad{border-left-color:#E06C4A;color:var(--paper)} .signup-said.good p{margin:0 0 .5rem} .signup-said.good p:last-child{margin:0;color:var(--steel);font-size:.95rem} .formnote{font-family:var(--mono);font-size:.6875rem;line-height:1.9;letter-spacing:.06em;color:var(--steel);margin-top:1rem;max-width:32rem} /* ---------- search and glossary ----------------------------------------- */ /* Chris, on the call: any library needs a Dewey Decimal system. The box is named rather than generic, and the placeholder does the labelling so the box can stay a box. */ .findbox{display:flex;gap:.6rem;margin-top:1.8rem;max-width:30rem;flex-wrap:wrap} .findbox label{flex:1 1 15rem;margin:0} .findbox input[type=search]{ width:100%;font-family:var(--body);font-size:1rem;color:var(--paper); background:var(--slate-deep);border:1px solid var(--slate);border-radius:2px; padding:.8rem 1rem;-webkit-appearance:none;appearance:none; } .findbox input[type=search]::placeholder{color:var(--steel)} .findbox button{ font-family:var(--display);font-weight:700;font-size:.85rem;cursor:pointer; color:var(--accent-text);background:none;border:1.5px solid var(--amber); border-radius:2px;padding:.8rem 1.4rem; } .findbox button:hover{background:rgba(242,166,59,.12)} .findstarts{ margin:1rem 0 0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em; text-transform:uppercase;color:var(--steel);line-height:2.1; } .findstarts span{margin-right:.3rem} .findstarts a{color:var(--accent-text);text-decoration:none;border:1px solid var(--slate);padding:.3rem .6rem;border-radius:2px;white-space:nowrap} .findstarts a:hover{border-color:var(--accent-text)} .glossary-jump{ margin:0 0 2rem;display:flex;flex-wrap:wrap;gap:.35rem; font-family:var(--mono);font-size:.75rem;letter-spacing:.1em; } .glossary-jump a{ color:var(--steel);text-decoration:none;border:1px solid var(--slate); border-radius:2px;padding:.3rem .55rem;min-width:2rem;text-align:center; } .glossary-jump a:hover{color:var(--accent-text);border-color:var(--accent-text)} .glossary{margin:0;max-width:44rem} .glossary .entry{border-top:1px solid var(--slate);padding:1.5rem 0;scroll-margin-top:2rem} .glossary .entry:first-child{border-top:0;padding-top:0} .glossary dt{ font-family:var(--display);font-weight:700;font-size:1.2rem; letter-spacing:-.02em;margin:0 0 .6rem; } .glossary dd{margin:0;line-height:1.65;color:var(--paper-warm)} .footfind{margin-top:2.5rem;max-width:26rem} .footfind .findbox{margin-top:0} .footglossary{ margin:2rem 0 0;font-family:var(--mono);font-size:.6875rem; letter-spacing:.08em;line-height:1.9;color:var(--steel); } .footglossary a{color:var(--accent-text)} :root[data-lights="on"] .findbox input[type=search]{background:#FFFFFF;border-color:#C3CCC5;color:#0F1D18} :root[data-lights="on"] .glossary dd{color:#1A2A25} /* ---------- the four doors ---------------------------------------------- One page per door, a selector across the top that is real links rather than tabs, so each keeps its own address and works with scripting off. The first build of this was four pages of prose, which told rather than showed. The second was a quiz, which made people answer four questions before they were allowed to read anything. This is the third shape and it is Stefano's: everything already on the page, nothing asked for. */ .doors{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--slate);border:1px solid var(--slate);margin-top:1.4rem} @media(max-width:760px){.doors{grid-template-columns:repeat(2,1fr)}} .door{ display:flex;flex-direction:column;gap:.4rem; padding:1rem 1.05rem 1.1rem;background:var(--ink);color:var(--steel); text-decoration:none;transition:background .18s ease,color .18s ease; } a.door:hover{background:var(--slate-deep);color:var(--paper)} .door .kind{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.02em;line-height:1.15;color:inherit} .door .who{font-family:var(--mono);font-size:.5625rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sage);line-height:1.5} .door.here{background:var(--amber);color:var(--brown-deep)} .door.here .kind{font-weight:800} .door.here .who{color:#5A3A08} .persona-head{padding-block:clamp(2.2rem,6vw,3.4rem) 0} .persona-head h1{ font-size:clamp(2.1rem,7vw,3.7rem);line-height:.97;letter-spacing:-.045em; text-transform:none;margin:.9rem 0 0;max-width:15ch; } .persona-head .lede{margin-top:1.2rem;max-width:40ch} .persona-head .eyebrow{color:var(--accent-text)} /* ---- fragments of a real week, drifting past -------------------------- Not a control and not a list. The point is the weight of them going by, so somebody reads three and thinks yes, that is me. Two rows in opposite directions so it never settles into something you read as a menu. */ .scene{margin-top:clamp(2rem,5vw,2.8rem)} .scene .k{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin:0 0 1rem} .tracks{ display:flex;flex-direction:column;gap:.55rem;overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); } .track{display:flex;gap:.55rem;width:max-content} @media(prefers-reduced-motion:no-preference){ .track{animation:drift 52s linear infinite} .track.back{animation-duration:64s;animation-direction:reverse} .tracks:hover .track,.tracks:focus-within .track{animation-play-state:paused} } @keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .tracks{-webkit-mask-image:none;mask-image:none} .track{flex-wrap:wrap;width:auto} .track [data-dupe]{display:none} } .bit{ display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;flex:none; font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--steel); background:var(--slate-deep);border:1px solid var(--slate);border-radius:2px; padding:.55rem .85rem; } .bit::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--amber);flex:none;opacity:.7} /* ---- what they say, what is true --------------------------------------- */ .saids{margin:2rem 0 0;padding:0;list-style:none} .said{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 2.4rem;padding:1.5rem 0;border-top:1px solid var(--slate)} .said:first-child{border-top:0;padding-top:0} @media(max-width:760px){.said{grid-template-columns:1fr;gap:.85rem}} .said .them{margin:0;font-style:italic;font-size:1.12rem;line-height:1.4;color:var(--paper-warm)} .said .them::before,.said .him::before{ content:attr(data-label);display:block;font-family:var(--mono);font-style:normal; font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-bottom:.5rem; } /* The amber bar only ever means Thad, and on this row it is his answer. */ .said .him{ margin:0;padding-left:1.1rem;border-left:2px solid var(--amber); font-family:var(--mono);font-size:.8125rem;line-height:1.8;color:var(--amber-lift); } .record{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--slate);border:1px solid var(--slate);margin:2rem 0} @media(max-width:760px){.record{grid-template-columns:repeat(2,1fr)}} .record div{background:var(--slate-deep);padding:1.2rem 1.1rem 1.3rem} .record b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,5vw,2.7rem);line-height:.95;letter-spacing:-.05em;color:var(--accent-text);font-variant-numeric:tabular-nums} .record span{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.5625rem;letter-spacing:.15em;text-transform:uppercase;color:var(--steel);line-height:1.6} .why{margin-top:0} .terms{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 0;padding:0;list-style:none} .term{ font-family:var(--display);font-weight:600;font-size:.92rem;cursor:pointer; background:var(--slate-deep);color:var(--paper);border:1px solid var(--slate);border-radius:2px; padding:.62rem .95rem;display:inline-flex;align-items:center;gap:.6rem; transition:border-color .16s ease,color .16s ease; } .term::after{content:"?";font-family:var(--mono);font-size:.75rem;color:var(--accent-text)} .term:hover{border-color:var(--amber);color:var(--amber-lift)} /* a glossary word where it stands in the prose */ .tt{background:none;border:0;padding:0;font:inherit;color:var(--amber-lift);cursor:pointer;border-bottom:1px dotted var(--amber)} .tt:hover{color:var(--accent-text)} :root[data-lights="on"] .door{background:#EDF1EF;color:#5C6E68} :root[data-lights="on"] a.door:hover{background:#E4E8E3;color:#0F1D18} :root[data-lights="on"] .door.here{background:#F2A63B;color:#231402} :root[data-lights="on"] .bit{background:#E4E8E3;border-color:#C3CCC5;color:#5C6E68} :root[data-lights="on"] .record div{background:#E4E8E3} :root[data-lights="on"] .term{background:#E4E8E3;color:#0F1D18;border-color:#C3CCC5} :root[data-lights="on"] .said .him{color:#231402} /* ---------- the glossary, floating -------------------------------------- */ .gloss-open{ position:fixed;right:clamp(.9rem,3vw,1.6rem);bottom:clamp(.9rem,3vw,1.6rem);z-index:40; display:flex;align-items:center;gap:.6rem;cursor:pointer; font-family:var(--display);font-weight:700;font-size:.85rem; background:var(--amber);color:var(--brown-deep); border:1.5px solid var(--amber);border-radius:2px;padding:.8rem 1.15rem; box-shadow:0 10px 34px rgba(0,0,0,.5),0 0 22px rgba(242,166,59,.22); } .gloss-open:hover{background:var(--amber-lift);border-color:var(--amber-lift)} .gloss-open i{width:.55rem;height:.55rem;border-radius:50%;background:var(--brown-deep);flex:none;opacity:.55} @media print{.gloss-open,.gloss{display:none}} .gloss-scrim{position:fixed;inset:0;z-index:45;background:rgba(6,12,15,.72);opacity:0;transition:opacity .28s ease} .gloss-scrim.on{opacity:1} .gloss{ position:fixed;z-index:50;top:0;right:0;height:100%;width:min(27rem,100%); background:var(--ink);border-left:1px solid var(--slate); display:flex;flex-direction:column; transform:translateX(101%);transition:transform .34s cubic-bezier(.16,.84,.3,1); box-shadow:-24px 0 60px rgba(0,0,0,.5); } .gloss.on{transform:none} @media(prefers-reduced-motion:reduce){.gloss,.gloss-scrim{transition:none}} .gloss header{position:relative;padding:1.3rem 1.3rem 1rem;border-bottom:1px solid var(--slate);flex:none} .gloss h2{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.03em;margin:0 0 .2rem} .gloss .k{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:0} .gloss-shut{ position:absolute;top:1.15rem;right:1.1rem;cursor:pointer; background:none;border:1px solid var(--slate);border-radius:2px;color:var(--steel); font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .6rem; } .gloss-shut:hover{border-color:var(--amber);color:var(--accent-text)} .gloss-find{padding:1rem 1.3rem;border-bottom:1px solid var(--slate);flex:none} .gloss-find input{ width:100%;font-family:var(--body);font-size:.98rem;color:var(--paper); background:var(--slate-deep);border:1px solid var(--slate);border-radius:2px;padding:.7rem .85rem; } /* If you are an X you should know Y. A veteran does not need shift differential explained and a retiree does not need the funding fee. */ .gloss-who{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem} .wh{ font-family:var(--mono);font-size:.5625rem;letter-spacing:.13em;text-transform:uppercase; cursor:pointer;background:none;color:var(--steel); border:1px solid var(--slate);border-radius:2px;padding:.4rem .55rem; } .wh:hover{border-color:var(--amber);color:var(--accent-text)} .wh[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--brown-deep)} .gloss-said{margin:.8rem 0 0;font-family:var(--mono);font-size:.625rem;line-height:1.8;letter-spacing:.06em;color:var(--steel)} .gloss-said:empty{display:none} .gloss-list{flex:1;overflow-y:auto;padding:.4rem 1.3rem 2.5rem} .gloss-entry{border-bottom:1px solid var(--slate)} .gloss-entry > button{ width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1rem 0; display:flex;justify-content:space-between;gap:1rem;align-items:baseline; font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--paper); } .gloss-entry > button::after{content:"+";font-family:var(--mono);color:var(--accent-text);font-size:1rem} .gloss-entry[data-open="yes"] > button::after{content:"\2212"} .gloss-entry[data-open="yes"] > button{color:var(--accent-text)} .gloss-entry .mean{margin:0;padding:0 0 1rem;font-size:.95rem;line-height:1.65;color:var(--paper-warm)} .gloss-entry .ask{margin:0 0 1.1rem;padding-left:.9rem;border-left:2px solid var(--amber);font-family:var(--mono);font-size:.75rem;line-height:1.75;color:var(--steel)} .gloss-entry .ask b{display:block;color:var(--sage);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin-bottom:.3rem} .gloss-entry.hit{background:linear-gradient(90deg,rgba(242,166,59,.1),transparent)} .gloss-none{font-family:var(--mono);font-size:.75rem;line-height:1.9;color:var(--steel);padding:1.4rem 0} :root[data-lights="on"] .gloss{background:#EDF1EF;border-left-color:#C3CCC5} :root[data-lights="on"] .gloss-find input{background:#FFFFFF;border-color:#C3CCC5;color:#0F1D18} /* ---------- footer ------------------------------------------------------ */ footer{border-top:1px solid var(--slate);padding-block:clamp(2.5rem,6vw,4rem) 2.5rem} .standing{font-size:1.2rem;line-height:1.5;max-width:30rem;margin:0} .standing .sig{ color:var(--accent-text);display:block;margin-top:.7rem;font-family:var(--mono); font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;line-height:2; } .footcols{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:start;flex-wrap:wrap} @media(max-width:760px){.footcols{grid-template-columns:1fr}} .footnav{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;line-height:2.4;color:var(--steel)} .footnav a{text-decoration:none} .footnav a:hover{color:var(--accent-text)} .legal{ margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--slate); font-family:var(--mono);font-size:.6875rem;line-height:2;color:var(--steel); letter-spacing:.03em;max-width:52rem; } .legal p{margin:0 0 .6rem} /* ------------------------------------------------------------------------- Lights on. Not a second palette. The same tokens with the dark family and the light family swapping jobs, which is exactly what the daylight flip already does for one section. So the night sections become paper, the daylight section becomes night, and the flip keeps meaning something. Amber is untouched as a fill, a bar and display type. Only small amber text changes, to amber's own shadow, because #F2A63B on paper is about 1.9 to 1 and the site has to pass AA. ---------------------------------------------------------------------- */ :root[data-lights="on"]{ --ink:#EDF1EF; --ink-body:#0F1D18; --ink-raised:#E4E8E3; --ink-raised-2:#EDF1EF; --slate:#C3CCC5; --slate-deep:#E4E8E3; --steel:#5C6E68; --sage:#89A3AB; --sage-2:#6B7B75; --sage-3:#6C7A75; --sage-pale:#22404B; --sage-pale-2:#1A2A25; --sage-pale-3:#0F1D18; --paper:#0F1D18; --paper-warm:#132630; --accent-text:#231402; --mgmt-ground:#EDF1EF; } /* Amber cannot carry text on paper. It is 1.79 to 1, which fails even the large text allowance, so in this mode it becomes a fill instead. Still the one accent, still amber, doing the job the token file actually gives it. */ :root[data-lights="on"] h1 .your{ background:var(--amber);color:var(--brown-deep); /* block so it keeps its own line, fit-content so the fill hugs the word */ display:block;width:fit-content;padding:0 .12em .04em;margin-bottom:.05em; } :root[data-lights="on"] .bignum{color:var(--accent-text)} :root[data-lights="on"] .bignum sub{color:var(--brown-deeper)} /* The few places that name a color outright rather than through a token. */ :root[data-lights="on"] .daylight{background:#0C161B;color:#EDF1EF;border-top-color:#0C161B} :root[data-lights="on"] .daylight .lede{color:#C8D3D1} :root[data-lights="on"] .daylight h2{color:#EDF1EF} :root[data-lights="on"] .daylight .take q{color:#EDF1EF} :root[data-lights="on"] .daylight .stamp b{color:#F2A63B} :root[data-lights="on"] .take a{color:inherit} :root[data-lights="on"] .quote-pale{background:#E4E8E3;color:#0F1D18;border-color:#C3CCC5} :root[data-lights="on"] .quote-pale .who{color:#5C6E68;border-top-color:#C3CCC5} :root[data-lights="on"] .story.filled{background:#E4E8E3;color:#0F1D18;border-color:#C3CCC5} :root[data-lights="on"] .story.filled .who{color:#5C6E68;border-top-color:#C3CCC5} :root[data-lights="on"] .story.filled .face{background:#EDF1EF;border-color:#C3CCC5;color:#5C6E68} :root[data-lights="on"] .takeaway-card{background:#0C161B;color:#EDF1EF} :root[data-lights="on"] .takeaway-card .src{color:#89A3AB} /* The map keeps its night ground in daylight: a pale country with amber states on it loses the five states, which are the whole point of it. */ :root[data-lights="on"] .licensed{background:#132630;border-color:#22404B} :root[data-lights="on"] .usmap .rest path{fill:#22404B;stroke:#132630} :root[data-lights="on"] .usmap .land{stroke:#132630} :root[data-lights="on"] .licensed .k{color:#89A3AB} :root[data-lights="on"] .licensed figcaption p{color:#EDF1EF} :root[data-lights="on"] .licensed figcaption span+span::before{color:#89A3AB} :root[data-lights="on"] .signup input{background:#FFFFFF;border-color:#C3CCC5;color:#0F1D18} :root[data-lights="on"] .signup label span{color:#5C6E68} :root[data-lights="on"] .signup-said.bad{color:#0F1D18} :root[data-lights="on"] .signup input::placeholder{color:#6B7B75} :root[data-lights="on"] .btn.solid{color:#231402} :root[data-lights="on"] .staging-bar{color:#231402} /* ------------------------------------------------------------------------- The switch. Fixed top right, on every page, remembers what you chose. ---------------------------------------------------------------------- */ /* The switches sit in a fixed pair so more can be added beside them. */ .topswitches{ position:fixed;top:.85rem;right:.85rem;z-index:60; display:flex;align-items:center;gap:.5rem; } .lights{ position:relative; display:inline-flex;align-items:center;gap:.55rem; font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase; color:var(--steel);background:var(--ink); border:1px solid var(--slate);border-radius:2px; padding:.5rem .75rem;cursor:pointer;line-height:1; box-shadow:0 2px 14px rgba(0,0,0,.28); transition:border-color .18s ease,color .18s ease; } .lights:hover{border-color:var(--accent-text);color:var(--accent-text)} .lights .bulb{ width:9px;height:9px;border-radius:50%;flex:none; background:var(--slate);box-shadow:none;transition:background .18s ease,box-shadow .18s ease; } :root[data-lights="on"] .lights .bulb{background:var(--amber);box-shadow:0 0 10px 2px rgba(242,166,59,.55)} .lights .off-label{display:inline} .lights .on-label{display:none} :root[data-lights="on"] .lights .off-label{display:none} :root[data-lights="on"] .lights .on-label{display:inline} @media(max-width:520px){ .topswitches{top:.6rem;right:.6rem;gap:.35rem} .lights{padding:.45rem .6rem;font-size:.5625rem;gap:.4rem} } @media print{.topswitches{display:none}} /* ---- the required footer ------------------------------------------------- */ /* A definite width, not a max-width: the image inside is 100 percent of the box, so an inline-block with only a max-width collapses to nothing. */ .cmg-mark{ background:#FFFFFF;border-radius:2px;padding:.4rem .55rem; display:inline-block;width:9.5rem;margin:0 0 1.4rem; } .cmg-mark img{width:100%;height:auto;display:block} .legal-who{color:var(--sage-pale-3);line-height:1.9} .legal-contact a{color:var(--accent-text)} .legal-corporate{max-width:52rem;line-height:1.95} .legal-corporate a{color:var(--steel);text-underline-offset:3px} .legal-links{margin-top:1rem} .legal-links a{color:var(--accent-text);margin-right:1.4rem;display:inline-block;text-underline-offset:3px} .legal-note{margin-top:1.2rem;color:var(--sage);max-width:52rem} /* ------------------------------------------------------------------------- WordPress specifics. Editor output, alignment classes and the bits the block editor emits that the static build never had to deal with. ---------------------------------------------------------------------- */ .article > *:first-child{margin-top:0} .article img,.article figure{margin:2rem 0} .article figure{max-width:100%} .article figcaption{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-top:.7rem} .article ul,.article ol{padding-left:1.3em;margin:0 0 1.2em} .article li{margin-bottom:.5em} .article a{color:var(--amber);text-underline-offset:3px} .article blockquote{margin:2rem 0;padding-left:1.25rem;border-left:1px solid var(--slate);font-style:italic;color:var(--sage-pale-3)} .alignwide{max-width:52rem} .alignfull{max-width:none} .aligncenter{margin-inline:auto} .wp-block-image img{border-radius:2px} .admin-bar .staging-bar{position:relative} /* paginate_links with type=list returns