/* ==========================================================================
   home.css — the public homepage (read.omahaindia.com, signed out).
   Loaded with fonts.css ONLY; app.css is the signed-in shell and is not used
   here, so nothing in this file has to fight it.

   Light only, on purpose. The house rule is dark ink on light plates
   everywhere (MASTER M6.3), and a children's brand that flips to a black page
   at night reads as a different product.
   ========================================================================== */

:root {
  --paper:      #fffdf7;   /* warm cream, the page                    */
  --paper-2:    #fff8ea;   /* tinted band, sections that need a shelf */
  --card:       #ffffff;
  --ink:        #14304f;   /* navy, all primary type                  */
  --ink-2:      #46617c;
  --ink-3:      #8199b0;
  --line:       #e8e2d5;
  --amber:      #f0a01e;   /* the one accent                          */
  --amber-deep: #d97e06;
  --amber-soft: #fff4dd;
  --sky:        #cfe8f7;
  --leaf:       #3f9d6d;
  --plum:       #7a5cc4;
  --rose:       #e0629a;

  --r:    18px;
  --r-lg: 26px;
  --shadow:    0 2px 8px rgba(20, 48, 79, .05);
  --shadow-lg: 0 18px 48px rgba(20, 48, 79, .10);

  --display: 'Baloo 2', 'Fraunces', Georgia, serif;
  --hand:    'Patrick Hand', 'Comic Sans MS', cursive;
  --body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.amber { color: var(--amber-deep); }

/* An amber brush-stroke under a word, drawn rather than typed. */
.underline {
  position: relative;
  display: inline-block;
}
.underline::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%; bottom: .04em;
  height: .18em;
  background: var(--amber);
  opacity: .38;
  border-radius: 999px;
  transform: rotate(-.6deg);
}

/* --- navigation ----------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 253, 247, .92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 28px; padding: 14px 24px; max-width: var(--wrap); margin: 0 auto; }
.brand { display: flex; flex-direction: column; line-height: 1.1; margin-right: auto; }
.brand b { font-family: var(--display); font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.brand b i { font-style: normal; color: var(--amber-deep); }
.brand small { font-size: 12px; color: var(--ink-3); font-weight: 600; letter-spacing: .01em; }
.nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nav-links a { color: var(--ink-2); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--amber); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .link { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.nav-cta .link:hover { color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 800; font-size: 14px;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-amber { background: var(--amber); color: #33230a; box-shadow: 0 6px 18px rgba(240, 160, 30, .35); }
.btn-amber:hover { background: #ffb02e; }
.btn-navy { background: var(--ink); color: #fff; box-shadow: 0 8px 22px rgba(20, 48, 79, .28); }
.btn-navy:hover { background: #1c4269; }
.btn-ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); }
.btn-ghost:hover { border-color: var(--amber); }
.btn-lg { font-size: 15px; padding: 16px 30px; }

/* --- hero ----------------------------------------------------------------- */

.hero { padding: 56px 0 24px; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
.hero h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(42px, 5.6vw, 68px); line-height: 1.03;
  letter-spacing: -.025em; margin: 0 0 22px;
}
.hero h1 span { display: block; }
.hero h1 .forever { color: var(--amber-deep); }
.hero p { margin: 0 0 14px; color: var(--ink-2); font-size: 18px; max-width: 34ch; }
.hero p.lead { color: var(--ink); font-weight: 700; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; align-items: center; }
.hero .free-note { font-size: 14px; color: var(--ink-2); font-weight: 700; }
.hero .free-note b { color: var(--leaf); }

.stage { position: relative; }
.stage svg { display: block; width: 100%; height: auto; }

/* Handwritten question cards floating around the portal. */
.qcard {
  position: absolute;
  font-family: var(--hand);
  font-size: 15px; line-height: 1.28;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 13px;
  box-shadow: var(--shadow);
  max-width: 165px;
  color: var(--ink);
}
.qcard b { color: var(--amber-deep); font-weight: 400; }
.qcard.q1 { top: 6%;  left: -2%;  transform: rotate(-3deg); }
.qcard.q2 { top: 27%; left: -6%;  transform: rotate(2deg); }
.qcard.q3 { top: 50%; left: -3%;  transform: rotate(-2deg); }
.qcard.q4 { top: 8%;  right: -3%; transform: rotate(3deg); }
.qcard.q5 { top: 31%; right: -6%; transform: rotate(-2deg); }
.qcard.q6 { top: 54%; right: -2%; transform: rotate(2deg); }
.qcard.big {
  left: 50%; bottom: -4%; transform: translateX(-50%) rotate(-1deg);
  max-width: 260px; font-size: 17px; text-align: center;
  border-color: var(--amber); box-shadow: 0 8px 24px rgba(240, 160, 30, .22);
}

/* --- the chain ------------------------------------------------------------ */

.chain-band { padding: 20px 0 8px; }
.chain {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 26px 26px; box-shadow: var(--shadow);
}
.chain h2 {
  font-family: var(--display); font-weight: 800; text-align: center;
  font-size: clamp(20px, 2.6vw, 27px); letter-spacing: .01em; margin: 0 0 26px;
}
.chain-rail { display: flex; align-items: flex-start; gap: 4px; overflow-x: auto; padding-bottom: 8px; }
.chain-step { flex: 1 0 92px; text-align: center; }
.chain-step svg { width: 62px; height: 62px; margin: 0 auto 8px; display: block; }
.chain-step span { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.chain-arrow { flex: 0 0 18px; align-self: center; color: var(--ink-3); font-size: 18px; margin-top: -18px; }
.chain-foot { text-align: center; margin: 22px 0 0; font-family: var(--display); font-size: 20px; font-weight: 700; }
.chain-foot em { font-style: normal; color: var(--amber-deep); }

/* --- section furniture ---------------------------------------------------- */

.section { padding: 68px 0; }
.section.tint { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { text-align: center; max-width: 62ch; margin: 0 auto 42px; }
.section-head h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 12px; line-height: 1.12;
}
.section-head p { margin: 0; color: var(--ink-2); font-size: 18px; }

/* --- series cards --------------------------------------------------------- */

.series-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.scard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.scard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.scard-art { position: relative; aspect-ratio: 4 / 3; background: var(--tint, #eef4fa); }
.scard-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.scard h3 {
  font-family: var(--display); font-weight: 800; margin: 0 0 4px;
  font-size: 21px; line-height: 1.12; color: var(--hue, var(--ink)); letter-spacing: -.01em;
}
.scard .count { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.scard .q { font-family: var(--hand); font-size: 17px; color: var(--ink); margin: 0 0 8px; }
.scard p { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.scard .go { margin-top: auto; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hue, var(--ink)); }
.scard:hover .go { text-decoration: underline; text-underline-offset: 4px; }
.scard .free-tag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--leaf); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
}

/* --- Buffett & Munger ----------------------------------------------------- */

.think { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 44px; align-items: center; }
.think-portraits { display: flex; gap: 16px; }
.portrait { flex: 1; text-align: center; }
.portrait img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r);
  border: 3px solid #fff; box-shadow: var(--shadow-lg); background: var(--amber-soft);
}
.portrait span {
  display: inline-block; margin-top: -16px; position: relative;
  background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
}
.think h2 { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 16px; line-height: 1.12; }
.think p { color: var(--ink-2); margin: 0 0 14px; }
.think p strong { color: var(--ink); }
.ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ladder span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; color: var(--ink-2); }
.ladder span.end { background: var(--amber); border-color: var(--amber); color: #33230a; }
.ladder i { font-style: normal; color: var(--ink-3); }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 22px; }
.principle { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.principle svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--amber-deep); }
.principle b { font-size: 13.5px; font-weight: 800; letter-spacing: .02em; }
.not-investing {
  margin-top: 26px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: 12px; padding: 16px 18px; font-size: 15px; color: var(--ink-2);
}
.not-investing b { color: var(--ink); }

/* --- purpose -------------------------------------------------------------- */

.purpose { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; align-items: center; }
.purpose h2 { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.14; margin: 0 0 8px; }
.purpose h2 .next { color: var(--amber-deep); }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin-top: 30px; }
.value { text-align: left; }
.value svg { width: 34px; height: 34px; margin-bottom: 8px; color: var(--amber-deep); }
.value b { display: block; font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.value span { font-size: 14px; color: var(--ink-2); }

/* --- free comics ---------------------------------------------------------- */

.free-band { text-align: center; }
.free-band h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.8vw, 42px); margin: 0 0 10px; }
.free-band .sub { color: var(--ink-2); font-size: 18px; margin: 0 auto 32px; max-width: 52ch; }
.free-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 34px; text-align: left; }
.free-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.free-item .s { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.free-item .t { font-family: var(--display); font-weight: 700; font-size: 16.5px; line-height: 1.2; }
.free-item .go { margin-top: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--leaf); }
.free-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; font-size: 14px; color: var(--ink-2); }
.free-steps b { color: var(--ink); }

/* --- footer --------------------------------------------------------------- */

.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust div { display: flex; align-items: center; gap: 12px; }
.trust svg { width: 30px; height: 30px; color: var(--amber-deep); flex: 0 0 30px; }
.trust b { display: block; font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1.1; }
.trust span { font-size: 13.5px; color: var(--ink-2); }

footer { padding: 40px 0 56px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.foot-brand b { font-family: var(--display); font-size: 24px; font-weight: 800; }
.foot-brand b i { font-style: normal; color: var(--amber-deep); }
.foot-brand span { display: block; font-size: 14px; color: var(--ink-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-note { margin-top: 22px; font-size: 12.5px; color: var(--ink-3); max-width: 78ch; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-in, .think, .purpose { grid-template-columns: 1fr; }
  .hero { padding-top: 34px; }
  .hero p { max-width: none; }
  .stage { margin-top: 26px; }
  .nav-links { display: none; }
  .think-portraits { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .qcard { position: static; transform: none !important; max-width: none; margin: 0 0 8px; }
  .qcard.big { max-width: none; }
  .qwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
  .qwrap .big { grid-column: 1 / -1; }
  .section { padding: 48px 0; }
  .nav-cta .link { display: none; }
  .chain-step { flex: 0 0 84px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .scard:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Layout corrections after the first render pass.
   -------------------------------------------------------------------------- */

/* Five series, five columns — auto-fit was breaking 4 + 1, which reads as a
   four-series shelf with an afterthought. Below 1180px it steps down cleanly. */
@media (min-width: 1100px) {
  .series-grid { grid-template-columns: repeat(5, 1fr); }
  .scard h3 { font-size: 19px; }
  .scard .q { font-size: 16px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .series-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Same problem in the values row: four principles, four columns. */
@media (min-width: 760px) {
  .values { grid-template-columns: repeat(4, 1fr); }
}

/* The hero stage was under-filled: the portal sat small in a wide column while
   the question cards crowded its edges. Give the art room and push the cards
   further out, which is also what makes them read as annotations rather than
   as labels stuck on the picture. */
.stage { padding: 0 12px; }
.stage > svg { max-width: 500px; margin: 0 auto; }
@media (min-width: 981px) {
  .hero-in { gap: 56px; }
  .qcard.q1 { top: 2%;  left: -8%; }
  .qcard.q2 { top: 26%; left: -11%; }
  .qcard.q3 { top: 52%; left: -8%; }
  .qcard.q4 { top: 4%;  right: -8%; }
  .qcard.q5 { top: 30%; right: -11%; }
  .qcard.q6 { top: 56%; right: -8%; }
  .qcard.big { bottom: -6%; }
}

/* The trust strip stacked its number and caption oddly at mid widths. */
.trust div > div { min-width: 0; }
.trust b { white-space: nowrap; }

/* --------------------------------------------------------------------------
   The sign-in dialog.

   Same cream/navy/amber as the page behind it, because it IS the page — there
   is no separate sign-in screen to design differently.
   -------------------------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-scrim { position: absolute; inset: 0; background: rgba(20, 48, 79, .45); backdrop-filter: blur(3px); }
.modal-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--card); border-radius: 22px; padding: 44px 30px 26px;
  box-shadow: 0 30px 80px rgba(20, 48, 79, .3);
  animation: modal-in .16s ease-out;
}
@keyframes modal-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-card { animation: none; } }

.modal-x {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: none; font-size: 26px; line-height: 1;
  color: var(--ink-3); cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.modal-x:hover { color: var(--ink); background: var(--paper-2); }

.modal-tabs { display: flex; gap: 4px; background: var(--paper-2); border-radius: 999px; padding: 4px; margin: 0 0 22px; }
.modal-tabs button {
  flex: 1; border: 0; background: none; cursor: pointer;
  font-family: var(--body); font-size: 13.5px; font-weight: 800;
  letter-spacing: .03em; color: var(--ink-2); padding: 9px 12px; border-radius: 999px;
}
.modal-tabs button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

.modal-title { font-family: var(--display); font-weight: 800; font-size: 26px; margin: 0 0 4px; letter-spacing: -.015em; }
.modal-sub { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; }

.auth-google { display: flex; justify-content: center; margin: 0 0 14px; min-height: 44px; }
.auth-google.busy { opacity: .5; pointer-events: none; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--ink-3); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.modal-error { background: #fef2f2; color: #991b1b; border-radius: 10px; padding: 11px 14px; margin: 0 0 16px; font-size: 14px; }

.modal-card .field { display: block; margin: 0 0 14px; }
.modal-card .field[hidden] { display: none; }
.modal-card .field span { display: block; font-size: 13px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; letter-spacing: .02em; }
.modal-card .field input {
  width: 100%; font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.modal-card .field input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.modal-submit { width: 100%; justify-content: center; margin-top: 6px; }

.modal-foot { margin: 18px 0 0; text-align: center; }
.modal-foot [hidden], .modal-fine[hidden] { display: none; }
.linkish {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--body); font-size: 14px; font-weight: 700; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--ink); }
.modal-fine { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; line-height: 1.5; }

/* The nav "Login" is a button now, so it has to be un-buttoned back to a link. */
.nav-cta .link { border: 0; background: none; cursor: pointer; font-family: var(--body); }

/* --------------------------------------------------------------------------
   Touch and tablet corrections (audited across 375 / 390 / 412 / 768).
   -------------------------------------------------------------------------- */

/* The floating question cards are positioned against the portal with negative
   offsets. That works while there is a wide column to hang them off; between a
   phone and a desktop there is not, and they pushed the PAGE sideways by ~20px
   on an iPad. Below the two-column breakpoint they stack under the artwork
   instead, which is the same treatment phones already had. */
@media (max-width: 980px) {
  .qcard { position: static; transform: none !important; max-width: none; margin: 0; }
  .qcard.big { max-width: none; }
  .qwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
  .qwrap .big { grid-column: 1 / -1; }
  .stage { overflow: visible; }
}

/* Anything you tap with a finger gets a 44px target, which is the size a thumb
   actually is. On a mouse these stay visually identical — the padding is
   invisible, only the hit area grows. */
@media (pointer: coarse) {
  .nav-links a,
  .foot-links a,
  .foot-links .linkish,
  .nav-cta .link { padding: 12px 4px; display: inline-flex; align-items: center; min-height: 44px; }
  .free-item .go { padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .scard .go { padding: 8px 0; min-height: 40px; display: inline-flex; align-items: center; }
  .modal-x { padding: 10px 14px; }
}

/* 11px was too small for the eyebrow labels once they were on a phone screen. */
.scard .count, .free-item .s, .portrait span, .free-tag { font-size: 12px; }

/* The touch padding above widened the header actions enough to push a 375px
   screen sideways. On a narrow phone the "Login" link is redundant — the dialog
   opens on the Sign in tab and both doors are one tap away — so it goes, and the
   remaining button shrinks to fit. */
@media (max-width: 640px) {
  .nav-cta .link { display: none !important; }
  .nav-cta .btn { padding: 10px 15px; font-size: 12.5px; }
  .nav-in { gap: 12px; padding: 12px 16px; }
  .brand b { font-size: 23px; }
  .brand small { font-size: 11px; }
}

/* 37px was still under a thumb's worth. Header buttons get the full 44 on touch. */
@media (pointer: coarse) {
  .nav-cta .btn, .brand { min-height: 44px; }
  .brand { justify-content: center; }
}

/* ==========================================================================
   Series landing page (/series/<slug>)
   ========================================================================== */

.sl-hero { padding: 44px 0 20px; }
.sl-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; align-items: center; }
.sl-back { font-size: 13.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sl-back:hover { color: var(--ink); }
.sl-kicker { margin: 14px 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, var(--amber-deep)); }
.sl-hero h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.025em;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.08; margin: 0 0 14px;
}
.sl-tagline { font-family: var(--hand); font-size: 20px; color: var(--ink-2); margin: 0 0 14px; }
.sl-writeup { color: var(--ink-2); font-size: 17px; max-width: 56ch; margin: 0; }
.sl-art { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.sl-art svg { width: 100%; height: 100%; display: block; }

.sl-discover { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.sl-point { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent, var(--amber)); border-radius: 14px; padding: 18px 20px; }
.sl-point b { display: block; font-family: var(--display); font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.sl-point span { font-size: 15px; color: var(--ink-2); line-height: 1.5; }

.sl-think { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
/* width/height attributes on the portraits (200x200) win over a flex basis of
   auto on a narrow screen, so they were pushing the page 48px sideways. */
.sl-think-faces { display: flex; gap: 14px; }
.sl-think-faces img { min-width: 0; flex: 1 1 0; }
.sl-think-faces img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); border: 3px solid #fff; box-shadow: var(--shadow-lg); }
.sl-think h2 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 33px); margin: 0 0 14px; }
.sl-think p { color: var(--ink-2); margin: 0 0 12px; }
.sl-not { background: #fff; border-left: 4px solid var(--amber); border-radius: 10px; padding: 14px 16px; }
.sl-not b { color: var(--ink); }

/* Book tiles: free ones in a big pair, locked ones on a dense grid. */
.sl-free { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 320px)); gap: 24px; justify-content: center; }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }

.tile { display: block; }
.tile-cover { position: relative; border-radius: 14px; overflow: hidden; background: #f0e9da; aspect-ratio: 3 / 4; box-shadow: var(--shadow); }
.tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .18s ease; }
.tile:hover .tile-cover img { transform: scale(1.03); }
.tile-free {
  position: absolute; left: 10px; top: 10px;
  background: var(--leaf); color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
}
/* A lock that shows you what you are missing, not a blank space. */
.tile.locked .tile-cover img { filter: saturate(.55) contrast(.95); opacity: .78; }
.tile-lock {
  position: absolute; inset: auto 10px 10px auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 253, 247, .94); color: var(--ink);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.tile-lock svg { width: 17px; height: 17px; }
.tile-body { padding: 10px 2px 0; }
.tile-body b { display: block; font-family: var(--display); font-size: 16px; font-weight: 700; line-height: 1.2; }
.tile-sub { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.tile-go { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--leaf); }
.tile.locked .tile-go { color: var(--ink-3); }
.tile:hover .tile-go { text-decoration: underline; text-underline-offset: 3px; }

.sl-cta { text-align: center; margin-top: 38px; }
.sl-cta p { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; }

@media (max-width: 900px) {
  .sl-hero-in, .sl-think { grid-template-columns: 1fr; gap: 26px; }
  .sl-think-faces { max-width: 300px; margin: 0 auto; }
  .sl-free { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
  .sl-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
}

/* Our own "Continue with Google" button. Google's official widget needs their
   script and a registered JavaScript origin; this is a plain link into the
   redirect flow, so it works with nothing but a registered redirect URI. Shape
   and wording follow Google's branding guidance. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; min-height: 46px; margin: 0 0 14px; padding: 12px 18px;
  background: #fff; color: #3c4043; border: 1.5px solid #dadce0; border-radius: 999px;
  font-family: var(--body); font-size: 15px; font-weight: 700; letter-spacing: .01em;
  transition: background .12s ease, box-shadow .12s ease;
}
.btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(60, 64, 67, .2); }
.btn-google svg { flex: 0 0 18px; }

/* ==========================================================================
   The welcome screen (/welcome) — one card, every field optional.
   ========================================================================== */

.welcome-page { background: var(--paper-2); }
.wl-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.wl-card {
  width: 100%; max-width: 560px; background: var(--card);
  border: 1px solid var(--line); border-radius: 24px; padding: 38px 36px 32px;
  box-shadow: var(--shadow-lg);
}
.wl-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--leaf); }
.wl-card h1 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 36px); letter-spacing: -.02em; margin: 0 0 10px; }
.wl-sub { margin: 0 0 26px; color: var(--ink-2); font-size: 16px; }
.wl-error { background: #fef2f2; color: #991b1b; border-radius: 10px; padding: 11px 14px; margin: 0 0 18px; font-size: 14px; }

.wl-card fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.wl-card legend {
  padding: 0; margin-bottom: 12px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.wl-row { display: grid; grid-template-columns: 1fr 120px; gap: 14px; }
.wl-card .field { display: block; margin: 0; }
.wl-card .field span { display: block; font-size: 13px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
.wl-card input, .wl-card select {
  width: 100%; font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.wl-card input:focus, .wl-card select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.wl-hint { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); }

.wl-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.wl-actions .btn { flex: 1 1 240px; justify-content: center; }

@media (max-width: 520px) {
  .wl-card { padding: 28px 22px 26px; border-radius: 20px; }
  .wl-row { grid-template-columns: 1fr; }
  .wl-actions { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .wl-actions .linkish { padding: 10px 0; }
}