/* The magazine front page (Cara, 2026-11-09): Good Housekeeping's home-page format and type, in
   this site's own wordmark and colors. Also styles the masthead + category menu on About and
   article pages. Everything is prefixed gh- so it sits beside style.css without clashes.
   The site's own colors and wordmark font are the first block of tokens; the rest is shared. */
:root {
  --gh-accent: #d2ec55;
  --gh-on-accent: #24210c;
  --gh-deep: #2e2a10;
  --gh-wash: #f5f0e6;
  --gh-logo: "Bricolage Grotesque", "Barlow Condensed", system-ui, sans-serif;

  --gh-ink: #141414;
  --gh-ink-soft: #4a4a4a;
  --gh-line: #141414;
  --gh-hair: #d9d9d9;
  --gh-paper: #ffffff;
  --gh-on-deep: #ffffff;
  --gh-grid: rgba(255, 255, 255, 0.07);
  --gh-head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --gh-title: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --gh-body: "Barlow", system-ui, sans-serif;
  --gh-serif: "Source Serif 4", Georgia, serif;
  --gh-max: 1280px;
  --gh-gutter: clamp(16px, 4vw, 80px);
}
/* Always white, also in dark mode (Cara, 2026-11-09). */
:root { color-scheme: light; }

body.gh { margin: 0; background: var(--gh-paper); color: var(--gh-ink); font: 400 1rem/1.5 var(--gh-body); -webkit-font-smoothing: antialiased; }
.gh *, .gh *::before, .gh *::after { box-sizing: border-box; }
.gh img { display: block; max-width: 100%; }
.gh a { color: inherit; text-decoration: none; }
.gh h1, .gh h2, .gh h3, .gh p, .gh ul, .gh ol, .gh figure { margin: 0; padding: 0; }
.gh ul, .gh ol { list-style: none; }
.gh a:focus-visible, .gh button:focus-visible, .gh input:focus-visible { outline: 3px solid var(--gh-accent); outline-offset: 2px; }
.gh .skip { position: absolute; left: -999px; top: 0; background: var(--gh-ink); color: var(--gh-paper); padding: 8px 14px; z-index: 10; }
.gh .skip:focus { left: 8px; }
.gh .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gh-wrap, .gh .gh-wrap, .gh-top-only .gh-wrap { max-width: var(--gh-max); margin: 0 auto; padding-left: var(--gh-gutter); padding-right: var(--gh-gutter); }

/* Masthead: utility strip, centered wordmark, one row of categories (no dropdowns). Pages that keep
   their own style.css put the masthead in .gh-top-only, which resets what it needs. */
.gh-top-only { font: 400 1rem/1.5 var(--gh-body); color: var(--gh-ink); background: var(--gh-paper); -webkit-font-smoothing: antialiased; }
.gh-top-only *, .gh-top-only *::before, .gh-top-only *::after { box-sizing: border-box; }
.gh-top-only a { color: inherit; text-decoration: none; }
.gh-top-only p, .gh-top-only ul, .gh-top-only h1 { margin: 0; padding: 0; }
.gh-top-only ul { list-style: none; }
.gh-util { background: var(--gh-accent); color: var(--gh-on-accent); font: 600 0.8125rem/1 var(--gh-title); }
.gh-util .gh-wrap { display: flex; gap: 24px; align-items: center; min-height: 32px; }
.gh-util a { display: inline-flex; gap: 6px; align-items: center; }
.gh-util a:hover { text-decoration: underline; }
.gh-util svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gh-util .gh-util-tag { margin-left: auto; font-weight: 500; }
.gh-mast { background: var(--gh-paper); border-bottom: 1px solid var(--gh-hair); }
.gh-mast-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 18px; padding-bottom: 14px; }
.gh-mast-left { font: 500 0.9375rem/1 var(--gh-title); }
.gh-mast-left a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--gh-ink); padding: 9px 14px; }
.gh-mast-left a:hover { background: var(--gh-wash); }
.gh-mast-left svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gh-logo { display: block; text-align: center; font-family: var(--gh-logo); font-weight: 800; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.01em; color: var(--gh-ink); margin: 0; }
.gh-logo span { display: block; }
.gh-logo .l1 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); }
.gh-logo .l2 { font-size: clamp(1.9rem, 4.1vw, 2.85rem); }
.gh-mast-right { justify-self: end; }
.gh-btn { display: inline-block; background: var(--gh-accent); color: var(--gh-on-accent); font: 600 1rem/1 var(--gh-title); padding: 12px 14px; border: 0; cursor: pointer; }
.gh-btn:hover { filter: brightness(0.94); }
.gh-nav ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 4px; padding-bottom: 12px; }
.gh-nav a { display: block; padding: 6px 0; font: 500 0.9375rem/1.2 var(--gh-title); white-space: nowrap; border-bottom: 2px solid transparent; }
.gh-nav a:hover { border-bottom-color: var(--gh-accent); }

/* Shared type */
.gh-h2 { font: 700 clamp(2rem, 3.6vw, 2.75rem)/1.02 var(--gh-head); letter-spacing: -0.005em; }
.gh-sec-head { padding-bottom: 14px; border-bottom: 1px solid var(--gh-line); margin-bottom: 24px; }
.gh-sec-head p { margin-top: 6px; font: 400 1.125rem/1.35 var(--gh-body); color: var(--gh-ink-soft); }
.gh-kicker { font: 700 0.8125rem/1 var(--gh-title); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.gh-kicker a:hover { text-decoration: underline; }
.gh-meta { font: 400 0.8125rem/1.3 var(--gh-title); color: var(--gh-ink-soft); margin-top: 6px; }
.gh-t a:hover, .gh-lead-h a:hover, .gh-card h3 a:hover, .gh-side h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gh-dek { font: 400 1rem/1.4 var(--gh-body); }
.gh-img { display: block; background: var(--gh-wash); overflow: hidden; }
.gh-img img { width: 100%; height: 100%; object-fit: cover; }
.gh-img-none { display: grid; place-items: center; width: 100%; height: 100%; padding: 12%; background: var(--gh-wash); color: var(--gh-accent); font: 800 clamp(1rem, 2vw, 1.6rem)/0.9 var(--gh-logo); text-transform: uppercase; text-align: center; }
.gh-section { padding-top: clamp(40px, 6vw, 72px); }

/* Front: Just in | lead | three beside it */
.gh-hero { display: grid; gap: 24px; padding-top: 32px; }
.gh-hero.hero-3 { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 300px); grid-template-areas: "justin lead side"; }
.gh-hero.hero-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); grid-template-areas: "lead side"; }
.gh-hero.hero-1 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead"; }
.gh-justin { grid-area: justin; border-top: 1px solid var(--gh-line); padding-top: 18px; }
.gh-justin .gh-h2 { font-size: 2.25rem; margin-bottom: 16px; }
.gh-justin li + li { margin-top: 20px; }
.gh-justin a { display: grid; grid-template-columns: 80px 1fr; gap: 12px; }
.gh-justin .gh-img { aspect-ratio: 1; }
.gh-justin h3 { font: 500 1.1875rem/1.2 var(--gh-title); }
.gh-justin a:hover h3 { text-decoration: underline; }
.gh-lead { grid-area: lead; }
.gh-lead-img { aspect-ratio: 1; }
.hero-1 .gh-lead-img, .hero-2 .gh-lead-img { aspect-ratio: 3 / 2; }
.gh-lead .gh-kicker { margin-top: 16px; }
.gh-lead-h { font: 700 clamp(2.1rem, 4.4vw, 3.6rem)/1.04 var(--gh-serif); font-optical-sizing: auto; letter-spacing: -0.01em; text-wrap: balance; }
.gh-lead .gh-dek { font-size: 1.1875rem; margin-top: 10px; max-width: 46rem; }
.gh-side { grid-area: side; }
.gh-side article { border-top: 1px solid var(--gh-line); padding: 18px 0 26px; }
.gh-side h3 { font: 500 1.5rem/1.15 var(--gh-title); text-wrap: balance; }
.gh-side-row { display: grid; grid-template-columns: 1fr 96px; gap: 14px; margin-top: 10px; align-items: start; }
.gh-side-row .gh-img { aspect-ratio: 1; }
.gh-soon-lead { grid-area: lead; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.gh-soon-lead .gh-img { aspect-ratio: 4 / 3; }
.gh-soon-lead .gh-dek { margin: 12px 0 20px; font-size: 1.1875rem; }

/* Numbered Top Stories */
.gh-top ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.gh-top li { position: relative; }
.gh-top a { display: block; }
.gh-top .gh-img { aspect-ratio: 1; }
.gh-top .gh-n { position: absolute; top: -10px; left: -8px; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--gh-ink); color: var(--gh-paper); display: grid; place-items: center; font: 500 0.9375rem/1 var(--gh-title); }
.gh-top h3 { margin-top: 14px; font: 500 1.1875rem/1.2 var(--gh-title); }
.gh-top a:hover h3 { text-decoration: underline; }

/* Category sections: header + rule + cards; the first card of each runs wide */
.gh-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.gh-card .gh-img { aspect-ratio: 1; margin-bottom: 14px; }
.gh-card h3 { font: 500 1.25rem/1.18 var(--gh-title); }
.gh-card p { margin-top: 6px; font: 400 0.9375rem/1.4 var(--gh-body); color: var(--gh-ink-soft); }
.gh-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.gh-card:first-child .gh-img { aspect-ratio: 16 / 10; margin: 0; }
.gh-card:first-child h3 { font: 700 clamp(1.8rem, 3.2vw, 2.6rem)/1.08 var(--gh-serif); text-wrap: balance; }
.gh-card:first-child p { font-size: 1.0625rem; }
.gh-soon ul { display: flex; flex-wrap: wrap; gap: 10px; }
.gh-soon li { border: 1px solid var(--gh-hair); padding: 10px 14px; font: 500 1rem/1 var(--gh-title); scroll-margin-top: 24px; }
.gh-soon li:target { border-color: var(--gh-accent); background: var(--gh-wash); }
.gh-cat { scroll-margin-top: 16px; }

/* Mission + how-it-works panels */
.gh-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gh-mission { background-color: var(--gh-deep); color: var(--gh-on-deep); background-image: linear-gradient(var(--gh-grid) 1px, transparent 1px), linear-gradient(90deg, var(--gh-grid) 1px, transparent 1px); background-size: 22px 22px; padding: clamp(32px, 5vw, 56px); text-align: center; display: grid; justify-items: center; align-content: center; gap: 18px; }
.gh-stamp { width: 172px; height: 172px; }
.gh-stamp .ring { font: 700 12.5px var(--gh-title); letter-spacing: 0.2em; fill: currentColor; }
.gh-stamp .big { font: 800 25px var(--gh-logo); fill: currentColor; text-transform: uppercase; }
.gh-mission h2 { font: 700 clamp(1.9rem, 3vw, 2.4rem)/1.05 var(--gh-head); text-wrap: balance; }
.gh-mission p { font: 400 1.1875rem/1.5 var(--gh-title); max-width: 34rem; }
.gh-mission .gh-link { font: 700 1.125rem/1 var(--gh-title); text-decoration: underline; text-underline-offset: 4px; }
.gh-how { border: 1px solid var(--gh-hair); padding: clamp(28px, 4vw, 48px); }
.gh-how > h2 { font: 700 1.9rem/1.05 var(--gh-head); text-align: center; }
.gh-how > p { text-align: center; margin: 8px auto 0; max-width: 32rem; color: var(--gh-ink-soft); }
.gh-how ol { margin-top: 28px; display: grid; gap: 22px; }
.gh-how li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.gh-how .n { width: 40px; height: 40px; border-radius: 50%; background: var(--gh-accent); color: var(--gh-on-accent); display: grid; place-items: center; font: 700 1.125rem/1 var(--gh-title); }
.gh-how h3 { font: 600 1.1875rem/1.2 var(--gh-title); }
.gh-how li p { margin-top: 4px; font-size: 0.9375rem; color: var(--gh-ink-soft); }
.gh-how li a { display: inline-block; margin-top: 4px; font: 600 0.875rem/1.3 var(--gh-title); text-decoration: underline; text-underline-offset: 3px; }

/* Newsletter band */
.gh-signup { background: var(--gh-wash); padding: clamp(28px, 4vw, 48px); }
.gh-signup .small { font: 500 1.0625rem/1.3 var(--gh-title); }
.gh-signup h2 { margin-top: 8px; font: 700 clamp(1.4rem, 2.4vw, 1.75rem)/1.2 var(--gh-head); max-width: 60rem; }
.gh-signup form { margin-top: 20px; }
.gh-signup .row { display: flex; max-width: 520px; border: 1px solid var(--gh-ink); background: var(--gh-paper); padding: 4px; }
.gh-signup input[type="email"] { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--gh-ink); font: 400 1rem/1 var(--gh-body); padding: 10px 12px; }
.gh-signup .hp { position: absolute; left: -9999px; }
.gh-signup .fine { margin-top: 12px; font-size: 0.8125rem; color: var(--gh-ink-soft); }

/* The Latest */
.gh-latest li { border-bottom: 1px solid var(--gh-hair); }
.gh-latest a { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 18px 0; align-items: center; }
.gh-latest .gh-img { aspect-ratio: 1; }
.gh-latest h3 { font: 500 1.375rem/1.18 var(--gh-title); }
.gh-latest a:hover h3 { text-decoration: underline; }

/* Footer */
.gh-foot { margin-top: clamp(48px, 7vw, 88px); border-top: 1px solid var(--gh-line); padding: 32px 0 48px; text-align: center; font: 400 0.9375rem/1.6 var(--gh-title); color: var(--gh-ink-soft); }
.gh-foot .gh-logo { margin-bottom: 18px; }
.gh-foot .gh-logo .l1 { font-size: 1.25rem; }
.gh-foot .gh-logo .l2 { font-size: 1.6rem; }
.gh-foot p a { text-decoration: underline; text-underline-offset: 3px; color: var(--gh-ink); }
.gh-foot .gh-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: 14px; }
.gh-foot .gh-foot-nav a { font-weight: 500; color: var(--gh-ink); }

/* Tablet */
@media (max-width: 1080px) {
  .gh-hero.hero-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); grid-template-areas: "lead side" "justin justin"; }
  .gh-justin ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .gh-justin li + li { margin-top: 0; }
  .gh-top ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-panels { grid-template-columns: 1fr; }
}
/* Phone: wordmark left, subscribe right, the menu scrolls sideways in its own strip */
@media (max-width: 720px) {
  .gh-util .gh-util-tag { display: none; }
  .gh-mast-row { grid-template-columns: 1fr auto; padding-top: 12px; padding-bottom: 10px; }
  .gh-mast-left { display: none; }
  .gh-mast .gh-logo { text-align: left; }
  .gh-logo .l1 { font-size: 1.15rem; }
  .gh-logo .l2 { font-size: 1.45rem; }
  .gh-btn { font-size: 0.9375rem; padding: 10px 12px; }
  .gh-nav ul { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 20px; padding-bottom: 6px; scrollbar-width: none; }
  .gh-nav ul::-webkit-scrollbar { display: none; }
  .gh-hero { padding-top: 20px; }
  .gh-hero.hero-3, .gh-hero.hero-2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "side" "justin"; }
  .gh-lead-img, .hero-1 .gh-lead-img, .hero-2 .gh-lead-img { aspect-ratio: 4 / 3; margin: 0 calc(-1 * var(--gh-gutter)); }
  .gh-justin ul { grid-template-columns: 1fr; }
  .gh-soon-lead { grid-template-columns: 1fr; gap: 18px; }
  .gh-top ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gh-top li a { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--gh-hair); }
  .gh-top .gh-n { top: 6px; left: -6px; width: 26px; height: 26px; font-size: 0.8125rem; }
  .gh-top h3 { margin-top: 0; }
  .gh-cards { gap: 20px 14px; }
  .gh-card h3 { font-size: 1.0625rem; }
  .gh-card p { display: none; }
  .gh-card:first-child { grid-template-columns: 1fr; gap: 14px; }
  .gh-card:first-child p { display: block; }
  .gh-latest a { grid-template-columns: 88px 1fr; gap: 14px; }
  .gh-latest h3 { font-size: 1.125rem; }
  .gh-signup .row { flex-direction: column; gap: 4px; }
  .gh-signup .gh-btn { width: 100%; }
}
/* A category with only two stories: two even cards instead of one wide card and a lone small one. */
.gh-cards:has(> .gh-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gh-cards:has(> .gh-card:nth-child(2):last-child) > .gh-card { grid-column: auto; display: block; }
.gh-cards:has(> .gh-card:nth-child(2):last-child) > .gh-card .gh-img { aspect-ratio: 16 / 10; margin: 0 0 14px; }
.gh-cards:has(> .gh-card:nth-child(2):last-child) > .gh-card h3 { font: 700 clamp(1.4rem, 2.4vw, 1.9rem)/1.1 var(--gh-serif); }
@media (max-width: 720px) {
  .gh-cards:has(> .gh-card:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
  .gh-cards:has(> .gh-card:nth-child(2):last-child) > .gh-card p { display: block; }
}
/* When the menu needs two rows (tablet widths), the rows start at the left instead of spreading. */
@media (max-width: 1180px) { .gh-nav ul { justify-content: flex-start; column-gap: 22px; } }