/* Book pages under /walk/. Builds on /site.css. Each page sets --book-paper, --book-ink and --book-accent on from its journey's palette in the app, so the route card is drawn in that book's own colours. */ /* ---------- Hero ---------- */ .book-hero{position:relative; overflow:hidden; padding:56px 0 72px} .book-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(800px 520px at 78% 45%, rgba(234,199,43,.12), transparent 70%), linear-gradient(180deg,var(--ink-2),var(--ink) 60%); } .book-hero-grid{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center} @media (max-width:900px){ .book-hero{padding:36px 0 56px} .book-hero-grid{grid-template-columns:1fr; gap:36px} } .crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:13.5px; color:var(--on-ink-muted); margin-bottom:22px} .crumbs a{text-decoration:none} .crumbs a:hover{color:var(--on-ink)} .crumbs [aria-current]{color:var(--on-ink)} .book-hero h1{font-size:clamp(38px,5vw,64px); color:var(--on-ink); line-height:1.04} .book-hero .lede{font-size:clamp(17px,1.5vw,19px); line-height:1.6; color:var(--on-ink-muted); margin-top:22px; max-width:36em} .book-facts{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px} .book-facts li{ border:1px solid var(--ink-line); border-radius:999px; padding:6px 14px; font-size:14px; color:var(--on-ink-muted); } .book-facts b{color:var(--on-ink); font-weight:600} .book-plate{margin:0} .book-plate img{ width:100%; border-radius:14px; box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 40px 90px -24px rgba(0,0,0,.75), 0 0 120px rgba(234,199,43,.08); } /* ---------- The journey ---------- */ .book-journey{padding:96px 0} .journey-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start} @media (max-width:900px){ .book-journey{padding:64px 0} .journey-grid{grid-template-columns:1fr; gap:40px} } .book-journey .copy{max-width:none} .book-journey h2{font-size:clamp(30px,3.6vw,44px)} .book-journey .lead{color:var(--text); font-size:19px} .route-card{ margin:0; background:var(--surface); border-radius:18px; overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 16px 34px -20px rgba(90,74,20,.45); } .route-card svg{display:block; width:100%; height:auto; background:var(--book-paper)} .route-card .grid line{stroke:var(--book-ink); stroke-opacity:.1; stroke-width:1} .route-card .line{fill:none; stroke:var(--book-accent); stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round} .route-card .end{fill:var(--book-paper); stroke:var(--book-accent); stroke-width:3.5} .route-card text{font:600 17px "Public Sans", sans-serif; fill:var(--book-ink)} .route-card figcaption{padding:16px 20px 0; font:italic 600 18px/1.35 "Playfair Display", serif} .facts-table{margin:0; padding:10px 20px 18px; display:grid} .facts-table div{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:10px 0; border-top:1px solid #F0E7C6; font-size:15px} .facts-table div:first-child{border-top:0} .facts-table dt{color:var(--text-muted); font-weight:600} .facts-table dd{margin:0} /* ---------- Opening passage ---------- */ .book-opening{background:var(--ground); padding:88px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)} .opening-inner{max-width:760px} .opening-inner h2{font-size:clamp(30px,3.6vw,44px)} blockquote.opening{ margin:28px 0 0; padding:28px 30px; background:var(--surface); border-radius:0 16px 16px 0; border-left:4px solid var(--book-accent); font:400 19px/1.7 Georgia, "Times New Roman", serif; color:#2f2a22; box-shadow:0 16px 34px -22px rgba(90,74,20,.5); } blockquote.opening p + p{margin-top:14px} blockquote.opening cite{display:block; margin-top:16px; font:normal 500 13.5px/1.4 "Public Sans", sans-serif; color:var(--text-muted)} .book-opening .after{margin-top:22px; font-size:17px; color:var(--text-muted); max-width:40em} @media (max-width:560px){ blockquote.opening{padding:22px 20px; font-size:17px} } /* ---------- Pace ---------- */ .pace-inner{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center} @media (max-width:900px){ .pace-inner{grid-template-columns:1fr; gap:8px} } .pace-inner .calc{margin-top:0} .pace-inner .calc label{font-size:15px; color:var(--text)} .pace-inner .calc output.steps-out{display:inline; font:700 18px "Playfair Display", serif} /* ---------- On the way ---------- */ .book-way{padding:0 0 96px} .book-way h2{font-size:clamp(30px,3.6vw,44px)} .way-grid{list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px} @media (max-width:820px){ .way-grid{grid-template-columns:1fr} } .way-grid li{background:var(--surface); border-radius:18px; padding:24px; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 14px 30px -18px rgba(90,74,20,.35)} .way-grid h3{font-size:21px} .way-grid p{margin-top:8px; color:var(--text-muted); font-size:15.5px} .book-way .more{margin-top:22px; font-weight:600} .book-way .more a{color:var(--emphasis)} /* ---------- Related ---------- */ .books.three{grid-template-columns:repeat(3,1fr)} @media (max-width:720px){ .books.three{grid-template-columns:1fr 1fr} } .also a{color:var(--emphasis); font-weight:600} /* ---------- Closing ---------- */ .book-closing{padding:88px 0 96px; position:relative; overflow:hidden} .book-closing::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(700px 400px at 20% 20%, rgba(234,199,43,.12), transparent 70%)} .closing-inner{position:relative} .closing-inner h2{font-size:clamp(34px,4.4vw,54px)} .closing-inner .body{margin-top:16px; font-size:18px; color:var(--on-ink-muted)} /* ---------- /walk index ---------- */ .walk-index h1{font-size:clamp(36px,4.6vw,56px)}