/* ==========================================================================
   Pine Hill Falls: components.css
   Hero welcome sign, home page blocks, countdown, book display (présentoir),
   official paper documents and the age gate.
   ========================================================================== */

/* ---------- Hero: photo + painted welcome sign ---------- */
.hero { position: relative; }
.hero__visual { position: relative; }
.hero__photo { aspect-ratio: 16 / 7; min-height: 16rem; max-height: 34rem; width: 100%; }

/* The town sign, painted on boards. Decorative (the real h1 is below). */
.town-sign {
  position: absolute; left: clamp(0.75rem, 4vw, 3rem); bottom: -5.2rem; z-index: 2;
  width: clamp(15rem, 34vw, 23rem);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
}
.town-sign__board {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3.2rem),
    linear-gradient(175deg, #36563f, var(--pine) 60%, #25402e);
  border: 0.35rem solid var(--cream);
  outline: 2px solid var(--pine);
  border-radius: 0.6rem;
  padding: 0.9rem 1rem 0.8rem;
  color: var(--cream); text-align: center;
  font-family: var(--font-sign); letter-spacing: 0.06em; line-height: 0.95;
}
.town-sign__small { font-size: clamp(0.9rem, 1.8vw, 1.15rem); }
.town-sign__big { font-size: clamp(2rem, 4.6vw, 3.1rem); margin: 0.1rem 0 0.25rem; }
.town-sign__row { display: flex; justify-content: center; gap: 1.2rem; font-size: clamp(1rem, 2vw, 1.35rem); }
/* POP. 312 painted over older, lower numbers */
.town-sign__pop { position: relative; display: inline-block; }
.town-sign__pop .ghost {
  position: absolute; left: 0; top: 0; color: var(--cream); opacity: 0.16; pointer-events: none;
}
.town-sign__pop .ghost--1 { transform: translate(0.12em, 0.05em); }
.town-sign__pop .ghost--2 { transform: translate(-0.08em, -0.06em); opacity: 0.1; }
.town-sign__home {
  margin-top: 0.5rem; padding-top: 0.45rem; border-top: 2px solid rgba(244, 236, 216, 0.5);
  font-size: clamp(0.72rem, 1.4vw, 0.95rem);
}
.town-sign__posts { display: flex; justify-content: space-between; padding-inline: 18%; }
.town-sign__posts span { width: 0.7rem; height: 2.4rem; background: linear-gradient(90deg, #5b4630, #7a6043); }

.welcome-band {
  background: var(--navy); color: var(--cream);
  padding-block: 3.4rem 1.8rem;
}
.welcome-band__inner { display: grid; gap: 0.4rem; justify-items: end; text-align: right; padding-left: clamp(0rem, 30vw, 24rem); }
.welcome-band h1 {
  font-family: var(--font-sign); font-weight: 400; font-size: var(--fs-3xl);
  letter-spacing: 0.02em; line-height: 0.95;
}
.welcome-band__facts { font-size: var(--fs-md); color: #d9d3c2; }
.welcome-band__slogan { font-style: italic; font-size: var(--fs-lg); color: #f7dfe9; }

@media (max-width: 40rem) {
  .hero__photo { aspect-ratio: 4 / 3; }
  .town-sign { position: relative; left: auto; bottom: auto; margin: -3rem auto -2.4rem; width: min(88%, 20rem); }
  .hero__visual { background: var(--navy); }
  .welcome-band { padding-top: 3rem !important; }
  .welcome-band { padding-top: 1.5rem; }
  .welcome-band__inner { justify-items: start; text-align: left; padding-left: 0; }
}

/* ---------- Home layout ---------- */
.home-grid {
  display: grid; gap: 2.5rem var(--gap);
  grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr);
  align-items: start;
  margin-top: 1rem;
}
.home-grid__main, .home-grid__side { display: grid; gap: 2.5rem; }
@media (max-width: 52rem) { .home-grid { grid-template-columns: 1fr; } }

/* Mayor's letter: portrait framed like an official photo, letter on paper */
.mayor { display: grid; gap: 0; }
.mayor__body {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem;
  padding: 1.5rem; background: #fbf6ea; border: 1px solid var(--paper-edge); border-top: 0;
}
.mayor__portrait { display: grid; gap: 0.4rem; align-content: start; }
.mayor__frame {
  padding: 0.45rem; background: linear-gradient(135deg, #c9a25a, #8c6a2c);
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
.mayor__frame .photo { aspect-ratio: 4 / 5; }
.mayor__caption { font-size: var(--fs-sm); color: var(--ink-soft); text-align: center; }
.mayor__letter { display: grid; gap: 0.9rem; max-width: 36rem; }
.mayor__signature { margin-top: 0.4rem; }
.mayor__signature .sig {
  font-family: var(--font-hand); font-size: 2rem; line-height: 1; color: #1f3a72;
  transform: rotate(-3deg); transform-origin: left; display: inline-block;
}
.mayor__signature small { display: block; color: var(--ink-soft); font-size: var(--fs-sm); }
@media (max-width: 36rem) {
  .mayor__body { grid-template-columns: 1fr; }
  .mayor__portrait { max-width: 12rem; }
}

/* Newcomers: an open door, warm, with the house photo */
.newcomers { background: #fbf6ea; border: 1px solid var(--paper-edge); }
.newcomers__body { display: grid; grid-template-columns: 1fr 1.1fr; }
.newcomers__body .photo { min-height: 14rem; }
.newcomers__text { padding: 1.5rem; display: grid; gap: 0.9rem; align-content: start; }
@media (max-width: 36rem) { .newcomers__body { grid-template-columns: 1fr; } }

/* Festival: the yellow poster pinned to the board */
.festival-card {
  position: relative;
  background: #f5d24a; color: #2a2412;
  padding: 1.4rem 1.3rem 1.3rem;
  box-shadow: 0 6px 14px rgba(60, 45, 10, 0.25);
  transform: rotate(-1deg);
}
.festival-card::before { /* thumbtack */
  content: ""; position: absolute; top: 0.45rem; left: 50%; width: 0.9rem; height: 0.9rem;
  margin-left: -0.45rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f06a5a, #8e1f14);
  box-shadow: 0 2px 2px rgba(0,0,0,.35);
}
.festival-card h2 {
  font-family: var(--font-sign); font-weight: 400; font-size: var(--fs-md);
  letter-spacing: 0.08em; color: #6b4e0a;
}
.festival-card__title {
  font-family: var(--font-sign); font-weight: 400; font-size: var(--fs-2xl);
  line-height: 0.95; letter-spacing: 0.02em; margin: 0.2rem 0 0.4rem;
}
.festival-card__date { font-weight: 700; }
.festival-card__poster { margin: 0.9rem auto; aspect-ratio: 2 / 3; width: min(100%, 13rem); border: 3px solid #2a2412; box-shadow: 0 3px 8px rgba(40, 30, 5, 0.3); }
.festival-card p + p { margin-top: 0.6rem; }
.festival-card .btn { margin-top: 1rem; background: #2a2412; color: #f5d24a; width: 100%; }

.countdown { margin-top: 1rem; }
.countdown__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; padding: 0; list-style: none; }
.countdown__grid li {
  display: grid; justify-items: center; padding: 0.35rem 0.2rem;
  background: #2a2412; color: #f5d24a;
}
.countdown__num { font-family: var(--font-sign); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown__unit { font-size: 0.8rem; }
.countdown__next { font-size: var(--fs-sm); margin-top: 0.4rem; }

/* Public notices: typed list */
.notices ul { padding: 0; list-style: none; border: 1px solid var(--paper-edge); border-top: 0; background: #fbf6ea; }
.notices li { padding: 0.9rem 1.1rem; font-size: 0.97rem; }
.notices li + li { border-top: 1px dashed var(--paper-edge); }

/* ---------- Book display (présentoir) ---------- */
.presentoir {
  margin-top: 4rem;
  color: #efe6d2;
  /* The two lights sit behind the books and fade out well before the top edge */
  background:
    radial-gradient(ellipse 34% 42% at 27% 52%, rgba(255, 220, 160, 0.13), transparent 100%),
    radial-gradient(ellipse 36% 46% at 73% 52%, rgba(179, 18, 27, 0.32), transparent 100%),
    linear-gradient(#1a2124, #0e1312);
  padding-block: 3rem 0;
  overflow: hidden;
}
.presentoir__head { display: grid; gap: 0.8rem; max-width: 46rem; }
.presentoir__plate {
  justify-self: start;
  font-family: var(--font-sign); font-size: var(--fs-xl); letter-spacing: 0.06em; line-height: 1;
  color: #2a2010; padding: 0.5rem 1rem 0.35rem;
  background: linear-gradient(180deg, #e7c878, #b48a35 55%, #d8b460);
  border-radius: 2px; box-shadow: inset 0 0 0 2px rgba(80, 55, 10, 0.4), 0 3px 6px rgba(0,0,0,.4);
}
.presentoir__intro { color: #cfc6b2; }
.presentoir__byline { font-style: italic; color: #e9dcc0; }

.presentoir__shelf {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  margin-top: 2.5rem; position: relative;
}
@media (max-width: 46rem) { .presentoir__shelf { grid-template-columns: 1fr; } }

/* Flex column: format line + buy button are pushed to the bottom,
   so both buy buttons line up whatever the length of the texts above */
.edition { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding-bottom: 1.5rem; }
.edition__formats { margin-top: auto; }
.edition__name { font-family: var(--font-sign); font-weight: 400; font-size: var(--fs-xl); letter-spacing: 0.05em; line-height: 1; }
.edition__desc { max-width: 24rem; }
.edition__warnings { padding: 0; list-style: none; font-family: var(--font-doc); font-size: 0.95rem; color: #ffb3b3; display: grid; gap: 0.15rem; }
.edition__formats { font-size: var(--fs-sm); color: #b9b09c; }
.edition__buy { min-width: min(100%, 19rem); }
.edition--uncensored .edition__name { color: #ff5a5f; }
.edition--standard .edition__buy { background: var(--cream); color: var(--navy); }
.edition--standard .edition__buy:hover { background: #fff; }
.edition--uncensored .edition__buy { background: var(--blood); color: #fff; }
.edition--uncensored .edition__buy:hover { background: #d0161f; }

/* The plank the books stand on, at the height of their base */
.presentoir__shelf::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(50% - 50vw); width: 100vw; height: 0.9rem;
  top: calc(0.5rem + clamp(9.5rem, 22vw, 12rem) * 1.545 + 0.2rem);
  background: linear-gradient(#8a6440, #573b24);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.45);
}
.edition { position: relative; z-index: 1; }
@media (max-width: 46rem) { .presentoir__shelf::before { display: none; } }

/* The counter top the books stand on */
.counter-top {
  height: 1.6rem; margin-top: -0.2rem;
  background: linear-gradient(#7a5533, #4d3420);
  box-shadow: 0 -2px 0 #9b7148 inset, 0 10px 18px rgba(0,0,0,.5);
}
.counter-front {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 11rem),
    linear-gradient(#3d2918, #2a1c10);
  padding-block: 1.4rem 1.8rem;
}
.counter-front__inner { display: grid; gap: 0.7rem; justify-items: center; text-align: center; }
.presentoir__help { font-style: italic; color: #e9dcc0; max-width: 40rem; }
.presentoir__age { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: center; font-size: var(--fs-sm); }
.age-badge {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 3px solid #ff5a5f; color: #ff5a5f; font-family: var(--font-sign); font-size: 1.2rem; line-height: 1;
}
.presentoir__age a { color: #f1e6c8; }
.presentoir__en-note {
  font-family: var(--font-doc); font-size: var(--fs-sm); color: #2a2010;
  background: #e8d9a8; padding: 0.35rem 0.8rem;
}
.presentoir__en-note:empty { display: none; }

/* ---------- 3D book (placeholder until the real covers arrive) ---------- */
.book {
  --w: clamp(9.5rem, 22vw, 12rem);
  --h: calc(var(--w) * 1.545);   /* 5.5 x 8.5 in paperback */
  --t: calc(var(--w) * 0.14);
  width: var(--w); height: var(--h);
  perspective: 1100px; margin-top: 0.5rem;
}
.book__body {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(-26deg) rotateX(2deg);
  transition: transform 0.5s ease;
}
.book:hover .book__body, .edition:focus-within .book__body { transform: rotateY(-12deg) rotateX(1deg); }
.book__face { position: absolute; inset: 0; backface-visibility: hidden; }
.book__front {
  transform: translateZ(calc(var(--t) / 2));
  overflow: hidden; border-radius: 1px 3px 3px 1px;
  background-size: cover; background-position: center;
  box-shadow: inset 4px 0 6px rgba(0,0,0,.35);
}
.book__spine {
  width: var(--t); left: calc(var(--t) / -2);
  transform: rotateY(-90deg);
  display: grid; place-items: center;
}
.book__spine span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-sign); letter-spacing: 0.12em; font-size: calc(var(--w) * 0.1);
}
.book__pages {
  width: var(--t); left: auto; right: calc(var(--t) / -2);
  transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #f3ecd9 0 1px, #d6cbb0 1px 2px);
}
.book__back { transform: translateZ(calc(var(--t) / -2)) rotateY(180deg); }
.book__shadow {
  position: absolute; left: 8%; right: -18%; bottom: -1.1rem; height: 1.4rem;
  background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%);
  transform: translateZ(-1px);
}

/* Placeholder cover artwork, drawn in CSS */
.cover-art {
  position: absolute; inset: 0; display: grid; align-content: space-between;
  padding: 12% 10% 9%; text-align: center;
}
.cover-art__title { font-family: var(--font-sign); font-size: calc(var(--w) * 0.2); line-height: 0.9; letter-spacing: 0.03em; }
.cover-art__author { font-family: var(--font-sign); font-size: calc(var(--w) * 0.1); letter-spacing: 0.2em; }
.cover-art__tagline { font-style: italic; font-size: calc(var(--w) * 0.072); opacity: 0.9; }
.cover-art__neon {
  justify-self: center; font-family: var(--font-sign); font-size: calc(var(--w) * 0.085);
  letter-spacing: 0.1em; padding: 0.15em 0.5em; border-radius: 0.2em;
}
.book--standard .book__front {
  background-color: #141a2e;
  background-image:
    radial-gradient(ellipse at 50% 62%, rgba(255, 79, 160, 0.35), transparent 45%),
    linear-gradient(transparent 55%, rgba(185, 191, 189, 0.35) 68%, transparent 82%),
    linear-gradient(#0b1020, #1a2440 60%, #0b0f1a);
  color: #f4ecd8;
}
.book--standard .cover-art__neon { color: #ffd6ea; border: 2px solid var(--neon); text-shadow: 0 0 6px var(--neon); box-shadow: 0 0 10px var(--neon), inset 0 0 6px var(--neon); }
.book--standard .book__spine, .book--standard .book__back { background: #10162a; color: #f4ecd8; }

.book--uncensored .book__front {
  background-color: #000;
  background-image:
    radial-gradient(ellipse at 50% 62%, rgba(179, 18, 27, 0.7), transparent 50%),
    linear-gradient(transparent 55%, rgba(179, 18, 27, 0.3) 68%, transparent 82%),
    linear-gradient(#000, #2a0406 60%, #000);
  color: #f2d7d7;
}
.book--uncensored .cover-art__neon { color: #ffdada; border: 2px solid #ff2a33; text-shadow: 0 0 6px #ff2a33; box-shadow: 0 0 10px #ff2a33, inset 0 0 6px #ff2a33; }
.book--uncensored .book__spine, .book--uncensored .book__back { background: #1a0203; color: #ff5a5f; }
.cover-art__band {
  position: absolute; left: -12%; right: -12%; top: 40%;
  transform: rotate(-8deg);
  background: var(--blood); color: #fff; text-align: center;
  font-family: var(--font-sign); letter-spacing: 0.12em; font-size: calc(var(--w) * 0.085);
  padding: 0.25em 0; box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
/* When the real cover image exists, JS adds .has-cover: hide the drawn art */
.book.has-cover .cover-art { display: none; }

/* ---------- Official paper (used by the age gate and archives) ---------- */
.paper-doc {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(ellipse at 90% 95%, rgba(120, 90, 30, 0.22), transparent 45%),
    #eadcb4;
  color: #2a2418;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 18px 40px rgba(0,0,0,.45);
  font-family: var(--font-doc);
}

/* ---------- Age gate ---------- */
.age-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: none; place-items: center; overflow-y: auto;
  padding: 1rem;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(185, 191, 189, 0.22), transparent 60%),
    #111614;
}
html.gate-open .age-gate { display: grid; }
.age-gate__doc {
  width: min(100%, 40rem);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  display: grid; gap: 1rem;
}
.age-gate__letterhead {
  display: flex; align-items: center; gap: 0.9rem;
  padding-bottom: 0.8rem; border-bottom: 2px solid #2a2418;
}
.age-gate__letterhead .seal { width: 3.4rem; height: 3.4rem; }
.age-gate__office { font-weight: 700; line-height: 1.3; }
.age-gate__number { font-size: 0.9rem; }
.age-gate__title {
  font-family: var(--font-sign); font-weight: 400; font-size: var(--fs-2xl);
  line-height: 1; letter-spacing: 0.03em; color: #7d1410;
}
.age-gate__doc p { font-size: 1rem; line-height: 1.6; }
.age-gate__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }
.age-gate__actions .btn { font-family: var(--font-body); }
.age-gate__enter { background: #7d1410; }
.age-gate__enter:hover { background: #9a1a14; }
.age-gate__exit { background: transparent; color: #2a2418; border-color: #2a2418; box-shadow: none; }
.age-gate__remember { font-size: 0.85rem !important; color: #5a4d33; }
.stamp {
  position: absolute; right: 1.4rem; bottom: 3.2rem;
  border: 3px double rgba(125, 20, 16, 0.75); color: rgba(125, 20, 16, 0.75);
  padding: 0.3rem 0.6rem; transform: rotate(9deg);
  font-weight: 700; text-align: center; line-height: 1.2; font-size: 0.8rem;
  pointer-events: none; mix-blend-mode: multiply;
}
@media (max-width: 34rem) { .stamp { position: static; justify-self: end; margin-top: -0.4rem; } }
.age-gate__title:focus { outline: none; }

/* ==========================================================================
   Inner pages: page header band
   ========================================================================== */
.page-head { background: var(--navy); color: var(--cream); border-bottom: 3px solid var(--gold); }
.page-head__inner { padding-block: 2.2rem 1.8rem; display: grid; gap: 0.6rem; }
.page-head h1 {
  font-family: var(--font-sign); font-weight: 400; font-size: var(--fs-3xl);
  line-height: 0.95; letter-spacing: 0.02em;
}
.page-head__lead { max-width: 42rem; font-size: var(--fs-md); color: #d9d3c2; }

.section { margin-top: 3.5rem; }
.section__title {
  font-family: var(--font-sign); font-weight: 400; font-size: var(--fs-2xl);
  line-height: 1; letter-spacing: 0.03em; color: var(--navy);
  padding-bottom: 0.4rem; border-bottom: 3px double var(--navy); margin-bottom: 1.4rem;
}

/* ==========================================================================
   Book page
   ========================================================================== */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 2rem var(--gap); align-items: start; }
.story__hook {
  font-family: var(--font-sign); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 0.95;
  color: var(--pine);
}
.story__text { display: grid; gap: 0.8rem; max-width: 40rem; font-size: 1.1rem; }
.story__by { font-style: italic; color: var(--ink-soft); }
@media (max-width: 46rem) { .story { grid-template-columns: 1fr; } }

.presentoir--page { margin-top: 3.5rem; }

/* Excerpts laid out as pages torn from the book */
.excerpts { display: grid; gap: 2rem; justify-items: center; }
.excerpts__note { font-style: italic; color: var(--ink-soft); justify-self: start; }
.excerpts__note:empty { display: none; }
.excerpt {
  width: min(100%, 38rem);
  background: #fdfaf2;
  padding: 2rem clamp(1.2rem, 5vw, 3rem) 2.2rem;
  box-shadow: 0 1px 0 #e6dcc4, 0 2px 0 #fdfaf2, 0 3px 0 #e6dcc4, 0 12px 24px rgba(60, 45, 20, 0.16);
  border-left: 1px solid #efe6d0;
}
.excerpt__ref {
  font-size: var(--fs-sm); color: var(--ink-soft); text-align: center;
  font-variant: small-caps; letter-spacing: 0.06em;
  padding-bottom: 0.8rem; margin-bottom: 1rem; border-bottom: 1px solid #e6dcc4;
}
.excerpt__text, .excerpt__text p {
  text-align: justify; hyphens: auto; line-height: 1.75; font-size: 1.06rem;
}
.excerpt__text p + p { text-indent: 1.5em; }
.excerpt:nth-child(3) { transform: rotate(0.4deg); }
.excerpt:nth-child(4) { transform: rotate(-0.5deg); }

/* Which edition */
.choose { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.choose__card { padding: 1.4rem 1.5rem 1.6rem; background: #fbf6ea; border: 1px solid var(--paper-edge); display: grid; gap: 0.8rem; align-content: start; }
.choose__card h3 { font-family: var(--font-sign); font-weight: 400; font-size: var(--fs-xl); letter-spacing: 0.04em; line-height: 1; }
.choose__card--standard { border-top: 6px solid var(--navy); }
.choose__card--uncensored { border-top: 6px solid var(--blood); background: #f7ece8; }
.choose__card--uncensored h3 { color: var(--blood); }
.choose__card .btn { justify-self: start; }
.choose__card--uncensored .btn { background: var(--blood); }
.choose__card--uncensored .btn:hover { background: #d0161f; }
.choose__help { margin-top: 1.2rem; font-style: italic; color: var(--ink-soft); }
@media (max-width: 46rem) { .choose { grid-template-columns: 1fr; } }

/* Content warning, as an official notice */
.warning-doc {
  padding: 1.6rem clamp(1.2rem, 4vw, 2.4rem);
  border: 2px solid #7d1410; outline: 1px solid #7d1410; outline-offset: 4px;
  display: grid; gap: 0.9rem; max-width: 46rem;
}
.warning-doc p { line-height: 1.6; }
.warning-doc__note { font-family: var(--font-body); font-style: italic; }
.warning-doc .age-badge { border-color: #7d1410; color: #7d1410; }
.warning-doc__head { display: flex; align-items: center; gap: 0.8rem; }
.warning-doc__head h2 { font-family: var(--font-sign); font-weight: 400; font-size: var(--fs-xl); color: #7d1410; letter-spacing: 0.03em; line-height: 1; }
#avertissement { scroll-margin-top: 1.5rem; }

.presentoir__more { color: #f5d24a; font-weight: 600; }

html.is-night .page-head { background: #10161a; }
html.is-night .section__title { color: #cfd6cf; border-color: #4a5a54; }
html.is-night .excerpt { background: #242b28; color: #d6d2c6; box-shadow: 0 12px 24px rgba(0,0,0,.4); border-color: #34403c; }
html.is-night .choose__card { background: #1f2624; border-color: #34403c; }
.story__tagline { font-size: var(--fs-lg); font-style: italic; color: var(--pine); line-height: 1.35; }

/* ==========================================================================
   Mobile refinements
   ========================================================================== */

/* Age gate on phones: compact notice, buttons always within reach */
@media (max-width: 34rem) {
  .age-gate { padding: 0; place-items: stretch; }
  .age-gate__doc { width: 100%; min-height: 100%; padding: 1.2rem 1.1rem 0; gap: 0.75rem; box-shadow: none; }
  .age-gate__letterhead { gap: 0.6rem; padding-bottom: 0.6rem; }
  .age-gate__letterhead .seal { width: 2.4rem; height: 2.4rem; }
  .age-gate__office { font-size: 0.85rem; }
  .age-gate__number { font-size: 0.8rem; }
  .age-gate .stamp { display: none; }
  .age-gate__title { font-size: 1.9rem; }
  .age-gate__doc p { font-size: 0.9rem; line-height: 1.5; }
  .age-gate__actions {
    position: sticky; bottom: 0; z-index: 2;
    margin: 0 -1.1rem; padding: 0.8rem 1.1rem calc(0.8rem + env(safe-area-inset-bottom));
    background: #e6d7ad; border-top: 1px solid #c9b684;
    display: grid; grid-template-columns: 1fr auto; gap: 0.6rem;
  }
}

/* Touch screens: every control at least 44 px tall */
@media (pointer: coarse) {
  .lang-switch a, .sound-toggle { min-height: 2.75rem; min-width: 2.75rem; }
  .site-footer ul { gap: 0; }
  .site-footer li a { display: inline-block; padding-block: 0.55rem; }
  .presentoir__age a { display: inline-block; padding-block: 0.6rem; }
}

/* Small phones */
@media (max-width: 36rem) {
  .utility__inner { gap: 0.2rem 0.8rem; }
  .seal { width: 3.4rem; height: 3.4rem; }
  .mayor__body, .newcomers__text, .notices li { padding: 1.1rem 1rem; }
  .mayor__body { gap: 1.1rem; }
  .mayor__portrait { max-width: 10rem; justify-self: center; }
  .newcomers__body .photo { order: -1; min-height: 12rem; }
  .festival-card { transform: none; padding: 1.3rem 1rem 1.1rem; }
  .festival-card__title { font-size: var(--fs-xl); }
  .festival-card__poster { width: min(100%, 11rem); }
  .countdown__unit { font-size: 0.8rem; }
  .countdown__num { font-size: 1.75rem; }
  .page-head__inner { padding-block: 1.5rem 1.3rem; }
  .page-head__lead { font-size: var(--fs-base); }
  .excerpt { padding: 1.4rem 1.1rem 1.5rem; }
  .excerpt__text, .excerpt__text p { text-align: left; }
  .choose__card .btn, .edition__buy { width: 100%; }
  .warning-doc { outline-offset: 2px; }
}

/* Single column: the festival comes right after the mayor's letter */
@media (max-width: 52rem) {
  .home-grid { gap: 2rem; }
  .home-grid__main, .home-grid__side { display: contents; }
  .mayor { order: 1; }
  .festival-card { order: 2; }
  .newcomers { order: 3; }
  .notices { order: 4; }
}

/* Format line on the light "Which edition" cards of the book page (not the dark display) */
.choose__card .edition__formats { color: var(--ink-soft); }

/* The books themselves are links to Amazon (mouse and touch shortcut;
   keyboard and screen reader users get the buy button right below) */
.book-link { display: block; cursor: pointer; border-radius: 3px; -webkit-tap-highlight-color: transparent; }
.book-link:hover .book__shadow { opacity: 0.8; }