/* generated editorial photography */
.post-media,.featured-media,.product-media{position:relative;overflow:hidden}
.post-media img,.featured-media img,.product-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


/* ===== July 2026 refresh: compact editorial headers, featured entry ===== */
.jhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin-bottom:.35rem}
.jhead .section-title{margin:0}
.jcats{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:baseline}
.jcat{position:relative}
.jcat>a{font-family:'Cormorant Garamond',serif;font-size:1.15rem;letter-spacing:.04em;color:#1a1a1a;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.jcat>a:hover{border-bottom-color:#7a2e2e}
.jcat .jsubs{display:none;position:absolute;top:100%;left:0;background:#faf7ee;border:1px solid #e5dfcf;padding:.6rem .9rem;min-width:12.5rem;z-index:5}
.jcat:hover .jsubs,.jcat:focus-within .jsubs{display:block}
.jsubs a{display:block;font-size:.85rem;padding:.15rem 0;color:#4a4a44;text-decoration:none}
.jsubs a:hover{color:#7a2e2e}
.jtag{font-style:italic;color:#8a857a;font-size:.9rem;margin:.2rem 0 1.4rem}
.featured{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;text-decoration:none;color:inherit;border:1px solid #e5dfcf;background:#faf7ee;margin-bottom:2rem}
.featured:hover .featured-title{color:#7a2e2e}
.featured-media{min-height:340px;display:flex;align-items:center;justify-content:center;background:#efe9d9;color:#8a857a;font-style:italic}
.featured-body{padding:2rem 2rem 2rem 0;display:flex;flex-direction:column;justify-content:center;gap:.6rem}
.featured .post-cat{margin:0}
.featured-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;margin:0;transition:color .2s ease}
.featured-excerpt{color:#4a4a44;margin:0;font-size:1rem}
.featured-cta{margin-top:.4rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#7a2e2e}
@media(max-width:760px){.featured{grid-template-columns:1fr}.featured-body{padding:1.2rem}}
.disclaimer-tight{font-style:italic;color:#8a857a;font-size:.85rem;max-width:46rem;margin:.5rem auto 1.6rem;text-align:center;line-height:1.5}
/* MATRIARK :: matriark.io v1 preview
   Tokens per MATRIARK_WEBSITE_SPEC v2 + Cassie's PDF art direction (July 4, 2026)
   Literary serif, bone cream, black keyline, garnet used sparingly. */

:root{
  --surface-1:#F7F5EC;
  --surface-2:#F1EEE2;
  --ink:#161412;
  --ink-muted:#4E4A43;
  --ink-subtle:#7C766B;
  --garnet:#7A2D35;
  --garnet-deep:#5E1F27;
  --hairline:#DDD8C8;
  --keyline:#161412;

  --font-serif:'EB Garamond', Garamond, Georgia, serif;
  --font-display:'Cormorant Garamond','EB Garamond', Georgia, serif;

  --type-display:clamp(3rem, 1.8rem + 5.2vw, 6.8rem);
  --type-h2:clamp(1.8rem, 1.3rem + 2vw, 3.2rem);
  --type-h3:clamp(1.3rem, 1.15rem + 0.8vw, 1.9rem);
  --type-lede:clamp(1.15rem, 1.05rem + 0.4vw, 1.45rem);
  --type-body:1.125rem;
  --type-caption:0.9375rem;
  --type-overline:0.75rem;

  --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px; --s-32:32px;
  --s-48:48px; --s-64:64px; --s-96:96px; --s-128:128px;

  --duration:200ms;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --measure:66ch;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--surface-1);
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:var(--type-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1140px;margin:0 auto;padding:0 var(--s-32)}
@media(max-width:768px){.container{padding:0 var(--s-24)}}
a{color:inherit}

/* ---------- NAV ---------- */
.nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:var(--s-24) 0;gap:var(--s-24);
}
.nav-auth{justify-self:start}
.nav-auth a{
  font-size:var(--type-overline);letter-spacing:0.12em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-muted);
  border:1px solid var(--keyline);padding:10px 16px;
  transition:all var(--duration) var(--ease);
}
.nav-auth a:hover{background:var(--ink);color:var(--surface-1)}
.wordmark{
  justify-self:center;font-family:var(--font-display);
  font-size:1.5rem;font-weight:500;letter-spacing:0.42em;text-indent:0.42em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.nav-links{justify-self:end;display:flex;gap:var(--s-24)}
.nav-links a{
  font-size:var(--type-overline);letter-spacing:0.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-subtle);padding:var(--s-12) 2px;
  transition:color var(--duration) var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]{border-bottom:1px solid var(--garnet)}
a:focus-visible{outline:2px solid var(--garnet);outline-offset:3px}
@media(max-width:900px){
  .nav{grid-template-columns:1fr auto;grid-template-rows:auto auto}
  .nav-auth{display:none}
  .nav-links{grid-column:1/-1;justify-self:center;flex-wrap:wrap;gap:var(--s-16)}
}

/* ---------- HERO (the box) ---------- */
.hero{padding:var(--s-48) 0 var(--s-96)}
.hero-box{
  position:relative;overflow:hidden;
  border:3px solid var(--keyline);
  background:var(--surface-1);
  aspect-ratio:16/9;
  min-height:420px;
}
@media(max-width:768px){.hero-box{aspect-ratio:4/5;min-height:480px}}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* placeholder abstract "film" until Cassie's footage: slow-panning warm light + grain */
.hero-abstract{
  position:absolute;inset:-12%;
  background:
    radial-gradient(58% 42% at 32% 38%, rgba(122,45,53,0.12), transparent 65%),
    radial-gradient(50% 38% at 70% 60%, rgba(94,80,50,0.16), transparent 60%),
    radial-gradient(70% 55% at 55% 30%, rgba(247,243,230,0.9), transparent 70%),
    linear-gradient(160deg,#F3EFE2 0%, #EAE4D0 45%, #E2DAC4 100%);
  animation:pan 36s var(--ease) infinite alternate;
}
@keyframes pan{from{transform:translate3d(-2.5%,-1.5%,0) scale(1.02)}to{transform:translate3d(2.5%,2%,0) scale(1.08)}}
.hero-grain{position:absolute;inset:0;opacity:0.5;mix-blend-mode:multiply;pointer-events:none}
.hero-vignette{position:absolute;inset:0;box-shadow:inset 0 0 140px rgba(22,20,18,0.16);pointer-events:none}

/* definitions overlay: appears, holds, then gives way to the film */
.hero-definitions{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:left;
  padding:var(--s-48);
  background:rgba(247,245,236,0.86);
  animation:defs-cycle 14s var(--ease) infinite;
}
.defs-inner{max-width:560px}
.hero-definitions .word{font-weight:600;font-size:var(--type-h3)}
.hero-definitions .phonetic{font-style:italic;color:var(--ink-muted);font-weight:400}
.hero-definitions .pos{color:var(--ink-subtle);font-style:italic}
.hero-definitions ol{margin:var(--s-8) 0 var(--s-24) 1.4em;color:var(--ink-muted);font-size:var(--type-caption);line-height:1.7}
@keyframes defs-cycle{
  0%{opacity:0}4%{opacity:1}56%{opacity:1}68%{opacity:0}100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-abstract{animation:none}
  .hero-definitions{animation:none;opacity:1}
}

/* ---------- IDENTITY BLOCK ---------- */
.identity{text-align:center;padding:var(--s-64) 0 var(--s-48)}
.identity .name{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--type-h2);letter-spacing:0.3em;text-indent:0.3em;text-transform:uppercase;
}
.identity .phonetic{font-style:italic;color:var(--ink-muted);margin-top:var(--s-8)}
.tagline{
  margin-top:var(--s-24);
  font-size:var(--type-overline);letter-spacing:0.38em;text-indent:0.38em;
  text-transform:uppercase;color:var(--ink);font-weight:600;
}
.mission{
  max-width:var(--measure);margin:var(--s-48) auto 0;text-align:left;
  font-size:var(--type-lede);color:var(--ink-muted);
}
.mission p + p{margin-top:var(--s-24)}
.mission em{color:var(--ink)}

/* ---------- SECTION SCAFFOLD ---------- */
.section{padding:var(--s-96) 0;border-top:1px solid var(--hairline)}
.section-title{
  font-family:var(--font-display);font-weight:500;font-size:var(--type-h2);
  letter-spacing:0.16em;text-transform:uppercase;
}
.overline{
  font-size:var(--type-overline);letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-subtle);margin-bottom:var(--s-16)
}

/* ---------- CATEGORY MENU (journal graphic menu) ---------- */
.cat-menu{display:flex;gap:var(--s-32);flex-wrap:wrap;align-items:baseline;margin:var(--s-32) 0 var(--s-16)}
.cat{position:relative}
.cat > a{
  font-family:var(--font-display);font-size:var(--type-h3);font-weight:500;
  letter-spacing:0.06em;text-decoration:none;color:var(--ink-muted);
  transition:color var(--duration) var(--ease);
  padding:var(--s-8) 0;display:inline-block;
}
.cat > a:hover,.cat.active > a{color:var(--garnet)}
.cat .subs{
  display:none;position:absolute;left:0;top:100%;z-index:10;
  background:var(--surface-1);border:1px solid var(--keyline);
  padding:var(--s-16) var(--s-24);min-width:280px;
  box-shadow:0 14px 40px rgba(22,20,18,0.10);
}
.cat:hover .subs,.cat:focus-within .subs{display:block}
.subs a{
  display:block;text-decoration:none;font-size:var(--type-caption);
  color:var(--ink-muted);padding:6px 0;transition:color var(--duration) var(--ease);
}
.subs a:hover{color:var(--garnet)}

/* ---------- POST GRID ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-32);margin-top:var(--s-48)}
@media(max-width:900px){.post-grid{grid-template-columns:1fr}}
.post-card{text-decoration:none;display:block}
.post-media{
  aspect-ratio:4/3;background:var(--surface-2);border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-subtle);font-style:italic;font-size:var(--type-caption);
  transition:transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.post-card:hover .post-media{transform:translateY(-3px);box-shadow:0 16px 36px rgba(22,20,18,0.10)}
.post-cat{font-size:var(--type-overline);letter-spacing:0.2em;text-transform:uppercase;color:var(--garnet);margin:var(--s-16) 0 var(--s-8)}
.post-title{font-family:var(--font-display);font-size:var(--type-h3);font-weight:500;line-height:1.25}
.post-excerpt{color:var(--ink-muted);font-size:var(--type-caption);margin-top:var(--s-8)}

/* ---------- DISCLAIMER (tasteful) ---------- */
.disclaimer{
  max-width:56ch;margin:var(--s-32) auto;text-align:center;
  font-style:italic;color:var(--ink-subtle);font-size:var(--type-caption);line-height:1.8;
  padding:var(--s-24) var(--s-32);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}

/* ---------- PRODUCT ---------- */
.product{display:grid;grid-template-columns:280px 1fr;gap:var(--s-48);align-items:start;padding:var(--s-48) 0;border-bottom:1px solid var(--hairline)}
@media(max-width:768px){.product{grid-template-columns:1fr}}
.product-media{aspect-ratio:1;background:var(--surface-2);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;color:var(--ink-subtle);font-style:italic;font-size:var(--type-caption)}
.product h3{font-family:var(--font-display);font-weight:500;font-size:var(--type-h3);letter-spacing:0.08em;text-transform:uppercase}
.product p{color:var(--ink-muted);margin-top:var(--s-12);max-width:52ch}
.btn-quiet{
  display:inline-block;margin-top:var(--s-24);text-decoration:none;
  font-size:var(--type-overline);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--garnet);border:1px solid var(--garnet);padding:12px 22px;
  transition:all var(--duration) var(--ease);
}
.btn-quiet:hover{background:var(--garnet);color:var(--surface-1)}

/* ---------- RESOURCES ---------- */
.resource-group{padding:var(--s-32) 0;border-bottom:1px solid var(--hairline)}
.resource-group h3{font-family:var(--font-display);font-weight:500;font-size:var(--type-h3)}
.resource-group ul{list-style:none;margin-top:var(--s-16)}
.resource-group li{padding:var(--s-8) 0;color:var(--ink-muted)}
.resource-group li a{text-decoration:none;transition:color var(--duration) var(--ease)}
.resource-group li a:hover{color:var(--garnet)}
.coming{color:var(--ink-subtle);font-style:italic;font-size:var(--type-caption)}

/* ---------- NEWSLETTER ---------- */
.newsletter{background:var(--surface-2);border-top:1px solid var(--hairline);padding:var(--s-96) 0;text-align:center}
.newsletter h2{font-family:var(--font-display);font-weight:500;font-size:var(--type-h2);letter-spacing:0.1em}
.newsletter p{color:var(--ink-muted);margin-top:var(--s-12)}
.newsletter form{display:flex;gap:var(--s-8);justify-content:center;margin-top:var(--s-32);flex-wrap:wrap}
.newsletter input{
  font:inherit;font-size:var(--type-caption);
  padding:14px 20px;min-width:300px;
  background:var(--surface-1);border:1px solid var(--keyline);color:var(--ink);
}
.newsletter input:focus{outline:2px solid var(--garnet);outline-offset:2px}
.btn-ink{
  font:inherit;font-size:var(--type-overline);letter-spacing:0.14em;text-transform:uppercase;
  background:var(--ink);color:var(--surface-1);border:1px solid var(--ink);
  padding:14px 28px;cursor:pointer;transition:all var(--duration) var(--ease);
}
.btn-ink:hover{background:var(--garnet);border-color:var(--garnet)}

/* ---------- FOOTER ---------- */
footer{padding:var(--s-64) 0;border-top:1px solid var(--hairline)}
.footer-row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--s-24)}
.footer-links{display:flex;gap:var(--s-24);flex-wrap:wrap}
.footer-links a{font-size:var(--type-caption);color:var(--ink-subtle);text-decoration:none}
.footer-links a:hover{color:var(--ink)}
.legal{margin-top:var(--s-24);font-size:var(--type-overline);letter-spacing:0.06em;color:var(--ink-subtle)}