/* Behavior and utility refinements for the Travel / Hospitality / Dining /
   Automotive 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: sticky header with a
   compact logo, the vertical Cover Story unit, article chrome (crumb, ink
   rule, share), Coming-soon states, and the branded utility/author/404/data
   pages in the travel language (Fraunces headings, Archivo labels, warm
   tinted paper, notched boxes).
   Bump ?v= in EVERY attach point when editing: layouts/travel-service/*.ejs,
   layouts/travel-service/data-page.ejs, sector-shared/_utility.ejs,
   sector-shared/author.ejs, sector-shared/404.ejs, and the sector test. */

/* Screen-reader-only utility: previews ship an empty style.min.css stub, so
   the refinement layer owns this class for the whole layout. */
.layout-travel-service .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 header behavior (v2.1): masthead + rubric menu stay pinned to the
   top while scrolling, and the wordmark shrinks into a compact mode. Colors,
   fonts, and composition of the approved travel header are untouched; the
   compaction is a scroll-driven animation that leaves the resting design
   pixel-identical and simply holds the full-size logo in browsers without
   scroll timelines. */
.layout-travel-service .sector-sticky-head { position: sticky; top: 0; z-index: 30; background: #fff; }
@supports (animation-timeline: scroll()) {
  .layout-travel-service .sector-sticky-head .sector-masthead--travel { animation: ts-masthead-compact linear both; animation-timeline: scroll(root); animation-range: 0 10rem; }
  .layout-travel-service .sector-sticky-head .sector-brand strong { animation: ts-wordmark-compact linear both; animation-timeline: scroll(root); animation-range: 0 10rem; }
  .layout-travel-service .sector-sticky-head .sector-brand span { animation: ts-tagline-compact linear both; animation-timeline: scroll(root); animation-range: 0 10rem; }
}
@keyframes ts-masthead-compact { to { min-height: 0; padding-top: .4rem; padding-bottom: .35rem; } }
@keyframes ts-wordmark-compact { to { font-size: 1.3rem; } }
@keyframes ts-tagline-compact { to { font-size: 7px; letter-spacing: .18em; } }

/* 🔒 Cover Story sidebar unit (the only homepage addition, right rail under
   This Just In): vertical 3:4 cover, up to two text rows, closing link;
   Coming soon while the rubric is empty. */
.layout-travel-service .ts-cs { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 2px solid var(--sector-ink, #16161A); }
.layout-travel-service .ts-cs > h2 { font: 900 .95rem/1 var(--sector-ui, Archivo, sans-serif); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .8rem; }
.layout-travel-service .ts-cs-feature { display: block; }
.layout-travel-service .ts-cs-feature .sector-media { aspect-ratio: 3 / 4; }
.layout-travel-service .ts-cs-feature h3 { font: 600 1.05rem/1.22 var(--sector-head, Fraunces, Georgia, serif); margin: .5rem 0 .3rem; }
.layout-travel-service .ts-cs-feature small { color: var(--sector-muted, #77746E); font: 600 .72rem/1.4 var(--sector-ui, Archivo, sans-serif); }
.layout-travel-service .ts-cs-more { display: block; padding: .85rem 0; border-top: 1px dotted var(--sector-line, #E3DED6); }
.layout-travel-service .ts-cs-more h4 { font: 600 .95rem/1.25 var(--sector-head, Fraunces, Georgia, serif); margin: 0; }
.layout-travel-service .ts-cs-all { display: block; margin-top: .2rem; padding-top: .85rem; border-top: 1px dotted var(--sector-line, #E3DED6); color: var(--sector-accent); font: 800 .7rem/1 var(--sector-ui, Archivo, sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.layout-travel-service .ts-cs p.ts-cs-empty { margin: .4rem 0 .8rem; color: var(--sector-muted, #77746E); line-height: 1.5; font-size: .92rem; }

/* 🔒 Empty approved rubrics publish a Coming soon card in the travel notched
   idiom instead of a bare list. */
.layout-travel-service .ts-coming-soon { position: relative; background: var(--sector-warm, #F4F1EA); border: 1px solid var(--sector-accent); padding: 1.6rem 1.4rem; margin: 2rem 0; }
.layout-travel-service .ts-coming-soon > b { display: table; position: relative; top: -2.35rem; margin: -1.2rem 0 0; background: var(--sector-warm, #F4F1EA); color: var(--sector-ink, #16161A); font: 800 .78rem/1 var(--sector-ui, Archivo, sans-serif); letter-spacing: .14em; text-transform: uppercase; padding: 0 .55rem; }
.layout-travel-service .ts-coming-soon p { margin: .2rem 0 0; color: var(--sector-muted, #77746E); line-height: 1.55; }

/* 🔒 Cover Story category page: the vertical magazine spread — one portrait
   hero, then a 3-across grid of portrait covers (7 per page). */
.layout-travel-service .ts-cs-page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.layout-travel-service .ts-cs-hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 2rem; align-items: end; padding-bottom: 1.6rem; border-bottom: 2px solid var(--sector-ink, #16161A); margin-bottom: .4rem; }
.layout-travel-service .ts-cs-hero .sector-media { aspect-ratio: 3 / 4; }
.layout-travel-service .ts-cs-hero h2 { font: 600 clamp(1.6rem, 3.4vw, 2.6rem)/1.04 var(--sector-head, Fraunces, Georgia, serif); margin: .5rem 0 .4rem; }
.layout-travel-service .ts-cs-item .sector-media { aspect-ratio: 3 / 4; }
.layout-travel-service .ts-cs-item h3 { font: 600 1.12rem/1.2 var(--sector-head, Fraunces, Georgia, serif); margin: .55rem 0 .25rem; }
.layout-travel-service .ts-cs-item small { color: var(--sector-muted, #77746E); font: 600 .72rem/1.4 var(--sector-ui, Archivo, sans-serif); }
@media (max-width: 640px) { .layout-travel-service .ts-cs-page { grid-template-columns: 1fr; } .layout-travel-service .ts-cs-hero { grid-template-columns: 1fr; } }

/* 🔒 Article chrome: mono-caps breadcrumb with the accent Home link, ink rule
   under the byline, share chips under the meta row. */
.layout-travel-service .sector-article .sector-crumb { font: 800 .72rem/1.3 var(--sector-ui, Archivo, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--sector-muted, #77746E); }
.layout-travel-service .sector-article .sector-crumb a { color: var(--sector-accent); }
.layout-travel-service .sector-article .sector-article-meta { border-top: 1px solid var(--sector-line, #E3DED6); border-bottom: 2px solid var(--sector-ink, #16161A); }
.layout-travel-service .ts-share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.layout-travel-service .ts-share > span { font: 800 .68rem/1 var(--sector-ui, Archivo, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--sector-muted, #77746E); margin-right: .2rem; }
.layout-travel-service .ts-share a { border: 1px solid var(--sector-line, #E3DED6); background: #fff; padding: .45rem .7rem; font: 700 .68rem/1 var(--sector-ui, Archivo, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--sector-ink, #16161A); }
.layout-travel-service .ts-share a:hover { border-color: var(--sector-accent); color: var(--sector-accent); }
.layout-travel-service .sector-author { background: var(--sector-warm, #F4F1EA); border: 1px solid var(--sector-line, #E3DED6); }

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

/* 🔒 Contact form speaks the edition's language (one h1 on the page). */
.layout-travel-service .vuga-contact-form label { font: 800 .72rem/1.2 var(--sector-ui, Archivo, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--sector-muted, #77746E); }
.layout-travel-service .vuga-contact-form input, .layout-travel-service .vuga-contact-form textarea { width: 100%; border: 1px solid var(--sector-line, #E3DED6); padding: .7rem .85rem; font: 400 .95rem/1.4 var(--sector-ui, Archivo, sans-serif); background: var(--sector-warm, #F4F1EA); }
.layout-travel-service .vuga-contact-form input:focus, .layout-travel-service .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-travel-service .vuga-contact-form button[type="submit"] { border: 0; padding: .8rem 1.4rem; background: var(--sector-ink, #16161A); color: #fff; font: 800 .72rem/1 var(--sector-ui, Archivo, sans-serif); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.layout-travel-service .vuga-contact-form button[type="submit"]:hover { background: var(--sector-accent); }

/* 🔒 Author page in the edition's voice: AUTHOR label, Fraunces name over an
   ink rule, portrait tile, sector-card article grid. */
.layout-travel-service .sector-wrap { padding: 1.8rem 1.25rem 3.4rem; }
.layout-travel-service .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, #16161A); }
.layout-travel-service .sector-author-page-photo { width: 7.5rem; height: 7.5rem; border-radius: .3rem; object-fit: cover; background: var(--sector-warm, #F4F1EA); }
.layout-travel-service .sector-author-page .sector-kicker { font: 800 .72rem/1.2 var(--sector-ui, Archivo, sans-serif); letter-spacing: .14em; color: #A88632; }
.layout-travel-service .sector-author-page h1 { font: 600 clamp(2rem, 4.4vw, 3.2rem)/1.05 var(--sector-head, Fraunces, Georgia, serif); margin: .4rem 0 .7rem; }
.layout-travel-service .sector-author-bio { max-width: 44rem; color: var(--sector-muted, #77746E); line-height: 1.6; }
.layout-travel-service .sector-author-title, .layout-travel-service .sector-author-credentials { margin: .45rem 0 0; font: 700 .72rem/1.4 var(--sector-ui, Archivo, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--sector-muted, #77746E); }
.layout-travel-service .sector-author-title { color: var(--sector-accent); }
.layout-travel-service .sector-author-articles .sector-card .sector-media { aspect-ratio: 16 / 10; }
@media (max-width: 640px) { .layout-travel-service .sector-author-page { grid-template-columns: 1fr; } .layout-travel-service .sector-author-page-photo { width: 5.5rem; height: 5.5rem; } }

/* 🔒 Data pages keep the shared data markup, framed by the edition's rules. */
.layout-travel-service .ts-data-main { width: min(1180px, 100% - 2.5rem); margin: 0 auto; }
.layout-travel-service .ts-data-main .data-breadcrumb { font: 700 .72rem/1.4 var(--sector-ui, Archivo, sans-serif); letter-spacing: .05em; text-transform: uppercase; }
.layout-travel-service .ts-data-main .data-breadcrumb a { color: var(--sector-accent); }
.layout-travel-service .ts-data-main > h1 { font: 600 clamp(2rem, 4.5vw, 3.2rem)/1.05 var(--sector-head, Fraunces, Georgia, serif); margin: .4rem 0 1rem; padding-bottom: .9rem; border-bottom: 2px solid var(--sector-ink, #16161A); }
.layout-travel-service .ts-data-main > .data-capsule { border: 0; border-left: 5px solid #A88632; background: var(--sector-warm, #F4F1EA); padding: 1rem 1.25rem; margin: 1rem 0 1.5rem; }
.layout-travel-service .ts-data-main .data-meta div { border-color: var(--sector-line, #E3DED6); }
.layout-travel-service .ts-data-main .data-table thead { background: var(--sector-ink, #16161A); }
.layout-travel-service .ts-data-main .data-table th, .layout-travel-service .ts-data-main .data-table td { border-color: var(--sector-line, #E3DED6); }
.layout-travel-service .ts-data-main .data-table a { color: var(--sector-accent); }
.layout-travel-service .ts-data-main .data-pagination a, .layout-travel-service .ts-data-main .data-pagination > span { border: 1px solid var(--sector-line, #E3DED6); font: 700 .72rem/1 var(--sector-ui, Archivo, sans-serif); }
.layout-travel-service .ts-data-main .data-attribution { border-top: 3px solid #A88632; }