/* Behavior and utility refinements for the Local Media cluster
   (citynewsmiami, miamiinnews, miamipride, rocklandreviewnews,
   vipjerseyexpress, uniontimestoday). 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: sticky rubric
   menu with a compact wordmark, the vertical Cover Story unit, article chrome
   (crumb, ink rule, share), Coming-soon states, and the branded
   utility/author/404/data pages in the local idiom (Instrument Serif
   headlines at a single weight, Inter labels, warm tinted paper, the accent
   frame echoed on boxes).
   Bump ?v= in EVERY attach point when editing: layouts/local-frame/*.ejs,
   sector-shared/_utility.ejs, sector-shared/author.ejs,
   sector-shared/404.ejs, sector-shared/data-page.ejs, and the sector test. */

/* The base sheet declares the sector tokens on the body class; mirror them
   at the .layout- level so pages that drop the body wrapper (author, 404,
   utilities, data) keep the sector colors. The accent stays per-site. */
.layout-local-frame {
  --sector-head: 'Instrument Serif', Georgia, serif;
  --sector-body: Inter, Arial, sans-serif;
  --sector-ui: Inter, Arial, sans-serif;
  --sector-ink: #171512; --sector-ink-soft: #39342E; --sector-paper: #FFFFFF;
  --sector-warm: #F4EFE6; --sector-line: #DDD5C8; --sector-muted: #6D665E;
  --sector-accent: var(--vuga-color-accent, #0E7C86);
}

/* Screen-reader-only utility: previews ship an empty style.min.css stub, so
   the refinement layer owns this class for the whole layout. */
.layout-local-frame .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 menu with a compact logo (v2.1): the approved masthead, ribbon
   and nav composition are untouched — the rubric menu pins to the top while
   scrolling and reveals a compact serif wordmark once the masthead has
   scrolled away. */
.layout-local-frame .sector-nav[data-local-nav] { position: sticky; top: 0; z-index: 40; background: var(--sector-paper, #fff); }
.layout-local-frame .lf-nav-logo { display: none; align-items: center; padding-right: 1rem; margin-right: .4rem; border-right: 1px solid var(--sector-line, #DDD5C8); }
.layout-local-frame .lf-nav-logo strong { font: 400 1.15rem/1 var(--sector-head, 'Instrument Serif', Georgia, serif); letter-spacing: .01em; color: var(--sector-ink, #171512); }
.lf-scrolled .layout-local-frame .lf-nav-logo { display: inline-flex; }

/* 🔒 Cover Story sidebar unit (the only homepage addition): a vertical 3:4
   portrait cover on the right of the latest band, up to two text rows, the
   closing link, and Coming soon while the desk is empty. Its art never
   enters the horizontal cover grid — the templates filter the flow. */
.layout-local-frame .local-home-late { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.25rem; align-items: start; }
.layout-local-frame .lf-cs { position: sticky; top: 4.4rem; border-top: 2px solid var(--sector-ink, #171512); padding-top: 1.1rem; }
.layout-local-frame .lf-cs > h2 { margin: 0 0 .9rem; font: 600 .72rem/1.5 var(--sector-ui, Inter, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--sector-accent); }
.layout-local-frame .lf-cs-feature { display: block; }
.layout-local-frame .lf-cs-feature .sector-media { aspect-ratio: 3 / 4; }
.layout-local-frame .lf-cs-feature h3 { font: 400 1.2rem/1.15 var(--sector-head, 'Instrument Serif', Georgia, serif); margin: .55rem 0 .3rem; }
.layout-local-frame .lf-cs-feature small { color: var(--sector-muted, #6D665E); font: 600 .72rem/1.4 var(--sector-ui, Inter, sans-serif); }
.layout-local-frame .lf-cs-more { display: block; padding: .8rem 0; border-top: 1px dotted var(--sector-line, #DDD5C8); }
.layout-local-frame .lf-cs-more h4 { font: 400 1.02rem/1.2 var(--sector-head, 'Instrument Serif', Georgia, serif); margin: 0; }
.layout-local-frame .lf-cs-all { display: block; margin-top: .2rem; padding-top: .8rem; border-top: 1px dotted var(--sector-line, #DDD5C8); color: var(--sector-accent); font: 600 .7rem/1 var(--sector-ui, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.layout-local-frame .lf-cs-empty { margin: .4rem 0 .8rem; color: var(--sector-muted, #6D665E); font-style: italic; line-height: 1.5; font-size: .95rem; }

/* 🔒 Empty approved rubrics publish a Coming soon card in the local idiom:
   an ink-ruled warm box with the accent frame echoing the site border. */
.layout-local-frame .lf-coming-soon { position: relative; background: var(--sector-warm, #F4EFE6); border: 1px solid var(--sector-ink, #171512); box-shadow: 6px 6px 0 var(--sector-accent); padding: 1.5rem 1.4rem; margin: 2rem 0; max-width: 34rem; }
.layout-local-frame .lf-coming-soon > b { display: table; position: relative; top: -2.3rem; margin: -1.1rem 0 0; background: var(--sector-warm, #F4EFE6); color: var(--sector-ink, #171512); font: 600 .74rem/1 var(--sector-ui, Inter, sans-serif); letter-spacing: .14em; text-transform: uppercase; padding: 0 .55rem; }
.layout-local-frame .lf-coming-soon p { margin: .2rem 0 0; color: var(--sector-muted, #6D665E); line-height: 1.55; }

/* 🔒 Cover Story category page: the vertical magazine spread — one portrait
   hero, then a 3-across grid of portrait covers. */
.layout-local-frame .lf-cs-page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.layout-local-frame .lf-cs-hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 2rem; align-items: end; padding-bottom: 1.6rem; border-bottom: 2px solid var(--sector-ink, #171512); margin-bottom: .4rem; }
.layout-local-frame .lf-cs-hero .sector-media { aspect-ratio: 3 / 4; }
.layout-local-frame .lf-cs-hero h2 { font: 400 clamp(1.7rem, 3.4vw, 2.7rem)/1.02 var(--sector-head, 'Instrument Serif', Georgia, serif); margin: .5rem 0 .4rem; }
.layout-local-frame .lf-cs-hero small, .layout-local-frame .lf-cs-item small { color: var(--sector-muted, #6D665E); font: 600 .72rem/1.4 var(--sector-ui, Inter, sans-serif); }
.layout-local-frame .lf-cs-item .sector-media { aspect-ratio: 3 / 4; }
.layout-local-frame .lf-cs-item h3 { font: 400 1.15rem/1.15 var(--sector-head, 'Instrument Serif', Georgia, serif); margin: .55rem 0 .25rem; }

/* 🔒 Article chrome: mono-caps breadcrumb with the accent Home link, ink
   rule under the byline, share chips under the meta row. The serif stays at
   a single weight — hierarchy is scale, not bold. */
.layout-local-frame .sector-article .sector-crumb { font: 600 .72rem/1.3 var(--sector-ui, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--sector-muted, #6D665E); }
.layout-local-frame .sector-article .sector-crumb a { color: var(--sector-accent); }
.layout-local-frame .sector-article .sector-article-meta { border-top: 1px solid var(--sector-line, #DDD5C8); border-bottom: 2px solid var(--sector-ink, #171512); }
.layout-local-frame .lf-share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.layout-local-frame .lf-share > span { font: 600 .68rem/1 var(--sector-ui, Inter, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--sector-muted, #6D665E); margin-right: .2rem; }
.layout-local-frame .lf-share a { border: 1px solid var(--sector-line, #DDD5C8); background: var(--sector-paper, #fff); padding: .45rem .7rem; font: 600 .68rem/1 var(--sector-ui, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--sector-ink, #171512); }
.layout-local-frame .lf-share a:hover { border-color: var(--sector-accent); color: var(--sector-accent); }
.layout-local-frame .sector-author { background: var(--sector-warm, #F4EFE6); border: 1px solid var(--sector-line, #DDD5C8); }

/* 🔒 Utility pages (about, advertise, legal, contact) wear the edition's
   editorial header: Inter crumb, serif headline, ink rule. */
.layout-local-frame .sector-utility-wrap { width: min(960px, 100%); margin: 0 auto; padding: clamp(1.8rem, 4vw, 3.2rem) 1.25rem 3.4rem; }
.layout-local-frame .sector-utility .sector-crumb, .layout-local-frame .lf-crumb { font: 600 .72rem/1.3 var(--sector-ui, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--sector-muted, #6D665E); }
.layout-local-frame .sector-utility .sector-crumb a, .layout-local-frame .lf-crumb a { color: var(--sector-accent); }
.layout-local-frame .sector-utility > h1, .layout-local-frame .sector-utility #contact-page-title { font: 400 clamp(2.2rem, 5vw, 3.4rem)/1.02 var(--sector-head, 'Instrument Serif', Georgia, serif); margin: .55rem 0 0; padding-bottom: 1.1rem; border-bottom: 2px solid var(--sector-ink, #171512); }
.layout-local-frame .sector-utility .sector-utility-intro { font-size: 1.1rem; line-height: 1.6; color: var(--sector-muted, #6D665E); max-width: 44rem; }
.layout-local-frame .sector-utility h2 { font: 400 1.7rem/1.15 var(--sector-head, 'Instrument Serif', Georgia, serif); }
.layout-local-frame .sector-utility a { text-decoration-color: var(--sector-accent); text-underline-offset: 3px; }

/* 🔒 Contact form speaks the edition's language (one h1 on the page). */
.layout-local-frame .vuga-contact-form label { font: 600 .72rem/1.2 var(--sector-ui, Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--sector-muted, #6D665E); }
.layout-local-frame .vuga-contact-form input, .layout-local-frame .vuga-contact-form textarea { width: 100%; border: 1px solid var(--sector-line, #DDD5C8); padding: .7rem .85rem; font: 400 .95rem/1.4 var(--sector-body, Inter, sans-serif); background: var(--sector-warm, #F4EFE6); }
.layout-local-frame .vuga-contact-form input:focus, .layout-local-frame .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) 18%, transparent); }
.layout-local-frame .vuga-contact-form button[type="submit"] { border: 0; padding: .8rem 1.4rem; background: var(--sector-ink, #171512); color: #fff; font: 600 .72rem/1 var(--sector-ui, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.layout-local-frame .vuga-contact-form button[type="submit"]:hover { background: var(--sector-accent); }

/* 🔒 Author page in the edition's voice: the AUTHOR place-stamp label,
   serif name over an ink rule, portrait tile, sector-card article grid. */
.layout-local-frame .sector-wrap { padding: 1.8rem 1.25rem 3.4rem; }
.layout-local-frame .sector-author-page { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-bottom: 1.4rem; border-bottom: 2px solid var(--sector-ink, #171512); }
.layout-local-frame .sector-author-page-photo { width: 7.5rem; height: 7.5rem; border-radius: .3rem; object-fit: cover; background: var(--sector-warm, #F4EFE6); }
.layout-local-frame .sector-author-page .sector-kicker { color: var(--sector-ink, #171512); }
.layout-local-frame .sector-author-page h1 { font: 400 clamp(2rem, 4.4vw, 3.2rem)/1.03 var(--sector-head, 'Instrument Serif', Georgia, serif); margin: .4rem 0 .7rem; }
.layout-local-frame .sector-author-bio { max-width: 44rem; color: var(--sector-muted, #6D665E); line-height: 1.6; }
.layout-local-frame .sector-author-title, .layout-local-frame .sector-author-credentials { margin: .45rem 0 0; font: 600 .72rem/1.4 var(--sector-ui, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--sector-muted, #6D665E); }
.layout-local-frame .sector-author-articles .sector-card .sector-media { aspect-ratio: 16 / 10; }

@media (max-width: 52rem) {
  .layout-local-frame .local-home-late { grid-template-columns: 1fr; }
  .layout-local-frame .lf-cs { position: static; max-width: 26rem; }
  .layout-local-frame .lf-cs-page { grid-template-columns: 1fr; }
  .layout-local-frame .lf-cs-hero { grid-template-columns: 1fr; }
  .layout-local-frame .sector-author-page { grid-template-columns: 1fr; }
  .layout-local-frame .sector-author-page-photo { width: 5.5rem; height: 5.5rem; }
}