/*
Theme Name: ATL Departures
Theme URI: https://atl-departures.example/
Author: WE Web Design
Author URI: https://example.org/
Description: A departures board for an Atlanta SEO site. Every guide leaves from ATL: the front page shows the newest guide in full on its boarding pass (Now boarding), then an airport board where each guide is a flight, with the three SEO systems it covers most as flap codes (GSC Search Console, GBP Business Profile, 301 redirects, LNK links ...), the number of legs (its sections) and the time it takes to read; then every SEO system with the guides that cover it, and the Atlanta places the guides name. A guide opens as a boarding pass: ATL to the guide, its route through the SEO systems, its itinerary of legs, the Atlanta places on the way, then the guide with its tables as labelled boards. B612 Mono and Pathway Extreme; Georgia clay and runway blue on concourse white, the board dark with amber. Categories, tags and author archives are never shown or linked.
Version: 1.0.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atl-departures
Tags: blog, two-columns, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-patterns, full-site-editing-optional
*/

/* ========================================================================
   1. TOKENS - Georgia clay + runway blue on concourse white; the departures board dark in both modes with amber (37/37 pairs AA, worst 5.05:1)
   ======================================================================== */
:root{
  --paper:#f2f0ea;
  --paper-2:#e7e4dc;
  --ink:#16181b;
  --ink-2:#3a3d42;
  --ink-3:#5b5f66;
  --rule:#d6d2c8;
  --card:#ffffff;
  --accent:#892200;
  --accent-2:#061f7a;
  --board:#0d0f12;--flap:#1b1f25;--flap-ink:#f3f1e9;--flap-ink-2:#a9aeb6;--amber:#ffc666;--board-ink:#0d0f12;
  --warn:#9a4708;
  --warn-soft:#fef3c7;
  --safe:#1f6350;
  --safe-soft:#e0f2fe;
  --link:var(--accent-2);
  --focus:#16181b;

  --sans:'Pathway Extreme',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Pathway Extreme',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'B612 Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --measure:42rem;
  --measure-wide:64rem;
  --shell:84rem;

  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --space-9:6rem;

  --radius-1:.25rem;
  --radius-2:.5rem;
  --radius-3:.75rem;

  --shadow-1:0 1px 2px rgba(26,36,33,.06),0 1px 1px rgba(26,36,33,.04);
  --shadow-2:0 4px 12px rgba(26,36,33,.08),0 2px 4px rgba(26,36,33,.04);

  --z-base:0;
  --z-sticky:10;
  --z-rail:20;
  --z-progress:30;
  --z-topbar:40;
  --z-drawer:50;
  --z-skip:999;

  color-scheme:light;
}
[data-theme="dark"]{
  --paper:#0f1114;
  --paper-2:#171a1f;
  --ink:#eef0f2;
  --ink-2:#c6cad0;
  --ink-3:#959aa3;
  --rule:#2a2e35;
  --card:#13161a;
  --accent:#d89782;
  --accent-2:#a2c2d8;
  --warn:#fbbf24;
  --warn-soft:#1c1410;
  --safe:#8ccbb6;
  --safe-soft:#0c1f2e;
  --link:var(--accent-2);
  --focus:#e7e4dc;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 1px 1px rgba(0,0,0,.3);
  --shadow-2:0 4px 12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.4);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f1114;
    --paper-2:#171a1f;
    --ink:#eef0f2;
    --ink-2:#c6cad0;
    --ink-3:#959aa3;
    --rule:#2a2e35;
    --card:#13161a;
    --accent:#d89782;
    --accent-2:#a2c2d8;
    --warn:#fbbf24;
    --warn-soft:#1c1410;
    --safe:#8ccbb6;
    --safe-soft:#0c1f2e;
    --link:var(--accent-2);
    --focus:#e7e4dc;
    --shadow-1:0 1px 2px rgba(0,0,0,.4),0 1px 1px rgba(0,0,0,.3);
    --shadow-2:0 4px 12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}

/* ========================================================================
   2. RESET + BASE
   ======================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  font-feature-settings:'ss01','kern','liga';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
img{aspect-ratio:attr(width)/attr(height)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.12em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--radius-1);
}
hr{border:0;border-top:1px solid var(--rule);margin:var(--space-6) 0}
::selection{background:var(--accent);color:var(--paper)}

/* ========================================================================
   3. SKIP LINK (WD-9 — focus override mandatory)
   ======================================================================== */
.skip-link{
  position:absolute;
  left:-9999px;top:-9999px;
  width:auto;height:auto;
  clip:auto;clip-path:none;overflow:visible;
  background:var(--ink);
  color:var(--paper);
  padding:.75rem 1.25rem;
  border-radius:var(--radius-2);
  font-weight:600;
  z-index:var(--z-skip);
  text-decoration:none;
}
.skip-link:focus{left:1rem;top:1rem}

/* ========================================================================
   4. TYPOGRAPHY (WD-10, WD-14)
   ======================================================================== */
h1,h2,h3,h4,h5,h6{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:2.4rem 0 .8rem;
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:clamp(2rem,4.2vw,2.75rem);line-height:1.15;letter-spacing:-.02em;margin-top:0}
h2{font-size:clamp(1.5rem,2.6vw,1.875rem)}
h3{font-size:clamp(1.25rem,2vw,1.4rem)}
h4{font-size:1.125rem}
h5,h6{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
p{margin:0 0 1.1rem;text-wrap:pretty}
strong,b{font-weight:600;color:var(--ink)}
em,i{font-style:italic}
small{font-size:.8125rem;color:var(--ink-2)}
blockquote{
  border-left:3px solid var(--accent);
  margin:1.6rem 0;
  padding:.4rem 0 .4rem 1.2rem;
  font-family:var(--serif);
  font-size:1.125rem;
  font-style:italic;
  color:var(--ink-2);
}
blockquote cite{display:block;font-style:normal;font-size:.875rem;color:var(--ink-3);margin-top:.4rem}
code,kbd,pre,samp{font-family:ui-monospace,'SF Mono','Menlo','Consolas',monospace;font-size:.9em}
:not(pre)>code{background:var(--paper-2);padding:.15em .4em;border-radius:var(--radius-1);color:var(--ink)}
pre{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius-2);
  padding:1rem 1.2rem;
  overflow-x:auto;
  font-size:.875rem;
  line-height:1.55;
  margin:1.5rem 0;
}
ul,ol{margin:0 0 1.2rem;padding-left:1.4rem}
li{margin:.4rem 0}
ul li::marker{color:var(--accent)}
dl{margin:1.2rem 0}
dt{font-weight:600;margin-top:.8rem}
dd{margin:0 0 .4rem 1.2rem;color:var(--ink-2)}
table{border-collapse:collapse;width:100%;margin:1.5rem 0;font-size:.95rem}
th,td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:600;color:var(--ink);background:var(--paper-2)}
tbody tr:hover{background:var(--paper-2)}
figure{margin:1.6rem 0}
figcaption{font-size:.875rem;color:var(--ink-3);text-align:center;margin-top:.5rem;font-style:italic}

/* ========================================================================
   5. LAYOUT — page shell
   ======================================================================== */
.page-shell{min-height:100vh;display:flex;flex-direction:column}
.site-main{flex:1 0 auto}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}

/* ========================================================================
   6. TOPBAR (WD-7 touch 44+)
   ======================================================================== */
.topbar{
  position:sticky;top:0;z-index:var(--z-topbar);
  background:color-mix(in oklab,var(--paper) 92%,transparent);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:.6rem clamp(1rem,4vw,2rem);
  display:flex;align-items:center;gap:1rem;
  min-height:60px;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand__mark{
  width:34px;height:34px;border-radius:50%;
  background:var(--accent);
  color:var(--paper);
  font-family:var(--serif);
  font-weight:600;
  font-size:1.05rem;
  display:grid;place-items:center;
  letter-spacing:-.02em;
}
.brand__name{font-family:var(--serif);font-weight:600;font-size:1.125rem;letter-spacing:-.01em}
.topbar__inner{flex-wrap:wrap;row-gap:.35rem}
.brand{flex:1 1 auto;min-width:0;min-height:44px}
.brand__mark{flex:0 0 auto}
.brand__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar__nav{display:flex;order:4;flex:1 1 100%;flex-wrap:wrap;gap:0 1.2rem;font-size:.95rem;align-items:center}
.topbar__nav a{color:var(--ink-2);text-decoration:none;padding:.6rem 0;min-height:44px;display:inline-flex;align-items:center}
.topbar__nav a:hover,.topbar__nav a[aria-current="page"]{color:var(--ink)}
.topbar__search{order:3;flex:1 1 100%;min-width:0}
.theme-toggle{order:2;flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink-2)}
.theme-toggle:hover{color:var(--ink);background:var(--paper-2)}
.theme-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .moon{display:none}
  :root:not([data-theme="light"]) .theme-toggle .sun{display:block}
}
@media (min-width:48rem){
  .topbar__inner{flex-wrap:nowrap}
  .brand{flex:0 0 auto}
  .topbar__nav{order:0;flex:0 1 auto;margin-left:auto;flex-wrap:nowrap}
  .topbar__search{order:0;flex:0 1 20rem;margin-left:auto}
  .topbar__nav + .topbar__search{margin-left:0}
  .theme-toggle{order:0}
}

/* ========================================================================
   7. SEARCH INPUT
   ======================================================================== */
.search-form{position:relative;width:100%}
.search-form__input{
  width:100%;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:999px;
  padding:.55rem 3rem .55rem 2.4rem;
  font-size:1rem;
  min-height:44px;
  color:var(--ink);
}
.search-form__input::placeholder{color:var(--ink-3)}
.search-form__icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.search-form__submit{position:absolute;right:.05rem;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:transparent}
.search-form__submit:hover{color:var(--ink);background:var(--paper)}

/* ========================================================================
   8. READING PROGRESS BAR (WD-16 reduced-motion respect)
   ======================================================================== */
.reading-progress{
  position:fixed;top:0;left:0;right:0;height:3px;
  z-index:var(--z-progress);
  background:transparent;
  pointer-events:none;
}
.reading-progress__bar{
  display:block;height:100%;width:0;
  background:var(--accent);
  transition:width .12s linear;
  transform-origin:left;
}
@media (prefers-reduced-motion:reduce){
  .reading-progress__bar{transition:none}
}

/* ========================================================================
   9-10. (front-page hero + magazine grid removed)
   The front page is the departures board (section 28).
   ======================================================================== */

/* ========================================================================
   11. ARTICLE — two-column long-form
   ======================================================================== */
.article-shell{
  max-width:var(--measure-wide);
  margin:0 auto;
  padding:clamp(2rem,4vw,3rem) clamp(1rem,4vw,2rem);
}
.article-main{min-width:0;max-width:46rem;margin-inline:auto}
.article-main--page{margin-inline:auto;padding-block:clamp(2.5rem,5vw,4rem)}

/* ========================================================================
   11b. COLLAPSIBLE SUMMARY CARD (optional — sits at top of article)
   ======================================================================== */
.tldr-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-left:4px solid var(--accent);
  border-radius:var(--radius-3);
  padding:1.2rem 1.4rem;
  margin:0 0 2rem;
  box-shadow:var(--shadow-1);
}
.tldr-card[open] summary{margin-bottom:.8rem}
.tldr-card summary{
  cursor:pointer;
  display:flex;align-items:center;gap:.6rem;
  list-style:none;
  font-family:var(--serif);
  font-size:1rem;
  font-weight:600;
  color:var(--accent-2);
  letter-spacing:-.005em;
  min-height:32px;
}
.tldr-card summary::-webkit-details-marker{display:none}
.tldr-card summary::before{
  content:'';
  width:0;height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform .15s ease;
  flex-shrink:0;
}
.tldr-card[open] summary::before{transform:rotate(90deg)}
.tldr-card__label{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:700;
  color:var(--accent);
  margin-right:auto;
}
.tldr-card p,.tldr-card ul,.tldr-card ol{
  font-size:.985rem;
  line-height:1.65;
  color:var(--ink-2);
  margin:0 0 .8rem;
}
.tldr-card p:last-child,.tldr-card ul:last-child,.tldr-card ol:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){
  .tldr-card summary::before{transition:none}
}

/* ========================================================================
   11c. FOOTNOTE-STYLE REFERENCES (sourced citations, bottom of article)
   ======================================================================== */
.article-refs{
  margin:3rem 0 0;
  padding:1.6rem 0 0;
  border-top:2px solid var(--accent);
}
.article-refs__heading{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:0 0 1rem;
  color:var(--ink);
}
.article-refs__list{
  list-style:none;
  margin:0;padding:0;
  counter-reset:refs;
  font-size:.9rem;
  line-height:1.55;
}
.article-refs__list li{
  counter-increment:refs;
  display:flex;
  gap:.6rem;
  margin:.6rem 0;
  color:var(--ink-2);
}
.article-refs__list li::before{
  content:counter(refs);
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:600;
  color:var(--accent-2);
  min-width:1.6rem;
  text-align:right;
  flex-shrink:0;
}
.article-refs__list a{color:var(--link);text-underline-offset:.16em;word-break:break-word}
.article-refs__source{font-style:italic;color:var(--ink-3)}

/* In-prose footnote callout */
.prose sup.fn-ref{
  font-family:var(--mono);
  font-size:.72em;
  font-weight:600;
  vertical-align:super;
  line-height:0;
}
.prose sup.fn-ref a{
  color:var(--accent-2);
  text-decoration:none;
  padding:0 .15em;
  background:var(--paper-2);
  border-radius:.2em;
}
.prose sup.fn-ref a:hover{background:var(--accent);color:var(--paper)}

/* ========================================================================
   11d. INLINE RELATED CARD (in-flow related card)
   ======================================================================== */
.inline-related-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-3);
  padding:1.1rem 1.3rem;
  margin:2rem 0;
  display:flex;flex-direction:column;gap:.4rem;
}
.inline-related-card__label{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:700;
  color:var(--ink-3);
}
.inline-related-card__title{font-family:var(--serif);font-size:1.05rem;line-height:1.3;margin:0;letter-spacing:-.01em}
.inline-related-card__title a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.inline-related-card__title a:hover{color:var(--accent-2);border-bottom-color:var(--accent)}
.inline-related-card__why{font-size:.95rem;color:var(--ink-2);margin:.2rem 0 0;line-height:1.55}

/* Decision/comparison card — two options side by side */
.diy-vs-pro{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border:1px solid var(--rule);
  border-radius:var(--radius-3);
  overflow:hidden;
  margin:2rem 0;
}
@media (min-width:720px){.diy-vs-pro{grid-template-columns:1fr 1fr}}
.diy-vs-pro__col{padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.diy-vs-pro__col--safe{background:var(--safe-soft);border-bottom:1px solid var(--rule)}
.diy-vs-pro__col--pro{background:var(--warn-soft)}
@media (min-width:720px){
  .diy-vs-pro__col--safe{border-bottom:0;border-right:1px solid var(--rule)}
}
.diy-vs-pro__label{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  font-weight:700;
}
.diy-vs-pro__col--safe .diy-vs-pro__label{color:var(--safe)}
.diy-vs-pro__col--pro .diy-vs-pro__label{color:var(--warn)}
.diy-vs-pro__title{font-family:var(--serif);font-size:1.05rem;font-weight:600;margin:0;color:var(--ink)}
.diy-vs-pro__body{font-size:.925rem;color:var(--ink-2);line-height:1.55;margin:0}
.diy-vs-pro__body ul{margin:.4rem 0 0;padding-left:1.2rem}
.diy-vs-pro__body li{margin:.2rem 0}

/* ========================================================================
   12. ARTICLE HEAD
   ======================================================================== */
.post__header{margin-bottom:2rem}
.post__kicker{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  font-weight:600;
  color:var(--accent-2);
  text-decoration:none;
  margin-bottom:.8rem;
}
.post__kicker:hover{color:var(--accent)}
.post__title{
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,2.75rem);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 1rem;
  text-wrap:balance;
}
.post__byline{
  display:flex;flex-wrap:wrap;gap:1rem 1.4rem;
  font-size:.875rem;color:var(--ink-3);
  margin:0 0 1.4rem;
  padding:0;
}
.post__byline > span{display:inline-flex;align-items:baseline;gap:.4rem}
.post__byline .label{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.7rem;
  font-weight:600;
  color:var(--ink-3);
}
.post__byline time{color:var(--ink-2)}
.post__featured-img{margin:0 0 2rem;border-radius:var(--radius-3);overflow:hidden;border:1px solid var(--rule)}
.post__featured-img img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

/* ========================================================================
   13. PROSE — body content (long-form readability)
   ======================================================================== */
.prose{font-size:1.0625rem;line-height:1.75}
/* A raw URL or a long unbroken string in the content must wrap instead of
   widening the page on a phone (tema 53: a references list of raw URLs pushed
   the page to 473px at 320). Tables are excluded - they scroll in their region. */
.prose :is(p,li,dd,dt,blockquote,figcaption,h2,h3,h4){overflow-wrap:anywhere}
.prose > * + *{margin-top:0}
.prose p{margin:0 0 1.2rem}
.prose h2{margin:2.6rem 0 .9rem;scroll-margin-top:5rem;font-size:clamp(1.4rem,2.4vw,1.75rem)}
.prose h3{margin:2rem 0 .7rem;scroll-margin-top:5rem;font-size:clamp(1.15rem,1.8vw,1.3rem)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.6rem}
.prose li{margin:.5rem 0}
.prose img{border-radius:var(--radius-2);border:1px solid var(--rule);margin:1.6rem 0}
.prose a{color:var(--link)}
.prose a:hover{color:var(--accent)}

/* ========================================================================
   14. TL;DR CARD (block pattern)
   ======================================================================== */
.tldr{
  background:var(--card);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-3);
  padding:1.2rem 1.4rem;
  margin:0 0 2rem;
}
.tldr__label{
  display:block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:700;
  color:var(--accent-2);
  margin-bottom:.5rem;
}
.tldr p{margin:0 0 .6rem;font-size:.985rem;line-height:1.6;color:var(--ink-2)}
.tldr p:last-child{margin-bottom:0}
.tldr ul,.tldr ol{margin:.4rem 0 0;padding-left:1.2rem;font-size:.975rem;color:var(--ink-2)}

/* ========================================================================
   15. LEGAL DISCLAIMER CALLOUT
   ======================================================================== */
.legal-disclaimer{
  background:var(--warn-soft);
  border:1px solid color-mix(in oklab,var(--warn) 35%,var(--rule));
  border-radius:var(--radius-3);
  padding:1.1rem 1.3rem;
  margin:0 0 2rem;
  font-size:.925rem;
  line-height:1.55;
  color:var(--ink-2);
}
.legal-disclaimer__label{
  display:flex;align-items:center;gap:.5rem;
  font-weight:700;
  color:var(--warn);
  margin-bottom:.4rem;
  font-size:.85rem;
  letter-spacing:.04em;
}
.legal-disclaimer__label::before{
  content:'';
  display:inline-block;
  width:14px;height:14px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2L1 21h22L12 2zm0 6l7.5 13h-15L12 8zm-1 4v4h2v-4h-2zm0 5v2h2v-2h-2z'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2L1 21h22L12 2zm0 6l7.5 13h-15L12 8zm-1 4v4h2v-4h-2zm0 5v2h2v-2h-2z'/></svg>") no-repeat center / contain;
  flex-shrink:0;
}
.legal-disclaimer p{margin:0 0 .5rem}
.legal-disclaimer p:last-child{margin-bottom:0}

/* ========================================================================
   16. CALLOUT (general block pattern, info/warning)
   ======================================================================== */
.callout{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-3);
  padding:1rem 1.2rem;
  margin:1.6rem 0;
  font-size:.975rem;
}
.callout.is-style-warning{
  border-left-color:var(--warn);
  background:var(--warn-soft);
}
.callout p{margin:0 0 .6rem}
.callout p:last-child{margin-bottom:0}

/* ========================================================================
   17. META RAIL (right column on article)
   ======================================================================== */
.meta-rail__group{margin-bottom:1.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--rule)}
.meta-rail__group:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.meta-rail__label{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:700;
  color:var(--ink-3);
  margin:0 0 .55rem;
}
.meta-rail__value{font-size:.925rem;color:var(--ink-2);margin:0;line-height:1.5}
.meta-rail__value strong{color:var(--ink);font-weight:600}

/* ========================================================================
   18. TOC (table of contents — scrollspy)
   ======================================================================== */
.toc__list{list-style:none;margin:0;padding:0;font-size:.9rem;line-height:1.4}
.toc__list li{margin:.35rem 0}
.toc__list a{
  color:var(--ink-2);
  text-decoration:none;
  display:block;
  padding:.2rem .55rem;
  border-left:2px solid transparent;
  border-radius:0 var(--radius-1) var(--radius-1) 0;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.toc__list a:hover{color:var(--ink);background:var(--paper-2)}
.toc__list a.is-active{
  color:var(--accent-2);
  border-left-color:var(--accent);
  background:var(--paper-2);
  font-weight:600;
}
@media (prefers-reduced-motion:reduce){
  .toc__list a{transition:none}
}
.toc__list .toc-h3{padding-left:.9rem;font-size:.85rem;color:var(--ink-3)}
.toc__list .toc-h3 a{padding-left:.9rem}

/* ========================================================================
   19. MOBILE TOC DRAWER
   ======================================================================== */
.inline-toc{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius-3);
  padding:.8rem 1.2rem;
  margin:0 0 2rem;
}
.inline-toc summary{
  cursor:pointer;
  font-weight:600;
  font-size:.95rem;
  color:var(--ink);
  list-style:none;
  display:flex;align-items:center;gap:.5rem;
  padding:.3rem 0;
  min-height:32px;
}
.inline-toc summary::-webkit-details-marker{display:none}
.inline-toc summary::before{
  content:'';
  display:inline-block;
  width:0;height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform .15s ease;
  flex-shrink:0;
}
.inline-toc[open] summary::before{transform:rotate(90deg)}
.inline-toc .toc__list{margin-top:.6rem;padding-left:.4rem}
@media (prefers-reduced-motion:reduce){
  .inline-toc summary::before{transition:none}
}

.toc-drawer-toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:999px;
  padding:.5rem 1rem;
  font-size:.9rem;
  color:var(--ink-2);
  margin:0 0 1rem;
  min-height:44px;
}
.toc-drawer-toggle:hover{color:var(--ink);background:var(--card)}
@media (min-width:1080px){
  .toc-drawer-toggle{display:none}
}
.toc-drawer{
  position:fixed;
  inset:0;
  z-index:var(--z-drawer);
  background:rgba(26,36,33,.5);
  display:none;
  padding:5rem 1rem 1rem;
}
.toc-drawer[data-open="true"]{display:block}
.toc-drawer__panel{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius-3);
  padding:1.4rem;
  max-width:32rem;
  margin:0 auto;
  max-height:80vh;
  overflow:auto;
}
.toc-drawer__close{
  float:right;
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:var(--radius-2);
  color:var(--ink-2);
}
.toc-drawer__close:hover{color:var(--ink);background:var(--paper-2)}

/* ========================================================================
   20. PAGINATION
   ======================================================================== */
.pagination{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;
  margin:3rem 0 2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}
.pagination a,.pagination span{
  display:inline-grid;place-items:center;
  min-width:44px;height:44px;
  padding:0 .8rem;
  border-radius:var(--radius-2);
  font-size:.95rem;
  color:var(--ink-2);
  text-decoration:none;
  border:1px solid var(--rule);
}
.pagination a:hover{color:var(--ink);background:var(--paper-2);border-color:var(--ink-3)}
.pagination .current{background:var(--accent);color:var(--paper);border-color:var(--accent);font-weight:600}
.pagination .dots{border:0;background:transparent}

/* ========================================================================
   21. POST NAV (prev / next)
   ======================================================================== */
.post-nav{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin:3rem 0 0;
  padding-top:1.6rem;
  border-top:1px solid var(--rule);
}
@media (min-width:640px){.post-nav{grid-template-columns:1fr 1fr}}
.post-nav a{
  display:block;
  padding:1rem 1.2rem;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius-3);
  text-decoration:none;
  color:var(--ink);
  transition:border-color .15s ease;
}
.post-nav a:hover{border-color:var(--accent)}
.post-nav__label{
  display:block;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.72rem;
  font-weight:600;
  color:var(--ink-3);
  margin-bottom:.3rem;
}
.post-nav__title{font-family:var(--serif);font-size:1.025rem;line-height:1.3;color:var(--ink)}
.post-nav__next{text-align:right}

/* ========================================================================
   22. FOOTER
   ======================================================================== */
.site-footer{
  border-top:1px solid var(--rule);
  padding:clamp(2.5rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(3rem,6vw,5rem);
  font-size:.925rem;
  color:var(--ink-2);
}
.site-footer__top{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1.6rem;
  margin-bottom:2rem;
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--rule);
}
.site-footer__brand{display:flex;flex-direction:column;gap:.4rem;max-width:24rem}
.site-footer__name{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink)}
.site-footer__tag{color:var(--ink-3);font-size:.9rem;line-height:1.5;margin:0}
.site-footer__links{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.9rem}
.site-footer__links a{color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.site-footer__links a:hover{color:var(--ink)}
.site-footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.825rem;color:var(--ink-3)}
.site-footer__disclaimer{max-width:50rem;line-height:1.55;color:var(--ink-3);font-size:.825rem;margin:1rem 0 0}

/* ========================================================================
   23. COMMENTS
   ======================================================================== */
.comments-area{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rule)}
.comments-title{font-family:var(--serif);font-size:1.4rem;margin:0 0 1.4rem}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{margin:0 0 1.4rem;padding:1rem 1.2rem;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-3)}
.comment-meta{font-size:.875rem;color:var(--ink-3);margin-bottom:.5rem}
.comment-meta cite{font-style:normal;color:var(--ink);font-weight:600}
.comment-form label{display:block;font-size:.875rem;margin:.8rem 0 .3rem;color:var(--ink-2);font-weight:500}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{
  width:100%;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius-2);
  padding:.6rem .8rem;
  font:inherit;
  color:var(--ink);
  min-height:44px;
}
.comment-form textarea{min-height:8rem;resize:vertical}
.form-submit input[type="submit"],.button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);
  color:var(--paper);
  border:0;
  padding:.7rem 1.4rem;
  border-radius:var(--radius-2);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  min-height:44px;
  min-width:44px;
  transition:background .15s ease;
}
.form-submit input[type="submit"]:hover,.button:hover{background:var(--accent-2)}
@media (prefers-reduced-motion:reduce){
  .form-submit input[type="submit"],.button{transition:none}
}

/* ========================================================================
   24. 404 / SEARCH
   ======================================================================== */
.error-404,.search-results-head{padding:clamp(3rem,6vw,5rem) 0;text-align:center}
.error-404__code{font-family:var(--serif);font-size:clamp(4rem,12vw,7rem);line-height:1;color:var(--accent);letter-spacing:-.04em;margin:0}
.error-404__title{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2rem);margin:.6rem 0 1rem}
.error-404__lede{color:var(--ink-2);max-width:36rem;margin:0 auto 1.4rem;line-height:1.6}
.error-404__suggest{max-width:34rem;margin:1.6rem auto 0;text-align:left}

/* ========================================================================
   25. WP HELPERS
   ======================================================================== */
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;padding:0;margin:-1px;border:0;word-wrap:normal!important}
.alignleft{float:left;margin:.5rem 1.4rem 1rem 0}
.alignright{float:right;margin:.5rem 0 1rem 1.4rem}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignwide{max-width:min(var(--measure-wide),100%);margin-left:auto;margin-right:auto}
.alignfull{max-width:100%;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.wp-block-image img{border-radius:var(--radius-2)}
.wp-block-quote{border-left:3px solid var(--accent);padding:.4rem 0 .4rem 1.2rem;margin:1.6rem 0;font-family:var(--serif);font-style:italic;color:var(--ink-2)}
.wp-block-pullquote{border:0;padding:1.5rem 1.5rem;text-align:left;font-family:var(--serif);font-size:1.3rem;line-height:1.4}
.wp-block-table{margin:1.5rem 0}
.wp-block-table table{border:1px solid var(--rule)}

/* ========================================================================
   28. THE DEPARTURES BOARD - ATL to SEO in split-flap letters, the board of guides, the SEO destinations, the Atlanta places
   ======================================================================== */
/* split-flap letters: one dark tile per letter (the mono face makes every letter 1ch wide); the last gap is clipped */
.atd-code,.atd-flap{--ls:.3em;--gap:.1em;position:relative;display:inline-block;white-space:nowrap;font-family:var(--mono);font-weight:700;line-height:1;letter-spacing:var(--ls);text-transform:uppercase;padding:.34em 0 .34em calc((var(--ls) - var(--gap)) / 2);color:var(--flap-ink);background:repeating-linear-gradient(90deg,var(--flap) 0 calc(1ch + var(--ls) - var(--gap)),transparent 0 calc(1ch + var(--ls)));clip-path:inset(0 calc((var(--ls) + var(--gap)) / 2) 0 0);border-radius:3px}
/* on a dark ground (the board, the stub, dark mode) the tiles are a step lighter so every letter keeps its own tile */
.atd-board__panel,.atd-rows,.atd-pass__stub,[data-theme="dark"]{--flap:#2a3039}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--flap:#2a3039}}
.atd-code{font-size:.95rem}
.atd-code--small{font-size:.84rem}
.atd-code--gate{font-size:1.5rem}
.atd-code--pass{font-size:clamp(1.3rem,3.6vw,1.9rem)}
.atd-flap--hero{font-size:clamp(3rem,11vw,7.2rem)}
.atd-flap--pass{font-size:clamp(2rem,6vw,3rem)}
.atd-flap--amber{color:var(--amber)}
/* the hinge of a flap, on the big letters only */
.atd-flap::after,.atd-code--gate::after,.atd-code--pass::after{content:'';position:absolute;left:0;right:0;top:50%;height:max(1px,.03em);background:repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 calc(1ch + var(--ls) - var(--gap)),transparent 0 calc(1ch + var(--ls)))}
/* no flip animation on the letters: a web font arriving mid-flip left the tiles out of line (independent review) */
/* the status dot blinks three times and stops (WCAG 2.2.2: nothing moves for more than five seconds) */
@keyframes atd-blink{50%{opacity:.25}}
.atd-plane{flex:0 0 auto;color:var(--accent);transform:rotate(90deg)}
.atd-plane--hero{width:clamp(2.4rem,7vw,4.4rem);height:auto}

/* page head of archive, search and 404 */
.dep-head{padding:clamp(2.2rem,5vw,3.4rem) 0 clamp(1.4rem,3vw,2rem);border-bottom:1px solid var(--rule)}
.dep-head__eyebrow{margin:0 0 .5rem;font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.dep-head__title{margin:0 0 .8rem;max-width:26ch;font-family:var(--serif);font-stretch:80%;font-weight:800;font-size:clamp(2rem,4.6vw,3rem);line-height:1.06;overflow-wrap:anywhere}
.dep-head__lede{margin:0 0 .5rem;max-width:60ch;color:var(--ink-2);overflow-wrap:anywhere}

/* hero */
.atd-hero{padding:clamp(2rem,5vw,3.6rem) 0 clamp(1.8rem,4vw,2.8rem);border-bottom:1px solid var(--rule)}
.atd-hero__grid{display:grid;gap:clamp(1.2rem,3vw,2.6rem);align-items:center}
@media (min-width:80rem){.atd-hero__grid{grid-template-columns:auto minmax(22rem,1fr)}}
.atd-hero__codes{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem clamp(.6rem,2vw,1.2rem);margin:0}
.atd-hero__eyebrow{margin:0 0 .6rem;font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.atd-hero__title{margin:0 0 1rem;max-width:18ch;font-family:var(--serif);font-stretch:75%;font-weight:800;font-size:clamp(2.4rem,6vw,4.4rem);line-height:.98;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.atd-hero__tally{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:0 0 1.2rem;font-family:var(--mono);font-size:.85rem;color:var(--ink-2)}
.atd-hero__tally strong{font-size:1.05rem;color:var(--ink)}
.atd-hero__jump{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
.atd-hero__go{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;max-width:100%;padding:.45rem 1.1rem .45rem .45rem;border:1px solid var(--flap);border-radius:14px;background:var(--board);color:var(--flap-ink);font-weight:700;line-height:1.3;text-decoration:none;overflow-wrap:anywhere}
.atd-hero__go:hover{background:var(--flap)}
.atd-hero__go-k{flex:0 0 auto;padding:.3rem .6rem;border-radius:999px;background:var(--amber);color:var(--board-ink);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.atd-hero__all{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border:2px solid var(--ink);border-radius:999px;color:var(--ink);font-weight:700;text-decoration:none}
.atd-hero__all:hover{background:var(--ink);color:var(--paper)}
.atd-hero__go:focus-visible,.atd-hero__all:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* the board: dark in both modes, rows read flight, destination, via, legs */
.atd-board{padding:clamp(2rem,5vw,3.4rem) 0;scroll-margin-top:4rem}
.atd-board__panel{padding:clamp(1rem,3vw,1.8rem);border:1px solid var(--flap);border-radius:18px;background:var(--board);color:var(--flap-ink);box-shadow:0 24px 48px -32px rgba(0,0,0,.6)}
.atd-board__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;padding-bottom:.9rem;border-bottom:2px solid var(--flap)}
.atd-board__title{margin:0;font-family:var(--mono);font-size:clamp(1.5rem,4vw,2.4rem);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.atd-board__from{display:flex;align-items:center;gap:.6rem;margin:0;font-family:var(--mono);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--flap-ink-2)}
.atd-board__cols{display:none}
.atd-rows{margin:0 0 1.6rem;padding:.3rem 1rem;list-style:none;border-radius:14px;background:var(--board);color:var(--flap-ink)}
.atd-board__panel .atd-rows{margin:0;padding:0;border-radius:0;background:none}
.atd-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"flight meta" "title title" "via via";gap:.3rem .8rem;align-items:center;margin:0;padding:.85rem .4rem;border-top:1px solid #262b33}
.atd-row:first-child{border-top:0}
.atd-row--now{background:linear-gradient(90deg,rgba(255,198,102,.1),transparent 70%)}
.atd-row__flight{grid-area:flight;margin:0;font-family:var(--mono);font-size:.9rem;font-weight:700;letter-spacing:.08em;color:var(--amber)}
.atd-row__title{grid-area:title;margin:0;font-family:var(--serif);font-stretch:85%;font-weight:700;font-size:clamp(1.05rem,2vw,1.22rem);line-height:1.3;overflow-wrap:anywhere}
.atd-row__title a{display:flex;align-items:center;min-height:44px;padding:.2rem 0;color:var(--flap-ink);text-decoration:none}
.atd-row__title a:hover{color:var(--amber);text-decoration:underline;text-underline-offset:4px}
.atd-row__title a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.atd-row__via{grid-area:via;display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.atd-row__meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.2rem .9rem;margin:0;font-family:var(--mono);font-size:.8rem;color:var(--flap-ink-2)}
.atd-row__status{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .8rem;border-radius:999px;background:var(--amber);color:var(--board-ink);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.atd-row__status::before{content:'';width:.45rem;height:.45rem;border-radius:50%;background:currentColor;animation:atd-blink 1.6s steps(2,start) 3}
.atd-row__status:focus-visible{outline:3px solid var(--flap-ink);outline-offset:2px}
@media (min-width:56rem){
  .atd-board__cols{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 12rem 10.5rem;gap:1rem;margin:0;padding:.75rem .4rem .35rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--flap-ink-2)}
  .atd-row{grid-template-columns:6.5rem minmax(0,1fr) 12rem 10.5rem;grid-template-areas:"flight title via meta";gap:1rem}
  .atd-row__meta{justify-content:flex-start}
}
.atd-empty{margin:0;padding:1.2rem 0;color:var(--flap-ink-2)}
.atd-board .pagination{margin-top:1.4rem}

/* SEO destinations: one gate per system, the guides that route through it */
.atd-dest{padding:clamp(2rem,5vw,3.4rem) 0;border-top:1px solid var(--rule);background:var(--paper-2)}
.atd-dest__title,.atd-ground__title{margin:0 0 .4rem;font-family:var(--serif);font-stretch:80%;font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.08}
.atd-dest__lede,.atd-ground__lede{margin:0 0 1.4rem;max-width:62ch;color:var(--ink-2)}
.atd-dest__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1rem}
.atd-gate{margin:0;padding:1.1rem 1.2rem .9rem;border:1px solid var(--rule);border-radius:14px;background:var(--card);scroll-margin-top:5rem}
.atd-gate:target{outline:3px solid var(--amber);outline-offset:3px}
.atd-gate__head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:0 0 .4rem;font-family:var(--serif);font-stretch:85%;font-weight:800;font-size:1.2rem;line-height:1.2}
.atd-gate__name{color:var(--ink)}
.atd-gate__n{margin:0 0 .6rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.atd-gate__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.atd-gate__list li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:0;border-bottom:1px solid var(--rule)}
.atd-gate__list a{display:flex;align-items:center;min-height:44px;padding:.25rem 0;color:var(--ink-2);font-size:.92rem;line-height:1.3;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;overflow-wrap:anywhere}
.atd-gate__list a:hover{color:var(--accent);text-decoration-color:currentColor}
.atd-gate__list a:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.atd-gate__x{flex:0 0 auto;font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--accent)}

/* on the ground: each Atlanta place as a street-sign blade, the guides that name it */
.atd-ground{padding:clamp(2rem,5vw,3.4rem) 0 clamp(2.6rem,6vw,4rem)}
.atd-ground__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:.4rem 1.6rem;margin:0;padding:0;list-style:none}
.atd-ground__item{display:grid;align-content:start;gap:.4rem;margin:0;padding:.8rem 0;border-top:1px solid var(--rule)}
.atd-ground__place{justify-self:start;padding:.32rem .75rem;border-radius:5px;background:var(--accent-2);color:var(--paper);font-family:var(--serif);font-stretch:80%;font-weight:800;font-size:1.05rem;letter-spacing:.02em;box-shadow:inset 0 0 0 3px var(--accent-2),inset 0 0 0 4px var(--paper)}
.atd-ground__guides{display:flex;flex-direction:column}
.atd-ground__guides a{display:flex;align-items:center;min-height:44px;color:var(--ink-2);font-size:.92rem;line-height:1.3;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;overflow-wrap:anywhere}
.atd-ground__guides a:hover{color:var(--accent);text-decoration-color:currentColor}
.atd-ground__guides a:focus-visible{outline:3px solid var(--focus);outline-offset:1px}

/* ========================================================================
   29. THE BOARDING PASS - the pass and its stub, the itinerary of legs, the route rail, the guide with its tables as boards
   ======================================================================== */
.atd-pass{padding:clamp(1.4rem,4vw,2.6rem) 0 clamp(1rem,3vw,1.6rem)}
.atd-pass__card{position:relative;display:grid;overflow:hidden;border:1px solid var(--rule);border-radius:18px;background:var(--card);box-shadow:0 18px 40px -30px rgba(0,0,0,.45)}
.atd-pass__main{min-width:0;padding:clamp(1.2rem,3.5vw,2.2rem)}
.atd-pass__top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 0 1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.atd-pass__status{display:inline-flex;align-items:center;gap:.45rem;padding:.32rem .7rem;border-radius:999px;background:var(--amber);color:var(--board-ink);font-weight:700}
.atd-pass__status::before{content:'';width:.5rem;height:.5rem;border-radius:50%;background:currentColor;animation:atd-blink 1.6s steps(2,start) 3}
.atd-pass__route{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin:0 0 1.1rem}
.atd-pass__title{margin:0 0 1.2rem;max-width:28ch;font-family:var(--serif);font-stretch:78%;font-weight:800;font-size:clamp(2rem,4.8vw,3.4rem);line-height:1.04;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.atd-pass__title a{color:inherit;text-decoration:none}
.atd-pass__title a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
.atd-pass__facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));gap:.8rem 1.2rem;margin:0;padding-top:1rem;border-top:1px dashed var(--rule)}
.atd-pass__facts div{margin:0}
.atd-pass__facts dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.atd-pass__facts dd{margin:.15rem 0 0;font-size:1.05rem;font-weight:700}
.atd-pass__stub{display:none}
@media (min-width:56rem){
  .atd-pass__card{grid-template-columns:minmax(0,1fr) 13rem}
  .atd-pass__stub{position:relative;display:flex;flex-direction:column;justify-content:center;gap:.45rem;padding:1.6rem 1.4rem;border-left:2px dashed var(--rule);background:var(--board);color:var(--flap-ink);font-family:var(--mono)}
  .atd-pass__stub::before,.atd-pass__stub::after{content:'';position:absolute;left:-.8rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--paper)}
  .atd-pass__stub::before{top:-.75rem}
  .atd-pass__stub::after{bottom:-.75rem}
}
.atd-pass__stub-code{font-size:2.6rem;font-weight:700;letter-spacing:.12em;color:var(--amber)}
.atd-pass__stub-flight,.atd-pass__stub-legs{font-size:.85rem;letter-spacing:.12em;color:var(--flap-ink-2)}
.atd-pass__bars{display:block;height:2.6rem;margin-top:.6rem;background:repeating-linear-gradient(90deg,var(--flap-ink) 0 2px,transparent 2px 4px,var(--flap-ink) 4px 5px,transparent 5px 8px,var(--flap-ink) 8px 11px,transparent 11px 12px)}
.atd-guide--home{border-top:1px solid var(--rule);scroll-margin-top:4rem}

/* itinerary: the legs of the guide */
.atd-itin__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:0 1.4rem;margin:0;padding:.3rem 0;list-style:none;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.atd-itin__list li{margin:0}
.atd-itin__link{display:flex;align-items:baseline;gap:.7rem;min-height:44px;padding:.6rem 0;color:var(--ink-2);font-size:.95rem;line-height:1.35;text-decoration:none;overflow-wrap:anywhere}
.atd-itin__n{flex:0 0 auto;padding:0 .3rem;border-radius:3px;font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--accent)}
.atd-itin__link:hover,.atd-itin__link.is-active{color:var(--ink)}
.atd-itin__link.is-active .atd-itin__n{background:var(--amber);color:var(--board-ink)}
.atd-itin__link:focus-visible{outline:3px solid var(--focus);outline-offset:1px}

/* the guide beside its route rail */
.atd-pass-body{display:grid;gap:clamp(1.4rem,3vw,2.6rem);padding-top:clamp(1.4rem,3vw,2.2rem);padding-bottom:1rem}
.atd-rail{min-width:0;font-size:.9rem}
.atd-rail__title{margin:0 0 .6rem;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.atd-rail__list,.atd-rail__ground{margin:0 0 1.4rem;padding:0;list-style:none}
.atd-rail__list{display:flex;flex-wrap:wrap;gap:.5rem .9rem}
.atd-rail__list li{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin:0}
.atd-rail__name{font-weight:600;color:var(--ink)}
.atd-rail__n{font-size:.78rem;color:var(--ink-3)}
.atd-rail__ground{display:flex;flex-wrap:wrap;gap:.4rem}
.atd-rail__ground li{display:inline-flex;align-items:center;gap:.4rem;margin:0;padding:.28rem .6rem;border-radius:5px;background:var(--accent-2);color:var(--paper);font-size:.85rem;font-weight:700}
.atd-rail__ground .atd-rail__n{font-family:var(--mono);font-size:.74rem;color:var(--paper)}
@media (min-width:64rem){
  .atd-pass-body,.atd-guide__end{grid-template-columns:15rem minmax(0,var(--measure));justify-content:center;column-gap:clamp(1.4rem,3vw,2.6rem)}
  .atd-guide__end{display:grid}
  .atd-guide__end > *{grid-column:2}
  .atd-rail{grid-column:1;position:sticky;top:5.5rem;align-self:start}
  .atd-pass-body > .prose{grid-column:2}
  .atd-rail__list{display:block}
  .atd-rail__list li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--rule)}
  .atd-rail__list .atd-rail__n{grid-column:2}
}
.atd-pass-body .prose{min-width:0;max-width:var(--measure);counter-reset:atd-leg}
.atd-pass-body .prose h2{counter-increment:atd-leg;padding-top:1.1rem;border-top:1px solid var(--rule);font-family:var(--serif);font-stretch:85%;font-weight:800;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.15}
.atd-pass-body .prose h2::before{content:'Leg ' counter(atd-leg,decimal-leading-zero);content:'Leg ' counter(atd-leg,decimal-leading-zero) / '';display:block;margin:0 0 .45rem;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.atd-pass-body .prose h3{font-family:var(--serif);font-stretch:90%;font-weight:700}
.prose .atd-lede{margin:0 0 1.9rem;padding:.15rem 0 .15rem 1.1rem;border-left:4px solid var(--amber);font-size:1.18rem;line-height:1.65;color:var(--ink)}
.prose a.atd-src::after{content:'\2197';content:'\2197' / '';display:inline-block;margin-left:.12em;font-size:.72em;line-height:1;vertical-align:.3em;color:var(--accent);text-decoration:none}

/* every table is a board: a labelled region that scrolls on its own on a phone */
.prose .atd-table{margin:1.6rem 0 2rem;overflow-x:auto;border:1px solid var(--rule);border-radius:12px;background:var(--card)}
.prose .atd-table:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* on a narrow screen a board wider than the screen says it scrolls (the note stays at the left edge while it does) */
@media (max-width:37rem){.prose .atd-table:has(tr > :nth-child(3))::before{content:'Scroll sideways \2192';content:'Scroll sideways \2192' / '';position:sticky;left:0;display:block;padding:.45rem .9rem;border-bottom:1px solid var(--rule);background:var(--paper-2);color:var(--ink-3);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}}
.prose .atd-table table{width:100%;margin:0;border:0;border-collapse:collapse;font-size:.92rem;line-height:1.5}
/* a table of three or more columns keeps readable columns and scrolls on a phone; a two-column table fits the screen */
.prose .atd-table table:has(tr > :nth-child(3)){min-width:34rem}
.prose .atd-table thead th{padding:.8rem .9rem;border:0;background:var(--board);color:var(--flap-ink);font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-align:left;text-transform:uppercase;vertical-align:bottom}
.prose .atd-table thead th:first-child{color:var(--amber)}
.prose .atd-table td{padding:.7rem .9rem;border:0;border-top:1px solid var(--rule);vertical-align:top}
.prose .atd-table tbody tr:nth-child(even) td{background:var(--paper-2)}
.prose .atd-table tbody td:first-child{font-weight:700;color:var(--ink)}

/* the end: the note, connecting flights, the way back */
.atd-guide__end{padding-top:1rem}
.atd-connect{margin:2.4rem 0 0}
.atd-connect__title{margin:0 0 .8rem;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.atd-connect__list{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.atd-connect__list li{margin:0;padding:.35rem 0 .75rem;border-bottom:1px solid var(--rule)}
.atd-connect__link{display:flex;align-items:baseline;gap:.8rem;min-height:44px;padding:.35rem 0;color:var(--ink);font-family:var(--serif);font-stretch:88%;font-size:1.08rem;font-weight:700;line-height:1.3;text-decoration:none;overflow-wrap:anywhere}
.atd-connect__flight{flex:0 0 auto;font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--accent)}
.atd-connect__link:hover .atd-connect__name{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.atd-connect__link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.atd-connect__via{display:flex;flex-wrap:wrap;gap:.35rem;margin:0}
.atd-back{margin:2rem 0 3rem}
.atd-back a{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border:2px solid var(--ink);border-radius:999px;color:var(--ink);font-weight:700;text-decoration:none}
.atd-back a:hover{background:var(--ink);color:var(--paper)}
.atd-back a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.atd-pages{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.6rem 0 0;font-family:var(--mono)}
.atd-pages a,.atd-pages > span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .7rem;border:1px solid var(--rule);border-radius:8px;color:var(--ink);text-decoration:none}
.atd-pages a:hover{border-color:var(--accent);color:var(--accent)}

@media (forced-colors:active){
  .atd-code,.atd-flap{clip-path:none;border:1px solid CanvasText}
  .atd-board__panel,.atd-rows,.atd-pass__card{border:1px solid CanvasText}
}
@media print{
  .atd-hero__codes,.atd-hero__jump,.atd-itin,.atd-pass__stub,.atd-row__status{display:none}
  .atd-board__panel,.atd-rows{background:none;color:#000;box-shadow:none;border:1px solid #999}
  .atd-row__title a,.atd-row__flight,.atd-board__title{color:#000}
  .atd-code,.atd-flap{background:none;color:#000;clip-path:none;border:1px solid #999}
  .prose .atd-table thead th,.prose .atd-table thead th:first-child{background:#eee;color:#000}
  .atd-rail__ground li,.atd-rail__ground .atd-rail__n,.atd-ground__place{background:none;color:#000;box-shadow:none;border:1px solid #999}
  .atd-rail{position:static}
}

/* ========================================================================
   26. PRINT
   ======================================================================== */
@media print{
  .topbar,.site-footer,.meta-rail,.toc-drawer,.reading-progress,.post-nav,.comments-area,.skip-link{display:none!important}
  html:root:root{--paper:#fff;--paper-2:#fff;--card:#fff;--ink:#000;--ink-2:#222;--ink-3:#444;--rule:#999;--accent:#000;--accent-2:#000;--link:#000}
  body{background:#fff;color:#000}
  .article-shell{display:block;padding:0}
  .article-main{max-width:none}
  a{color:inherit;text-decoration:underline}
  .prose h2,.prose h3{break-after:avoid}
  .prose img{max-width:100%;break-inside:avoid}
}

/* ========================================================================
   27. GLOBAL REDUCED MOTION OVERRIDE (WD-16 safety net)
   ======================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}