/* Behavior and utility refinements for the Local Media cluster (citynewsmiami, miamiinnews, miamipride, rocklandreviewnews, vipjerseyexpress, ccctimes, tustimes). Since the 2026-09-10 user order the masthead IS the sector mockup's accent frame (шаблоны/local) — this layer carries the frame header, the v2.1 sticky rubric bar, 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; } /* ---- 2026-09-10 local-r1 (user order): the masthead IS the sector mockup's frame (шаблоны/local): the accent frame carries the date at its top left and the Search button (labelled "Search") at its top right, the single- weight serif wordmark and the tagline sit centered, and the rubric row closes the frame above the bottom accent edge. When the rubric row leaves the viewport it pins to the top as a full-width bar with a compact serif wordmark (the v2.1 sticky mandate); the frame accent returns as the bar's 3px underline. Phones render the mandate bar instead of the frame: burger left, wordmark centered, search lens right. The network date bar is removed from the markup — the date lives inside the frame. */ .layout-local-frame .lf-mast { display: block; min-height: 0; max-width: none; padding: 1.25rem 1.625rem 0; background: transparent; } .layout-local-frame .lf-frame { border: 7px solid var(--sector-accent, #0E7C86); max-width: 1180px; margin: 0 auto; padding: 1.625rem 1.625rem 1.25rem; background: #FFFCF8; } .layout-local-frame .lf-util { display: flex; align-items: center; font: 600 11px/1.5 var(--sector-ui, Inter, Arial, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--sector-muted, #6D665E); } .layout-local-frame .lf-util-rt { margin-left: auto; } .layout-local-frame .lf-search-toggle { border: 0; background: transparent; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; } .layout-local-frame .lf-search-toggle:hover { color: var(--sector-accent); } .layout-local-frame .lf-wm { display: block; text-align: center; font: 400 clamp(2.4rem, 6.2vw, 4.625rem)/.9 var(--sector-head, 'Instrument Serif', Georgia, serif); letter-spacing: .02em; text-transform: uppercase; color: var(--sector-accent, #0E7C86); margin: .875rem auto .375rem; overflow-wrap: anywhere; } .layout-local-frame .lf-tl { text-align: center; font: 600 10px/1.5 var(--sector-ui, Inter, Arial, sans-serif); letter-spacing: .3em; text-transform: uppercase; color: var(--sector-muted, #6D665E); } .layout-local-frame .lf-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 1.125rem; border-top: 1px solid #E6E0D8; padding: 14px 0 0; } .layout-local-frame .lf-nav a { font: 500 12.5px/1 var(--sector-ui, Inter, Arial, sans-serif); letter-spacing: .11em; text-transform: uppercase; color: #4A4741; white-space: nowrap; } .layout-local-frame .lf-nav a:hover { color: var(--sector-accent); } /* local-r3 (user, 2026-09-10): the open category is underlined in the site accent inside the rubric row (resting and pinned). */ .layout-local-frame .lf-nav a[aria-current='page'] { color: var(--sector-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } .layout-local-frame .lf-stuck-logo { display: none; align-items: center; padding-right: 1rem; margin-right: .4rem; border-right: 1px solid var(--sector-line, #DDD5C8); } .layout-local-frame .lf-stuck-logo strong { font: 400 1.15rem/1 var(--sector-head, 'Instrument Serif', Georgia, serif); letter-spacing: .01em; color: var(--sector-ink, #171512); } .layout-local-frame .lf-nav.lf-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 60; margin-top: 0; padding: .8rem 1.625rem; background: var(--sector-paper, #fff); border-top: 0; border-bottom: 3px solid var(--sector-accent, #0E7C86); } .layout-local-frame .lf-nav.lf-stuck .lf-stuck-logo { display: inline-flex; } .layout-local-frame .lf-burger, .layout-local-frame .lf-lens-m { display: none; } @media (max-width: 52rem) { .layout-local-frame .lf-mast { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 0; padding: .8rem 1rem; background: var(--sector-paper, #fff); border-bottom: 1px solid var(--sector-line, #DDD5C8); } .layout-local-frame .lf-frame { display: contents; } .layout-local-frame .lf-util, .layout-local-frame .lf-tl, .layout-local-frame .lf-nav { display: none !important; } .layout-local-frame .lf-wm { flex: 1; min-width: 0; margin: 0; font-size: 1.35rem; } .layout-local-frame .lf-burger { display: block; border: 0; background: transparent; padding: .25rem .35rem; font-size: 1.4rem; line-height: 1; color: var(--sector-ink, #171512); cursor: pointer; } .layout-local-frame .lf-lens-m { display: inline-flex; align-items: center; border: 0; background: transparent; padding: .3rem; color: var(--sector-ink, #171512); cursor: pointer; } .layout-local-frame .lf-lens-m svg { width: 22px; height: 22px; } } /* 🔒 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); } /* local-r7 (user): the article author card is compact and neutral — no warm box, no border, left-aligned to the column; the avatar is the only profile link; the name and the 2-3 word beat line are plain text. */ .layout-local-frame .sector-author { display: flex; align-items: center; gap: .9rem; background: transparent; border: 0; padding: 0; margin: 2.2rem 0 0; } .layout-local-frame .sector-author .sector-author-avatar { width: 56px; height: 56px; } .layout-local-frame .sector-author h2 { font: 400 1.1rem/1.2 var(--sector-head, 'Instrument Serif', Georgia, serif); margin: 0; } .layout-local-frame .sector-author .sector-author-spec, .layout-local-frame .sector-author p { font: 500 .8rem/1.4 var(--sector-ui, Inter, Arial, sans-serif); color: var(--sector-muted, #6D665E); margin: .25rem 0 0; } .layout-local-frame .sector-author .sector-author-avatar-link .sector-author-avatar { transition: box-shadow .15s ease; } .layout-local-frame .sector-author .sector-author-avatar-link:hover .sector-author-avatar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sector-accent) 35%, transparent); } /* The category line sits on its own row above the headline; the headline drops to a smaller single-weight serif; More Like This spans the full 1180 container like every other band. */ .layout-local-frame .lf-art-cat { margin: 0 0 .6rem; font: 600 12px/1 var(--sector-ui, Inter, Arial, sans-serif); letter-spacing: .14em; text-transform: uppercase; } .layout-local-frame .lf-art-cat a { color: var(--sector-accent, #0E7C86); } .layout-local-frame .lf-art-cat a:hover { text-decoration: underline; text-underline-offset: 4px; } .layout-local-frame .sector-article h1 { font: 400 clamp(2.2rem, 4vw, 3.2rem)/1.08 var(--sector-head, 'Instrument Serif', Georgia, serif); letter-spacing: -.01em; } .layout-local-frame .sector-related-row { max-width: none; margin: 3.5rem auto 1rem; } .layout-local-frame .sector-related-title { font: 600 12px/1 var(--sector-ui, Inter, Arial, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--sector-muted, #6D665E); } /* 🔒 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; } } /* ---- 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-local-frame .sector-utility-wrap { width: min(1180px, 100%); margin: 0 auto; } .layout-local-frame .sector-utility { width: 100%; max-width: none; margin: 0; } .layout-local-frame .sector-utility--about > .sector-about-body, .layout-local-frame .sector-utility--about > .about-team, .layout-local-frame .sector-utility--about > .about-network { width: 100%; margin-inline: 0; } /* ---- 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-local-frame .sector-author-page-content h1 { font-size: clamp(1.5rem, 3vw, 2rem) !important; } .layout-local-frame .sector-author-bio { font-size: .92rem !important; } .layout-local-frame .sector-about-body { font-size: .95rem !important; } .layout-local-frame .sector-about-body h1, .layout-local-frame .sector-utility > h1 { font-size: clamp(1.6rem, 4vw, 2.2rem) !important; } .layout-local-frame .data-main h1 { font-size: clamp(1.6rem, 4vw, 2.2rem) !important; } /* ---- 2026-09-06 wave 5: homepage and category containers follow the network standard width (1180px, centered like the nav). */ .layout-local-frame main { max-width: 1180px; margin-left: auto; margin-right: auto; } /* ---- 2026-09-10 local-r2 (user): the About Newsdesk grid — four writers per row, the 96px photo circle on top (the photo is the only link to the author page), the name below with no role, the one-line description under the name. The circle size is untouched. */ .layout-local-frame .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; } .layout-local-frame .team-member { text-align: center; } .layout-local-frame .team-member > a { display: inline-block; } .layout-local-frame .team-member .name { margin-top: .55rem; } .layout-local-frame .team-member .line { margin-top: .3rem; } @media (max-width: 52rem) { .layout-local-frame .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- 2026-09-10 local-r3 (user): the category head — no PLACE kicker, the menu name alone on the top line, a smaller single-weight serif title, and a short one-sentence description (the template picks the first whole sentence; nothing is ever cut mid-text). */ .layout-local-frame .sector-category-head .sector-page-title { font: 400 clamp(2rem, 3.4vw, 2.75rem)/1.08 var(--sector-head, 'Instrument Serif', Georgia, serif); letter-spacing: 0; margin: 0 0 .55rem; } .layout-local-frame .sector-category-head p { max-width: 46rem; margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--sector-muted, #6D665E); } /* ---- 2026-09-10 local-r4 (user): the frame spans the full 1180 container so it lines up with the content below; a gap opens between the frame and the category head; advertise links read in the site accent. */ .layout-local-frame .sector-category-head { padding-top: 1.875rem; } .layout-local-frame .sector-utility--advertise a { color: var(--sector-accent, #0E7C86); } /* ---- 2026-09-10 local-r5 (user): the PLACE stamp is retired from every kicker in the family (home, category, article); category rows read title, author · date, excerpt — nothing else. */ .layout-local-frame .sector-kicker:before { content: none; } /* ---- 2026-09-10 local-r6 (user): breathing room inside the category rows — the author · date line sits between the title and the annotation with real gaps, never crammed against either. */ .layout-local-frame .sector-row .sector-byline { display: block; margin: .55rem 0 .75rem; } /* ---- 2026-09-11 local-r8…r11 consolidated: the two homepage bands share one card idiom — category in the site accent, single-weight serif titles, the annotation, the author and (rubric band) the date, all with real gaps — and the bands separate by single full-width hairlines. */ .layout-local-frame .lf-col { display: flex; flex-direction: column; gap: 1.7rem; min-width: 0; } .layout-local-frame .lf-card, .layout-local-frame .lf-grid-card, .layout-local-frame .lf-desk-card { min-width: 0; } .layout-local-frame .lf-card-media { display: block; margin: 0 0 .6rem; } .layout-local-frame .lf-card .lf-card-cat, .layout-local-frame .lf-grid-card .lf-card-cat, .layout-local-frame .lf-desk-card .lf-card-cat { font: 600 11px/1.3 var(--sector-ui, Inter, Arial, sans-serif); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .45rem; } .layout-local-frame .lf-card .lf-card-cat a, .layout-local-frame .lf-grid-card .lf-card-cat a, .layout-local-frame .lf-desk-card .lf-card-cat a { color: var(--sector-accent, #0E7C86); } .layout-local-frame .lf-card .lf-card-cat a:hover, .layout-local-frame .lf-grid-card .lf-card-cat a:hover, .layout-local-frame .lf-desk-card .lf-card-cat a:hover { text-decoration: underline; text-underline-offset: 4px; } .layout-local-frame .lf-card .lf-card-title, .layout-local-frame .lf-grid-card .lf-card-title, .layout-local-frame .lf-desk-card .lf-card-title { margin: 0; } .layout-local-frame .lf-card .lf-card-title a:hover, .layout-local-frame .lf-grid-card .lf-card-title a:hover, .layout-local-frame .lf-desk-card .lf-card-title a:hover { color: var(--sector-accent, #0E7C86); } /* r10 (×1.5): the side columns' titles and the rubric band's titles read at the same size; the center's second title stays under the lead. */ .layout-local-frame .lf-col h3.lf-card-title, .layout-local-frame .lf-grid-card h3.lf-card-title, .layout-local-frame .lf-desk-card h3.lf-card-title { font: 400 1.65rem/1.25 var(--sector-head, 'Instrument Serif', Georgia, serif); letter-spacing: 0; } .layout-local-frame .lf-col--mid h3.lf-card-title { font-size: 1.3rem; } .layout-local-frame .lf-card .lf-card-excerpt, .layout-local-frame .lf-grid-card .lf-card-excerpt, .layout-local-frame .lf-desk-card .lf-card-excerpt { margin: .45rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--sector-muted, #6D665E); } .layout-local-frame .lf-card .lf-card-byline, .layout-local-frame .lf-grid-card .lf-card-byline, .layout-local-frame .lf-desk-card .lf-card-byline { margin: .6rem 0 0; font: 600 12px/1.3 var(--sector-ui, Inter, Arial, sans-serif); color: var(--sector-muted, #6D665E); } .layout-local-frame .lf-grid-card .lf-card-date, .layout-local-frame .lf-desk-card .lf-card-date { margin: .25rem 0 0; font: 500 10px/1.4 var(--sector-ui, Inter, Arial, sans-serif); letter-spacing: .04em; color: var(--sector-muted, #6D665E); } /* local-r9/r11: single full-width hairlines separate the bands; the rubric band's own head carries the rubric name and the More-to-read link. */ .layout-local-frame .local-cover { border-bottom: 0; } .layout-local-frame .lf-band-rule { grid-column: 1 / -1; height: 0; border: 0; border-top: 1px solid var(--sector-line, #DDD5C8); margin: 0; } .layout-local-frame .lf-band-rule--bottom { margin-top: .25rem; } .layout-local-frame .local-home-late { gap: 1.5rem 2.25rem; } .layout-local-frame .lf-cs { border-top: 0; padding-top: 0; } .layout-local-frame .lf-cs-feature .lf-cs-excerpt { margin: .3rem 0 .1rem; font-size: .88rem; line-height: 1.5; color: var(--sector-muted, #6D665E); } .layout-local-frame .sector-section-head.lf-band-head { margin: 0 0 1.4rem; } .layout-local-frame .lf-band-head h2 { font: 400 1.9rem/1.1 var(--sector-head, 'Instrument Serif', Georgia, serif); letter-spacing: 0; } .layout-local-frame .lf-band-more { font: 600 12px/1 var(--sector-ui, Inter, Arial, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--sector-accent, #0E7C86); white-space: nowrap; } .layout-local-frame .lf-band-more:hover { text-decoration: underline; text-underline-offset: 4px; } /* ---- 2026-09-11 local-r11b (user): the rubric band's three cards stand side by side in one horizontal row. */ .layout-local-frame .lf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; } @media (max-width: 52rem) { .layout-local-frame .lf-grid { grid-template-columns: 1fr; } } /* ---- 2026-09-11 local-r12 (user): the desks band — menu rubrics 2, 3 and 4, three articles each, standing in three vertical columns across the full template width. The flat three-column grid keeps the cards aligned in horizontal rows between the columns, and every card reads: category in the accent, photo, title, annotation, author, date. */ .layout-local-frame .lf-desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 1.5rem; margin: 2.5rem 0 0; } @media (max-width: 52rem) { .layout-local-frame .lf-desk { grid-template-columns: 1fr; } } /* ---- 2026-09-11 local-r13 (user): the rubric rows — rubrics 5 and 6 as two identical bands of four photo cards each, separated by single hairlines. */ .layout-local-frame .lf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 52rem) { .layout-local-frame .lf-grid--4 { grid-template-columns: 1fr; } } /* ---- 2026-09-11 local-r14 (user): real gaps around every hairline — each divider keeps ~2.25rem of air to the content above and below it. */ .layout-local-frame .local-home-late { margin-top: 2.25rem; gap: 2.25rem 2.25rem; } .layout-local-frame .lf-desk { margin: 2.25rem 0; } .layout-local-frame .lf-rows { margin: 2.25rem 0; } /* ---- 2026-09-11 local-r15 (user): on phones the page body keeps ~1.1rem of air to the screen edges — no more edge-hugging content. Desktop keeps the centered 1180 container untouched. */ @media (max-width: 52rem) { .layout-local-frame main { padding-left: 1.1rem; padding-right: 1.1rem; } } /* ---- 2026-09-15 lf-gutters (audit): below the 1180px container the category header and the related row ran flush to the viewport edges — side gutters per the canon, 1.25rem tablet band and 1.1rem phones. */ @media (max-width: 74.94rem) { .layout-local-frame .sector-category-head { padding-inline: 1.25rem; } .layout-local-frame .sector-related-row { padding-inline: 1.25rem; } } @media (max-width: 47.99rem) { .layout-local-frame .sector-category-head { padding-inline: 1.1rem; } .layout-local-frame .sector-related-row { padding-inline: 1.1rem; } }