/* ==========================================================================
   Archisha's corner — shared stylesheet
   Warm paper, blush, terracotta, sage, lavender.
   Hand-written CSS. No frameworks, no build step.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  --paper:      #fffaf3;
  --cream:      #fdf2e6;
  --card:       #fffdf9;
  --ink:        #3b2f2b;
  --ink-soft:   #6d5a51;
  --muted:      #8b7a71;

  --blush:      #f7cfc4;
  --terracotta: #b95c42;
  --sage:       #9fb79a;
  --lavender:   #cbbde2;
  --butter:     #f6e2ab;

  --line:       #ecdccb;
  --shadow-sm:  0 2px 8px rgba(120, 82, 60, .07);
  --shadow:     0 12px 32px rgba(120, 82, 60, .12);
  --radius:     22px;
  --radius-sm:  14px;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;

  --maxw: 1080px;
}

/* cozy night mode — same room, lamp on */
[data-theme="night"] {
  --paper:      #241f26;
  --cream:      #2c2530;
  --card:       #302833;
  --ink:        #f2e6dc;
  --ink-soft:   #d7c6ba;
  --muted:      #a9968c;

  --blush:      #7d5a55;
  --terracotta: #e79880;
  --sage:       #7d9478;
  --lavender:   #9d8cba;
  --butter:     #b39a5f;

  --line:       #453a48;
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, .25);
  --shadow:     0 12px 32px rgba(0, 0, 0, .35);
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* several elements below set display, which would otherwise beat [hidden] */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--paper);
  /* soft light-through-a-window glow, drawn with gradients so there are no image files */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(247, 207, 196, .30), transparent 42%),
    radial-gradient(circle at 88% 6%,  rgba(203, 189, 226, .26), transparent 40%),
    radial-gradient(circle at 78% 82%, rgba(159, 183, 154, .22), transparent 45%);
  -webkit-font-smoothing: antialiased;
}

/* `background-attachment: fixed` is lovely on a desktop and a menace on phones:
   iOS Safari sizes a fixed background to the whole document rather than the
   viewport, and both it and Android Chrome repaint it on every scroll frame.
   Only the pages that can afford it get it. */
@media (min-width: 781px) and (hover: hover) {
  body { background-attachment: fixed; }
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(1.85rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }

a { color: var(--terracotta); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

img { max-width: 100%; display: block; }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 720px); margin-inline: auto; }

section { padding: 3rem 0; }

.eyebrow {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--terracotta);
  margin-bottom: .6rem;
}

.lead { font-size: 1.18rem; color: var(--ink-soft); }

.center { text-align: center; }

/* ---------- 3. header + nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
}

.brand {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-right: auto;
}
.brand .dot {
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--blush), var(--butter));
  display: grid; place-items: center;
  font-size: .9rem;
  box-shadow: var(--shadow-sm);
  flex: none;
}

.nav-links {
  display: flex;
  gap: .35rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  display: block;
  padding: .4rem .8rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink-soft);
}
.nav-links a:hover { background: var(--cream); color: var(--ink); }
.nav-links a[aria-current="page"] { background: var(--blush); color: var(--ink); }
[data-theme="night"] .nav-links a[aria-current="page"] { color: #fff4ea; }

.icon-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: grid; place-items: center;
  flex: none;
}
.icon-btn:hover { background: var(--cream); }

.nav-toggle { display: none; }

@media (max-width: 780px) {
  .site-header {
    position: relative;
    /* Not sticky here, so the blur buys nothing and costs a compositor layer. */
    backdrop-filter: none;
    background: var(--paper);
  }
  .nav-toggle { display: grid; order: 3; }

  /* Closed is the DEFAULT, expressed in CSS rather than by a `hidden`
     attribute that only JavaScript can set. Otherwise the menu paints open
     between first paint and site.js running — and stays open forever if the
     script never arrives. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: .5rem 1.25rem 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 30;
  }
  .nav-bar.nav-open .nav-links { display: flex; }
  .nav-links a { padding: .8rem .9rem; }

  /* Thumbs, not mouse pointers: 38px was under the comfortable minimum. */
  .icon-btn { width: 2.75rem; height: 2.75rem; }
}

/* Long brand + two buttons stops fitting somewhere around here. */
@media (max-width: 400px) {
  .brand { font-size: 1.05rem; gap: .4rem; }
  .nav-bar { gap: .5rem; }
}

/* ---------- 4. fairy lights ---------- */
.lights {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  padding-top: 1rem;
  list-style: none;
  margin: 0;
}
.lights li {
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 10px 2px rgba(246, 226, 171, .8);
  animation: twinkle 3.4s ease-in-out infinite;
}
.lights li:nth-child(2n) { background: var(--blush); box-shadow: 0 0 10px 2px rgba(247, 207, 196, .8); animation-delay: .5s; }
.lights li:nth-child(3n) { background: var(--sage);  box-shadow: 0 0 10px 2px rgba(159, 183, 154, .8); animation-delay: 1.1s; }
.lights li:nth-child(4n) { background: var(--lavender); animation-delay: 1.7s; }
@keyframes twinkle { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* ---------- 5. hero ---------- */
.hero { padding: 2.2rem 0 1rem; }
.hero-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow);
  padding: clamp(1.7rem, 4vw, 3rem);
  position: relative;
}
/* washi tape at the top, like a photo stuck on a wall */
.hero-card::before {
  content: "";
  position: absolute;
  top: -.7rem; left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 8rem; height: 1.5rem;
  background: repeating-linear-gradient(45deg, var(--blush) 0 8px, var(--butter) 8px 16px);
  opacity: .9;
  border-radius: 3px;
}
.hero-card h1 { margin-top: .4rem; }
.hero-card .lead { max-width: 56ch; }

.btn {
  display: inline-block;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--body);
  font-size: 1rem;
}
.btn-primary { background: var(--terracotta); color: #fff8f2; }
[data-theme="night"] .btn-primary { color: #2a2320; }
.btn-primary:hover { background: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--cream); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }

/* ---------- 6. cards + grids ---------- */
.grid { display: grid; gap: 1.4rem; }
/* min() matters: a bare minmax(300px, 1fr) refuses to go below 300px, so on a
   320px-wide phone the column is wider than the screen and the whole page
   scrolls sideways. min(300px, 100%) lets the single column shrink instead. */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
a.card { text-decoration: none; color: inherit; display: block; transition: transform .18s ease, box-shadow .18s ease; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.card .emoji { font-size: 1.9rem; line-height: 1; display: block; margin-bottom: .6rem; }
.card h3 { margin-bottom: .35rem; }
.card p { color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }
.card .more { display: inline-block; margin-top: .9rem; font-weight: 800; color: var(--terracotta); }

.door { border-top: 5px solid var(--blush); }
.door.two { border-top-color: var(--sage); }
.door.three { border-top-color: var(--lavender); }

/* sticky-note tint */
.note { background: var(--butter); border: none; transform: rotate(-.7deg); color: #3b2f2b; }
.note h3 { color: #3b2f2b; }
.note p { color: #4b3c34; }
.note.pink { background: var(--blush); transform: rotate(.8deg); }
.note.green { background: var(--sage); transform: rotate(-.4deg); }

/* A rotated box is wider than its layout box, so on a narrow screen the tilt
   alone is enough to poke past the edge and start a sideways scroll. Sit the
   notes straight where there is no room for the charm. */
@media (max-width: 620px) {
  .note, .note.pink, .note.green { transform: none; }
}

/* ---------- 7. book review bits ---------- */
.book-header {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 1.8rem;
  align-items: start;
}
@media (max-width: 620px) {
  .book-header { grid-template-columns: 1fr; }
  /* Stacked, the cover would stretch to the full column width and become a
     420px-tall slab of gradient before you reach a word of the review. */
  .book-header .cover { max-width: 170px; margin-inline: auto; }
}

/* a "cover" drawn in CSS, so there is no image to host or lose */
.cover {
  aspect-ratio: 2 / 3;
  border-radius: 6px 12px 12px 6px;
  background: linear-gradient(155deg, #2f2b3d, #6b4a63 55%, #b95c42);
  color: #fff4ea;
  padding: 1.1rem .9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow);
  border-left: 7px solid rgba(0, 0, 0, .28);
  font-family: var(--display);
}
.cover .t { font-size: 1.4rem; line-height: 1.1; }
.cover .a { font-size: .82rem; opacity: .88; font-family: var(--body); letter-spacing: .05em; }
.cover.sage { background: linear-gradient(155deg, #33422f, #6f8a63 60%, #cbbde2); }
.cover.lav  { background: linear-gradient(155deg, #2f2b3d, #6d5a8f 60%, #f7cfc4); }

.stars { color: var(--terracotta); letter-spacing: .12em; font-size: 1.2rem; }
.rating-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.rating-line .num { font-weight: 800; }

.tags { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.tags li {
  font-size: .82rem;
  font-weight: 800;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.badge {
  display: inline-block;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--sage);
  color: #22301f;
}
[data-theme="night"] .badge { color: #f2e6dc; }

blockquote.pull {
  margin: 2rem 0;
  padding: 1.2rem 1.5rem;
  border-left: 5px solid var(--blush);
  background: var(--cream);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--display);
  font-size: 1.18rem;
  font-style: italic;
}
blockquote.pull p:last-child { margin-bottom: 0; }

.cw {
  border: 1px dashed var(--terracotta);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  background: color-mix(in srgb, var(--blush) 35%, transparent);
  font-size: .96rem;
}
.cw strong { display: block; margin-bottom: .2rem; }
.cw p:last-child { margin-bottom: 0; }

/* shelf list */
.shelf { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.shelf li {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: .9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.shelf .spine { width: 6px; align-self: stretch; border-radius: 3px; background: var(--sage); flex: none; }
.shelf li:nth-child(2n) .spine { background: var(--lavender); }
.shelf li:nth-child(3n) .spine { background: var(--blush); }
.shelf .title { font-weight: 800; }
.shelf .meta { color: var(--muted); font-size: .9rem; margin-left: auto; white-space: nowrap; }

/* ---------- 8. friendlier bullets ---------- */
.tick { list-style: none; padding: 0; margin: 0 0 1.1em; display: grid; gap: .55rem; }
.tick li { padding-left: 1.7rem; position: relative; }
.tick li::before { content: "\2765"; position: absolute; left: 0; top: 0; color: var(--terracotta); }
.tick.star li::before { content: "\2727"; color: var(--sage); }

/* ---------- 9. small interactive bits ---------- */
.pick-me {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
#affirmation {
  font-family: var(--display);
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  min-height: 3.6em;
  display: grid; place-items: center;
  margin-bottom: 1rem;
}

.jar textarea {
  width: 100%;
  min-height: 6.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  padding: .9rem 1rem;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
.jar-note { font-size: .88rem; color: var(--muted); }
.jar textarea:focus-visible, .jar input:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
/* the guestbook is deliberately switched off until the backend exists */
.jar input:disabled, .jar textarea:disabled, .btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  border-style: dashed;
}
.jar-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.jar-list li {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  font-size: .95rem;
}

details.faq {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .9rem 1.2rem;
  margin-bottom: .8rem;
}
details.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-family: var(--display);
  font-size: 1.1rem;
  list-style: none;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: "\2726  "; color: var(--terracotta); }
details.faq[open] summary { margin-bottom: .6rem; }
details.faq p:last-child { margin-bottom: 0; }

/* outfit formula strip */
.formula {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-weight: 800;
  margin: .4rem 0 .8rem;
}
.formula span {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem .8rem;
  font-size: .92rem;
}
.formula em { color: var(--terracotta); font-style: normal; }

/* ---------- 10. divider ---------- */
.squiggle { display: block; margin: 2.5rem auto; width: 170px; height: 16px; color: var(--blush); }

/* ---------- 11. footer ---------- */
.site-footer {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--cream) 70%, transparent);
  padding: 2.2rem 0 2.6rem;
  font-size: .95rem;
  color: var(--ink-soft);
}
.footer-grid { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: space-between; align-items: center; }
.site-footer a { font-weight: 700; }
.site-footer p { margin-bottom: 0; }

/* ---------- 12. accessibility ---------- */
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; border-radius: 0 0 8px 0; z-index: 99;
}
.skip:focus { left: 0; top: 0; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 13. the world map: seats and voices ---------- */

/* A "seat" is one country's chair at the table. Some are filled, two are not —
   and the empty ones are the point, not a placeholder to be tidied away. */
.seat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.seat .flagdot {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.3rem;
  margin-bottom: .5rem;
  background: var(--cream);
  border: 1px solid var(--line);
}
.seat h3 { margin-bottom: .1rem; }
.seat .who { font-size: .9rem; color: var(--muted); font-weight: 700; margin-bottom: .7rem; }
.seat p { color: var(--ink-soft); }
.seat p:last-child { margin-bottom: 0; }

.seat.empty {
  border-style: dashed;
  border-color: var(--terracotta);
  background: transparent;
  box-shadow: none;
}
.seat.empty .flagdot { background: transparent; border-style: dashed; }

/* One country's answer inside a question page. */
.voice {
  border-left: 5px solid var(--blush);
  padding: .2rem 0 .2rem 1.4rem;
  margin: 0 0 2.5rem;
}
.voice.de { border-left-color: var(--butter); }
.voice.kr { border-left-color: var(--lavender); }
.voice > h3 {
  font-size: 1.45rem;
  margin-bottom: .1rem;
}
.voice .byline {
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.voice .byline .firsthand { color: var(--terracotta); }

/* "I looked this up, I did not live it" — never dressed up as testimony. */
.secondhand {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  font-size: .93rem;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}
.secondhand strong { color: var(--ink); }

.ask {
  border: 1px dashed var(--terracotta);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  background: color-mix(in srgb, var(--blush) 22%, transparent);
  margin-bottom: 1.4rem;
}
.ask p:last-child { margin-bottom: 0; }
.ask ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.ask li { margin-bottom: .3rem; }

/* the running list of questions */
.qlist { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .9rem; }
.qlist a {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  transition: transform .18s ease;
}
.qlist a:hover { transform: translateX(4px); background: var(--cream); }
.qlist .soon {
  padding: 1rem 1.2rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .95rem;
}

/* ---------- 14. the book-match quiz ---------- */
.quiz {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  min-height: 26rem;
}

.qprogress {
  display: flex; align-items: center; gap: .8rem;
  font-size: .82rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.2rem;
}
.qbar { flex: 1; height: 6px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.qbar i { display: block; height: 100%; background: var(--terracotta); border-radius: 999px; transition: width .3s ease; }

.qtext {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  line-height: 1.25;
  margin-bottom: 1.4rem;
}

.qoptions { display: grid; gap: .7rem; }
.qoptions button {
  text-align: left;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .95rem 1.1rem;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.qoptions button:hover { background: var(--cream); border-color: var(--terracotta); transform: translateX(4px); }

.qback {
  margin-top: 1.4rem;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: .92rem; font-weight: 700;
  color: var(--muted); cursor: pointer;
}
.qback:hover { color: var(--terracotta); }

/* The result is built to be screenshotted and sent to a friend — which is the
   only distribution this site has. Hence the URL baked into the card. */
.result { text-align: center; }
.result .kicker {
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 800; color: var(--terracotta); margin-bottom: .8rem;
}
.result .title { font-family: var(--display); font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15; margin-bottom: .2rem; }
.result .author { color: var(--muted); font-weight: 700; margin-bottom: 1.2rem; }
.result .why {
  font-size: 1.08rem; color: var(--ink-soft);
  max-width: 46ch; margin: 0 auto 1.4rem;
}
.result .runner {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  font-size: .95rem;
  margin-bottom: 1.4rem;
}
.result .stamp {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--muted);
}
.result .cover {
  width: 130px;
  margin: 0 auto 1.2rem;
}