/* ============================================================
   elizabethlauranelson.com — mockup styles
   Constraint: everything here must be reproducible in
   Squarespace 7.1 via Site Styles + a small Custom CSS panel.
   Palette and fonts are the two "Design decisions to lock".
   ============================================================ */

:root {
  /* Palette: warm cream / near-black ink / dark gold accent
     (edit interactively at /design.html — exports theme JSON) */
  --cream: #f8f2dc;        /* buttery cream (from Elizabeth's sample) */
  --ink: #211d1a;
  --accent: #ab8526;       /* dark gold */
  --accent-deep: #6f5d20;  /* deep bronze-gold for big headlines */
  --tint: #efe6c9;         /* soft warm tint for the newsletter block */
  --muted: #71675e;
  --rule: #e2d8b8;
  --card: #fdfaef;         /* card background */

  /* Bricolage Grotesque: a sans with Fraunces-like weight contrast + soft curves */
  --headline: "Bricolage Grotesque", "Avenir Next", -apple-system, sans-serif;
  --body: "Work Sans", -apple-system, Helvetica, sans-serif;

  /* Type + shape hooks (tweakable on /design.html) */
  --h1-size-max: 2.8rem;
  --h1-weight: 700;
  --h2-weight: 600;
  --card-title-weight: 600;
  --kicker-tracking: 0.18em;
  --btn-radius: 2px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* screen-reader-only text (SEO/a11y headings that the design doesn't show) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing — without it the width/height attributes
   (there for layout stability) freeze images at full pixel height. */
img { max-width: 100%; height: auto; display: block; }

/* links: quiet by default, gold underline only on hover */
a { color: var(--ink); text-decoration: none; }
a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.wrap { max-width: 660px; margin: 0 auto; padding: 0 1.25rem; }
.wrap-wide { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Nav (Belle Burden structure: links left · name center · socials right) ---------- */
header.site-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0 0.9rem;
}
.nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 1.25rem;
  display: flex; flex-direction: column; gap: 0.6rem; align-items: center;
}
.nav-name {
  font-family: var(--headline);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links, .nav-social { display: flex; gap: 1.4rem; align-items: center; }
.nav-links a, .nav-social a {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--muted);
}
.nav-links a:hover, .nav-links a[aria-current], .nav-social a:hover { color: var(--accent); }
.nav-row {
  display: flex; width: 100%; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 0.5rem 1.1rem;
}
.nav-links, .nav-social { flex-wrap: wrap; justify-content: center; }
.nav-social { gap: 1rem; }
.nav-social a { display: block; line-height: 0; }
.nav-social svg { width: 19px; height: 19px; }

@media (min-width: 720px) {
  .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .nav-links { justify-self: start; }
  .nav-name { justify-self: center; grid-column: 2; grid-row: 1; }
  .nav-social { justify-self: end; grid-column: 3; grid-row: 1; }
  .nav-links { grid-column: 1; grid-row: 1; }
  .nav-row { display: contents; }
}

/* ---------- Hero (Home): text left, portrait photo right ---------- */
.hero { padding: 3.5rem 0; }
.hero .wrap-wide { max-width: 1100px; }
.hero-grid { display: grid; gap: 1.9rem; align-items: center; }
/* mobile: photo first, copy underneath (desktop overrides below) */
.hero-copy { order: 2; }
.hero-photo { order: 1; }
.hero h1 {
  font-family: var(--headline);
  font-weight: var(--h1-weight);
  /* sized so "Elizabeth Laura Nelson" holds one line at every width */
  font-size: clamp(1.5rem, 3.9vw, var(--h1-size-max));
  line-height: 1.04;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--accent-deep);
  margin-bottom: 0.8rem;
}
.hero .identity {
  font-family: var(--headline);
  font-weight: 500;
  font-size: clamp(1.1rem, 3.4vw, 1.35rem);
  line-height: 1.4;
  color: var(--accent);
}
.hero-copy .blurb { margin-top: 0.8rem; max-width: 30rem; }

/* Hero bio: name runs inline into the bio at display size */
.hero-bio {
  font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.hero-bio .bio-name {
  font-family: var(--headline);
  font-weight: 500;
  font-size: 1.35em;
  letter-spacing: -0.01em;
}
/* attribution line: larger and thinner than the quote */
.hero-bio .bio-attrib {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--headline);
  font-weight: 300;
  font-size: 1.7em;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.hero-photo img { border-radius: 2px; width: 100%; }
.hero-photo figcaption {
  font-size: 0.72rem; color: var(--muted); margin-top: 0.5rem; letter-spacing: 0.05em;
}
/* photo-credit links: quiet by default, underline on hover */
figcaption a { color: inherit; text-decoration: none; }
figcaption a:hover { text-decoration: underline; text-decoration-color: var(--accent); color: var(--accent); }
@media (min-width: 720px) {
  .hero-grid { grid-template-columns: 10fr 9fr; gap: 3rem; }
  .hero-copy { order: 1; }
  .hero-photo { order: 2; }
  /* larger image / taller hero */
  .hero-photo img { height: clamp(460px, 64vh, 680px); object-fit: cover; }
}

/* ---------- Media card (image beside body) ---------- */
.ml-card.media-card { padding: 0; overflow: hidden; }
.ml-card.media-card .card-art img { aspect-ratio: 16 / 9; }
@media (min-width: 720px) {
  .ml-card.media-card:has(.card-art) { display: grid; grid-template-columns: 2fr 3fr; align-items: stretch; }
  .ml-card.media-card .card-art img { aspect-ratio: auto; height: 100%; position: absolute; inset: 0; object-fit: cover; }
  .ml-card.media-card .card-art { min-height: 240px; }
}

/* ---------- Substack block ---------- */
.sub-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 720px) { .sub-grid { grid-template-columns: 6fr 5fr; gap: 3rem; } }
.sub-post { border: 1px solid var(--rule); background: var(--card); border-radius: 2px; overflow: hidden; }
.sub-post .card-body { padding: 1.2rem 1.4rem 1.3rem; }
.sub-post img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

/* ---------- Section header row with "see all" link ---------- */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.see-all {
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap;
}
.see-all:hover { color: var(--ink); }

/* ---------- Section basics ---------- */
section { padding: 2.5rem 0; }
.kicker {
  font-size: 0.78rem; letter-spacing: var(--kicker-tracking); text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 1.4rem;
}
h2 {
  font-family: var(--headline); font-weight: var(--h2-weight);
  font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.15; margin-bottom: 1.2rem;
}
.rule-top { border-top: 1px solid var(--rule); }

/* ---------- Modern Love feature cards ---------- */
.ml-cards { display: grid; gap: 1.25rem; }
.ml-card {
  border: 1px solid var(--rule); background: var(--card);
  padding: 1.6rem 1.5rem 1.5rem; border-radius: 2px;
}
.ml-card:has(.card-art) { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ml-card .card-body { padding: 1.4rem 1.5rem 1.5rem; }
.card-art { margin: 0; position: relative; }
.card-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.card-art figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 0.62rem; letter-spacing: 0.09em; color: rgba(250, 246, 239, 0.92);
  padding: 1.6rem 0.9rem 0.5rem; text-align: right;
  background: linear-gradient(to bottom, rgba(33, 29, 26, 0) 0%, rgba(33, 29, 26, 0.55) 100%);
}
.card-quote {
  margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule);
  font-style: italic; color: var(--muted); font-size: 0.95rem; line-height: 1.55;
}
.ml-card .outlet {
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.6rem;
}
.ml-card h3 {
  font-family: var(--headline); font-weight: var(--card-title-weight);
  font-size: 1.45rem; line-height: 1.2; margin-bottom: 0.9rem;
}
.ml-card h3 a { text-decoration: none; }
.ml-card h3 a:hover { color: var(--accent); }
.read-link {
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; text-decoration: none; color: var(--accent);
}
@media (min-width: 720px) { .ml-cards { grid-template-columns: 1fr 1fr; } }

/* ---------- Favorites list ---------- */
.fav-list { list-style: none; }
.fav-list li { padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
.fav-list li:first-child { border-top: 1px solid var(--rule); }
.fav-list li:has(.fav-thumb) {
  display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; align-items: center;
}
.fav-thumb {
  width: 96px; height: 72px; object-fit: cover;
  border-radius: 2px; border: 1px solid var(--rule); background: var(--card);
}
.fav-title { font-family: var(--headline); font-weight: 500; font-size: 1.15rem; line-height: 1.3; }
.fav-title a { text-decoration: none; }
.fav-title a:hover { color: var(--accent); }
.fav-meta { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }

/* ---------- Newsletter block ---------- */
.newsletter { background: var(--tint); padding: 3rem 0; margin-top: 1rem; }
.newsletter h2 { margin-bottom: 0.6rem; }
.newsletter p { max-width: 34rem; margin-bottom: 1.4rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.btn {
  display: inline-block; padding: 0.8rem 1.5rem; border-radius: var(--btn-radius);
  font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: var(--cream); }
.btn-primary:hover { background: var(--ink); color: var(--cream); }
.btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Credit wall ---------- */
.credit-wall { text-align: center; padding: 3rem 0 3.25rem; }
.credit-wall .kicker { margin-bottom: 1.6rem; }
.credit-nyt {
  font-family: var(--headline); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2rem);
  margin-bottom: 0.9rem;
}
.credit-names {
  font-family: var(--headline); font-weight: 500; font-size: 1.02rem;
  color: var(--muted); line-height: 2;
}
.credit-names span { white-space: nowrap; }
.credit-names span::after { content: "  ·  "; font-style: normal; }
.credit-names span:last-child::after { content: ""; }

/* ---------- Writing page ---------- */
.page-title { padding: 2.75rem 0 0.5rem; }
.page-title h1 {
  font-family: var(--headline); font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1.08; margin-bottom: 0.8rem;
  color: var(--accent-deep);
}
.page-title .lede { color: var(--muted); max-width: 36rem; }
.group-label {
  font-family: var(--headline); font-weight: 600;
  font-size: 1.25rem; color: var(--accent); margin: 2.2rem 0 0.4rem;
}

/* ---------- About page ---------- */
.about-grid { display: grid; gap: 2rem; padding: 2.5rem 0; }
.about-photo img { border-radius: 2px; }
.about-photo figcaption { font-size: 0.72rem; color: var(--muted); margin-top: 0.5rem; letter-spacing: 0.05em; }
.about-copy p { margin-bottom: 1.1rem; }
.about-copy .heard-on { margin-top: 2rem; }
@media (min-width: 720px) { .about-grid { grid-template-columns: 4fr 7fr; gap: 3rem; align-items: start; } }

/* ---------- Footer ---------- */
footer.site-footer {
  border-top: 1px solid var(--rule); padding: 2.5rem 0 3rem; margin-top: 2rem;
  text-align: center; font-size: 0.9rem; color: var(--muted);
}
footer .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.2rem; }
footer a { color: var(--muted); }
footer .copyright { font-size: 0.8rem; }

/* ---------- Placeholder copy (pending Elizabeth) — quiet, no chrome ---------- */
.placeholder { color: var(--muted); font-style: italic; }