/* The Book Garden — quaint & clean */

:root {
  --paper:      #fbf8f1;
  --paper-warm: #f3ecdd;
  --ink:        #26332b;
  --ink-soft:   #56645a;
  --leaf:       #3f6149;      /* ivy in the logo border   */
  --leaf-deep:  #223528;      /* the dark green sign      */
  --berry:      #a8382c;      /* dragon / illuminated "B" */
  --gold:       #d8bd77;      /* the lettering            */
  --line:       #dcd2bf;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;

  --measure: 62ch;
  --wrap: 62rem;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(74,107,82,.055) 1px, transparent 0);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---------- header ---------- */

.site-header {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.75rem 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
  text-decoration: none;
}
.wordmark-leaf { color: var(--berry); font-size: 1.05rem; }
.wordmark:hover { color: var(--leaf-deep); }

.site-nav {
  display: flex;
  gap: 1.75rem;
  font-size: .95rem;
  letter-spacing: .02em;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--leaf-deep); border-bottom-color: var(--leaf); }

/* ---------- shared layout ---------- */

main { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }

section { padding: 4.5rem 0; }

section h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  text-align: center;
  margin-bottom: 2.5rem;
}

.lede {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 1.125rem;
}
.lede-center { margin-inline: auto; text-align: center; margin-top: -1.5rem; margin-bottom: 2.5rem; }

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

.hero { padding: 3rem 0 4rem; text-align: center; }

.hero-logo {
  margin: 0 auto 1.75rem;
  max-width: 40rem;
}
.hero-logo img {
  display: block;
  width: 100%;
  height: auto;
  /* the artwork ships on a white field — multiply drops it onto the paper */
  mix-blend-mode: multiply;
}

.eyebrow {
  margin: 0 0 1.75rem;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--leaf);
}

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 4rem);
  margin-bottom: 1.5rem;
}

.hero .lede { margin-inline: auto; }

.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.button {
  display: inline-block;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  background: var(--leaf-deep);
  border: 1px solid var(--leaf-deep);
  box-shadow: inset 0 0 0 1px rgba(216,189,119,.35);
  color: var(--gold);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.button:hover { background: var(--berry); border-color: var(--berry); color: #fdf6e6; }

.button-quiet {
  background: transparent;
  box-shadow: none;
  color: var(--leaf-deep);
  border-color: var(--line);
}
.button-quiet:hover { background: transparent; color: var(--berry); border-color: var(--berry); }

/* ---------- divider ---------- */

.rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--leaf);
  opacity: .55;
}
.rule::before, .rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.rule span { font-size: .8rem; }
.rule::before, .rule::after { background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* ---------- shop ---------- */

.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  /* Grid sizes each row independently, so the row holding Pikachu's tile came
     out taller than the other. 1fr makes every row match the tallest. */
  grid-auto-rows: 1fr;
}

.card {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.75rem 1.6rem;
  /* A floor, not a fixed height: the copy in these tiles varies a lot, and
     three of them host artwork that needs the vertical room regardless. */
  min-height: 17rem;
}
.card h3 {
  font-size: 1.25rem;
  margin-bottom: .6rem;
  color: var(--leaf-deep);
}
.card p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

.note {
  max-width: var(--measure);
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: .975rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- events ---------- */

.events-placeholder {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--paper-warm);
}
.events-placeholder p { margin: 0 0 1.25rem; color: var(--ink-soft); }
.events-placeholder p:last-child { margin-bottom: 0; }

.fb-page { display: flex; justify-content: center; }

/* ---------- visit ---------- */

.visit-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  text-align: center;
}

.visit-block h3 {
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--leaf);
  margin-bottom: .9rem;
}
.visit-block p { margin: 0 0 .5rem; }

.hours { margin: 0; }
.hours > div {
  display: flex;
  justify-content: center;
  gap: .5rem;
}
.hours dt { color: var(--ink-soft); }
.hours dt::after { content: ":"; }
.hours dd { margin: 0; }

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

.site-footer {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  padding: 2.5rem 1.5rem 3.5rem;
  text-align: center;
}
.footer-mark {
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 0 0 .4rem;
}
.footer-mark span { color: var(--leaf); }
.footer-fine {
  margin: 0;
  font-size: .875rem;
  color: var(--ink-soft);
}

/* ---------- small screens ---------- */

@media (max-width: 34rem) {
  .site-header { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .site-nav { gap: 1.25rem; }
  section { padding: 3.25rem 0; }
  .hero { padding-top: 1.5rem; }
  .hero-logo { margin-bottom: 1.25rem; }
}

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

/* ---------- interior pages ---------- */

.page section { padding: 3.5rem 0; }

.page-head { padding-top: 3.5rem; text-align: center; }
.page-head h1 {
  font-size: clamp(2.1rem, 5.5vw, 3rem);
  margin-bottom: 1.25rem;
}
.page-head .lede-center { margin-top: 0; margin-bottom: 0; }

.portrait { margin: 1rem 0 0; }
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.portrait figcaption {
  margin-top: .7rem;
  text-align: center;
  font-size: .875rem;
  color: var(--ink-soft);
  font-style: italic;
}

.prose { max-width: var(--measure); margin-inline: auto; }
.prose h2 {
  text-align: left;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}
.prose p { margin: 0 0 1.2rem; }
.prose p:last-child { margin-bottom: 0; }

.prose blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.5rem;
  border-left: 2px solid var(--leaf);
}
.prose blockquote p {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--leaf-deep);
  margin-bottom: .6rem;
}
.prose blockquote cite {
  font-style: normal;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.page-cta { text-align: center; }
.page-cta .lede-center { margin-bottom: 1.75rem; }

.site-nav a[aria-current="page"] {
  color: var(--leaf-deep);
  border-bottom-color: var(--leaf);
}

/* ---------- facebook events embed ---------- */

.fb-events {
  max-width: 46rem;
  margin: 0 auto;
  min-height: 12rem;
}
.fb-events iframe { display: block; max-width: 100%; border: 0; }

/* ---------- peeking over the Pokemon tile ---------- */

/*
  peekachu.png is 320 wide, and the ledge he grips sits a little under 29px
  from the bottom of the artwork. Expressing that as a ratio of the image
  width (29/320) keeps the ledge on the tile's bottom edge at any size, so
  --peek-w stays the only number worth touching.

  Deliberately static: no transition, no hover state. A transform here reacts
  to the pointer drifting across the tile mid-scroll, which reads as a wiggle.
*/
.card-peek {
  position: relative;
  padding-bottom: 7.5rem;
}

.card-peek .peek {
  --peek-w: 140px;
  --peek-below-ratio: 0.089;   /* portion of the image below the ledge line */
  --peek-opacity: 0.32;

  position: absolute;
  right: 0.5rem;
  bottom: calc(-1 * var(--peek-w) * var(--peek-below-ratio));
  width: var(--peek-w);
  height: auto;
  opacity: var(--peek-opacity);
  z-index: 2;
  pointer-events: none;
}


/* ---------- hanging inside the comics tile ---------- */

/*
  spidey-long.png is spidey.png with 440px of extra web spliced into the strand
  by make-spidey.py, so he hangs lower down the tile. That script also fades the
  strand to 45% alpha (ramping back to full at his hands) so the web does not
  compete with the copy it passes behind — a CSS opacity here could not do that,
  since it applies to the whole image at once. The web still runs to the
  very top of the artwork, so top: 0 puts it on the tile's border with no offset
  to tune. overflow: hidden keeps him inside the tile and its rounded corners.

  Width and drop are linked: the taller image means a smaller --spidey-w now
  fills the same vertical space. Re-run `./make-spidey.py <px>` to change how
  far he hangs.
*/
.card-spidey {
  position: relative;
  overflow: hidden;
}

.card-spidey .spidey {
  --spidey-w: 150px;
  --spidey-opacity: 0.43;   /* 33% up from 0.32 */

  position: absolute;
  top: 0;
  left: 1rem;
  width: var(--spidey-w);
  height: auto;
  opacity: var(--spidey-opacity);
  z-index: 0;
  pointer-events: none;
}

/* Lift the copy above him — without this the absolutely positioned image
   paints over the tile's in-flow text. */
.card-spidey h3,
.card-spidey p {
  position: relative;
  z-index: 1;
}


/* ---------- lotus in the Magic tile ---------- */

/*
  lotus.png is lotus.jpg with its grey backdrop keyed out by make-lotus.py.
  Sits in the bottom-right corner, behind the copy like the spider does, so
  the tile's text stays first in the reading order.
*/
.card-lotus {
  position: relative;
}

.card-lotus .lotus {
  --lotus-w: 105px;
  --lotus-opacity: 0.5;

  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: var(--lotus-w);
  height: auto;
  opacity: var(--lotus-opacity);
  z-index: 0;
  pointer-events: none;
}

.card-lotus h3,
.card-lotus p {
  position: relative;
  z-index: 1;
}


/* ---------- the little prince in the Books tile ---------- */

/*
  prince.png is littleprince.png with its purple backdrop keyed out to real
  transparency by make-prince.py, so it needs no blend mode.
*/
.card-prince {
  position: relative;
}

.card-prince .prince {
  --prince-w: 108px;

  position: absolute;
  /* 12px minus the 5px nudge left; the PNG is cropped flush to him, so bottom:0
     seats him exactly on the tile's edge with no baked-in margin. */
  left: 7px;
  bottom: 0;
  width: var(--prince-w);
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.card-prince h3,
.card-prince p {
  position: relative;
  z-index: 1;
}

/* ---------- the tiles on a phone ---------- */

/*
  Single column makes each tile WIDER than it is on desktop (a full 342px on a
  390px phone, against ~301px in the three-up grid) while the copy stays short,
  so tiles end up wide and shallow. Art sized for the desktop tile then fills
  almost the whole height of one. Everything here is pulled back together:
  a shallower floor, and noticeably smaller characters.
*/
@media (max-width: 34rem) {
  /* 14rem guarantees the taller spider clears the crop even when a tile's
     copy wraps short; in practice Pikachu's tile already sets the row height. */
  .card {
    min-height: 14rem;
  }

  .card-peek { padding-bottom: 6rem; }
  .card-prince .prince { --prince-w: 88px; }
  .card-peek .peek     { --peek-w: 96px; }
  .card-spidey .spidey { --spidey-w: 110px; }
  .card-lotus .lotus   { --lotus-w: 68px; }
}