/* ============================================================
   Mission Journal — "letters from the field"
   Newsreader (reading) + IBM Plex Mono (utility), airmail accents
   Themes: light (onionskin) · dark (lamplight) · midnight (deep night)
   ============================================================ */

:root{
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --measure:40rem;          /* reading column cap */
  --wrap:54rem;             /* outer column cap (gallery breaks wider) */

  /* ---- LIGHT (default) ---- */
  --paper:#F7F4EC;
  --card:#FFFFFF;
  --ink:#21242B;
  --ink-soft:#5C616B;
  --rule:#E4DECF;
  --blue:#294A6E;
  --blue-tint:#E8EDF2;
  --red:#BB4330;
  --red-tint:#F4E4DF;
  --nav-bg:rgba(247,244,236,.85);
  --airmail-op:.85;
  color-scheme:light;
}

[data-theme="dark"]{
  /* warm lamplight */
  --paper:#201F1B;
  --card:#2A2A24;
  --ink:#ECE7DA;
  --ink-soft:#A8A292;
  --rule:#3A382F;
  --blue:#86ABD6;
  --blue-tint:#2B3340;
  --red:#E0876A;
  --red-tint:#382A22;
  --nav-bg:rgba(32,31,27,.82);
  --airmail-op:.9;
  color-scheme:dark;
}

[data-theme="midnight"]{
  /* cool deep night */
  --paper:#0E1117;
  --card:#161A22;
  --ink:#D7DEEA;
  --ink-soft:#888F9F;
  --rule:#222A36;
  --blue:#83B2E8;
  --blue-tint:#172230;
  --red:#E58C6F;
  --red-tint:#2A2027;
  --nav-bg:rgba(14,17,23,.84);
  --airmail-op:.95;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; overflow-x:clip;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(16.5px, 1rem + 0.18vw, 19px);
  line-height:1.65;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}

::selection{background:var(--red-tint);}
a{color:var(--blue);}
img{max-width:100%;display:block;}

/* ---- airmail stripe ---- */
.airmail{
  height:6px;
  background:repeating-linear-gradient(-45deg,
    var(--red) 0 13px, var(--paper) 13px 19px,
    var(--blue) 19px 32px, var(--paper) 32px 38px);
  opacity:var(--airmail-op);
}

/* ---- containers (fluid, auto gutters) ---- */
.wrap{
  width:min(var(--wrap), 100% - 2.4rem);
  margin-inline:auto;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.6rem clamp(1rem, 3vw, 1.6rem);
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(150%) blur(8px);
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--rule);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .nav{background:var(--paper);}
}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); flex:0 0 auto;}
.brand-mark{font-family:var(--mono); color:var(--red); font-size:1.05rem; letter-spacing:.04em;}
.brand-name{font-family:var(--mono); font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;}

.nav-right{display:flex; align-items:center; gap:clamp(.7rem, 2.2vw, 1.5rem);}
.nav-link{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  padding:.3rem 0; border-bottom:1.5px solid transparent; white-space:nowrap;
}
.nav-link:hover{color:var(--ink);}
.nav-link.is-active{color:var(--ink); border-bottom-color:var(--red);}

/* theme toggle */
.theme-seg{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--rule); border-radius:999px; padding:2px;
  background:var(--card);
}
.theme-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:26px; padding:0;
  border:none; background:transparent; color:var(--ink-soft);
  border-radius:999px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.theme-btn:hover{color:var(--ink);}
.theme-btn[aria-pressed="true"]{background:var(--blue-tint); color:var(--blue);}
.theme-btn svg{display:block;}

/* ============================================================
   HOME / HERO
   ============================================================ */
.hero{
  text-align:center;
  padding:clamp(2.6rem, 7vw, 4.6rem) 1.4rem clamp(1.4rem, 4vw, 2.3rem);
}
.hero-mark{font-family:var(--mono); color:var(--red); font-size:clamp(1.6rem,5vw,2.1rem); letter-spacing:.08em; margin:0 0 1rem;}
.hero-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.6rem, 8vw, 4.4rem);
  line-height:1.02; letter-spacing:-.015em; margin:0;
}
.hero-sub{
  font-family:var(--mono); font-size:clamp(.7rem,2vw,.8rem); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  margin:1.2rem 0 0; line-height:1.9;
}

.lede{
  max-width:var(--measure); margin:1.2rem auto clamp(2.4rem,5vw,3.6rem);
  font-size:clamp(1.1rem, 1rem + .5vw, 1.28rem); line-height:1.62;
  color:var(--ink-soft); text-align:center; text-wrap:balance;
}

/* ============================================================
   YEAR SECTIONS + CARDS
   ============================================================ */
.year{margin:0 0 clamp(2.2rem,5vw,3.4rem);}
.year-head{
  display:flex; align-items:baseline; gap:1rem;
  border-bottom:1.5px solid var(--ink); padding-bottom:.35rem; margin-bottom:1.4rem;
}
.year-no{font-family:var(--mono); font-weight:600; font-size:clamp(1.3rem,4vw,1.6rem); letter-spacing:.04em; margin:0;}
.year-count{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-left:auto;}

.cards{display:flex; flex-direction:column; gap:.15rem;}
.card{
  display:grid; grid-template-columns:clamp(120px, 17vw, 176px) 1fr; gap:clamp(1rem,3vw,1.5rem);
  text-decoration:none; color:inherit;
  padding:1.1rem .5rem; border-bottom:1px solid var(--rule);
  transition:background .18s ease, transform .18s ease;
}
.card:hover{background:var(--card); transform:translateX(3px);}
.card:last-child{border-bottom:none;}
.card-media{overflow:hidden; border-radius:2px;}
.card-img{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--blue-tint); transition:transform .4s ease;}
.card:hover .card-img{transform:scale(1.04);}
.card-img--none{
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-tint); color:var(--blue);
  font-family:var(--mono); font-size:1.5rem; letter-spacing:.06em; opacity:.65;
}
.card-body{align-self:center; min-width:0;}
.card-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .85rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 .35rem;
}
.card-no{color:var(--red); font-weight:600;}
.card-week{color:var(--blue);}
.card-title{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.35rem, 1rem + 1.4vw, 1.65rem); line-height:1.12; margin:0 0 .35rem; letter-spacing:-.01em;
}
.card:hover .card-title{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.card-teaser{
  margin:0; color:var(--ink-soft); font-size:1.02rem; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ============================================================
   THE LETTER (post body)
   ============================================================ */
.letter{padding:clamp(2rem,5vw,3rem) 0 1rem;}
.dateline{
  font-family:var(--mono); font-size:clamp(.68rem,2vw,.75rem); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 auto 1rem; max-width:var(--measure);
}
.post-title{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(2.1rem, 1rem + 5vw, 3.3rem);
  line-height:1.06; letter-spacing:-.015em; margin:0 auto 2rem; max-width:var(--measure);
}
.post-title--plain{font-style:normal; font-weight:600;}

.prose{
  max-width:var(--measure); margin:0 auto;
  font-size:clamp(1.05rem, 1rem + .35vw, 1.2rem); line-height:1.72;
}
.prose p{margin:0 0 1.25rem;}
.prose a{color:var(--blue); text-underline-offset:2px; word-break:break-word;}
.prose a:hover{text-decoration-thickness:2px;}

.gallery{margin:2.6rem 0 1rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap:.9rem;}
.shot{display:block; border:1px solid var(--rule); background:var(--card); padding:5px; border-radius:2px; overflow:hidden;}
.shot img{width:100%; height:auto; border-radius:1px; transition:transform .4s ease;}
.shot:hover img{transform:scale(1.02);}

.signoff{text-align:center; font-family:var(--mono); color:var(--red); font-size:1.7rem; letter-spacing:.08em; margin:2.8rem 0 .5rem;}

.postnav{display:grid; grid-template-columns:1fr 1fr; gap:1rem; border-top:1px solid var(--rule); margin-top:2.4rem; padding-top:1.6rem;}
.pn{display:flex; flex-direction:column; gap:.3rem; text-decoration:none; color:var(--ink); padding:.4rem 0;}
.pn--next{text-align:right; align-items:flex-end;}
.pn-k{font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--red);}
.pn-t{font-family:var(--serif); font-style:italic; font-size:1.18rem; line-height:1.15;}
.pn:hover .pn-t{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding:clamp(2.4rem,6vw,4rem) 0 1rem;}
.about-prose{max-width:var(--measure); margin:0 auto; font-size:clamp(1.08rem,1rem+.4vw,1.24rem); line-height:1.74;}
.about-prose p{margin:0 0 1.3rem;}
.about-prose .lead{font-style:italic; color:var(--ink); font-size:1.18em; line-height:1.4; margin-bottom:1.6rem;}
.about-prose code{font-family:var(--mono); background:var(--blue-tint); color:var(--blue); padding:.08em .35em; border-radius:3px; font-size:.85em;}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  width:min(var(--wrap), 100% - 2.4rem); margin:clamp(2.4rem,5vw,3rem) auto 0;
  padding:1.6rem 0 3rem; border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:.9rem; justify-content:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.foot-mark{color:var(--red); font-size:.95rem; letter-spacing:.04em;}

/* ============================================================
   A11Y / RESPONSIVE / MOTION
   ============================================================ */
a:focus-visible, .card:focus-visible, .theme-btn:focus-visible{
  outline:2.5px solid var(--blue); outline-offset:3px; border-radius:3px;
}

@media (max-width:520px){
  .brand-name{display:none;}
  .nav-link{font-size:.7rem;}
  .nav{gap:.6rem;}
  .nav-right{gap:.8rem;}
}
@media (max-width:360px){
  .nav{flex-wrap:wrap; row-gap:.45rem;}
}
@media (max-width:620px){
  .card{grid-template-columns:1fr; gap:.7rem;}
  .card-img{aspect-ratio:16/9;}
  .postnav{grid-template-columns:1fr; gap:1.4rem;}
  .pn--next{text-align:left; align-items:flex-start;}
}
@media (pointer:coarse){
  .theme-btn{width:36px; height:32px;}
  .nav-link{padding-top:.5rem; padding-bottom:.5rem;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}