/* Layman Terms — shared styles
   Design screen: 15-inch MacBook Air (~1440×900). Check there first, then
   phone (375), tablet (820) and wide (2560). */

/* Vintage palette, matched to the illustrations: warm paper, dark brown ink,
   and a crimson red taken from the character's book and sneakers as the one
   accent colour. */
:root {
  /* Light mode: the warm peach of the landing room's wall, so the whole page
     continues the illustration. */
  --bg: #ecd1b1;
  --panel: #e3c39f;
  --ink: #2a221c;
  --body: #4a3f36;
  --muted: #625241;
  --line: #d4b48f;
  --accent: #a51d1f;
  --accent-soft: #f2c4b4;
  /* Solid red blocks (logo ribbon, Menu tag, red buttons) keep this exact
     crimson in light and dark mode, with cream text on top. Red text uses
     --accent, which is lighter in dark mode so it stays readable. */
  --brand: #a51d1f;
  --on-brand: #fbf3e6;
  --grain: .38;
  /* Brand font, chosen 7 Oct 2026: Bricolage Grotesque for ALL text
     (headings, body, labels, buttons). Don't add a second font. */
  --font: "Bricolage Grotesque", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1713; --panel: #25201a; --ink: #f1e8d8; --body: #d3c7b4; --muted: #978a78;
    --line: #362e25; --accent: #ec6f67; --accent-soft: #4a1f1c; --grain: .12;
  }
}
:root[data-theme="dark"] {
  --bg: #1b1713; --panel: #25201a; --ink: #f1e8d8; --body: #d3c7b4; --muted: #978a78;
  --line: #362e25; --accent: #ec6f67; --accent-soft: #4a1f1c; --grain: .12;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font-family: var(--font); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
/* Subtle paper grain over the whole page, like the illustrations */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: var(--grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; } }
:root[data-theme="dark"] body::before { mix-blend-mode: screen; }
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--accent-soft); }


.label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.label.accent, a.label { color: var(--accent); text-decoration: none; }

/* Theme toggle: Auto (follows the device) → Light → Dark */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px 4px 8px; cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { display: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root:not([data-theme]) .theme-toggle .i-auto,
:root[data-theme="light"] .theme-toggle .i-light,
:root[data-theme="dark"] .theme-toggle .i-dark { display: block; }

/* ---------- Term pictures ---------- */
.art { margin: 18px 0 0; background: var(--panel); border-radius: 6px; overflow: hidden; }
.art .scene-img { display: block; width: 100%; height: auto; }

/* ---------- Term page ---------- */
.hero { max-width: 760px; margin: 0 auto; padding: 44px 16px 0; text-align: center; }
h1.term {
  font-family: var(--font); font-weight: 650; color: var(--ink);
  font-size: clamp(54px, 10.5vw, 80px); line-height: 1; letter-spacing: -.04em; margin: 36px 0 0;
}
.pron { margin-top: 10px; font-size: 14px; color: var(--muted); }
.tldr { max-width: 600px; margin: 30px auto 0; }

article { max-width: 640px; margin: 0 auto; padding: 36px 16px 0; }
article p { margin: 0 0 20px; }
article p.lead { font-family: var(--font); font-size: 24px; font-weight: 500; line-height: 1.4; color: var(--ink); letter-spacing: -.015em; }
article b, article strong { color: var(--ink); font-weight: 600; }
article code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86em; color: var(--ink);
  background: var(--panel); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere;
}
article h2 {
  font-family: var(--font); font-weight: 650; color: var(--ink); font-size: 28px; line-height: 1.2;
  letter-spacing: -.025em; margin: 52px 0 16px;
}
ul.asks { list-style: none; padding: 0; margin: 0 0 22px; }
ul.asks li { font-family: var(--font); font-weight: 500; font-size: 19px; color: var(--ink); padding: 3px 0 3px 22px; position: relative; }
ul.asks li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1.5px; background: var(--accent); }

/* Notes with a small Memoji */
.note { display: grid; grid-template-columns: 1fr; border-left: 2px solid var(--accent); padding: 2px 0 2px 18px; margin: 28px 0; }
.note.has-face { grid-template-columns: 1fr 64px; gap: 14px; align-items: center; }
.note .face { width: 64px; height: 64px; }
.note .label { display: block; margin-bottom: 6px; }
.note p { margin: 0; color: var(--ink); }
.note.meeting p { font-family: var(--font); font-size: 21px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }

.hear p { margin: 0 0 12px; }
.hear i { color: var(--ink); }

/* Byline */
.byline { display: flex; align-items: center; gap: 14px; margin: 36px 0 0; }
.byline img { width: 52px; height: 52px; border-radius: 50%; background: var(--panel); }
.byline div { font-size: 14px; line-height: 1.5; }
.byline b { display: block; color: var(--ink); font-weight: 600; }
.byline span { color: var(--muted); }

/* Read next */
.related { max-width: 640px; margin: 56px auto 0; padding: 0 16px; }
.list { list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--line); }
.list li a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--line); text-decoration: none;
}
.list li a:hover .t { color: var(--accent); }
.list .t { font-family: var(--font); font-size: 19px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.list .d { font-size: 14px; color: var(--muted); text-align: right; }
.list a .d::after { content: " →"; color: var(--accent); }

footer.site { max-width: 1040px; margin: 80px auto 0; padding: 22px 16px 40px; font-size: 13px; color: var(--muted); border-top: 0; position: relative; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
footer.site img { width: 22px; height: 22px; vertical-align: -6px; margin-left: 2px; }

/* ---------- Sketchbook details (sample, 7 Oct 2026) ----------
   Hand-drawn touches that match the pencil-and-ink pictures: pencil squiggle
   dividers, pictures taped in like prints, and "In short" spoken by Aayush. */
:root {
  --paper: #fbf3e6; --tape: rgba(255, 250, 238, .62); --tape-edge: rgba(150, 120, 90, .18);
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Cpath d='M0 5 Q 10 1.5 20 5 T 40 5.4 T 60 4.6 T 80 5.3 T 100 4.8 T 120 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='10' viewBox='0 0 80 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5 C 18 2.5, 34 8.5, 50 4.5 S 72 3.5, 78 5.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #2b241d; --tape: rgba(236, 222, 196, .22); --tape-edge: rgba(236, 222, 196, .12); }
}
:root[data-theme="dark"] { --paper: #2b241d; --tape: rgba(236, 222, 196, .22); --tape-edge: rgba(236, 222, 196, .12); }

/* Pencil squiggle instead of a straight hairline */
.squiggle {
  display: block; height: 10px; border: 0; margin: 0;
  background: var(--line); -webkit-mask: var(--squiggle) repeat-x left center; mask: var(--squiggle) repeat-x left center;
}

/* A picture taped into the page like a print */
.taped { position: relative; padding: 9px; background: var(--paper); border-radius: 3px; transform: rotate(-.9deg);
  box-shadow: 0 1px 1px rgba(60, 40, 20, .12), 0 14px 30px -18px rgba(60, 40, 20, .55); }
.taped .art { margin: 0; border-radius: 2px; }
.taped::before, .taped::after {
  content: ""; position: absolute; top: -13px; width: 96px; height: 28px; z-index: 2;
  background: var(--tape); border: 1px solid var(--tape-edge); backdrop-filter: blur(.5px);
}
.taped::before { left: 22px; transform: rotate(-7deg); }
.taped::after { right: 22px; transform: rotate(6deg); }

/* Aayush says it: a sticker with a hand-drawn speech bubble */
.says { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; text-align: left; }
.says > img { width: 76px; height: 76px; }
.says .bubble {
  position: relative; background: var(--paper); color: var(--ink); padding: 14px 18px;
  border: 1.6px solid var(--ink); border-radius: 22px 18px 24px 16px / 16px 24px 18px 22px;
  font-size: 17px; line-height: 1.5; margin: 0;
}
.says .bubble::before {
  content: ""; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px; background: var(--paper);
  border-left: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink); transform: translateY(-50%) rotate(45deg) skew(8deg, 8deg);
}
.says .label { display: block; margin-bottom: 2px; }

/* Section headings get the same hand-drawn crimson underline as the home headline */
article h2 { width: fit-content; max-width: 100%; }
article h2::after {
  content: ""; display: block; width: 100%; height: 10px; margin-top: 6px;
  background: var(--accent); -webkit-mask: var(--scribble) no-repeat left center / 100% 100%; mask: var(--scribble) no-repeat left center / 100% 100%;
}
footer.site::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 10px;
  background: var(--line); -webkit-mask: var(--squiggle) repeat-x left center; mask: var(--squiggle) repeat-x left center; }
.hero .taped { margin-top: 30px; }

/* ---------- Header: bookmark ribbon + Aayush as the menu ---------- */
.top { max-width: 1040px; height: 96px; margin: 0 auto; padding: 0 16px; position: relative; z-index: 20; }
.bookmark {
  position: absolute; top: 0; left: 16px; display: block; text-decoration: none;
  padding: 30px 22px 38px; background: var(--brand); color: var(--on-brand);
  font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 13px), 0 100%);
  filter: drop-shadow(0 6px 6px rgba(60, 30, 15, .25)); transition: padding-top .25s ease;
}
.bookmark i { font-style: normal; opacity: .65; }
.bookmark:hover { padding-top: 38px; }
.bookmark:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.guide { position: fixed; top: 14px; right: max(16px, calc((100vw - 1040px) / 2 + 16px)); z-index: 60; }
.guide-btn {
  position: relative; display: block; width: 62px; height: 62px; padding: 0; cursor: pointer;
  border-radius: 50%; background: var(--paper); border: 1.6px solid var(--ink);
  box-shadow: 0 8px 18px -10px rgba(60, 30, 15, .6); transition: transform .2s ease;
}
.guide-btn img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.guide-btn:hover { transform: rotate(-6deg) scale(1.05); }
.guide-btn[aria-expanded="true"] { transform: rotate(-6deg); }
.guide-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.guide-tag {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  background: var(--brand); color: var(--on-brand); padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}

/* The menu is his speech bubble */
.guide-menu {
  position: absolute; top: calc(100% + 18px); right: 0; width: min(270px, calc(100vw - 32px));
  background: var(--paper); color: var(--ink); border: 1.6px solid var(--ink);
  border-radius: 22px 18px 24px 16px / 16px 24px 18px 22px; padding: 14px 16px 12px;
  box-shadow: 0 18px 40px -20px rgba(60, 30, 15, .55);
}
.guide-menu[hidden] { display: none; }
.guide-menu::before {
  content: ""; position: absolute; top: -9px; right: 24px; width: 16px; height: 16px; background: var(--paper);
  border-left: 1.6px solid var(--ink); border-top: 1.6px solid var(--ink); transform: rotate(45deg) skew(6deg, 6deg);
}
.guide-hi { margin: 0 0 6px; font-size: 13px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.guide-menu ul { list-style: none; margin: 0; padding: 0; }
.guide-menu li a {
  display: block; padding: 7px 0; font-size: 18px; font-weight: 550; color: var(--ink); text-decoration: none;
  border-bottom: 1px dashed var(--line);
}
.guide-menu li a:hover, .guide-menu li a[aria-current="page"] { color: var(--accent); }
.guide-menu li a[aria-current="page"]::after { content: " ●"; font-size: 9px; vertical-align: 3px; }
.guide-menu .theme-toggle { margin-top: 10px; width: 100%; justify-content: center; }
.guide-menu.pop { animation: bubble .22s cubic-bezier(.3, 1.4, .5, 1); transform-origin: top right; }
@keyframes bubble { from { opacity: 0; transform: scale(.85) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .guide-menu.pop { animation: none; } }

@media (max-width: 760px) {
  .top { height: 72px; }
  .bookmark { font-size: 17px; padding: 18px 14px 26px; }
  .guide { top: 10px; right: 12px; }
  .guide-btn { width: 54px; height: 54px; }
}
/* While reading (scrolling down), the menu button tucks away so it never sits
   on top of text; any scroll up brings it straight back. */
.guide { transition: transform .25s ease, opacity .25s ease; }
.guide.tuck { transform: translateY(-90px); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .guide { transition: none; } }