/* Behavior and utility refinements for the Fashion / Beauty / Style cluster.
   The homepage/category center and the header VISUAL DESIGN are approved by
   another designer and are deliberately NOT restyled here — this layer only
   carries the v2.1 mandate: the sticky rubric menu with its compact wordmark
   chip, the vertical Cover Story sidebar unit, article chrome (mono crumb, ink
   rule, share row), Coming-soon states, and the branded utility/author/404/
   data pages.
   Bump ?v= in EVERY attach point when editing: layouts/fashion-edit/*.ejs,
   sector-shared/_utility.ejs, sector-shared/author.ejs, sector-shared/404.ejs,
   sector-shared/data-page.ejs, and the sector test. */

/* Pages rendered without extra body classes still resolve the sector palette;
   mirror the base definitions at the layout level. */
.layout-fashion-edit {
  --fashion-line: #d9d5d0;
  --sector-accent: var(--vuga-color-accent, #8a5511);
  --fashion-ink: #171717;
  --fashion-muted: #777;
}

/* The screen-reader heading needs real clipping on pages where the empty
   style.min.css placeholder is served. */
.layout-fashion-edit .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 🔒 Sticky rubric menu (v2.1): the hairline nav stays pinned to the top of the
   screen while the reader scrolls, and the compact wordmark chip appears
   beside it once the tall approved masthead has scrolled away. Colors, fonts,
   and the centered composition of the approved header are untouched. */
.layout-fashion-edit .sector-nav[data-fashion-nav] { position: sticky; top: 0; z-index: 40; background: #fff; }
.layout-fashion-edit .fashion-nav-logo { display: none; align-items: center; padding-right: 1rem; margin-right: .6rem; border-right: 1px solid var(--fashion-line); font: 600 .78rem/1 var(--sector-head, Outfit, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--fashion-ink); }
.fe-scrolled .layout-fashion-edit .fashion-nav-logo { display: inline-flex; }

/* 🔒 Cover Story sidebar unit — the only homepage addition. Vertical 3:4
   cover, up to two text lines beneath, closing link; Coming soon while the
   desk is empty. Portrait Cover Story art never enters a horizontal slot. */
.layout-fashion-edit .fashion-home--rail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4rem; align-items: start; }
.layout-fashion-edit .fashion-home-main { min-width: 0; }
.layout-fashion-edit .fashion-home-side { position: sticky; top: 4.2rem; }
.layout-fashion-edit .fashion-cs-side { }
.layout-fashion-edit .fashion-cs-side h2 { margin: .9rem 0 0; font: 600 .82rem/1 var(--sector-head, Outfit, sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--fashion-ink); }
.layout-fashion-edit .fashion-cs-feature { display: block; margin-top: 1rem; }
.layout-fashion-edit .fashion-cs-feature .sector-media { aspect-ratio: 3 / 4; }
.layout-fashion-edit .fashion-cs-feature h3 { font: 400 1.5rem/1.15 var(--sector-head, Outfit, sans-serif); letter-spacing: -.01em; margin: .8rem 0 .4rem; color: var(--fashion-ink); }
.layout-fashion-edit .fashion-cs-byline { display: block; margin-bottom: .6rem; }
.layout-fashion-edit .fashion-cs-more { display: block; padding: .9rem 0; border-top: 1px solid var(--fashion-line); }
.layout-fashion-edit .fashion-cs-more h4 { font: 400 1.2rem/1.25 var(--sector-head, Outfit, sans-serif); margin: 0; color: var(--fashion-ink); }
.layout-fashion-edit .fashion-cs-all { display: block; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--fashion-line); font: 600 11px/1.3 var(--sector-head, Outfit, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--sector-accent); }
.layout-fashion-edit .fashion-cs-empty { font: 400 1.05rem/1.5 var(--sector-body, 'EB Garamond', serif); font-style: italic; color: var(--fashion-muted); margin: 1rem 0 0; }

/* 🔒 Cover Story category page: magazine treatment — the newest longread as a
   large 3:4 cover beside its dek, the rest as portrait cards. */
.layout-fashion-edit .fashion-cs-page { padding-bottom: 2rem; }
.layout-fashion-edit .fashion-cs-hero { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 2.5rem; align-items: end; padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--fashion-line); margin-bottom: 2.5rem; }
.layout-fashion-edit .fashion-cs-hero .sector-media { aspect-ratio: 3 / 4; }
.layout-fashion-edit .fashion-cs-hero h2 { font: 300 clamp(1.8rem, 3vw, 2.8rem)/1.05 var(--sector-head, Outfit, sans-serif); letter-spacing: -.02em; margin: .8rem 0 .5rem; }
.layout-fashion-edit .fashion-cs-hero h2 a { color: inherit; }
.layout-fashion-edit .fashion-cs-hero p { font: 400 1.2rem/1.5 var(--sector-body, 'EB Garamond', serif); max-width: 34rem; }
.layout-fashion-edit .fashion-cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 2rem; }
.layout-fashion-edit .fashion-cs-grid .sector-media { aspect-ratio: 3 / 4; }
.layout-fashion-edit .fashion-cs-grid h3 { font: 400 1.35rem/1.2 var(--sector-head, Outfit, sans-serif); margin: .8rem 0 .3rem; }
.layout-fashion-edit .fashion-cs-grid h3 a { color: inherit; }

/* 🔒 Approved-but-empty rubrics publish a Coming soon card. */
.layout-fashion-edit .fashion-coming-soon { grid-column: 1 / -1; text-align: center; border-block: 1px solid var(--fashion-line); padding: 3rem 1rem; }
.layout-fashion-edit .fashion-coming-soon .fashion-label { color: var(--fashion-muted); }
.layout-fashion-edit .fashion-coming-soon p { font: 400 1.25rem/1.5 var(--sector-body, 'EB Garamond', serif); font-style: italic; margin: 1rem auto 0; max-width: 34rem; }

/* 🔒 Article chrome: mono-caps breadcrumb with the accent Home link, ink rule
   under the byline, share chips in the edition's voice. */
.layout-fashion-edit .fashion-crumb { font: 600 10px/1.4 var(--sector-head, Outfit, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--fashion-muted); margin-bottom: 3rem; }
.layout-fashion-edit .fashion-crumb a { color: var(--sector-accent); }
.layout-fashion-edit .fashion-byline--rule { display: block; border-bottom: 2px solid var(--fashion-ink); padding-bottom: 1.1rem; }
.layout-fashion-edit .fashion-share { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .55rem; margin: 1.4rem 0 0; }
.layout-fashion-edit .fashion-share > span { font: 600 10px/1 var(--sector-head, Outfit, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--fashion-muted); margin-right: .3rem; }
.layout-fashion-edit .fashion-share a { border: 1px solid var(--fashion-line); padding: .5rem .8rem; font: 600 10px/1 var(--sector-head, Outfit, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--fashion-ink); }
.layout-fashion-edit .fashion-share a:hover { border-color: var(--sector-accent); color: var(--sector-accent); }

/* 🔒 Utility pages (about, advertise, legal, contact) wear the edition's
   editorial header: uppercase tracked crumb, light display heading, hairline. */
.layout-fashion-edit .sector-utility-wrap { max-width: 60rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem 5rem; }
.layout-fashion-edit .sector-utility .sector-crumb, .layout-fashion-edit .fashion-crumb { margin-bottom: 1.2rem; }
.layout-fashion-edit .sector-utility .sector-crumb { font: 600 10px/1.4 var(--sector-head, Outfit, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--fashion-muted); }
.layout-fashion-edit .sector-utility .sector-crumb a { color: var(--sector-accent); }
.layout-fashion-edit .sector-utility > h1 { font: 300 clamp(2.4rem, 5vw, 4rem)/1 var(--sector-head, Outfit, sans-serif); text-transform: uppercase; letter-spacing: .04em; margin: .4rem 0 0; padding-bottom: 1.6rem; border-bottom: 2px solid var(--fashion-ink); }
.layout-fashion-edit .sector-utility .sector-utility-intro { font: 400 1.25rem/1.55 var(--sector-body, 'EB Garamond', serif); font-style: italic; color: var(--fashion-muted); max-width: 40rem; }
.layout-fashion-edit .sector-about-body { font: 400 1.12rem/1.7 var(--sector-body, 'EB Garamond', serif); }
.layout-fashion-edit .sector-about-body p { margin: 0 0 1.4rem; }
.layout-fashion-edit .sector-utility h2 { font: 400 1.6rem/1.2 var(--sector-head, Outfit, sans-serif); letter-spacing: .02em; }
.layout-fashion-edit .sector-utility a { color: var(--sector-accent); }
.layout-fashion-edit .sector-utility .about-team, .layout-fashion-edit .sector-utility .about-network { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--fashion-line); }
.layout-fashion-edit .sector-utility .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.6rem; padding: 0; list-style: none; }
.layout-fashion-edit .sector-utility .team-member img { border-radius: 50%; background: var(--fashion-line); }
.layout-fashion-edit .sector-utility .team-member .name { display: block; font: 400 1.1rem/1.2 var(--sector-head, Outfit, sans-serif); margin-top: .6rem; }
.layout-fashion-edit .sector-utility .team-member .title, .layout-fashion-edit .sector-utility .team-member .line { display: block; font: 600 10px/1.5 var(--sector-head, Outfit, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--fashion-muted); }

/* 🔒 Contact page: the form speaks the edition's language; exactly one h1. */
.layout-fashion-edit .sector-utility #contact-page-title { font: 300 clamp(2.4rem, 5vw, 4rem)/1 var(--sector-head, Outfit, sans-serif); text-transform: uppercase; letter-spacing: .04em; margin: .4rem 0 0; padding-bottom: 1.6rem; border-bottom: 2px solid var(--fashion-ink); }
.layout-fashion-edit .vuga-contact-form label { font: 600 10px/1.4 var(--sector-head, Outfit, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--fashion-muted); }
.layout-fashion-edit .vuga-contact-form input, .layout-fashion-edit .vuga-contact-form textarea { width: 100%; border: 1px solid var(--fashion-line); border-radius: 0; padding: .75rem .9rem; font: 400 1rem/1.4 var(--sector-body, 'EB Garamond', serif); background: #fff; }
.layout-fashion-edit .vuga-contact-form input:focus, .layout-fashion-edit .vuga-contact-form textarea:focus { outline: none; border-color: var(--sector-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sector-accent) 16%, transparent); }
.layout-fashion-edit .vuga-contact-form button[type="submit"] { border: 1px solid var(--fashion-ink); border-radius: 0; padding: .85rem 1.5rem; background: var(--fashion-ink); color: #fff; font: 600 10px/1 var(--sector-head, Outfit, sans-serif); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.layout-fashion-edit .vuga-contact-form button[type="submit"]:hover { background: var(--sector-accent); border-color: var(--sector-accent); }

/* 🔒 Author page in the edition's voice: tracked AUTHOR kicker, light display
   name over an ink rule, portrait tile, Garamond biography, card grid. */
.layout-fashion-edit .sector-wrap { max-width: 60rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem 5rem; }
.layout-fashion-edit .sector-author-page { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 2rem; align-items: start; padding-bottom: 1.6rem; border-bottom: 2px solid var(--fashion-ink); }
.layout-fashion-edit .sector-author-page-photo { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; background: var(--fashion-line); }
.layout-fashion-edit .sector-author-page .sector-kicker { font: 600 10px/1.4 var(--sector-head, Outfit, sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--sector-accent); }
.layout-fashion-edit .sector-author-page h1 { font: 300 clamp(2.2rem, 5vw, 3.6rem)/1 var(--sector-head, Outfit, sans-serif); text-transform: uppercase; letter-spacing: .04em; margin: .5rem 0 .8rem; }
.layout-fashion-edit .sector-author-bio { max-width: 40rem; font: 400 1.12rem/1.7 var(--sector-body, 'EB Garamond', serif); color: var(--fashion-ink); }
.layout-fashion-edit .sector-author-title, .layout-fashion-edit .sector-author-credentials { margin: .5rem 0 0; font: 600 10px/1.6 var(--sector-head, Outfit, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--fashion-muted); }
.layout-fashion-edit .sector-author-title { color: var(--sector-accent); }
.layout-fashion-edit .sector-section-head { border-bottom: 1px solid var(--fashion-line); }
.layout-fashion-edit .sector-section-head h2 { font: 400 1.5rem/1.2 var(--sector-head, Outfit, sans-serif); }
.layout-fashion-edit .sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; padding-top: 2rem; }
.layout-fashion-edit .sector-card .sector-media { aspect-ratio: 4 / 5; }
.layout-fashion-edit .sector-card h3 { font: 400 1.25rem/1.2 var(--sector-head, Outfit, sans-serif); margin: .7rem 0 .3rem; }
.layout-fashion-edit .sector-card .sector-kicker { font: 600 10px/1.4 var(--sector-head, Outfit, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--sector-accent); }
.layout-fashion-edit .sector-byline { font: 600 10px/1.5 var(--sector-head, Outfit, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--fashion-muted); }

/* 🔒 Data hubs keep the shared data markup, framed by the edition's rules. */
.layout-fashion-edit .data-main { width: min(60rem, 100% - 3rem); margin: 0 auto; }
.layout-fashion-edit .data-main .data-breadcrumb { font: 600 10px/1.5 var(--sector-head, Outfit, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
.layout-fashion-edit .data-main .data-breadcrumb a { color: var(--sector-accent); }
.layout-fashion-edit .data-main > h1 { font: 300 clamp(2.2rem, 5vw, 3.6rem)/1.05 var(--sector-head, Outfit, sans-serif); text-transform: uppercase; letter-spacing: .04em; margin: .5rem 0 1.2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--fashion-ink); }
.layout-fashion-edit .data-main > .data-capsule { border: 0; border-left: 3px solid var(--sector-accent); background: transparent; padding: .4rem 0 .4rem 1.1rem; margin: 1rem 0 1.6rem; font: 400 1.1rem/1.55 var(--sector-body, 'EB Garamond', serif); }
.layout-fashion-edit .data-main .data-table thead { background: var(--fashion-ink); }
.layout-fashion-edit .data-main .data-table th, .layout-fashion-edit .data-main .data-table td { border-color: var(--fashion-line); }
.layout-fashion-edit .data-main .data-table a { color: var(--sector-accent); }
.layout-fashion-edit .data-main .data-pagination a, .layout-fashion-edit .data-main .data-pagination > span { border: 1px solid var(--fashion-line); font: 600 10px/1 var(--sector-head, Outfit, sans-serif); letter-spacing: .12em; }
.layout-fashion-edit .data-main .data-attribution { border-top: 3px solid var(--sector-accent); }

@media (max-width: 1100px) {
  .layout-fashion-edit .fashion-home--rail { grid-template-columns: 1fr; }
  .layout-fashion-edit .fashion-home-side { position: static; max-width: 30rem; }
  .layout-fashion-edit .fashion-cs-grid { grid-template-columns: repeat(2, 1fr); }
  .layout-fashion-edit .sector-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .layout-fashion-edit .fashion-cs-hero { grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
  .layout-fashion-edit .fashion-cs-grid { grid-template-columns: 1fr; }
  .layout-fashion-edit .sector-grid { grid-template-columns: 1fr; }
  .layout-fashion-edit .sector-author-page { grid-template-columns: 1fr; }
  .layout-fashion-edit .sector-author-page-photo { width: 5.5rem; height: 5.5rem; }
}

/* ---- 2026-09-05 canon width gate (network-wide fix): lift the base
   sector-publication.css 760px squeeze so utility pages fill the shared
   1180px nav/footer container. Same fix as arts/bp/edu/ent. */
.layout-fashion-edit .sector-utility-wrap { width: min(1180px, 100%); margin: 0 auto; }
.layout-fashion-edit .sector-utility { width: 100%; max-width: none; margin: 0; }
.layout-fashion-edit .sector-utility--about > .sector-about-body,
.layout-fashion-edit .sector-utility--about > .about-team,
.layout-fashion-edit .sector-utility--about > .about-network { width: 100%; margin-inline: 0; }
/* wave 1d: the legacy family rule above still caps the wrap at 60rem —
   max-width must also be lifted, width alone is not enough. */
.layout-fashion-edit .sector-utility-wrap { max-width: min(1180px, 100%); width: 100%; }

/* ---- 2026-09-06 wave 3: no breadcrumb on author/about/data (removed in
   markup); author name, bio, about body and data title read smaller. */
.layout-fashion-edit .sector-author-page-content h1 { font-size: clamp(1.5rem, 3vw, 2rem) !important; }
.layout-fashion-edit .sector-author-bio { font-size: .92rem !important; }
.layout-fashion-edit .sector-about-body { font-size: .95rem !important; }
.layout-fashion-edit .sector-about-body h1, .layout-fashion-edit .sector-utility > h1 { font-size: clamp(1.6rem, 4vw, 2.2rem) !important; }
.layout-fashion-edit .data-main h1 { font-size: clamp(1.6rem, 4vw, 2.2rem) !important; }

/* 🔒 fe-header (user, 2026-09-07, r3): desktop keeps the centered badge and
   centered rubric row. Mobile (<=760): one bar — burger left, centered badge,
   search right — the horizontal rubric row is removed and THIS bar is the
   sticky header (same look stuck as at rest). */
.layout-fashion-edit .sector-masthead.fe-masthead { min-height: 108px; padding: 1.7rem 1.25rem 1.1rem; }
.layout-fashion-edit .fe-masthead { grid-template-columns: 1fr; justify-items: center; }
.layout-fashion-edit .fe-masthead .sector-menu { display: none; }
.layout-fashion-edit .fe-search-m { display: none; }
.layout-fashion-edit .fe-brand { gap: 0; }
.layout-fashion-edit .fe-brand-glyph { font: 500 2rem/1 var(--sector-head, Outfit, sans-serif); letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; color: var(--fashion-ink, #171717); }
.layout-fashion-edit .fe-brand-glyph .fe-amp { font-style: normal; color: var(--sector-accent, #8a5511); }
.layout-fashion-edit .sector-nav[data-fashion-nav] > div { justify-content: center; }
.layout-fashion-edit .sector-nav[data-fashion-nav] a,
.layout-fashion-edit .sector-nav[data-fashion-nav] .fashion-nav-search button { font: 500 12px/1 var(--sector-ui, Outfit, sans-serif); letter-spacing: .2em; text-transform: uppercase; }
@media (min-width: 761px) {
  .layout-fashion-edit .sector-nav[data-fashion-nav] > div { position: relative; }
  .layout-fashion-edit .fashion-nav-search { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; }
}
@media (max-width: 760px) {
  .layout-fashion-edit .sector-masthead.fe-masthead { position: sticky; top: 0; z-index: 40; background: #fff; min-height: 64px; padding: .6rem 1rem; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: stretch; }
  .layout-fashion-edit .fe-masthead .sector-menu { display: block; justify-self: start; font-size: 1.3rem; }
  .layout-fashion-edit .fe-brand { justify-self: center; }
  .layout-fashion-edit .fe-brand-glyph { font-size: 1.5rem; letter-spacing: .18em; text-indent: .18em; }
  .layout-fashion-edit .fe-search-m { display: inline-flex; justify-self: end; padding: .35rem; }
  .layout-fashion-edit .fe-search-m svg { width: 20px; height: 20px; }
  .layout-fashion-edit .sector-nav[data-fashion-nav] { display: none; }
}

/* 🔒 fe-home r4 (user, 2026-09-07): the first homepage segment is the only
   two-column region — hero (always the newest story) left; right rail is the
   random fresh story (photo + info) above the Cover Story unit. Every row
   below runs the full site width. */
.layout-fashion-edit .fashion-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4rem; align-items: start; }
.layout-fashion-edit .fashion-fresh { display: grid; gap: .55rem; }
.layout-fashion-edit .fashion-fresh a { display: grid; gap: .55rem; }
.layout-fashion-edit .fashion-fresh .sector-media { aspect-ratio: 4/3; }
.layout-fashion-edit .fashion-fresh h3 { font: 300 1.5rem/1.15 var(--sector-head, Outfit, sans-serif); margin: 0; }
@media (max-width: 1000px) { .layout-fashion-edit .fashion-top { grid-template-columns: minmax(0, 1fr); } }

/* 🔒 fe-home r5 (user, 2026-09-08): category columns and the category-5 row.
   Card anatomy everywhere on the homepage: category in the accent, title,
   excerpt; byline on its own line, publish date beneath it. */
.layout-fashion-edit .fashion-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.layout-fashion-edit .fashion-col { display: grid; gap: 1.7rem; align-content: start; }
.layout-fashion-edit .fashion-col-title { margin: 0 0 .3rem; padding-bottom: .7rem; font: 600 .82rem/1 var(--sector-head, Outfit, sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--fashion-ink, #171717); }
.layout-fashion-edit .fashion-card { display: grid; gap: .5rem; align-content: start; }
.layout-fashion-edit .fashion-card a { display: grid; gap: .5rem; }
.layout-fashion-edit .fashion-card .sector-media { aspect-ratio: 3/4; }
.layout-fashion-edit .fashion-card h3, .layout-fashion-edit .fashion-card h4 { font: 300 1.45rem/1.18 var(--sector-head, Outfit, sans-serif); margin: 0; }
.layout-fashion-edit .fashion-card p { margin: 0; font: 400 1rem/1.55 'EB Garamond', Georgia, serif; color: var(--fashion-muted, #777); }
.layout-fashion-edit .fashion-meta { display: grid; gap: .18rem; }
.layout-fashion-edit .fashion-date { font: 500 .72rem/1.4 Outfit, sans-serif; letter-spacing: .08em; color: var(--fashion-muted, #777); }
.layout-fashion-edit .fashion-row5 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.layout-fashion-edit .fashion-row5 .fashion-card .sector-media { aspect-ratio: 3/4; }
@media (max-width: 1000px) { .layout-fashion-edit .fashion-cols, .layout-fashion-edit .fashion-row5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .layout-fashion-edit .fashion-cols, .layout-fashion-edit .fashion-row5 { grid-template-columns: minmax(0, 1fr); } }
/* r5b (user): the homepage carries no rules at all — strip the hero underline
   and the Cover Story link separators in the rail. */
.layout-fashion-edit .fashion-hero { border-bottom: 0; padding-bottom: 0; }
.layout-fashion-edit .fashion-cs-more { border-top: 0; }
.layout-fashion-edit .fashion-cs-all { border-top: 0; padding-top: 0; }
/* r6 (user): in the columns section the photos must sit on a shared horizontal
   line. On desktop the four columns collapse into one grid (display:contents,
   column-major flow) so every row is as tall as its tallest card. */
@media (min-width: 1001px) {
  .layout-fashion-edit .fashion-cols { grid-template-rows: repeat(4, auto); grid-auto-flow: column; }
  .layout-fashion-edit .fashion-col { display: contents; }
}
/* 🔒 fe-category (user, 2026-09-08): category name in the accent, a smaller
      description beneath it, the hairline divider the base head already
      draws, then a uniform 2x3 card grid with the homepage anatomy. */
.layout-fashion-edit .fe-cat-head h1 { color: var(--sector-accent, #8a5511); }
.layout-fashion-edit .fe-cat-head p { max-width: 720px; margin: 1rem auto 0; font: 400 1.02rem/1.55 'EB Garamond', Georgia, serif; color: var(--fashion-muted, #777); }
.layout-fashion-edit .fe-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; margin-top: 3rem; }
.layout-fashion-edit .fe-cat-grid .fashion-card h2 { font: 300 1.45rem/1.18 var(--sector-head, Outfit, sans-serif); margin: 0; }
@media (max-width: 1000px) { .layout-fashion-edit .fe-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .layout-fashion-edit .fe-cat-grid { grid-template-columns: minmax(0, 1fr); } }
/* r8 (user): the category title is the short name in the accent at a smaller
      scale; badges of long wordmarks keep a tighter tracking so nothing
      overlaps. */
.layout-fashion-edit .fe-cat-head { min-height: 0; padding-bottom: 2.2rem; }
.layout-fashion-edit .fe-cat-head h1 { font: 300 clamp(1.9rem, 3.2vw, 3rem)/1.05 var(--sector-head, Outfit, sans-serif); letter-spacing: .04em; text-transform: uppercase; }
@media (min-width: 761px) { .layout-fashion-edit .fe-brand-glyph { font-size: clamp(1.7rem, 2.6vw, 2rem); letter-spacing: .14em; text-indent: .14em; } }
/* 🔒 fe-article r9 (user, 2026-09-08): no breadcrumb, much smaller headline,
      body links in the accent, FAQ/Sources ahead of a compact left-aligned
      author note (name + one short line, profile link on the avatar), and a
      Related row stretched to the full template width. */
.layout-fashion-edit .fashion-article h1 { font: 300 clamp(1.9rem, 3.4vw, 3.1rem)/1.12 var(--sector-head, Outfit, sans-serif); letter-spacing: -.01em; }
.layout-fashion-edit .fashion-article-body a { color: var(--sector-accent, #8a5511); }
.layout-fashion-edit .fashion-article .sector-related-row { max-width: 1160px; }
.layout-fashion-edit .sector-author--fe { display: flex; gap: .9rem; align-items: flex-start; background: none; border: 0; padding: 0; max-width: 700px; margin: 2.6rem auto 0; text-align: left; }
.layout-fashion-edit .sector-author--fe .sector-author-avatar { border-radius: 50%; }
.layout-fashion-edit .sector-author--fe .sector-author-avatar-link { display: inline-flex; flex: 0 0 auto; }
.layout-fashion-edit .sector-author--fe h2 { margin: 0; font: 500 .95rem/1.2 var(--sector-head, Outfit, sans-serif); }
.layout-fashion-edit .sector-author--fe h2 a { color: var(--fashion-ink, #171717); }
.layout-fashion-edit .sector-author--fe .sector-author-fe-spec { margin: .25rem 0 0; font: 400 .78rem/1.4 var(--sector-ui, Outfit, sans-serif); color: var(--fashion-muted, #777); }