/* The Motherhood Diary · blog
 *
 * The approved mockup's stylesheet (docs/mockups/tmd-blog-homepage.html),
 * grown to cover the pages the mockup did not have: the article, the pillar
 * indexes, the join and story forms, the legal documents and the ad slots.
 * Tokens are Part A2.2 exactly. Type is Cormorant Garamond for anything that
 * speaks and DM Sans for anything that works.
 *
 * Mobile first in behaviour if not in source order: every grid collapses to one
 * column, and every tap target a thumb reaches for clears 44px.
 *
 * Contrast, measured rather than assumed, against the surface each pair sits on
 * (cream #FDF8F3 and warm white #FFFCF8):
 *
 *   --ink        #3A2E28   12.4 : 1   body and headings
 *   --ink-mid    #7A6458    5.3 : 1   secondary paragraphs
 *   --ink-caption #7F6A5C   4.8 : 1   dates, ages, timings, fine print, the Den lines
 *   --ink-light  #A89080    2.9 : 1   the A2.2 swatch — NOT for text, at any size
 *   the four deep pastels             4.5 – 4.9 : 1 on cream (see the note below)
 *   #5C4A40 on the pastels            5.4 – 6.7 : 1
 *
 * --ink-light is the Part A2.2 "Text Light" swatch and it does not pass at any
 * size that appears on this site, so nothing here sets text in it. The captions
 * it used to carry — the recipe age range and honest timing (Part O3), the four
 * Den lines (Part O5), the news dates, every piece of fine print — are set in
 * --ink-caption, which is the same colour family two steps darker.
 */

:root{
  /* Part A2.2 — authoritative */
  --cream:#FDF8F3;
  --warm-white:#FFFCF8;
  --ink:#3A2E28;
  --ink-mid:#7A6458;
  --ink-light:#A89080;      /* swatch only — never used for text; see the note above */
  --ink-caption:#7F6A5C;    /* the readable member of that family: 4.8:1 on cream */
  --rule:#EAD5C8;
  --pink:#F2C4CE;
  --blue:#B8D8E8;
  --yellow:#F5E6B0;
  --green:#C0DDB8;
  /* Deeper mixes of the four pastels, for text and hovers that must clear 4.5:1.
     These are darker than the mockup's (#C4846A, #C97D91, #5F94B2, #6E9E62,
     which sit at about 2.9:1) and --clay colours the italic "Motherhood" in the
     wordmark, so the approved mark is visibly darker here than in the mockup.
     That is a deliberate legibility choice and it is written down in the
     README under "Four colours moved"; it needs Makenna's eye before launch. */
  --pink-deep:#A85B70;
  --blue-deep:#3F7392;
  --green-deep:#4E7A44;
  --clay:#A65F45;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
}

body{margin:0;background:var(--cream);color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.65;}
a{color:inherit;}
img{max-width:100%;display:block;}

.wrap{max-width:1080px;margin:0 auto;padding:0 32px;}
.narrow{max-width:760px;}

/* the keyboard's way in */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);
  padding:12px 18px;z-index:100;text-decoration:none;}
.skip:focus{left:0;}

/* words a screen reader needs and the eye does not — a link that opens a new
   tab says so before it is followed */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* one focus ring everywhere, and it is never removed */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:1px;}

/* ---------------- header ---------------- */
header{position:sticky;top:0;z-index:20;background:rgba(253,248,243,.95);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--rule);}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:11px 0;}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;}
.mark img{width:40px;height:auto;}
.mark span{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:500;line-height:1;white-space:nowrap;}
.mark span i{font-style:italic;color:var(--clay);}
nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:0;font-size:15px;align-items:center;}
/* 44px of thumb, with the underline on the label so it stays under the word */
nav a{display:inline-block;text-decoration:none;color:var(--ink-mid);padding:11px 5px;}
nav a span{display:inline-block;padding-bottom:3px;border-bottom:1.5px solid transparent;}
nav a:hover{color:var(--ink);}
nav a:hover span{border-bottom-color:var(--rule);}
/* "page" on a section's own index, "true" inside one of its pieces (D2) */
nav a[aria-current]{color:var(--ink);}
nav a[aria-current] span{border-bottom-color:var(--rule);}
.navjoin{display:inline-block;background:var(--ink);color:var(--cream);border:none;border-radius:2px;
  font-family:"DM Sans",sans-serif;font-size:14px;font-weight:500;padding:10px 16px;cursor:pointer;
  text-decoration:none;line-height:1.2;}
.navjoin:hover{background:#241C18;border-bottom-color:transparent;color:var(--cream);}

/* ---------------- hero ---------------- */
.hero{text-align:center;padding:64px 0 58px;}
/* V5 sources stay byte-identical. These white frames hide excess blank canvas,
   not the approved artwork; the source aspect ratio is always square. */
.brand-lockup{position:relative;display:block;overflow:hidden;aspect-ratio:1330/1400;background:#fff;}
.brand-lockup img{position:absolute;max-width:none;width:150.37594%;height:auto;left:-22.55639%;top:-27.85714%;}
.hero-lockup{width:min(330px,82vw);margin:0 auto 34px;}
.footer-lockup{width:190px;max-width:100%;}
.brand-mark{position:relative;display:block;flex:0 0 44px;width:44px;aspect-ratio:1400/1480;overflow:hidden;background:#fff;}
.brand-mark img{position:absolute;max-width:none;width:142.85714%;height:auto;left:-21.42857%;top:-17.56757%;}
.social-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:24px 0 8px;font-size:14px;}
.social-label{color:var(--ink-mid);}
.social-links ul{display:flex;flex-wrap:wrap;gap:8px 20px;}
.social-links a{display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px;min-height:44px;}
.social-links a:hover{color:var(--ink);}
.hero h1{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(30px,4.6vw,50px);font-weight:400;line-height:1.16;
  margin:0 auto;max-width:19ch;letter-spacing:-.005em;}
.hero .under{font-size:16px;color:var(--ink-mid);margin:24px auto 0;max-width:52ch;}

/* ---------------- start here ---------------- */
.starthere{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:34px 0;}
.starthere .lead{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:20px;color:var(--ink-mid);margin:0 0 20px;}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.door{text-decoration:none;display:block;padding:18px 20px;background:var(--warm-white);
  border:1px solid var(--rule);border-radius:2px;border-top:3px solid var(--blue);}
.door:nth-child(2){border-top-color:var(--green);}
.door:nth-child(3){border-top-color:var(--pink);}
.door h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:500;margin:0 0 5px;line-height:1.2;}
.door p{font-size:14px;color:var(--ink-mid);margin:0;line-height:1.5;}
.door:hover h3{color:var(--clay);}

/* ---------------- bands ---------------- */
.band{padding:60px 0;border-top:1px solid var(--rule);}
.band:first-of-type{border-top:none;}
.band-intro{max-width:60ch;margin-bottom:34px;}
.band-intro h1,.band-intro h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(28px,3.4vw,36px);
  font-weight:500;margin:0 0 14px;line-height:1.12;}
.band-intro p{font-size:15.5px;color:var(--ink-mid);margin:0;line-height:1.68;}
.band-note{font-size:15px;color:var(--ink-mid);max-width:60ch;margin:0 0 24px;}
.band-foot{margin-top:28px;}
.more{font-size:14.5px;color:var(--ink-mid);text-decoration:none;
  border-bottom:1.5px solid var(--rule);padding-bottom:2px;white-space:nowrap;}
.more:hover{border-bottom-color:var(--ink-mid);color:var(--ink);}
.empty{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:19px;
  color:var(--ink-mid);max-width:52ch;margin:0;}

/* D1 — a read that failed. Deliberately not .empty: an empty section is calm
   italic because nothing is wrong; this says something is, says it is ours,
   and offers the same address again. --ink on warm white, 12.8 : 1; the
   hovered "Try again", cream on --ink, 12.4 : 1. */
.failed{background:var(--warm-white);border:1px solid var(--rule);border-left:3px solid var(--clay);
  border-radius:2px;padding:18px 20px;max-width:62ch;}
.failed h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-weight:500;line-height:1.2;margin:0 0 10px;}
.failed p{font-size:15px;color:var(--ink);line-height:1.6;margin:0 0 14px;}
.failed .retryline{margin:0;}
.retryline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;}
/* a button-weight link, so it reads as the thing to do; 44px of thumb is
   15px × 1.4 of line, 22px of padding and 2px of border */
.retry{display:inline-block;font-family:"DM Sans",sans-serif;font-size:15px;font-weight:500;line-height:1.4;
  color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:2px;
  padding:11px 20px;text-decoration:none;}
.retry:hover{background:var(--ink);color:var(--cream);}

/* News keeps its dated briefing format; available covers accompany each brief. */
.briefing{border-left:3px solid var(--blue);padding-left:26px;}
.brief{display:grid;grid-template-columns:70px 1fr;gap:0 22px;padding:16px 0;
  border-bottom:1px solid var(--rule);text-decoration:none;}
.briefing .brief:last-child{border-bottom:none;}
.brief .when{font-family:"Cormorant Garamond",Georgia,serif;font-size:17px;color:var(--ink-caption);white-space:nowrap;}
.brief h3{font-family:"DM Sans",sans-serif;font-size:17px;font-weight:500;margin:0 0 3px;line-height:1.4;max-width:52ch;}
.brief p{font-size:14.5px;color:var(--ink-mid);margin:0;max-width:62ch;line-height:1.55;}
.brief .via{font-size:13px;color:var(--ink-caption);margin-top:4px;}
.brief:hover h3{color:var(--blue-deep);}

/* recipes and activities — led by a photograph, with the Kids' Job on the
   card face (Part O3, #3) */
.kitchen,.playroom{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.dish,.activity{text-decoration:none;display:block;}
/* #16 · the plate: a photograph, or the pillar's own pastel with the mark and
   a quiet line while there is none — green for food, yellow for play, pink
   for motherhood, blue for news and wellness. --ink on the four pastels is
   8.5 – 10.5 : 1. */
.plate{position:relative;aspect-ratio:4/3;background:var(--green);border-radius:2px;margin-bottom:14px;overflow:hidden;}
.plate-news,.plate-wellness{background:var(--blue);}
.plate-food{background:var(--green);}
.plate-motherhood{background:var(--pink);}
.plate-play{background:var(--yellow);}
.plate-photo{display:block;width:100%;height:100%;object-fit:cover;background:inherit;}
/* With the script off, a photograph that fails shows the browser's
   broken-image icon. A replaced element draws ::after only once it has failed
   (Chrome, Firefox), so this lays the plate's own pastel over the icon; with
   the script on, public/app.js shows the whole fallback instead. */
.plate-photo::after{content:"";position:absolute;inset:0;background:inherit;}
.plate-to-come{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;padding:13px;text-align:center;}
.has-photo .plate-to-come{display:none;}
.plate-to-come img{width:30px;height:auto;opacity:.6;}
.plate-to-come span{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:16px;color:var(--ink);}
.dish h3,.activity h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;font-weight:500;margin:0 0 8px;line-height:1.2;}
.dish:hover h3{color:var(--green-deep);}
.activity:hover h3{color:var(--clay);}
.job{border-top:1px solid var(--rule);padding-top:10px;margin-top:10px;
  font-size:14.5px;color:var(--ink-mid);line-height:1.5;}
.job b{font-weight:500;color:var(--ink);}
.job .age{color:var(--ink-caption);}
.timing{font-size:13.5px;color:var(--ink-caption);margin-top:7px;}
.jobcard{background:var(--warm-white);border:1px solid var(--rule);border-left:3px solid var(--green);
  border-radius:2px;padding:16px 18px;margin:26px 0;}

/* stories — one at full reading size, the rest a quiet list */
.feature{border-left:3px solid var(--pink);padding-left:30px;max-width:62ch;}
.feature h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(26px,3.4vw,34px);
  font-weight:500;margin:0 0 18px;line-height:1.18;}
.feature .excerpt{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;
  line-height:1.62;margin:0 0 18px;font-weight:300;}
.byline{font-size:14.5px;color:var(--ink-caption);margin:0 0 20px;}
.others{margin-top:42px;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;}
.others.wide{margin-top:0;}
.other{display:block;text-decoration:none;padding:15px 0;border-bottom:1px solid var(--rule);}
.other h4{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:500;margin:0 0 3px;line-height:1.25;}
.other span{font-size:13.5px;color:var(--ink-caption);}
.other:hover h4{color:var(--pink-deep);}

/* a paid piece says so on its face as well as at the top of the post (M5) */
.tag-paid{display:inline-block;font-family:"DM Sans",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#5C4A40;background:var(--yellow);
  border-radius:2px;padding:2px 7px;vertical-align:middle;}

/* ---------------- den ---------------- */
.den{background:var(--warm-white);border:1px solid var(--rule);border-radius:3px;
  padding:44px 46px;text-align:center;}
.den h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:32px;font-weight:500;margin:0 0 14px;line-height:1.15;}
.den p{font-size:15.5px;color:var(--ink-mid);margin:0 auto 24px;max-width:54ch;}
.den .rules{display:flex;flex-wrap:wrap;gap:0 30px;justify-content:center;
  font-size:14px;color:var(--ink-caption);margin-bottom:26px;}
.den .rules span{padding:3px 0;}

/* ---------------- letter / forms ---------------- */
.letter{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center;}
.letter h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;font-weight:500;margin:0 0 12px;line-height:1.15;}
.letter p{font-size:15px;color:var(--ink-mid);margin:0;max-width:46ch;}
.signup label{display:block;font-size:14px;color:var(--ink-mid);margin-bottom:8px;}
.signup .row{display:flex;gap:8px;flex-wrap:wrap;}
input[type=email],input[type=text],textarea{font-family:"DM Sans",sans-serif;font-size:15px;color:var(--ink);
  background:var(--warm-white);border:1px solid var(--rule);border-radius:2px;padding:11px 13px;width:100%;}
.signup input[type=email]{flex:1;min-width:170px;width:auto;}
input::placeholder,textarea::placeholder{color:var(--ink-caption);}
textarea{line-height:1.6;resize:vertical;}
.join{display:inline-block;font-family:"DM Sans",sans-serif;font-size:15px;font-weight:500;background:var(--ink);
  color:var(--cream);border:1px solid var(--ink);border-radius:2px;padding:11px 22px;cursor:pointer;
  text-decoration:none;line-height:1.4;}
.join:hover{background:#241C18;color:var(--cream);}
.fineprint{font-size:13px;color:var(--ink-caption);margin-top:11px;}
.formnote{font-size:14px;color:var(--ink-mid);margin:12px 0 0;min-height:1px;}
.formnote:empty{margin:0;}
.help{font-size:13.5px;color:var(--ink-caption);margin:0 0 8px;max-width:62ch;line-height:1.55;}

/* ---------------- reading ---------------- */
.readwrap{padding-top:52px;padding-bottom:20px;}
.readwrap.has-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start;}
.piece{max-width:68ch;}
/* #3 · the trail above an article: Home › Recipes. The separator is drawn
   and says nothing to a screen reader (the alternative text after the slash
   is empty; a browser without that syntax keeps the first line). Vertical
   padding on an inline link gives a thumb 44px without moving the line. */
.crumbs{margin:0 0 14px;}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.crumbs li+li::before{content:"›";content:"›" / "";margin:0 10px;color:var(--ink-caption);}
.crumbs a{display:inline;padding:14px 2px;margin:0 -2px;color:var(--ink-mid);text-decoration:none;}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.piece h1{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(30px,4.4vw,42px);
  font-weight:500;line-height:1.14;margin:0 0 16px;}
.piece .byline{margin:0 0 28px;}
/* the source link (#29) stays inline in the byline; vertical padding on an
   inline box grows what a thumb can hit to 44px without moving the line */
.byline .source a{padding:13px 0;}
.piece .excerpt{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:300;
  line-height:1.6;color:var(--ink);margin:0 0 26px;}
.piece-story{border-left:3px solid var(--pink);padding-left:30px;}
.hero-shot{margin:0 0 26px;}
.hero-shot img{width:100%;border-radius:2px;}
.hero-shot figcaption{font-size:13px;color:var(--ink-caption);margin-top:8px;}

/* Part M5 — at the top of the post, above the words, never in the footer */
.disclosure{background:var(--yellow);border-radius:2px;padding:12px 16px;margin:0 0 26px;
  font-size:14px;color:#4A3B32;line-height:1.55;}
.disclosure a{color:#4A3B32;}

.body{font-size:17px;line-height:1.75;}
.body h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;font-weight:500;
  line-height:1.2;margin:38px 0 14px;}
.body h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;font-weight:500;
  font-style:italic;line-height:1.25;margin:30px 0 12px;}
.body p{margin:0 0 20px;}
.body ul,.body ol{margin:0 0 22px;padding-left:22px;}
.body li{margin-bottom:9px;}
.body blockquote{margin:26px 0;padding-left:22px;border-left:3px solid var(--pink);
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:21px;color:var(--ink-mid);}
.body blockquote p{margin:0 0 10px;}
.body hr{border:none;border-top:1px solid var(--rule);margin:34px 0;}
.body code{font-size:.9em;background:var(--warm-white);border:1px solid var(--rule);
  border-radius:2px;padding:1px 5px;}
.body pre{background:var(--warm-white);border:1px solid var(--rule);border-radius:2px;
  padding:16px;overflow-x:auto;}
.body pre code{border:none;background:none;padding:0;}

/* the gate, in the page, for a reader who arrived with JavaScript off (O4) */
.gatewall{background:var(--warm-white);border:1px solid var(--rule);border-top:3px solid var(--pink);
  border-radius:2px;padding:32px 30px;margin:8px 0 10px;}
.gatewall h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-weight:500;
  margin:0 0 12px;line-height:1.2;}
.gatewall p{font-size:15px;color:var(--ink-mid);margin:0 0 20px;max-width:52ch;}

.sidebar{display:flex;flex-direction:column;gap:28px;position:sticky;top:96px;}

/* comments */
.narrow-band{max-width:1080px;}
#comments h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;font-weight:500;margin:0 0 12px;}
.comments{list-style:none;margin:0 0 32px;padding:0;max-width:62ch;}
.comments li{border-top:1px solid var(--rule);padding:18px 0;}
.comments .who{font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;margin:0 0 4px;color:var(--ink);}
.comments p{margin:0;color:var(--ink-mid);}
.commentform{max-width:62ch;}
.commentform label{display:block;font-size:14px;color:var(--ink-mid);margin:16px 0 6px;}

/* ---------------- prose pages: join, story form, legal ---------------- */
.prose{max-width:68ch;}
.prose h1{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(28px,4vw,40px);
  font-weight:500;line-height:1.15;margin:0 0 18px;}
.prose h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-weight:500;margin:34px 0 12px;line-height:1.2;}
.prose h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;font-style:italic;font-weight:500;margin:26px 0 10px;}
.prose p{font-size:16px;line-height:1.72;color:var(--ink-mid);margin:0 0 18px;}
.prose .lead-para{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:300;
  line-height:1.6;color:var(--ink);}
.prose ul,.prose ol{color:var(--ink-mid);line-height:1.7;padding-left:22px;margin:0 0 20px;}
.prose li{margin-bottom:8px;}
.prose blockquote{margin:22px 0;padding:2px 0 2px 22px;border-left:3px solid var(--blue);}
.prose blockquote p{color:var(--ink);}
.prose hr{border:none;border-top:1px solid var(--rule);margin:30px 0;}
.prose a{color:var(--ink);}

.tablewrap{overflow-x:auto;margin:0 0 22px;}
.prose table{border-collapse:collapse;font-size:14.5px;min-width:100%;}
.prose th,.prose td{border:1px solid var(--rule);padding:9px 12px;text-align:left;vertical-align:top;color:var(--ink-mid);}
.prose th{background:var(--warm-white);color:var(--ink);font-weight:500;}

.draftbanner{background:var(--yellow);border-radius:2px;padding:14px 18px;margin:0 0 32px;
  font-size:14.5px;color:#4A3B32;line-height:1.6;max-width:68ch;}

/* Contact enquiries */
.contactform{margin:28px 0 38px;padding:24px;background:var(--warm-white);border:1px solid var(--rule);border-radius:2px;}
.contactform h2{margin:0 0 12px;}
.contact-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
.contact-field{min-width:0;margin-bottom:20px;}
.contact-field label{display:block;font-size:15px;font-weight:500;margin-bottom:7px;}
.contactform .help{font-size:13.5px;margin:8px 0 18px;}
.contact-thanks .help{overflow-wrap:anywhere;}
@media(max-width:600px){.contact-row{grid-template-columns:minmax(0,1fr);gap:0;}.contactform{padding:20px 16px;}}

/* the story form (Part N6) */
.storyform{max-width:68ch;margin-top:30px;}
.storyform label{display:block;font-family:"DM Sans",sans-serif;font-size:15px;font-weight:500;
  color:var(--ink);margin:26px 0 6px;}
.storyform h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-weight:500;
  margin:40px 0 10px;padding-top:26px;border-top:1px solid var(--rule);}
.storyform p{font-size:15px;color:var(--ink-mid);line-height:1.7;margin:0 0 14px;}
.storyform .perm{border:1px solid var(--rule);border-left:3px solid var(--blue);border-radius:2px;
  padding:18px 20px;margin:0 0 16px;background:var(--warm-white);}
.storyform .perm legend{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;padding:0 6px;}
.perm-blurb{font-size:14.5px;color:var(--ink-mid);margin:0 0 14px!important;}
.choices{display:flex;flex-wrap:wrap;gap:10px 26px;}
.choice,.check{display:flex;align-items:flex-start;gap:9px;font-size:15px;color:var(--ink);
  font-weight:400!important;margin:0 0 10px!important;line-height:1.5;cursor:pointer;}
.choice input,.check input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:#3A2E28;}
.storyform h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-style:italic;
  font-weight:500;margin:26px 0 10px;}
/* §2.1 — the three answers, defined once before they are offered */
.defined{margin:0 0 22px;padding:16px 18px;background:var(--warm-white);
  border:1px solid var(--rule);border-left:3px solid var(--yellow);border-radius:2px;}
.defined dt{font-weight:500;color:var(--ink);margin-top:10px;}
.defined dt:first-child{margin-top:0;}
.defined dd{margin:2px 0 0;font-size:14.5px;color:var(--ink-mid);line-height:1.6;}
/* §5.2 — what can and cannot be taken back */
.storyform .tablewrap{margin:0 0 22px;}
.storyform table{border-collapse:collapse;font-size:14.5px;min-width:100%;}
.storyform th,.storyform td{border:1px solid var(--rule);padding:9px 12px;text-align:left;
  vertical-align:top;color:var(--ink-mid);font-weight:400;}
.storyform thead th{background:var(--warm-white);color:var(--ink);font-weight:500;}
.storyform tbody th{color:var(--ink);font-weight:500;white-space:nowrap;}
.crisisnote{background:var(--warm-white);border:1px solid var(--rule);border-left:3px solid var(--pink);
  border-radius:2px;padding:16px 18px;margin:30px 0!important;font-size:14.5px!important;}
.problem{background:var(--warm-white);border:1px solid var(--pink-deep);border-radius:2px;
  padding:14px 18px;margin:24px 0;max-width:68ch;}
.problem ul{margin:0;padding-left:20px;color:var(--ink);}
.storyform button{margin-top:30px;}

/* ---------------- ad slots (Part M6) ----------------
   There is no ".adslot--empty". A slot with no live assignment produces no
   markup at all, so there is nothing here to style. */
.adslot{margin:0 auto;text-align:center;}
.adslot-leaderboard{padding:18px 20px 0;max-width:1080px;}
.adslot img{margin:0 auto;height:auto;}
.adnote{font-family:"DM Sans",sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-caption);margin:6px 0 0;}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--rule);padding:46px 0 60px;margin-top:60px;}
.footgrid{display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between;align-items:flex-start;}
.footgrid .brand-lockup img{width:150.37594%;height:auto;}
.footlinks{display:flex;gap:40px;flex-wrap:wrap;font-size:14.5px;}
.footlinks ul{list-style:none;margin:0;padding:0;}
.footlinks li{padding:10px 0;}
.footlinks a{color:var(--ink-mid);text-decoration:none;}
.footlinks a:hover{color:var(--ink);}
.footlinks .hd{font-family:"Cormorant Garamond",Georgia,serif;font-size:17px;color:var(--ink);padding-bottom:6px;}
.legal{border-top:1px solid var(--rule);margin-top:36px;padding-top:20px;
  font-size:13px;color:var(--ink-caption);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;}
.legallinks a{color:var(--ink-mid);text-decoration:none;padding:10px 0;display:inline-block;}
.legallinks a:hover{color:var(--ink);text-decoration:underline;}
.legallinks [data-tmd-cookie-settings]{appearance:none;background:none;border:0;border-radius:0;color:var(--ink-mid);font:inherit;padding:10px 0;cursor:pointer;}
.legallinks [data-tmd-cookie-settings]:hover{color:var(--ink);text-decoration:underline;}
.legallinks [data-tmd-cookie-settings]:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* ---------------- the gate ---------------- */
/* flex-start plus margin:auto centres a short dialog and scrolls a tall one
   from its top — with align-items:center the top of an overlong gate, Close
   button and all, cannot be scrolled to */
.scrim{position:fixed;inset:0;background:rgba(58,46,40,.44);display:flex;
  align-items:flex-start;justify-content:center;padding:24px;z-index:60;overflow-y:auto;}
.gate{background:var(--cream);border-radius:3px;max-width:452px;width:100%;padding:38px;position:relative;margin:auto;}
.gate h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;font-weight:500;margin:0 0 12px;line-height:1.2;}
.gate p{font-size:15px;color:var(--ink-mid);margin:0 0 20px;}
.gate .what{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:18px;color:var(--ink);margin-bottom:16px;}
.gate .row{display:flex;gap:8px;flex-wrap:wrap;}
.gate input[type=email]{flex:1;min-width:170px;width:auto;}
.shut{position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer;
  font-family:"DM Sans",sans-serif;font-size:14px;color:var(--ink-caption);padding:12px 14px;}
.shut:hover{color:var(--ink);}
/* what the dialog says after she has sent her address: focused, and announced */
.gate .said h2{margin-top:6px;}
.gate .said h2:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

@media (max-width:1000px){
  .readwrap.has-sidebar{grid-template-columns:1fr;gap:34px;}
  .sidebar{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;}
}
@media (max-width:900px){
  /* With Activities in it (#3) the header's seven links and the wordmark no
     longer fit one line below 900px, and at 701px they pushed the page
     sideways. The mark stays, and still says whose home it leads to. */
  .mark > span:not(.brand-mark){display:none;}
  .doors{grid-template-columns:1fr;gap:14px;}
  .kitchen,.playroom{grid-template-columns:1fr;gap:34px;}
  .others{grid-template-columns:1fr;gap:0;}
  .letter{grid-template-columns:1fr;gap:26px;}
  .den{padding:34px 26px;}
}
@media (max-width:700px){
  .wrap{padding:0 20px;}
  nav ul{gap:15px;font-size:14px;}
  nav .hide{display:none;}
  .hero{padding:44px 0 40px;}
  .brief{grid-template-columns:1fr;gap:3px;}
  .briefing,.feature,.piece-story{padding-left:18px;}
  /* top and bottom only: as a shorthand this came after .wrap above and took
     away its 20px sides, so every band — cards, briefs, the pager — ran to the
     edge of a phone while the header kept its gutter */
  .band{padding-top:46px;padding-bottom:46px;}
  .gate{padding:30px 22px;}
  .signup .row,.gate .row{flex-direction:column;align-items:stretch;}
  .signup .row .join,.gate .row .join{width:100%;}
  .legal{gap:10px;}
}

/* Published collections and the authored reading canvas. */
.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
.content-card{min-width:0;border:1px solid var(--rule);background:var(--warm-white);border-radius:4px;overflow:hidden;}
.content-card>a{display:block;}
.content-card img{width:100%;height:220px;object-fit:cover;}
/* #16 · the shared plate at the head of a content card: as tall as the
   photograph it stands in for, and on a phone the recipe cards' 4:3 */
.content-card .plate{height:220px;aspect-ratio:auto;margin:0;border-radius:0;}
.content-card .plate-photo{height:100%;max-height:none;}
.content-card .plate-to-come img{width:30px;height:auto;}
.content-card-copy{padding:22px;}
.content-card h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:27px;font-weight:500;line-height:1.15;margin:8px 0 14px;}
.content-card h3 a{color:var(--ink);text-decoration:none;}
.content-card h3 a:hover{text-decoration:underline;text-underline-offset:4px;}
.content-card p{color:var(--ink-mid);font-size:15px;line-height:1.6;margin:0 0 14px;}
.content-card p.card-meta,.card-meta{color:var(--ink-caption);font-size:12px;line-height:1.5;letter-spacing:.02em;}
.archive-invite{padding-top:18px;padding-bottom:30px;}
.archive-filters{display:flex;flex-wrap:wrap;gap:18px;align-items:end;margin:28px 0 36px;padding:22px;background:var(--warm-white);border:1px solid var(--rule);}
.archive-filters label{display:grid;gap:8px;font-size:13px;color:var(--ink-mid);}
.archive-filters select,.archive-filters input{font:inherit;min-height:44px;min-width:180px;border:1px solid var(--rule);background:var(--cream);color:var(--ink);padding:10px;}
.archive-filters a{padding:12px 0;color:var(--ink-mid);}
.pagination{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);margin-top:34px;padding-top:24px;font-size:14px;}
.pagination a{padding:10px 0;}
/* #4 · nav a span is the header's underlined label; a pager arrow is plain
   text beside its words, and keeps the space between them */
.pagination a span{display:inline;padding:0;border:0;}
.article-photo{margin:30px 0;}
.article-photo img,.inline-photo{width:100%;height:auto;max-height:900px;object-fit:contain;border-radius:3px;}
.article-photo figcaption{font-size:13px;line-height:1.6;color:var(--ink-caption);margin-top:10px;}
.article-callout{margin:30px 0;padding:24px 28px;border:1px solid var(--rule);border-left:4px solid var(--green);border-radius:4px;background:#EDF4E8;max-width:68ch;}
.article-callout>:first-child{margin-top:0;}
.article-callout>:last-child{margin-bottom:0;}
.piece-custom,.layout-feature{max-width:none;}
.piece-custom>.excerpt,.piece-custom>h1,.piece-custom>.byline,.piece-custom .body>p,.piece-custom .body>ul,.piece-custom .body>ol,.piece-custom .body>blockquote{max-width:68ch;}
.layout-feature h1{font-size:clamp(36px,5.2vw,62px);max-width:24ch;line-height:1.06;}
.layout-feature .hero-shot{margin:30px 0 36px;}
.layout-feature .hero-shot img{max-height:720px;object-fit:contain;background:var(--warm-white);}
.layout-recipe .jobcard{background:#EDF4E8;border-left:4px solid var(--green);padding:22px;}
.layout-recipe .body>ol>li{padding-left:6px;margin-bottom:22px;}
.inline-ad-row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start;margin:28px 0;}
.inline-ad-copy{min-width:0;}
.inline-ad-row .adslot{width:100%;max-width:300px;}
.body>.adslot-billboard{margin:30px auto;max-width:970px;}
.article-share{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:24px 0;margin:32px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:14px;}
.article-share>p{flex-basis:100%;margin:0;color:var(--ink-mid);}
.share-button{font:inherit;background:var(--warm-white);color:var(--ink);border:1px solid var(--rule);border-radius:3px;padding:11px 18px;cursor:pointer;min-height:44px;}
.share-button:focus-visible,.archive-filters :focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.article-share a{color:var(--ink);padding:12px 0;}
.article-share [role=status]{font-size:13px;color:var(--ink-mid);}
.article-share input{max-width:100%;font:inherit;padding:9px;}
.article-share .share-intro{margin-top:-7px;}
.article-share .share-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%;}
.article-share .share-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.35;padding:10px 14px;}
.article-share .share-button[hidden]{display:none;}
.article-share .share-button:hover{background:var(--cream);border-color:var(--ink-caption);}
.article-share .share-button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.article-share .share-icon{flex:none;}
.article-share .share-help{font-size:12px;line-height:1.6;color:var(--ink-caption);margin:0;}
.article-share [data-share-status]:empty{display:none;}
.article-share [aria-disabled="true"]{cursor:default;}
.body{overflow-wrap:anywhere;}
.read-next{border-top:1px solid var(--rule);margin-top:30px;}
.read-next .read-next-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));}
.read-next .content-card h3{font-size:26px;}
.read-next .content-card-copy{padding:24px;}
@media(max-width:1000px){.content-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.inline-ad-row{grid-template-columns:1fr;}.inline-ad-row .adslot{margin:12px auto;}}
@media(max-width:700px){.content-grid{grid-template-columns:1fr;gap:20px;}.content-card img{height:auto;max-height:360px;}.archive-filters{align-items:stretch;}.archive-filters label{width:100%;}.archive-filters select,.archive-filters input{width:100%;min-width:0;}.pagination{gap:12px;font-size:13px;}.bar{flex-wrap:wrap;row-gap:8px;}nav ul{gap:12px;}.inline-ad-row{gap:18px;}.piece-custom{min-width:0;}}
@media(max-width:700px){.content-card .plate{height:auto;aspect-ratio:4/3;}}
@media(max-width:700px){.read-next .read-next-grid{grid-template-columns:1fr;}}

/* Den of Mamas: a public introduction with its own reading rhythm. */
.den-page h1,.den-page h2,.den-page h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1.12;}
.den-page .den-eyebrow{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mid);margin:0 0 20px;}
.den-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center;padding-top:76px;padding-bottom:66px;}
.den-hero h1{font-size:clamp(48px,6.2vw,76px);letter-spacing:-.025em;margin:0 0 20px;}
.den-lead{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(25px,3vw,34px);font-style:italic;line-height:1.25;margin:0 0 22px;max-width:24ch;}
.den-intro{font-size:16px;color:var(--ink-mid);line-height:1.75;max-width:45ch;margin:0 0 28px;}
.den-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;}
.den-signin{font-size:13px;color:var(--ink-mid);text-underline-offset:4px;padding:12px 0;}
.den-eligibility{font-size:12px;color:var(--ink-caption);margin:15px 0 0;}
.den-availability{font-size:12px;color:var(--ink-caption);margin:8px 0 0;max-width:44ch;}
.den-note{background:#F8E8E5;border:1px solid #E9CDC5;border-radius:100px 100px 4px 4px;padding:50px 30px 28px;text-align:center;}
.den-note h2{font-size:34px;max-width:12ch;margin:0 auto 24px;}
.den-note .den-eyebrow{font-size:10px;margin-bottom:16px;}
.den-note ul{list-style:none;padding:0;margin:0;display:grid;gap:13px;}
.den-note li{font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;line-height:1.25;background:var(--warm-white);padding:17px 12px;border:1px solid #E9D8CC;box-shadow:0 3px 0 rgba(58,46,40,.03);}
.den-note li:nth-child(2){background:#F7F3DF;}
.den-note li:nth-child(3){background:#F0F5EC;}
.den-note-closing{font-size:12px;color:var(--ink-mid);margin:22px 0 0;}
.den-promises{margin:0;padding:22px 0;list-style:none;border-block:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-mid);}
.den-promises li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--clay);margin-right:10px;vertical-align:middle;}
.den-life{display:grid;grid-template-columns:1fr 1.15fr;gap:90px;padding-top:82px;padding-bottom:78px;}
.den-section-intro h2,.den-how h2,.den-faq h2{font-size:clamp(30px,3.5vw,42px);margin:0 0 20px;}
.den-section-intro>p:last-child{font-size:15px;color:var(--ink-mid);max-width:34ch;}
.den-moments article{display:flex;gap:24px;padding:23px 0;border-bottom:1px solid var(--rule);}
.den-moments article:first-child{padding-top:0;}
.den-moments article>span{font-family:"Cormorant Garamond",Georgia,serif;font-size:25px;color:var(--clay);line-height:1.2;}
.den-moments h3{font-size:25px;margin:0 0 9px;}
.den-moments p{font-size:14px;color:var(--ink-mid);line-height:1.7;margin:0;}
.den-how{padding:58px 0 64px;background:#EDF1E8;border-block:1px solid #D4DDCD;scroll-margin-top:90px;}
.den-how h2{max-width:20ch;}
.den-steps{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;counter-reset:den-step;}
.den-steps li{counter-increment:den-step;}
.den-steps li::before{content:counter(den-step,decimal-leading-zero);font-size:12px;color:var(--green-deep);display:block;border-bottom:1px solid #CFD8C8;padding-bottom:14px;margin-bottom:18px;}
.den-steps h3{font-size:24px;margin:0 0 12px;}
.den-steps p{font-size:14px;color:var(--ink-mid);margin:0;line-height:1.7;}
.den-faq{display:grid;grid-template-columns:1fr 1.15fr;gap:90px;padding-top:74px;padding-bottom:70px;}
.den-faq h2{max-width:14ch;}
.den-faq details{border-bottom:1px solid var(--rule);}
.den-faq summary{position:relative;cursor:pointer;list-style:none;padding:19px 30px 19px 0;font-size:15px;font-weight:500;}
.den-faq summary::-webkit-details-marker{display:none;}
.den-faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:24px;font-weight:400;color:var(--ink-mid);}
.den-faq details[open] summary::after{content:"−";}
.den-faq details p{margin:0 0 22px;font-size:14px;color:var(--ink-mid);line-height:1.75;}
.den-closing>div{background:var(--warm-white);border:1px solid var(--rule);padding:50px 24px;text-align:center;}
.den-closing h2{font-size:clamp(38px,4vw,50px);margin:0 0 15px;}
.den-closing>div>p:not(.den-eyebrow){max-width:48ch;margin:0 auto 26px;color:var(--ink-mid);font-size:15px;}
.den-closing .den-actions{justify-content:center;}
.den-closing>div>p.den-availability{font-size:12px;margin:12px auto 0;}
.den-closing>div>p.den-browse{font-size:13px;margin:25px auto 0;}
.den-browse a{text-underline-offset:4px;}
@media(max-width:800px){
  .den-hero{gap:36px;padding-top:52px;padding-bottom:44px;}
  .den-note{padding:42px 18px 24px;border-radius:80px 80px 4px 4px;}
  .den-note h2{font-size:29px;}.den-note li{font-size:20px;}
  .den-life,.den-faq{gap:42px;padding-top:55px;padding-bottom:55px;}
  .den-steps{gap:24px;}
}
@media(max-width:600px){
  .den-hero,.den-life,.den-faq{grid-template-columns:1fr;gap:34px;}
  .den-hero h1{font-size:52px;}.den-lead{max-width:25ch;}
  .den-note{max-width:380px;width:100%;margin:0 auto;padding:38px 24px 25px;}
  .den-note h2{max-width:none;font-size:31px;}.den-note li{font-size:22px;}
  .den-promises{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;font-size:12px;}
  .den-section-intro>p:last-child{max-width:none;}.den-faq h2{max-width:20ch;margin-bottom:0;}
  .den-how{padding:44px 0;}.den-steps{grid-template-columns:1fr;gap:26px;margin-top:28px;}
  .den-closing>div{padding:38px 20px;}.den-actions{gap:4px 18px;}
}

/* Blend the approved white-backed logos into their light page surfaces.
   Keep the source artwork and existing crop unchanged; transparent frames
   let the white image pixels pick up the header, hero, and footer cream. */
header .brand-mark,
.hero .hero-lockup,
footer .footer-lockup{background:transparent;}
header .brand-mark img,
.hero .hero-lockup img,
footer .footer-lockup img{mix-blend-mode:multiply;}

/* Photographs accompany published news and stories when a cover is available. */
.brief.brief-photo{grid-template-columns:64px minmax(0,1fr) 180px;align-items:center;gap:24px;}
.brief-photo .plate{width:100%;aspect-ratio:3/2;margin:0;}
.feature>.plate{aspect-ratio:16/9;margin-bottom:25px;}
.other.other-photo{padding:0 0 22px;margin-bottom:30px;}
.other-photo>.plate{aspect-ratio:16/10;margin-bottom:17px;}
.other-photo h4{font-size:27px;line-height:1.18;margin-bottom:9px;}
@media(max-width:650px){
  .brief.brief-photo{grid-template-columns:minmax(0,1fr) 104px;gap:8px 16px;}
  .brief-photo .when{grid-column:1/-1;}
  .brief-photo>.plate{grid-column:2;grid-row:2;aspect-ratio:1;align-self:start;}
  .brief-photo h3{font-size:17px;}
  .other-photo h4{font-size:24px;}
}

/* Keep every reading section reachable in the narrow header. */
@media(max-width:700px){
  .bar nav{width:100%;}
  .bar nav ul{flex-wrap:wrap;gap:0 12px;}
  .bar nav .hide{display:list-item;}
  .bar .mark>span:not(.brand-mark){display:inline;font-size:20px;}
}