/* Two voices, deliberately. * * --serif EB Garamond — the book's voice. His words, the headings, the * narrative. Matches the printed interior exactly. * --sans Inter — the apparatus. Labels, citations, dates, buttons, fine * print. Anything that is the *building* talking rather than the * book. * * The previous version set everything in Garamond, including 11px uppercase * labels tracked out to .28em. An old-style face with that small an x-height * goes to spindly threads at those sizes — which is what made the page read * faint and unfinished. Garamond above ~18px, Inter below it. */ :root{ --serif:"EB Garamond",Georgia,serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --ink:#16110c; --ink-soft:#5c5046; --ink-faint:#8a7c6e; --cream:#f7f2e9; --paper:#efe6d6; --sky:#062f54; --sky-deep:#04223e; --night:#0a1a2b; --clay:#a34a25; --clay-br:#c85f30; --gold:#d6ad63; /* Each book's page wears its own jacket's colour: Chief is navy, Walk Easy is clay. Set `class="warm"` on to switch. The rgb triples are for the hero's gradient scrims, which need rgba() and so cannot take a hex. */ --bg-hero:var(--sky-deep); --bg-hero-top:3,18,34; --bg-hero-mid:4,30,54; --bg-hero-bot:4,20,36; --bg-hero-side:3,17,32; --bg-quotes:var(--night); --bg-cta:var(--sky); --bg-footer:var(--sky-deep); --foot-link:#b9cbdc; --foot-text:#8ba3ba; --also-text:#a8bed4; --cta-text:#cfdcea; } /* Walk Easy. Deep warm browns rather than navy, landing on the same clay the jacket's band uses for the call to action. */ body.warm{ --bg-hero:#3B1A0B; --bg-hero-top:38,15,6; --bg-hero-mid:64,26,11; --bg-hero-bot:30,12,5; --bg-hero-side:34,13,5; --bg-quotes:#241004; --bg-cta:#8A3A1C; --bg-footer:#4E220E; --foot-link:#e6c9ae; --foot-text:#c2a189; --also-text:#dcbfa4; --cta-text:#f2ddca; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--cream);color:var(--ink); font-family:var(--serif);font-size:20px;line-height:1.66; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .wrap{max-width:1120px;margin:0 auto;padding:0 30px} .narrow{max-width:660px;margin:0 auto} h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.008em;margin:0} p{margin:0 0 1.15em} a{color:var(--clay);text-decoration:none;border-bottom:1px solid rgba(163,74,37,.3); transition:color .2s,border-color .2s} a:hover{color:var(--clay-br);border-color:var(--clay-br)} /* The one label style, used everywhere. Small, sans, tracked, and actually legible — the thing the old page got wrong most often. */ .label{font-family:var(--sans);font-size:.685rem;font-weight:600; text-transform:uppercase;letter-spacing:.19em;line-height:1.5; color:var(--clay);margin:0 0 1.1em} .label.on-dark{color:var(--gold)} /* ── Hero ─────────────────────────────────────────────── */ .hero{position:relative;background:var(--bg-hero);color:var(--cream); overflow:hidden;padding:104px 0 112px} .hero::before{content:"";position:absolute;inset:0; /* Root-absolute on purpose: url() in a stylesheet resolves against the stylesheet, not the document. A relative path here 404s from /walkeasy/ and from /css/ alike — which is exactly what happened on extraction. */ background:url('/img/hero-wide.jpg?v=b6a96ed0') 72% 26% / cover no-repeat; opacity:.3;filter:saturate(.72) contrast(1.05)} /* Darkest at the left, where the cover sits, so the jacket has something to stand against; opens up to the right where the photograph is worth seeing. */ .hero::after{content:"";position:absolute;inset:0; background: linear-gradient(180deg,rgba(var(--bg-hero-top),.9) 0%,rgba(var(--bg-hero-mid),.5) 42%,rgba(var(--bg-hero-bot),.95) 100%), linear-gradient(90deg,rgba(var(--bg-hero-side),.86) 0%,rgba(var(--bg-hero-side),.3) 46%,rgba(var(--bg-hero-side),.12) 100%)} .hero .wrap{position:relative;z-index:1;display:grid; grid-template-columns:340px 1fr;gap:76px;align-items:center} .book{width:340px;height:auto;border-radius:2px;display:block; box-shadow:0 1px 2px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.4), 0 34px 70px -14px rgba(0,0,0,.8); transform:rotate(-1.2deg); transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s} .book:hover{transform:rotate(0) translateY(-8px); box-shadow:0 1px 2px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.4), 0 46px 88px -14px rgba(0,0,0,.85)} .hero h1{font-size:clamp(3.1rem,7.6vw,5.1rem);font-weight:500; text-transform:uppercase;letter-spacing:.15em;text-indent:.15em; margin:.1em 0 .3em;color:#fdfaf4} .hero .sub{font-family:var(--serif);font-size:clamp(1.15rem,2.6vw,1.5rem); font-style:italic;color:#e9dfcd;margin:0 0 1.15em;line-height:1.35} .hero .byline{font-family:var(--sans);font-size:.72rem;font-weight:600; text-transform:uppercase;letter-spacing:.2em;color:var(--gold); margin:0 0 1.9em;padding-top:1.25em;position:relative} .hero .byline::before{content:"";position:absolute;top:0;left:0; width:52px;height:1px;background:rgba(214,173,99,.55)} .hero .blurb{color:#e0d5c3;max-width:44ch;margin:0 0 1.7em;font-size:1.06rem;line-height:1.62} .hero .status{font-family:var(--sans);font-size:.66rem;font-weight:500; text-transform:uppercase;letter-spacing:.2em;color:rgba(232,216,188,.62);margin:0} @media(max-width:880px){ .hero{padding:58px 0 76px} .hero .wrap{grid-template-columns:1fr;gap:36px;text-align:center;justify-items:center} .hero .blurb{margin-inline:auto} .hero .byline::before{left:50%;transform:translateX(-50%)} .book{width:216px} /* Stacked, the blurb is six lines and shoves the signup off the screen. Reorder so the form sits directly under his name and the blurb reads after it — the ask stays above the fold on a phone, which is where nearly all of this traffic lands. */ .hero .wrap > div{display:flex;flex-direction:column;align-items:center;width:100%} .hero .label {order:1} .hero h1 {order:2} .hero .sub {order:3} .hero .byline {order:4;margin-bottom:1.35em} .hero .notify {order:5;margin-top:0} .hero .blurb {order:6;margin:2.1em 0 1.1em} .hero .status {order:7} } /* ── Sections ─────────────────────────────────────────── */ section{padding:104px 0} h2{font-size:clamp(1.65rem,4vw,2.2rem);margin:0 0 .65em} .lede{font-size:1.36rem;line-height:1.56;margin:0} .lede strong{font-weight:600} /* ── The arc — a timeline, not a table ────────────────── */ .arc{list-style:none;display:grid;grid-template-columns:repeat(5,1fr); margin:4rem 0 0;padding:0;position:relative} .arc::before{content:"";position:absolute;left:0;right:0;top:12px;height:1px; background:linear-gradient(90deg,transparent 0,rgba(22,17,12,.2) 10%, rgba(22,17,12,.2) 90%,transparent 100%)} .arc li{position:relative;padding:38px 8px 0;text-align:center} .arc li::before{content:"";position:absolute;top:5px;left:50%; margin-left:-7px;width:14px;height:14px;border-radius:50%; background:var(--cream);border:2px solid rgba(163,74,37,.55)} .arc li:last-child::before{background:var(--clay);border-color:var(--clay)} .arc b{display:block;font-family:var(--serif);font-size:1.62rem; font-weight:500;letter-spacing:.005em;line-height:1} .arc span{display:block;margin-top:.62em;font-family:var(--sans); font-size:.68rem;font-weight:500;text-transform:uppercase; letter-spacing:.115em;line-height:1.45;color:var(--ink-soft)} @media(max-width:720px){ .arc{grid-template-columns:repeat(2,1fr);row-gap:34px} .arc::before{display:none} .arc li{padding-top:0} .arc li::before{display:none} } /* ── Quotes — the centrepiece, on the exhibit wall ────── */ .quotes{background:var(--bg-quotes);color:#f0e7d8;position:relative} .quotes::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 50% 0%,rgba(214,173,99,.07),transparent 62%)} .quotes .wrap{position:relative;z-index:1} .quotes .label{margin-bottom:2rem} blockquote{margin:0;padding:0} blockquote p{font-family:var(--serif);font-weight:400; font-size:clamp(1.34rem,3vw,1.72rem);line-height:1.44;margin:0; text-wrap:balance;color:#f5eddf} blockquote cite{display:block;margin-top:1.05rem;font-style:normal; font-family:var(--sans);font-size:.66rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:rgba(214,173,99,.82)} /* The same clay diamond the printed interior uses between passages. */ blockquote + blockquote{margin-top:3.1rem;padding-top:3.1rem;position:relative} /* The "/ \"\"" gives the glyph empty alt text so it is not read aloud. */ blockquote + blockquote::before{content:"\25C6" / "";position:absolute;top:0; left:50%;transform:translateX(-50%);font-size:.5rem; color:var(--clay-br);opacity:.75;line-height:1} /* ── From his son ─────────────────────────────────────── */ .method{background:var(--paper)} .method p{color:#3d342c;font-size:1.06rem;line-height:1.68} .method .sig{font-family:var(--serif);font-style:italic;font-size:1.14rem; color:var(--clay);margin:1.9rem 0 0} /* ── CTA / footer ─────────────────────────────────────── */ .cta{background:var(--bg-cta);color:var(--cream);text-align:center;padding:100px 0 88px} .cta h2{color:#fdfaf4} .cta > .wrap > p{color:var(--cta-text);max-width:42ch;margin:0 auto 2.9rem;font-size:1.06rem} /* ── Notify ───────────────────────────────────────────── */ .notify{max-width:400px;margin:0 auto;text-align:center} .notify .label{color:var(--gold);margin:0 0 1.35rem} .notify .field{margin-bottom:.5rem} .notify input{width:100%;background:rgba(255,255,255,.05); border:1px solid rgba(245,239,230,.2);border-radius:3px;color:#fdfaf4; padding:.72rem .9rem;font-family:var(--sans);font-size:.94rem; text-align:center;transition:border-color .22s,background .22s; -webkit-appearance:none;appearance:none} .notify input:focus{outline:0;border-color:var(--gold);background:rgba(255,255,255,.09)} .notify input::placeholder{color:rgba(245,239,230,.45)} .notify button{width:100%;margin-top:.95rem;background:var(--clay); border:1px solid var(--clay);color:#fdfaf4;padding:.78rem 1rem; border-radius:3px;font-family:var(--sans);font-size:.84rem;font-weight:600; letter-spacing:.075em;text-transform:uppercase;cursor:pointer; -webkit-appearance:none;appearance:none; transition:background .22s,border-color .22s,transform .12s} .notify button:hover{background:var(--clay-br);border-color:var(--clay-br)} .notify button:active{transform:translateY(1px)} .notify button:disabled{opacity:.55;cursor:default} .notify .msg{min-height:1.5em;margin:1rem 0 0;font-family:var(--serif); font-style:italic;color:var(--gold);font-size:1.02rem} .notify .fine{font-family:var(--sans);font-size:.72rem;line-height:1.65; color:rgba(245,239,230,.5);margin:.75rem 0 0} /* compact variant, in the hero */ .notify.compact{max-width:440px;margin:2rem 0 0;text-align:left} .notify.compact .inline{display:flex;gap:10px;align-items:stretch;flex-wrap:nowrap} .notify.compact .field{flex:1 1 auto;margin:0} .notify.compact input{text-align:left;height:100%} .notify.compact button{width:auto;flex:0 0 auto;margin:0;padding:.72rem 1.25rem} .notify.compact .msg{font-size:.96rem;margin:.7rem 0 0;min-height:1.3em} @media(max-width:880px){ .notify.compact{margin-inline:auto;text-align:center} .notify.compact .inline{flex-wrap:wrap;justify-content:center} .notify.compact input{text-align:center} .notify.compact button{width:100%} } .also{font-family:var(--sans);margin:3rem auto 0;font-size:.82rem; color:var(--also-text);max-width:36ch;line-height:2.1;letter-spacing:.01em} .also a{color:var(--foot-link);border-bottom:1px solid color-mix(in srgb,var(--foot-link) 34%,transparent);margin:0 .45rem} .also a:hover{color:#fff;border-color:#fff} footer{background:var(--bg-footer);color:var(--foot-text);text-align:center; padding:44px 0 52px;font-family:var(--sans);font-size:.76rem;line-height:1.85} footer p{margin:0} footer a{color:var(--foot-link);border-color:color-mix(in srgb,var(--foot-link) 32%,transparent)} footer a:hover{color:#fff;border-color:#fff} @media(prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} } /* ══════════════════════════════════════════════════════════════════════ Shared beyond the Chief page from here down. ══════════════════════════════════════════════════════════════════════ */ /* ── Meta line: pub date, price, extent ───────────────────────────── */ .meta{display:flex;gap:0;margin:1.6em 0 0;padding:0;list-style:none; flex-wrap:wrap;border-top:1px solid rgba(245,239,230,.16)} .meta li{padding:.85em 1.5em .85em 0;margin-right:1.5em; border-right:1px solid rgba(245,239,230,.16)} .meta li:last-child{border-right:0;margin-right:0;padding-right:0} .meta b{display:block;font-family:var(--sans);font-size:.62rem;font-weight:600; text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin-bottom:.35em} .meta span{font-family:var(--serif);font-size:1.12rem;color:#e9dfcd} @media(max-width:880px){.meta{justify-content:center}} /* ── Sources: what the book is made of ────────────────────────────── */ .sources{list-style:none;padding:0;margin:1.8rem 0 0} .sources li{position:relative;padding:0 0 .85em 1.5em;font-size:1.02rem; line-height:1.6;color:#3d342c} .sources li::before{content:"\25C6" / "";position:absolute;left:0;top:.52em; font-size:.42rem;color:var(--clay);opacity:.65} /* ── For teachers ─────────────────────────────────────────────────── */ .teachers{background:var(--cream);border-top:1px solid rgba(22,17,12,.1)} .gap{margin:0 0 2.4rem;padding:1.5rem 0 1.5rem 1.5rem; border-left:3px solid var(--clay);background:rgba(163,74,37,.045)} .gap p{margin:0;font-size:1.08rem;line-height:1.62} .gap strong{font-weight:600} .maps{list-style:none;padding:0;margin:1.6rem 0 0;display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem 2rem} .maps li{border-top:1px solid rgba(22,17,12,.14);padding-top:.9rem} .maps b{display:block;font-family:var(--sans);font-size:.66rem;font-weight:600; text-transform:uppercase;letter-spacing:.14em;color:var(--clay);margin-bottom:.45em} .maps span{display:block;font-size:.98rem;line-height:1.55;color:var(--ink-soft)} .questions{margin:1.6rem 0 0;padding:0 0 0 1.3em} .questions li{margin:0 0 1em;line-height:1.58;font-size:1.04rem} .questions li::marker{color:var(--clay);font-family:var(--sans);font-size:.82rem} .note{margin:2.4rem 0 0;padding:1.1rem 1.3rem;border:1px solid rgba(22,17,12,.16); border-radius:3px;font-size:.96rem;line-height:1.6;color:var(--ink-soft)} .note b{color:var(--ink);font-weight:600} /* ── Print: teachers will print the guide ─────────────────────────── */ @media print{ .hero,.cta,footer,.quotes,.notify,.also{display:none!important} body{background:#fff;color:#000;font-size:11pt} section{padding:0 0 1.5rem} .teachers{background:#fff;border:0} .gap{background:none;border-left:2px solid #000} .maps{grid-template-columns:repeat(2,1fr)} a{color:#000;border:0} .print-only{display:block!important} } .print-only{display:none} /* Meta line on a light ground (the teachers band uses it for reading level). */ .meta.light{border-top-color:rgba(22,17,12,.16);margin:1.9em 0 .4em} .meta.light li{border-right-color:rgba(22,17,12,.14)} .meta.light b{color:var(--clay)} .meta.light span{color:var(--ink)} /* ── Companion book, featured on the other book's page ────────────── */ /* ── Companion book ───────────────────────────────────────────────── A card on the existing paper, not a full-bleed band of its own. It was deep brown, which put two saturated darks — brown, then the navy call to action — against each other with a hard edge between them. That reads muddy no matter which browns and navies you pick, so the fix is not a third colour: it is not introducing a second dark at all. On paper the amber jacket has all the contrast it needs, and the page closes with one clean light-to-dark transition instead of two competing ones. */ .companion{background:var(--paper);color:var(--ink);padding:14px 0 104px} .companion .wrap{max-width:820px} .companion .card-inner{background:#fbf7ef;border:1px solid #e2d5bf; border-top:3px solid var(--clay);border-radius:2px;padding:34px 38px} .companion.with-cover .card-inner{display:grid;grid-template-columns:186px 1fr; gap:38px;align-items:center} .companion.with-cover img{width:186px;height:auto;display:block;border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.2),0 14px 30px -10px rgba(0,0,0,.35); transition:transform .5s cubic-bezier(.2,.8,.2,1)} .companion.with-cover a:hover img{transform:translateY(-4px)} .companion .label{color:var(--clay)} .companion h2{color:var(--ink);margin:0 0 .45em} .companion p{color:var(--ink-soft);font-size:1.04rem;line-height:1.6;margin:0 0 1.4em} .companion .also-dl{font-family:var(--sans);font-size:.8rem;margin:1rem 0 0; color:var(--ink-faint)} .companion .also-dl a{color:var(--clay);border-bottom-color:rgba(163,74,37,.35)} @media(max-width:820px){ .companion{padding:8px 0 76px} .companion .card-inner, .companion.with-cover .card-inner{grid-template-columns:1fr;gap:26px; text-align:center;justify-items:center;padding:30px 26px} .companion p{margin-inline:auto} } /* Button on a light ground — the .btn above is for the dark companion bands. */ /* Base button. Lives here rather than inside a section block — it was defined inside the old companion band and vanished with it when that band was replaced, leaving the call to action rendering as a bare underlined link. */ .btn{display:inline-block;font-family:var(--sans);font-size:.8rem;font-weight:600; text-transform:uppercase;letter-spacing:.09em;padding:.8rem 1.5rem;border-radius:3px; background:var(--clay);color:#fdf6ec;border:1px solid var(--clay); transition:background .22s,border-color .22s,color .22s} .btn:hover{background:var(--clay-br);border-color:var(--clay-br);color:#fff} .btn.ink{background:var(--clay);color:#fdf6ec;border-color:var(--clay)} .btn.ink:hover{background:var(--clay-br);border-color:var(--clay-br);color:#fff} .dl{margin:1.9rem 0 .5rem} .dl .meta-note{display:block;font-family:var(--sans);font-size:.74rem; color:var(--ink-soft);margin-top:.7rem;letter-spacing:.01em} /* ── A plain page head, for pages that are not a book ───────────────── */ .pagehead{background:var(--bg-hero);color:var(--cream);padding:80px 0 66px; border-bottom:3px solid var(--clay)} .pagehead h1{font-size:clamp(2.1rem,5vw,3.1rem);font-weight:600; text-transform:none;letter-spacing:-.01em;color:#fdfaf4;margin:0 0 .35em} .pagehead h1 em{font-style:italic} .pagehead .sub{font-size:1.14rem;font-style:italic;color:#e9dfcd;margin:0} /* alternating band so long reference pages do not run as one slab */ .alt{background:var(--paper)} /* ── Standards alignment table ──────────────────────────────────────── */ table.align{width:100%;border-collapse:collapse;margin:0;font-size:.95rem} table.align th{font-family:var(--sans);font-size:.62rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--clay);text-align:left; padding:0 14px 8px;border-bottom:2px solid var(--clay);vertical-align:bottom} table.align td{padding:14px;vertical-align:top;line-height:1.5; border-bottom:1px solid rgba(22,17,12,.12)} table.align tr:last-child td{border-bottom:0} table.align td:first-child{font-family:var(--sans);font-size:.78rem;font-weight:600; color:var(--ink);white-space:nowrap;letter-spacing:.02em} table.align td:nth-child(2){color:var(--ink-soft)} @media(max-width:760px){ table.align, table.align tbody, table.align tr, table.align td{display:block;width:100%} table.align thead{display:none} table.align tr{border-bottom:1px solid rgba(22,17,12,.16);padding:14px 0} table.align tr:last-child{border-bottom:0} table.align td{padding:2px 0;border:0} table.align td:first-child{color:var(--clay);margin-bottom:4px} table.align td:nth-child(2)::before{content:"Asks: ";font-family:var(--sans); font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint)} table.align td:nth-child(3)::before{content:"Answers: ";font-family:var(--sans); font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint)} }