/* 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 { border-top: 2px solid var(--fashion-ink); padding-top: 1.1rem; }
.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; }
}