/* Shared styles for /journal/ pages. One file so every new article looks the same. */
:root{
  --linen:#FCF9F3; --paper:#FFFDF8; --fog:#D8D6CC; --sage:#8C9A83; --sage-deep:#5E6E57;
  --ink:#33312b; --ink-soft:#6c675c; --ember:#C16B41; --sea:#3D5560; --hairline:rgba(94,110,87,.26);
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:"Jost", system-ui, sans-serif; font-weight:300; background:var(--linen); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.7; font-size:1.06rem; }
a{ color:var(--sea); text-underline-offset:3px; }
a:hover{ color:var(--ember); }
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--sea); outline-offset:3px; border-radius:2px; }

.top{ max-width:680px; margin:0 auto; padding:24px 16px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.top img{ width:64px; height:auto; display:block; }
.top nav a{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); margin-left:18px; }
.top nav a:hover{ color:var(--ember); }

main{ max-width:680px; margin:0 auto; padding:32px 16px 56px; }
.crumbs{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.crumbs a{ color:var(--ink-soft); text-decoration:none; }
.kicker{ font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ember); margin-top:28px; font-weight:400; }
h1{ font-family:"Cormorant Garamond", serif; font-weight:400; font-size:clamp(2.2rem, 7vw, 3.4rem); line-height:1.1; margin-top:10px; }
.dek{ font-family:"Cormorant Garamond", serif; font-style:italic; font-size:1.3rem; line-height:1.45; color:var(--ink-soft); margin-top:14px; }
.meta{ font-size:.78rem; color:var(--ink-soft); margin-top:16px; padding-bottom:22px; border-bottom:1px solid var(--hairline); }
article h2{ font-family:"Cormorant Garamond", serif; font-weight:500; font-size:1.6rem; line-height:1.25; margin-top:40px; }
article p{ margin-top:16px; }
article ul{ margin:16px 0 0 1.2em; }
article li{ margin-top:6px; }
.sources{ margin-top:40px; padding-top:20px; border-top:1px solid var(--hairline); font-size:.86rem; color:var(--ink-soft); }
.sources h2{ font-family:"Jost", sans-serif; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; font-weight:500; margin-top:0; }
.sources li{ margin-top:8px; }
.note{ font-size:.86rem; color:var(--ink-soft); font-style:italic; margin-top:28px; }

.signup{ margin-top:48px; padding:28px 22px; background:var(--paper); border:1px solid var(--hairline); border-radius:4px; text-align:center; }
.signup h2{ font-family:"Cormorant Garamond", serif; font-weight:400; font-size:1.7rem; margin-top:0; }
.signup p{ margin-top:8px; color:var(--ink-soft); }
.field{ display:flex; gap:10px; margin-top:18px; }
.field input{ flex:1; min-width:0; border:1px solid var(--hairline); background:#fff; font:inherit; font-size:1rem; padding:12px; border-radius:3px; color:var(--ink); }
.field button{ flex:0 0 auto; border:0; cursor:pointer; background:var(--sea); color:#F1ECE3; font-family:"Jost",sans-serif;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; padding:0 20px; border-radius:3px; }
.field button:hover{ background:var(--ember); }
.field button:disabled{ opacity:.65; cursor:wait; }
.consent{ display:flex; align-items:flex-start; gap:8px; text-align:left; font-size:.78rem; line-height:1.6; color:var(--ink-soft); margin-top:14px; }
.consent input{ margin-top:5px; accent-color:var(--sea); }
.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
#form-status{ font-size:.84rem; margin-top:12px; }
#form-status:empty{ display:none; }

.list{ list-style:none; margin-top:28px; }
.list li{ padding:22px 0; border-bottom:1px solid var(--hairline); }
.list a{ font-family:"Cormorant Garamond", serif; font-size:1.6rem; line-height:1.25; text-decoration:none; color:var(--ink); }
.list a:hover{ color:var(--ember); }
.list p{ margin-top:6px; color:var(--ink-soft); font-size:.95rem; }

footer.site{ max-width:680px; margin:0 auto; padding:0 16px 40px; font-size:.78rem; color:var(--ink-soft); }
@media (max-width:520px){ .field{ flex-direction:column; } .field button{ padding:14px; } body{ font-size:1rem; } }