/* =========================================================
   driftwood bay
   Palette is the book's own materials: night Gulf water,
   sugar-white sand, the brick keeper's house, porch-light amber.
   ========================================================= */

:root{
  --water-deep:#06201E;
  --water:#0E3230;
  --water-line:#1C4A44;
  --pine:#1E4A3C;
  --sand:#F5F3EC;
  --sand-2:#EAE6DA;
  --ink:#15211E;
  --ink-soft:#4A5A55;
  --brick:#A24828;
  --amber:#C88F31;
  --shell:#FBFAF6;

  --measure:34rem;
  --pad:clamp(1.25rem, 5vw, 3rem);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(1.0625rem,0.98rem + 0.42vw,1.1875rem);
  line-height:1.62;
  font-weight:400;
}

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

a{color:var(--pine);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--brick)}

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

.skip{
  position:absolute;left:-9999px;top:0;background:var(--shell);
  padding:.75rem 1rem;z-index:50;
}
.skip:focus{left:.5rem;top:.5rem}

.wrap{
  width:min(72rem,100% - var(--pad)*2);
  margin-inline:auto;
}
.wrap--narrow{width:min(var(--measure) + 6rem,100% - var(--pad)*2)}

/* ---------- section heading ---------- */
.h-sec{
  font-family:"Fraunces",Georgia,serif;
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  letter-spacing:-.012em;
  margin:0 0 1.4rem;
  color:var(--pine);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:var(--water-deep);
  color:#E8EFEA;
  min-height:min(94svh,52rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(3rem,9vh,6rem) 0 0;
  overflow:hidden;
}

.hero__water{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(30,74,60,.55) 0%, rgba(6,32,30,0) 62%),
    linear-gradient(180deg, #05191A 0%, #072623 38%, #0C3330 100%);
}
.hero__water::after{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(180deg,
      rgba(200,220,210,.05) 0px,
      rgba(200,220,210,.05) 1px,
      transparent 1px,
      transparent 7px);
  mask-image:linear-gradient(180deg,transparent 0%,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%,transparent 100%);
  opacity:.6;
}

.hero__inner{
  position:relative;
  width:min(46rem,100% - var(--pad)*2);
  margin-inline:auto;
  text-align:center;
  padding-bottom:2rem;
}

.imprint{
  font-family:"Fraunces",serif;
  font-weight:300;
  font-size:.95rem;
  letter-spacing:.02em;
  color:#8FB3A4;
  margin:0 0 clamp(1.5rem,5vh,2.5rem);
}

.lockup{margin:0;display:grid;gap:.35rem}
.lockup__title{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"SOFT" 40,"WONK" 1;
  font-weight:500;
  font-size:clamp(2.9rem,1.6rem + 8.2vw,6.5rem);
  line-height:.92;
  letter-spacing:-.03em;
  color:var(--shell);
}
.lockup__sub{
  font-family:"Fraunces",serif;
  font-weight:300;
  font-size:clamp(1rem,.85rem + .7vw,1.45rem);
  letter-spacing:.01em;
  color:#9CC0B0;
}
.lockup__by{
  font-family:"Newsreader",serif;
  font-weight:400;
  font-size:clamp(.95rem,.9rem + .3vw,1.1rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7FA495;
  margin-top:1.1rem;
}

.hero__log{
  max-width:32rem;
  margin:clamp(1.8rem,5vh,2.8rem) auto 0;
  font-size:clamp(1.02rem,.97rem + .3vw,1.16rem);
  line-height:1.68;
  color:#C9DAD1;
}

.hero__cta{
  display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(1.8rem,5vh,2.6rem);
}

.hero__foot{
  position:relative;
  margin-top:auto;
  border-top:1px solid rgba(159,192,176,.16);
  padding:1.1rem var(--pad) 1.3rem;
  text-align:center;
}

.countdown{
  font-family:"Newsreader",serif;
  font-size:.98rem;
  color:#9CC0B0;
  line-height:1.5;
}
.countdown b{
  color:var(--amber);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:"Newsreader",serif;
  font-size:1rem;
  line-height:1;
  padding:.85rem 1.5rem;
  border:1px solid transparent;
  border-radius:1.6rem;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--lit{background:var(--amber);color:#1B1405;border-color:var(--amber)}
.btn--lit:hover{background:#DBA346;color:#1B1405}
.btn--ghost{background:transparent;color:#CFE0D7;border-color:rgba(180,208,194,.4)}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn--wide{display:block;width:100%;margin-top:1.5rem}
.btn[hidden]{display:none}

/* buttons on the sand ground */
.buy .btn--lit{background:var(--pine);color:var(--shell);border-color:var(--pine)}
.buy .btn--lit:hover{background:#2A6350}
.buy .btn--ghost,.opening .btn--ghost{color:var(--pine);border-color:rgba(30,74,60,.35)}
.buy .btn--ghost:hover,.opening .btn--ghost:hover{border-color:var(--brick);color:var(--brick)}

/* =========================================================
   BUY
   ========================================================= */
.buy{padding:clamp(3rem,8vh,5rem) 0;background:var(--shell)}

.buy__grid{
  display:grid;
  gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:44rem){
  .buy__grid{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
}

.cover{margin:0;position:relative}
.cover img{
  width:100%;
  box-shadow:0 1px 2px rgba(21,33,30,.14),0 14px 30px -14px rgba(21,33,30,.4);
}
.cover img[hidden]{display:none}
.cover__fallback{
  display:grid;align-content:center;justify-items:center;gap:.4rem;
  aspect-ratio:11/17;
  background:var(--water);
  color:var(--shell);
  padding:1.5rem;text-align:center;
}
.cover__fallback span{font-family:"Fraunces",serif;font-size:1.7rem;line-height:1.05}
.cover__fallback em{font-family:"Fraunces",serif;font-style:normal;font-weight:300;color:#9CC0B0;font-size:.9rem}
.cover__fallback b{margin-top:1rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:#7FA495}

.edition{
  padding:1.15rem 0 1.35rem;
  border-top:1px solid var(--sand-2);
}
.edition:first-child{border-top:none;padding-top:0}

.edition__head{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.edition h3{
  font-family:"Fraunces",serif;font-weight:500;font-size:1.25rem;
  margin:0;color:var(--ink);
}
.edition__status{
  font-size:.86rem;color:var(--ink-soft);
}
.edition__status--live{color:var(--brick)}
.edition__meta{margin:.3rem 0 .85rem;font-size:.92rem;color:var(--ink-soft)}
.edition__links{display:flex;gap:.6rem;flex-wrap:wrap}
.edition__links .btn{padding:.7rem 1.2rem;font-size:.95rem}

.buy__note{
  margin:1.1rem 0 0;font-size:.9rem;color:var(--ink-soft);
  border-left:2px solid var(--amber);padding-left:.85rem;
}
.buy__note:empty{display:none}

/* =========================================================
   BOOK / JACKET
   ========================================================= */
.book{padding:clamp(3rem,8vh,5rem) 0;background:var(--sand)}
.jacket p{margin:0 0 1.1em;max-width:var(--measure)}
.jacket p:first-child{
  font-size:1.16em;
  line-height:1.55;
}
.jacket p:last-child{
  margin-bottom:0;
  color:var(--ink-soft);
  border-top:1px solid var(--sand-2);
  padding-top:1.1rem;
}

/* =========================================================
   OPENING
   ========================================================= */
.opening{
  padding:clamp(3rem,8vh,5rem) 0;
  background:var(--shell);
}
.opening__label{
  font-family:"Fraunces",serif;
  font-weight:300;
  letter-spacing:.24em;
  text-transform:lowercase;
  font-size:.95rem;
  color:var(--brick);
  margin:0 0 1.6rem;
}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.05em;text-indent:1.4em}
.prose p:first-child{text-indent:0}
.prose--rest[hidden]{display:none}
.opening__after{
  margin:1.4rem 0 0;color:var(--ink-soft);font-size:.95rem;
}

/* =========================================================
   MAP
   ========================================================= */
.map{padding:clamp(3rem,8vh,5rem) 0;background:var(--water);color:#DCE8E1}
.map .h-sec{color:var(--shell)}

.map__grid{display:grid;gap:clamp(1.5rem,4vw,2.5rem)}
@media (min-width:60rem){
  .map__grid{grid-template-columns:minmax(0,28rem) minmax(0,1fr);align-items:start}
  .map__side{position:sticky;top:2rem}
}
.map__col{max-width:32rem}

.map__intro{color:#A9C6B9;margin:0 0 1.5rem;font-size:.98rem;max-width:30rem}

.mapbox{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(159,192,176,.18);
}
.mapbox img{width:100%}
.mapbox img[hidden]{display:none}
.mapbox__empty{padding:clamp(2rem,8vw,4rem);text-align:center;color:#9CC0B0;font-size:.95rem}
.mapbox__empty p{margin:.35rem 0}
.mapbox__empty code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85em;background:rgba(0,0,0,.25);padding:.15em .45em;
}

.pins{position:absolute;inset:0}
.pin{
  position:absolute;
  transform:translate(-50%,-50%);
  width:1.4rem;height:1.4rem;
  border-radius:50%;
  border:1.5px solid rgba(251,250,246,.9);
  background:rgba(6,32,30,.45);
  box-shadow:0 1px 6px rgba(4,20,18,.5);
  padding:0;cursor:pointer;
  display:grid;place-items:center;
  transition:background-color .16s ease,transform .16s ease;
}
.pin::after{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--amber)}
.pin:hover,.pin[aria-pressed="true"]{
  background:var(--amber);
  transform:translate(-50%,-50%) scale(1.25);
}
.pin:hover::after,.pin[aria-pressed="true"]::after{background:#1B1405}
.pin--route{border-color:#F0B49A}
.pin--route::after{background:var(--brick)}
.pin--route:hover,.pin--route[aria-pressed="true"]{background:var(--brick)}
.pin--route:hover::after,.pin--route[aria-pressed="true"]::after{background:#FBEDE7}

.pinfo{
  background:var(--shell);
  color:var(--ink);
  padding:1.25rem 1.35rem 1.35rem;
  max-width:26rem;
  border-left:3px solid var(--amber);
}
.pinfo h3{
  font-family:"Fraunces",serif;font-weight:500;font-size:1.2rem;
  margin:0 0 .4rem;color:var(--pine);
}
.pinfo p{margin:0;font-size:.98rem}
.pinfo__image{width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 1rem}

.placer{
  margin-top:1rem;padding:.85rem 1rem;background:rgba(200,143,49,.14);
  border:1px solid var(--amber);font-size:.92rem;
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
}
.placer output{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(0,0,0,.3);padding:.25rem .6rem;color:var(--amber);
}

/* =========================================================
   PEOPLE
   ========================================================= */
.people{padding:clamp(3rem,8vh,5rem) 0;background:var(--sand)}
.people__intro{max-width:var(--measure);color:var(--ink-soft);margin:0 0 2rem}

.cards{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.25rem,3vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
}
@media (min-width:40rem){
  .cards{grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr))}
}

.card{margin:0}
.card__pic{
  aspect-ratio:4/5;
  background:var(--sand-2);
  overflow:hidden;
  display:grid;place-items:center;
  margin-bottom:.7rem;
}
.card__pic img{width:100%;height:100%;object-fit:cover}
.card__mono{
  font-family:"Fraunces",serif;font-size:2.4rem;font-weight:300;
  color:#A9B4AE;
}
.card--accent .card__pic{background:var(--water)}
.card--accent .card__mono{color:#5C8878}

.card__name{
  font-family:"Fraunces",serif;font-weight:500;font-size:1.02rem;
  margin:0 0 .15rem;line-height:1.25;color:var(--ink);
}
.card__role{
  margin:0 0 .45rem;font-size:.84rem;color:var(--brick);line-height:1.4;
}
.card__note{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}

/* =========================================================
   AUTHOR + FOOT
   ========================================================= */
.author{padding:clamp(3rem,8vh,5rem) 0;background:var(--shell)}
.author__row{display:flex;gap:1.75rem;align-items:flex-start;flex-wrap:wrap}
.portrait{
  width:8.5rem;flex:none;
  filter:grayscale(1) contrast(1.05);
}
.author__bio{flex:1 1 18rem;max-width:var(--measure)}
.author__bio p{margin:0 0 .9em}
.author__bio p:last-child{margin-bottom:0}

.foot{
  background:var(--water-deep);color:#8FB3A4;
  padding:clamp(2.5rem,7vh,4rem) 0 clamp(2rem,5vh,3rem);
  text-align:center;
}
.foot__mark{
  font-family:"Fraunces",serif;font-weight:300;font-size:1.35rem;
  color:var(--shell);margin:0 0 .9rem;letter-spacing:.01em;
}
.foot__line{margin:.25rem 0;font-size:.95rem}
.foot__line:empty{display:none}
.foot__line a{color:#9CC0B0}
.foot__line a:hover{color:var(--amber)}
.foot__fine{
  margin:1.6rem 0 0;font-size:.8rem;color:#5C8878;line-height:1.7;
}

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

.imprint a{color:inherit;text-underline-offset:.2em}

/* Environmental portraits retain the full author-selected scene. */
.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.card__pic{aspect-ratio:3/2}
.card__pic img{object-fit:contain}
.pinfo__image{aspect-ratio:auto;object-fit:contain;height:auto}

/* Prominent, responsive launch countdown. */
.countdown{max-width:46rem;margin:0 auto;padding:1.2rem 0;color:#e0ebe4}
.countdown__title{font-size:clamp(1.25rem,3vw,1.8rem);color:var(--amber);margin:0 0 1rem}
.countdown__units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.35rem,2vw,1rem)}
.countdown__unit{padding:.8rem .3rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:6px}
.countdown__unit b{display:block;font-size:clamp(1.8rem,6vw,3.4rem);line-height:1.15;color:#fff}
.countdown__unit span{display:block;font-size:.85rem;margin-top:.4rem}
.countdown__date{margin:1rem 0 0;font-size:1rem}

/* Approved cover companion hero; foreground contrast stays independent of the photo. */
.hero{padding-top:clamp(2rem,6vw,4rem);isolation:isolate}
.hero__water{
  z-index:-1;
  background-image:linear-gradient(rgba(3,17,25,.62),rgba(3,17,25,.62)),url("assets/hero-harbor.jpg");
  background-size:cover;
  background-position:center top;
}
.hero__water::after{display:none}
.hero__inner{padding-bottom:clamp(2.5rem,6vw,4rem)}
.hero .imprint,.hero .lockup__title,.hero .lockup__sub,.hero .lockup__by,.hero .hero__log{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.65)}
.hero .imprint a{color:#fff;text-decoration:underline;text-underline-offset:.22em}
.hero .imprint a:hover{color:#ffe9ad}
.hero .btn{text-shadow:none}
.hero .btn--lit{background:#e6b653;color:#102820;border:1px solid #e6b653}
.hero .btn--lit:hover{background:#f3ce7d;color:#102820}
.hero .btn--ghost{background:#102d29;color:#fff;border:1px solid #e8efe9}
.hero .btn--ghost:hover{background:#254b42;color:#fff}
.hero a:focus-visible{outline:3px solid #ffe9ad;outline-offset:5px}
.hero__foot{background:#0c302a;z-index:1;margin-top:0;box-shadow:0 -25px 40px #0c302a55}
@media(max-width:40rem){
  .hero__water{background-position:27% top}
  .hero__cta .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
}