/*
Theme Name: Travel Days
Theme URI: https://traveldays.us
Description: Editorial child theme for GeneratePress. Cream ground, terracotta
  accent, Arial throughout. Built for long-form reading on a phone, because that
  is where nearly all paid social traffic lands. Reading rhythm (sizes, leading,
  gutters, measure) is matched to travelreveal.com, measured 5 Sep 2026.
Author: FIG Consult Limited
Template: generatepress
Version: 1.0.0
Text Domain: traveldays
*/

/* ==========================================================================
   Tokens
   Typefaces are system stacks on purpose. A webfont is two extra round trips
   and a FOUT on the exact metric — Largest Contentful Paint — that an ad
   network scores during review. Arial is already on every device and renders
   on the first frame.
   ========================================================================== */
:root {
  --td-ground:      #faf6ef;   /* cream page */
  --td-surface:     #ffffff;   /* cards */
  --td-ink:         #241f1b;   /* body text */
  --td-ink-soft:    #5c534b;   /* meta, captions */
  --td-accent:      #c2703d;   /* terracotta */
  --td-accent-dark: #9c5730;   /* hover / visited */
  --td-rule:        #e4dbcd;   /* hairlines */
  --td-highlight:   #f2e9da;   /* did-you-know, table stripes */

  /* One face for everything, matching travelreveal (5 Sep 2026).
     They set Arial, Helvetica, sans-serif on body, h1 and h2 alike — no
     webfont anywhere on the site, which is worth as much as the face itself:
     no extra round trip, no FOUT, and no layout shift from a font swap on the
     exact metric an ad network scores.

     --td-serif and --td-sans are kept as aliases rather than removed, so the
     six existing call sites keep working and reverting is one edit here
     instead of a find-and-replace through 800 lines. The previous editorial
     pairing, if it is ever wanted back:

       --td-serif: Georgia, "Iowan Old Style", "Palatino Linotype",
                   "Book Antiqua", "Times New Roman", serif;
       --td-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
  */
  --td-face:  Arial, Helvetica, sans-serif;
  --td-serif: var(--td-face);
  --td-sans:  var(--td-face);

  --td-measure: 40rem;         /* ~68 characters, the readable line length */

  /* ------------------------------------------------------------------------
     Reading rhythm — measured from travelreveal.com, 5 Sep 2026

     Taken off their live money pages (.markdownBody) with getComputedStyle,
     not guessed. Their values, for the record:

         desktop  p 24px / lh 40px / margin-bottom 24px, measure 752px (~63ch)
         mobile   p 19.2px / lh 32px / margin-bottom 10px   (<=575px)
         h1 48px/700/lh 48px    h2 36px/700/lh 48px
         Arial, Helvetica, sans-serif — no webfont at all
         #222 on #fff

     WHY THE SIZES ARE THIS BIG. 24px desktop body copy against a typical
     16-18px does three things at once, and only one of them is about
     readability: it is genuinely easier on a phone; it increases total
     CONTENT HEIGHT, which under a height-based ad density model literally
     buys more ad allowance; and it puts fewer words on each screen, so the
     reader travels further per unit of text and passes more slot intervals.

     WHAT WE TOOK AND WHAT WE DID NOT. The rhythm and the face are both
     theirs, on both layers — sizes, leading, gutters, measure and Arial. What
     is still ours is the PALETTE: cream ground, warm ink, terracotta accent,
     where they run #222 on flat #fff. That is deliberate and it is the last
     thing separating the two sites visually, so if it ever goes, the front
     layer stops looking like a publication and starts looking like theirs —
     which matters at ad-network review, and nowhere else.
     ------------------------------------------------------------------------ */

  /* Body copy. clamp() so the desktop end reaches their 24px and the mobile
     end lands at 19.2px, without a media query doing the interpolation. */
  --td-read-size:        clamp(1.2rem, 0.95rem + 1.1vw, 1.5rem);   /* 19.2 -> 24px */
  --td-read-leading:     1.667;        /* 40/24 — their exact ratio */
  --td-read-gap:         1rem;         /* paragraph gutter, mobile */
  --td-read-gap-wide:    1.5rem;       /* paragraph gutter, desktop (their 24px) */

  /* Headings. Ratio to body copy rather than absolutes, so a change to
     --td-read-size carries the scale with it instead of desynchronising. */
  --td-h1-size:          clamp(1.75rem, 1.1rem + 3.2vw, 3rem);     /* -> 48px */
  --td-h2-size:          clamp(1.7rem, 1.2rem + 2.2vw, 2.25rem);   /* -> 36px */
  --td-heading-leading:  1.2;

  /* Their measure is 752px at 24px = ~63 characters. Ours is set in ch so it
     holds that count as the font size scales, rather than drifting wide. */
  --td-read-measure:     63ch;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  background: var(--td-ground);
  color: var(--td-ink);
  font-family: var(--td-sans);
  font-size: 1.1875rem;        /* 19px */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.entry-content a,
.entry-content a:visited { color: var(--td-accent-dark); text-decoration-thickness: 1px;
                            text-underline-offset: 2px; }
.entry-content a:hover   { color: var(--td-ink); }

h1, h2, h3, h4, .site-title {
  font-family: var(--td-serif);
  font-weight: 700;
  /* normal, not the -0.01em this carried. Negative tracking was tuned for
     Georgia's wide-set caps; Arial is already tightly fitted and reads
     cramped with it pulled in further. travelreveal set `normal` on their
     headings and that is the right value for this face. */
  letter-spacing: normal;
  line-height: var(--td-heading-leading);
  color: var(--td-ink);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  background: var(--td-ground);
  border-bottom: 1px solid var(--td-rule);
}
.site-title a { font-size: 1.5rem; letter-spacing: 0.01em; }
.main-navigation,
.main-navigation .main-nav ul li a {
  background: transparent;
  font-family: var(--td-sans);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--td-ink-soft);
}
.main-navigation .main-nav ul li a:hover { color: var(--td-accent-dark); }

/* The header carries the five states. Do NOT hide .main-navigation on small
   screens — GeneratePress's mobile toggle lives inside it, so hiding the wrapper
   leaves a phone with no navigation at all, and phones are nearly all the traffic.
   Let GP collapse it to its own toggle instead. */
.main-navigation .menu-toggle {
  font-family: var(--td-sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-ink);
  background: transparent;
}
.main-navigation ul.toggled li a,
.main-navigation .main-nav ul.toggled-on li a {
  border-bottom: 1px solid var(--td-rule);
}

/* ==========================================================================
   Article
   ========================================================================== */
.single .site-content,
.page .site-content { background: var(--td-ground); }

.single .entry-header,
.single .entry-content,
.page .entry-content {
  width: min(100%, var(--td-measure));
  max-width: 100%;
  margin-inline: auto;
}

.single .entry-title,
.page .entry-title {
  font-size: var(--td-h1-size);
  line-height: var(--td-heading-leading);
  margin-bottom: 0.6rem;
}

/* State kicker above the headline — the reader arrived from a state-branded
   ad, so the state is the first thing that should confirm they are in the
   right place. */
.td-kicker {
  font-family: var(--td-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--td-accent);
  margin-bottom: 0.5rem;
}
.td-kicker a { color: inherit; text-decoration: none; }

.entry-meta, .post-dates {
  font-family: var(--td-sans);
  font-size: 0.85rem;
  color: var(--td-ink-soft);
}
/* Terracotta rule under the byline */
.single .entry-header .entry-meta,
.single .post-dates {
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--td-accent);
  display: block;
}
.single .post-dates { border-bottom: none; padding-bottom: 0; }

/* Reading rhythm, from the tokens. Sizes and spacing are travelreveal's
   measured values; the serif headline and cream ground are ours. */
.single .entry-content,
.page .entry-content {
  font-size: var(--td-read-size);
  line-height: var(--td-read-leading);
}
.entry-content p {
  margin-top: 0;                        /* they zero it; uniform gutters only */
  margin-bottom: var(--td-read-gap);
}
.entry-content h2 {
  font-size: var(--td-h2-size);
  line-height: var(--td-heading-leading);
  margin: 2.6rem 0 0.9rem;
}
.entry-content h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.55rem;
  background: var(--td-accent);
  opacity: 0.55;
}

/* Images: intrinsic sizing so nothing shifts as they decode. */
.entry-content img, .wp-block-image img { border-radius: 3px; height: auto; }
figcaption, .wp-element-caption {
  font-family: var(--td-sans);
  font-size: 0.78rem;
  color: var(--td-ink-soft);
  text-align: center;
  margin-top: 0.5rem;
}

/* ==========================================================================
   Editorial furniture — the Did-You-Know box, the practical table, the
   visitor checklist. These are the three structural elements every Template A
   article carries, so they get real styling rather than default markup.
   ========================================================================== */
.did-you-know {
  background: var(--td-highlight);
  border-left: 4px solid var(--td-accent);
  border-radius: 2px;
  padding: 1.15rem 1.35rem;
  margin: 2.2rem 0;
  font-size: 1.05rem;
}
.did-you-know strong {
  display: block;
  font-family: var(--td-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--td-accent-dark);
  margin-bottom: 0.35rem;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--td-sans);
  font-size: 0.95rem;
  margin: 2rem 0;
  background: var(--td-surface);
}
.entry-content th, .entry-content td {
  border: 1px solid var(--td-rule);
  padding: 0.6rem 0.8rem;
  text-align: left;
}
.entry-content th { background: var(--td-highlight); font-weight: 700; }
.entry-content tbody tr:nth-child(even) { background: #fcfaf6; }
/* Tables must scroll inside themselves, never push the page sideways. */
.entry-content .wp-block-table { overflow-x: auto; }

.entry-content ul li { margin-bottom: 0.4rem; }

/* ==========================================================================
   Author box — E-E-A-T signal: byline, beat, and a link to the method.
   ========================================================================== */
.td-author {
  width: min(100%, var(--td-measure));
  max-width: 100%;
  margin: 3rem auto 0;
  padding: 1.25rem 1.4rem;
  background: var(--td-surface);
  border: 1px solid var(--td-rule);
  border-radius: 3px;
  font-family: var(--td-sans);
  font-size: 0.95rem;
}
.td-author__name {
  font-family: var(--td-serif);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.td-author__bio { color: var(--td-ink-soft); margin: 0 0 0.5rem; }
.td-author__note { font-size: 0.78rem; color: var(--td-ink-soft); opacity: 0.85; margin: 0; }
.td-author__note a { color: var(--td-accent-dark); }

/* ==========================================================================
   Homepage / archive cards
   ========================================================================== */
.blog .site-main, .archive .site-main { max-width: 58rem; margin-inline: auto; }
.blog article.post, .archive article.post {
  background: var(--td-surface);
  border: 1px solid var(--td-rule);
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.blog .entry-title, .archive .entry-title { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.blog .entry-title a, .archive .entry-title a { color: var(--td-ink); text-decoration: none; }
.blog .entry-title a:hover, .archive .entry-title a:hover { color: var(--td-accent-dark); }
.blog .entry-summary, .archive .entry-summary { font-size: 1rem; }
.read-more, .more-link {
  font-family: var(--td-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--td-accent-dark);
}

/* ==========================================================================
   Continuous reading — the seam between one article and the next
   ========================================================================== */
.cr-article--appended { border-top: 1px solid var(--td-rule) !important; }
.cr-next-label {
  font-family: var(--td-sans) !important;
  color: var(--td-accent) !important;
  font-weight: 700;
}
.cr-next-title { font-family: var(--td-serif); font-size: clamp(1.6rem, 4vw, 2.1rem); }
.cr-article--appended .entry-content,
.cr-article--appended > * { width: min(100%, var(--td-measure)); margin-inline: auto; }

/* ==========================================================================
   Ad slots
   Labelled so a reader can tell editorial from advertising at a glance — the
   FTC expects the distinction, and reviewers look for it. The label only
   appears once a slot actually has height, so an unmonetised page shows
   nothing at all.
   ========================================================================== */
.ad-slot { max-width: 100%; overflow: hidden; }
.ad-slot[style*="min-height: 0"], .ad-slot[style*="min-height:0"] { display: none !important; }
.ad-slot:not([style*="min-height:0"]):not([style*="min-height: 0"])::before {
  content: "Advertisement";
  position: absolute;
  transform: translateY(-1.4rem);
  font-family: var(--td-sans);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--td-ink-soft);
  opacity: 0.55;
}
.ad-slot { position: relative; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer, .site-info {
  background: var(--td-ground);
  border-top: 1px solid var(--td-rule);
  font-family: var(--td-sans);
  font-size: 0.85rem;
  color: var(--td-ink-soft);
}
.site-footer a { color: var(--td-ink-soft); }
.site-footer a:hover { color: var(--td-accent-dark); }
.site-legal-line { font-family: var(--td-sans); }
.site-legal-line a { color: var(--td-accent-dark); }

.footer-nav ul, .site-footer .main-nav ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem;
  list-style: none; padding: 0;
}

/* ==========================================================================
   Mobile — nearly all paid social traffic. Everything above is written
   mobile-first; this only relaxes the gutters on small screens.
   ========================================================================== */
/* Paragraph gutter widens with the column. travelreveal step 10px -> 24px at
   their 575px breakpoint; ours is continuous below and steps here, because a
   1.5rem gutter on a phone wastes a third of a screen. */
@media (min-width: 769px) {
  .entry-content p,
  .arb-story .entry-content p { margin-bottom: var(--td-read-gap-wide); }
}

@media (max-width: 768px) {
  body { font-size: 1.125rem; }
  .blog article.post, .archive article.post { padding: 1.15rem 1.1rem; }
  /* Gutters stay on mobile. Zeroing them ran the text off the screen edge. */
  .single .entry-header, .single .entry-content, .page .entry-content { padding-inline: 1rem; }
  .td-hero, .td-author { padding-inline: 1rem; }
  .did-you-know { padding: 1rem 1.1rem; }
}

/* Readers who ask for less motion get no transitions anywhere. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Homepage / archive card grid
   Standard content-site convention: three columns on desktop, one on a phone.
   Cards carry image, state kicker, headline, byline, excerpt — enough for the
   reader to choose, nothing more.
   ========================================================================== */
.blog .site-main,
.archive .site-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 700px)  { .blog .site-main, .archive .site-main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .blog .site-main, .archive .site-main { grid-template-columns: repeat(3, 1fr); } }

/* Pagination must not sit inside a grid cell. */
.blog .paging-navigation,
.archive .paging-navigation { grid-column: 1 / -1; }

.blog article.post,
.archive article.post {
  display: flex;
  flex-direction: column;
  background: var(--td-surface);
  border: 1px solid var(--td-rule);
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.blog article.post:hover,
.archive article.post:hover {
  box-shadow: 0 6px 20px rgba(36, 31, 27, 0.09);
  transform: translateY(-2px);
}

/* Image sits flush at the top of the card, fixed 16:9 so the grid never
   ratchets as images decode. */
.blog .post-image, .archive .post-image { margin: 0; }
.blog .post-image img, .archive .post-image img,
.td-card-fallback {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.td-card-fallback {
  background: linear-gradient(135deg, var(--td-highlight), #ede2d0);
  display: flex; align-items: center; justify-content: center;
}
.td-card-fallback span {
  font-family: var(--td-serif);
  font-size: 1.4rem;
  color: var(--td-accent-dark);
  opacity: 0.8;
}

/* Card ordering.
   GeneratePress renders .post-image as a sibling *after* .entry-header, and which
   hook does it varies by GP version and settings — two attempts at controlling it
   through blog options did nothing. Flex order pins the picture to the top of the
   card regardless of GP internals. DOM order is untouched, so a screen reader still
   gets the heading first, which is the better reading order anyway. */
.blog .inside-article, .archive .inside-article {
  display: flex;
  flex-direction: column;
  padding: 0 0 1.3rem;
}
.blog .post-image, .archive .post-image,
.blog .td-card-fallback, .archive .td-card-fallback {
  order: -1;
  margin: 0;
}
.blog .entry-header, .archive .entry-header,
.blog .entry-summary, .archive .entry-summary,
.blog .read-more, .archive .read-more { padding-inline: 1.2rem; }
/* .entry-meta is nested inside .entry-header, so padding it again double-indents
   the byline relative to the kicker and headline above it. */
.blog .entry-meta, .archive .entry-meta { padding-inline: 0; }
.blog .entry-header, .archive .entry-header { padding-top: 1.05rem; }
.blog .entry-header, .archive .entry-header { margin-bottom: 0.35rem; }
.blog .td-kicker, .archive .td-kicker { margin-bottom: 0.35rem; font-size: 0.7rem; }
.blog .entry-title, .archive .entry-title { font-size: 1.2rem; line-height: 1.3; margin: 0 0 0.4rem; }
.blog .entry-meta, .archive .entry-meta { font-size: 0.78rem; margin-bottom: 0.6rem; }
.blog .entry-summary, .archive .entry-summary { font-size: 0.95rem; line-height: 1.55; margin: 0; }
.blog .entry-summary p, .archive .entry-summary p { margin: 0; }

/* ==========================================================================
   Article hero — headline first, image immediately under it. The headline is
   what confirms the ad's promise, so it must not be pushed below the fold.
   ========================================================================== */
.td-hero {
  width: min(100%, var(--td-measure));
  max-width: 100%;
  margin: 1.4rem auto 0;
}
.td-hero img {
  width: 100%;
  aspect-ratio: 40 / 21;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
@media (min-width: 1040px) {
  /* Let the hero breathe slightly wider than the text measure. `width` has to be
     set too — the min() rule above would otherwise win and pin it to the measure. */
  .td-hero { width: min(100%, 46rem); max-width: 46rem; }
}

/* Search in the header */
.site-header .search-form input[type="search"] {
  font-family: var(--td-sans);
  font-size: 0.9rem;
  border: 1px solid var(--td-rule);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  background: var(--td-surface);
}

/* ==========================================================================
   Footer navigation — compliance links live here, not in the header
   ========================================================================== */
.td-footer-nav {
  background: var(--td-ground);
  border-top: 1px solid var(--td-rule);
  padding: 1.6rem 1rem 0.4rem;
}
.td-footer-nav__inner { max-width: 70rem; margin-inline: auto; }
.td-footer-nav ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 1.4rem; list-style: none; margin: 0; padding: 0;
}
.td-footer-nav a {
  font-family: var(--td-sans);
  font-size: 0.82rem;
  color: var(--td-ink-soft);
  text-decoration: none;
}
.td-footer-nav a:hover { color: var(--td-accent-dark); text-decoration: underline; }

.td-copyright { margin: 0; font-family: var(--td-sans); font-size: 0.82rem; }
.site-info { padding-block: 0.9rem 1.2rem; }

/* ==========================================================================
   Header — now the five states, so it can be centred and roomy
   ========================================================================== */
.main-navigation .main-nav ul li a {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  padding-inline: 0.9rem;
}
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li:hover > a { color: var(--td-accent-dark); }
.site-title a { white-space: nowrap; }

/* Card fallback: warmer, with a little more presence than a flat wash. */
.td-card-fallback {
  background:
    radial-gradient(120% 90% at 20% 0%, #f6ecda 0%, transparent 60%),
    linear-gradient(135deg, #eadfc9, #e0d0b4);
}
.td-card-fallback span {
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: #8a5a33;
  opacity: 0.72;
}

/* Card titles: two lines at most on desktop reads tidier in a grid. */
.blog .entry-title, .archive .entry-title { font-size: 1.15rem; }
.blog .entry-meta, .archive .entry-meta { margin-bottom: 0.5rem; }

/* Footer: three stacked blocks (links, copyright, legal line) were floating far
   apart. Pull them into one tight group. */
.td-footer-nav { padding: 1.4rem 1rem 0.2rem; }
.site-footer .inside-site-info,
.site-info { padding-block: 0.5rem 0.4rem !important; }
.site-legal-line { margin: 0.2rem 0 1.4rem !important; }
.td-copyright { opacity: 0.75; }

/* ==========================================================================
   Overflow guard
   A single wide element (a table, a pasted URL, an ad iframe) turns the whole
   page into a sideways-scrolling mess on a phone. Nothing gets to do that.
   ========================================================================== */
html, body { overflow-x: hidden; max-width: 100%; }
.entry-content > * { max-width: 100%; }
.entry-content pre, .entry-content code { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.entry-content a { overflow-wrap: anywhere; }
img, iframe, video, table { max-width: 100%; }

/* Second line of defence against the duplicated hero. GeneratePress's page-header
   image is removed at the hook level in functions.php; if a GP update renames that
   hook, this keeps the duplicate off the page rather than silently shipping two
   copies of the largest image on the article. */
.single-post .page-header-image-single,
.single-post .featured-image.page-header-image-single { display: none !important; }

/* ==========================================================================
   Author archive
   The bio block is a sibling of the post cards inside the grid, so it lands in
   the first cell and shunts the articles along — leaving a hole in the row. It
   is a header, not a card: span the full width above the grid.
   ========================================================================== */
.author .site-main > .author-info,
.author .site-main > .page-header,
.archive .site-main > .page-header,
.archive .site-main > .archive-description {
  grid-column: 1 / -1;
  background: transparent;
  border: 0;
  padding: 0.5rem 1.2rem 0;
  margin: 0;
}
.author .author-info h1,
.archive .page-header h1 {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  margin: 0 0 0.4rem;
}
.author .author-info p,
.archive .archive-description p {
  max-width: 44rem;
  color: var(--td-ink-soft);
  font-size: 1rem;
  margin: 0;
}

/* ==========================================================================
   Post navigation
   GeneratePress renders this outside the content measure, so it sits hard left
   while every other element on the article is centred — it reads as a stray link
   rather than part of the piece. Pull it into the measure and give it a label.
   Continuous scroll usually gets there first, but this is the fallback for
   save-data readers and anyone whose JS never runs, and it is what a crawler
   follows.
   ========================================================================== */
.single .post-navigation,
.single .nav-links,
.single .nav-previous,
.single .nav-next {
  width: min(100%, var(--td-measure));
  max-width: 100%;
  margin-inline: auto;
}
.single .post-navigation {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--td-rule);
  font-family: var(--td-sans);
}
.single .post-navigation .nav-next,
.single .post-navigation .nav-previous { margin: 0; }
.single .post-navigation a {
  display: block;
  font-family: var(--td-serif);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--td-ink);
  text-decoration: none;
}
.single .post-navigation a:hover { color: var(--td-accent-dark); }
/* A quiet label so the link reads as "what's next", not a loose fragment. */
.single .post-navigation .nav-next::before,
.single .post-navigation .nav-previous::before {
  content: "Next";
  display: block;
  font-family: var(--td-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--td-accent);
  margin-bottom: 0.3rem;
}
.single .post-navigation .nav-previous::before { content: "Previously"; }
/* GP ships its own arrow icon in the post nav; the "Next" label already does that
   job, and the loose glyph sits on its own line above the title. */
.single .post-navigation .gp-icon,
.single .post-navigation svg { display: none; }

/* Appended-article header, matching a natively loaded one. The inline styles that
   used to carry this lived in the JS, where the palette could drift out of sync
   with the theme; they belong here with everything else. */
.cr-article--appended .cr-next-label {
  font-family: var(--td-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--td-accent);
  /* `auto` on the inline axis, not 0 — the shorthand would override the
     margin-inline:auto that keeps every appended child on the text measure,
     leaving the label stranded at the container's left edge. */
  margin: 0 auto 0.9rem;
}
.cr-article--appended .cr-next-title a { color: var(--td-ink); text-decoration: none; }
.cr-article--appended .cr-next-title a:hover { color: var(--td-accent-dark); }
.cr-article--appended .entry-meta {
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--td-accent);
  display: block;
}
.cr-article--appended .post-dates { margin-top: 1rem; }

/* ------------------------------------------------------------------------
   Paid landing pages (WP-11)

   The reader arrived from an ad, not from a browse. The organic article keeps
   its site chrome because a reviewer and a returning reader both need it; the
   landing page trades that chrome for reading speed, because every element
   above the first ad slot is delay on a click that was paid for.

   Continuous reading stays on and unchanged — depth is the whole reason this
   layer exists, and it is what separates our landing page from a search
   arbitrage dead end.
   ------------------------------------------------------------------------ */

/* Header shrinks to the wordmark. The nav itself is removed in PHP; this
   closes the space it occupied so the headline sits higher on a phone. */
.arb-landing .main-navigation,
.arb-landing .nav-float-right .inside-navigation .main-nav { display: none; }
.arb-landing .site-header { padding-block: 0.6rem; }

/* The kicker is the state, and on a landing page it is confirmation the ad
   was honest rather than a navigation affordance. Keep it, drop its link
   affordance so it does not read as an exit. */
.arb-landing .td-kicker a { pointer-events: none; text-decoration: none; }

/* Message match. Sits between the headline and the hero, carrying the exact
   promise the creative made — restated, not repeated verbatim, because the
   reader has just read the creative and does not need it twice.

   Hidden until JS finds a matching ad id, so a direct visit never sees an
   empty rule or a stray box. */
.arb-hook {
  font-family: var(--td-sans);
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--td-ink);
  border-left: 3px solid var(--td-accent);
  padding: 0.15rem 0 0.15rem 0.85rem;
  margin: 0 auto 1.1rem;
}
.arb-hook[hidden] { display: none; }

/* The author box goes: it sits between the last paragraph and the sentinel,
   which is exactly where the next article should start. The byline above the
   article stays — it is what makes the page read as a publication rather than
   a flyer, and a network reviewer looks for it.

   Post navigation STAYS, deliberately. It is the no-JS fallback for continuous
   reading (4.13), and a landing page is the one page where a dead end is
   unaffordable — the click has already been paid for. Hiding it would strand
   every reader whose JS never runs. */
.arb-landing .td-author { display: none; }

/* Footer compliance links stay. A landing page that drops privacy, terms and
   the contact address is a landing page an ad network will not accept, and
   they cost nothing above the fold. */


/* ==========================================================================
   Story layer (WP-12)
   ==========================================================================
   The fiction layer. Everything the landing skin does, plus two things it
   does not: the layer is detached in both directions, and every page carries
   a notice saying what it is.

   Design intent is narrower than the editorial theme on purpose. A story is
   read in one column at arm's length on a phone, twenty-odd short sections
   deep, so the type is set a notch larger and the measure a notch tighter
   than the article template. Nothing else on the page competes with it.
   ------------------------------------------------------------------------ */

.arb-story .main-navigation,
.arb-story .nav-float-right .inside-navigation .main-nav { display: none; }
.arb-story .site-header { padding-block: 0.6rem; }

/* No kicker at all here. On the editorial layer it names the state and does
   real work; on a story it would imply a section of the travel site the
   reader could browse to, and no such path exists. */
.arb-story .td-kicker { display: none; }

/* Reading column.
   Matched to travelreveal's money-page metrics (measured 5 Sep 2026), because
   this is the surface doing the same job theirs is: a paid visitor, 25 seconds
   to two minutes, one long scroll past a slot before every heading.
   Sections run 25-90 words, so the eye returns to the left margin often and
   the measure can stay at their ~63 characters without feeling cramped. */
.arb-story .entry-content {
  font-size: var(--td-read-size);       /* 19.2 -> 24px, as theirs */
  line-height: var(--td-read-leading);  /* 1.667 — their 40/24 */
  max-width: var(--td-read-measure);    /* 63ch — their 752px at 24px */
  margin-inline: auto;
}
.arb-story .entry-content h2 {
  font-family: var(--td-serif);
  font-size: var(--td-h2-size);
  line-height: var(--td-heading-leading);
  margin-block: 2.1rem 0.75rem;
}
/* Uniform gutter, no first/last-child special-casing — this is the "spacing
   between two sentences" the layout reads as. Every paragraph is a short block
   with one fixed gap, which is what makes a 25-word section look deliberate
   rather than truncated. */
.arb-story .entry-content p {
  margin-top: 0;
  margin-bottom: var(--td-read-gap);
}

/* Section images are full-measure with a hairline credit beneath — the same
   treatment as the editorial layer, so an appended story is indistinguishable
   from a natively rendered one (4.13). */
.arb-story .entry-content figure { margin-block: 1.2rem; }
.arb-story .entry-content figcaption {
  font-family: var(--td-sans);
  font-size: 0.74rem;
  color: var(--td-ink-soft);
  text-align: center;
  margin-top: 0.4rem;
}

.arb-story .td-author { display: none; }

/* --------------------------------------------------------------------------
   The fiction notice.

   Quiet, not hidden. Set smaller than body copy because it is not part of the
   story, and bordered and labelled because it has to be findable by anyone
   scanning for it — an ad-network reviewer, or a reader who reached the end
   and wondered. What it must never be is styled into invisibility: this notice
   is the entire distance between labelled fiction and the thing CLAUDE.md 9.1
   refuses to build, so it takes real contrast and real space.

   Deliberately never display:none at any breakpoint, and never below full
   opacity. A test asserts both.
   -------------------------------------------------------------------------- */
.arb-fiction-notice {
  max-width: 34rem;
  margin: 2.4rem auto 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--td-rule);
  border-left: 3px solid var(--td-accent);
  background: var(--td-highlight);
}
.arb-fiction-notice p {
  font-family: var(--td-sans);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--td-ink);
  margin: 0;
}
.arb-fiction-notice::before {
  content: "Fiction";
  display: block;
  font-family: var(--td-sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--td-accent-dark);
  margin-bottom: 0.35rem;
}