/* ==========================================================================
   THE BREAKFAST BOOK CLUB
   Cream paper, one yolk-yellow accent, and as few lines as the page can get
   away with. Light only, on purpose: it is a breakfast club.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  color-scheme: light;

  --paper:      #fbf6ec;   /* the tablecloth */
  --paper-warm: #f5ecdc;   /* a shade deeper, for bands */
  --card:       #fffdf8;
  --rule:       #e6dac6;

  --ink:        #2a221b;
  --ink-soft:   #5b4f44;
  --muted:      #8d7f70;

  --yolk:       #eba82f;
  --yolk-deep:  #c98708;
  --coffee:     #6a4630;
  --jam:        #a63d4e;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --shell: 1080px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);

  --shadow-cover: 0 1px 2px rgba(42, 34, 27, .10), 0 8px 20px -8px rgba(42, 34, 27, .28);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .3vw + .94rem, 1.075rem);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

img { max-width: 100%; height: auto; }

a { color: var(--coffee); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--yolk-deep); }

:focus-visible { outline: 2px solid var(--yolk-deep); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--yolk); color: var(--ink);
  padding: .7rem 1.1rem; font-weight: 600; z-index: 99; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; top: 0; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

/* ------------------------------------------------------------ 2. MASTHEAD */
.masthead {
  background: linear-gradient(180deg, var(--paper-warm), var(--paper) 82%);
  padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
  border-bottom: 1px solid var(--rule);
}

.crest {
  width: clamp(74px, 12vw, 104px);
  height: auto;
  color: var(--coffee);
  display: block;
  margin: 0 auto clamp(1rem, 2.5vw, 1.5rem);
}

.wordmark { margin: 0; }
.wm-the {
  display: block;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .55rem;
}
.wm-main, .wm-sub { display: block; }
.wm-main {
  font-size: clamp(2.6rem, 8.5vw, 4.6rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 600;
}
.wm-sub {
  font-size: clamp(1.35rem, 4vw, 2.1rem);
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: .1em;
}

.tagline {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 1.35rem auto 0;
  text-wrap: balance;
}

.standing {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.1rem 0 0;
}

.topnav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .35rem clamp(.9rem, 2.5vw, 1.9rem);
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
.topnav a {
  font-size: .84rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-soft); text-decoration: none;
  padding: .3rem .1rem; border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.topnav a:hover { color: var(--ink); border-bottom-color: var(--yolk); }

.noscript {
  max-width: 60ch; margin: 1.5rem auto; padding: 1rem 1.25rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  font-size: .95rem;
}

/* ----------------------------------------------------- 3. SECTIONS + RULES */
section { padding: clamp(3rem, 8vw, 5.5rem) 0; }

.head { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.head h2 {
  font-size: clamp(1.85rem, 4.5vw, 2.7rem);
  font-variation-settings: "SOFT" 35, "WONK" 1;
}
.head-sub {
  margin: .7rem 0 0;
  color: var(--ink-soft);
  max-width: 58ch;
  font-size: .98rem;
}

/* Sections are separated by their ground colour alone: the page alternates
   --paper and --paper-warm all the way down, so no divider is needed. */

/* --------------------------------------------------------- 4. BOOK CARDS */
.bk {
  display: grid;
  grid-template-columns: minmax(96px, 132px) 1fr;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: start;
}

.bk-cover {
  display: block; line-height: 0;
  border-radius: 3px;
  box-shadow: var(--shadow-cover);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  background: var(--paper-warm);
}
.bk-cover:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 2px 4px rgba(42,34,27,.12), 0 16px 30px -10px rgba(42,34,27,.34); }
.bk-cover img { display: block; width: 100%; height: auto; border-radius: 3px; }

.bk-role {
  margin: 0 0 .4rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--yolk-deep);
}
.bk-title { font-size: clamp(1.2rem, 2.6vw, 1.55rem); }
.bk-author { margin: .25rem 0 0; color: var(--ink-soft); font-style: italic; font-family: var(--display); }
.bk-meta { margin: .3rem 0 0; font-size: .82rem; color: var(--muted); letter-spacing: .02em; }
.bk-blurb { margin: .75rem 0 0; color: var(--ink-soft); max-width: 52ch; }
.bk-note {
  margin: .6rem 0 0; font-size: .88rem; color: var(--muted);
  padding-left: .8rem; border-left: 2px solid var(--rule); max-width: 50ch;
}

.bk-awards { margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.award {
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  color: var(--coffee); background: var(--paper-warm);
  border: 1px solid var(--rule); border-radius: 999px; padding: .18rem .6rem;
}

.bk-rating { margin: .7rem 0 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 14px; height: 14px; }
.stars .on  { fill: var(--yolk); }
.stars .off { fill: var(--rule); }
.stars .half { position: relative; display: inline-flex; width: 14px; height: 14px; }
.stars .half svg { position: absolute; inset: 0; }
.stars .half .on { clip-path: inset(0 50% 0 0); }
.bk-score { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.bk-count { font-size: .78rem; color: var(--muted); }

.bk-link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .8rem; font-size: .82rem; font-weight: 600;
  text-decoration: none; color: var(--coffee);
}
.bk-link svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.bk-link:hover svg { transform: translateX(3px); }

/* The book of the month, given room. */
.bk-large { grid-template-columns: minmax(140px, 210px) 1fr; }
.bk-large .bk-title { font-size: clamp(1.6rem, 4vw, 2.15rem); }
.bk-large .bk-blurb { font-size: 1.05rem; }

/* -------------------------------------------------------- 5. NEXT SECTION */
.next .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, .9fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
.next .head, .next .chatter { grid-column: 1 / -1; }

.next-books { display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem); }

.next-side {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: clamp(1.15rem, 2.6vw, 1.6rem);
  position: sticky; top: 1.5rem;
}

.dossier { margin: 0; display: grid; gap: .9rem; }
.dossier dt {
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .15rem;
}
.dossier dd { margin: 0; font-weight: 500; }
.dossier .addr { display: block; font-weight: 400; font-size: .87rem; color: var(--muted); }


.countdown { display: flex; gap: .55rem; margin: 1.2rem 0 0; flex-wrap: wrap; }
.cd-cell {
  display: flex; flex-direction: column; align-items: center;
  background: var(--paper-warm); border-radius: 8px;
  padding: .45rem .55rem; min-width: 3.1rem;
}
.cd-num { font-family: var(--display); font-size: 1.3rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-lab { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }
.cd-now { font-family: var(--display); font-style: italic; color: var(--coffee); }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-size: .84rem; font-weight: 600;
  padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink); text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: var(--paper-warm); border-color: var(--muted); color: var(--ink); transform: translateY(-1px); }
.btn-yolk { background: var(--yolk); border-color: var(--yolk); color: #33240a; }
.btn-yolk:hover { background: var(--yolk-deep); border-color: var(--yolk-deep); color: #fff; }

/* The share button says what it did where a phone has no share sheet to say it
   for us. It has to hold its own width while the label changes, or the row of
   buttons beside it jumps when the word does. */
.btn-share { min-width: 9.5rem; }
.btn-share.is-done { background: var(--yolk); border-color: var(--yolk); color: #33240a; }

/* ------------------------------------------------------- 6. WHO WAS THERE */
/* No rule: it sits under the review buttons, and those go without lines. */
.attended {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem;
  margin: 1.5rem 0 0;
}

.att-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); flex: 0 0 auto;
}
.att-names { display: flex; flex-wrap: wrap; gap: .5rem; }
.att {
  font-size: .82rem; font-weight: 500; line-height: 1;
  color: var(--coffee); background: var(--paper-warm);
  border: 1px solid var(--rule); border-radius: 6px;
  padding: .38rem .7rem; white-space: nowrap;
}

/* --------------------------------------------------------------- 7. ARCHIVE */
.archive { background: var(--paper-warm); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.st {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 1rem .85rem; text-align: center;
}
.st-num {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.st-lab {
  display: block; margin-top: .3rem;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 3vw, 2rem); }

.entry {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(1.1rem, 3vw, 1.9rem);
  scroll-margin-top: 1.5rem;
}

.entry-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .8rem;
  padding-bottom: .9rem; margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
}
.entry-n {
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--coffee);
  border-radius: 999px; padding: .2rem .6rem;
}
.entry-date { font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight: 600; }
.entry-time { font-size: .8rem; color: var(--muted); margin-left: auto; }

.entry-books { display: grid; gap: clamp(1.25rem, 3vw, 1.9rem); }
@media (min-width: 760px) {
  .entry-books { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

.unrecorded {
  margin: 0; padding: 1.25rem 1.4rem;
  background: var(--paper-warm); border: 1px dashed var(--rule); border-radius: 10px;
  font-family: var(--display); font-style: italic; color: var(--ink-soft);
}

.screening { margin: 1.1rem 0 0; font-size: .9rem; }
.screening-tag {
  display: inline-block; margin-right: .5rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--jam);
}

/* First thing under the date, before the books. */
.entry-note {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  font-family: var(--display); color: var(--ink-soft); font-size: .98rem; max-width: 68ch;
}

/* --------------------------------------------------------------- 8. MEMBERS */
/* Left on --paper: with House Rules gone it follows the Archive directly, and
   two --paper-warm sections in a row would run together into one band. */
.member-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem;
}
.member {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: .95rem 1.1rem;
}
.mb-name { display: block; font-family: var(--display); font-size: 1.12rem; font-weight: 600; }
.mb-role { display: block; margin-top: .15rem; font-size: .88rem; color: var(--ink-soft); }
.mb-since {
  display: block; margin-top: .5rem;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}


/* ----------------------------------------------------------- 9. CALENDAR */
/* A slim band rather than a full section: it sits between the masthead and
   the next book, so it has to say its piece without taking a screen to do it. */
.subscribe {
  background: var(--paper-warm);
  padding: clamp(1.5rem, 4vw, 2.25rem) 0;
}
.subscribe .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.1rem clamp(1.5rem, 4vw, 3rem);
}

/* Two columns that fit on one line at the shell width, and stack cleanly
   below it. 34ch and 11rem are the widths at which they stop wrapping on a
   1080px shell; wider and the buttons drop to a second row with half the band
   left empty beside them. */
.sub-say { display: flex; align-items: flex-start; gap: .9rem; flex: 1 1 22rem; max-width: 34ch; }
.sub-ico { width: 34px; height: 30px; flex: 0 0 auto; color: var(--coffee); opacity: .8; margin-top: .1rem; }
.sub-say h2 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.sub-say p { margin: .3rem 0 0; font-size: .88rem; color: var(--ink-soft); }

.sub-do { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.copyrow { display: flex; gap: .4rem; }
.copyfield {
  flex: 1 1 auto; min-width: 0; width: 11rem; max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem;
  padding: .5rem .7rem; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); color: var(--ink-soft);
}
.btn-copy.is-done { background: var(--yolk); border-color: var(--yolk); }

/* -------------------------------------------------------------- 10. FOOTER */
.footer {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.foot-mark { width: 60px; height: auto; color: var(--coffee); opacity: .8; }
.foot-name { font-family: var(--display); font-size: 1.25rem; font-weight: 600; margin: .75rem 0 0; }
.foot-cadence { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; font-style: italic; }
.foot-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.25rem;
  margin: 1.4rem 0 0;
}
.foot-links a { font-size: .82rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.foot-links a:hover { color: var(--yolk-deep); }
.foot-fine {
  margin: 1.6rem auto 0; max-width: 62ch;
  font-size: .78rem; line-height: 1.6; color: var(--muted);
}

/* ------------------------------------------------------------- 11. REVIEWS */
/* Under every book, across both columns of its card. Empty until
   api/reviews.php answers, and stays empty (so hidden) where it never does. */
/* No rules above or below: the card's own gap separates it from the book. */
.rv { grid-column: 1 / -1; }
.rv:empty { display: none; }

.rv-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; }
.rv-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.rv-score { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.rv-count { font-size: .78rem; color: var(--muted); }
/* Under the cover, as wide as the cover. Hidden while the form is open. */
.rv-slot { margin-top: 10px; }
.rv-slot:empty { display: none; }
.rv-slot .rv-write { width: 100%; padding-inline: .5rem; text-align: center; }
.bk.is-writing .rv-write { display: none; }

.rv-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .85rem; }
.rv-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .55rem; margin: 0; font-size: .88rem; }
.rv-name { font-weight: 600; }
.rv-date { font-size: .76rem; color: var(--muted); }
.rv-text {
  margin: .25rem 0 0; max-width: 62ch;
  color: var(--ink-soft); font-size: .94rem; white-space: pre-line; overflow-wrap: anywhere;
}

.rv-form {
  margin-top: .9rem; padding: 1rem 1.1rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
}
.rv-legend {
  display: block; padding: 0; margin: 0 0 .35rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.rv-stars { border: 0; margin: 0 0 .9rem; padding: 0; display: flex; gap: .15rem; flex-wrap: wrap; }
.rv-stars legend { width: 100%; }
.rv-stars label { cursor: pointer; line-height: 0; padding: .15rem; border-radius: 4px; }
.rv-stars label:has(input:focus-visible) { outline: 2px solid var(--yolk-deep); outline-offset: 1px; }
.rv-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-stars svg { width: 26px; height: 26px; fill: var(--rule); transition: fill .12s var(--ease); }
.rv-stars[data-v="1"] label:nth-of-type(-n+1) svg,
.rv-stars[data-v="2"] label:nth-of-type(-n+2) svg,
.rv-stars[data-v="3"] label:nth-of-type(-n+3) svg,
.rv-stars[data-v="4"] label:nth-of-type(-n+4) svg,
.rv-stars[data-v="5"] label:nth-of-type(-n+5) svg { fill: var(--yolk); }

.rv-form textarea {
  display: block; width: 100%; min-height: 6.5rem; resize: vertical;
  font: inherit; font-size: .95rem; line-height: 1.55; color: var(--ink);
  padding: .6rem .75rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--card);
}
.rv-form textarea:focus { outline: 2px solid var(--yolk-deep); outline-offset: 1px; }
.rv-err, .auth-err { margin: .5rem 0 0; font-size: .85rem; color: var(--jam); }
.rv-err:empty, .auth-err:empty { display: none; }
.rv-do { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.rv-del { margin-left: auto; color: var(--jam); }

.btn-sm { font-size: .78rem; padding: .38rem .85rem; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

.linkbtn {
  font: inherit; font-size: .78rem; font-weight: 600;
  background: none; border: 0; padding: .1rem .15rem; cursor: pointer;
  color: var(--coffee); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.linkbtn:hover { color: var(--yolk-deep); }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* `hidden` has to win over the display each of these sets for itself. */
[hidden] { display: none !important; }

/* -------------------------------------------------------------- 12. SIGN IN */
/* Pinned to the masthead's top right corner, clear of the centred crest. */
.masthead { position: relative; }
.account {
  position: absolute; top: clamp(.6rem, 2vw, 1.1rem); right: var(--gutter);
  display: flex; align-items: center; gap: .9rem;
}
.nav-btn {
  font: inherit; font-size: .84rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-soft); background: none; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; padding: .3rem .1rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav-btn:hover { color: var(--ink); border-bottom-color: var(--yolk); }
.nav-user {
  color: var(--coffee);
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.auth {
  width: min(100% - 2rem, 22rem);
  border: 1px solid var(--rule); border-radius: 14px;
  background: var(--card); color: var(--ink);
  padding: 1.6rem 1.4rem 1.4rem;
  text-align: center;
  box-shadow: 0 20px 50px -20px rgba(42, 34, 27, .45);
}
.auth::backdrop { background: rgba(42, 34, 27, .38); }
.auth h2 { font-size: 1.45rem; margin-bottom: 1.1rem; }
.auth-x {
  position: absolute; top: .45rem; right: .55rem;
  font-size: 1.5rem; line-height: 1; color: var(--muted);
  background: none; border: 0; cursor: pointer; padding: .25rem .45rem; border-radius: 6px;
}
.auth-x:hover { color: var(--ink); }

.auth-btns { display: grid; justify-items: center; gap: .7rem; }
.auth-google { min-height: 44px; }
.auth-apple {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  line-height: 0; border-radius: 22px;
}
.auth-apple img { display: block; width: 260px; height: 44px; }
.auth-apple:disabled { opacity: .5; cursor: default; }
.auth-dev {
  display: flex; gap: .4rem; width: 260px;
  padding-top: .7rem; border-top: 1px dashed var(--rule);
}
.auth-dev input { flex: 1 1 auto; min-width: 0; }
.auth-dev .btn { flex: none; white-space: nowrap; }

.auth-say { margin: -.6rem 0 .8rem; font-size: .88rem; color: var(--ink-soft); }
.auth-name, .auth-dev input {
  font: inherit; font-size: .95rem; color: var(--ink);
  padding: .5rem .75rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper);
}
.auth-name { display: block; width: 100%; margin-bottom: .8rem; text-align: center; }
.auth-del { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule); }
.auth-del .linkbtn { color: var(--jam); }

/* ------------------------------------------------------------- PRIVACY */
.doc { padding: clamp(2rem, 6vw, 4rem) 0; }
.doc .wrap { max-width: 42rem; }
.doc-home { font-size: .84rem; font-weight: 600; text-decoration: none; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin: 1.2rem 0 1.4rem; }
.doc h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
.doc p, .doc li { color: var(--ink-soft); }
.doc ul { padding-left: 1.2rem; }
.doc li + li { margin-top: .35rem; }

/* ------------------------------------------------------------ 13. NARROWER */
@media (max-width: 860px) {
  .next .wrap { grid-template-columns: 1fr; }
  .next-side { position: static; }
}

@media (max-width: 560px) {
  .bk { grid-template-columns: 1fr; gap: 1rem; }
  .bk-side { width: 132px; }
  .bk-large .bk-side { width: 160px; }
  .entry-time { margin-left: 0; }
}

@media print {
  .topnav, .account, .actions, .countdown, .subscribe, .skip, .rv-write, .rv-form, .linkbtn { display: none; }
  body { background: #fff; }
}