/*
Theme Name: Roamdusk
Theme URI: https://roamdusk.com
Description: The Roamdusk design system as a Kadence child theme. Dusk palette, Fraunces + Archivo, a 65-character reading measure, and shortcodes for the when-to-go strip, key-facts box and affiliate block. Keeps Kadence as the parent so updates and the block library keep working.
Author: Roamdusk
Version: 1.18.0
Template: kadence
Requires at least: 6.0
Tested up to: 6.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roamdusk
*/

/* ============================================================
   1. TOKENS — the three twilights, plus a cool-biased neutral
   ============================================================ */
:root{
  --rd-astronomical:#0C1224;
  --rd-nautical:#1B2C4E;
  --rd-civil:#40628A;
  --rd-venus:#C98795;
  --rd-ember:#DB7B33;
  --rd-ember-deep:#A85416;
  --rd-afterglow:#F3C173;

  --rd-ground:#F0EFF4;
  --rd-surface:#FAF9FC;
  --rd-sunken:#E6E5EE;
  --rd-ink:#161B2E;
  --rd-muted:#4A5169;
  --rd-line:#D6D5DE;
  --rd-link:#A85416;
  --rd-on-accent:#0C1224;

  --rd-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --rd-text:"Archivo","Helvetica Neue",Arial,sans-serif;
  --rd-measure:65ch;

  /* Kadence global palette — overridden here so the whole theme follows the brand.
     If anything does not take effect, set the same values in
     Appearance > Customize > Colors > Palette. That route always wins. */
  --global-palette1:#DB7B33;
  --global-palette2:#A85416;
  --global-palette3:#161B2E;
  --global-palette4:#4A5169;
  --global-palette5:#6B7288;
  --global-palette6:#F0EFF4;
  --global-palette7:#FAF9FC;
  --global-palette8:#1B2C4E;
  --global-palette9:#0C1224;
}

/* Dark mode. Three states: explicit dark, explicit light, and the un-stamped
   default where only the OS preference decides. */
@media (prefers-color-scheme:dark){
  :root:not([data-rd-theme="light"]){
    --rd-ground:#0C1224; --rd-surface:#151C33; --rd-sunken:#080D1B;
    --rd-ink:#E6E8F0; --rd-muted:#98A0B6; --rd-line:#262E47;
    --rd-link:#F3C173;
    /* Kadence chrome — archive cards, sidebar, comment form — follows too.
       Without this the article goes dark and everything around it stays light. */
    --global-palette3:#E6E8F0; --global-palette4:#98A0B6; --global-palette5:#7C859E;
    --global-palette6:#0C1224; --global-palette7:#151C33;
    --global-palette8:#22304F; --global-palette9:#101A31;
  }
}
:root[data-rd-theme="dark"]{
  --rd-ground:#0C1224; --rd-surface:#151C33; --rd-sunken:#080D1B;
  --rd-ink:#E6E8F0; --rd-muted:#98A0B6; --rd-line:#262E47;
  --rd-link:#F3C173;
  --global-palette3:#E6E8F0; --global-palette4:#98A0B6; --global-palette5:#7C859E;
  --global-palette6:#0C1224; --global-palette7:#151C33;
  --global-palette8:#22304F; --global-palette9:#101A31;
}

/* ============================================================
   2. TYPOGRAPHY
   Fraunces and Archivo are loaded by Kadence.
   Customize > Typography, and turn ON "Load Google Fonts Locally".
   ============================================================ */
/* The page ground must be painted, not merely defined. Without this,
   dark mode flips --rd-ink to #E6E8F0 while the background stays white:
   1.22:1, and the page reads as blank. */
body,
.site,
#wrapper,
.site-container,
.content-area,
.content-wrap,
.entry-content{
  background-color:var(--rd-ground);
}
body,
.entry-content,
.site-container{
  font-family:var(--rd-text);
  color:var(--rd-ink);
}
/* Raised surfaces sit above the ground */
.entry.loop-entry,
.rd-facts,
.rd-deal,
.rd-note,
.comment-respond,
.sidebar-inner-wrap{
  background-color:var(--rd-surface);
}
h1,h2,h3,h4,
.entry-title,
.site-title{
  font-family:var(--rd-display);
  font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  letter-spacing:-.014em;
  text-wrap:balance;
}
.entry-title,
.single .entry-content h1{
  font-variation-settings:"SOFT" 30,"WONK" 1;
  letter-spacing:-.022em;
}
.site-title{
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.8rem;
}
.entry-content a{ color:var(--rd-link); text-underline-offset:.16em; }

/* ============================================================
   3. THE READING MEASURE — the highest-leverage rule in the theme
   ============================================================ */
.single .entry-content > p,
.single .entry-content > ul,
.single .entry-content > ol,
.single .entry-content > h2,
.single .entry-content > h3,
.single .entry-content > blockquote{
  max-width:var(--rd-measure);
  margin-left:auto;
  margin-right:auto;
}
.single .entry-content{ font-size:1.0625rem; line-height:1.7; }
.single .entry-content > h2{ margin-top:2.2em; }

/* Wide things stay wide */
.single .entry-content > .rd-months-wrap,
.single .entry-content > .rd-facts,
.single .entry-content > figure,
.single .entry-content > .wp-block-table{ max-width:52rem; margin-left:auto; margin-right:auto; }

/* ============================================================
   4. THE HORIZON — the whole palette compressed to a hairline.
   Major breaks only. Used everywhere it becomes wallpaper.
   ============================================================ */
.rd-horizon{
  height:3px; border:0; margin:2.2rem auto;
  background:linear-gradient(90deg,
    var(--rd-astronomical), var(--rd-nautical) 26%, var(--rd-civil) 45%,
    var(--rd-venus) 62%, var(--rd-ember) 80%, var(--rd-afterglow));
}

/* ============================================================
   5. COMPONENTS — output by the shortcodes in functions.php
   ============================================================ */

/* 5a. Key facts box — [rd_facts] */
.rd-facts{
  background:var(--rd-surface);
  border:1px solid var(--rd-line);
  border-radius:2px;
  padding:1.75rem;
  margin:2rem auto;
}
.rd-facts__label{
  font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rd-muted); margin:0 0 1rem;
}
.rd-facts dl{
  margin:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1.1rem;
}
.rd-facts dt{
  font-size:.64rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rd-muted);
}
.rd-facts dd{
  margin:.2rem 0 0; font-family:var(--rd-display); font-size:1.28rem;
  font-weight:600; font-variation-settings:"SOFT" 20,"WONK" 1;
  font-variant-numeric:tabular-nums; color:var(--rd-ink); line-height:1.2;
}
.rd-facts dd small{
  display:block; font-family:var(--rd-text); font-size:.72rem;
  font-weight:400; color:var(--rd-muted); letter-spacing:0; margin-top:.15rem;
}

/* 5b. When-to-go strip — [rd_months] */
.rd-months-wrap{ margin:2rem auto; }
.rd-months{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:2px; min-width:30rem;
}
.rd-months__scroll{ overflow-x:auto; }
.rd-months span{
  text-align:center; padding:.55rem .1rem; font-size:.62rem; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; border-radius:1px;
}
.rd-m-best{ background:var(--rd-afterglow); color:#0C1224; }
.rd-m-ok{ background:var(--rd-venus); color:#0C1224; }
.rd-m-avoid{ background:var(--rd-sunken); color:var(--rd-muted); border:1px solid var(--rd-line); }
.rd-legend{
  display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.74rem;
  color:var(--rd-muted); margin:.6rem 0 0;
}
.rd-legend i{
  display:inline-block; width:.7rem; height:.7rem; border-radius:1px;
  margin-right:.3rem; vertical-align:-1px;
}

/* 5c. Affiliate block — [rd_deal] */
.rd-deal{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:1.1rem; align-items:center;
  background:var(--rd-surface);
  border:1px solid var(--rd-line);
  border-left:3px solid var(--rd-ember);
  border-radius:2px; padding:1.1rem; margin:2rem auto; max-width:52rem;
}
.rd-deal__glyph{
  width:2.6rem; height:2.6rem; border-radius:50%; background:var(--rd-sunken);
  display:grid; place-items:center; font-family:var(--rd-display);
  font-weight:700; color:var(--rd-muted); flex:none;
}
.rd-deal__t{ font-weight:600; font-size:.95rem; color:var(--rd-ink); }
.rd-deal__d{ font-size:.8rem; color:var(--rd-muted); }
.rd-deal__btn{
  background:var(--rd-ember); color:var(--rd-on-accent) !important;
  font-weight:600; font-size:.8rem; padding:.5rem .9rem; border-radius:2px;
  white-space:nowrap; text-decoration:none;
}
/* Verified: white on #DB7B33 is 3.05:1 and fails WCAG AA.
   Navy on #DB7B33 is 6.11:1 and passes. Do not change this to white. */
.rd-deal__btn:hover,.rd-deal__btn:focus{ background:var(--rd-afterglow); }
.rd-disclosure{
  font-size:.74rem; color:var(--rd-muted); font-style:italic;
  max-width:52rem; margin:-1.2rem auto 2rem;
}

/* 5d. Callout — [rd_note] */
.rd-note{
  background:var(--rd-surface); border:1px solid var(--rd-line);
  border-left:3px solid var(--rd-ember); border-radius:2px;
  padding:1.1rem 1.75rem; margin:2rem auto; max-width:52rem;
}
.rd-note p:last-child{ margin-bottom:0; }

/* ============================================================
   6. CARDS — Kadence post loops and related grids
   ============================================================ */
.entry.loop-entry{
  background:var(--rd-surface);
  border:1px solid var(--rd-line);
  border-radius:2px;
  overflow:hidden;
}
.entry.loop-entry .entry-title{ font-size:1.15rem; line-height:1.22; }
.entry.loop-entry .entry-taxonomies{
  font-size:.62rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
}
/* Fixed frame so the grid never jumps while images load */
.entry.loop-entry .post-thumbnail img{ aspect-ratio:3/2; object-fit:cover; width:100%; }

/* ============================================================
   7. HEADER / FOOTER
   ============================================================ */
.site-header,
.site-main-header-wrap{ background:var(--rd-astronomical); }
.site-header .site-title,
.site-header .header-navigation a{ color:#E6E8F0; }
.site-footer,
.site-footer-wrap{ background:var(--rd-astronomical); color:#B9C0D4; }
.site-footer a{ color:#E6E8F0; }

/* ============================================================
   8. ACCESSIBILITY & MOTION
   ============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,
.rd-deal__btn:focus-visible{
  outline:2px solid var(--rd-ember);
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   9. PRINT — readers do print itineraries
   ============================================================ */
@media print{
  .site-header,.site-footer,.rd-deal,.rd-disclosure,#comments{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .single .entry-content > *{ max-width:none; }
}

/* ============================================================
   10. RESPONSIVE

   This section was missing from 1.0–1.2. The component layouts
   below were authored at desktop width and never tested narrow:
   the month strip forced a 480px horizontal scroll on every
   phone, and the affiliate block's three columns collapsed into
   an unusable squeeze. Breakpoints follow Kadence's own (768 /
   1024) so the two stylesheets agree rather than fight.
   ============================================================ */

/* Nothing may push the page sideways. */
img, video, iframe, embed, object{ max-width:100%; height:auto; }
pre, .wp-block-code{ overflow-x:auto; }

/* ---- tablet and below ---- */
@media (max-width:1024px){
  .rd-facts dl{ grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); }
}

/* ---- phone ---- */
@media (max-width:768px){

  /* The when-to-go strip: two rows of six instead of a sideways
     scroll. Six per row keeps each half of the year on one line. */
  .rd-months{
    grid-template-columns:repeat(6,minmax(0,1fr));
    min-width:0;
    gap:3px;
  }
  .rd-months__scroll{ overflow-x:visible; }
  .rd-months span{ padding:.6rem .1rem; font-size:.66rem; }
  .rd-legend{ gap:.5rem 1rem; font-size:.72rem; }

  /* Affiliate block: stack, and give the button a full-width,
     thumb-sized target instead of a squeezed corner. */
  .rd-deal{
    grid-template-columns:auto minmax(0,1fr);
    gap:.8rem 1rem;
    padding:1rem;
  }
  .rd-deal__btn{
    grid-column:1 / -1;
    text-align:center;
    padding:.75rem 1rem;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Wide tracking eats the header on a narrow screen. */
  .site-title{ letter-spacing:.16em; font-size:.72rem; }

  /* Boxes: less inset, more room for the words. */
  .rd-facts, .rd-note{ padding:1.1rem; }
  .rd-facts dd{ font-size:1.15rem; }

  /* Long tables scroll inside themselves, never the page. */
  .entry-content table{ display:block; overflow-x:auto; white-space:nowrap; }

  /* Comfortable reading on a phone held one-handed. */
  .single .entry-content{ font-size:1.0625rem; line-height:1.65; }
  .single .entry-content > h2{ margin-top:1.6em; }
}

/* ---- small phone ---- */
@media (max-width:400px){
  /* Four per row = the four quarters of the year. */
  .rd-months{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .rd-facts dl{ grid-template-columns:1fr; }
  .rd-deal{ grid-template-columns:1fr; }
  .rd-deal__glyph{ display:none; }
}

/* Touch devices: every tap target reaches the 44px minimum. */
@media (hover:none) and (pointer:coarse){
  .rd-deal__btn,
  .main-navigation a,
  .header-navigation a{ min-height:44px; display:flex; align-items:center; }
}

/* ============================================================
   11. SOCIAL  [rd_social]
   ============================================================ */
.rd-social{ display:flex; gap:.5rem; }
.rd-social__link{
  display:grid; place-items:center;
  width:44px; height:44px;              /* the touch-target minimum */
  border-radius:10px;
  background:var(--rd-surface);
  border:1px solid var(--rd-line);
  color:var(--rd-ink);
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rd-social__link:hover,
.rd-social__link:focus-visible{
  background:var(--rd-ember);
  border-color:var(--rd-ember);
  color:var(--rd-on-accent);            /* navy on ember: 6.11:1 */
}
.rd-social__link svg{ display:block; }

/* Fixed rail — desktop only. On a phone it would sit on top of the article. */
.rd-social--rail{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  flex-direction:column;
  z-index:90;
  padding:.5rem;
  border-radius:14px;
  background:color-mix(in srgb, var(--rd-ground) 82%, transparent);
  backdrop-filter:blur(6px);
}
.rd-social--rail.rd-social--right{ right:.75rem; }
.rd-social--rail.rd-social--left{ left:.75rem; }

@media (max-width:1200px){
  .rd-social--rail{ display:none; }
}

/* Inline row — works everywhere, including the footer. */
.rd-social--row{
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  margin:1.75rem 0;
}


/* ============================================================
   9. VERSION 1.6.0 CORRECTIONS
   Applied 23 August 2026 from the live-site review.
   Appended last so these win on source order.

   ONE FINDING WAS CHECKED AND DROPPED as a false positive:
   "the month strip scrolls with no scroll affordance". The
   strip only sets min-width:30rem above 768px, where the
   content column is always wider than 480px. At 768px it
   drops to 6 columns with min-width:0 and overflow-x:visible,
   and at 400px to 4 columns. Nothing is ever cut off, so no
   fade overlay was added. Section 5b is correct as written.
   ============================================================ */

/* ------------------------------------------------------------
   9a. The reading measure applied to DIRECT CHILDREN only.

   Section 4 reads `.single .entry-content > p`. The child
   combinator means the 65ch cap silently stops applying the
   moment a paragraph sits inside a Group, Columns or Cover
   block -- which is exactly what the block editor produces as
   soon as you style a section. Those paragraphs then run the
   full content width, so the single most useful rule in the
   theme switches itself off partway down an article, and only
   in the articles you designed most.
   ------------------------------------------------------------ */
.single .entry-content :is(p, ul, ol, h2, h3, h4, blockquote):not(
  .rd-facts *, .rd-deal *, .rd-note *, .rd-legend, .rd-months *,
  figure *, .wp-block-table *, .rd-social *
){
  max-width:var(--rd-measure);
  margin-left:auto;
  margin-right:auto;
}

/* Anything deliberately wide stays wide, at any nesting depth. */
.single .entry-content :is(.rd-months-wrap, .rd-facts, .rd-deal, .rd-note, figure, .wp-block-table){
  max-width:52rem;
  margin-left:auto;
  margin-right:auto;
}

/* ------------------------------------------------------------
   9b. [rd_disclosure] used on its own collapsed into the text
   above it.

   .rd-disclosure carries margin-top:-1.2rem so it tucks under
   an .rd-deal box. Used standalone -- which readme.txt
   documents as supported -- it pulled up into whatever
   preceded it. Scope the negative margin to the adjacent case.
   ------------------------------------------------------------ */
.rd-disclosure{ margin-top:0; }
.rd-deal + .rd-disclosure{ margin-top:-1.2rem; }

/* ------------------------------------------------------------
   9c. "Avoid" is the weakest cell in the month strip, and it
   is the one carrying the warning.

   It was separated from the page by a 1px border in --rd-line,
   a colour close to its own --rd-sunken fill, at .62rem type.
   Give it a real edge.
   ------------------------------------------------------------ */
.rd-m-avoid{
  border:1px solid var(--rd-muted);
  opacity:.85;
}

/* ------------------------------------------------------------
   9d. Variable-font axes need the variable font.

   The font-variation-settings declarations in sections 3 and 4
   only do something if the VARIABLE build of Fraunces loads.
   Kadence requests static weights by default, in which case
   those declarations are inert and the headings fall back to
   the family's normal weight. Keep the intended weight either
   way.
   ------------------------------------------------------------ */
@supports not (font-variation-settings:"SOFT" 20){
  h1, h2, h3, h4,
  .entry-title,
  .site-title,
  .rd-facts dd{ font-weight:600; }
}

/* ------------------------------------------------------------
   9e. Kadence can hide focus outlines site-wide.

   When that setting is on, <body> carries .hide-focus-outline,
   which suppresses the keyboard focus ring and cancels section
   8 of this file. That is a WCAG 2.4.7 failure.

   Turn the setting off in Customize > General. Until you do,
   this restores the ring.
   ------------------------------------------------------------ */
body.hide-focus-outline :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--rd-ember) !important;
  outline-offset:2px !important;
}


/* ============================================================
   10. THE ROUTE TIMELINE  [rd_route]         added in 1.8.0
   ------------------------------------------------------------
   A day-by-day itinerary. The structure is borrowed from tour
   landing pages; the treatment is not. No photographs, no text
   over images, no fixed dark panel -- it uses the same tokens
   as the rest of the article so it reads as editorial furniture
   rather than as an advertisement dropped into the page.

   The vertical rule is the dusk gradient, running astronomical
   to afterglow top to bottom: the journey lit from the far end.
   ============================================================ */

.rd-route-wrap{
  max-width:52rem;
  margin:2.25rem auto;
}

.rd-route__label{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rd-muted);
  margin:0 0 1rem;
}

.rd-route{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

/* The spine. Drawn behind the dots, inset so it starts and ends
   at the first and last dot rather than floating past them. */
.rd-route::before{
  content:"";
  position:absolute;
  left:5px;
  top:.55rem;
  bottom:.55rem;
  width:2px;
  border-radius:1px;
  background:linear-gradient(
    180deg,
    var(--rd-astronomical),
    var(--rd-nautical) 30%,
    var(--rd-civil) 55%,
    var(--rd-venus) 75%,
    var(--rd-ember) 90%,
    var(--rd-afterglow)
  );
}

.rd-route__leg{
  position:relative;
  display:grid;
  grid-template-columns:1.5rem 1fr;
  align-items:start;
  gap:0 1rem;
  margin:0;
}

.rd-route__dot{
  position:relative;
  z-index:1;
  width:12px;
  height:12px;
  margin-top:.42rem;
  border-radius:50%;
  background:var(--rd-ground);
  border:2px solid var(--rd-ember);
  box-shadow:0 0 0 3px var(--rd-ground);
}

.rd-route__body{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
}

.rd-route__when{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rd-muted);
  font-variant-numeric:tabular-nums;
}

.rd-route__where{
  font-family:var(--rd-display);
  font-size:1.32rem;
  font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  line-height:1.2;
  color:var(--rd-ink);
  letter-spacing:-.012em;
}

.rd-route__what{
  font-size:.94rem;
  line-height:1.55;
  color:var(--rd-muted);
}

/* Phones: pull the spine in and let the text take the width back. */
@media (max-width:32rem){
  .rd-route{ gap:1.25rem; }
  .rd-route__leg{ grid-template-columns:1.1rem 1fr; gap:0 .8rem; }
  .rd-route::before{ left:4px; }
  .rd-route__dot{ width:10px; height:10px; }
  .rd-route__where{ font-size:1.16rem; }
  .rd-route__what{ font-size:.9rem; }
}

/* Print: the gradient spine costs ink and says nothing on paper. */
@media print{
  .rd-route::before{ background:#999; }
  .rd-route__dot{ box-shadow:none; border-color:#666; }
}

/* The measure rule in 9a targets <ol>, and would cap this at 65ch and centre
   it as if it were prose. It is furniture, not prose -- it belongs at the
   same 52rem as .rd-facts and .rd-deal. Higher specificity, so no
   !important is needed. */
.single .entry-content ol.rd-route{
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.single .entry-content .rd-route-wrap{
  max-width:52rem;
  margin-left:auto;
  margin-right:auto;
}


/* ============================================================
   11. ADVERTISING SLOTS  [rd_ad]             added in 1.9.0
   ------------------------------------------------------------
   The slot reserves its height before the ad script runs. This
   is the whole point: an unreserved ad pushes the article down
   when it loads, which is the commonest cause of a failing
   Cumulative Layout Shift score, and CLS is a Core Web Vitals
   metric. min-height is set inline per slot by the shortcode so
   each unit reserves its own size.

   The slot sits at 52rem with the other furniture, never inside
   the 65ch text column, so the reading measure is untouched.
   ============================================================ */

.rd-ad{
  max-width:52rem;
  margin:2.75rem auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
}

/* Labelled quietly but unmistakably. Most networks require it, and a
   reader who can tell an ad from a recommendation trusts the
   recommendations more. */
.rd-ad__label{
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--rd-muted);
  margin:0;
}

.rd-ad__slot{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--rd-sunken);
  border:1px solid var(--rd-line);
  border-radius:3px;
}

/* Anything the network injects is contained rather than allowed to
   burst the column on a phone. */
.rd-ad__slot > *{ max-width:100%; }
.rd-ad__slot iframe,
.rd-ad__slot img{ max-width:100%; height:auto; display:block; }

/* Section 9a targets <p> and would centre the label at 65ch inside a
   52rem parent. Higher specificity, so no !important. */
.single .entry-content .rd-ad__label{
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.single .entry-content .rd-ad{
  max-width:52rem;
  margin-left:auto;
  margin-right:auto;
}

/* Phones: a 280px unit is a large share of a small screen. Keep the
   reserved box but let the margins tighten. */
@media (max-width:32rem){
  .rd-ad{ margin:2rem auto; }
}

/* An ad is not content. It should not be printed, and it should not be
   read aloud as part of the article. */
@media print{
  .rd-ad{ display:none !important; }
}


/* ============================================================
   12. THE LEGAL BAR                          added in 1.10.0
   ------------------------------------------------------------
   Rendered by the theme rather than by a menu, so the
   disclosure, privacy and terms links cannot vanish because a
   menu location got reassigned. Sits under the copyright line.

   Deliberately quiet: these links exist so a reader who wants
   them can find them, not to compete with the navigation.
   ============================================================ */

.rd-legal{
  background:var(--rd-astronomical);
  padding:0 1.5rem 1.75rem;
  margin:0;
}

.rd-legal__list{
  list-style:none;
  margin:0 auto;
  padding:1.25rem 0 0;
  max-width:52rem;
  border-top:1px solid rgba(230,232,240,.14);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem 1.75rem;
}

.rd-legal__list li{ margin:0; }

.rd-legal__list a{
  font-size:.78rem;
  letter-spacing:.02em;
  color:#98A0B6;
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .15s ease, border-color .15s ease;
}

.rd-legal__list a:hover,
.rd-legal__list a:focus-visible{
  color:var(--rd-afterglow);
  border-bottom-color:var(--rd-afterglow);
}

.rd-legal__list a:focus-visible{
  outline:2px solid var(--rd-afterglow);
  outline-offset:3px;
  border-bottom-color:transparent;
}

/* Phones: stack tighter, and keep each target thumb-sized rather
   than a 12px line of text between two other 12px lines. */
@media (max-width:32rem){
  .rd-legal{ padding:0 1.25rem 1.5rem; }
  .rd-legal__list{
    gap:.15rem 1.25rem;
  }
  .rd-legal__list a{
    display:inline-block;
    padding:.55rem 0;
  }
}

/* On paper the URLs are useless and the bar is just ink. */
@media print{
  .rd-legal{ display:none !important; }
}


/* ------------------------------------------------------------
   12b. The legal bar, once it has been moved onto the
        copyright line.                       added in 1.10.1

   The standalone styling in section 12 stays as the fallback:
   if the bar is never moved, it still renders as its own strip.
   These rules only apply after .rd-legal--inline is added.
   ------------------------------------------------------------ */

/* The cell Kadence puts the copyright in becomes a single row. */
.rd-legal-host{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem 1.5rem;
}

/* Kadence wraps the copyright in a <p> with its own margin. */
.rd-legal-host > p{ margin:0; }

/* Inline mode: drop everything that made it a strip. */
.rd-legal--inline{
  background:none;
  padding:0;
  margin:0;
}

.rd-legal--inline .rd-legal__list{
  border-top:0;
  padding:0;
  margin:0;
  max-width:none;
  justify-content:flex-start;
  gap:.35rem 1.35rem;
}

/* Tablet and below: Kadence stacks the footer sections, so let the
   links sit under the copyright rather than fighting for the width. */
@media (max-width:48rem){
  .rd-legal-host{ gap:.6rem 1.25rem; }
  .rd-legal--inline .rd-legal__list{ justify-content:inherit; }
}

/* Phones: keep the thumb-sized targets from section 12, but without
   the strip padding, since the row is now inside the footer cell. */
@media (max-width:32rem){
  .rd-legal--inline{ padding:0; }
  .rd-legal--inline .rd-legal__list{ gap:0 1.1rem; }
}


/* ------------------------------------------------------------
   12c. One line, no underlines.               added in 1.10.2

   Two things went wrong once the bar moved into the footer:

   1. Kadence splits the bottom row into four equal columns and
      fills only the first, so the host cell was a quarter of
      the width and four links wrapped into two rows.
   2. Kadence's .inner-link-style-normal underlines every link
      inside the footer HTML block, which beat section 12.
   ------------------------------------------------------------ */

/* Give the populated column the whole row. */
.rd-legal-row .site-footer-bottom-section-1{
  flex:1 1 100%;
  max-width:100%;
  width:100%;
}

/* Collapse the empty siblings. Kadence marks them itself with
   footer-section-inner-items-0, so a column you later fill is
   untouched -- this only hides what is genuinely empty. */
.rd-legal-row .site-footer-section.footer-section-inner-items-0{
  display:none;
}

/* Copyright and links on one line, links pushed to the right so
   the row reads as a proper footer bar rather than a huddle. */
.rd-legal-host{
  justify-content:space-between;
  gap:.5rem 2rem;
  width:100%;
}

.rd-legal--inline .rd-legal__list{
  flex-wrap:nowrap;
  gap:0 1.5rem;
}

/* Beat .inner-link-style-normal, which underlines footer links. */
.rd-legal .rd-legal__list a,
.footer-html .rd-legal__list a,
.rd-legal-host .rd-legal__list a{
  text-decoration:none;
  box-shadow:none;
  border-bottom:1px solid transparent;
}

.rd-legal .rd-legal__list a:hover,
.rd-legal .rd-legal__list a:focus-visible,
.footer-html .rd-legal__list a:hover,
.rd-legal-host .rd-legal__list a:hover{
  text-decoration:none;
  color:var(--rd-afterglow);
  border-bottom-color:var(--rd-afterglow);
}

/* Below the tablet breakpoint the four links no longer fit beside
   the copyright. Let them wrap as a group, left-aligned under it,
   rather than being squeezed. */
@media (max-width:60rem){
  .rd-legal-host{
    justify-content:flex-start;
    gap:.75rem 1.5rem;
  }
  .rd-legal--inline .rd-legal__list{
    flex-wrap:wrap;
    gap:.35rem 1.35rem;
  }
}


/* ============================================================
   13. WPFORMS                                added in 1.11.0
   ------------------------------------------------------------
   WPForms ships its own light-mode styling and the child theme
   said nothing about it, so on a dark-mode device the field
   labels rendered as dark text on the dark page background --
   "Comment or Message" was effectively invisible.

   Everything below drives off the same --rd-* tokens as the
   rest of the theme, so the form follows the reader's system
   setting like every other component.

   The submit button uses navy on ember (6.11:1), NOT white on
   ember (3.05:1, fails AA) -- the same rule as .rd-deal__btn.
   ============================================================ */

.wpforms-container,
.wpforms-container-full{
  max-width:42rem;
  margin:2rem auto;
  color:var(--rd-ink);
}

/* ---- labels ---- */
.wpforms-container .wpforms-field-label,
.wpforms-container-full .wpforms-field-label{
  color:var(--rd-ink);
  font-family:var(--rd-text);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.005em;
  margin-bottom:.4rem;
}

/* First / Last under the name field, and any description text. */
.wpforms-container .wpforms-field-sublabel,
.wpforms-container-full .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description,
.wpforms-container-full .wpforms-field-description{
  color:var(--rd-muted);
  font-size:.78rem;
}

/* The required asterisk has to be visible in both modes. */
.wpforms-container .wpforms-required-label,
.wpforms-container-full .wpforms-required-label{
  color:var(--rd-ember);
}

/* ---- inputs ---- */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea,
.wpforms-container-full input[type="text"],
.wpforms-container-full input[type="email"],
.wpforms-container-full input[type="url"],
.wpforms-container-full input[type="tel"],
.wpforms-container-full input[type="number"],
.wpforms-container-full select,
.wpforms-container-full textarea{
  background:var(--rd-surface);
  color:var(--rd-ink);
  border:1px solid var(--rd-line);
  border-radius:3px;
  padding:.6rem .75rem;
  font-family:var(--rd-text);
  font-size:.95rem;
  line-height:1.5;
  box-shadow:none;
  transition:border-color .15s ease;
}

.wpforms-container textarea,
.wpforms-container-full textarea{
  min-height:9rem;
  resize:vertical;
}

.wpforms-container ::placeholder,
.wpforms-container-full ::placeholder{
  color:var(--rd-muted);
  opacity:1;
}

.wpforms-container input:hover,
.wpforms-container select:hover,
.wpforms-container textarea:hover,
.wpforms-container-full input:hover,
.wpforms-container-full select:hover,
.wpforms-container-full textarea:hover{
  border-color:var(--rd-muted);
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus,
.wpforms-container-full input:focus,
.wpforms-container-full select:focus,
.wpforms-container-full textarea:focus{
  border-color:var(--rd-ember);
  outline:2px solid var(--rd-ember);
  outline-offset:1px;
}

/* ---- radios and checkboxes ---- */
.wpforms-container .wpforms-field-radio li,
.wpforms-container .wpforms-field-checkbox li,
.wpforms-container-full .wpforms-field-radio li,
.wpforms-container-full .wpforms-field-checkbox li{
  color:var(--rd-ink);
}

.wpforms-container input[type="radio"],
.wpforms-container input[type="checkbox"],
.wpforms-container-full input[type="radio"],
.wpforms-container-full input[type="checkbox"]{
  accent-color:var(--rd-ember);
}

/* ---- submit ----
   Navy on ember. White on ember is 3.05:1 and fails AA; this
   pairing measures 6.11:1. Same decision as the affiliate
   button in section 6. */
.wpforms-container .wpforms-submit,
.wpforms-container-full .wpforms-submit,
.wpforms-container button[type="submit"],
.wpforms-container-full button[type="submit"]{
  background:var(--rd-ember);
  color:#0C1224;
  border:0;
  border-radius:3px;
  padding:.75rem 1.6rem;
  font-family:var(--rd-text);
  font-size:.95rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease;
}

.wpforms-container .wpforms-submit:hover,
.wpforms-container-full .wpforms-submit:hover,
.wpforms-container button[type="submit"]:hover,
.wpforms-container-full button[type="submit"]:hover{
  background:var(--rd-afterglow);
  color:#0C1224;
}

.wpforms-container .wpforms-submit:focus-visible,
.wpforms-container-full .wpforms-submit:focus-visible{
  outline:2px solid var(--rd-ink);
  outline-offset:2px;
}

/* ---- errors and confirmation ----
   An error a reader cannot read is worse than no validation. */
.wpforms-container .wpforms-error,
.wpforms-container-full .wpforms-error,
.wpforms-container label.wpforms-error,
.wpforms-container-full label.wpforms-error{
  color:#E36A6A;
  font-size:.8rem;
}

.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error,
.wpforms-container select.wpforms-error,
.wpforms-container-full input.wpforms-error,
.wpforms-container-full textarea.wpforms-error,
.wpforms-container-full select.wpforms-error{
  border-color:#E36A6A;
  color:var(--rd-ink);
}

.wpforms-confirmation-container,
.wpforms-confirmation-container-full{
  background:var(--rd-sunken);
  border:1px solid var(--rd-line);
  border-left:3px solid var(--rd-ember);
  border-radius:3px;
  color:var(--rd-ink);
  padding:1rem 1.25rem;
}

.wpforms-confirmation-container p:last-child,
.wpforms-confirmation-container-full p:last-child{ margin-bottom:0; }

/* Section 9a would cap the form's own paragraphs and labels at
   65ch and centre them. The form manages its own width. */
.single .entry-content .wpforms-container,
.single .entry-content .wpforms-container-full,
.page .entry-content .wpforms-container,
.page .entry-content .wpforms-container-full{
  max-width:42rem;
  margin-left:auto;
  margin-right:auto;
}


/* ============================================================
   13b. WPFORMS, PROPERLY                    added in 1.11.1
   ------------------------------------------------------------
   Section 13 set colours on WPForms' own selectors and lost.
   Modern WPForms markup does not read those declarations: it
   drives every colour from its OWN custom properties and then
   applies them with !important. Competing on the colour
   declaration was never going to win.

   So set the variables instead. This is the supported way to
   restyle modern WPForms, it needs no !important, and it keeps
   working when the plugin changes its internal selectors.

   Section 13 stays as the fallback for classic (non-modern)
   markup, which some older forms still render.
   ============================================================ */

.wpforms-container,
.wpforms-container-full,
.wpforms-form{
  /* labels */
  --wpforms-label-color:var(--rd-ink);
  --wpforms-label-sublabel-color:var(--rd-muted);
  --wpforms-label-error-color:#E36A6A;

  /* fields */
  --wpforms-field-text-color:var(--rd-ink);
  --wpforms-field-background-color:var(--rd-surface);
  --wpforms-field-border-color:var(--rd-line);
  --wpforms-field-border-radius:3px;
  --wpforms-field-border-size:1px;
  --wpforms-field-border-style:solid;

  /* button: navy on ember, 6.11:1. Not white, which is 3.05:1
     and fails AA. */
  --wpforms-button-background-color:var(--rd-ember);
  --wpforms-button-text-color:#0C1224;
  --wpforms-button-border-color:var(--rd-ember);
  --wpforms-button-border-radius:3px;

  --wpforms-page-break-color:var(--rd-ember);
}

/* Belt and braces for classic markup, where the plugin also uses
   !important. Matching it is the only thing that works, and the
   alternative is an unreadable form on every dark-mode device. */
.wpforms-container .wpforms-field-label,
.wpforms-container-full .wpforms-field-label,
.wpforms-form .wpforms-field-label{
  color:var(--rd-ink) !important;
}

.wpforms-container .wpforms-field-sublabel,
.wpforms-container-full .wpforms-field-sublabel,
.wpforms-form .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description,
.wpforms-container-full .wpforms-field-description{
  color:var(--rd-muted) !important;
}

.wpforms-container .wpforms-field-label-inline,
.wpforms-container-full .wpforms-field-label-inline,
.wpforms-form .wpforms-field-radio label,
.wpforms-form .wpforms-field-checkbox label{
  color:var(--rd-ink) !important;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container select,
.wpforms-container textarea,
.wpforms-container-full input[type="text"],
.wpforms-container-full input[type="email"],
.wpforms-container-full select,
.wpforms-container-full textarea{
  background-color:var(--rd-surface) !important;
  color:var(--rd-ink) !important;
  border-color:var(--rd-line) !important;
}

.wpforms-container .wpforms-submit,
.wpforms-container-full .wpforms-submit,
.wpforms-form button[type="submit"]{
  background-color:var(--rd-ember) !important;
  color:#0C1224 !important;
  border-color:var(--rd-ember) !important;
}

.wpforms-container .wpforms-submit:hover,
.wpforms-container-full .wpforms-submit:hover,
.wpforms-form button[type="submit"]:hover{
  background-color:var(--rd-afterglow) !important;
  color:#0C1224 !important;
}

/* The preview screen wraps the form in its own light panel and
   prints its notice in dark text. Keep that readable too. */
.wpforms-preview-notice,
.wpforms-preview-notice p,
.wpforms-preview-notice a{
  color:var(--rd-ink);
}


/* ============================================================
   14. COUNTRIES  [rd_countries]              added in 1.12.0
   ------------------------------------------------------------
   A card per country, with the number of guides in it. The
   count is the useful part: it tells a reader whether Georgia
   means one guide or nine before they click.
   ============================================================ */

.rd-countries{
  max-width:52rem;
  margin:2rem auto;
}

.rd-countries__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.rd-countries--cols-2 .rd-countries__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.rd-countries--cols-4 .rd-countries__list{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.rd-countries--cols-5 .rd-countries__list{ grid-template-columns:repeat(5,minmax(0,1fr)); }

.rd-countries__item{ margin:0; }

.rd-countries__item a{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  height:100%;
  padding:.85rem 1rem;
  background:var(--rd-surface);
  border:1px solid var(--rd-line);
  border-left:3px solid var(--rd-ember);
  border-radius:3px;
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease;
}

.rd-countries__item a:hover,
.rd-countries__item a:focus-visible{
  background:var(--rd-sunken);
  border-color:var(--rd-muted);
  border-left-color:var(--rd-afterglow);
}

.rd-countries__item a:focus-visible{
  outline:2px solid var(--rd-ember);
  outline-offset:2px;
}

.rd-countries__name{
  font-family:var(--rd-display);
  font-size:1.05rem;
  font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  line-height:1.25;
  color:var(--rd-ink);
}

.rd-countries__count{
  font-size:.74rem;
  letter-spacing:.02em;
  color:var(--rd-muted);
  font-variant-numeric:tabular-nums;
}

/* Phones: two across stays readable; one across wastes the screen. */
@media (max-width:40rem){
  .rd-countries__list,
  .rd-countries--cols-4 .rd-countries__list,
  .rd-countries--cols-5 .rd-countries__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .rd-countries__name{ font-size:.98rem; }
}

/* ---- the "More from Georgia" line under a guide ---- */
.rd-country-line{
  max-width:var(--rd-measure);
  margin:2rem auto 0;
  padding-top:1rem;
  border-top:1px solid var(--rd-line);
  font-size:.9rem;
  color:var(--rd-muted);
}

.rd-country-line__label{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rd-muted);
}

.rd-country-line a{
  color:var(--rd-link);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.rd-country-line a:hover,
.rd-country-line a:focus-visible{
  border-bottom-color:currentColor;
}

/* Section 9a targets <p> and would re-centre this at 65ch inside
   its own 65ch box. It already sets its own width. */
.single .entry-content .rd-country-line{
  max-width:var(--rd-measure);
  margin-left:auto;
  margin-right:auto;
}

.single .entry-content .rd-countries,
.page .entry-content .rd-countries{
  max-width:52rem;
  margin-left:auto;
  margin-right:auto;
}

@media print{
  .rd-country-line{ display:none; }
}


/* ============================================================
   15. SECTION HEADINGS AND BUTTONS           added in 1.13.0
   ============================================================ */

/* ---- [rd_section] ----
   Centred heading with the dusk gradient running out to either
   side. The rule fades from transparent into afterglow so the
   heading sits in the light rather than inside a box. */

.rd-section{
  display:flex;
  align-items:center;
  gap:1.25rem;
  max-width:52rem;
  margin:3rem auto 1.75rem;
}

.rd-section__rule{
  flex:1 1 auto;
  height:2px;
  border-radius:1px;
  min-width:1.5rem;
}

.rd-section__rule:first-child{
  background:linear-gradient(90deg, transparent, var(--rd-civil) 45%, var(--rd-ember));
}
.rd-section__rule:last-child{
  background:linear-gradient(270deg, transparent, var(--rd-civil) 45%, var(--rd-ember));
}

.rd-section__title{
  margin:0;
  flex:0 1 auto;
  font-family:var(--rd-display);
  font-size:clamp(1.4rem, 3.2vw, 2rem);
  font-weight:600;
  font-variation-settings:"SOFT" 25,"WONK" 1;
  letter-spacing:-.012em;
  line-height:1.15;
  color:var(--rd-ink);
  text-align:center;
  text-wrap:balance;
}

/* Left-aligned variant: one rule, running right. */
.rd-section--left{ gap:1rem; }
.rd-section--left .rd-section__rule:first-child{ display:none; }
.rd-section--left .rd-section__title{ text-align:left; }

@media (max-width:32rem){
  .rd-section{ gap:.85rem; margin:2.25rem auto 1.35rem; }
  .rd-section__rule{ min-width:.75rem; }
}

/* ---- [rd_button] and the block editor's own buttons ----
   Navy on ember, 6.11:1. White on ember is 3.05:1 and fails AA.
   The same pairing is used by .rd-deal__btn and WPForms submit,
   so every button on the site reads the same way. */

.rd-btn-wrap{ margin:1.75rem 0; }

.rd-btn{
  display:inline-block;
  background:var(--rd-ember);
  color:#0C1224;
  font-family:var(--rd-text);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.2;
  text-decoration:none;
  padding:.85rem 1.75rem;
  border:1px solid var(--rd-ember);
  border-radius:3px;
  transition:background .15s ease, border-color .15s ease;
}

.rd-btn:hover,
.rd-btn:focus-visible{
  background:var(--rd-afterglow);
  border-color:var(--rd-afterglow);
  color:#0C1224;
  text-decoration:none;
}

.rd-btn:focus-visible{
  outline:2px solid var(--rd-ink);
  outline-offset:2px;
}

/* Quiet variant, for a secondary action beside a primary one. */
.rd-btn--quiet{
  background:transparent;
  color:var(--rd-ink);
  border-color:var(--rd-muted);
}
.rd-btn--quiet:hover,
.rd-btn--quiet:focus-visible{
  background:var(--rd-sunken);
  border-color:var(--rd-ember);
  color:var(--rd-ink);
}

/* Full width, for the end of a section or a phone. */
.rd-btn--wide{
  display:block;
  width:100%;
  text-align:center;
}

/* Core and Kadence button blocks: a button you build in the editor
   should look like the theme's button without you styling it.
   The fill variant uses the brand accent, so it needs navy text --
   Kadence defaults to white, which is the 3.05:1 failure. */
.entry-content .wp-block-button__link,
.entry-content .kb-button.kt-button-style-fill{
  color:#0C1224;
  border-radius:3px;
  font-weight:600;
}

.entry-content .wp-block-button__link:focus-visible,
.entry-content .kb-button:focus-visible{
  outline:2px solid var(--rd-ember);
  outline-offset:2px;
}

/* Section 9a targets <p> and would cap the button wrapper at 65ch
   and centre it. Let it sit with the text it belongs to. */
.single .entry-content .rd-btn-wrap,
.page .entry-content .rd-btn-wrap{
  max-width:var(--rd-measure);
  margin-left:auto;
  margin-right:auto;
}

.single .entry-content .rd-section,
.page .entry-content .rd-section{
  max-width:52rem;
  margin-left:auto;
  margin-right:auto;
}


/* ============================================================
   16. THE AUTHOR BOX  [rd_author]            added in 1.14.0
   ------------------------------------------------------------
   Written once in Customize > Roamdusk Author, rendered under
   every guide and anywhere [rd_author] is placed.

   Quiet on purpose. It is the last thing on the page and its
   job is to say who stands behind what was just read -- not to
   compete with the guide above it.
   ============================================================ */

.rd-author{
  max-width:52rem;
  margin:2.75rem auto 0;
  padding:1.5rem;
  display:flex;
  gap:1.25rem;
  align-items:flex-start;
  background:var(--rd-surface);
  border:1px solid var(--rd-line);
  border-left:3px solid var(--rd-ember);
  border-radius:3px;
}

.rd-author--compact{
  margin-top:2.25rem;
  padding:1.25rem;
  gap:1rem;
}

.rd-author__photo{
  flex:none;
  width:88px;
  height:88px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:2px solid var(--rd-line);
}

.rd-author--compact .rd-author__photo{
  width:66px;
  height:66px;
}

.rd-author__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}

.rd-author__eyebrow{
  margin:0;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rd-muted);
}

.rd-author__name{
  margin:0;
  font-family:var(--rd-display);
  font-size:1.15rem;
  font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  line-height:1.25;
  color:var(--rd-ink);
}

/* The location sits on the name line, separated by a dot, so the
   two read as one fact: who, and from where. */
.rd-author__where{
  font-family:var(--rd-text);
  font-size:.8rem;
  font-weight:400;
  color:var(--rd-muted);
  letter-spacing:0;
}

.rd-author__where::before{
  content:"\00B7";
  margin:0 .45rem;
  color:var(--rd-line);
}

.rd-author__bio{
  margin:0;
  font-size:.92rem;
  line-height:1.6;
  color:var(--rd-muted);
}

.rd-author__more{
  margin:.25rem 0 0;
  font-size:.85rem;
}

.rd-author__more a{
  color:var(--rd-link);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.rd-author__more a:hover,
.rd-author__more a:focus-visible{
  border-bottom-color:currentColor;
}

.rd-author__more a:focus-visible{
  outline:2px solid var(--rd-ember);
  outline-offset:2px;
}

/* Phones: stack, and centre the photo above the text rather than
   squeezing an 88px circle beside a 30-character line. */
@media (max-width:36rem){
  .rd-author{
    flex-direction:column;
    align-items:flex-start;
    gap:.9rem;
    padding:1.25rem;
  }
  .rd-author__photo,
  .rd-author--compact .rd-author__photo{
    width:72px;
    height:72px;
  }
  .rd-author__where{ display:block; }
  .rd-author__where::before{ content:none; }
}

/* Section 9a targets <p> and would cap the name, bio and eyebrow
   at 65ch inside a box that already sets its own width. */
.single .entry-content .rd-author,
.page .entry-content .rd-author{
  max-width:52rem;
  margin-left:auto;
  margin-right:auto;
}

.single .entry-content .rd-author p,
.page .entry-content .rd-author p{
  max-width:none;
  margin-left:0;
  margin-right:0;
}

@media print{
  .rd-author{ border-left-color:#666; }
  .rd-author__more{ display:none; }
}


/* ============================================================
   17. LEGAL DOCUMENTS                        added in 1.15.0
   ------------------------------------------------------------
   The three legal pages render from shortcodes, so their
   headings and lists sit outside .entry-content's usual block
   markup and need their own rhythm.
   ============================================================ */

.rd-legal-doc{
  max-width:var(--rd-measure);
  margin:0 auto;
}

.rd-legal-doc > p{
  font-size:1.02rem;
  line-height:1.7;
  margin:1rem 0;
  color:var(--rd-ink);
}

.rd-legal-doc h2{
  font-family:var(--rd-display);
  font-size:1.45rem;
  font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  letter-spacing:-.012em;
  line-height:1.2;
  color:var(--rd-ink);
  margin:2.25rem 0 .6rem;
}

.rd-legal-doc ul{
  margin:1rem 0;
  padding-left:1.35rem;
  font-size:1rem;
  line-height:1.7;
  color:var(--rd-ink);
}

.rd-legal-doc ul li{ margin:.45rem 0; }

.rd-legal-doc a{
  color:var(--rd-link);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.rd-legal-doc a:hover,
.rd-legal-doc a:focus-visible{ border-bottom-color:currentColor; }

/* The callout inside a legal page reuses .rd-note from section 6,
   but shortcode output has no wrapping <p>, so give it margins. */
.rd-legal-doc .rd-note{ margin:1.5rem 0; }

.rd-legal-updated{
  margin:2.5rem 0 0;
  padding-top:1rem;
  border-top:1px solid var(--rd-line);
  font-size:.84rem;
  color:var(--rd-muted);
}

/* ---- the editor-only note ----
   Deliberately loud. It is only ever shown to someone who can
   edit pages, and its whole job is to be impossible to forget.
   Readers never see it: the PHP returns nothing for them. */
.rd-legal-todo{
  margin:1.25rem 0;
  padding:.85rem 1rem;
  background:var(--rd-sunken);
  border:1px dashed var(--rd-ember);
  border-radius:3px;
  font-size:.88rem;
  line-height:1.55;
  color:var(--rd-ink);
}

.rd-legal-todo strong{ color:var(--rd-ember); }

@media print{
  .rd-legal-todo{ display:none; }
}

/* Section 9a would re-cap these at 65ch inside a box that already
   sets the measure, and centre list items independently. */
.single .entry-content .rd-legal-doc,
.page .entry-content .rd-legal-doc{
  max-width:var(--rd-measure);
  margin-left:auto;
  margin-right:auto;
}

.single .entry-content .rd-legal-doc :is(p, ul, h2),
.page .entry-content .rd-legal-doc :is(p, ul, h2){
  max-width:none;
  margin-left:0;
  margin-right:0;
}

.single .entry-content .rd-legal-doc ul,
.page .entry-content .rd-legal-doc ul{
  padding-left:1.35rem;
}


/* ============================================================
   18. COUNTRY HUB AND HOME PAGE              added in 1.16.0
   ============================================================ */

/* ---- the country hub, rendered into the archive description ---- */

.rd-hub{
  max-width:52rem;
  margin:0 auto 2rem;
  text-align:left;
}

.rd-hub__intro{
  font-size:1.05rem;
  line-height:1.7;
  color:var(--rd-ink);
  max-width:var(--rd-measure);
}

.rd-hub__intro p{ margin:0 0 1rem; }

.rd-hub__count{
  margin:1.25rem 0 0;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rd-muted);
  font-variant-numeric:tabular-nums;
}

.rd-hub__others{
  margin:1.5rem 0 0;
  padding-top:1.25rem;
  border-top:1px solid var(--rd-line);
}

.rd-hub__others-label{
  margin:0 0 .6rem;
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rd-muted);
}

.rd-hub__others ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .5rem;
}

.rd-hub__others a{
  display:inline-block;
  padding:.3rem .7rem;
  font-size:.82rem;
  color:var(--rd-ink);
  text-decoration:none;
  background:var(--rd-surface);
  border:1px solid var(--rd-line);
  border-radius:2px;
  transition:border-color .15s ease, color .15s ease;
}

.rd-hub__others a:hover,
.rd-hub__others a:focus-visible{
  border-color:var(--rd-ember);
  color:var(--rd-link);
}

.rd-hub__others a:focus-visible{
  outline:2px solid var(--rd-ember);
  outline-offset:2px;
}

/* ---- [rd_hero] ---- */

.rd-hero{
  position:relative;
  overflow:hidden;
  border-radius:3px;
  margin:0 0 2.5rem;
  display:flex;
  align-items:flex-end;
  isolation:isolate;
}

.rd-hero--tall{ min-height:clamp(20rem, 46vw, 30rem); }
.rd-hero--short{ min-height:clamp(14rem, 30vw, 20rem); }

/* No photograph yet: the dusk gradient stands in. A deliberate
   fallback, not an empty box. */
.rd-hero--nophoto{
  background:linear-gradient(
    170deg,
    var(--rd-astronomical),
    var(--rd-nautical) 38%,
    var(--rd-civil) 62%,
    var(--rd-venus) 82%,
    var(--rd-ember) 94%,
    var(--rd-afterglow)
  );
}

.rd-hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

/* The scrim. Text over a photograph has no guaranteed contrast --
   this gives it one, dark at the bottom where the words sit. */
.rd-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(
    0deg,
    rgba(12,18,36,.88) 0%,
    rgba(12,18,36,.62) 34%,
    rgba(12,18,36,.18) 68%,
    rgba(12,18,36,.05) 100%
  );
}

.rd-hero__body{
  position:relative;
  padding:2rem;
  max-width:44rem;
}

.rd-hero__title{
  margin:0;
  font-family:var(--rd-display);
  font-size:clamp(1.9rem, 5.2vw, 3.2rem);
  font-weight:600;
  font-variation-settings:"SOFT" 30,"WONK" 1;
  letter-spacing:-.022em;
  line-height:1.08;
  color:#fff;
  text-wrap:balance;
}

.rd-hero__sub{
  margin:.75rem 0 0;
  font-size:clamp(.98rem, 1.8vw, 1.12rem);
  line-height:1.55;
  color:#E6E8F0;
  max-width:46ch;
}

.rd-hero__cta{ margin:1.5rem 0 0; }

@media (max-width:32rem){
  .rd-hero__body{ padding:1.5rem 1.25rem; }
}

/* ---- [rd_latest] cards ---- */

.rd-cards{
  list-style:none;
  margin:1.75rem 0;
  padding:0;
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.rd-cards--cols-1{ grid-template-columns:minmax(0,1fr); }
.rd-cards--cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.rd-cards--cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.rd-card{ margin:0; }

.rd-card > a{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--rd-surface);
  border:1px solid var(--rd-line);
  border-radius:3px;
  overflow:hidden;
  text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}

.rd-card > a:hover,
.rd-card > a:focus-visible{
  border-color:var(--rd-ember);
  transform:translateY(-2px);
}

.rd-card > a:focus-visible{
  outline:2px solid var(--rd-ember);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .rd-card > a{ transition:border-color .15s ease; }
  .rd-card > a:hover{ transform:none; }
}

.rd-card__img{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}

.rd-card__body{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:1rem;
}

.rd-card__chip{
  align-self:flex-start;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rd-muted);
  background:var(--rd-sunken);
  border-radius:2px;
  padding:.22rem .5rem;
}

.rd-card__title{
  font-family:var(--rd-display);
  font-size:1.12rem;
  font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  line-height:1.22;
  color:var(--rd-ink);
}

.rd-card__excerpt{
  font-size:.88rem;
  line-height:1.55;
  color:var(--rd-muted);
}

.rd-card__meta{
  margin-top:auto;
  padding-top:.6rem;
  border-top:1px solid var(--rd-line);
  font-size:.72rem;
  color:var(--rd-muted);
}

@media (max-width:56rem){
  .rd-cards,
  .rd-cards--cols-3,
  .rd-cards--cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:36rem){
  .rd-cards,
  .rd-cards--cols-2,
  .rd-cards--cols-3,
  .rd-cards--cols-4{ grid-template-columns:minmax(0,1fr); }
}

/* ---- [rd_cta] ---- */

.rd-cta{
  background:var(--rd-nautical);
  border-radius:3px;
  padding:2.25rem 2rem;
  margin:2.75rem auto;
  max-width:52rem;
}

.rd-cta__title{
  margin:0;
  font-family:var(--rd-display);
  font-size:clamp(1.4rem, 3vw, 1.9rem);
  font-weight:600;
  font-variation-settings:"SOFT" 30,"WONK" 1;
  line-height:1.15;
  color:#fff;
}

.rd-cta__body{
  margin:.6rem 0 0;
  font-size:1rem;
  line-height:1.6;
  color:#B9C0D4;
  max-width:46ch;
}

.rd-cta__action{ margin:1.4rem 0 0; }

/* Section 9a would cap these at 65ch. They set their own widths. */
.page .entry-content .rd-hero,
.page .entry-content .rd-cards,
.page .entry-content .rd-cta,
.home .entry-content .rd-hero,
.home .entry-content .rd-cards,
.home .entry-content .rd-cta{
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

.page .entry-content .rd-cta,
.home .entry-content .rd-cta{ max-width:52rem; }

@media print{
  .rd-hero::after{ display:none; }
  .rd-cta{ display:none; }
}


/* ============================================================
   19. [rd_todo] -- the note only an editor sees
                                               added in 1.17.0
   ------------------------------------------------------------
   Deliberately loud, and deliberately never rendered for a
   visitor: the PHP returns before the markup exists, so there
   is nothing in the HTML for a reader to find.

   Loud because its whole job is to be impossible to forget in
   a long draft.
   ============================================================ */

.rd-todo{
  max-width:var(--rd-measure);
  margin:1.5rem auto;
  padding:1rem 1.3rem;
  background:var(--rd-sunken);
  border:1px dashed var(--rd-ember);
  border-radius:3px;
  font-size:.92rem;
  line-height:1.6;
  color:var(--rd-ink);
}

.rd-todo b{
  display:block;
  margin-bottom:.35rem;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rd-ember);
}

/* Section 9a targets nothing here, but the measure rule would
   re-centre it inside its own box on a single post. */
.single .entry-content .rd-todo,
.page .entry-content .rd-todo{
  max-width:var(--rd-measure);
  margin-left:auto;
  margin-right:auto;
}

/* An unfinished note is for the screen, never for paper or for
   a reading-mode extraction. */
@media print{
  .rd-todo{ display:none !important; }
}