/* ============================================================
   chrome.css — shared site chrome (nav + footer)
   Lifts the home page (v3) header/footer onto every sub-page so
   the whole site follows the home page. Loads AFTER site.css so
   these rules win over the v1 chrome defaults.
   ============================================================ */

:root{
  --disp: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --accent-deep: var(--chartreuse-deep);
  --gutter: clamp(22px, 5vw, 64px);
  --maxw: 1280px;
}
/* keep the bright chartreuse accent of the home chrome without
   shifting any --accent the sub-page bodies rely on */
.nav, .footer{ --accent: var(--chartreuse); }

/* ============================================================
   PAPER TEXTURE — match the home page
   site.css ships a heavy stack: paper-mottle at 0.9 multiply PLUS a
   second grain layer at 0.5. That muddied the photos (reading as
   "low res") and made the grounds look blotchy. The home page uses a
   single super-subtle texture at 0.55. Match it, drop the grain.
   ============================================================ */
body::before{
  background:url("assets/img/tex/super-subtle.png") center / cover no-repeat;
  background-size:cover;
  opacity:.55;
  mix-blend-mode:multiply;
}
body::after{ display:none; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(250,246,236,0);
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(250,246,236,.9);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--border-hairline);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:16px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.wordmark{
  font-family:"Botch","PavilionRegular",Georgia,serif;
  font-size:26px; line-height:1; letter-spacing:0;
  color:var(--burgundy); text-decoration:none;
}
.wordmark .slash{ color:var(--chartreuse-deep); font-style:normal; font-family:"Botch","PavilionRegular",Georgia,serif; }
.nav-right{ display:flex; align-items:center; gap:30px; }
.nav-links{ display:flex; gap:26px; }
.nav-links a{
  font-family:var(--font-label); font-size:11px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; opacity:.78;
  transition:opacity var(--dur-fast);
}
.nav-links a:hover{ opacity:1; }
.nav-util{
  font-family:var(--font-label); font-size:10.5px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-lt); text-decoration:none;
}
.nav-util:hover{ color:var(--ink); }
.nav-cta{
  font-family:var(--font-label); font-size:11px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  background:var(--burgundy); color:var(--paper)!important; text-decoration:none;
  padding:11px 20px; border-radius:var(--radius-pill);
  transition:background var(--dur-fast);
}
.nav-cta:hover{ background:var(--accent); color:var(--chartreuse-text)!important; }
.nav-burger{ display:none; }

/* ------------------------------------------------------------
   MOBILE NAV — keep the full menu visible (no burger).
   The bar stays fixed at the top; the links wrap onto a second
   row beneath the wordmark so every destination is reachable
   while scrolling. .nav-right is dissolved with display:contents
   so its children become direct flex items of .nav-inner and can
   be ordered across the two rows.
   ------------------------------------------------------------ */
@media(max-width:900px){
  /* links now sit over page content, so give the bar a solid
     ground at all times (not only once scrolled) */
  .nav{
    background:rgba(250,246,236,.95);
    backdrop-filter:blur(16px) saturate(1.1);
    -webkit-backdrop-filter:blur(16px) saturate(1.1);
    border-bottom:1px solid var(--border-hairline);
  }
  .nav-inner{
    flex-wrap:wrap; align-items:center;
    gap:8px 16px; padding-top:12px; padding-bottom:12px;
  }
  .nav-right{ display:contents; }            /* dissolve wrapper */
  .wordmark{ order:1; font-size:23px; }
  .nav-cta{ order:2; margin-left:auto; padding:9px 16px; font-size:10.5px; }
  .nav-links{
    order:3; flex:1 0 100%;                   /* own full-width row */
    display:flex; flex-wrap:wrap; justify-content:flex-start;
    gap:9px 16px; margin-top:2px;
  }
  .nav-links a{ font-size:11.5px; opacity:.92; }
  .nav-util{                                  /* Narissa joins the menu row */
    order:4; display:inline-block;
    font-size:11.5px; opacity:.92; margin-top:2px;
  }
}
@media(max-width:380px){
  .nav-links{ gap:8px 12px; }
  .nav-links a, .nav-util{ font-size:11px; letter-spacing:0.1em; }
}

/* clear the fixed nav on sub-page heroes
   (taller on mobile because the menu wraps to a second row) */
.page-hero{ padding-top: clamp(92px, 10vw, 120px); }
@media(max-width:900px){ .page-hero, .article-hero{ padding-top:148px; } }
[id]{ scroll-margin-top:92px; }
@media(max-width:900px){ [id]{ scroll-margin-top:140px; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--burgundy); color:var(--burgundy-text); padding:84px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(245,240,229,.15); }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; } }
.f-mark{
  font-family:"Botch","PavilionRegular",Georgia,serif;
  font-size:34px; line-height:1; color:var(--linen);
}
.f-mark .slash{ color:var(--chartreuse); font-style:normal; font-family:"Botch","PavilionRegular",Georgia,serif; }
.f-tag{ font-family:var(--disp); font-style:italic; font-size:21px; color:var(--accent); margin:14px 0 16px; }
.f-about{ font-size:13.5px; font-weight:300; color:rgba(245,240,229,.66); max-width:34ch; line-height:1.6; }
.footer-col h4{ font-family:var(--font-label); font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin:0 0 18px; font-weight:500; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin-bottom:11px; }
.footer-col a{ color:rgba(245,240,229,.82); text-decoration:none; font-size:14px; font-weight:300; transition:color var(--dur-fast); }
.footer-col a:hover{ color:var(--accent); }
.footer-base{ padding-top:28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--font-label); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(245,240,229,.5); }

/* ============================================================
   SET CARDS — restore the clean vertical card
   site.css ships a later override (the "bold stacked horizontal
   cards" block) that turns .set-card into a 2-col grid expecting
   .set-head / .set-main wrappers that this site's markup never
   uses, and forces a giant !important .set-name. With the real
   markup (set-num, set-name, set-tag, set-body, set-ladder,
   set-foot as direct children inside a 3-up .wrf) that produces
   clipped, overflowing cards. Restore the simple flex column.
   ============================================================ */
.set-card{
  display:flex; flex-direction:column;
  grid-template-columns:none;
  padding:clamp(22px,1.9vw,30px);
  border:1px solid var(--border-hairline); border-radius:var(--radius-card);
  box-shadow:none;
}
.set-card:hover{ box-shadow:var(--shadow-card); }
/* set-num duplicates the title text on these pages — hide it */
.set-card .set-num{ display:none; }
.set-card .set-name{ font-size:clamp(25px,2vw,33px)!important; line-height:1; margin:0; }
.set-card .set-tag{ margin:8px 0 16px; font-size:17px; }
.set-card .set-body{ margin:0 0 20px; max-width:none; }
.set-card .set-foot{ margin-top:auto; }

/* ============================================================
   JOURNAL ARTICLE — readable prose for the long-form posts
   ============================================================ */
.article-hero{ padding-top:clamp(96px,11vw,128px); padding-bottom:clamp(32px,5vw,56px); }
.article-hero .a-meta{
  font-family:var(--font-label); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--fg-quiet); margin-top:22px;
  display:flex; gap:18px; flex-wrap:wrap; align-items:center;
}
.article-hero .a-meta .dotsep{ width:4px; height:4px; border-radius:50%; background:var(--chartreuse-deep); display:inline-block; }
.article-figure{ margin:clamp(8px,3vw,28px) 0 0; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-pop); }
.article-figure img{ width:100%; height:auto; display:block; }

.article{ max-width:680px; margin:0 auto; }
.article > p{
  font-size:clamp(17px,1.35vw,19px); line-height:1.72; color:var(--ink);
  margin:0 0 1.35em; font-weight:300;
}
.article > p:first-of-type{ font-size:clamp(19px,1.7vw,22px); line-height:1.6; color:var(--ink); }
.article h2{
  font-family:var(--font-display); font-weight:400; letter-spacing:-0.02em;
  font-size:clamp(27px,3vw,38px); line-height:1.06; color:var(--burgundy);
  margin:1.9em 0 0.6em;
}
.article h3{
  font-family:var(--font-label); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--chartreuse-deep); margin:1.8em 0 0.5em;
}
.article strong{ font-weight:600; color:var(--ink); }
.article em{ font-style:italic; }
.article blockquote{
  margin:1.8em 0; padding:4px 0 4px clamp(20px,3vw,32px);
  border-left:2px solid var(--chartreuse);
}
.article blockquote p{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(22px,2.6vw,30px); line-height:1.22; letter-spacing:-0.01em;
  color:var(--burgundy); margin:0;
}
.article hr{ border:0; height:1px; background:var(--border-hairline); margin:2.4em 0; }
.article .a-sign{ font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--chartreuse-deep); margin-top:2.2em; }
.article-foot{ max-width:680px; margin:clamp(28px,4vw,44px) auto 0; padding-top:28px; border-top:1px solid var(--border-hairline); display:flex; gap:14px 26px; flex-wrap:wrap; }

/* ---- work / portfolio meta strip ---- */
.work-meta{
  margin:0; display:grid; grid-template-columns:max-content 1fr;
  gap:10px clamp(18px,3vw,32px); max-width:680px; margin-inline:auto;
}
.work-meta dt{
  font-family:var(--font-label); font-size:10.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-lt); padding-top:3px;
}
.work-meta dd{
  margin:0; font-family:var(--font-body); font-size:clamp(14px,1.2vw,15.5px);
  line-height:1.55; color:var(--ink); font-weight:300;
}
.work-meta dd .tlink{ font-size:inherit; }
@media(max-width:560px){
  .work-meta{ grid-template-columns:1fr; gap:2px; }
  .work-meta dt{ padding-top:12px; }
  .work-meta dt:first-child{ padding-top:0; }
}