/* Fernsage Letters: the archive (/letters) and each letter's page. Linked
   only from those pages; the shared identity (tokens, masthead, footer) is
   site.css. One reading column at the legal pages' measure. */

.letters-head{padding-block:var(--gap) 0; text-align:center;}
.letters-head h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(34px,5.2vw,46px); line-height:1.15;
  letter-spacing:-0.01em; margin:0 auto 18px; max-width:22ch; color:var(--ink);
}
.letters-head .lede{font-size:21px; color:var(--soft); margin:0 auto; max-width:34ch;}
.letters-head .stamp{font-style:italic; color:var(--soft); font-size:17px; margin:0;}

/* Corinthia: the handwritten "Alfred" that signs each letter, the same
   signature as the homepage's founder letter. */
@font-face{
  font-family:'Corinthia'; font-style:normal; font-weight:700;
  font-display:swap; src:url('/fonts/corinthia-700.woff2') format('woff2');
}

/* ---------- the letter itself ----------
   Set on the homepage founder letter's paper (index.astro .letter): a
   white sheet with its double shadow, the same type size and leading, and
   the same signature. Not tilted like the homepage one: this sheet is
   read end to end, not glanced at. */
.sheet{
  max-width:680px; margin:46px auto 0; background:#fff;
  padding:clamp(36px,6vw,64px) clamp(24px,6vw,60px);
  box-shadow:0 2px 6px rgba(27,24,19,0.06), 0 26px 54px rgba(27,24,19,0.16);
}
.prose p, .prose li{font-size:20px; line-height:1.65; color:var(--ink); margin:0 0 22px;}
.prose ul, .prose ol{margin:0 0 22px; padding-left:1.25em;}
.prose li{margin-bottom:10px;}
.prose li::marker{color:var(--accent);}
.prose h2{font-size:24px; font-weight:600; line-height:1.3; margin:44px 0 14px; color:var(--ink);}
.prose h3{font-size:21px; font-weight:600; margin:34px 0 10px; color:var(--ink);}
.prose a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line);}
.prose a:hover, .prose a:focus-visible{border-color:var(--accent);}
.prose blockquote{
  margin:34px 0; padding:0 0 0 22px; border-left:2px solid var(--accent);
  font-style:italic; color:var(--ink);
}
.prose blockquote p{font-size:22px; line-height:1.45;}
.prose blockquote p:last-child{margin-bottom:0;}
.prose hr{border:0; border-top:1px solid var(--line); margin:44px auto; width:30%;}
.prose img{max-width:100%; height:auto;}
.prose code{font-size:0.85em;}
.prose > :last-child{margin-bottom:0;}

.sign{margin-top:30px;}
.sign .script{display:block; font-family:'Corinthia', cursive; font-weight:700; font-size:clamp(46px,7vw,62px); color:var(--ink); line-height:1;}
.signee-row{display:flex; align-items:center; gap:12px; margin-top:10px;}
.signee-photo{width:44px; height:44px; flex:none; border-radius:50%; object-fit:cover; display:block;}
.signee{font-size:16px; color:var(--soft);}

/* ---------- signup (or RSS, until the Kit form exists) ---------- */
.signup-block{max-width:680px; margin:56px auto 0; padding-top:30px; border-top:1px solid var(--line);}
.signup-block p{font-size:18px; color:var(--soft); margin:0 0 14px;}
.signup-block a{color:var(--accent);}
.signup{display:flex; gap:10px; margin:0 0 12px; flex-wrap:wrap;}
.signup label{position:absolute; left:-9999px;}
.signup input[type=email]{
  flex:1 1 240px; min-width:0; font:inherit; font-size:18px; padding:12px 14px;
  color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:0;
}
.signup input[type=email]:focus{outline:2px solid var(--accent); outline-offset:1px;}
.signup button{
  font-family:var(--sans); font-size:16px; font-weight:600; padding:12px 20px; cursor:pointer;
  color:var(--paper); background:var(--accent); border:1px solid var(--accent); border-radius:0;
}
.signup button:hover, .signup button:focus-visible{background:var(--brand);}

/* ---------- older / newer ---------- */
.letter-nav{
  max-width:680px; margin:40px auto var(--gap); display:flex; justify-content:space-between; gap:24px;
}
.letter-nav a{text-decoration:none; color:var(--ink); max-width:45%; font-size:17px;}
.letter-nav a span{display:block; font-style:italic; color:var(--soft); font-size:15.5px;}
.letter-nav a:hover strong, .letter-nav a:focus-visible strong{color:var(--accent);}
.letter-nav strong{font-weight:500;}
.letter-nav .newer{text-align:right; margin-left:auto;}

/* ---------- the archive and topic pages ----------
   Wider than the reading column: a grid of white sheets, the same paper the
   homepage's founder letter is set on. */
.letters-head .signup-block{max-width:520px; margin:30px auto 0; padding-top:0; border-top:0; text-align:left;}
.letters-head .signup-block p{text-align:center;}
.archive{padding-block:56px var(--gap);}

.topic-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 36px;}
.topic-nav a{
  font-family:var(--sans); font-size:14.5px; font-weight:500; text-decoration:none; color:var(--ink);
  padding:7px 14px; border:1px solid var(--line); background:#fff;
}
.topic-nav a span{color:var(--soft); font-weight:400; margin-left:4px;}
.topic-nav a:hover, .topic-nav a:focus-visible{border-color:var(--accent); color:var(--accent);}
.topic-nav a[aria-current="page"]{background:var(--accent); border-color:var(--accent); color:var(--paper);}
.topic-nav a[aria-current="page"] span{color:var(--accent-wash);}

.letter-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px;
}
.letter-card{
  display:flex; flex-direction:column; height:100%; padding:26px 28px 24px;
  background:#fff; box-shadow:0 2px 6px rgba(27,24,19,0.05), 0 16px 34px rgba(27,24,19,0.1); text-decoration:none; color:var(--ink);
  transition:box-shadow 0.2s, transform 0.2s;
}
.letter-card:hover, .letter-card:focus-visible{box-shadow:0 14px 30px rgba(27,24,19,0.14); transform:translateY(-2px);}
.letter-card time{font-style:italic; color:var(--soft); font-size:15.5px;}
.letter-card strong{font-size:23px; font-weight:600; line-height:1.25; margin:6px 0 10px; letter-spacing:-0.005em;}
.letter-card:hover strong, .letter-card:focus-visible strong{color:var(--accent);}
.letter-card p{font-size:17.5px; line-height:1.45; color:var(--soft); margin:0 0 16px; flex:1;}
.letter-card .card-topics{font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--accent); letter-spacing:0.02em;}
.archive .empty{font-style:italic; text-align:center; color:var(--soft); font-size:19px;}
@media (prefers-reduced-motion: reduce){ .letter-card{transition:none;} .letter-card:hover{transform:none;} }

/* A letter's topics, beside its date. */
.letters-head .stamp a{color:var(--accent); text-decoration:none; font-style:normal;}
.letters-head .stamp a:hover, .letters-head .stamp a:focus-visible{text-decoration:underline;}
.preview-flag{font-family:var(--sans); font-size:12px; font-weight:600; color:var(--gold-deep); background:var(--gold-wash); padding:2px 6px; margin-left:6px; vertical-align:middle;}

@media (max-width:600px){
  .letters-head .lede{font-size:20.5px;}
  .prose p, .prose li{font-size:21px; line-height:1.6;}
  .sheet{margin-inline:calc(-1 * var(--pad) + 8px);}
  .signup button{flex:1 1 100%;}
  .letter-nav{flex-direction:column;}
  /* One row that scrolls sideways, so the topics don't push the letters
     below the fold. Bleeds to the screen edges; the page itself never
     scrolls sideways. */
  .topic-nav{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad); margin-bottom:28px;
  }
  .topic-nav::-webkit-scrollbar{display:none;}
  .topic-nav a{flex:none;}
  .letter-nav a{max-width:none;}
}

/* ---------- coming soon, and the signup confirmation pages ---------- */
.coming-soon{padding-block:clamp(72px,12vw,140px) var(--gap);}
.coming-soon .sub{font-size:18px; color:var(--soft); margin:18px auto 0; max-width:42ch;}
.coming-soon .sub a{color:var(--accent);}
.coming-soon .signup-block{margin-top:36px;}
.signup-block .fine{font-size:15.5px; margin-top:4px;}
.coming-soon{min-height:calc(100vh - 170px); min-height:calc(100svh - 170px);}
.letters-head .lede, .coming-soon .sub{text-wrap:balance;}
.sheet + .signup-block{border-top:0; padding-top:0;}
.coming-soon .lede{max-width:44ch;}

/* Coming soon: the description fits in two lines on desktop. */
.coming-soon .lede{font-size:18.5px; max-width:640px;}
@media (max-width:600px){ .coming-soon .lede{font-size:19px;} }

/* Coming soon with drafts: a preview of the first letters, shown but not
   openable (no link, no hover lift), so the page shows what's coming
   without publishing it. */
.coming-soon.has-upcoming{min-height:0;}
.upcoming{width:min(1104px, calc(100vw - 2 * var(--pad))); margin:clamp(64px,9vw,96px) 0 0 50%; transform:translateX(-50%); text-align:left;}
.upcoming h2{font-size:22px; font-weight:600; text-align:center; margin:0 0 24px; color:var(--ink);}
/* Faded like a preview: the whole card at reduced opacity with a softer
   shadow, and the excerpt dissolving toward the bottom. */
.letter-card.is-preview{cursor:default; opacity:0.55; box-shadow:0 1px 3px rgba(27,24,19,0.04), 0 10px 22px rgba(27,24,19,0.06);}
.letter-card.is-preview:hover{box-shadow:0 1px 3px rgba(27,24,19,0.04), 0 10px 22px rgba(27,24,19,0.06); transform:none;}
.letter-card.is-preview strong{margin-top:0;}
.letter-card.is-preview:hover strong{color:var(--ink);}
.letter-card.is-preview p{
  color:var(--soft);
  -webkit-mask-image:linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 40%, transparent 100%);
}