/* ==================================================================
   Raeha Bashyam — author site
   Design tokens follow the handoff spec. No border-radius anywhere.
   ================================================================== */

:root {
  /* --- Dark ("ink") --- */
  --ink:          #0d1418;  /* page / dark section background */
  --ink-card:     #0f191e;  /* card background on dark */
  --ink-panel:    #0c1216;  /* deep panel (cover backing) */
  --ink-hover:    #1c2b30;  /* subscribe button hover */
  --frame:        #25313a;  /* photo frame fill */

  /* --- Text on dark --- */
  --display-dark: #eee7d6;  /* display text on dark */
  --bright-dark:  #e6dfd0;  /* bright text on dark */
  --body-dark:    #b9c2c0;  /* body text on dark */
  --second-dark:  #a7b2b2;  /* secondary text on dark */
  --muted-dark:   #8a9a9e;  /* muted text / links on dark */
  --faint-dark:   #5f6f72;  /* faint text on dark */

  /* --- Brass --- */
  --brass:        #c9b98a;
  --brass-bright: #e0cf9e;
  --brass-hair:   rgba(201, 185, 138, .16);
  --brass-border: rgba(201, 185, 138, .2);
  --brass-line:   rgba(201, 185, 138, .4);
  --brass-shadow: rgba(201, 185, 138, .12);

  /* --- Light ("bone") --- */
  --bone:         #ece7db;  /* light section background */
  --text-light:   #26333a;  /* dark text on light */
  --body-light:   #37464b;  /* body text on light */
  --muted-light:  #7d8a8d;  /* muted text on light */
  --brass-light:  #8a6f3c;  /* brass-on-light kicker */
  --rule-light:   rgba(38, 51, 58, .2);
  --border-light: rgba(38, 51, 58, .45);

  /* --- Text on brass band --- */
  --on-brass:        #1a1712;
  --on-brass-body:   #4a4030;
  --on-brass-faint:  #6d5f45;

  /* --- Type --- */
  --display: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --body:    'EB Garamond', Garamond, 'Times New Roman', serif;
  --fell:    'IM Fell English', Garamond, serif;

  /* --- Layout --- */
  --wide:    1100px;  /* nav / footer */
  --content: 960px;   /* content grids */
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bright-dark);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

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

/* Must outrank the display rules below (e.g. .newsletter__form is
   display:flex, which would otherwise defeat the hidden attribute). */
[hidden] { display: none !important; }

::selection { background: var(--brass); color: var(--ink); }

/* Visible focus ring — the design specifies none, but keyboard users
   need one. Brass so it reads as part of the palette. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 20px;
  background: var(--brass);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.band--ink { background: var(--ink); color: var(--bright-dark); }

/* Shared type ------------------------------------------------------ */

.kicker {
  margin: 0 0 22px;
  font-size: 11.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.kicker--brass { color: var(--brass); }
.kicker--light { color: var(--brass-light); }
.kicker--hero {
  margin: 0 0 26px;
  font-size: 12px;
  letter-spacing: .36em;
  color: var(--brass);
}

.h2 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 38px;
  color: var(--display-dark);
}

/* ------------------------------------------------------------------
   1. Nav
   ------------------------------------------------------------------ */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 30px 40px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brass);
  text-decoration: none;
}

/* The inner wrapper carries the layout; the outer is the animation
   container the mobile menu collapses (see the 760px breakpoint). */
.nav__links-inner { display: flex; gap: 34px; }

.nav__links a {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-dark);
  text-decoration: none;
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--brass); }

/* Hidden until the mobile breakpoint. */
.nav__toggle {
  display: none;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--brass-border);
  color: var(--brass);
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Hairline, inset to the same 1100px container as the nav. */
.nav__rule-wrap { max-width: var(--wide); margin: 0 auto; padding: 0 40px; }
.nav__rule { height: 1px; background: var(--brass-hair); }

/* ------------------------------------------------------------------
   2. Hero
   ------------------------------------------------------------------ */

.hero { padding: 104px 40px; text-align: center; }

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(52px, 7.5vw, 88px);
  line-height: 1.04;
  color: var(--display-dark);
}
.hero__title em {
  font-weight: 500;
  color: var(--brass);
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 40px 0;
}
.ornament__line { width: 72px; height: 1px; background: var(--brass-line); }
.ornament__lozenge {
  width: 6px; height: 6px;
  background: var(--brass);
  transform: rotate(45deg);
}

.hero__logline {
  margin: 0 auto;
  max-width: 520px;
  font-style: italic;
  font-size: 19px;
  line-height: 1.65;
  color: var(--second-dark);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin-top: 44px;
}

.btn-outline {
  display: inline-block;
  padding: 15px 40px;
  border: 1px solid var(--brass);
  color: var(--brass);
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.btn-outline:hover { background: var(--brass); color: var(--ink); }

.hero__cta-note { font-size: 13px; color: var(--faint-dark); }

/* ------------------------------------------------------------------
   3. Hero art band
   ------------------------------------------------------------------ */

/* The band is a fixed 440px window; the image inside is deliberately
   taller and drifts vertically as the band crosses the viewport, so the
   sea sits on a different plane from the page. JS sets --shift. */
.art-band {
  position: relative;
  margin: 0;
  width: 100%;
  height: 440px;
  overflow: hidden;
}
.art-band img {
  --shift: 0px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + (2 * var(--parallax-range, 60px)));
  margin-top: calc(var(--parallax-range, 60px) * -1);
  object-fit: cover;
  transform: translate3d(0, var(--shift), 0);
  will-change: transform;
}

.art-band__credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  padding: 5px 8px;
  background: rgba(13, 20, 24, .72);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: rgba(238, 231, 214, .88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------------------
   4. The Book (light)
   ------------------------------------------------------------------ */

.book {
  background: var(--bone);
  color: var(--text-light);
  padding: 96px 40px;
}

.book__inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}

/* The cover sits in a 3D scene: hovering tilts it (JS sets the
   rotation), revealing a page block, spine, and back board so it
   reads as a physical hardback rather than a flat card.
   The perspective wrapper hugs the cover exactly so the vanishing
   point is the cover's own center — with it higher up (e.g. on the
   whole column), the bottom page face is viewed edge-on and culls,
   leaving a dark gap at the bottom corners when tilted. */
.cover-scene { perspective: 1100px; }

.cover {
  --book-depth: 52px; /* a hardback's thickness at this cover width */
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--ink-panel);
  border: 1px solid var(--border-light);
  padding: 12px;
  box-shadow: 0 18px 40px -18px rgba(16, 20, 24, .45);
  transform-style: preserve-3d;
  transition: transform .6s ease, box-shadow .6s ease;
}
/* Scroll-driven: JS writes the transform every frame, so CSS must not
   also try to ease it — that would fight the scroll and lag behind. */
.cover--scrolling {
  transition: box-shadow .5s ease;
  box-shadow: 0 30px 60px -22px rgba(16, 20, 24, .55);
  will-change: transform;
}
.cover__art { width: 100%; height: 100%; object-fit: cover; }

/* Back board. */
.cover::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--ink-panel);
  transform: translateZ(calc(var(--book-depth) * -1));
}

/* Side faces — pages are inset a touch so the boards overhang them,
   the way a hardback's cover does. */
.cover__side {
  position: absolute;
  backface-visibility: hidden;
}
.cover__side--pages-right,
.cover__side--pages-bottom,
.cover__side--pages-top {
  background: repeating-linear-gradient(
      var(--page-grain, 90deg),
      #e3dac4 0, #e3dac4 2px,
      #cfc4a8 2px, #cfc4a8 3px);
}
.cover__side--pages-right {
  top: 0;
  left: 100%;
  width: var(--book-depth);
  height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
}
.cover__side--pages-bottom,
.cover__side--pages-top {
  --page-grain: 0deg;
  left: 0;
  width: 100%;
  height: var(--book-depth);
}
.cover__side--pages-bottom {
  top: 100%;
  transform-origin: center top;
  transform: rotateX(-90deg);
}
.cover__side--pages-top {
  bottom: 100%;
  transform-origin: center bottom;
  transform: rotateX(90deg);
}
/* Spine — convex, like a casebound round. Built from three facets:
   two angled strips at the hinges and a raised middle, so the spine
   bulges outward past the boards instead of sitting flat. The facet
   sizes are fractions of --book-depth, so the whole spine scales if
   the depth changes; the 21° hinge angle matches those fractions
   (bulge ≈ sin 21° × 0.27 × depth). */
.cover__side--spine {
  top: -1px;
  right: 100%;
  width: var(--book-depth);
  height: calc(100% + 2px);
  transform-origin: right center;
  transform: rotateY(-90deg);
  transform-style: preserve-3d;
}
/* Inside the rotated spine plane, local left = the book's back,
   local right = the front hinge. */
.cover__spine-facet {
  position: absolute;
  top: 0;
  height: 100%;
  backface-visibility: hidden;
}
.cover__spine-facet--front {
  right: 0;
  width: calc(var(--book-depth) * .27);
  transform-origin: right center;
  transform: rotateY(21deg);
  background: linear-gradient(to left, #0a0f13, #182430);
}
.cover__spine-facet--mid {
  left: calc(var(--book-depth) * .25);
  width: calc(var(--book-depth) * .5);
  transform: translateZ(calc(var(--book-depth) * .097));
  background: linear-gradient(90deg, #182430, #1e2b37 50%, #182430);
}
.cover__spine-facet--back {
  left: 0;
  width: calc(var(--book-depth) * .27);
  transform-origin: left center;
  transform: rotateY(-21deg);
  background: linear-gradient(to right, #0a0f13, #182430);
}

.cover__overlay {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(238, 231, 214, .45);
  background: linear-gradient(180deg,
      rgba(12, 18, 22, .55),
      rgba(12, 18, 22, .1) 42%,
      rgba(12, 18, 22, .16) 58%,
      rgba(12, 18, 22, .75));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 28px 18px;
  text-align: center;
}
.cover__label {
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #d8d2c4;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.cover__title {
  font-family: var(--display);
  font-size: 31px;
  line-height: 1.2;
  color: #f3ecd9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
.cover__byline {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass-bright);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.cover__note {
  margin: 12px 0 0;
  text-align: center;
  font-style: italic;
  font-size: 13px;
  color: var(--muted-light);
}

.book__para {
  margin: 0 0 20px;
  font-size: 17.5px;
  line-height: 1.8;
  color: var(--body-light);
}
.book__para--last { margin-bottom: 30px; }

.book__para--dropcap::first-letter {
  float: left;
  font-family: var(--fell);
  font-size: 58px;
  line-height: .82;
  padding: 6px 10px 0 0;
  color: var(--text-light);
}

.specs { margin: 0; }
.specs__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--rule-light);
}
.specs__row--last { border-bottom: 1px solid var(--rule-light); }
.specs dt {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.specs dd {
  margin: 0;
  font-size: 15.5px;
  color: var(--text-light);
  text-align: right;
}

/* ------------------------------------------------------------------
   5. About
   ------------------------------------------------------------------ */

/* Portrait sits right, opposite the book cover, so the two images don't
   stack down the same edge. Copy leads in the DOM, which also reads
   better linearly. */
.about {
  max-width: var(--content);
  margin: 0 auto;
  padding: 96px 40px 84px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 64px;
  align-items: start;
}

.portrait {
  width: 280px;
  height: 356px;
  background: var(--frame);
  padding: 9px;
  /* Mirrored from the spec's 16px 16px: the offset points inward,
     toward the copy, rather than off the page edge. */
  box-shadow: -16px 16px 0 var(--brass-shadow);
}
.portrait__crop { width: 100%; height: 100%; overflow: hidden; }
.portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--portrait-zoom, 1));
  transform-origin: center;
  will-change: transform;
}

.about__bio {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--body-dark);
}
.about__bio--last { margin-bottom: 0; }
.about__contact {
  margin: 22px 0 0;
  color: var(--muted-dark);
  font-size: 15px;
}
.about__contact a { color: var(--brass); }

/* ------------------------------------------------------------------
   6. Shops
   ------------------------------------------------------------------ */

.shops {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 40px 96px;
}

.shops__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.shop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px;
  border: 1px solid var(--brass-border);
  background: var(--ink-card);
  text-decoration: none;
  transition: border-color .25s ease;
}
.shop-card:hover { border-color: var(--brass); }

.shop-card__name {
  font-family: var(--display);
  font-size: 25px;
  color: var(--bright-dark);
}
.shop-card__blurb {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted-dark);
}
.shop-card__visit {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ------------------------------------------------------------------
   7. Newsletter (brass band)
   ------------------------------------------------------------------ */

/* Laid paper stock, softened so the writing remains the focal point. */
.newsletter {
  background-color: #eee6cd;
  color: var(--on-brass);
  padding: 84px 40px;
  position: relative;
  isolation: isolate;
  text-align: center;
}
.newsletter::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("assets/paper-texture.jpg") center / cover;
  mix-blend-mode: multiply;
  opacity: .25;
  pointer-events: none;
}
.newsletter > * { position: relative; z-index: 1; }

.newsletter__title { margin: 0 0 14px; color: var(--on-brass); }

.newsletter__sub {
  margin: 0 auto 34px;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--on-brass-body);
}

.newsletter__form {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.newsletter__input {
  width: 280px;
  padding: 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--on-brass);
  font-family: var(--body);
  font-size: 16px;
  color: var(--on-brass);
  outline: none;
}
.newsletter__input::placeholder { color: var(--on-brass-faint); opacity: 1; }
.newsletter__input:focus-visible {
  outline: 2px solid var(--on-brass);
  outline-offset: 3px;
}

.newsletter__btn {
  padding: 14px 30px;
  background: var(--ink);
  color: var(--brass);
  border: none;
  font-family: var(--body);
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease;
}
.newsletter__btn:hover { background: var(--ink-hover); }
.newsletter__btn[disabled] { opacity: .6; cursor: default; }
.newsletter__btn:focus-visible {
  outline: 2px solid var(--on-brass);
  outline-offset: 3px;
}

.newsletter__error {
  margin: 14px 0 0;
  font-size: 14px;
  font-style: italic;
  color: #6b2318;
}

.newsletter__thanks {
  margin: 0;
  font-style: italic;
  font-size: 17px;
  color: var(--on-brass);
}

.newsletter__footnote {
  margin: 20px 0 0;
  font-size: 12.5px;
  color: var(--on-brass-faint);
}

/* ------------------------------------------------------------------
   8. Footer
   ------------------------------------------------------------------ */

.footer {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 34px 40px;
  font-size: 13px;
  color: var(--faint-dark);
}

.footer__links { display: flex; gap: 26px; }
.footer__links a {
  color: var(--muted-dark);
  text-decoration: none;
  transition: color .2s ease;
}
.footer__links a:hover { color: var(--brass); }

/* ------------------------------------------------------------------
   Responsive — desktop-first at ~1100px, per the spec
   ------------------------------------------------------------------ */

/* Tighten the nav before it wraps. */
@media (max-width: 860px) {
  .nav__links-inner { gap: 22px; }
}

@media (max-width: 760px) {
  /* Nav collapses behind a Menu button. */
  .nav { padding: 22px 24px; position: relative; flex-wrap: wrap; }
  .nav__toggle { display: block; }

  /* Stays display:flex so it can animate — `display:none` can't
     transition. Collapsed via grid-template-rows (animatable to
     content height, unlike max-height guesswork); visibility keeps
     the links out of the tab order while shut. */
  .nav__links {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    gap: 0;
    padding-top: 0;
    opacity: 0;
    visibility: hidden;
    transition:
      grid-template-rows .42s cubic-bezier(.2, .7, .3, 1),
      opacity .3s ease,
      padding-top .42s cubic-bezier(.2, .7, .3, 1),
      visibility 0s linear .42s;
  }
  .nav__links[data-open] {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    padding-top: 20px;
    transition:
      grid-template-rows .42s cubic-bezier(.2, .7, .3, 1),
      opacity .3s ease .06s,
      padding-top .42s cubic-bezier(.2, .7, .3, 1),
      visibility 0s linear;
  }
  /* The animating row needs a zero-min-height overflow container.
     gap resets to 0 — the desktop 34px/22px row gap would otherwise
     push the stacked links apart from their hairline rules. */
  .nav__links-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow: hidden;
  }
  /* Each link drifts up into place, staggered. */
  .nav__links a {
    padding: 14px 0;
    border-top: 1px solid var(--brass-hair);
    transform: translateY(-6px);
    opacity: 0;
    transition: transform .38s ease, opacity .38s ease;
  }
  .nav__links[data-open] a { transform: none; opacity: 1; }
  .nav__links[data-open] a:nth-child(1) { transition-delay: .08s; }
  .nav__links[data-open] a:nth-child(2) { transition-delay: .14s; }
  .nav__links[data-open] a:nth-child(3) { transition-delay: .20s; }
  .nav__links[data-open] a:nth-child(4) { transition-delay: .26s; }
  .nav__rule-wrap { padding: 0 24px; }

  .hero { padding: 72px 24px; }
  .hero__logline { font-size: 17.5px; }

  .art-band { height: 300px; }

  /* Two-column grids collapse to one. */
  .book { padding: 72px 24px; }
  .book__inner { grid-template-columns: 1fr; gap: 40px; }
  .book__cover-col { max-width: 280px; margin: 0 auto; }

  .about {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 72px 24px 64px;
  }
  /* Single column: portrait leads again, as in the original design. */
  .about__copy { order: 2; }
  .portrait { order: 1; margin: 0 auto; }

  .shops { padding: 0 24px 72px; }
  .shops__grid { grid-template-columns: 1fr; }

  .newsletter { padding: 72px 24px; }
  .newsletter__form { flex-direction: column; align-items: center; }
  .newsletter__input { width: 100%; max-width: 320px; text-align: center; }
  .newsletter__btn { width: 100%; max-width: 320px; }

  /* Footer stacks and centers. */
  .footer {
    flex-direction: column;
    gap: 18px;
    padding: 34px 24px;
    text-align: center;
  }
  .footer__links { flex-wrap: wrap; justify-content: center; gap: 20px; }
}

@media (max-width: 420px) {
  .specs__row { flex-direction: column; gap: 6px; }
  .specs dd { text-align: left; }
}

/* ------------------------------------------------------------------
   Motion & print
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  /* JS skips the scroll tilt and parallax; these reset anything the
     effects would have left behind, and drop the menu stagger. */
  .cover { transform: none !important; }
  .art-band img { transform: none !important; }
  .nav__links a { transform: none; opacity: 1; }
}

@media print {
  .nav, .nav__rule-wrap, .newsletter, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}