/* 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 ────────────── */ /* Deep brown, NOT amber. The jacket itself is amber now, and amber-on-amber melted it into the section. The band steps back so the book reads as an object sitting on it — same reason the hero pages go dark behind jackets. */ .companion{background:#45200D;color:#fdf6ec;padding:86px 0} /* Two variants. The Chief page shows the Walk Easy jacket here, because Walk Easy is the book that actually ships first and people should see it. The Walk Easy page points back at Chief in text only — Chief is unfinished, and a full jacket for a book with no date on it promises more than it can keep. */ .companion .wrap{max-width:700px} .companion.with-cover .wrap{max-width:880px;display:grid; grid-template-columns:200px 1fr;gap:54px;align-items:center} .companion.with-cover img{width:216px;height:auto;display:block;border-radius:2px; box-shadow:0 2px 5px rgba(0,0,0,.4),0 26px 52px -12px rgba(0,0,0,.65); transform:rotate(-1.2deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)} .companion.with-cover a:hover img{transform:rotate(0) translateY(-5px)} .companion .also-dl{font-family:var(--sans);font-size:.8rem;margin:1.1rem 0 0} .companion .also-dl a{color:#fdf6ec;border-bottom-color:rgba(253,246,236,.4)} .companion .also-dl a:hover{color:#fff;border-color:#fff} @media(max-width:820px){ .companion.with-cover .wrap{grid-template-columns:1fr;gap:30px; text-align:center;justify-items:center} } .companion .label{color:#F0C67A} .companion h2{color:#fff;margin:0 0 .45em} .companion p{color:#f6e4d5;font-size:1.09rem;line-height:1.62;margin:0 0 1.6em} .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:#fdf6ec;color:var(--clay);border:1px solid #fdf6ec; transition:background .22s,color .22s} .btn:hover{background:transparent;color:#fff;border-color:#fff} @media(max-width:820px){ .companion p{margin-inline:auto} } /* The companion band inverts: clay on the Chief page (featuring Walk Easy), navy on the Walk Easy page (featuring Chief). Each band wears the colour of the book it is pointing at, not the page it sits on. */ .companion.cool{background:var(--sky-deep)} .companion.cool .label{color:var(--gold)} .companion.cool p{color:#d8e2ec} .companion.cool .btn{background:#fdfaf4;color:var(--sky-deep);border-color:#fdfaf4} .companion.cool .btn:hover{background:transparent;color:#fff;border-color:#fff} /* Button on a light ground — the .btn above is for the dark companion bands. */ .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}