/* ===========================================================
   Charlie & Luna — Bedside Almanac
   Design system + components
   =========================================================== */

:root{
  /* color */
  --paper:#f3ede1;
  --paper-2:#ebe3d2;
  --ink:#1a1612;
  --ink-2:#3a322a;
  --mute:#7d6f5e;
  --rule:#cdc1a8;
  --accent:#b25a26;
  --accent-2:#7a3e1a;
  --good:#4a6b3a;
  --bad:#8a2a1a;

  /* type */
  --serif:"Newsreader","Source Serif 4","Times New Roman",serif;
  --body:"Source Serif 4","Newsreader",Georgia,serif;
  --sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  /* scale */
  --t-12:12px; --t-14:14px; --t-17:17px; --t-22:22px;
  --t-32:32px; --t-56:56px; --t-88:88px;

  /* space */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px;
  --s-24:24px; --s-32:32px; --s-48:48px; --s-64:64px; --s-96:96px;

  --measure: 680px;
  --gutter: 56px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#16130f;
    --paper-2:#1f1a14;
    --ink:#f3ede1;
    --ink-2:#d8cdb8;
    --mute:#9a8c76;
    --rule:#3a322a;
    --accent:#d97a45;
    --accent-2:#f0a672;
  }
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-17);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block }
a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--rule) }
a:hover{ text-decoration-color:var(--accent); color:var(--accent-2) }

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

/* ---------- layout ---------- */
.container{ max-width:1180px; margin:0 auto; padding:0 var(--s-32) }
@media (max-width:760px){ .container{ padding:0 var(--s-24) } }

.row{ display:flex; gap:var(--s-24); align-items:center }
.between{ justify-content:space-between }

/* ---------- typography utilities ---------- */
.mono{ font-family:var(--mono); font-size:var(--t-12); letter-spacing:0.06em; text-transform:uppercase }
.serif{ font-family:var(--serif) }
.italic{ font-style:italic }
.dek{ font-family:var(--serif); font-style:italic; color:var(--ink-2); font-size:var(--t-22); line-height:1.35; letter-spacing:-0.005em }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; letter-spacing:-0.015em; margin:0 }

/* ---------- masthead ---------- */
.masthead{
  border-bottom:1px solid var(--ink);
  padding:var(--s-24) 0 var(--s-16);
}
.mast-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:var(--s-24);
}
.mast-left{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute) }
.mast-mark{
  font-family:var(--serif);
  font-size:40px;
  line-height:0.9;
  letter-spacing:-0.02em;
  text-align:center;
  text-decoration:none;
  color:var(--ink);
}
.mast-mark em{ font-style:italic; color:var(--accent-2) }
.mast-nav{ display:flex; gap:var(--s-24); justify-content:flex-end; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase }
.mast-nav a{ text-decoration:none; color:var(--ink-2) }
.mast-nav a:hover{ color:var(--accent) }
@media (max-width:760px){
  .mast-row{ grid-template-columns:1fr; text-align:center }
  .mast-left,.mast-nav{ justify-content:center; display:flex }
}

.disclosure{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--mute);
  text-align:center;
  padding:var(--s-12) 0;
  border-bottom:1px solid var(--rule);
}
.disclosure a{ color:var(--accent-2) }

/* ---------- chip rail ---------- */
.chips{
  display:flex; gap:var(--s-8); flex-wrap:wrap;
  padding:var(--s-24) 0;
  border-bottom:1px solid var(--rule);
}
.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-2);
  padding:6px 12px; border:1px solid var(--rule);
  border-radius:99px;
  text-decoration:none;
  background:transparent;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.chip:hover{ border-color:var(--ink); color:var(--ink) }
.chip[aria-pressed="true"]{
  border-color:var(--ink); background:var(--ink); color:var(--paper);
}

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-24);
  padding:var(--s-64) 0 var(--s-48);
  border-bottom:1px solid var(--rule);
}
.hero h1{
  font-size:clamp(48px, 8vw, 96px);
  line-height:0.95;
  max-width:18ch;
}
.hero h1 em{ font-style:italic; color:var(--accent-2) }
.hero .dek{ max-width:42ch }
.hero .meta{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); display:flex; gap:var(--s-24); flex-wrap:wrap }
.hero .meta b{ color:var(--ink); font-weight:500 }

/* ---------- section heading ---------- */
.section-head{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-16); align-items:baseline;
  padding:var(--s-48) 0 var(--s-24);
}
.section-head .kicker{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent) }
.section-head h2{ font-size:var(--t-32); line-height:1; }
.section-head h2 em{ font-style:italic; color:var(--accent-2) }
.section-head .right{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--mute) }
@media (max-width:760px){ .section-head{ grid-template-columns:1fr; gap:var(--s-8) } .section-head .right{ display:none } }

/* ---------- featured card ---------- */
.featured{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--s-48);
  align-items:center;
  padding:var(--s-32) 0 var(--s-48);
  border-bottom:1px solid var(--rule);
}
.featured .cover{
  aspect-ratio: 4/5;
  background:var(--paper-2);
  border:1px solid var(--rule);
  position:relative;
  overflow:hidden;
}
.featured .cover .placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute);
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(26,22,18,0.04) 12px 13px);
}
.featured .body h3{
  font-size:clamp(34px, 4.5vw, 56px);
  line-height:1.0;
  letter-spacing:-0.018em;
  margin-bottom:var(--s-16);
}
.featured .body h3 a{ text-decoration:none; color:var(--ink) }
.featured .body h3 a:hover{ color:var(--accent-2) }
.featured .body h3 em{ font-style:italic; color:var(--accent-2) }
.featured .body .dek{ margin-bottom:var(--s-24) }
@media (max-width:900px){ .featured{ grid-template-columns:1fr } }

/* ---------- pet byline ---------- */
.byline{
  display:flex; align-items:center; gap:var(--s-12);
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--mute);
  padding:var(--s-12) 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s-24);
}
.byline .portraits{ display:flex; }
.byline .portrait{
  width:36px; height:36px; border-radius:50%;
  background:var(--paper-2); border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink-2);
  margin-right:-8px;
  overflow:hidden;
  background-size:cover; background-position:center;
}
.byline .portrait.charlie{ background-image:url("photos/charlie-portrait.svg"); color:transparent }
.byline .portrait.luna{ background-image:url("photos/luna-portrait.svg"); color:transparent }
/* prose context (post page) uses ../assets relative to page */
.prose .byline .portrait.charlie{ background-image:url("../assets/photos/charlie-portrait.svg") }
.prose .byline .portrait.luna{ background-image:url("../assets/photos/luna-portrait.svg") }
.cover img.cover-img{ width:100%; height:100%; object-fit:cover; display:block }
.post-hero{
  margin:var(--s-24) 0 var(--s-32);
  aspect-ratio: 8/3;
  background:var(--paper-2);
  border:1px solid var(--rule);
  overflow:hidden;
}
.post-hero img{ width:100%; height:100%; object-fit:cover; display:block }
.byline .portrait:last-child{ margin-right:0 }
.byline b{ color:var(--ink); font-weight:500 }
.byline .sep{ color:var(--rule) }

/* ---------- grid of cards ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--s-48);
  padding:var(--s-24) 0 var(--s-48);
}
@media (max-width:760px){ .grid{ grid-template-columns:1fr; gap:var(--s-32) } }

.card{ display:flex; flex-direction:column; gap:var(--s-12) }
.card .cover{
  aspect-ratio: 3/2;
  background:var(--paper-2);
  border:1px solid var(--rule);
  position:relative; overflow:hidden;
  margin-bottom:var(--s-8);
}
.card .cover .placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute);
  background:repeating-linear-gradient(45deg, transparent 0 12px, rgba(26,22,18,0.04) 12px 13px);
}
.card h3{
  font-size:28px; line-height:1.05; letter-spacing:-0.012em;
}
.card h3 a{ text-decoration:none; color:var(--ink) }
.card h3 a:hover{ color:var(--accent-2) }
.card h3 em{ font-style:italic; color:var(--accent-2) }
.card .dek{ font-size:var(--t-17); color:var(--ink-2); font-family:var(--body); font-style:normal }
.card .meta{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--mute); display:flex; gap:var(--s-16); flex-wrap:wrap }
.card .meta b{ color:var(--ink); font-weight:500 }
.card .tags{ display:flex; gap:var(--s-8); flex-wrap:wrap; margin-top:var(--s-4) }
.card .tag{
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:99px; padding:3px 9px;
  text-decoration:none;
}

/* ---------- pull quote ---------- */
.pull{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(28px,4vw,44px); line-height:1.1; letter-spacing:-0.01em;
  max-width:24ch;
  padding:var(--s-48) 0;
  position:relative;
}
.pull::before{ content:"\201C"; position:absolute; left:-0.4em; top:-0.1em; color:var(--accent); font-size:1.5em; line-height:1 }

/* ---------- newsletter band ---------- */
.newsletter{
  background:var(--ink);
  color:var(--paper);
  margin:var(--s-48) calc(-1 * var(--s-32));
  padding:var(--s-64) var(--s-32);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.newsletter .inner{
  max-width:1180px; margin:0 auto; padding:0 var(--s-32);
  display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s-64); align-items:center;
}
@media (max-width:900px){ .newsletter .inner{ grid-template-columns:1fr; padding:0 var(--s-24) } .newsletter{ margin:var(--s-48) calc(-1 * var(--s-24)); padding:var(--s-48) var(--s-24) } }
.newsletter h2{ font-size:clamp(36px,5vw,56px); line-height:1; color:var(--paper); margin-bottom:var(--s-16) }
.newsletter h2 em{ font-style:italic; color:var(--accent-2) }
.newsletter .lede{ font-family:var(--serif); font-style:italic; font-size:var(--t-22); color:var(--paper-2); margin-bottom:var(--s-24); max-width:36ch }
.newsletter form{ display:flex; gap:var(--s-8); flex-wrap:wrap; margin-bottom:var(--s-12) }
.newsletter input[type=email]{
  flex:1; min-width:220px;
  background:transparent; color:var(--paper);
  border:1px solid var(--paper); border-radius:0;
  padding:12px 14px; font-family:var(--mono); font-size:13px;
}
.newsletter input[type=email]::placeholder{ color:var(--mute) }
.newsletter button{
  background:var(--accent); color:var(--paper);
  border:1px solid var(--accent);
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  padding:12px 18px; cursor:pointer; border-radius:0;
}
.newsletter button:hover{ background:var(--accent-2); border-color:var(--accent-2) }
.newsletter .promise{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--mute) }
.newsletter .guide{
  border:1px solid var(--mute);
  padding:var(--s-24);
  background:rgba(243,237,225,0.04);
}
.newsletter .guide .gk{ font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-2); margin-bottom:var(--s-8) }
.newsletter .guide h3{ font-family:var(--serif); font-size:24px; color:var(--paper); margin-bottom:var(--s-12) }
.newsletter .guide ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--paper-2) }
.newsletter .guide ul li::before{ content:"\2192\00a0"; color:var(--accent-2) }

/* ---------- up next ---------- */
.upnext{ padding:var(--s-24) 0 var(--s-48); }
.upnext-list{ display:flex; flex-direction:column; }
.upnext-item{
  display:grid; grid-template-columns:60px 1fr auto; gap:var(--s-24); align-items:baseline;
  padding:var(--s-16) 0; border-top:1px solid var(--rule);
}
.upnext-item:last-child{ border-bottom:1px solid var(--rule) }
.upnext-item .n{ font-family:var(--mono); font-size:11px; color:var(--mute); letter-spacing:0.08em }
.upnext-item h4{ font-family:var(--serif); font-size:22px; line-height:1.2; font-weight:400 }
.upnext-item h4 em{ font-style:italic; color:var(--accent-2) }
.upnext-item .when{ font-family:var(--mono); font-size:10px; color:var(--mute); letter-spacing:0.08em; text-transform:uppercase }

/* ---------- footer ---------- */
.colophon{
  margin-top:var(--s-48);
  padding:var(--s-32) 0 var(--s-48);
  border-top:1px solid var(--ink);
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--s-24);
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--mute);
}
.colophon b{ color:var(--ink); font-weight:500 }
.colophon a{ text-decoration:none; color:var(--ink-2) }
.colophon a:hover{ color:var(--accent) }
.colophon .c{ display:flex; flex-direction:column; gap:8px }
.colophon .r{ text-align:right }
@media (max-width:760px){ .colophon{ grid-template-columns:1fr } .colophon .r{ text-align:left } }

/* ---------- prose (post body) ---------- */
.prose{ max-width:var(--measure); margin:0 auto; padding:var(--s-32) 0; font-size:18px; line-height:1.65 }
.prose > * + *{ margin-top:var(--s-16) }
.prose h2{ font-family:var(--serif); font-size:32px; line-height:1.1; margin-top:var(--s-48); letter-spacing:-0.012em }
.prose h2 em{ font-style:italic; color:var(--accent-2) }
.prose h3{ font-family:var(--serif); font-size:24px; line-height:1.2; margin-top:var(--s-32) }
.prose blockquote{
  border-left:2px solid var(--accent);
  padding:var(--s-8) var(--s-24);
  font-style:italic; color:var(--ink-2);
  font-family:var(--serif); font-size:22px; line-height:1.4;
  margin:var(--s-24) 0;
}
.prose ul, .prose ol{ padding-left:1.25em }
.prose li + li{ margin-top:var(--s-8) }
.prose code{ font-family:var(--mono); font-size:14px; background:var(--paper-2); padding:1px 6px; border-radius:2px }
.prose hr{ border:0; height:1px; background:var(--rule); margin:var(--s-32) 0 }
.prose .product{
  border:1px solid var(--ink);
  padding:var(--s-24);
  margin:var(--s-24) 0;
  display:grid; grid-template-columns:80px 1fr auto; gap:var(--s-24); align-items:start;
}
.prose .product .rank{ font-family:var(--serif); font-size:48px; line-height:0.9; color:var(--accent) }
.prose .product h4{ font-family:var(--serif); font-size:22px; line-height:1.2; font-weight:400; margin-bottom:6px }
.prose .product p{ margin:0; font-size:15px; color:var(--ink-2) }
.prose .product .verdict{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--good); margin-top:8px; display:inline-block; border:1px solid var(--good); padding:3px 8px }
.prose .product .verdict.bad{ color:var(--bad); border-color:var(--bad) }
.prose .product a.buy{
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--paper); background:var(--ink); border:1px solid var(--ink);
  padding:10px 14px; text-decoration:none; white-space:nowrap;
}
.prose .product a.buy:hover{ background:var(--accent); border-color:var(--accent); color:var(--paper) }
@media (max-width:760px){ .prose .product{ grid-template-columns:60px 1fr; } .prose .product a.buy{ grid-column:1/-1; text-align:center } }

/* ---------- print ---------- */
@media print{
  .masthead, .chips, .newsletter, .colophon, .upnext, .mast-nav{ display:none !important }
  body{ background:#fff; color:#000 }
  .prose{ max-width:none }
  a{ color:#000; text-decoration:underline }
  .prose .product a.buy{ display:none }
}

/* ---------- background tex ---------- */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    radial-gradient(rgba(26,22,18,0.04) 1px, transparent 1px),
    radial-gradient(rgba(26,22,18,0.03) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
  opacity:0.6;
}