@charset "utf-8";
/* ==========================================================================
   Travel Obsessed TX — Private Client Guide (LOCAL PROTOTYPE)
   Design tokens lifted from the current live theme:
   travelobsessedtx-theme-FINAL_12_5-2 (site-nav, site-footer,
   guide-restyle, custom-galveston-guide)
   ========================================================================== */

:root {
  /* Ghost custom fonts (Settings -> Design -> Brand). The approved Library
     typefaces stay the fallback, so nothing changes unless A'Dell sets them. */
  --pb-font-display: var(--gh-font-heading, 'Bricolage Grotesque', sans-serif);
  --pb-font-body: var(--gh-font-body, 'Inter', sans-serif);
  --teal:     #15bea5;
  --deep:     #0d7263;
  --tealline: #cdeee6;
  --tint:     #eef8f5;
  --ink:      #1c1a17;
  --body:     #4c473e;
  --muted:    #6a6456;
  --hair:     #e6e6e6;
  /* Soft backgrounds reuse the prototype's existing light teal. No warm
     neutral background value appears anywhere in this file — by instruction. */
  --soft:     #eef8f5;   /* = --tint, the approved light teal */
  --softline: #cdeee6;   /* = --tealline */
  --rule:     #e6e6e6;   /* neutral hairline, not warm */
  --pink:     #FF66C4;   /* locked brand pink */
  --alert:    #cf4b4b;
  --footbg:   #f3fbf9;
  --wrap:     1040px;
  --col:      760px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}
img { max-width: 100%; }
a { color: var(--deep); }

/* ==========================================================================
   PUBLIC SITE HEADER  (mirrors partials/site-nav.hbs)
   ========================================================================== */
.tn-wrap { font-family: var(--pb-font-body); background: #fff; }
.tn-mast {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 30px; border-bottom: 1px solid #ececec;
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
}
.tn-nav {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; padding: 16px 30px;
}
.tn-logo { text-decoration: none; line-height: 1; display: flex; align-items: center; gap: 11px; }
.tn-logo img { height: 40px; width: auto; display: block; }
.tn-logo-txt {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 21px;
  color: var(--ink); line-height: 1; white-space: nowrap; letter-spacing: -.01em;
}
.tn-logo-txt span { color: var(--teal); }
.tn-links { display: flex; gap: 26px; align-items: center; }
.tn-link { font-size: 13px; color: #4a463d; text-decoration: none; white-space: nowrap; }
.tn-link:hover { color: var(--deep); }
.tn-book {
  font-size: 13px; color: var(--deep); font-weight: 600; border: 1.5px solid var(--teal);
  padding: 7px 14px; border-radius: 2px; text-decoration: none; white-space: nowrap;
}
.tn-book:hover { background: var(--tint); }

/* Mobile burger + sheet (mirrors the live site's treatment) */
.tn-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px 4px; cursor: pointer; }
.tn-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.tn-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tn-burger.open span:nth-child(2) { opacity: 0; }
.tn-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.tn-mobile { display: none; position: fixed; inset: 0; background: #fff; z-index: 99; padding: 70px 0 32px; overflow-y: auto; }
.tn-mobile.open { display: block; }
.tn-mobile a { display: block; padding: 13px 26px; font-size: 16px; font-weight: 500; color: #4a463d; text-decoration: none; }
.tn-mobile a:hover { background: #eef8f5; color: var(--ink); }
.tn-mobile .tn-m-sec { padding: 8px 26px 2px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #bbb; }
.tn-mobile .tn-m-div { height: 1px; background: var(--hair); margin: 8px 0; }
.tn-mobile .tn-m-book { margin: 12px 26px 0; padding: 14px; background: var(--teal); color: #fff; font-weight: 600; text-align: center; }
.tn-mobile-close { position: absolute; top: 16px; right: 20px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ink); cursor: pointer; }

/* ==========================================================================
   CLIENT GUIDE BAR + SECONDARY NAV
   ========================================================================== */
.cg-bar { background: var(--ink); color: #fff; }
.cg-bar-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 9px 30px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.cg-bar-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .2em; color: #fff;
}
.cg-bar-label span { color: var(--teal); }
.cg-bar-note { font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .02em; }

.cg-nav { background: #fff; border-bottom: 1px solid var(--tealline); position: sticky; top: 0; z-index: 40; }
.cg-nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 30px;
  display: flex; align-items: stretch; gap: 30px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cg-nav-inner::-webkit-scrollbar { display: none; }
.cg-nav a {
  display: flex; align-items: center; white-space: nowrap; text-decoration: none;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 15px 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.cg-nav a:hover { color: var(--ink); }
.cg-nav a.is-active { color: var(--ink); border-bottom-color: var(--teal); }

/* ==========================================================================
   MOBILE: "BROWSE THE GUIDE" BAR
   Desktop keeps the horizontal category nav above; this replaces it below
   760px, where the tab strip clipped and hid how much guide there is.
   ========================================================================== */
.cg-browse { display: none; }
.cg-browse-btn {
  width: 100%; display: flex; align-items: center; gap: 11px; background: #fff;
  border: 0; padding: 13px 18px; font-family: var(--pb-font-body); text-align: left; cursor: pointer;
}
.cg-browse-btn .lbl {
  font-size: 11.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink);
}
.cg-browse-btn .cnt {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--deep);
}
.cg-browse-btn .cnt::before {
  content: ''; display: inline-block; width: 4px; height: 4px; background: var(--teal);
  margin-right: 9px; vertical-align: 2px;
}
.cg-browse-btn .chev { margin-left: auto; color: var(--teal); font-size: 12px; transition: transform .18s; }
.cg-browse-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ==========================================================================
   MOBILE: GUIDE INDEX OVERLAY
   An index, not a curriculum. No numbering, no progress, no completion.
   ========================================================================== */
.cg-index {
  position: fixed; inset: 0; z-index: 120; background: #fff; overflow-y: auto;
  -webkit-overflow-scrolling: touch; opacity: 0; transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}
.cg-index.open { opacity: 1; transform: none; }
.cg-index[hidden] { display: none; }
@media (min-width: 761px) { .cg-index { display: none !important; } }

.cg-index-head { padding: 26px 20px 22px; border-bottom: 1px solid var(--rule); position: relative; }
.cg-index-head .kick { margin-bottom: 8px; padding-right: 44px; }
.cg-index-head h2 {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 27px;
  line-height: 1.08; letter-spacing: -.02em; margin: 0; padding-right: 44px;
}
.cg-index-title { color: var(--ink); text-decoration: none; }
.cg-index-head .rule { margin: 14px 0 14px; }
.cg-index-sub { font-size: 15px; line-height: 1.55; color: var(--body); margin: 0; }
.cg-index-close {
  position: absolute; top: 14px; right: 12px; width: 42px; height: 42px; background: none;
  border: 1px solid var(--softline); font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer;
}
.cg-index-close:hover { background: var(--soft); border-color: var(--teal); }

.cg-index-body { padding: 4px 20px 70px; }
.cg-index-or {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.cg-index-or::after { content: ''; flex: 1; height: 1px; background: var(--hair); }

.cg-idx-sec { margin-top: 24px; }
.cg-idx-lbl {
  display: flex; align-items: center; gap: 14px; margin: 0 0 2px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--deep);
}
.cg-idx-lbl .line { flex: 1; height: 1px; background: var(--tealline); }
.cg-idx-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--hair); text-decoration: none;
  color: var(--ink); font-size: 16.5px; font-weight: 500; line-height: 1.3;
}
.cg-idx-item:active { background: var(--soft); }
.cg-idx-item .ar { color: #b7c6c2; font-size: 15px; flex: 0 0 auto; }
.cg-idx-item.is-here { color: var(--deep); font-weight: 700; }
.cg-idx-item.is-here .ar { color: var(--teal); }
.cg-idx-item.is-here .t::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); margin-right: 9px; vertical-align: 1px;
}

/* ==========================================================================
   SEARCH
   ========================================================================== */
.gsearch { border: 1px solid var(--softline); background: var(--soft); padding: 22px 24px; margin: 30px 0 8px; }
.gsearch.drawer { border: 0; background: none; padding: 0; margin: 20px 0 0; }
.gsearch-q {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 20px;
  line-height: 1.2; color: var(--ink); margin: 0 0 12px;
}
.gsearch-lbl {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--deep); margin: 0 0 8px;
}
.gsearch-field { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid #cdd7d3; }
.gsearch-field:focus-within { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.gsearch-icon { padding: 0 2px 0 14px; color: var(--deep); font-size: 15px; transform: rotate(-45deg); }
.gsearch-field input {
  flex: 1; border: 0; outline: 0; background: none; padding: 14px 12px;
  font-family: var(--pb-font-body); font-size: 16px; color: var(--ink); min-width: 0;
}
.gsearch-field input::placeholder { color: #8a9490; }
.gsearch-field input::-webkit-search-cancel-button { display: none; }
.gsearch-clear { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); padding: 0 14px; cursor: pointer; }
.gsearch-clear:hover { color: var(--ink); }
.gsearch-hint { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 10px 0 0; }

.gsearch-results:empty { display: none; }
.gsearch-results.has-results { margin-top: 16px; border-top: 1px solid var(--softline); }
.gsearch.drawer .gsearch-results.has-results { border-top: 1px solid var(--hair); }
.sresult {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kick ar" "title ar" "desc ar";
  gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); text-decoration: none;
}
.sresult:hover { background: #fff; }
.gsearch.drawer .sresult:hover { background: var(--soft); }
.sr-kick {
  grid-area: kick; font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--deep);
}
.sr-title {
  grid-area: title; font-family: var(--pb-font-display); font-weight: 800;
  font-size: 16.5px; line-height: 1.25; color: var(--ink);
}
.sr-desc { grid-area: desc; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.sr-ar { grid-area: ar; align-self: center; color: var(--teal); font-weight: 800; font-size: 15px; }

.sempty { padding: 18px 0 8px; }
.sempty-lead {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 17px;
  color: var(--ink); margin: 0 0 6px;
}
.sempty p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ==========================================================================
   SOURCE LINK BLOCKS
   Named by their source — "DCL's page on this", "DCL form", "Port of
   Galveston" — never a generic "official resource" eyebrow. Easy to spot,
   deliberately subordinate to the guide copy.
   ========================================================================== */
.srcbox {
  border: 1px solid var(--rule); border-left: 3px solid var(--deep);
  background: #fff; padding: 12px 16px 8px; margin: 20px 0 24px;
}
.srcbox-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--deep); margin: 0 0 6px;
}
.srclink {
  display: flex; align-items: baseline; gap: 10px; text-decoration: none;
  padding: 6px 0; border-top: 1px solid var(--rule);
}
.srclink:first-of-type { border-top: 0; }
.srclink-t { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.srclink:hover .srclink-t { color: var(--deep); text-decoration: underline; }
.srclink-ar { margin-left: auto; color: var(--teal); font-size: 13px; flex: 0 0 auto; }
.srcbox-form { border-left-color: var(--ink); background: var(--soft); }
.srcbox-form .srcbox-label { color: var(--ink); }
.srcbox-terms { border-left-color: var(--ink); }
.srcbox-terms .srcbox-label { color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ==========================================================================
   PHOTO SLOT
   A deliberately empty, clearly-marked place for A'Dell to add a real photo.
   No stock, no AI imagery, nothing invented.
   ========================================================================== */
.photoslot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; margin: 24px 0; padding: 34px 20px; text-align: center;
  background: var(--soft); border: 1px dashed var(--softline);
}
.photoslot-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--deep);
}
.photoslot-title {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 15px;
  color: var(--ink);
}
.photoslot-note { font-size: 12.5px; color: var(--muted); font-style: italic; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap { max-width: var(--wrap); margin: 0 auto; }
.sec { max-width: var(--col); margin: 0 auto; padding: 0 26px; }
.sec-wide { max-width: 900px; margin: 0 auto; padding: 0 26px; }

/* ==========================================================================
   PHOTOGRAPHY  (mirrors .fig on the live Galveston guide)
   Images are hotlinked from the live site's own media library and hidden
   automatically if they fail to load, so the prototype still reads offline.
   ========================================================================== */
.fig { position: relative; margin: 26px auto 6px; overflow: hidden; max-width: 988px; width: calc(100% - 52px); }
.fig img { width: 100%; display: block; object-fit: cover; }
.cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px 11px; color: #fff;
  font-size: 12.5px; font-style: italic; background: linear-gradient(transparent, rgba(0,0,0,.6));
}

/* ==========================================================================
   TYPE
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--pb-font-display); color: var(--ink); }
h1 { font-weight: 800; font-size: 37px; line-height: 1.06; letter-spacing: -.02em; margin: 0 0 10px; }
.article h2 {
  font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -.01em;
  margin: 46px 0 6px; padding-top: 34px; border-top: 1px solid var(--rule);
}
.article h2.no-border { border-top: 0; padding-top: 0; margin-top: 34px; }
.article h3 { font-weight: 700; font-size: 17px; margin: 26px 0 6px; }
.article p { font-size: 16px; line-height: 1.75; color: var(--body); margin: 0 0 15px; }
.article ul, .article ol { margin: 0 0 18px; padding-left: 22px; }
.article li { font-size: 16px; line-height: 1.65; color: var(--body); margin: 0 0 7px; }
.article strong { color: var(--ink); font-weight: 600; }
.article a { color: var(--deep); font-weight: 600; }

.kick {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
  color: var(--deep); margin: 0 0 12px;
}
.rule { height: 4px; width: 72px; background: var(--teal); margin: 16px 0 20px; }
.dek {
  font-family: var(--pb-font-display); font-weight: 700;
  font-size: 19px; line-height: 1.45; color: #2c2a24; margin: 0 0 18px; max-width: 620px;
}
.page-head { padding: 40px 0 4px; }
.article { padding-bottom: 8px; }

/* pull quote / emphasis line, mirrors the live "wpg-open" treatment */
.pull {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 18px;
  line-height: 1.45; color: var(--ink); border-left: 4px solid var(--teal);
  padding: 4px 0 4px 18px; margin: 22px 0 24px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-block; background: var(--teal); color: #fff; font-weight: 600;
  font-size: 15px; padding: 14px 26px; text-decoration: none; border: 0; border-radius: 0;
  font-family: var(--pb-font-body); cursor: pointer;
}
.btn:hover { background: var(--deep); color: #fff; }
.btn-ghost {
  display: inline-block; background: #fff; color: var(--deep); font-weight: 600; font-size: 15px;
  padding: 13px 24px; text-decoration: none; border: 1.5px solid var(--teal); cursor: pointer;
  font-family: var(--pb-font-body);
}
.btn-ghost:hover { background: var(--tint); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 6px; }
.proto-note {
  font-size: 12.5px; color: var(--muted); font-style: italic; margin: 10px 0 0;
  display: none; width: 100%;
}
.proto-note.show { display: block; }

/* ==========================================================================
   CALLOUT: HOT TAKE  (A'Dell's opinion)
   ========================================================================== */
.hottake {
  background: var(--soft); border: 1px solid var(--softline); border-left: 5px solid var(--pink);
  padding: 24px 26px; margin: 34px 0;
}
.hottake-label {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .18em; color: var(--ink); margin: 0 0 12px;
}
.hottake-label::before {
  content: ''; display: inline-block; width: 9px; height: 9px; background: var(--pink);
  margin-right: 10px; vertical-align: 1px;
}
.hottake p { font-size: 16px; line-height: 1.7; color: var(--body); margin: 0 0 12px; }
.hottake p:last-child { margin-bottom: 0; }

/* Draft state — A'Dell has not supplied the take yet */
.hottake.is-draft { background: #fff; border: 1px dashed #bcd9d2; border-left: 5px dashed var(--pink); }
.hottake.is-draft .hottake-label::after {
  content: 'AWAITING COPY'; margin-left: 12px; font-size: 9.5px; letter-spacing: .12em;
  background: var(--pink); color: var(--ink); padding: 3px 8px; vertical-align: 2px;
}
.hottake-brief {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.6; color: var(--muted);
  background: #f2fbf9; border: 1px solid #cdeee6; padding: 12px 14px; margin: 0;
}
.hottake-brief .brief-label {
  display: block; font-family: var(--pb-font-body); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #8a9490; margin-bottom: 5px;
}

/* ==========================================================================
   CALLOUT: WHAT DISNEY SAYS  (supplier rule)
   ========================================================================== */
.disney {
  background: var(--tint); border: 1px solid var(--tealline); border-left: 5px solid var(--teal);
  padding: 22px 26px; margin: 32px 0;
}
.disney-label {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .18em; color: var(--deep); margin: 0 0 8px;
}
.disney p { font-size: 15.5px; line-height: 1.65; color: var(--body); margin: 0 0 10px; }
.disney p:last-child { margin-bottom: 0; }
.disney p.disney-lede {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 17px;
  color: var(--ink); line-height: 1.4;
}
.disney ul { margin: 0 0 4px; padding-left: 20px; }
.disney li { font-size: 15px; color: var(--body); margin-bottom: 5px; }

/* ==========================================================================
   CALLOUT: DO THIS NOW  (milestone action box)
   ========================================================================== */
.donow { border: 2px solid var(--ink); padding: 22px 26px 20px; margin: 32px 0; background: #fff; }
.donow-label {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .18em; color: var(--ink); margin: 0 0 14px;
}
.donow-label::before {
  content: ''; display: inline-block; width: 9px; height: 9px; background: var(--teal);
  margin-right: 9px; vertical-align: 1px;
}
.donow ol { margin: 0; padding: 0; list-style: none; counter-reset: donow; }
.donow li {
  counter-increment: donow; position: relative; padding: 9px 0 9px 34px;
  border-top: 1px solid var(--hair); font-size: 15.5px; line-height: 1.55; color: var(--body);
}
.donow li:first-child { border-top: 0; padding-top: 0; }
.donow li:first-child::before { top: 0; }
.donow li::before {
  content: counter(donow); position: absolute; left: 0; top: 9px;
  font-family: var(--pb-font-display); font-weight: 800; font-size: 13px;
  color: var(--deep); width: 20px; height: 20px; line-height: 20px; text-align: center;
  background: var(--tint);
}

/* ==========================================================================
   CALLOUT: DON'T PANIC
   ========================================================================== */
.panic { border: 1px solid var(--hair); border-left: 5px solid var(--alert); padding: 20px 24px; margin: 30px 0; background: #fff; }
.panic-label {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .18em; color: var(--alert); margin: 0 0 8px;
}
.panic p { font-size: 15.5px; line-height: 1.65; color: var(--body); margin: 0 0 10px; }
.panic p:last-child { margin-bottom: 0; }
.panic ul { margin: 0; padding-left: 20px; }
.panic li { font-size: 15px; color: var(--body); margin-bottom: 5px; }

/* ==========================================================================
   FACT TABLE (mirrors .qf on the live Galveston guide)
   ========================================================================== */
.facts { border: 1px solid var(--hair); margin: 24px 0 28px; }
.facts .r {
  display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 12px 20px;
  border-top: 1px solid var(--hair); font-size: 15px;
}
.facts .r:first-child { border-top: 0; }
.facts .k {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--deep);
}
.facts .v { color: var(--body); line-height: 1.5; }

/* ==========================================================================
   GUIDE HOME — TABLE OF CONTENTS
   ========================================================================== */
.home-head { padding: 46px 0 6px; }
.home-head h1 { font-size: 42px; }
.home-intro { font-size: 17.5px; line-height: 1.7; color: var(--body); max-width: 640px; margin: 0 0 14px; }
.home-intro.first {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 20px;
  line-height: 1.45; color: var(--ink);
}
.home-scope {
  font-size: 14px; line-height: 1.5; color: var(--muted); margin: 18px 0 0;
  padding-left: 14px; border-left: 3px solid var(--teal); max-width: 520px;
}

.toc-sec { margin: 42px 0 0; }
.toc-sec-head { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.toc-sec-head h2 {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .2em;
  color: var(--deep); margin: 0; white-space: nowrap;
}
.toc-sec-head .line { flex: 1; height: 1px; background: var(--tealline); }
.toc-sec-all {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--deep); text-decoration: none; white-space: nowrap;
}
.toc-sec-all:hover { text-decoration: underline; }
.cg-idx-lbl-link { color: var(--deep); text-decoration: none; }
.cg-idx-lbl-link:hover { text-decoration: underline; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cards.one { grid-template-columns: 1fr; }
.card {
  display: block; text-decoration: none; border: 1px solid var(--softline); background: #fff;
  padding: 18px 20px; transition: border-color .15s, background .15s, transform .15s;
}
.card:hover { border-color: var(--teal); background: var(--soft); transform: translateY(-1px); }
.card-title {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 17px;
  color: var(--ink); line-height: 1.25; margin: 0 0 6px; display: flex;
  justify-content: space-between; gap: 12px; align-items: baseline;
}
.card-title .ar { color: var(--teal); font-weight: 800; font-size: 15px; flex: 0 0 auto; }
.card-desc { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ==========================================================================
   RELATED GUIDES + BACK LINK
   ========================================================================== */
.related { max-width: var(--col); margin: 44px auto 0; padding: 0 26px; }
.related .rl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  font-weight: 700; margin-bottom: 12px;
}
.relgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.relcard {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--tealline); background: var(--tint); padding: 15px 16px;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.3;
  transition: background .15s, border-color .15s, transform .15s;
}
.relcard:hover { background: #fff; border-color: var(--teal); transform: translateY(-1px); }
.relcard .ar { color: var(--teal); font-weight: 800; flex: 0 0 auto; font-size: 16px; }

.backwrap { max-width: var(--col); margin: 0 auto; padding: 30px 26px 0; }
.backlink {
  display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--deep);
  text-decoration: none; letter-spacing: .01em;
}
.backlink:hover { text-decoration: underline; }
.backwrap.bottom { padding-top: 34px; }

/* ==========================================================================
   DISCLAIMERS
   ========================================================================== */
.disclaimer {
  max-width: var(--col); margin: 40px auto 0; padding: 18px 26px;
  border-top: 1px solid var(--hair);
}
.disclaimer p { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0 0 8px; }
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer b { color: #55503f; }


/* ==========================================================================
   PUBLIC SITE FOOTER  (mirrors partials/site-footer.hbs)
   ========================================================================== */
.tof { font-family: var(--pb-font-body); background: var(--footbg); color: var(--ink); margin-top: 70px; }
.tof a { text-decoration: none; }
.tof-cols {
  max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 30px; padding: 46px 30px 22px;
}
.tof-col { border-left: 1px solid var(--tealline); padding-left: 24px; }
.tof-col:first-child { border-left: 0; padding-left: 0; }
.tof-col h4 {
  font-family: var(--pb-font-body); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 16px;
}
.tof-col a { display: block; font-size: 14.5px; color: #3f3b33; margin: 0 0 14px; font-weight: 500; }
.tof-col a:hover { color: var(--deep); }
.tof-legal {
  border-top: 1px solid var(--tealline); text-align: center; font-size: 12px; color: var(--muted);
  padding: 16px 26px 34px;
}
.tof-legal a { color: var(--muted); margin: 0 8px; }
.tof-legal a:hover { color: var(--deep); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .tof-cols { grid-template-columns: 1fr; gap: 0; }
  .tof-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--tealline); padding-top: 16px; margin-top: 16px; }
  .tof-col:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .tn-links { display: none; }
  .tn-burger { display: flex; }
  .fig { margin: 18px auto 4px; width: calc(100% - 36px); }
  .fig img { height: 190px; }
  .tn-mast { padding: 9px 18px; font-size: 10px; letter-spacing: .1em; }
  .tn-nav { padding: 12px 18px; }
  .tn-logo img { height: 32px; }
  .tn-logo-txt { font-size: 17px; }

  .cg-bar-inner { padding: 8px 18px; }
  .cg-bar-note { display: none; }

  /* the horizontal category strip is desktop-only; mobile gets the index */
  .cg-nav { display: none; }
  .cg-browse {
    display: block; position: sticky; top: 0; z-index: 45;
    background: #fff; border-bottom: 1px solid var(--tealline);
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
  }

  .official { flex-wrap: wrap; gap: 4px 12px; }
  .official-ar { margin-left: 0; }
  .official-title { flex: 1 1 100%; font-size: 15px; }
  .gsearch { padding: 20px 18px; margin-left: -2px; margin-right: -2px; }
  .gsearch-field input { font-size: 16px; }

  .sec, .sec-wide, .related, .backwrap, .disclaimer { padding-left: 18px; padding-right: 18px; }
  h1 { font-size: 28px; }
  .home-head h1 { font-size: 30px; }
  .article h2 { font-size: 21px; margin-top: 36px; padding-top: 26px; }
  .article h3 { font-size: 16.5px; }
  .article p, .article li { font-size: 17px; line-height: 1.72; }
  .dek { font-size: 17.5px; }
  .home-intro { font-size: 17px; }
  .home-intro.first { font-size: 18.5px; }
  .pull { font-size: 17px; padding-left: 15px; }

  .cards { grid-template-columns: 1fr; }
  .relgrid { grid-template-columns: 1fr; }
  .facts .r { grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; }

  .hottake, .disney, .donow, .panic { padding-left: 18px; padding-right: 18px; margin-left: -2px; margin-right: -2px; }
  .hottake p, .disney p, .panic p, .donow li { font-size: 16.5px; }
  .cta-row .btn, .cta-row .btn-ghost { width: 100%; text-align: center; }
  .page-head { padding-top: 30px; }
  .home-head { padding-top: 32px; }
}

/* ==========================================================================
   ==========================================================================
   v4 REFINEMENT LAYER — mobile first
   A private client service system, not an article template. Rhythm comes
   from bands, eyebrows, photography and compact blocks — not from putting
   every paragraph in a rounded rectangle.
   ==========================================================================
   ========================================================================== */

/* ---- breadcrumb: "where am I", for deep-linked arrivals ------------------ */
.crumb {
  max-width: var(--wrap); margin: 0 auto; padding: 12px 18px 0;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
}
.crumb a { color: var(--deep); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb span[aria-hidden] { color: var(--teal); }

/* ---- page head ---------------------------------------------------------- */
.phead { padding: 14px 0 4px; }
.phead-inner { max-width: var(--col); margin: 0 auto; padding: 0 18px; }
.phead h1 {
  font-family: var(--pb-font-display); font-weight: 800;
  font-size: 30px; line-height: 1.04; letter-spacing: -.025em; margin: 0 0 2px;
}
.phead .rule { margin: 14px 0 16px; }
.phead .dek {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 18px;
  line-height: 1.4; color: #2c2a24; margin: 0 0 18px; max-width: 34em;
}
.phead.is-band { background: var(--ink); color: #fff; padding: 26px 0 24px; margin-bottom: 22px; }
.phead.is-band .kick { color: var(--teal); }
.phead.is-band h1 { color: #fff; }
.phead.is-band .dek { color: rgba(255,255,255,.82); }

/* ---- AT A GLANCE / THE SHORT VERSION ------------------------------------ */
.glance { background: var(--soft); border-left: 4px solid var(--teal); padding: 16px 18px; margin: 0 0 18px; }
.glance-label {
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--deep); margin: 0 0 10px;
}
.glance-list { list-style: none; margin: 0; padding: 0; }
.glance-list li {
  position: relative; padding: 0 0 8px 20px; font-size: 16px; line-height: 1.5; color: var(--ink);
}
.glance-list li:last-child { padding-bottom: 0; }
.glance-list li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: var(--teal);
}
.glance-list b, .glance-list strong { font-weight: 700; }

/* ---- JUMP TO chips ------------------------------------------------------ */
.jumpto { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; }
.jumpto-label {
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-right: 2px;
}
.jump-chip {
  display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--deep);
  text-decoration: none; border: 1px solid var(--softline); background: #fff;
  padding: 9px 13px; line-height: 1.1; min-height: 38px;
}
.jump-chip:hover, .jump-chip:focus { background: var(--soft); border-color: var(--teal); }

/* ---- TEXT A'DELL ------------------------------------------------------- */
.texta {
  background: var(--ink); color: #fff; padding: 20px 20px 18px; margin: 30px 0;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.texta-line {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 18px;
  line-height: 1.35; color: #fff; margin: 0; max-width: 22em;
}
.texta-btn {
  display: inline-block; background: var(--pink); color: var(--ink); font-weight: 700;
  font-size: 15px; letter-spacing: .01em; padding: 13px 22px; text-decoration: none;
  min-height: 46px; line-height: 20px;
}
.texta-btn:hover { background: #fff; color: var(--ink); }
.texta-note { font-size: 11.5px; color: rgba(255,255,255,.5); margin: 0; line-height: 1.4; }
.texta.is-rail { background: var(--soft); color: var(--ink); border-left: 4px solid var(--pink); padding: 16px; margin: 0; }
.texta.is-rail .texta-line { color: var(--ink); font-size: 16px; }
.texta.is-rail .texta-note { color: var(--muted); }

/* ---- banded sections --------------------------------------------------- */
.gsec { padding: 30px 0 6px; scroll-margin-top: 66px; }
.gsec.is-soft { background: var(--soft); padding: 34px 0 30px; margin: 30px 0; }
.gsec-inner { max-width: var(--col); margin: 0 auto; padding: 0 18px; }
.gsec-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--deep); margin: 0 0 6px;
}
.gsec-title {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 23px;
  line-height: 1.12; letter-spacing: -.015em; color: var(--ink); margin: 0 0 14px;
}
.gsec p { font-size: 16.5px; line-height: 1.65; color: var(--body); margin: 0 0 13px; }
.gsec ul, .gsec ol { margin: 0 0 15px; padding-left: 20px; }
.gsec li { font-size: 16.5px; line-height: 1.55; color: var(--body); margin: 0 0 6px; }
.gsec h3 {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 17px;
  margin: 22px 0 6px; color: var(--ink);
}
.gsec strong { color: var(--ink); font-weight: 600; }
.gsec a { color: var(--deep); font-weight: 600; }

/* ---- run-in rows ------------------------------------------------------- */
.runins { margin: 4px 0 16px; }
.runin {
  font-size: 16px; line-height: 1.6; color: var(--body);
  padding: 11px 0; border-top: 1px solid var(--rule); margin: 0;
}
.runin:first-child { border-top: 0; padding-top: 2px; }
.runin b {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--deep);
  display: block; margin-bottom: 3px;
}

/* ---- big-numeral steps ------------------------------------------------- */
.steps { list-style: none; counter-reset: st; margin: 6px 0 18px; padding: 0; }
.steps li {
  counter-increment: st; position: relative; padding: 0 0 16px 46px;
  font-size: 16.5px; line-height: 1.55; color: var(--body);
}
.steps li::before {
  content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: -4px;
  font-family: var(--pb-font-display); font-weight: 800; font-size: 22px;
  color: var(--teal); letter-spacing: -.02em;
}

/* ---- vertical timeline ------------------------------------------------- */
.timeline { list-style: none; margin: 8px 0 20px; padding: 0 0 0 22px; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 3px; top: 6px; bottom: 10px; width: 2px; background: var(--softline);
}
.tl-item { position: relative; padding: 0 0 22px; }
.tl-item::before {
  content: ''; position: absolute; left: -22px; top: 5px; width: 8px; height: 8px;
  background: var(--teal); border-radius: 50%;
}
.tl-marker {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 3px;
}
.tl-head {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 17.5px;
  line-height: 1.25; color: var(--deep); margin: 0 0 4px;
}
.tl-body { font-size: 15.5px; line-height: 1.55; color: var(--body); margin: 0; }

/* ---- question box ----------------------------------------------------- */
.qbox { background: #fff; border: 1px solid var(--softline); padding: 18px 20px; margin: 22px 0; }
.qbox-q {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 17px;
  line-height: 1.3; color: var(--ink); margin: 0 0 8px;
}
.qbox p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0 0 8px; }
.qbox p:last-child { margin-bottom: 0; }

/* ---- keynote ---------------------------------------------------------- */
.keynote {
  border-top: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  padding: 16px 4px; margin: 26px 0; text-align: center;
  font-family: var(--pb-font-display); font-weight: 700; font-size: 18px;
  line-height: 1.35; color: var(--ink);
}

/* ---- good to know ---------------------------------------------------- */
.gtk { background: var(--soft); padding: 15px 18px; margin: 22px 0; }
.gtk-label {
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--deep); margin: 0 0 7px;
}
.gtk p { font-size: 15.5px; line-height: 1.55; color: var(--body); margin: 0 0 8px; }
.gtk p:last-child { margin-bottom: 0; }
.gtk ul { margin: 0; padding-left: 19px; }
.gtk li { font-size: 15.5px; line-height: 1.5; color: var(--body); margin-bottom: 5px; }

/* ---- deadline badge -------------------------------------------------- */
.deadline { border: 2px solid var(--pink); padding: 14px 16px; margin: 22px 0; background: #fff; }
.dl-label {
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 6px;
}
.dl-label::before {
  content: ''; display: inline-block; width: 8px; height: 8px; background: var(--pink);
  margin-right: 9px; vertical-align: 1px;
}
.dl-rule {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 17px;
  line-height: 1.3; color: var(--ink); margin: 0;
}
.dl-detail { display: block; font-family: var(--pb-font-body); font-weight: 400; font-size: 14.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* ---- fact grid ------------------------------------------------------- */
.factgrid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); margin: 20px 0 24px; }
.fg-cell { background: #fff; padding: 13px 16px; }
.fg-k {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--deep); margin: 0 0 4px;
}
.fg-v { font-size: 16px; line-height: 1.45; color: var(--ink); margin: 0; }

/* ---- destination tiles ---------------------------------------------- */
.tiles { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0 8px; }
.tile {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: var(--deep); color: #fff; padding: 18px 18px 16px; position: relative; min-height: 84px;
}
.tile:nth-child(2n) { background: var(--ink); }
.tile:hover { background: var(--teal); color: var(--ink); }
.tile-label {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 17px;
  letter-spacing: -.01em; line-height: 1.2;
}
.tile-sub { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.72); max-width: 30em; }
.tile:hover .tile-sub { color: rgba(28,26,23,.75); }
.tile-ar { position: absolute; right: 16px; top: 18px; font-weight: 800; font-size: 15px; }

/* ---- "I need to…" row ------------------------------------------------ */
.needrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.need {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--softline); background: #fff; padding: 13px 14px;
  text-decoration: none; color: var(--ink); font-size: 14.5px; font-weight: 600;
  line-height: 1.25; min-height: 56px;
}
.need:hover { background: var(--soft); border-color: var(--teal); }
.need-ar { color: var(--teal); font-weight: 800; flex: 0 0 auto; }

/* ---- split layout: main + contextual side rail ---------------------- */
.split { display: block; }
.rail-wrap { margin: 0 0 26px; }
.rail { display: flex; flex-direction: column; gap: 14px; }
.rail > * { margin: 0; }

/* ---- back / browse footer row --------------------------------------- */
.backwrap.bottom { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.backlink-browse {
  display: none; background: none; border: 1px solid var(--softline); color: var(--deep);
  font-family: var(--pb-font-body); font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 11px 16px; cursor: pointer; min-height: 42px;
}
.backlink-browse:hover { background: var(--soft); border-color: var(--teal); }

/* ==========================================================================
   PHOTOGRAPHY
   ========================================================================== */
.ph { position: relative; margin: 0; overflow: hidden; background: var(--soft); }
.ph img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio); object-fit: cover; }
.ph-slot {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; text-align: center; padding: 12px;
  border: 1px dashed var(--softline); pointer-events: none;
}
.ph-slot-k {
  font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--deep);
}
.ph-slot-t {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 14px;
  line-height: 1.25; color: var(--ink); max-width: 22em;
}
.ph-cap {
  font-size: 12.5px; line-height: 1.45; color: var(--muted); font-style: italic;
  padding: 8px 2px 0;
}

.ph-band { margin: 0 0 4px; }
.ph-wide { margin: 26px auto; max-width: var(--col); }
.ph-bleed { margin: 32px 0; }
.ph-detail { margin: 22px auto; max-width: 420px; }
.ph-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 26px auto; max-width: var(--col); }
.ph-split { margin: 28px auto; max-width: var(--col); }
.ph-inset { margin: 0 0 16px; }
.phs-head {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 19px;
  line-height: 1.2; margin: 0 0 8px; color: var(--ink);
}
.phs-body p { font-size: 16.5px; line-height: 1.6; color: var(--body); margin: 0 0 12px; }
.phs-body ul { margin: 0 0 12px; padding-left: 20px; }
.phs-body li { font-size: 16.5px; line-height: 1.5; color: var(--body); margin-bottom: 5px; }

.hottake.has-photo { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; }
.hottake.has-photo .ph-ht { border-right: 0; }
.hottake.has-photo .ht-body { padding: 20px 20px 22px; }

/* ==========================================================================
   v4 DESKTOP — richer, not just wider
   ========================================================================== */
@media (min-width: 761px) {
  .crumb { padding: 16px 30px 0; font-size: 11.5px; }
  .phead { padding: 18px 0 6px; }
  .phead-inner { padding: 0 30px; }
  .phead h1 { font-size: 40px; }
  .phead .dek { font-size: 20px; }
  .phead.is-band { padding: 40px 0 36px; }

  .glance { padding: 20px 24px; }
  .glance-list li { font-size: 16.5px; }

  .gsec { padding: 40px 0 8px; }
  .gsec.is-soft { padding: 46px 0 40px; margin: 40px 0; }
  .gsec-inner { padding: 0 30px; }
  .gsec-title { font-size: 27px; }

  .factgrid { grid-template-columns: repeat(2, 1fr); }
  .factgrid.is-wide { grid-template-columns: repeat(3, 1fr); }
  .tiles { grid-template-columns: 1fr 1fr; }
  .needrow { grid-template-columns: repeat(3, 1fr); }

  .texta { flex-direction: row; align-items: center; gap: 22px; padding: 24px 28px; }
  .texta-line { font-size: 20px; flex: 1; }
  .texta-note { flex: 0 0 100%; margin-top: -4px; }

  /* main column + narrow contextual side rail */
  .split {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px;
    max-width: 1040px; margin: 0 auto; padding: 0 30px; align-items: start;
  }
  .main-wrap { grid-column: 1; grid-row: 1; min-width: 0; }
  .rail-wrap { grid-column: 2; grid-row: 1; position: sticky; top: 80px; margin: 0; }
  .split .gsec-inner { padding: 0; }
  .split .gsec.is-soft { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
  .split .ph-wide, .split .ph-pair, .split .ph-split { max-width: none; }

  .ph-split { display: grid; grid-template-columns: 5fr 7fr; gap: 28px; align-items: center; }
  .ph-split.is-flip .ph-inset { order: 2; }
  .ph-inset { margin: 0; }
  .ph-detail { float: right; max-width: 300px; margin: 6px 0 18px 26px; }

  .hottake.has-photo { grid-template-columns: 200px 1fr; }
  .hottake.has-photo .ph-ht { border-right: 1px dashed #bcd9d2; }

  .backlink-browse { display: none; }
}

@media (max-width: 760px) {
  .backlink-browse { display: inline-block; }
  .ph-bleed { margin: 26px -18px; }
  .gsec.is-soft { margin: 24px 0; }
  .jump-chip { font-size: 14px; padding: 10px 14px; min-height: 42px; }
  .tile { min-height: 92px; }
}

/* ==========================================================================
   v4 CLIENT GUIDE HOME — reads as a product, not a blog index
   ========================================================================== */
.home-hero { padding: 22px 0 4px; }
.home-hero-inner { max-width: var(--col); margin: 0 auto; padding: 0 18px; }
.home-hero h1 {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 33px;
  line-height: 1.02; letter-spacing: -.03em; margin: 0;
}
.home-hero .rule { margin: 14px 0 14px; }
.home-lede { font-size: 17px; line-height: 1.6; color: var(--body); margin: 0 0 14px; max-width: 34em; }
.home-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.home-meta span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.home-meta span:first-child { color: var(--deep); }
.home-meta span:first-child::before {
  content: ''; display: inline-block; width: 5px; height: 5px; background: var(--teal);
  margin-right: 8px; vertical-align: 2px;
}

.home-search-band { background: var(--soft); margin: 22px 0 0; padding: 26px 0 24px; }
.home-search-inner { max-width: var(--col); margin: 0 auto; padding: 0 18px; }
.gsearch.is-hero { background: none; border: 0; padding: 0; margin: 0; }
.gsearch.is-hero .gsearch-q { font-size: 22px; margin-bottom: 12px; }
.gsearch.is-hero .gsearch-field { border-color: var(--teal); border-width: 2px; }
.gsearch.is-hero .gsearch-field input { padding: 16px 12px; font-size: 17px; }
.gsearch.is-hero .gsearch-results.has-results { border-top-color: var(--softline); background: #fff; padding: 0 14px; }

.home-block { padding: 30px 0 4px; }
.home-block-inner { max-width: var(--col); margin: 0 auto; padding: 0 18px; }
.home-h2 {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 24px;
  line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px; color: var(--ink);
}
.home-note { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.inline-browse {
  background: none; border: 0; border-bottom: 2px solid var(--teal); padding: 0;
  font: inherit; font-weight: 700; color: var(--deep); cursor: pointer;
}
.home-block.is-library { padding-bottom: 30px; }

/* ---- the full library: numbered typographic rows --------------------- */
.library { margin: 6px 0 0; }
.lib-sec { margin: 0 0 26px; scroll-margin-top: 70px; }
.lib-sec-head {
  display: flex; align-items: center; gap: 14px; margin: 0 0 2px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--deep);
}
.lib-sec-head .line { flex: 1; height: 1px; background: var(--softline); }
.lib-sec-head .lib-n { color: var(--muted); letter-spacing: .1em; }
.lib-sec-link { color: var(--deep); text-decoration: none; }
.lib-sec-link:hover { text-decoration: underline; }
.lib-row {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t ar" "d ar";
  gap: 1px 12px; padding: 13px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; min-height: 56px; align-content: center;
}
.lib-row:hover { background: var(--soft); }
.lib-t {
  grid-area: t; font-family: var(--pb-font-display); font-weight: 700;
  font-size: 16.5px; line-height: 1.25; color: var(--ink);
}
.lib-d { grid-area: d; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.lib-ar { grid-area: ar; align-self: center; color: var(--teal); font-weight: 800; font-size: 14px; }

@media (min-width: 761px) {
  .home-hero { padding: 34px 0 6px; }
  .home-hero-inner, .home-search-inner, .home-block-inner { padding: 0 30px; }
  .home-hero h1 { font-size: 52px; }
  .home-lede { font-size: 19px; }
  .home-search-band { padding: 36px 0 34px; }
  .gsearch.is-hero .gsearch-q { font-size: 26px; }
  .home-block { padding: 44px 0 6px; }
  .home-h2 { font-size: 30px; }
  .library { columns: 2; column-gap: 44px; }
  .lib-sec { break-inside: avoid; }
  .home-block.is-library .home-block-inner { max-width: var(--wrap); }
}

/* ==========================================================================
   v4 FIXES — photo scale, contact strip, library restraint
   Photo treatments use explicit heights so a placeholder occupies exactly the
   space the real photograph will, and no image ever eats a whole phone screen.
   ========================================================================== */
.ph img { aspect-ratio: auto; }
.ph-band img   { height: 180px; }
.ph-wide img   { height: 230px; }
.ph-bleed img  { height: 220px; }
.ph-detail img { height: 200px; }
.ph-half img   { height: 220px; }
.ph-inset img  { height: 210px; }
.ph-ht img     { height: 180px; }

.texta { padding: 0; display: block; }
.texta-inner {
  max-width: var(--col); margin: 0 auto; padding: 22px 18px 20px;
  display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center;
}
.texta .texta-line, .texta .texta-btn, .texta .texta-note { margin: 0; }
.texta .texta-note { flex: 0 0 100%; }
.texta.is-rail { padding: 16px; display: block; }
.texta.is-rail .texta-inner { padding: 0; display: block; max-width: none; }
.texta.is-rail .texta-btn { margin: 12px 0 8px; display: inline-block; }

/* section counts removed — a bare number next to a category reads like a
   curriculum. Depth is communicated by the "48 guides" line in the hero. */
.lib-sec-head .lib-n { display: none; }

.need { font-size: 15px; padding: 15px 16px; min-height: 60px; }

@media (min-width: 761px) {
  .ph-band img   { height: 260px; }
  .ph-wide img   { height: 340px; }
  .ph-bleed img  { height: 300px; }
  .ph-detail img { height: 230px; }
  .ph-half img   { height: 300px; }
  .ph-inset img  { height: 280px; }
  .ph-ht img     { height: 100%; min-height: 210px; }
  .texta-inner { padding: 26px 30px 24px; }
  .texta .texta-line { flex: 1 1 auto; }
}

/* ==========================================================================
   v4 FIXES 2 — the reading column keeps its brand width; the rail hangs off
   the side of it rather than eating into it.
   ========================================================================== */
.factgrid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

@media (min-width: 761px) {
  .split {
    grid-template-columns: minmax(0, var(--col)) 280px;
    gap: 40px; max-width: 1080px; padding: 0 30px;
  }
  .split .ph-detail { max-width: 280px; }
}
@media (min-width: 761px) and (max-width: 1060px) {
  /* not enough room for a true side rail — stack it, keeping rail priority */
  .split { grid-template-columns: minmax(0, 1fr); max-width: 800px; }
  .main-wrap, .rail-wrap { grid-column: 1; }
  .rail-wrap { grid-row: auto; position: static; margin-bottom: 26px; }
  .rail { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
}

/* ==========================================================================
   v4 ALIGNMENT — everything on a refined page hangs off one left edge, so the
   title, body, rail, related guides and footnotes all line up.
   ========================================================================== */
@media (min-width: 761px) {
  .v4 .crumb,
  .v4 .phead-inner,
  .v4 .related,
  .v4 .backwrap,
  .v4 .disclaimer,
  .v4 > .sec,
  .v4 > .gsec > .gsec-inner,
  .v4 .texta-inner {
    max-width: 1080px; margin-left: auto; margin-right: auto;
    padding-left: 30px; padding-right: 30px;
  }
  .v4 .phead-inner > *,
  .v4 .related > *,
  .v4 .disclaimer > *,
  .v4 .texta-inner > .texta-line { max-width: var(--col); }
  .v4 .related .relgrid { max-width: var(--col); }
  .v4 .backwrap { max-width: 1080px; }
}

/* ==========================================================================
   v4 MOBILE-FIRST TRIM — every row above the answer has to earn its place.
   ========================================================================== */
@media (max-width: 760px) {
  .proto-flag { font-size: 10px; padding: 5px 12px; }
  .proto-flag .pf-long { display: none; }
  /* the live site's masthead strip is pure chrome on a phone; the logo bar
     below it already establishes where you are */
  .tn-mast { display: none; }
  .tn-nav { padding: 10px 18px; }
  .cg-bar-inner { padding: 7px 18px; }
  .cg-bar-label { font-size: 9.5px; letter-spacing: .16em; }
  .crumb { padding-top: 14px; font-size: 10.5px; }
  .phead { padding-top: 10px; }
  .phead h1 { font-size: 27px; }
  .phead .dek { font-size: 17px; font-weight: 600; margin-bottom: 16px; }
  .glance { margin-bottom: 16px; }
  .jumpto { margin-bottom: 2px; }
  .rail-wrap { margin-bottom: 22px; }
}
@media (max-width: 380px) {
  .phead h1 { font-size: 25px; }
  .needrow { grid-template-columns: 1fr; }
}

/* full-bleed captions need to come back inside the reading margin */
@media (max-width: 760px) {
  .ph-bleed .ph-cap { padding-left: 20px; padding-right: 20px; }
}

/* ==========================================================================
   PLACEHOLDER PHOTOS IN PLACE
   A real photograph fills the frame; a small chip marks it as a stand-in and
   the caption records which subject the finished guide still wants.
   ========================================================================== */
.ph.has-img { background: var(--ink); }
.ph.has-img img { border: 0; }
.ph-chip {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 8.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); background: rgba(255,255,255,.86); padding: 4px 7px;
}
.ph-cap-t { display: block; }
.ph-want {
  display: block; margin-top: 4px; font-style: normal; font-size: 11.5px;
  color: var(--deep); letter-spacing: .01em;
}
.ph-want b {
  font-weight: 800; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-right: 6px;
}
.ph-pair .ph-cap, .ph-ht .ph-cap { font-size: 11.5px; }
.hottake.has-photo .ph-ht.has-img { border-right: 0; }
.hottake.has-photo .ph-ht .ph-cap { padding: 6px 10px 10px; }
@media (max-width: 760px) {
  .ph-bleed.has-img { margin-left: -18px; margin-right: -18px; }
}

/* captions must sit below the frame, not get clipped inside it */
.ph { overflow: visible; }
.ph.has-img img { display: block; }
.ph .ph-cap { background: #fff; }
.ph-bleed.has-img .ph-cap { padding-top: 8px; }
.hottake.has-photo .ph-ht .ph-cap { background: transparent; }

/* photo + HOT TAKE and image/text splits must fill the reading column */
.hottake.has-photo { width: 100%; }
@media (min-width: 761px) {
  /* when the image is flipped to the right, the copy takes the wide column */
  .ph-split.is-flip { grid-template-columns: 7fr 5fr; }
}

/* ==========================================================================
   ==========================================================================
   v5 LAYER
   Hard rule: no large dark content containers. Dark survives only as
   typography. Soft backgrounds are the established light teal. Navigation is
   image-led. Copy is the deck's; internal notes look internal.
   ==========================================================================
   ========================================================================== */

/* ---- the client-guide identity bar is no longer a black band ------------- */
.cg-bar { background: var(--soft); color: var(--ink); border-bottom: 1px solid var(--softline); }
.cg-bar-label { color: var(--ink); }
.cg-bar-label span { color: var(--teal); }
.cg-bar-note { color: var(--muted); }

/* ---- Text A'Dell: light teal, black type, pink action ------------------- */
.texta, .texta.is-light {
  background: var(--soft); color: var(--ink);
  border-top: 1px solid var(--softline); border-bottom: 1px solid var(--softline);
}
.texta .texta-line { color: var(--ink); }
.texta .texta-note { color: var(--muted); }
.texta .texta-btn { background: var(--pink); color: var(--ink); }
.texta .texta-btn:hover { background: var(--ink); color: #fff; }
.texta.has-face .texta-inner { display: flex; gap: 18px; align-items: flex-start; flex-wrap: nowrap; }
.ph-face { flex: 0 0 84px; }
.ph-face img { height: 84px; border-radius: 50%; }
.ph-face .ph-slot { border-radius: 50%; }
.ph-face .ph-slot-t, .ph-face .ph-chip, .ph-face .ph-cap { display: none; }
.texta-copy { min-width: 0; }
.texta.is-rail { border: 0; border-left: 4px solid var(--pink); }

/* ---- image-led category navigation (replaces the dark tiles) ------------ */
.catnav { display: grid; grid-template-columns: 1fr; gap: 0; margin: 10px 0 0; }
.cat {
  display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
}
.cat:first-child { border-top: 1px solid var(--rule); }
.cat:hover { background: var(--soft); }
.cat .ph-cat { margin: 0; }
.cat .ph-cat img { height: 76px; }
.cat .ph-cat .ph-slot-t, .cat .ph-cat .ph-chip, .cat .ph-cat .ph-cap { display: none; }
.cat-body { display: block; position: relative; padding-right: 26px; }
.cat-t {
  display: block; font-family: var(--pb-font-display); font-weight: 800;
  font-size: 18px; line-height: 1.18; color: var(--ink); letter-spacing: -.01em;
}
.cat-d { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.cat-ar { position: absolute; right: 0; top: 2px; color: var(--teal); font-weight: 800; }

/* ---- thumbnail rows for related content -------------------------------- */
.trows { margin: 34px 0 8px; }
.trow {
  display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
}
.trow:first-of-type { border-top: 1px solid var(--rule); }
.trow:hover { background: var(--soft); }
.trow .ph-thumb { margin: 0; }
.trow .ph-thumb img { height: 64px; }
.trow .ph-thumb .ph-slot-t, .trow .ph-thumb .ph-chip, .trow .ph-thumb .ph-cap { display: none; }
.trow-body { display: block; position: relative; padding-right: 24px; }
.trow-t {
  display: block; font-family: var(--pb-font-display); font-weight: 700;
  font-size: 15.5px; line-height: 1.22; color: var(--ink);
}
.trow-d { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.trow-ar { position: absolute; right: 0; top: 1px; color: var(--teal); font-weight: 800; font-size: 14px; }

/* ---- internal notes: obviously not client copy -------------------------- */
.need-copy, .build-note {
  border: 1px dashed var(--pink); background: #fff; padding: 12px 14px; margin: 18px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.need-copy-k, .build-note-k {
  display: block; font-family: var(--pb-font-body); font-size: 9px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--pink); margin-bottom: 5px;
}
.build-note { border-color: var(--softline); }
.build-note-k { color: var(--deep); }
.need-inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--pink);
}

/* ---- home tweaks -------------------------------------------------------- */
.home-find { background: var(--soft); padding: 26px 0 24px; margin: 22px 0 0; }
.home-find-inner { max-width: var(--col); margin: 0 auto; padding: 0 18px; }
.home-lede.is-sub { font-size: 16px; color: var(--body); }
.gsearch.is-hero .gsearch-hint strong { color: var(--ink); }

/* v5 body: deck sections keep the reading column, no rail on these pages */
.v5-body .gsec:first-of-type { padding-top: 18px; }
.v5-body > p:first-child { margin-top: 0; }

@media (min-width: 761px) {
  .catnav { grid-template-columns: 1fr 1fr; column-gap: 34px; }
  .cat { grid-template-columns: 128px 1fr; }
  .cat .ph-cat img { height: 88px; }
  .trows { max-width: var(--col); }
  .trow { grid-template-columns: 104px 1fr; }
  .trow .ph-thumb img { height: 72px; }
  .texta.has-face .texta-inner { gap: 24px; }
  .ph-face { flex: 0 0 104px; }
  .ph-face img { height: 104px; }
}
@media (max-width: 760px) {
  .texta.has-face .texta-inner { flex-wrap: wrap; }
  .ph-face { flex: 0 0 64px; }
  .ph-face img { height: 64px; }
}

/* ---- numbered checklist (deck copy, restructured) ---------------------- */
.checklist { list-style: none; margin: 6px 0 18px; padding: 0; }
.cl-item {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.cl-item:first-child { border-top: 1px solid var(--rule); }
.cl-n {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 15px;
  color: var(--ink); background: var(--soft); text-align: center; line-height: 30px;
  height: 30px;
}
.cl-body { min-width: 0; }
.cl-t {
  display: block; font-family: var(--pb-font-display); font-weight: 700;
  font-size: 17px; line-height: 1.25; color: var(--ink); margin-bottom: 4px;
}
.cl-body p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0 0 8px; }
.cl-body p:last-child { margin-bottom: 0; }

/* ---- deadline cards (deck copy, restructured) -------------------------- */
.dcards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 8px 0 20px; }
.dcard { border: 1px solid var(--softline); border-top: 3px solid var(--pink); padding: 14px 16px; background: #fff; }
.dcard-t {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 16px;
  line-height: 1.2; color: var(--ink); margin: 0 0 6px;
}
.dcard p { font-size: 15.5px; line-height: 1.55; color: var(--body); margin: 0 0 8px; }
.dcard p:last-child { margin-bottom: 0; }
@media (min-width: 761px) { .dcards { grid-template-columns: 1fr 1fr; } }

/* v5 pages carry no side rail, so the reading column centres rather than
   hanging off the left edge of a rail-width container */
@media (min-width: 761px) {
  .v4.v5 .crumb,
  .v4.v5 .phead-inner,
  .v4.v5 .related,
  .v4.v5 .backwrap,
  .v4.v5 .disclaimer,
  .v4.v5 > .sec,
  .v4.v5 > .gsec > .gsec-inner,
  .v4.v5 .texta-inner { max-width: var(--col); }
  .v4.v5 .gsec > .gsec-inner { max-width: var(--col); }
  .v4.v5 .trows { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   THE TRAVEL OBSESSED LIBRARY — authenticated home.
   Arrival first: one of A'Dell's own photographs, the hero copy, a scroll cue.
   Utility begins below the first screen. No dark sections anywhere.
   ========================================================================== */
body.pb-home .tn-nav { padding-top: 10px; padding-bottom: 10px; }

.pb-hero { display: block; background: #fff; }
.pb-hero-photo { margin: 0; }
.pb-hero .ph.pb-hero-img { margin: 0; }
.pb-hero .ph.pb-hero-img img { height: 38vh; min-height: 240px; max-height: 420px; }
.pb-hero .ph.pb-hero-img .ph-cap { display: none; }

.pb-hero-text { background: #fff; }
.pb-hero-inner { max-width: var(--wrap); margin: 0 auto; padding: 20px 26px 26px; }
.pb-eyebrow {
  display: flex; align-items: center; margin: 0 0 14px;
  font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--deep);
}
.pb-eyebrow i { font-style: normal; color: var(--pink); font-size: 11px; margin-right: 10px; }
.pb-home h1.pb-h1 {
  font-family: var(--pb-font-display); font-weight: 800;
  font-size: 32px; line-height: 1.04; letter-spacing: -.035em; color: var(--ink);
  margin: 0 0 14px;
}
.pb-sub {
  margin: 0 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--body);
  max-width: 46ch;
}
.pb-scroll {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--deep); border-bottom: 2px solid var(--teal); padding-bottom: 6px;
}
.pb-scroll span { color: var(--teal); font-size: 14px; }
.pb-scroll:hover { color: var(--ink); border-bottom-color: var(--pink); }

/* ---- FIND IT FAST -------------------------------------------------------- */
.pb-find { background: var(--soft); padding: 30px 0 32px; }
.pb-find-inner { max-width: var(--col); margin: 0 auto; padding: 0 26px; }
.pb-find .gsearch.is-hero { margin: 0; }
.pb-find .gsearch-hint { margin: 12px 0 0; font-size: 14.5px; color: var(--body); }
.pb-browse {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px;
  width: 100%; margin: 22px 0 0;
  background: #fff; border: 1px solid var(--tealline); cursor: pointer;
  padding: 16px 18px; font-family: inherit; text-align: left;
}
.pb-browse .lbl {
  flex: 1 1 auto; white-space: nowrap;
  font-size: 12.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
}
.pb-browse .cnt {
  flex: 1 0 100%; order: 3; margin-top: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--deep);
}
.pb-browse .chev { order: 2; margin-left: auto; color: var(--teal); font-size: 12px; }
.pb-browse:hover { border-color: var(--teal); }

/* ---- category entry points: an editorial list, not a grid ---------------- */
.pb-cats { background: #fff; padding: 34px 0 8px; }
.pb-cats-inner { max-width: var(--col); margin: 0 auto; padding: 0 26px; }
.pb-cat {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
}
.pb-cat:first-of-type { border-top: 1px solid var(--rule); }
.pb-cat-t {
  font-family: var(--pb-font-display); font-weight: 700;
  font-size: 19px; line-height: 1.2; letter-spacing: -.015em; color: var(--ink);
}
.pb-cat-n {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.pb-cat-ar { color: var(--teal); font-size: 14px; }
.pb-cat:hover .pb-cat-t { color: var(--deep); }

/* the Library index opens at every width on the home page */
body.pb-home .cg-index { display: block !important; }
body.pb-home .cg-index[hidden] { display: none !important; }

@media (min-width: 761px) {
  .pb-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .pb-hero-photo { order: 2; }
  .pb-hero .ph.pb-hero-img img { height: 100%; min-height: 520px; max-height: none; }
  .pb-hero-text { order: 1; display: flex; align-items: center; }
  .pb-hero-inner { padding: 56px 48px 56px max(26px, calc(50vw - 520px)); }
  .pb-home h1.pb-h1 { font-size: 52px; }
  .pb-sub { font-size: 17px; }
  .pb-find { padding: 46px 0 48px; }
  .pb-find-inner, .pb-cats-inner { padding: 0 30px; }
  .pb-cats { padding: 48px 0 10px; }
  .pb-cat-t { font-size: 22px; }
  .pb-browse { flex-wrap: nowrap; }
  .pb-browse .lbl { flex: 0 0 auto; }
  .pb-browse .cnt { flex: 0 0 auto; order: 1; margin-top: 0; }
  .pb-browse .cnt::before { content: '\00b7'; margin-right: 12px; color: var(--teal); }
}

/* ==========================================================================
   GHOST INTEGRATION LAYER.
   Maps Ghost's editor output (Koenig) onto the approved Library design, so a
   tutorial written normally in Ghost Admin comes out looking like the
   prototype. Scoped to .pb-body / the Library templates only: nothing here
   can reach the rest of Travel Obsessed TX.
   ========================================================================== */

/* Ghost's native search, styled as the Library search field */
.pb-searchbtn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: #fff; border: 2px solid var(--teal); cursor: pointer;
  padding: 16px 18px; font-family: inherit; text-align: left;
}
.pb-searchbtn-t { font-size: 16px; color: var(--muted); }
.pb-searchbtn:hover { border-color: var(--deep); }

/* the library + back link on tutorial pages */
.pb-library { background: #fff; padding: 10px 0 8px; }
.pb-lib-item .pb-cat-n { color: var(--deep); }
.pb-empty { font-size: 15px; line-height: 1.6; color: var(--muted); padding: 14px 0; }
.pb-backrow { padding-top: 26px; padding-bottom: 6px; }
.pb-back {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--deep); border-bottom: 2px solid var(--tealline); padding-bottom: 5px;
}
.pb-back:hover { border-bottom-color: var(--teal); }
.pb-page-body { background: #fff; }
.pb-stopline { height: 4px; background: var(--teal); margin: 26px 0 0; }

/* ---- Koenig content -----------------------------------------------------
   A HOT TAKE is a Ghost callout card, so A'Dell writes one with the editor
   rather than pasting HTML. */
.pb-body .kg-callout-card {
  display: block; background: #fff; border: 0; border-left: 4px solid var(--pink);
  padding: 4px 0 4px 20px; margin: 30px 0; border-radius: 0;
}
.pb-body .kg-callout-card::before {
  content: 'HOT TAKE'; display: block; margin-bottom: 8px;
  font-family: var(--pb-font-body); font-size: 10px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pink);
}
.pb-body .kg-callout-card-emoji { display: none; }
.pb-body .kg-callout-text {
  font-family: var(--pb-font-display); font-weight: 700;
  font-size: 19px; line-height: 1.35; color: var(--ink);
}

/* numbered steps read as a checklist */
.pb-body ol { counter-reset: pbstep; list-style: none; padding: 0; margin: 22px 0; }
.pb-body ol > li {
  counter-increment: pbstep; position: relative; padding: 14px 0 14px 52px;
  border-top: 1px solid var(--rule); font-size: 16.5px; line-height: 1.6;
}
.pb-body ol > li:last-child { border-bottom: 1px solid var(--rule); }
.pb-body ol > li::before {
  content: counter(pbstep); position: absolute; left: 0; top: 12px;
  width: 34px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: var(--soft); color: var(--deep);
  font-family: var(--pb-font-display); font-weight: 800; font-size: 15px;
}
.pb-body ol ol { margin: 10px 0; }
.pb-body ol ol > li { border: 0; padding-left: 40px; }

/* bulleted checklists */
.pb-body ul { list-style: none; padding: 0; margin: 20px 0; }
.pb-body ul > li { position: relative; padding: 7px 0 7px 26px; font-size: 16.5px; line-height: 1.6; }
.pb-body ul > li::before {
  content: ''; position: absolute; left: 4px; top: 17px;
  width: 8px; height: 2px; background: var(--teal);
}

/* editor images, bookmarks, quotes */
.pb-body figure { margin: 30px 0; }
.pb-body figure img { display: block; width: 100%; height: auto; }
.pb-body figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted);
}
.pb-body blockquote {
  margin: 28px 0; padding: 2px 0 2px 20px; border-left: 4px solid var(--teal);
  font-family: var(--pb-font-display); font-weight: 700;
  font-size: 19px; line-height: 1.4; color: var(--ink);
}
.pb-body .kg-bookmark-card { margin: 28px 0; }
.pb-body .kg-bookmark-container {
  display: flex; border: 1px solid var(--rule); text-decoration: none; background: #fff;
}
.pb-body .kg-bookmark-content { padding: 18px 20px; }
.pb-body .kg-bookmark-title {
  font-family: var(--pb-font-display); font-weight: 700; color: var(--ink);
}
.pb-body .kg-bookmark-description { font-size: 14.5px; color: var(--body); margin-top: 6px; }
.pb-body .kg-bookmark-thumbnail img { display: block; height: 100%; object-fit: cover; }
.pb-body table { width: 100%; border-collapse: collapse; margin: 26px 0; }
.pb-body th, .pb-body td {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--rule); font-size: 15px;
}
.pb-body th { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--deep); }

/* ==========================================================================
   TUTORIAL CONTENT COMPONENTS — v1.2
   Everything below is driven by what A'Dell writes in the Ghost editor. No
   tutorial copy lives in the theme. Scoped to .pb-body, which only the
   Library templates use.
   ========================================================================== */

/* the opening paragraph of a tutorial reads as a lede */
.pb-body > p:first-child {
  font-size: 19px; line-height: 1.55; font-weight: 600; color: var(--ink);
  margin-bottom: 18px;
}

/* ---- headings ----------------------------------------------------------- */
.pb-body h2 {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 26px;
  line-height: 1.12; letter-spacing: -.02em; color: var(--ink);
  border-top: 1px solid var(--rule); padding-top: 30px; margin: 40px 0 16px;
}
/* a step: the number lives in the heading text, so it stays editable */
.pb-body h3 {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 19px;
  line-height: 1.25; letter-spacing: -.01em; color: var(--ink);
  border-left: 4px solid var(--teal); background: var(--soft);
  padding: 11px 14px; margin: 30px 0 12px;
}
.pb-body h3 + p { margin-top: 0; }

/* ---- checklists: bulleted lists read as things to tick off -------------- */
.pb-body ul > li::before {
  content: ''; position: absolute; left: 2px; top: 13px;
  width: 11px; height: 6px; background: none;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.pb-body ul > li { padding-left: 30px; }

/* a list of links is a link list, not a checklist */
.pb-body ul > li:has(> a:only-child) { padding-left: 0; border-bottom: 1px solid var(--rule); }
.pb-body ul > li:has(> a:only-child)::before {
  content: '\2192'; position: static; display: inline-block; width: auto; height: auto;
  border: 0; transform: none; margin-right: 12px; color: var(--teal); font-weight: 700;
}
.pb-body ul > li:has(> a:only-child) > a {
  font-weight: 600; color: var(--deep); text-decoration: none;
  border-bottom: 1px solid var(--tealline);
}
.pb-body ul > li:has(> a:only-child) > a:hover { border-bottom-color: var(--teal); }

/* ---- HOT TAKE: a pink callout card in the editor ------------------------ */
.pb-body .kg-callout-card.kg-callout-card-pink {
  background: #fff; border: 0; border-left: 4px solid var(--pink);
  border-radius: 0; padding: 6px 0 6px 20px; margin: 34px 0;
}
.pb-body .kg-callout-card.kg-callout-card-pink::before {
  content: 'HOT TAKE'; display: block; margin-bottom: 9px;
  font-family: var(--pb-font-body); font-size: 10px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pink);
}
.pb-body .kg-callout-card.kg-callout-card-pink .kg-callout-text {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 19px;
  line-height: 1.35; color: var(--ink);
}

/* ---- IMPORTANT: a yellow callout card in the editor --------------------- */
.pb-body .kg-callout-card.kg-callout-card-yellow {
  background: var(--soft); border: 0; border-left: 4px solid var(--teal);
  border-radius: 0; padding: 16px 18px; margin: 30px 0;
}
.pb-body .kg-callout-card.kg-callout-card-yellow::before {
  content: 'IMPORTANT'; display: block; margin-bottom: 7px;
  font-family: var(--pb-font-body); font-size: 10px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--deep);
}
.pb-body .kg-callout-card.kg-callout-card-yellow .kg-callout-text {
  font-family: var(--pb-font-body); font-size: 16.5px; line-height: 1.55; color: var(--ink);
}
/* any other callout colour keeps a neutral, on-brand treatment */
.pb-body .kg-callout-card .kg-callout-emoji { display: none; }

/* ---- Text A'Dell: any sms: link becomes the contact button -------------- */
.pb-body a[href^="sms:"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 13px 22px; margin: 6px 0;
  background: var(--pink); color: var(--ink); text-decoration: none; border: 0;
  font-family: var(--pb-font-body); font-size: 13px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.pb-body a[href^="sms:"]:hover { background: #ff8ad4; color: var(--ink); }

/* ---- links out to DCL, and links across the Library -------------------- */
.pb-body p a { color: var(--deep); text-decoration: none; border-bottom: 1px solid var(--tealline); }
.pb-body p a:hover { border-bottom-color: var(--teal); }
.pb-body p a[href*="disneycruise.disney.go.com"]::after,
.pb-body p a[href^="http"]:not([href*="travelobsessedtx.com"])::after {
  content: '\2197'; margin-left: 5px; color: var(--teal); font-size: .85em;
}

@media (min-width: 761px) {
  .pb-body h2 { font-size: 30px; }
  .pb-body h3 { font-size: 21px; }
  .pb-body > p:first-child { font-size: 20px; }
}

/* the logged-out Library home: one calm sign-in state, nothing else */
.pb-locked .pb-lockstate { margin: 0 0 40px; padding: 52px 0 56px; }
@media (min-width: 761px) { .pb-locked .pb-lockstate { padding: 92px 0 96px; } }

/* ==========================================================================
   THE ACCESS STATE.
   Used by partials/content-cta.hbs (a gated tutorial) and by
   partials/library/home-locked.hbs (the logged-out Library home).

   These rules existed only in the paused public-preview stylesheet and were
   never carried into the theme, so the logged-out state rendered unstyled.
   Ported here, light only: soft mint, white, teal. No dark panel.
   ========================================================================== */
.pp-gate.is-soft {
  background: var(--soft); margin: 0 calc(50% - 50vw) 34px;
  padding: 30px 0 32px; max-width: 100vw;
}
.pp-gate-inner { max-width: var(--col); margin: 0 auto; padding: 0 26px; }
.pp-gate.is-soft .pp-gate-eyebrow {
  display: flex; align-items: center; margin: 0 0 12px;
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--deep); line-height: 1.5;
}
.pp-gate.is-soft .pp-gate-eyebrow i {
  font-style: normal; color: var(--pink); font-size: 11px; margin-right: 9px;
}
.pp-gate.is-soft h2.pp-gate-head {
  font-family: var(--pb-font-display); font-weight: 800;
  font-size: 28px; line-height: 1.08; letter-spacing: -.025em; color: var(--ink);
  margin: 0 0 12px; max-width: 20ch; border-top: 0; padding-top: 0;
}
.pp-gate.is-soft p.pp-offer-line {
  margin: 0 0 18px; font-size: 16.5px; line-height: 1.5; color: var(--ink);
  font-weight: 600; max-width: 40ch;
}
.pp-gate.is-soft a.pp-offer-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 14px 20px; text-decoration: none; line-height: 1.3;
  font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.pp-gate.is-soft a.pp-offer-btn.is-primary { background: var(--teal); color: #fff; border: 0; }
.pp-gate.is-soft a.pp-offer-btn.is-primary:hover { background: var(--deep); color: #fff; }
.pp-gate.is-soft a.pp-gate-login {
  display: block; width: fit-content; margin: 20px 0 0; padding-bottom: 2px;
  text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--body);
  border-bottom: 1px solid var(--softline);
}
.pp-gate.is-soft a.pp-gate-login span { color: var(--teal); margin-left: 8px; }
.pp-gate.is-soft a.pp-gate-login:hover { color: var(--ink); border-bottom-color: var(--teal); }

@media (min-width: 761px) {
  .pp-gate.is-soft { padding: 44px 0 46px; }
  .pp-gate-inner { padding: 0 30px; }
  .pp-gate.is-soft h2.pp-gate-head { font-size: 38px; }
  .pp-gate.is-soft a.pp-offer-btn { display: inline-flex; padding: 16px 32px; }
}

/* the current collection, shown beside the product label */
.pb-coll {
  margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--tealline);
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.cg-bar-label span { color: var(--teal); margin: 0 8px; }

/* ==========================================================================
   GLOBAL PASS — eyebrows, orphans, tutorial photography.
   ========================================================================== */

/* ---- 6. eyebrows, raised to a readable size everywhere in the Library ---- */
.gsec-eyebrow, .pb-eyebrow, .pp-gate-eyebrow, .cg-idx-lbl, .pb-cat-n,
.crumb, .cg-bar-label, .pb-scroll, .pb-browse .lbl, .pb-browse .cnt,
.pb-coll, .pb-trow-state, .pp-gate-count, .pb-back {
  font-size: 12.5px; letter-spacing: .14em; line-height: 1.5;
}
.pb-eyebrow, .pp-gate-eyebrow { font-size: 13px; letter-spacing: .15em; }
.gsec-eyebrow { font-size: 13px; letter-spacing: .15em; }
.cg-idx-lbl { font-size: 12.5px; letter-spacing: .15em; }
.pb-coll { font-size: 11.5px; letter-spacing: .14em; }
.pb-cat-n, .pb-trow-state { font-size: 11.5px; letter-spacing: .12em; }
.crumb { font-size: 12px; letter-spacing: .12em; }
.pb-body .kg-callout-card.kg-callout-card-pink::before,
.pb-body .kg-callout-card.kg-callout-card-yellow::before {
  font-size: 12px; letter-spacing: .16em;
}
@media (min-width: 761px) {
  .pb-eyebrow, .pp-gate-eyebrow, .gsec-eyebrow { font-size: 13.5px; }
}

/* ---- 1. orphan control inside the Library --------------------------------- */
.pb-h1, .pb-sub, .pp-gate-head, .pp-offer-line, .phead h1, .dek,
.gsec-title, .pb-cat-t, .pb-body h2, .pb-body h3, .pb-locked-t, .cg-idx-item .t {
  text-wrap: balance;
}
.pb-body p, .pb-body li, .pb-body figcaption { text-wrap: pretty; }

/* ---- 10. provisional tutorial photography --------------------------------
   Inserted by assets/js/library.js at safe boundaries only, never inside a
   checklist, a numbered sequence or a callout. Existing Travel Obsessed TX
   photographs only: the six already used in the site footer strip. --------- */
.pb-photo { margin: 34px 0; }
.pb-photo img {
  display: block; width: 100%; height: 300px; object-fit: cover;
  background: var(--soft);
}
.pb-photo figcaption {
  margin-top: 9px; font-size: 12px; line-height: 1.5; color: var(--muted);
}
.pb-photo .pb-photo-note {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--deep); margin-right: 10px;
}
@media (min-width: 761px) {
  .pb-photo { margin: 44px calc(50% - 50vw); max-width: 100vw; }
  .pb-photo img { height: 460px; }
  .pb-photo figcaption { max-width: var(--col); margin: 10px auto 0; padding: 0 30px; }
}

/* ---- SECTION INDEX ------------------------------------------------------
   Mirrors the "Top questions" rows on the locked Library home: numbered,
   ragged, hairline-separated, teal arrow. Built by library.js from the H2s
   the author wrote in Ghost, so there is nothing to hand-author.
   ------------------------------------------------------------------------ */
.pb-jump { background: var(--soft); padding: 26px 26px 30px; margin: 0 0 34px; }
.pb-jump-in { max-width: var(--col); }
.pb-jump-lab {
  font-family: var(--pb-font-body); font-size: 13px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--deep); margin: 0 0 4px;
}
.pb-jump-row {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--hair, #e6e6e6); text-decoration: none;
}
.pb-jump-row:last-of-type { border-bottom: 1px solid var(--hair, #e6e6e6); }
.pb-jump-n {
  font-family: var(--pb-font-display); font-weight: 800; font-size: 13px; color: var(--teal);
}
.pb-jump-t {
  font-family: var(--pb-font-display); font-weight: 700; font-size: 22px; line-height: 1.2;
  color: var(--ink); letter-spacing: -.015em; text-wrap: balance;
}
.pb-jump-a { color: var(--teal); font-size: 16px; }
.pb-jump-row:hover .pb-jump-t { color: var(--deep); }
@media (max-width: 760px) {
  .pb-jump { padding: 22px 0 26px; margin-bottom: 26px; }
  .pb-jump-row { grid-template-columns: 32px 1fr auto; gap: 12px; padding: 16px 0; }
  .pb-jump-t { font-size: 18px; }
}

/* ==========================================================================
   LIBRARY HOME — the locked hero and band
   Full-bleed photo, ribbon headline, sparkle field, then the mint band with
   the lead line, Top questions and search. The numbered question rows reuse
   .pb-jump-row, so the home and the tutorial section index are one component.
   ========================================================================== */
body.pb-home { overflow-x: hidden; }

.lib-hero {
  position: relative; min-height: 62vh; display: flex; flex-direction: column;
  justify-content: flex-end; overflow: hidden; padding: 30px 0 0;
  margin: 0 calc(50% - 50vw); max-width: 100vw;
}
/* 15% trimmed off the top of the photo, for a more horizontal read */
.lib-hero img {
  position: absolute; left: 0; right: 0; top: -17.6%;
  width: 100%; height: 117.6%; object-fit: cover; object-position: center;
}
.lib-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.34) 32%,
              rgba(238,248,245,.08) 56%, rgba(13,114,99,.32) 100%);
}
.lib-in { position: relative; z-index: 3; width: 100%; }
.lib-sec { max-width: 1080px; margin: 0 auto; padding: 0 30px; }
.lib-in .lib-sec { padding: 34px 30px 46px; }

/* ---- ribbons ---- */
.lib-rib, .lib-h1 .rib, .lib-cue {
  background: #fff; border-radius: 0; box-shadow: 0 2px 12px rgba(28,26,23,.07);
}
.lib-rib { display: table; padding: 9px 17px 11px; }
.lib-lockup {
  white-space: nowrap; margin: 0; display: flex; font-family: var(--pb-font-body);
  font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--deep); align-items: center; gap: 12px;
}
.lib-lockup i { font-style: normal; color: #FF66C4; font-size: 12px; }
.lib-lockup b {
  font-weight: 800; color: var(--muted); letter-spacing: .14em; font-size: 11.5px;
  padding-left: 12px; border-left: 1px solid var(--softline);
}
.lib-h1 {
  margin: 0; max-width: none; font-family: var(--pb-font-display); font-weight: 800;
  font-size: clamp(28px, 4.2vw, 60px); line-height: 1.1; letter-spacing: -.022em;
}
.lib-h1 .rib {
  display: table; color: var(--ink); white-space: nowrap;
  padding: 11px 20px 15px; margin-bottom: 18px;
}
.lib-h1 .rib.is-2 { margin-bottom: 0; }
/* shrink-wraps to the second ribbon, so the lockup can hang off its right edge */
.lib-stack { display: table; margin-left: 44px; }
.lib-lock-row { display: block; text-align: right; margin-top: 16px; }
.lib-lock-row .lib-rib { display: inline-table; text-align: left; }
.lib-cue {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  padding: 7px 15px 8px; font-family: var(--pb-font-body); font-size: 12.5px;
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--deep); text-decoration: none;
}
.lib-cue span { color: var(--teal); font-size: 15px; }
.lib-cue:hover { color: var(--ink); }

/* ---- sparkles: clustered, and never on a white ribbon ---- */
.lib-sparks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lib-sparks i {
  position: absolute; display: block; line-height: 0; z-index: 4;
  filter: drop-shadow(0 1px 12px rgba(13,52,46,.45));
}
.lib-sparks svg { display: block; width: 100%; height: auto; }
/* the top-left cluster needs the gutter beside the 1080px column, which only
   exists on a wide screen; below that the two always-clear clusters remain */
.lib-sparks .s1, .lib-sparks .s2, .lib-sparks .s3, .lib-sparks .s4 { display: none; }
@media (min-width: 1101px) {
  .lib-sparks .s1, .lib-sparks .s2, .lib-sparks .s3, .lib-sparks .s4 { display: block; }
  .lib-sparks .s1 { left: 7%;    top: 10%; width: 34px; opacity: .92; }
  .lib-sparks .s2 { left: 14%;   top: 15%; width: 13px; opacity: 1; }
  .lib-sparks .s3 { left: 3%;    top: 29%; width: 21px; opacity: .85; }
  .lib-sparks .s4 { left: 10%;   top: 39%; width: 30px; opacity: .9; }
}
.lib-sparks .s5 { right: 6%;    top: 8%;  width: 36px; opacity: .9; }
.lib-sparks .s6 { right: 15%;   top: 17%; width: 20px; opacity: 1; }
.lib-sparks .s7 { right: 4%;    top: 66%; width: 32px; opacity: .9; }
.lib-sparks .s8 { right: 12%;   top: 78%; width: 22px; opacity: 1; }
.lib-sparks .s9 { right: 3%;    top: 88%; width: 26px; opacity: .85; }

/* ---- the band under the photo ---- */
.lib-band {
  background: var(--soft); padding: 54px 0 58px;
  margin: 0 calc(50% - 50vw); max-width: 100vw;
}
.lib-lead {
  font-family: var(--pb-font-body); font-size: 21px; line-height: 1.55;
  color: var(--body); margin: 0 0 40px; max-width: 46ch; text-wrap: pretty;
}
.lib-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 52px; align-items: start; }
.lib-lab {
  font-family: var(--pb-font-body); font-size: 13px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--deep); margin: 0 0 4px;
}
.lib-search {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  background: #fff; border: 2px solid var(--teal); border-radius: 0;
  padding: 22px 24px; cursor: pointer; font: inherit;
}
.lib-search:hover { background: var(--soft); }
.lib-search-i { color: var(--teal); font-size: 20px; }
.lib-search-t { font-family: var(--pb-font-body); font-size: 19px; color: #8a8172; }
.lib-browse-line { font-family: var(--pb-font-body); font-size: 14.5px; color: var(--muted); margin: 0 0 22px; }

@media (max-width: 900px) {
  .lib-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .lib-hero { min-height: 62vh; }
}
@media (max-width: 760px) {
  /* on a phone the photo never takes more than half the screen */
  .lib-hero { min-height: 50vh; padding-top: 20px; }
  .lib-sec { padding: 0 20px; }
  .lib-in .lib-sec { padding: 26px 20px 32px; }
  .lib-rib { padding: 7px 12px 9px; }
  .lib-lockup { font-size: 10px; letter-spacing: .115em; gap: 8px; }
  .lib-lockup b { font-size: 9px; padding-left: 8px; }
  .lib-lockup i { font-size: 10px; }
  .lib-h1 { font-size: clamp(18px, 5.6vw, 23px); }
  .lib-h1 .rib { padding: 8px 13px 11px; margin-bottom: 12px; box-shadow: 0 2px 9px rgba(28,26,23,.08); }
  .lib-stack { margin-left: 18px; }
  .lib-lock-row { margin-top: 12px; }
  .lib-cue { margin-top: 20px; padding: 6px 12px 7px; }
  .lib-band { padding: 36px 0 40px; }
  .lib-lead { font-size: 17px; margin-bottom: 28px; max-width: none; }
  .lib-search { padding: 17px 18px; }
  .lib-search-t { font-size: 16px; }
  .lib-sparks .s5 { right: 4%;  top: 31%; width: 26px; }
  .lib-sparks .s6 { display: none; }
  .lib-sparks .s7 { right: 5%;  top: 52%; width: 24px; }
  .lib-sparks .s8 { right: 16%; top: 22%; width: 18px; }
  .lib-sparks .s9 { display: none; }
}
@media (max-width: 760px) and (max-height: 760px) {
  .lib-in .lib-sec { padding: 16px 20px 20px; }
  .lib-rib { padding: 6px 11px 8px; }
  .lib-h1 { font-size: clamp(16px, 5.1vw, 20px); }
  .lib-h1 .rib { padding: 6px 11px 8px; margin-bottom: 9px; }
  .lib-cue { margin-top: 15px; font-size: 11px; }
}