:root{
  /* Palette: a hand-tinted photograph mounted on album board */
  --board:      #d6dad2;   /* grey-green mount board */
  --board-deep: #c3c9c0;   /* shadowed board */
  --print:      #f2efe8;   /* the photographic print */
  --ink:        #22272a;   /* near-black slate */
  --ink-soft:   #5d656a;   /* caption grey */
  --tint:       #b0787a;   /* hand-tinted blush */
  --pearl:      #b9b3a4;   /* small dull beads */

  --display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --body: "Newsreader", Georgia, serif;

  --measure: 34rem;        /* reading width */
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--board); }

body{
  margin:0;
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.7;
  min-height:100vh;
  /* faint paper grain, no image needed — pinned to the viewport so short
     pages don't show a seam where the gradient runs out */
  background-color:transparent;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.35), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,.22), transparent 40%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

a{ color:inherit; }

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

.skip{
  position:absolute; left:-9999px;
}
.skip:focus{
  left:1rem; top:1rem; z-index:10;
  background:var(--print); padding:.6rem 1rem;
}

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

.wrap{
  width:100%;
  max-width:58rem;
  margin:0 auto;
  padding:0 1.5rem;
}

.eyebrow,
h2.eyebrow{
  font-size:.6875rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:400;
  margin:0 0 1.1rem;
}

/* ---------- masthead ---------- */

.masthead{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:baseline;
  justify-content:space-between;
  padding:2rem 0 0;
}

.byline{
  font-family:var(--display);
  font-size:1rem;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  text-decoration:none;
}

.nav{
  display:flex;
  gap:1.6rem;
  font-size:.8125rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.nav a{
  text-decoration:none;
  color:var(--ink-soft);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--tint); }

/* ---------- the pearls: signature divider ---------- */

.pearls{
  display:block;
  width:100%;
  max-width:20rem;
  height:14px;
  margin:0 auto;
  overflow:visible;
}
.pearls circle{ fill:var(--pearl); }
.pearls .clasp{ fill:none; stroke:var(--pearl); stroke-width:1; }

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

.hero{
  padding:7rem 0 5rem;
  text-align:center;
}

.hero h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem, 5vw, 3rem);
  line-height:1.06;
  letter-spacing:.015em;
  margin:0;
}
.hero h1 .the{
  display:block;
  font-size:.42em;
  letter-spacing:.34em;
  font-weight:400;
  margin-bottom:.85em;
  color:var(--ink-soft);
}

.dateline{
  font-family:var(--body);
  font-size:.8125rem;
  font-weight:400;
  font-style:italic;
  letter-spacing:.14em;
  color:var(--ink-soft);
  margin:1.9rem 0 0;
}

.status{
  margin-top:2.6rem;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}

/* ---------- print panels ---------- */

.print{
  background:var(--print);
  padding:clamp(2rem, 6vw, 4.5rem);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 18px 40px -28px rgba(34,39,42,.5);
}

section{ padding:4.5rem 0; }
section:first-of-type{ padding-top:0; }

.prose{
  max-width:var(--measure);
  margin:0 auto;
}
.prose p{ margin:0 0 1.25rem; }
.prose p:last-child{ margin-bottom:0; }

h2.eyebrow{
  font-family:var(--body);
}

h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.6rem,4vw,2.3rem);
  line-height:1.15;
  margin:0 0 1.8rem;
}

.lede{
  font-size:1.1875rem;
  line-height:1.65;
}

.comp{
  margin-top:2.2rem;
  padding-top:1.6rem;
  border-top:1px solid var(--board-deep);
  font-size:.9375rem;
  color:var(--ink-soft);
}
.comp strong{ font-weight:500; color:var(--ink); }

/* ---------- excerpt ---------- */

.excerpt{
  max-width:32rem;
  margin:0 auto;
}
.excerpt p{
  margin:0 0 1.1rem;
  text-indent:1.4em;
}
.excerpt p:first-of-type{ text-indent:0; }
.excerpt .caption{
  text-indent:0;
  margin-top:2rem;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------- author ---------- */

.author-grid{
  display:grid;
  grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
  max-width:44rem;
  margin:0 auto;
}
.portrait{
  width:100%;
  max-width:10rem;
  aspect-ratio:1/1;
  height:auto;
  object-fit:cover;
  border-radius:50%;
  background:var(--board-deep);
  /* soft ring so the circle reads as intentional, on-palette */
  box-shadow:0 0 0 1px var(--board-deep), 0 10px 24px -18px rgba(34,39,42,.5);
  /* placeholder text styles, harmless once an <img> fills the slot */
  display:grid;
  place-items:center;
  text-align:center;
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------- signup + contact ---------- */

.signup{ text-align:center; }
.form{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
  max-width:26rem;
  margin:1.8rem auto 0;
}
.form input[type=email]{
  flex:1 1 14rem;
  font-family:var(--body);
  font-size:1rem;
  padding:.8rem .9rem;
  border:1px solid var(--board-deep);
  background:#fff;
  color:var(--ink);
  border-radius:0;
}
.form button{
  font-family:var(--body);
  font-size:.8125rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.85rem 1.6rem;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--print);
  cursor:pointer;
  border-radius:0;
  transition:background .25s, color .25s;
}
.form button:hover{ background:var(--tint); border-color:var(--tint); }
.fineprint{
  font-size:.8125rem;
  color:var(--ink-soft);
  margin:1.1rem 0 0;
}

.foot{
  padding:3rem 0 4rem;
  text-align:center;
  font-size:.8125rem;
  color:var(--ink-soft);
}
.foot a{ color:var(--ink); text-decoration-color:var(--pearl); }
.foot p{ margin:.4rem 0; }

/* ---------- motion ---------- */

.rise{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s ease, transform .9s ease;
}
.rise.seen{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rise{ opacity:1; transform:none; transition:none; }
}

@media (max-width:34rem){
  .author-grid{ grid-template-columns:1fr; }
  .portrait{ max-width:12rem; }
  .nav{ gap:1.1rem; }
}