/*
Theme Name: A Matter of Note
Theme URI: https://amatterofnote.com
Author: Kate
Author URI: https://amatterofnote.com
Description: A quiet editorial theme for A Matter of Note — thoughtful notes on home, scent & the art of living well. Built for calm reading, not conversion tricks: no popups, no autoplay, no visual ambushes.
Version: 1.56
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amatterofnote
*/

/* -------------------------------------------------
   0. Fonts (loaded via functions.php, referenced here)
   Editorial serif  : Playfair Display   -> headlines, pull quotes
   Body sans        : Work Sans          -> body copy, nav, metadata
   Handwritten accent: Nothing You Could Do -> the word "note" in the header logo only
------------------------------------------------- */

/* Local fonts */

@font-face {
    font-family: 'Playfair Display';
    src: url('assets/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Italianno';
    src: url('assets/fonts/Italianno-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* -------------------------------------------------
   1. Design tokens
------------------------------------------------- */
:root{
  --color-cream:      #F5F0E7; /* primary ground */
  --color-parchment:  #E9DFD0; /* secondary ground */
  --color-espresso:   #4A352B; /* text / structure */
  --color-oxblood:    #6E2638; /* rare, rich accent */
  --color-olive:      #72715A; /* quiet secondary accent */
  --color-taupe:      #9A8978; /* metadata / dividers */

  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:   'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Nothing You Could Do', cursive;

  --measure: 680px;
  --wide: 1180px;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
}

/* -------------------------------------------------
   2. Reset & base
------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-cream);
  color: var(--color-espresso);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--color-espresso); text-decoration: none; }
a:hover{ color: var(--color-oxblood); }
ul, ol{ padding-left: 1.2em; }
::selection{ background: var(--color-parchment); color: var(--color-espresso); }

h1, h2, h3, h4{
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.26;
  margin: 0 0 0.5em;
  color: var(--color-espresso);
}
h1{ font-size: clamp(2rem, 4vw, 3.2rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3{ font-size: 1.4rem; }
p{ margin: 0 0 1.3em; }

.eyebrow{
  display:block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-olive);
  margin-bottom: 0.6em;
}

.script-accent{
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  font-size: 1.3em;
  color: var(--color-oxblood);
}

.container{
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.container--measure{
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

hr, .divider{
  border: none;
  border-top: 1px solid var(--color-taupe);
  opacity: 0.35;
  margin: var(--space-md) 0;
}

.button{
  display:inline-block;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--color-espresso);
  padding: 0.85em 1.8em;
  transition: background .25s ease, color .25s ease;
}
.button:hover{ background: var(--color-espresso); color: var(--color-cream); }

/* -------------------------------------------------
   3. Site header
------------------------------------------------- */
.site-header{
  padding: var(--space-md) 0 var(--space-sm);
  text-align: center;
  border-bottom: 1px solid var(--color-taupe);
}
.site-branding{ margin-bottom: var(--space-sm); }
.site-branding a{ display:inline-block; }
.site-logo-text{
  font-family: var(--font-serif);
  font-size: 1.9rem;
  letter-spacing: 0.04em;
  color: var(--color-espresso);
  line-height: 1;
}
.site-logo-text .script-accent{
  display:block;
  font-size: 1.5em;
  margin-top: 0.1em;
}
.site-description{
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--color-olive);
  font-style: normal;
  margin-top: 0.5em;
}

.main-navigation{
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-sm) 0 0;
}
.main-navigation ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap: wrap; gap: var(--space-md); justify-content:center;
}
.main-navigation a{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-espresso);
}
.main-navigation a:hover{ color: var(--color-oxblood); }

.menu-toggle{ display:none; }

@media (max-width: 640px){
  .menu-toggle{
    display:block; margin: 0 auto; background:none; border:1px solid var(--color-espresso);
    padding: 0.5em 1.2em; font-family: var(--font-sans); font-size:0.75rem; letter-spacing:0.12em;
    text-transform:uppercase; cursor:pointer;
  }
  .main-navigation ul{ display:none; flex-direction:column; gap: var(--space-sm); margin-top: var(--space-sm); }
  .main-navigation.is-open ul{ display:flex; }
}

/* -------------------------------------------------
   4. Featured Note (homepage hero)
------------------------------------------------- */
.featured-note{
  position:relative;
  margin: var(--space-lg) auto var(--space-xl);
  max-width: var(--wide);
  padding: 0 var(--space-md);
}
.featured-note__frame{
  position:relative;
  overflow:hidden;
  aspect-ratio: 16/9;
  background: var(--color-parchment);
}
.featured-note__frame img{ width:100%; height:100%; object-fit:cover; }
.featured-note__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(20,12,8,0.65) 100%);
  display:flex; align-items:flex-end;
  padding: var(--space-lg) var(--space-md);
}
.featured-note__text{ max-width: 620px; }
.featured-note__text .eyebrow{ color: var(--color-parchment); }
.featured-note__text h2{
  color: #fff; margin-bottom: 0.4em;
}
.featured-note__text h2 a{ color:#fff; }
.featured-note__excerpt{ color: var(--color-parchment); font-size: 0.95rem; margin:0; }

/* -------------------------------------------------
   5. Editorial sections (Home Notes / Scent Notes / Of Note)
------------------------------------------------- */
.editorial-section{ margin: var(--space-xl) auto; max-width: var(--wide); padding: 0 var(--space-md); }
.editorial-section__head{
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom: 1px solid var(--color-taupe); padding-bottom: var(--space-xs); margin-bottom: var(--space-md);
}
.editorial-section__head h2{ margin:0; }
.editorial-section__head a{
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-olive);
}

.note-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px){ .note-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .note-grid{ grid-template-columns: 1fr; } }

.note-card__image{ aspect-ratio: 4/5; overflow:hidden; background: var(--color-parchment); margin-bottom: var(--space-sm); }
.note-card__image img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.note-card:hover .note-card__image img{ transform: scale(1.03); }
.note-card h3{ font-size: 1.2rem; margin-bottom: 0.3em; }
.note-card h3 a{ color: var(--color-espresso); }
.note-card__meta{ font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-taupe); }
.note-card__excerpt{ font-size: 0.92rem; color: var(--color-olive); margin: 0.5em 0 0; }

/* -------------------------------------------------
   6. The Sunday Note invite band
------------------------------------------------- */
.sunday-note{
  background: var(--color-parchment);
  padding: var(--space-xl) var(--space-md);
  text-align:center;
}
.sunday-note h2{ margin-bottom: 0.3em; }
.sunday-note p{ max-width: 480px; margin: 0 auto 1.5em; color: var(--color-olive); }
.sunday-note .sunday-note__setup{
  max-width: 520px;
  margin: 1.26rem auto 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--color-taupe);
}
.sunday-note form{
  display:flex; gap: 0.6em; justify-content:center; flex-wrap:wrap; max-width: 420px; margin: 0 auto;
}
.sunday-note input[type="email"]{
  flex:1; min-width: 220px; padding: 0.85em 1em;
  border:1px solid var(--color-taupe); background: var(--color-cream); font-family: var(--font-sans);
}
.sunday-note button{
  font-family: var(--font-sans); font-size: 0.8rem; letter-spacing:0.08em; text-transform:uppercase;
  background: var(--color-espresso); color: var(--color-cream); border:none; padding: 0.9em 1.6em; cursor:pointer;
}
.sunday-note button:hover{ background: var(--color-oxblood); }

/* -------------------------------------------------
   7. Single article
------------------------------------------------- */
.entry-header{ max-width: var(--measure); margin: var(--space-lg) auto var(--space-md); padding: 0 var(--space-md); text-align:center; }
.entry-header .eyebrow{ text-align:center; }
.entry-header .entry-meta{ margin-top: var(--space-xs); }
.entry-meta{
  font-size: 0.78rem; letter-spacing: 0.05em; color: var(--color-taupe);
}
.entry-thumbnail{ max-width: var(--wide); margin: 0 auto var(--space-lg); padding: 0 var(--space-md); }
.entry-thumbnail img{ width:100%; }
.entry-content{ max-width: var(--measure); margin: 0 auto; padding: 0 var(--space-md); font-size: 1.08rem; }
.entry-content p:first-of-type::first-letter{
  float:left; font-family: var(--font-serif); font-size: 3.6em; line-height:0.85; padding-right:0.1em;
  color: var(--color-oxblood);
}
.entry-content blockquote{
  font-family: var(--font-serif); font-style: normal; font-size: 1.4rem; color: var(--color-oxblood);
  border-left: 2px solid var(--color-oxblood); padding-left: 1em; margin: var(--space-md) 0;
}
.entry-content h2, .entry-content h3{ margin-top: 1.6em; }
.entry-content img{ margin: var(--space-md) 0; }
.entry-footer{
  max-width: var(--measure); margin: var(--space-lg) auto 0; padding: var(--space-md) var(--space-md) 0;
  border-top: 1px solid var(--color-taupe); font-size: 0.85rem; color: var(--color-olive);
}
.entry-footer .tags a{ margin-right: 0.6em; text-transform:uppercase; font-size:0.72rem; letter-spacing:0.08em; }

.continue-reading{ max-width: var(--wide); margin: var(--space-xl) auto; padding: 0 var(--space-md); }
.continue-reading .eyebrow{ text-align:center; margin-bottom: var(--space-md); }
.continue-reading .note-grid{ grid-template-columns: repeat(2, 1fr); max-width: 800px; margin:0 auto; }

/* -------------------------------------------------
   8. Archive / search
------------------------------------------------- */
.archive-header{ max-width: var(--measure); margin: var(--space-lg) auto var(--space-md); padding: 0 var(--space-md); text-align:center; }
.archive-list{ max-width: var(--wide); margin: 0 auto var(--space-xl); padding: 0 var(--space-md); }

.search-form{ display:flex; gap: 0.5em; max-width: 480px; margin: var(--space-md) auto; }
.search-form input[type="search"]{
  flex:1; padding: 0.8em 1em; border: 1px solid var(--color-taupe); background: var(--color-cream); font-family: var(--font-sans);
}
.search-form button{
  border: 1px solid var(--color-espresso); background: none; padding: 0.8em 1.4em; text-transform:uppercase; font-size: 0.78rem; letter-spacing: 0.08em; cursor: pointer;
}

.pagination{ text-align:center; margin: var(--space-lg) 0; font-size: 0.85rem; letter-spacing: 0.05em; }
.pagination a, .pagination span{ margin: 0 0.6em; }

/* -------------------------------------------------
   9. Footer
------------------------------------------------- */
.site-footer{
  border-top: none;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  text-align:center;
  color: var(--color-olive);
}
.site-footer .footer-logo{ font-family: var(--font-serif); font-size:1.2rem; margin-bottom: var(--space-sm); }
.site-footer .footer-logo .script-accent{ font-family:inherit; font-size:inherit; color:inherit; }
.footer-navigation ul{ list-style:none; padding:0; display:flex; gap: var(--space-md); justify-content:center; flex-wrap:wrap; margin: 0 0 var(--space-sm); }
.footer-navigation a{ font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer .colophon{ font-size: 0.75rem; color: var(--color-taupe); }

/* -------------------------------------------------
   10. Utility
------------------------------------------------- */
.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden;
}
.alignwide{ max-width: var(--wide); margin-left:auto; margin-right:auto; }
.alignfull{ max-width: none; width: 100vw; margin-left: calc(50% - 50vw); }


/* -------------------------------------------------
   11. Accessibility & resilient interaction (v1.1)
------------------------------------------------- */
:where(a, button, input, textarea, select):focus-visible{
  outline: 2px solid var(--color-oxblood);
  outline-offset: 4px;
}
.screen-reader-text:focus{
  clip:auto !important; width:auto; height:auto; overflow:visible;
  top:1rem; left:1rem; z-index:100000;
  padding:.7rem 1rem; background:var(--color-cream); color:var(--color-espresso);
  border:1px solid var(--color-espresso);
}
.sunday-note .wp-block-jetpack-subscriptions,
.sunday-note .wp-block-jetpack-subscriptions__container{
  max-width: 440px; margin-inline:auto;
}
.sunday-note__setup{
  font-size:.82rem; font-style:normal; color:var(--color-taupe);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* -------------------------------------------------
   13. Homepage editorial redesign — v1.4
   Inspired by the approved A Matter of Note mockup.
------------------------------------------------- */
.home .site-header{ padding-top:2.4rem; padding-bottom:1.15rem; }
.home .site-branding{ margin-bottom:.8rem; }
.home .site-description{ margin-top:.7rem; }
.home .main-navigation{ padding-top:1rem; }

.editorial-hero{
  max-width:1180px; margin:0 auto; padding:5.2rem 2rem 6.2rem;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); gap:5.2rem; align-items:center;
}
.editorial-hero__image{ min-height:610px; background:#e8dfd2; overflow:hidden; }
.editorial-hero__image>a{ display:block; width:100%; height:100%; min-height:610px; }
.editorial-hero__image img{ width:100%; height:610px; object-fit:cover; }
.editorial-hero__copy{ position:relative; max-width:470px; padding-right:1.5rem; }
.editorial-hero__copy .hand-note{ display:block; font-family:var(--font-script); color:var(--color-oxblood); font-size:1.55rem; margin:0 0 1.9rem -.55rem; transform:rotate(-4deg); }
.editorial-hero__copy .eyebrow{ margin-bottom:1.15rem; }
.editorial-hero__copy h1{ font-size:clamp(2.55rem,4.3vw,4.65rem); line-height:1.05; letter-spacing:-.025em; margin-bottom:1.5rem; font-weight:400; }
.editorial-hero__copy p{ max-width:410px; font-size:1rem; line-height:1.75; color:#65584f; margin-bottom:2rem; }
.editorial-link{ display:inline-block; font-size:.72rem; line-height:1.2; text-transform:uppercase; letter-spacing:.16em; color:var(--color-oxblood); padding-bottom:.35rem; border-bottom:1px solid rgba(110,38,56,.42); }
.editorial-link:hover{ color:var(--color-espresso); border-color:var(--color-espresso); }
.editorial-link--muted{ color:var(--color-taupe); border-color:rgba(154,137,120,.35); }

.editorial-placeholder{ display:block; width:100%; height:100%; min-height:100%; position:relative; overflow:hidden; background:linear-gradient(145deg,#d8cbbb 0%,#eee6da 46%,#c4b39f 100%); }
.editorial-placeholder::before{ content:""; position:absolute; width:42%; height:58%; right:10%; bottom:0; background:linear-gradient(180deg,#6d6254,#3f382f); border-radius:48% 48% 8% 8%; opacity:.8; }
.editorial-placeholder::after{ content:""; position:absolute; width:58%; height:38%; left:7%; bottom:7%; background:rgba(245,240,231,.74); box-shadow:0 -70px 0 rgba(110,38,56,.18); }

.notice-edit{ padding-top:5.5rem; padding-bottom:7rem; border-top:1px solid rgba(154,137,120,.35); }
.notice-edit__header{ text-align:center; margin-bottom:3.4rem; }
.notice-edit__header h2{ font-size:clamp(2rem,3.4vw,3.25rem); font-weight:400; margin-bottom:1.2rem; }
.short-rule{ display:block; width:42px; height:1px; margin:0 auto; background:var(--color-oxblood); }
.editorial-doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; }
.editorial-door__image{ display:block; aspect-ratio:4/5; overflow:hidden; background:var(--color-parchment); margin-bottom:1.55rem; }
.editorial-door__image img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.editorial-door:hover .editorial-door__image img{ transform:scale(1.025); }
.editorial-door .eyebrow{ color:var(--color-espresso); margin-bottom:.6rem; }
.door-rule{ display:block; width:30px; height:1px; background:var(--color-oxblood); margin:.2rem 0 .8rem; }
.editorial-door p{ min-height:3.2em; max-width:90%; color:#6f6258; font-size:.92rem; line-height:1.65; margin-bottom:1rem; }
.editorial-door--2 .editorial-placeholder{ background:linear-gradient(150deg,#6a3035,#c39a72 45%,#e5d7c5 100%); }
.editorial-door--2 .editorial-placeholder::before{ width:35%; height:55%; right:30%; background:linear-gradient(#241d1a 0 20%,#7c3c35 20% 100%); border-radius:15% 15% 8% 8%; }
.editorial-door--2 .editorial-placeholder::after{ width:34%; height:34%; left:8%; bottom:6%; background:#6e2638; border-radius:50%; box-shadow:180px -120px 0 rgba(245,240,231,.28); }
.editorial-door--3 .editorial-placeholder{ background:linear-gradient(145deg,#e7ddcf,#c8b9a5); }
.editorial-door--3 .editorial-placeholder::before{ width:72%; height:18%; left:8%; right:auto; bottom:18%; border-radius:2px; background:#8d765f; box-shadow:0 -35px 0 #d9cbbb,0 -70px 0 #6f6658; }
.editorial-door--3 .editorial-placeholder::after{ width:42%; height:15%; left:33%; bottom:48%; border-radius:50%; background:#c7b9a8; box-shadow:none; }

.sunday-note--editorial{ text-align:left; padding:0; background:#e9dfd0; border-top:1px solid rgba(154,137,120,.25); }
.sunday-note__inner{ min-height:500px; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; padding-top:5.2rem; padding-bottom:5.2rem; }
.sunday-note__copy{ max-width:510px; }
.sunday-note--editorial h2{ font-size:clamp(2.25rem,3.7vw,3.55rem); font-weight:400; margin:.3rem 0 1.1rem; }
.sunday-note--editorial p{ max-width:500px; margin:0 0 1.7rem; color:#65584f; }
.sunday-note--editorial .sunday-note__setup{ margin:1.2rem 0 0; max-width:500px; }
.sunday-note--editorial form{ margin:1.5rem 0 0; max-width:460px; justify-content:flex-start; gap:0; flex-wrap:nowrap; border-bottom:1px solid var(--color-espresso); }
.sunday-note--editorial input[type="email"]{ border:0; background:transparent; padding:.9rem .2rem; outline:none; }
.sunday-note--editorial button{ background:transparent; color:var(--color-oxblood); padding:.8rem 1rem; font-size:0; }
.sunday-note--editorial button::after{ content:"→"; font-size:1.26rem; }
.sunday-note--editorial button:hover{ background:transparent; color:var(--color-espresso); }

.sunday-note__still-life{ position:relative; height:340px; background:linear-gradient(155deg,#d8c9b7,#f0e7da 60%,#c8b39c); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(74,53,43,.05); }
.still-life__book{ position:absolute; width:58%; height:28px; left:13%; bottom:54px; background:#817161; box-shadow:0 -31px 0 #d8cbb9,0 -62px 0 #a99883; }
.still-life__cup{ position:absolute; width:105px; height:95px; right:12%; bottom:78px; background:#c7b9a5; border-radius:8px 8px 38px 38px; box-shadow:inset -14px 0 rgba(74,53,43,.08); }
.still-life__vase{ position:absolute; width:92px; height:145px; right:24%; bottom:166px; background:#6d6254; border-radius:46% 46% 12% 12%; }
.still-life__vase::before,.still-life__vase::after{ content:""; position:absolute; width:125px; height:2px; background:#6e2638; top:-36px; left:24px; transform:rotate(-52deg); transform-origin:left; box-shadow:35px -16px 0 #6e2638,70px 8px 0 #72715a; }
.still-life__card{ position:absolute; left:18%; top:44px; width:155px; min-height:92px; padding:1.3rem 1rem; background:#f5f0e7; font-family:var(--font-serif); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; transform:rotate(-4deg); box-shadow:0 8px 25px rgba(74,53,43,.08); }
.still-life__card b{ display:block; font-family:var(--font-script); text-transform:none; letter-spacing:0; font-weight:400; color:var(--color-oxblood); font-size:1.7rem; line-height:1.1; }

@media (max-width:900px){
  .editorial-hero{ grid-template-columns:1fr; gap:2.8rem; padding-top:3rem; padding-bottom:4.5rem; }
  .editorial-hero__image,.editorial-hero__image>a{ min-height:0; }
  .editorial-hero__image{ aspect-ratio:4/3; }
  .editorial-hero__image img{ height:100%; }
  .editorial-hero__copy{ max-width:650px; }
  .editorial-doors{ grid-template-columns:1fr 1fr; }
  .sunday-note__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .sunday-note__still-life{ max-width:650px; width:100%; }
}
@media (max-width:620px){
  .editorial-hero{ padding:2rem 1.26rem 4rem; }
  .editorial-hero__copy h1{ font-size:2.55rem; }
  .notice-edit{ padding:4rem 1.26rem 5rem; }
  .editorial-doors{ grid-template-columns:1fr; gap:3.5rem; }
  .editorial-door p{ min-height:0; }
  .sunday-note__inner{ padding:4rem 1.26rem; }
  .sunday-note__still-life{ height:285px; }
}


/* -------------------------------------------------
   14. Pinterest lockup + leaf-shadow header — v1.5
   The Pinterest emblem's typography becomes the web wordmark; the circle
   does not. Soft foliage shadow adds the slow-living, sunlit atmosphere.
------------------------------------------------- */
.site-header{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--color-cream);
}
.site-header::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-18% -3% 0 -3%;
  background:url('assets/leaf-shadow.svg') center top / cover no-repeat;
  opacity:.24;
  pointer-events:none;
  transform:scale(1.03);
}
.site-header::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(245,240,231,.06),rgba(245,240,231,.28) 54%,rgba(245,240,231,.08));
  pointer-events:none;
}
.site-branding{ position:relative; z-index:1; }
.brand-lockup{ display:inline-block; }
.site-logo-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(330px,78vw);
  font-family:var(--font-serif);
  color:#2f251f;
  line-height:1;
  letter-spacing:0;
}
.site-logo-text .brand-a{
  display:block;
  font-size:.78em;
  line-height:.88;
  margin-bottom:.04em;
}
.site-logo-text .brand-matter{
  display:block;
  font-size:1.42em;
  letter-spacing:.24em;
  padding-left:.24em;
  line-height:.9;
}
.site-logo-text .brand-of{
  width:76%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.65rem;
  margin:.35rem auto .08rem;
  font-family:var(--font-serif);
  font-size:.64em;
  line-height:1;
}
.site-logo-text .brand-of i{ display:block; height:1px; background:#a47b45; opacity:.9; }
.site-logo-text .brand-of b{ font:inherit; letter-spacing:.16em; padding-left:.16em; }
.site-logo-text .script-accent{
  display:block;
  width:100%;
  margin:-.03em 0 -.08em;
  font-family:var(--font-script);
  font-size:2.05em;
  line-height:1.05;
  font-weight:400;
  font-style:normal;
  letter-spacing:-.055em;
  color:#9a672c;
  transform:rotate(-2deg);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.home .site-header{ padding-top:1.55rem; padding-bottom:.65rem; }
.home .site-branding{ margin-bottom:.35rem; }
.home .site-description{
  margin:.35rem auto .25rem;
  color:#5e554d;
  font-size:.82rem;
  max-width:520px;
}
.home .main-navigation{ padding-top:.55rem; }
.home .main-navigation a{ font-size:.7rem; }

/* The handwritten voice is now reserved for the logo only. */
.editorial-hero__copy .hand-note{ display:none !important; }
.still-life__card b{ font-family:var(--font-serif); color:inherit; font-size:inherit; }

@media (max-width:640px){
  .site-header::before{ opacity:.18; inset:-8% -30% 0 -28%; background-size:auto 112%; }
  .site-logo-text{ width:min(285px,82vw); font-size:1.55rem; }
  .site-logo-text .script-accent{ font-size:1.95em; }
  .site-description{ padding:0 1rem; }
}


/* -------------------------------------------------
   15. Header fidelity fix — v1.6
   Visible leaf shadows + Pinterest-style editorial wordmark.
------------------------------------------------- */
.site-header{
  position:relative !important;
  isolation:isolate;
  overflow:hidden;
  background:#f5f0e7;
}
.site-header::before{
  content:"";
  position:absolute;
  z-index:0 !important;
  inset:-8% -2% -4% -2%;
  background:url('assets/leaf-shadow.svg') center 18% / cover no-repeat !important;
  opacity:.42 !important;
  filter:blur(.2px);
  pointer-events:none;
}
.site-header::after{
  content:"";
  position:absolute;
  z-index:0 !important;
  inset:0;
  background:linear-gradient(90deg,rgba(245,240,231,.18),rgba(245,240,231,.42) 48%,rgba(245,240,231,.12));
  pointer-events:none;
}
.site-header > *{ position:relative; z-index:2; }
.site-branding{margin-bottom:.3rem !important;}
.site-logo-text{
  width:min(350px,82vw) !important;
  color:#241b16;
}
.site-logo-text .brand-a{
  font-family:var(--font-serif);
  font-size:.72em !important;
  line-height:.72 !important;
  margin:0 0 .12em !important;
  letter-spacing:0;
}
.site-logo-text .brand-matter{
  font-family:var(--font-serif);
  font-size:1.48em !important;
  line-height:.86 !important;
  letter-spacing:.25em !important;
  padding-left:.25em !important;
}
.site-logo-text .brand-of{
  width:72% !important;
  margin:.34rem auto -.12rem !important;
  gap:.7rem !important;
  font-size:.62em !important;
  color:#2b211b;
}
.site-logo-text .brand-of i{
  background:#a77435 !important;
  height:1px !important;
}
.site-logo-text .script-accent{
  font-family:'Italianno', cursive !important;
  font-size:3.15em !important;
  line-height:.78 !important;
  letter-spacing:-.035em !important;
  color:#9a6426 !important;
  margin:.05em 0 .04em !important;
  transform:rotate(-2deg) translateX(.02em) !important;
  text-shadow:none !important;
}
.site-description{ position:relative; z-index:2; }
.main-navigation{ position:relative; z-index:2; }
.home .site-header{padding-top:1.45rem !important;padding-bottom:.7rem !important;}
@media (max-width:640px){
  .site-header::before{opacity:.34 !important; inset:-2% -42% -3% -35%; background-size:auto 108% !important;}
  .site-logo-text{width:min(300px,86vw) !important;}
  .site-logo-text .script-accent{font-size:2.85em !important;}
}
\n\n/* -------------------------------------------------\n   16. Approved graphic header lockup — v1.7\n   The logo, script Note, cream field and botanical shadows are\n   one fixed visual asset taken from the approved master mockup.\n------------------------------------------------- */\n.site-header{\n  padding-top:0 !important;\n  background:#f7f1e8 !important;\n  overflow:visible !important;\n}\n.site-header::before,.site-header::after{display:none !important;}\n.site-branding--graphic{\n  width:100% !important;\n  max-width:none !important;\n  margin:0 !important;\n  line-height:0;\n}\n.brand-graphic-link{\n  display:block !important;\n  width:100%;\n}\n.brand-header-graphic{\n  display:block;\n  width:100%;\n  height:auto;\n  margin:0;\n}\n.main-navigation{\n  background:#f7f1e8;\n  margin-top:0 !important;\n  padding-top:.72rem;\n  padding-bottom:.82rem;\n}\n.home .site-header{padding-top:0 !important;padding-bottom:0 !important;}\n.menu-toggle{position:relative;z-index:3;}\n@media (max-width:640px){\n  .brand-header-graphic{\n    width:170%;\n    max-width:none;\n    margin-left:-35%;\n  }\n  .site-branding--graphic{overflow:hidden;}\n  .main-navigation{padding-top:.55rem;padding-bottom:.6rem;}\n}\n
/* v1.22: unified single-canvas header; no local background patches behind OF or subtitle */

/* v1.24: removed the tiny detached artefact below the left foot of the script N; all other header geometry preserved. */


/* -------------------------------------------------
   17. v1.47 — approved transparent brand artwork on botanical header
   Keep the editorial homepage intact; only the masthead presentation changes.
------------------------------------------------- */
.site-header{
  position:relative !important;
  isolation:isolate;
  overflow:hidden !important;
  padding:1.15rem 0 0 !important;
  background:#f7f1e8 !important;
  border-bottom:1px solid rgba(154,137,120,.42) !important;
}
.site-header::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:url('assets/leaf-shadow.svg') center 18% / cover no-repeat !important;
  opacity:.72 !important;
  pointer-events:none !important;
}
.site-header::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:linear-gradient(90deg,rgba(247,241,232,.04),rgba(247,241,232,.20) 46%,rgba(247,241,232,.08)) !important;
  pointer-events:none !important;
}
.site-branding--transparent-logo{
  position:relative !important;
  z-index:1 !important;
  width:min(660px,72vw) !important;
  max-width:660px !important;
  margin:0 auto .1rem !important;
  line-height:1 !important;
}
.brand-transparent-link{
  display:block !important;
  width:100% !important;
  line-height:0 !important;
}
.brand-transparent-logo{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:310px !important;
  object-fit:contain !important;
  margin:0 auto !important;
}
.brand-tagline{
  position:relative !important;
  z-index:2 !important;
  margin:-.18rem 0 .15rem !important;
  color:#5f554e !important;
  font-family:var(--font-serif) !important;
  font-style:italic !important;
  font-size:.9rem !important;
  letter-spacing:.01em !important;
}
.main-navigation{
  position:relative !important;
  z-index:2 !important;
  background:transparent !important;
  margin-top:0 !important;
  padding:.7rem 0 .85rem !important;
}
.home .site-header{padding-bottom:0 !important;}
@media (max-width:640px){
  .site-header{padding-top:.7rem !important;}
  .site-branding--transparent-logo{width:94vw !important;max-width:none !important;}
  .brand-transparent-logo{max-height:250px !important;}
  .brand-tagline{font-size:.78rem !important;padding:0 1rem !important;}
  .main-navigation{padding:.5rem 0 .65rem !important;}
}

/* v1.47: keep botanical shadows inside the header stacking context, above the cream field and below all content. */
.site-header > *{position:relative;z-index:2;}

/* -------------------------------------------------
   18. v1.48 — botanical header canvas + Custom Logo
   The masthead artwork is deliberately NOT baked into the theme.
   Leaves/shadows remain the header background; logo can be added later
   via Appearance > Customize > Site Identity.
------------------------------------------------- */
.site-header.site-header--botanical-custom-logo{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  min-height:315px !important;
  padding:0 !important;
  background:#f7f1e8 !important;
  border-bottom:1px solid rgba(154,137,120,.42) !important;
}
.site-header.site-header--botanical-custom-logo::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:url('assets/leaf-shadow.svg') center 18% / cover no-repeat !important;
  opacity:.72 !important;
  pointer-events:none !important;
}
.site-header.site-header--botanical-custom-logo::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:linear-gradient(90deg,rgba(247,241,232,.03),rgba(247,241,232,.16) 48%,rgba(247,241,232,.05)) !important;
  pointer-events:none !important;
}
.site-header--botanical-custom-logo > *{position:relative !important;z-index:2 !important;}
.site-branding--customizable{
  height:250px !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.site-branding--customizable:empty{display:block !important;}
.custom-logo-stage{width:min(660px,72vw) !important;margin:0 auto !important;text-align:center !important;}
.custom-logo-stage .custom-logo-link{display:block !important;line-height:0 !important;}
.custom-logo-stage .custom-logo{
  display:block !important;
  width:100% !important;
  max-width:660px !important;
  max-height:220px !important;
  height:auto !important;
  object-fit:contain !important;
  margin:0 auto !important;
}
.site-header--botanical-custom-logo .main-navigation{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:3 !important;
  background:rgba(247,241,232,.08) !important;
  margin:0 !important;
  padding:.72rem 0 .85rem !important;
}
.site-header--botanical-custom-logo .menu-toggle{z-index:4 !important;}
.home .site-header.site-header--botanical-custom-logo{padding:0 !important;}
@media (max-width:640px){
  .site-header.site-header--botanical-custom-logo{min-height:265px !important;}
  .site-branding--customizable{height:205px !important;}
  .custom-logo-stage{width:92vw !important;}
  .custom-logo-stage .custom-logo{max-height:180px !important;}
  .site-header--botanical-custom-logo .main-navigation{padding:.52rem 0 .65rem !important;}
}

/* -------------------------------------------------
   19. v1.49 — exact approved botanical header master
   Uses the supplied leaf/shadow artwork 1:1 as the header canvas.
   The centre remains free for a Custom Logo; navigation stays at bottom.
------------------------------------------------- */
.site-header.site-header--botanical-custom-logo{
  height:240px !important;
  min-height:240px !important;
  padding:0 !important;
  background:#f7f1e8 url('assets/header-botanical-master.jpg') center center / 100% 100% no-repeat !important;
  border-bottom:1px solid rgba(154,137,120,.42) !important;
  overflow:hidden !important;
}
.site-header.site-header--botanical-custom-logo::before,
.site-header.site-header--botanical-custom-logo::after{
  display:none !important;
  content:none !important;
}
.site-branding--customizable{
  height:190px !important;
  min-height:190px !important;
  margin:0 !important;
  background:transparent !important;
}
.site-header--botanical-custom-logo .main-navigation{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  min-height:50px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:.55rem 0 .72rem !important;
  background:transparent !important;
  border:0 !important;
}
.custom-logo-stage{width:min(560px,58vw) !important;}
.custom-logo-stage .custom-logo{max-width:560px !important;max-height:165px !important;}
@media (max-width:640px){
  .site-header.site-header--botanical-custom-logo{
    height:210px !important;
    min-height:210px !important;
    background-size:auto 100% !important;
  }
  .site-branding--customizable{height:160px !important;min-height:160px !important;}
  .custom-logo-stage{width:78vw !important;}
  .custom-logo-stage .custom-logo{max-height:140px !important;}
}

/* v1.51: logo size control now changes visible logo height and overrides the former 165px cap. */

/* v1.52: mobile layout fix */
@media (max-width: 620px) {
    .still-life__card {
        position: relative;
        left: auto;
        top: auto;
        width: min(100%, 280px);
        min-height: 0;
        margin: 1.5rem auto 0;
        transform: none;
    }
}

/* -------------------------------------------------
   21. v1.56 — SAFE responsive fixes
   Base: restored v153 (approved header + Sunday Note)
   Scope: mobile navigation + Journal typography/layout only.
------------------------------------------------- */

@media (max-width: 640px) {
  /* Keep the approved botanical artwork and logo untouched. */
  .site-header.site-header--botanical-custom-logo {
    overflow: visible !important;
    position: relative !important;
  }

  /* MENU sits at the bottom of the header. */
  .site-header--botanical-custom-logo .menu-toggle {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 9px !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
    margin: 0 !important;
    padding: .42rem .95rem !important;
    background: rgba(247,241,232,.96) !important;
    border: 1px solid rgba(74,53,43,.55) !important;
    color: var(--color-espresso) !important;
    font-size: .75rem !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }

  /* The navigation panel itself lives below the header, never on top of the logo. */
  .site-header--botanical-custom-logo .main-navigation {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f7f1e8 !important;
    border: 0 !important;
    z-index: 29 !important;
  }

  .site-header--botanical-custom-logo .main-navigation ul {
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: .9rem 1rem 1rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    list-style: none !important;
    background: #f7f1e8 !important;
    border-top: 1px solid rgba(154,137,120,.28) !important;
    border-bottom: 1px solid rgba(154,137,120,.35) !important;
  }

  .site-header--botanical-custom-logo .main-navigation.is-open ul {
    display: flex !important;
  }

  .site-header--botanical-custom-logo .main-navigation li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .site-header--botanical-custom-logo .main-navigation a {
    display: block !important;
    padding: .2rem .5rem !important;
    font-size: .72rem !important;
    line-height: 1.45 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* Journal page created in Gutenberg/Customizer: one calm column on mobile. */
  body.page-id-96 .entry-content {
    max-width: 100% !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }

  body.page-id-96 .wp-block-post-template {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body.page-id-96 .wp-block-post-template > li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 2.8rem !important;
    padding: 0 !important;
  }

  body.page-id-96 .wp-block-post-featured-image {
    margin: 0 0 .75rem !important;
  }

  body.page-id-96 .wp-block-post-featured-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  body.page-id-96 .wp-block-post-date {
    margin: 0 0 .8rem !important;
    font-size: .78rem !important;
    line-height: 1.4 !important;
    color: var(--color-olive) !important;
  }

  body.page-id-96 .wp-block-post-title,
  body.page-id-96 .wp-block-post-title a {
    margin: 0 !important;
    font-family: var(--font-serif) !important;
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    color: var(--color-espresso) !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
  }

  body.page-id-96 .wp-block-query-pagination {
    margin-top: 1rem !important;
  }
}

.sunday-note__success {
    margin-top: 1.75rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(80, 69, 60, 0.28);
    max-width: 46rem;
}

.sunday-note__success strong {
    display: block;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.sunday-note__success span {
    display: block;
    font-family: "Work Sans", sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
    opacity: 0.72;
}

/* Sunday Note image fix */
.sunday-note__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}