/* The preview bundle ships a stub style.min.css, so Tailwind's .sr-only is
   undefined and the visually-hidden homepage H1 would render as text above
   the front. Defined here to keep the H1 screen-reader-only. */
.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; }

/* Refinement layer for the Arts / Culture / Books cluster (v2).
   Scope per the reviewed handoff v2.1: behavior and additions only — the
   approved center and header design is untouched. This layer carries the
   sticky menu with its compact logo, the vertical Cover Story sidebar unit,
   article crumb / ink rule / share row, Coming soon pages, and the branded
   utility and author headers. The palette is mirrored at the .layout- level
   so pages without the base body class extras (author, 404) keep colors. */
.layout-arts-object { --arts-ink: #1c1917; --arts-soft: #57534e; --arts-paper: #fffdfa; --arts-warm: #f5f3f0; --arts-line: #d6d3d1; --arts-muted: #78716c; --arts-grey: #a8a29e; --sector-paper: #fffdfa; --sector-ink: #1c1917; --sector-muted: #78716c; --sector-line: #d6d3d1; --sector-warm: #f5f3f0; --arts-gold: #b08d3b; --arts-accent: var(--sector-accent, #a03a16); color: var(--arts-ink); }


/* Cover Story sidebar unit (the only homepage addition): vertical magazine
   block in the right rail — portrait 3:4 cover, up to two text rows, and a
   link to the rubric; Coming soon while the desk is empty. */
.layout-arts-object .arts-cover-story { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--arts-line); }
.layout-arts-object .arts-cover-story h2 { font: 600 11px/1 'Public Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--arts-grey); margin: 0; }
.layout-arts-object .arts-cover-story .arts-cs-state { margin: .55rem 0 0; color: var(--arts-muted); font: 500 .85rem/1.5 Literata, serif; }
.layout-arts-object .arts-cs-feature { display: block; margin-top: 1rem; }
.layout-arts-object .arts-cs-feature .sector-media { aspect-ratio: 3 / 4; }
.layout-arts-object .arts-cs-feature h3 { font: 600 1.2rem/1.1 Literata, serif; margin: .55rem 0 .3rem; }
.layout-arts-object .arts-cs-feature .arts-meta { display: block; margin-top: .35rem; }
.layout-arts-object .arts-cs-dek { font: 400 12.5px/1.55 Literata, serif; color: var(--arts-soft); margin: .45rem 0 0; }
.layout-arts-object .arts-cs-all { display: block; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--arts-line); color: var(--arts-accent); font: 700 .68rem 'Public Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.layout-arts-object .arts-cs-all:hover { text-decoration: underline; }

/* Approved-but-empty sections publish a Coming soon page in the standard
   category layout until their first articles land. */
.layout-arts-object .arts-coming-soon { padding: 2.4rem 2rem; margin-top: 2.4rem; border: 1px dashed var(--arts-line); background: var(--arts-warm); }
.layout-arts-object .arts-coming-soon .arts-label { display: block; }
.layout-arts-object .arts-coming-soon p { margin: .7rem 0 0; color: var(--arts-muted); font: 500 1.05rem/1.6 Literata, serif; }

/* Article page: crumb above the kicker, ink rule under the byline, and a
   sector-voiced share row with canonical URLs. The approved object stage,
   object line, and reading grid are untouched. */
.layout-arts-object .arts-crumb { display: block; margin-bottom: 1rem; font: 700 .72rem 'Public Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--arts-muted); }
.layout-arts-object .arts-crumb a { color: var(--arts-accent); text-decoration: none; }
.layout-arts-object .arts-crumb a:hover { text-decoration: underline; }
.layout-arts-object .arts-article > header .arts-meta { display: block; }
.layout-arts-object .arts-share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; padding-bottom: 1.2rem; }
.layout-arts-object .arts-share > span { font: 700 .68rem 'Public Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--arts-muted); margin-right: .2rem; }
.layout-arts-object .arts-share a { border: 1px solid var(--arts-line); padding: .45rem .7rem; font: 700 .66rem 'Public Sans', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--arts-ink); background: var(--arts-paper); text-decoration: none; }
.layout-arts-object .arts-share a:hover { border-color: var(--arts-accent); color: var(--arts-accent); }

/* Author page in the sector voice: interface AUTHOR label, portrait photo
   tile, Literata name over an ink rule, object-proportioned article grid. */
.layout-arts-object .sector-wrap { max-width: 76rem; margin: 0 auto; padding: 1.6rem clamp(1rem, 3vw, 2rem) 3.4rem; }
.layout-arts-object .sector-author-page { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-bottom: 1.4rem; border-bottom: 1px solid var(--sector-ink); }
.layout-arts-object .sector-author-page-photo { width: 8rem; height: 8rem; object-fit: cover; background: var(--arts-warm); }
.layout-arts-object .sector-author-page .sector-kicker { font: 700 .72rem 'Public Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--arts-accent); }
.layout-arts-object .sector-author-page h1 { font: 600 clamp(2rem, 4.4vw, 3.4rem)/1.02 Literata, serif; letter-spacing: -.02em; margin: .4rem 0 .7rem; }
.layout-arts-object .sector-author-bio { max-width: 44rem; color: #4a453f; line-height: 1.65; font-family: Literata, serif; }
.layout-arts-object .sector-author-title, .layout-arts-object .sector-author-credentials { margin: .45rem 0 0; font: 600 .8rem 'Public Sans', sans-serif; color: var(--arts-muted); }
.layout-arts-object .sector-card .sector-media { aspect-ratio: 3 / 2; }
.layout-arts-object .sector-card h3 { font: 600 1.08rem/1.2 Literata, serif; margin: .45rem 0 .3rem; }

/* Utility pages wear the sector's editorial header: mono crumb, large
   Literata heading, ink rule; about body reads as text. */
.layout-arts-object .sector-utility-wrap { max-width: 76rem; margin: 0 auto; padding: clamp(1.6rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) 3.4rem; }
.layout-arts-object .sector-utility .sector-crumb { font: 700 .72rem 'Public Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--arts-muted); }
.layout-arts-object .sector-utility .sector-crumb a { color: var(--arts-accent); }
.layout-arts-object .sector-utility > h1 { font: 600 clamp(2.2rem, 5vw, 3.6rem)/1.02 Literata, serif; letter-spacing: -.02em; margin: .55rem 0 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--arts-line); }
.layout-arts-object .sector-utility .sector-utility-intro { font-family: Literata, serif; font-size: 1.14rem; line-height: 1.6; color: #4a453f; max-width: 44rem; }
.layout-arts-object .sector-utility--about .sector-about-body { max-width: 52rem; font-size: 1.1rem; line-height: 1.75; font-family: Literata, serif; }
.layout-arts-object .sector-utility--about .sector-about-body p { margin: 0 0 1.4rem; }
.layout-arts-object .sector-utility--about .about-team, .layout-arts-object .sector-utility--about .about-network { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--arts-line); }
.layout-arts-object .sector-utility--about .about-team h2, .layout-arts-object .sector-utility--about .about-network h2 { font-family: Literata, serif; }
.layout-arts-object .sector-utility--about .team-member img { background: var(--arts-warm); }
.layout-arts-object .sector-utility--about .team-member .name { font-weight: 600; margin-top: .5rem; }
.layout-arts-object .sector-utility--about .team-member .title, .layout-arts-object .sector-utility--about .team-member .line { font-size: .85rem; color: var(--arts-muted); }

/* Contact page wears the same header; its form speaks the sector language. */
.layout-arts-object .sector-utility #contact-page-title { font: 600 clamp(2.2rem, 5vw, 3.6rem)/1.02 Literata, serif; letter-spacing: -.02em; margin: .55rem 0 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--arts-line); }
.layout-arts-object .vuga-contact-form label { font: 700 .72rem 'Public Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--arts-muted); }
.layout-arts-object .vuga-contact-form input, .layout-arts-object .vuga-contact-form textarea { width: 100%; border: 1px solid var(--arts-line); padding: .7rem .85rem; font: 500 .95rem Literata, serif; background: var(--arts-paper); }
.layout-arts-object .vuga-contact-form input:focus, .layout-arts-object .vuga-contact-form textarea:focus { outline: none; border-color: var(--arts-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--arts-accent) 18%, transparent); }
.layout-arts-object .vuga-contact-form button[type="submit"] { border: 0; padding: .8rem 1.4rem; background: var(--arts-ink); color: #fff; font: 700 .78rem 'Public Sans', sans-serif; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.layout-arts-object .vuga-contact-form button[type="submit"]:hover { background: var(--arts-accent); }

/* The 404 page connects this layer: it inherits the mirrored palette and
   reads its headline in the sector serif. */
.layout-arts-object .not-found-main h1 { font-family: Literata, serif; }

/* Pagination (2026-08-24): category and author pages drop the numbered chips
   for a Previous / Next pager; the links speak in the site accent. */
.layout-arts-object .arts-pages { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.75rem; border-top: 1px solid var(--arts-line); padding-top: 1rem; }
.layout-arts-object .arts-pages a { display: inline-flex; align-items: center; width: auto; height: auto; border: 0; padding: 0; background: transparent; font: 700 .95rem Literata, serif; color: var(--arts-accent); }
.layout-arts-object .arts-pages a:hover { text-decoration: underline; }
.layout-arts-object .arts-pages a[rel="next"] { margin-left: auto; }

/* Side drawer (2026-08-25): the burger owns the navigation now, so the drawer
   carries its own layout styles and works with or without the base bundle. */
.layout-arts-object #mobile-menu-overlay { position: fixed; inset: 0; background: rgba(23, 21, 19, .5); z-index: 40; display: none; }
.layout-arts-object #mobile-menu-overlay.active { display: block; }
.layout-arts-object #mobile-menu { position: fixed; top: 0; left: 0; height: 100%; width: 18rem; max-width: 80vw; background: var(--arts-paper); z-index: 50; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; box-shadow: 0 0 2rem rgba(23, 21, 19, .25); }
.layout-arts-object #mobile-menu.active { transform: translateX(0); }
.layout-arts-object #mobile-menu > header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--arts-line); }
.layout-arts-object #mobile-menu > header { justify-content: flex-end; }
.layout-arts-object #mobile-menu-close { border: 0; background: transparent; padding: .4rem; line-height: 1; color: var(--arts-muted); cursor: pointer; }
.layout-arts-object #mobile-menu-close svg { width: 1.25rem; height: 1.25rem; }
.layout-arts-object #mobile-menu ul { list-style: none; margin: .4rem 0; padding: 0; }
.layout-arts-object #mobile-menu ul li + li { border-top: 1px solid var(--arts-warm); }
.layout-arts-object #mobile-menu ul a { display: block; padding: .8rem 1.4rem; font: 600 .95rem/1.3 'Public Sans', sans-serif; color: var(--arts-ink); text-decoration: none; }
.layout-arts-object #mobile-menu ul a:hover { background: var(--arts-warm); color: var(--arts-accent); }

@media (max-width: 900px) {
  .layout-arts-object .arts-nav-logo { display: none; }
}
@media (max-width: 760px) {
  .layout-arts-object .sector-author-page { grid-template-columns: 1fr; }
  .layout-arts-object .sector-author-page-photo { width: 5.5rem; height: 5.5rem; }
}

/* Front pass (2026-08-25): the date strip above the masthead is retired,
   the card grid packs its rows at the top so the second row sits right
   under the two lead cards, and the lead headline steps down a size. */
.layout-arts-object .sector-network-bar { display: none; }
.layout-arts-object .arts-grid { align-content: start; }

/* ---- 2026-09-11 arts-35 mobile: the stuck-bar wordmark centers between the
   burger and the lens instead of sliding under the burger. */
@media (max-width: 760px) {
  .layout-arts-object .arts-menu .arts-sticky-logo { left: 50%; right: auto; transform: translate(-50%, -50%); }
}