/* 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.15rem; } }
@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; }

/* ---- 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-travel-service .sector-utility-wrap { width: min(1180px, 100%); margin: 0 auto; }
.layout-travel-service .sector-utility { width: 100%; max-width: none; margin: 0; }
.layout-travel-service .sector-utility--about > .sector-about-body,
.layout-travel-service .sector-utility--about > .about-team,
.layout-travel-service .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-travel-service .sector-author-page-content h1 { font-size: clamp(1.5rem, 3vw, 2rem) !important; }
.layout-travel-service .sector-author-bio { font-size: .92rem !important; }
.layout-travel-service .sector-about-body { font-size: .95rem !important; }
.layout-travel-service .sector-about-body h1, .layout-travel-service .sector-utility > h1 { font-size: clamp(1.6rem, 4vw, 2.2rem) !important; }
.layout-travel-service .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-travel-service main { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* ---- travel-r1 header (user, 2026-09-13, donor Travel + Leisure): the
   network date bar is gone (markup exclusion in _header.ejs). The wordmark
   is wide caps — Archivo stretched to 125% stands in for Monument Extended —
   with no trailing dot, and the tagline beneath wears the brand accent.
   Desktop drops the burger; the search lens rides the rubric row pinned to
   its right edge. Phones keep the canon bar: burger left, wordmark centered
   (wrapping to two lines when long), lens right, tagline hidden.
   r1c (user, same day): the wordmark reads smaller and lighter — 600 over
   the base 900, tracking opens slightly — and the masthead plus the rubric
   row drop their 1.25rem side padding so the brand, tagline, menu and lens
   sit flush with the template's own content edge (the 1180px container). */
.layout-travel-service .sector-masthead--travel .sector-brand strong::after { content: none; }
.layout-travel-service .sector-masthead--travel .sector-brand strong { font-stretch: 125%; font-weight: 600; font-size: clamp(1.5rem, 2.5vw, 2.2rem); letter-spacing: .02em; line-height: 1; }
.layout-travel-service .sector-masthead--travel .sector-brand span { color: var(--sector-accent); }
.layout-travel-service .travel-nav-search { display: flex; align-items: center; }
.layout-travel-service .travel-nav-search .sector-search-toggle { padding: .35rem 0 .35rem .5rem; }
@media (min-width: 48rem) {
  .layout-travel-service .sector-masthead--travel { grid-template-columns: 1fr; padding-inline: 0; }
  .layout-travel-service .sector-masthead--travel .sector-menu { display: none; }
  .layout-travel-service .sector-masthead--travel .sector-actions { display: none; }
  .layout-travel-service .sector-nav[data-travel-nav] > div { padding-inline: 0; }
  .layout-travel-service .sector-nav .travel-nav-search { margin-left: auto; flex: 0 0 auto; }
}
@media (max-width: 47.99rem) {
  .layout-travel-service .sector-masthead--travel { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 0; }
  .layout-travel-service .sector-masthead--travel .sector-brand { text-align: center; align-items: center; justify-self: center; }
  .layout-travel-service .sector-masthead--travel .sector-brand strong { font-size: clamp(1rem, 4.2vw, 1.3rem); line-height: 1.15; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
  .layout-travel-service .sector-masthead--travel .sector-brand span { display: none; }
  .layout-travel-service .sector-nav .travel-nav-search { display: none; }
}

/* ---- travel-r1d (user, 2026-09-13): every homepage section heading and the
   category page title speak in the masthead's wide caps voice — Archivo
   stretched to 125%, weight 600, open tracking. Serif Fraunces stays on
   article decks and card titles. */
.layout-travel-service .sector-section-head h2,
.layout-travel-service .travel-just-in > h2,
.layout-travel-service .ts-cs > h2,
.layout-travel-service .ts-cs-title h2 { font-family: var(--sector-ui, Archivo, sans-serif); font-stretch: 125%; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.layout-travel-service .sector-section-head h2 { font-size: clamp(1.5rem, 2.8vw, 2.4rem); }
.layout-travel-service .sector-page-title { font-family: var(--sector-ui, Archivo, sans-serif); font-stretch: 125%; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.6rem, 3vw, 2.6rem); }

/* ---- travel-r1e (user, 2026-09-13): category page — the rubric name stands
   alone (no Explore kicker, strictly the menu name, a size quieter) and the
   guide list is a 3-across card grid: six per page, two rows, the rest
   behind the Next button. */
.layout-travel-service .sector-page-title { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.layout-travel-service .travel-category-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.layout-travel-service .travel-category-list .sector-card .sector-media { aspect-ratio: 16 / 10; }
.layout-travel-service .travel-category-list .sector-card h2 { font: 600 1.15rem/1.25 var(--sector-head, Fraunces, Georgia, serif); margin: .55rem 0 .25rem; }
.layout-travel-service .travel-category-list .sector-card h2 a:hover { color: var(--sector-accent); }
.layout-travel-service .travel-category-list .sector-card > p { color: var(--sector-muted, #77746E); font-size: .85rem; line-height: 1.45; margin: 0; }
@media (max-width: 48rem) { .layout-travel-service .travel-category-list { grid-template-columns: 1fr; } }

/* ---- travel-r1f (user, 2026-09-13): article page — the rubric opens on its
   own accent line (no Home/category crumb), the title reads in the masthead's
   wide-caps voice a size under the wordmark, the story spans the template
   width, FAQ and Sources close the text before the compact signature, and
   More Like This rides the full template width. */
.layout-travel-service .ts-art-cat { margin: 0 0 .5rem; }
.layout-travel-service .ts-art-cat a { color: var(--sector-accent); font: 800 .72rem/1 var(--sector-ui, Archivo, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.layout-travel-service .sector-article h1 { font-family: var(--sector-ui, Archivo, sans-serif); font-stretch: 125%; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.15; margin: .3rem 0 .6rem; }
.layout-travel-service .sector-article { max-width: 1180px; }
.layout-travel-service .sector-author--ts { display: flex; align-items: center; gap: .8rem; background: transparent; border: 0; padding: 0; margin: 2.4rem 0 0; }
.layout-travel-service .sector-author--ts .sector-author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.layout-travel-service .sector-author--ts h2 { font: 600 1rem/1.2 var(--sector-ui, Archivo, sans-serif); margin: 0; color: var(--sector-ink, #16161A); }
.layout-travel-service .sector-author--ts .sector-author-spec { font: 600 .7rem/1.3 var(--sector-ui, Archivo, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--sector-muted, #77746E); margin: .15rem 0 0; }
.layout-travel-service .sector-related-row { max-width: none; }

/* ---- travel-r1g (user, 2026-09-13): about page — the title drops its ink
   rule but keeps the breathing room, and the newsdesk becomes vertical
   cards four across: circle photo (unchanged 96px, the only profile link)
   on top, plain name beneath, one-line description under that, no roles. */
.layout-travel-service .sector-utility--about > h1 { border-bottom: 0; padding-bottom: 1.6rem; }
.layout-travel-service .sector-utility--about .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.9rem 1.4rem; }
.layout-travel-service .sector-utility--about .team-member { display: grid; justify-items: start; text-align: left; }
.layout-travel-service .sector-utility--about .team-member > a { display: block; }
.layout-travel-service .sector-utility--about .team-member > a img { width: 96px; height: 96px; grid-row: auto; }
.layout-travel-service .sector-utility--about .team-member .name { margin-top: .6rem; font: 600 1rem/1.2 var(--sector-ui, Archivo, sans-serif); }
.layout-travel-service .sector-utility--about .team-member .line { margin-top: .15rem; max-width: 15rem; }
@media (max-width: 48rem) { .layout-travel-service .sector-utility--about .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- travel-r1i (user, 2026-09-13): the In This Article contents links
     read in the brand accent; the body column reasserts the full template
     width against any cached cascade. */
.layout-travel-service .sector-article .sector-module a { color: var(--sector-accent); text-decoration: none; }
.layout-travel-service .sector-article .sector-module a:hover { text-decoration: underline; }
.layout-travel-service .sector-article, .layout-travel-service .sector-article-body { max-width: 1180px; }

/* ---- travel-r1l (user, 2026-09-13): article chrome follows the masthead
   voice — hero captions read small and italic, and every subheadline (body
   sections, What We Like, Plan Your Trip, FAQ, Sources) wears the wordmark's
   wide caps a size under the title. */
.layout-travel-service .sector-article figcaption { font-size: .68rem; font-style: italic; letter-spacing: .01em; }
.layout-travel-service .sector-article h2 { font-family: var(--sector-ui, Archivo, sans-serif); font-stretch: 125%; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.layout-travel-service .sector-article-body h2 { font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.25; margin: 2.4rem 0 .65rem; }

/* ---- travel-r1m (user, 2026-09-13): the shared head sheet from
   helpers/theme.js clamps every .vuga-article-body to a 70ch reading measure
   with !important (network-wide default), which outranked the r1i width.
   The travel edition reads at the full template width instead: re-assert at
   equal importance — the layout + dual body classes win the specificity
   tie-break, so the text column lines up with the hero and In This Article. */
.layout-travel-service .sector-article-body.vuga-article-body { max-width: 1180px !important; }

/* ---- travel-r1n (user, 2026-09-13): the homepage top sector follows the
   approved marketing composition — left column: the newest story (rubric
   accent -> photo -> title -> summary -> author -> date) over a row of three
   minis, all latest; right column: the FIRST menu rubric's three latest as
   photo cards with the Cover Story unit beneath. One card anatomy
   everywhere, hairline rhythm, gapped. */
.layout-travel-service .ts-front { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 2.2rem 2.6rem; align-items: start; padding-top: 2rem; }
.layout-travel-service .ts-front-main { display: flex; flex-direction: column; min-width: 0; }
.layout-travel-service .ts-front-cat { color: var(--sector-accent); font: 800 .68rem/1 var(--sector-ui, Archivo, sans-serif); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.layout-travel-service .ts-front-cat:hover { text-decoration: underline; }
.layout-travel-service .ts-front-media { display: block; margin-top: .55rem; }
.layout-travel-service .ts-front-media .sector-media { aspect-ratio: 16 / 10; }
.layout-travel-service .ts-front-lead .ts-front-title { margin: .9rem 0 0; font: 600 clamp(1.5rem, 2.6vw, 2.15rem)/1.12 var(--sector-head, Fraunces, Georgia, serif); }
.layout-travel-service .ts-front-lead .ts-front-title a { color: inherit; text-decoration: none; }
.layout-travel-service .ts-front-lead .ts-front-title a:hover { color: var(--sector-accent); }
.layout-travel-service .ts-front-lead .ts-front-excerpt { margin: .55rem 0 0; color: var(--sector-muted, #77746E); font-size: .98rem; line-height: 1.55; max-width: 46rem; }
.layout-travel-service .ts-front-meta { margin-top: .8rem; }
.layout-travel-service .ts-front-author { display: block; font: 700 .74rem/1.3 var(--sector-ui, Archivo, sans-serif); color: var(--sector-ink, #16161A); }
.layout-travel-service .ts-front-date { display: block; margin-top: .12rem; color: var(--sector-muted, #77746E); font: 500 .68rem/1.3 var(--sector-ui, Archivo, sans-serif); letter-spacing: .02em; }
.layout-travel-service .ts-front-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1.4rem; margin-top: 1.9rem; padding-top: 1.9rem; border-top: 1px solid var(--sector-line, #E3DED6); }
.layout-travel-service .ts-front-mini .ts-front-title { margin: .55rem 0 0; font: 600 1.08rem/1.22 var(--sector-head, Fraunces, Georgia, serif); }
.layout-travel-service .ts-front-mini .ts-front-title a, .layout-travel-service .ts-front-card .ts-front-title a { color: inherit; text-decoration: none; }
.layout-travel-service .ts-front-mini .ts-front-title a:hover, .layout-travel-service .ts-front-card .ts-front-title a:hover { color: var(--sector-accent); }
.layout-travel-service .ts-front-mini .ts-front-excerpt, .layout-travel-service .ts-front-card .ts-front-excerpt { margin: .4rem 0 0; color: var(--sector-muted, #77746E); font-size: .84rem; line-height: 1.5; }
.layout-travel-service .ts-front-mini .ts-front-meta, .layout-travel-service .ts-front-card .ts-front-meta { margin-top: .6rem; }
.layout-travel-service .ts-front-mini .ts-front-author, .layout-travel-service .ts-front-card .ts-front-author { font-size: .7rem; }
.layout-travel-service .ts-front-side { display: flex; flex-direction: column; min-width: 0; }
.layout-travel-service .ts-front-rubric > h2 { margin: 0 0 1.1rem; font-family: var(--sector-ui, Archivo, sans-serif); font-stretch: 125%; font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.layout-travel-service .ts-front-rubric > h2 a { color: var(--sector-ink, #16161A); text-decoration: none; }
.layout-travel-service .ts-front-rubric > h2 a:hover { color: var(--sector-accent); }
.layout-travel-service .ts-front-card + .ts-front-card { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--sector-line, #E3DED6); }
.layout-travel-service .ts-front-card .ts-front-title { margin: .55rem 0 0; font: 600 1.05rem/1.22 var(--sector-head, Fraunces, Georgia, serif); }
.layout-travel-service .ts-front-side .ts-cs { margin-top: 2rem; padding-top: 1.6rem; border-top: 2px solid var(--sector-ink, #16161A); }
@media (max-width: 62rem) { .layout-travel-service .ts-front { grid-template-columns: 1fr; } .layout-travel-service .ts-front-side { margin-top: .4rem; } }
@media (max-width: 44rem) { .layout-travel-service .ts-front-minis { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ---- travel-r1p (user, 2026-09-13): the rubric column cards read
   horizontally — copy on the left, photo on the right, never stacked. The
   photo column is fixed at 132px (4:3) so titles and summaries keep the
   column's reading width; the hairline rhythm between cards stays. */
.layout-travel-service .ts-front-card { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: .15rem 1.1rem; align-items: start; }
.layout-travel-service .ts-front-card .ts-front-card-copy { min-width: 0; }
.layout-travel-service .ts-front-card .ts-front-media { margin-top: .15rem; }
.layout-travel-service .ts-front-card .ts-front-media .sector-media { aspect-ratio: 4 / 3; }
.layout-travel-service .ts-front-card .ts-front-title { font-size: .98rem; line-height: 1.2; }
.layout-travel-service .ts-front-card .ts-front-excerpt { font-size: .8rem; line-height: 1.45; }
.layout-travel-service .ts-front-card .ts-front-meta { margin-top: .5rem; }
@media (max-width: 44rem) { .layout-travel-service .ts-front-card { grid-template-columns: minmax(0, 1fr) 104px; gap: .1rem .85rem; } }

/* ---- travel-r1o (user, 2026-09-13): the second homepage band is one
   horizontal row of the SECOND menu rubric's four newest — the header is the
   rubric name alone (no tagline, no Plan Something Better). Same card
   anatomy as the top sector; an empty desk falls back to the latest row. */
.layout-travel-service .ts-cat-row { margin-top: 2.6rem; }
.layout-travel-service .ts-row-title { margin: 0 0 1.1rem; font-family: var(--sector-ui, Archivo, sans-serif); font-stretch: 125%; font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.layout-travel-service .ts-row-title a { color: var(--sector-ink, #16161A); text-decoration: none; }
.layout-travel-service .ts-row-title a:hover { color: var(--sector-accent); }
.layout-travel-service .ts-row-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1.4rem; }
.layout-travel-service .ts-row-card .ts-front-title { margin: .55rem 0 0; font: 600 1.02rem/1.22 var(--sector-head, Fraunces, Georgia, serif); }
.layout-travel-service .ts-row-card .ts-front-title a { color: inherit; text-decoration: none; }
.layout-travel-service .ts-row-card .ts-front-title a:hover { color: var(--sector-accent); }
.layout-travel-service .ts-row-card .ts-front-excerpt { margin: .4rem 0 0; color: var(--sector-muted, #77746E); font-size: .84rem; line-height: 1.5; }
.layout-travel-service .ts-row-card .ts-front-meta { margin-top: .6rem; }
.layout-travel-service .ts-row-card .ts-front-author { font-size: .7rem; }
@media (max-width: 62rem) { .layout-travel-service .ts-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .layout-travel-service .ts-row-grid { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ---- travel-r1q (user, 2026-09-13): the author page's "Articles by …"
   band reads smaller — closer to the rubric headers than the page titles. */
.layout-travel-service .sector-author-articles .sector-section-head h2 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }

/* ---- travel-r1r (user, 2026-09-13): three text-only latest stories close
   the left column beneath the photo minis — same anatomy minus the image,
   over a hairline, keeping the minis' three-column rhythm so the column
   balances the rubric rail's height. */
.layout-travel-service .ts-front-texts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--sector-line, #E3DED6); }
.layout-travel-service .ts-front-text .ts-front-title { margin: .45rem 0 0; font: 600 1.02rem/1.2 var(--sector-head, Fraunces, Georgia, serif); }
.layout-travel-service .ts-front-text .ts-front-title a { color: inherit; text-decoration: none; }
.layout-travel-service .ts-front-text .ts-front-title a:hover { color: var(--sector-accent); }
.layout-travel-service .ts-front-text .ts-front-excerpt { margin: .35rem 0 0; color: var(--sector-muted, #77746E); font-size: .8rem; line-height: 1.45; }
.layout-travel-service .ts-front-text .ts-front-meta { margin-top: .5rem; }
.layout-travel-service .ts-front-text .ts-front-author { font-size: .68rem; }
@media (max-width: 44rem) { .layout-travel-service .ts-front-texts { grid-template-columns: 1fr; gap: 1.2rem; } }

/* ---- travel-r1s (user, 2026-09-13): sector three — three vertical desk
   columns (menu rubrics 3, 4, 5), three cards each. The columns ride one
   shared grid (auto-flow column + display:contents) so cards line up across
   desks row by row; author/date pin to the card bottom. Same card anatomy:
   rubric accent -> photo -> title -> summary -> author -> date. */
.layout-travel-service .ts-cols { display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); gap: 1.6rem 1.4rem; border-top: 1px solid var(--sector-line, #E3DED6); margin: 2.6rem 0 0; padding-top: 2.2rem; }
.layout-travel-service .ts-col { display: contents; }
.layout-travel-service .ts-col-title { margin: 0 0 1.1rem; font-family: var(--sector-ui, Archivo, sans-serif); font-stretch: 125%; font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.layout-travel-service .ts-col-title a { color: var(--sector-ink, #16161A); text-decoration: none; }
.layout-travel-service .ts-col-title a:hover { color: var(--sector-accent); }
.layout-travel-service .ts-col-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.layout-travel-service .ts-cols .ts-col-card { align-self: stretch; }
.layout-travel-service .ts-cols .ts-col-card .ts-front-meta { margin-top: auto; padding-top: .6rem; }
.layout-travel-service .ts-col-card .ts-front-media { margin-top: .5rem; }
.layout-travel-service .ts-col-card .ts-front-media .sector-media { aspect-ratio: 16 / 10; }
.layout-travel-service .ts-col-card .ts-front-title { margin: .5rem 0 0; font: 600 .98rem/1.2 var(--sector-head, Fraunces, Georgia, serif); }
.layout-travel-service .ts-col-card .ts-front-title a { color: inherit; text-decoration: none; }
.layout-travel-service .ts-col-card .ts-front-title a:hover { color: var(--sector-accent); }
.layout-travel-service .ts-col-card .ts-front-excerpt { margin: .35rem 0 0; color: var(--sector-muted, #77746E); font-size: .8rem; line-height: 1.45; }
.layout-travel-service .ts-col-card .ts-front-author { font-size: .68rem; }
@media (max-width: 62rem) { .layout-travel-service .ts-cols { display: block; } .layout-travel-service .ts-cols .ts-col { display: block; } .layout-travel-service .ts-cols .ts-col + .ts-col { margin-top: 2.4rem; } .layout-travel-service .ts-cols .ts-col-card .ts-front-meta { margin-top: .5rem; } }

/* ---- travel-r1t (user, 2026-09-13, mobile-edge audit): below the 1180px
   container every reading surface keeps the network gutter — 1.25rem from
   the edges on tablets, 1.1rem on phones (the network mobile canon). The
   audit found the homepage sections, the category card grid, the Cover Story
   spread and the pagination row glued to the viewport edge; the header
   brand/menu rows ride along so the flush header/content alignment survives
   at every width. Above 75rem the centered 1180 container owns the layout
   and the r1c flush alignment stands. */
@media (max-width: 74.99rem) {
  .layout-travel-service .sector-masthead--travel { padding-inline: 1.25rem; }
  .layout-travel-service .sector-nav[data-travel-nav] > div { padding-inline: 1.25rem; }
  .layout-travel-service main.travel-front { padding-inline: 1.25rem; }
  .layout-travel-service .travel-category-list { padding-inline: 1.25rem; }
  .layout-travel-service .ts-cs-page { padding-inline: 1.25rem; }
  .layout-travel-service .sector-pagination { padding-inline: 1.25rem; }
}
@media (max-width: 47.99rem) {
  .layout-travel-service .sector-masthead--travel { padding-inline: 1.1rem; }
  .layout-travel-service .sector-nav[data-travel-nav] > div { padding-inline: 1.1rem; }
  .layout-travel-service main.travel-front { padding-inline: 1.1rem; }
  .layout-travel-service .travel-category-list { padding-inline: 1.1rem; }
  .layout-travel-service .ts-cs-page { padding-inline: 1.1rem; }
  .layout-travel-service .sector-pagination { padding-inline: 1.1rem; }
}