/* =========================================================
   no name taken
   Palette from the cover: night sky over the pass, the cream
   of the title, the keeper's porch light, the paper of the site.
   ========================================================= */

:root{
  --night:#0b1420;
  --night-2:#15263a;
  --night-line:#27405a;
  --mist:#9fb4c4;
  --cream:#f1ead9;
  --paper:#f7f5ef;
  --paper-2:#eeebe2;
  --ink:#123b2d;
  --ink-text:#1c2a26;
  --muted:#526359;
  --rust:#a64c2c;
  --porch:#b4302a;
  --line:#d5d6cf;

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

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

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

img{max-width:100%;display:block}
a{color:var(--ink);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--rust)}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--paper);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)}

.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.2rem;
  color:var(--ink);
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:var(--night);
  color:var(--cream);
  padding:clamp(2.5rem,7vh,4.5rem) 0 clamp(2.5rem,7vh,4rem);
  overflow:hidden;
}
.hero__sky{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 70% 0%, rgba(78,104,128,.45) 0%, rgba(11,20,32,0) 60%),
    linear-gradient(180deg,#0b1420 0%,#10203a 55%,#0b1420 100%);
}
.hero__inner{position:relative;width:min(66rem,100% - var(--pad)*2);margin-inline:auto}

.imprint{
  font-family:"Fraunces",serif;font-weight:300;font-size:.95rem;letter-spacing:.02em;
  color:var(--mist);margin:0 0 clamp(1.5rem,4vh,2.5rem);
}
.imprint a{color:var(--cream);text-decoration:none}
.imprint a:hover{color:#fff;text-decoration:underline}

.hero__grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:46rem){.hero__grid{grid-template-columns:minmax(0,19rem) minmax(0,1fr)}}

.hero__cover{margin:0;width:min(17rem,70%);justify-self:center}
@media (min-width:46rem){.hero__cover{width:100%}}
.hero__cover img{width:100%;height:auto;box-shadow:0 2px 4px rgba(0,0,0,.5),0 24px 48px -18px rgba(0,0,0,.8)}

.lockup{margin:0;display:grid;gap:.5rem}
.lockup__title{
  font-family:"Fraunces",Georgia,serif;
  font-weight:300;
  font-size:clamp(2.6rem,1.4rem + 5.5vw,4.6rem);
  line-height:.98;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cream);
}
.lockup__sub{
  font-family:"Fraunces",serif;font-weight:300;font-style:italic;
  font-size:clamp(1.05rem,.9rem + .7vw,1.45rem);color:var(--mist);margin-top:.4rem;
}
.lockup__by{
  font-family:"Newsreader",serif;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;
  color:#8aa0b3;margin-top:.6rem;
}
.hero__log{max-width:36rem;margin:clamp(1.4rem,4vh,2rem) 0 0;font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.66;color:#d7d2c3}
.hero__date{margin:1.3rem 0 0;font-size:1rem;color:var(--mist)}
.hero__date b{color:var(--cream);font-weight:500}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:clamp(1.4rem,4vh,2rem)}

/* ---------- 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(--cream);color:var(--night);border-color:var(--cream)}
.btn--lit:hover{background:#fff;color:var(--night)}
.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(241,234,217,.4)}
.btn--ghost:hover{border-color:var(--cream);color:#fff}
.btn--wide{display:block;width:100%;margin-top:1.5rem}

/* buttons on paper */
.notify .btn--lit{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.notify .btn--lit:hover{background:#1d5a44}
.opening .btn--ghost{color:var(--ink);border-color:rgba(18,59,45,.35)}
.opening .btn--ghost:hover{border-color:var(--rust);color:var(--rust)}

/* ---------- notify ---------- */
.notify{padding:clamp(2.5rem,7vh,4.5rem) 0;background:var(--paper-2);border-bottom:1px solid var(--line)}
.notify__intro{margin:0 0 1.4rem;color:var(--muted)}
.notify__row{display:grid;gap:.9rem;grid-template-columns:1fr;align-items:end}
@media (min-width:40rem){.notify__row{grid-template-columns:minmax(8rem,12rem) 1fr auto}}
.field{display:grid;gap:.35rem;font-size:.9rem;color:var(--muted)}
.field small{font-weight:300}
.field input{
  width:100%;font:inherit;font-family:"Newsreader",serif;font-size:1.05rem;color:var(--ink-text);
  padding:.7rem .85rem;border:1px solid #b9bcb2;border-radius:.4rem;background:#fff;
}
.field input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(18,59,45,.15)}
.notify .btn{padding:.9rem 1.5rem;min-height:2.9rem}
.notify__fine{margin:.9rem 0 0;font-size:.85rem;color:var(--muted)}
.hp{position:absolute;left:-9999px;top:0}

/* ---------- the book ---------- */
.book{padding:clamp(3rem,8vh,5rem) 0}
.jacket p{max-width:var(--measure);margin:0 0 1.1em}
.jacket p:last-child{margin-bottom:0}
.book__meta{margin:1.6rem 0 0;font-size:.9rem;letter-spacing:.04em;color:var(--muted)}

/* ---------- the opening ---------- */
.opening{padding:clamp(3rem,8vh,5rem) 0;background:#fbfaf6;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.opening__label{margin:-.6rem 0 1.8rem;font-style:italic;color:var(--muted)}
.prose{max-width:var(--measure)}
.prose h3{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 .25rem;color:var(--ink);
}
.prose p.dateline{margin:0 0 1.6rem;text-indent:0;font-style:italic;color:var(--muted)}
.prose p{margin:0;text-indent:1.4em;line-height:1.66}
.prose p.first,.prose .dateline + p{text-indent:0}
.prose p.first::first-letter{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:3.1em;line-height:.8;float:left;
  margin:.08em .1em 0 0;color:var(--ink);
}
.prose--rest{margin-top:2.4rem;padding-top:2.2rem;border-top:1px solid var(--line)}
.opening__after{margin:1.6rem 0 0;text-align:center;font-style:italic}

/* ---------- author ---------- */
.author{padding:clamp(3rem,8vh,5rem) 0}
.author__row{display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:start}
@media (min-width:36rem){.author__row{grid-template-columns:8rem 1fr}}
.portrait{width:8rem;height:8rem;object-fit:cover;border-radius:50%;filter:grayscale(.15)}
.author__bio p{margin:0 0 .8em}

/* ---------- footer ---------- */
.foot{background:var(--night);color:var(--mist);padding:2.5rem 0 3rem;text-align:center}
.foot__mark{font-family:"Fraunces",serif;font-weight:300;font-size:1.1rem;letter-spacing:.04em;color:var(--cream);margin:0 0 .8rem}
.foot__line{margin:.4rem 0 0;font-size:.95rem}
.foot__fine{margin:1rem 0 0;font-size:.8rem;color:#6f8597}
.social-links{display:flex;gap:1rem;justify-content:center;margin:.4rem 0 .8rem}
.social-links a{color:var(--mist)}
.social-links a:hover{color:var(--cream)}