/* Gabriela Daniels — gabrieladanielsauthor.com
   Palette drawn from the objects: sun-bleached linen, faded navy ribbon, aged brass. */

:root{
  --paper:#E9E7DF;
  --paper-deep:#DEDBD0;
  --tag:#D6D1C2;
  --ink:#1B2A36;
  --ink-soft:#4A5966;
  --rule:#C6C1B2;

  --accent:#A07835;          /* aged brass — default / Whisperwillow */
  --accent-ink:#7A5A26;

  --measure:34rem;
  --pad:clamp(1.25rem,5vw,2.5rem);

  --display:"Fraunces",Georgia,serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;
}

body[data-world="cendara"]{ --accent:#8C2F3B; --accent-ink:#6E232D; }
body[data-world="sanamaro"]{ --accent:#66795F; --accent-ink:#4C5C47; }

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  line-height:1.65;
  font-variant-numeric:oldstyle-nums;
}

/* faint linen tooth so the ground reads as paper, not screen */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,rgba(27,42,54,.022) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(27,42,54,.022) 0 1px,transparent 1px 3px);
}
main,header,footer{ position:relative; z-index:1; }

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.08; margin:0; font-variation-settings:"SOFT" 6,"WONK" 1; }

a{ color:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

.wrap{ width:min(68rem,100% - 2*var(--pad)); margin-inline:auto; }
.narrow{ max-width:var(--measure); }

/* ── the signature: a thrift-shop price tag ───────────────── */
.tag{
  position:relative;
  display:inline-block;
  background:var(--tag);
  padding:.45rem 1rem .45rem 2.1rem;
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);
}
.tag::before{
  content:"";
  position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(27,42,54,.18);
}

/* ── header ───────────────────────────────────────────────── */
.site-head{ border-bottom:1px solid var(--rule); }
.site-head .wrap{
  display:flex; flex-wrap:wrap; gap:.75rem 1.75rem;
  align-items:baseline; padding-block:1.35rem;
}
.wordmark{
  font-family:var(--display); font-size:1.2rem; font-weight:600;
  letter-spacing:.01em; text-decoration:none; margin-right:auto;
}
.site-nav{ display:flex; flex-wrap:wrap; gap:1.25rem; }
.site-nav a{
  font-size:.78rem; letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); }

/* ── hero ─────────────────────────────────────────────────── */
.hero{ padding-block:clamp(3.5rem,11vw,7rem) clamp(2.5rem,7vw,4.5rem); }
.hero h1{
  font-size:clamp(2.35rem,7.2vw,4.6rem);
  letter-spacing:-.018em; max-width:16ch;
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero p{
  max-width:var(--measure); margin:1.6rem 0 0;
  font-size:clamp(1.05rem,1rem + .4vw,1.2rem); color:var(--ink-soft);
}
.hero .tag{ margin-bottom:1.6rem; }

/* ── generic sections ─────────────────────────────────────── */
.band{ padding-block:clamp(2.75rem,7vw,4.5rem); border-top:1px solid var(--rule); }
.band--sink{ background:var(--paper-deep); }
.band h2{ font-size:clamp(1.55rem,3.4vw,2.15rem); }
.eyebrow{
  font-size:.7rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 .9rem;
}
.lede{ font-size:1.1rem; max-width:var(--measure); }

/* ── the shelf: three worlds ──────────────────────────────── */
.shelf{
  list-style:none; margin:2.25rem 0 0; padding:0;
  display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.shelf > li{ background:var(--paper); }
.shelf a{
  display:flex; flex-direction:column; gap:.85rem; height:100%;
  padding:1.85rem 1.6rem 2rem; text-decoration:none;
  transition:background .18s ease;
}
.shelf a:hover{ background:var(--paper-deep); }
.shelf h3{ font-size:1.45rem; }
.shelf .place{ font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); }
.shelf p{ margin:0; color:var(--ink-soft); font-size:.95rem; }
.shelf .more{ margin-top:auto; padding-top:.9rem; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }

/* ── books as tags ────────────────────────────────────────── */
.books{ list-style:none; margin:2.25rem 0 0; padding:0; display:grid; gap:1.75rem; }
.book{
  display:grid; gap:.4rem 1.75rem;
  grid-template-columns:auto 1fr;
  padding-top:1.75rem; border-top:1px solid var(--rule);
}
.book:first-child{ border-top:0; padding-top:0; }
.book .num{
  font-family:var(--display); font-size:2.4rem; line-height:1;
  color:var(--rule); grid-row:span 3;
}
.book h3{ font-size:1.4rem; }
.book .sub{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.book p{ margin:.5rem 0 0; max-width:var(--measure); color:var(--ink-soft); }

/* ── signup form ──────────────────────────────────────────── */
.signup{
  margin-top:2rem; padding:1.9rem;
  background:var(--paper); border:1px solid var(--rule);
  max-width:30rem;
}
.band--sink .signup{ background:var(--paper); }
.field{ display:block; margin-bottom:1.05rem; }
.field > span{
  display:block; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.4rem;
}
.field input{
  width:100%; padding:.7rem .8rem;
  border:1px solid var(--rule); border-radius:0;
  background:#fff; color:var(--ink);
  font-family:var(--body); font-size:1rem;
}
.btn{
  display:inline-block; width:100%;
  padding:.85rem 1.4rem; border:0; border-radius:0; cursor:pointer;
  background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase;
  text-align:center; text-decoration:none;
  transition:background .18s ease;
}
.btn:hover{ background:var(--accent-ink); }
.btn--inline{ width:auto; }
.fineprint{ margin:.9rem 0 0; font-size:.8rem; color:var(--ink-soft); }

/* ── prose ────────────────────────────────────────────────── */
.prose{ max-width:var(--measure); }
.prose p{ margin:0 0 1.25rem; }
.prose p:first-of-type{ font-size:1.15rem; }
.prose strong{ font-weight:700; }
.signoff{ font-family:var(--display); font-size:1.25rem; margin-top:2rem; }

/* ── footer ───────────────────────────────────────────────── */
.site-foot{ border-top:1px solid var(--rule); padding-block:2.75rem 3.5rem; margin-top:1px; }
.site-foot .cols{ display:flex; flex-wrap:wrap; gap:2rem 3.5rem; justify-content:space-between; }
.site-foot h2{ font-size:1.35rem; max-width:20ch; }
.site-foot p{ color:var(--ink-soft); max-width:32ch; font-size:.95rem; }
.site-foot nav{ display:flex; flex-direction:column; gap:.55rem; }
.site-foot nav a{ font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; }
.site-foot nav a:hover{ color:var(--ink); }
.legal{ margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--rule); font-size:.78rem; color:var(--ink-soft); }

/* ── motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .rise{ animation:rise .7s cubic-bezier(.2,.7,.3,1) both; }
  .rise:nth-child(2){ animation-delay:.07s; }
  .rise:nth-child(3){ animation-delay:.14s; }
  @keyframes rise{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }
}

@media (max-width:34rem){
  .book{ grid-template-columns:1fr; }
  .book .num{ grid-row:auto; font-size:1.6rem; }
}

/* ── archive: index + post ────────────────────────────────── */
.archive-list{ list-style:none; margin:2.25rem 0 0; padding:0; }
.archive-list > li{ border-top:1px solid var(--rule); }
.archive-list > li:last-child{ border-bottom:1px solid var(--rule); }
.archive-list a{
  display:grid; gap:.15rem 1.75rem; align-items:baseline;
  grid-template-columns:7.5rem 1fr;
  padding:1.35rem .25rem; text-decoration:none;
  transition:background .18s ease;
}
.archive-list a:hover{ background:var(--paper-deep); }
.archive-list .when{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap;
}
.archive-list h3{ font-size:1.3rem; }
.archive-list p{ margin:.3rem 0 0; grid-column:2; color:var(--ink-soft); font-size:.95rem; }

/* the story itself */
.story{ max-width:36rem; margin-inline:auto; }
.story .meta{
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 1rem;
}
.story h1{ font-size:clamp(1.9rem,5vw,2.9rem); letter-spacing:-.015em; }
.story .standfirst{ margin:1.35rem 0 2.5rem; font-size:1.1rem; color:var(--ink-soft); }
.story-body{ font-size:1.075rem; line-height:1.72; }
.story-body p{ margin:0 0 1.3rem; }
.story-body p:first-of-type::first-letter{
  font-family:var(--display); font-size:3.1rem; line-height:.82;
  float:left; padding:.18rem .5rem 0 0; color:var(--accent-ink);
}
.story-body em{ font-style:italic; }

.story-end{
  margin:2.75rem 0 0; padding-top:1.5rem; border-top:1px solid var(--rule);
  font-size:.9rem; color:var(--ink-soft);
}
.pager{ display:flex; justify-content:space-between; gap:1.5rem; margin-top:2rem; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.pager a{ text-decoration:none; color:var(--accent-ink); }
.pager span{ color:var(--rule); }

/* inline signup used under every post */
.inline-join{
  margin:3rem auto 0; max-width:32rem; padding:1.9rem;
  background:var(--paper-deep); border:1px solid var(--rule);
}
.inline-join h2{ font-size:1.3rem; }
.inline-join p{ color:var(--ink-soft); margin:.7rem 0 1.25rem; font-size:.95rem; }