/*
 * The section rhythms.
 *
 * One template, six personalities. What changes per section is the rhythm its
 * layout_recipe asks for — the crop, the density, whether there is photography
 * at all — never the vocabulary. Fashion runs tall portraits; Beauty runs
 * squares with air around them; Home & Decor runs one wide picture; Lifestyle
 * runs no picture at all.
 *
 * That is why these are separate blocks rather than one card grid with
 * modifiers: a card grid would make every section look like every other, which
 * is the exact thing the design exists to avoid.
 */

/* ── Opening diptych ───────────────────────────────────── */

.fg-dip { display: grid; gap: 28px; padding-block: 28px 44px; }
@media (min-width: 1024px) {
  .fg-dip { grid-template-columns: 1.55fr 1fr; gap: 56px; padding-block: 40px 76px; }
}
.fg-dip__h { font-size: clamp(34px, 5.2vw, 82px); margin-top: 16px; }
.fg-dip__dek { margin: 16px 0 0; max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); font-weight: 300; line-height: 1.55; color: var(--ink-2); }
.fg-dip__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }

/* The Argument — the typographic half. No photograph, ever. */
.fg-arg { border-top: 1px solid var(--ink); padding-top: 14px; }
.fg-arg__h { font-size: clamp(26px, 2.6vw, 40px); margin-top: 12px; }
.fg-arg__dek { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

.fg-also { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.fg-also li { border-bottom: 1px solid var(--rule); }
.fg-also a { display: block; padding-block: 11px; }
.fg-also a:hover { color: var(--vir); }
.fg-also__t { display: block; font-size: 17px; line-height: 1.3; margin-top: 3px; }

/* ── The week, indexed ─────────────────────────────────── */

.fg-week { border-top: 1px solid var(--ink); }
.fg-week__r {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
  padding-block: 11px;
  transition: padding 0.4s var(--ease-fg), background 0.4s var(--ease-fg);
}
.fg-week__r:hover { background: var(--chalk-2); padding-left: 10px; }
@media (min-width: 900px) {
  .fg-week__r { grid-template-columns: 72px 118px minmax(0, 1fr) 96px 46px; gap: 20px; }
}
.fg-week__t { font-size: clamp(15px, 1.2vw, 19px); min-width: 0; }
.fg-week__r:hover .fg-week__t { color: var(--vir); }
.fg-week__x { display: none; }
@media (min-width: 900px) { .fg-week__x { display: block; } }

/* ── Fashion: the staggered sequence ───────────────────── */

.fg-stag { display: grid; gap: 22px; }
@media (min-width: 900px) { .fg-stag { grid-template-columns: repeat(4, 1fr); gap: 26px; align-items: start; } }
/* The stagger: each column starts lower than the last. */
@media (min-width: 900px) {
  .fg-stag > :nth-child(2) { margin-top: 44px; }
  .fg-stag > :nth-child(3) { margin-top: 18px; }
  .fg-stag > :nth-child(4) { margin-top: 66px; }
}
.fg-stag__t { margin-top: 12px; font-size: clamp(17px, 1.3vw, 21px); }
.fg-stag a:hover .fg-stag__t { color: var(--vir); }

/* ── Beauty: the specimen sheet ────────────────────────── */

.fg-spec { display: grid; gap: 26px; }
@media (min-width: 720px) { .fg-spec { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (min-width: 1100px) { .fg-spec { grid-template-columns: repeat(4, 1fr); gap: 44px; } }
.fg-spec__t { margin-top: 14px; font-size: 17px; line-height: 1.3; }
.fg-spec a:hover .fg-spec__t { color: var(--vir); }

/* ── Home & Decor: the atmospheric spread ──────────────── */

.fg-atmo__cap { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 1024px) { .fg-atmo__cap { grid-template-columns: 1.2fr 1fr; gap: 64px; } }
.fg-atmo__h { font-size: clamp(30px, 3.6vw, 62px); }
.fg-atmo__support { margin: 0; padding: 0; list-style: none; }
.fg-atmo__support li { border-top: 1px solid var(--rule); }
.fg-atmo__support a { display: block; padding-block: 10px; font-size: 16px; }
.fg-atmo__support a:hover { color: var(--vir); }

/* ── Garden: the horizontal rail ───────────────────────── */

/* Native scroll-snap. No carousel script, nothing to break. */
.fg-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.fg-rail::-webkit-scrollbar { display: none; }
.fg-rail > * { scroll-snap-align: start; }
@media (min-width: 720px) { .fg-rail { grid-auto-columns: 38%; gap: 24px; } }
@media (min-width: 1200px) { .fg-rail { grid-auto-columns: 25%; } }
.fg-rail__t { margin-top: 12px; font-size: 17px; }

/* ── Lifestyle: type only ──────────────────────────────── */

.fg-typo { border-block: 1px solid var(--ink); padding-block: 40px; }
@media (min-width: 1024px) { .fg-typo { padding-block: 72px; } }
.fg-typo__h { font-size: clamp(32px, 5vw, 88px); max-width: 20ch; }
.fg-typo__d { margin: 22px 0 0; max-width: 58ch; font-size: clamp(17px, 1.4vw, 21px); font-weight: 300; line-height: 1.6; color: var(--ink-2); }

/* ── The desk ──────────────────────────────────────────── */

.fg-desk { display: grid; gap: 20px; }
@media (min-width: 720px) { .fg-desk { grid-template-columns: repeat(3, 1fr); gap: 34px; } }
.fg-desk__n { margin: 12px 0 2px; font-size: 20px; }
.fg-desk__r { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vir); }
.fg-desk__b { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* ── The Edit block ────────────────────────────────────── */

.fg-edit { background: var(--nox); color: var(--nox-fg); padding-block: 44px; }
@media (min-width: 1024px) { .fg-edit { padding-block: 92px; } }
.fg-edit__head { display: grid; gap: 22px; margin-bottom: 26px; align-items: end; }
@media (min-width: 1024px) { .fg-edit__head { grid-template-columns: 1.25fr 1fr; gap: 60px; margin-bottom: 42px; } }
.fg-edit__h { font-size: clamp(30px, 3.8vw, 64px); margin-top: 12px; }
.fg-edit__note { margin: 0; font-size: 16px; line-height: 1.6; color: var(--nox-muted); }

.fg-edit__lead { display: grid; gap: 22px; }
@media (min-width: 900px) { .fg-edit__lead { grid-template-columns: 340px minmax(0, 1fr); gap: 44px; } }

.fg-picks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nox-rule); }
.fg-picks li { border-bottom: 1px solid var(--nox-rule); }
.fg-picks a {
  display: grid;
  gap: 4px 20px;
  padding-block: 14px;
  transition: padding 0.4s var(--ease-fg);
}
@media (min-width: 720px) { .fg-picks a { grid-template-columns: 150px minmax(0, 1fr) 120px; align-items: baseline; } }
.fg-picks a:hover { padding-left: 10px; color: var(--vir-lift); }
.fg-picks__w { font-size: 17px; line-height: 1.5; color: #c9cec9; }

.fg-edit__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 26px;
}
.fg-edit__links { display: flex; flex-wrap: wrap; gap: 26px; }

/* ── Category masthead ─────────────────────────────────── */

.fg-cat { border-bottom: 1px solid var(--ink); padding-block: 26px 20px; }
.fg-cat__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ── Author ────────────────────────────────────────────── */

.fg-auth { display: grid; gap: 26px; padding-block: 28px; }
@media (min-width: 900px) { .fg-auth { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; } }
.fg-auth__h { font-size: clamp(40px, 8vw, 110px); }
.fg-auth__bio { margin: 20px 0 0; max-width: 58ch; font-size: 18.5px; line-height: 1.65; color: var(--ink-2); }
.fg-auth__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fg-auth__chip {
  border: 1px solid var(--rule);
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate);
}