/* The book site (y2kmallrat.com). Navy and gold from the two covers. Fonts: Bricolage Grotesque (headings, buttons), Source Serif 4 (reading), JetBrains Mono (code); all OFL, self-hosted. */
@font-face { font-family: 'Bricolage'; src: url(/books/fonts/bricolage.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Source Serif'; src: url(/books/fonts/source-serif.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'JetBrains'; src: url(/books/fonts/jetbrains-mono.woff2) format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --navy: #0f2a43; --navy-2: #0a1d30; --navy-3: #17405f; --blue: #478cbf; --sky: #9fd0f2; --gold: #ffc933; --gold-2: #ffdb70;
  --paper: #f3f7fb; --ink: #12283b; --ink-2: #3d566c; --line: #c9d8e5; --green: #3fae5a;
  --head: 'Bricolage', 'Segoe UI', system-ui, sans-serif; --serif: 'Source Serif', Georgia, serif; --mono: 'JetBrains', Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.bk { margin: 0; background: var(--navy); color: #e8f0f7; font: 400 1.0625rem/1.65 var(--serif); }
.bk a { color: inherit; text-underline-offset: .18em; }
.bk ::selection { background: var(--gold); color: var(--navy); }
.bk :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--navy); padding: 8px 14px; border-radius: 6px; font-family: var(--head); font-weight: 700; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.wrap.narrow { width: min(720px, 100% - 40px); }
.small { font-size: .875rem; opacity: .85; }
.ico { width: 1.15em; height: 1.15em; flex: none; }

/* header */
.bk-head { color: #e8f0f7; background: var(--navy-2); border-bottom: 1px solid #ffffff1c; position: sticky; top: 0; z-index: 5; }
.bk-bar { width: min(1120px, 100% - 40px); margin-inline: auto; display: flex; align-items: center; gap: 22px; padding: 10px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; font: 800 1.25rem var(--head); text-decoration: none; letter-spacing: -.01em; margin-right: auto; }
.brand .pip { width: 32px; height: 32px; }
.bk-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.bk-nav a { font: 600 .95rem var(--head); text-decoration: none; padding: 8px 12px; border-radius: 8px; color: #cfe0ee; }
.bk-nav a:hover { background: #ffffff14; color: #fff; }
.bk-nav a[aria-current] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 8px 8px 0 0; }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 14px; }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem var(--head); text-decoration: none; padding: 13px 22px; border-radius: 10px; border: 2px solid transparent; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; min-height: 48px; }
.btn.gold { background: var(--gold); color: var(--navy); box-shadow: 0 5px 0 #b88c00; }
.btn.gold:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #b88c00; background: var(--gold-2); }
.btn.gold:active { transform: translateY(3px); box-shadow: 0 2px 0 #b88c00; }
.btn.line { border-color: #ffffff55; color: #fff; }
.btn.line:hover { border-color: var(--gold); color: var(--gold); }
.btn .meta { font-weight: 500; opacity: .75; font-size: .85em; }
.books .btn.line, .bookbody .btn.line { color: var(--ink); border-color: #12283b66; }
.books .btn.line:hover { color: var(--navy); border-color: var(--navy); background: #fff; }

/* headings */
.bk h1, .bk h2, .bk h3 { font-family: var(--head); line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.bk h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); font-weight: 800; }
.bk h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; margin-bottom: 18px; }
.bk h3 { font-size: 1.4rem; font-weight: 700; }
.lede { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.5; color: #d4e4f1; max-width: 34em; }

/* hero */
.hero, .bookhero { background: radial-gradient(1000px 520px at 82% 30%, #1d5a86 0%, transparent 70%), var(--navy); padding: clamp(36px, 7vw, 84px) 0 clamp(44px, 7vw, 90px); overflow: hidden; }
.herogrid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.hero h1 span { color: var(--gold); }
.hero .copy p:not(.lede):not(.small) { margin: 0; }
.shelf { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; padding: 14px 8px 30px; }
.shelf a { display: block; width: 48%; transition: transform .35s var(--ease); }
.shelf .s1 { transform: rotate(-5deg) translateY(10px); margin-right: -4%; z-index: 1; }
.shelf .s2 { transform: rotate(4deg) translateY(-18px); }
.shelf a:hover { transform: rotate(0) translateY(-10px) scale(1.04); z-index: 3; }
.cover { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 22px 44px #0009, 0 2px 0 #ffffff22 inset; }
.coverbox { max-width: 380px; justify-self: center; width: 100%; }
.bookhero .coverbox { transform: rotate(-2deg); }

/* books list (light section: where you pick) */
.books { background: var(--paper); color: var(--ink); padding: clamp(48px, 7vw, 90px) 0; }
.books h2 { margin-bottom: 36px; }
.bookrow { display: grid; grid-template-columns: minmax(180px, 330px) 1fr; gap: clamp(22px, 4vw, 56px); align-items: center; margin-bottom: clamp(44px, 6vw, 72px); }
.bookrow.flip { grid-template-columns: 1fr minmax(180px, 330px); }
.bookrow.flip .coverlink { order: 2; }
.bookrow .coverlink { display: block; transition: transform .3s var(--ease); }
.bookrow .coverlink:hover { transform: translateY(-6px) rotate(-1deg); }
.bookrow .cover { box-shadow: 0 18px 36px #12283b44; }
.bookrow h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 8px; }
.bookrow h3 a { text-decoration: none; }
.bookrow h3 a:hover { text-decoration: underline; }
.bookrow .sub { font-style: italic; color: var(--ink-2); margin: 0 0 12px; }
.bookrow p { margin: 0 0 10px; max-width: 38em; }
.bookrow .who { color: var(--ink-2); }
.choose { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px 28px; max-width: 760px; }
.choose h3 { margin-bottom: 8px; }
.choose p { margin: 0; }
.choose a { color: #1b5f93; font-weight: 600; }

/* inside */
.inside { background: var(--navy-2); padding: clamp(44px, 6vw, 80px) 0; }
.plain { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 14px; max-width: 46em; }
.plain li { padding-left: 28px; position: relative; }
.plain li::before { content: ''; position: absolute; left: 0; top: .7em; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px #478cbf44; }
.plain strong { color: #fff; }

/* a quiet thank-you line at the bottom */
.thanks { background: var(--navy-2); padding: 22px 0 6px; text-align: center; font-size: .95rem; color: #b9cfe2; }
.thanks p { margin: 0; }
.thanks a { color: #e8f0f7; }

/* book page */
.bookhero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.bookhero .herogrid { grid-template-columns: minmax(220px, 380px) 1fr; }
.bookhero .copy p { margin: 14px 0 0; max-width: 38em; }
.bookhero .copy .lede { margin-top: 14px; }
.bookbody { background: var(--paper); color: var(--ink); padding: clamp(40px, 6vw, 80px) 0; }
.bookbody .two { display: grid; grid-template-columns: 1fr 320px; gap: clamp(28px, 5vw, 64px); align-items: start; }
.bookbody h2 { margin-top: 36px; font-size: clamp(1.5rem, 3vw, 2rem); }
.bookbody h2:first-child { margin-top: 0; }
.bookbody .plain strong, .bookbody .plain li { color: var(--ink); }
.facts { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; position: sticky; top: 84px; }
.facts h2 { margin: 0 0 12px; font-size: 1.3rem; }
.facts dl { margin: 0; display: grid; gap: 12px; }
.facts dt { font: 700 .78rem var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.facts dd { margin: 2px 0 0; font-weight: 600; }
.contents { background: var(--paper); color: var(--ink); padding: 0 0 clamp(44px, 6vw, 80px); }
.contents .parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px 40px; margin-top: 18px; }
.part h3 { font-size: 1.1rem; margin-bottom: 8px; color: #1b5f93; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc a { display: flex; gap: 12px; padding: 8px 10px; border-radius: 8px; text-decoration: none; line-height: 1.35; }
.toc a:hover { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.toc .n { font: 700 .8rem var(--head); color: #1b5f93; min-width: 5.6em; padding-top: .25em; text-transform: uppercase; letter-spacing: .04em; }

/* reader */
.reader { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: 28px 0 56px; align-items: start; background: none; }
body.bk:has(.reader) { background: var(--paper); color: var(--ink); }
body.bk:has(.reader) main { background: var(--paper); }
.rside { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-family: var(--head); font-size: .9rem; line-height: 1.35; }
.rside summary { font-weight: 800; cursor: pointer; padding: 4px 0 8px; }
.rside .bk-title { display: block; font-weight: 700; color: #1b5f93; text-decoration: none; margin-bottom: 8px; }
.rside h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 16px 0 4px; }
.rside ol { list-style: none; margin: 0; padding: 0; }
.rside a { display: block; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.rside a:hover { background: var(--paper); }
.rside a[aria-current] { background: var(--navy); color: var(--gold); font-weight: 700; }
.prose { overflow-x: clip; color: var(--ink); min-width: 0; max-width: 46rem; font-size: 1.125rem; line-height: 1.72; }
.prose .crumb { font: 600 .9rem var(--head); margin: 0 0 10px; }
.prose .crumb a { color: #1b5f93; }
.prose h1 { color: var(--navy); font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 28px; }
.prose h2 { color: var(--navy); font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.2em 0 .6em; }
.prose h3 { color: var(--navy); font-size: 1.3rem; margin: 1.8em 0 .5em; }
.prose h4 { font-family: var(--head); margin: 1.4em 0 .4em; }
.prose p, .prose li { max-width: 68ch; }
.prose li { margin: .3em 0; }
.prose a { color: #1b5f93; }
.prose img { max-width: 100%; height: auto; display: block; margin: 1.4em auto; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose blockquote { margin: 1.4em 0; padding: 14px 20px; background: #e6f0f9; border-radius: 10px; }
.prose blockquote p { margin: .4em 0; }
.prose code { overflow-wrap: anywhere; font: .88em var(--mono); background: #e3edf6; padding: .12em .38em; border-radius: 5px; }
.prose pre { background: var(--navy-2); color: #dbe9f5; border-radius: 10px; padding: 16px 18px; overflow-x: auto; font: .88rem/1.55 var(--mono); margin: 1.4em 0; tab-size: 4; }
.prose pre code { overflow-wrap: normal; background: none; padding: 0; font: inherit; }
.prose .codehilite { margin: 1.4em 0; }
.prose .codehilite pre { margin: 0; }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; margin: 1.4em 0; font-size: .95rem; line-height: 1.45; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.prose th { background: #e3edf6; font-family: var(--head); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 3em 0 1em; }
.pn a { display: block; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; font: 700 1rem/1.3 var(--head); color: var(--navy); }
.pn a:hover { border-color: var(--blue); box-shadow: 0 6px 18px #12283b22; }
.pn a span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 4px; }
.pn .next { text-align: right; grid-column: 2; }
.getit { margin-top: 1.4em; }
/* code colours (the books' code is pre-coloured with these class names) */
.prose pre .k, .prose pre .kd, .prose pre .kn, .prose pre .kc, .prose pre .kr, .prose pre .ow { color: #ffc933; }
.prose pre .nb, .prose pre .nc, .prose pre .kt, .prose pre .bp, .prose pre .nb-Type { color: #7cc4f0; }
.prose pre .s, .prose pre .s1, .prose pre .s2, .prose pre .sa, .prose pre .sb { color: #8fd694; }
.prose pre .c, .prose pre .c1, .prose pre .cm { color: #8da6bb; font-style: italic; }
.prose pre .m, .prose pre .mi, .prose pre .mf, .prose pre .mh { color: #ff9b7a; }
.prose pre .nf, .prose pre .fm, .prose pre .nd { color: #ffffff; }
.prose pre .o, .prose pre .p { color: #b9cfe2; }

/* about + footer */
.plainpage { padding: clamp(40px, 6vw, 80px) 0; background: var(--paper); color: var(--ink); }
.plainpage h1 { color: var(--navy); font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 24px; }
.plainpage h2 { font-size: 1.5rem; margin: 1.8em 0 .5em; color: var(--navy); }
.plainpage a:not(.btn) { color: #1b5f93; }
.bk-foot { background: var(--navy-2); padding: 34px 0 44px; font-size: .92rem; color: #b9cfe2; }
.bk-foot p { margin: 0 0 8px; max-width: 60em; }
.bk-foot a { color: #e8f0f7; }

/* phones */
@media (max-width: 860px) {
  .herogrid, .bookhero .herogrid { grid-template-columns: 1fr; }
  .shelf { max-width: 480px; margin-inline: auto; }
  .bookrow, .bookrow.flip { grid-template-columns: 1fr; }
  .bookrow.flip .coverlink { order: 0; }
  .bookrow .coverlink { max-width: 260px; }
  .bookbody .two { grid-template-columns: 1fr; }
  .facts { position: static; }
  .reader { grid-template-columns: minmax(0, 1fr); }
  .rside { position: static; max-height: none; }
  .rside .rtoc[open] { max-height: 60vh; overflow: auto; }
  .bk-bar { gap: 8px 14px; }
  .bk-nav { order: 3; width: 100%; margin: 0 -8px; }
}
@media (max-width: 520px) { .bk-head { position: static; } .bk-nav a { padding: 8px 9px; font-size: .86rem; } .bookhero .coverbox { max-width: 230px; } .btn { padding: 12px 18px; } .pn { grid-template-columns: 1fr; } .pn .next { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } .shelf a, .bookhero .coverbox { transform: none !important; } }