/*
Theme Name: LongBeach.biz
Theme URI: https://longbeach.biz/
Author: Webhaus LLC
Description: Bespoke theme for longbeach.biz, "The business intelligence desk for Long Beach, CA." Design direction A "Ledger" with the sea-glass green accent: white, full width, serif headings, mono labels, hamburger menu, dropdown contents, pillar hero, thumbnail cards, bottom tab bar on phones. Article HTML comes from niche-sites/tools/publish.py.
Version: 0.1.6
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: longbeach
*/

/* Self-hosted fonts (fonts/, latin subset, downloaded from Google Fonts; SIL OFL 1.1, see fonts/LICENSE.txt) */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/source-serif-4-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@layer tokens, base, chrome, layout, article, home;

@layer tokens {
  :root {
    --paper: #FFFFFF; --paper-2: #F5F6F8; --paper-3: #EBEEF2; --ink: #1C2430; --ink-2: #434B57; --ink-3: #6B7280;
    --navy: #1B3A5C; --navy-2: #122A45; --brass: #2EC4B6; --brass-ink: #167F76; --rule: #DDE2E8; --rule-2: #1C2430; --rule-dot: #C3CAD3;
    --section-gap: 3.8em; --section-pad: 30px; --section-after: 1.2em;   /* space above a section rule, rule to heading, heading to text */ --stamp: #A33B2E;
    --wrap: 80%; --measure: 46.5rem; --r: 4px; --shadow: 0 8px 24px rgb(28 36 48 / .08);
    --serif: "Source Serif 4", Georgia, serif; --sans: "IBM Plex Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root { --paper: #15191F; --paper-2: #1C2129; --paper-3: #242A34; --ink: #EDE8DC; --ink-2: #C2BCAE; --ink-3: #8E8A80;
            --navy: #0F2238; --navy-2: #0A1828; --brass: #3BD3C4; --brass-ink: #5FE0D3; --rule: #2E3541; --rule-2: #EDE8DC; --rule-dot: #3B4452; --stamp: #D9634F; --shadow: 0 8px 24px rgb(0 0 0 / .4); }
  }
}

@layer base {
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; color-scheme: light dark; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
  @view-transition { navigation: auto; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
  :focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 2px; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.02rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: -.005em; }
  a { color: var(--navy); } @media (prefers-color-scheme: dark) { a { color: #8FB3DA; } }
  svg { fill: none; }
  .wrap { width: var(--wrap); margin-inline: auto; }   /* 80% of the screen on desktops, a gutter below 900px */
  @media (max-width: 900px) { .wrap { width: calc(100% - 48px); } }
  @media (max-width: 600px) { .wrap { width: calc(100% - 32px); } }
  .skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--brass); color: #000; padding: 8px; z-index: 99; }
  .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .btn { display: inline-block; padding: 10px 16px; border-radius: var(--r); background: var(--navy); color: #fff; font-weight: 600; text-decoration: none; font-size: .92rem; }
  .btn-accent { background: var(--brass); color: #1C2430; }
  .btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--navy); } @media (prefers-color-scheme: dark) { .btn-ghost { color: var(--ink); border-color: var(--ink-3); } }
  /* thumbnails: the featured image when there is one; otherwise a tinted block with the section icon */
  .thumb-business { background: linear-gradient(135deg, #1B3A5C, #2C5A88); } .thumb-property { background: linear-gradient(135deg, #3B5B3C, #6A8E5F); }
  .thumb-data { background: linear-gradient(135deg, #0E4F4A, #167F76); } .thumb-visiting { background: linear-gradient(135deg, #1F5F73, #3E9AB2); }
  .thumb-map { background: linear-gradient(135deg, #0E4F4A, #2EC4B6); }
  .ic { flex: none; } .ic:not([width]) { width: 1.25em; height: 1.25em; }
  img { max-width: 100%; height: auto; }
}

@layer chrome {
  .site-head { background: var(--navy); color: #fff; border-bottom: 3px solid var(--brass); position: sticky; top: 0; z-index: 30; }
  .head-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 66px; padding: 8px 0; }
  .brand { color: #fff; text-decoration: none; display: grid; line-height: 1.05; }
  .brand-name { font: 600 1.55rem/1 var(--serif); letter-spacing: -.01em; } .brand-tld { color: var(--brass); }
  .brand-tag { font: 400 .68rem/1 var(--mono); letter-spacing: .06em; color: #fffc; margin-top: 6px; }
  @media (max-width: 420px) { .brand-tag { display: none; } }
  .head-side { display: flex; align-items: center; gap: 10px; }
  .head-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid #fff5; color: #fff; border-radius: var(--r); height: 40px; padding: 0 10px; cursor: pointer; font: 500 .86rem/1 var(--sans); }
  .head-btn svg { color: #fff; }
  .menu { position: relative; } .menu summary { list-style: none; } .menu summary::-webkit-details-marker { display: none; }
  .menu[open] .menu-btn { background: #fff; color: var(--navy); } .menu[open] .menu-btn svg { color: var(--navy); }
  .menu-panel { position: absolute; right: 0; top: 48px; width: min(92vw, 360px); background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-top: 3px solid var(--brass); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px; display: grid; max-height: calc(100vh - 90px); overflow: auto; }
  .menu-panel a { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; padding: 10px 10px; color: var(--ink); text-decoration: none; border-radius: var(--r); }
  .menu-panel a:hover, .menu-panel a.is-current { background: var(--paper-2); }
  .menu-panel a svg { color: var(--navy); } .menu-panel a.nav-map svg { color: var(--brass-ink); }
  .menu-panel span { display: grid; font: 600 .95rem/1.2 var(--serif); } .menu-panel small { font: 400 .74rem/1.3 var(--sans); color: var(--ink-3); margin-top: 2px; }
  .menu-foot { margin: 6px 0 0; padding: 10px 10px 4px; border-top: 1px solid var(--rule); display: flex; gap: 14px; font-size: .8rem; }
  @media (prefers-color-scheme: dark) { .menu-panel a svg { color: var(--ink); } }
  .site-foot { margin-top: 64px; padding: 36px 0 90px; background: var(--paper-2); border-top: 1px solid var(--rule); font-size: .9rem; color: var(--ink-2); }
  .foot-grid { display: grid; gap: 24px; } @media (min-width: 800px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } .site-foot { padding-bottom: 36px; } }
  .foot-brand { font: 600 1.3rem/1 var(--serif); color: var(--ink); margin: 0 0 8px; } .foot-brand span { color: var(--brass-ink); }
  .foot-h { font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin: 0 0 8px; }
  .foot-line { margin: 0 0 10px; } .foot-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; } .foot-links a { color: var(--ink); }
  .foot-legal { margin-top: 24px; font-size: .78rem; color: var(--ink-3); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--navy); border-top: 2px solid var(--brass); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { display: grid; justify-items: center; gap: 3px; padding: 8px 4px 7px; color: #fffb; text-decoration: none; font: 500 .62rem/1 var(--sans); letter-spacing: .03em; }
  .tabbar svg { width: 22px; height: 22px; color: #fffb; } .tabbar a.is-current { color: #fff; } .tabbar a.is-current svg { color: var(--brass); }
  @media (min-width: 900px) { .tabbar { display: none; } }
}

@layer layout {
  .main-article { padding: 0 0 60px; }
  .entry-header { padding-top: 26px; }
  /* the dropdown contents */
  .toc { margin-block: 14px 0; max-width: 56ch; }
  .toc summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--rule-2); border-radius: var(--r); font: 500 .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink); }
  .toc summary::-webkit-details-marker { display: none; }
  .toc summary::after { content: "▾"; font-size: .9rem; } .toc[open] summary::after { content: "▴"; }
  .toc ol { margin: 8px 0 0; padding: 6px 0 0; list-style: none; counter-reset: toc; border-top: 1px solid var(--rule); columns: 2; column-gap: 32px; }
  @media (max-width: 700px) { .toc ol { columns: 1; } }
  .toc li { margin: 0; padding: 6px 0 6px 26px; position: relative; border-bottom: 1px solid var(--rule); counter-increment: toc; break-inside: avoid; font-size: .9rem; }
  .toc li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 8px; font: 500 .68rem/1.4 var(--mono); color: var(--brass-ink); }
  .toc a { color: var(--ink-2); text-decoration: none; } .toc a:hover { color: var(--navy); }
  .toc-title { display: none; }
  /* pillar hero */
  .hero-head { position: relative; padding: 0; color: #fff; min-height: clamp(320px, 38vw, 460px); display: grid; align-items: end; margin-bottom: 8px; }
  .hero-img { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(135deg, #2C5A88, #1B3A5C 60%, #0E2238); }
  .hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(27 58 92 / .25) 0%, rgb(27 58 92 / .82) 55%, rgb(18 42 69 / .92) 100%); }
  .hero-credit { margin: 10px 0 0; font: 400 .66rem/1.4 var(--mono); color: #fff9; } .hero-credit a { color: #fffc; }
  .hero-over { position: relative; z-index: 1; padding: 48px 0 30px; }
  /* article hero: a solid navy band; the featured image sits on the right half, fading into the band on its left,
     so the title and the meta line stand on solid colour. Below 800px the picture stacks above the text. */
  .hero-side { min-height: clamp(300px, 30vw, 420px); align-items: center; background: var(--navy); margin-bottom: 0; }
  .hero-side .hero-img { left: 50%; width: 50%; background: none; }
  .hero-side .hero-img::after { background: linear-gradient(90deg, var(--navy) 0%, rgb(27 58 92 / .6) 32%, rgb(27 58 92 / 0) 68%); }
  .hero-side .hero-over { padding: 56px 0 52px; }
  .hero-side .hero-over > * { max-width: 55%; }
  .hero-side .hero-credit { position: absolute; right: 0; bottom: 10px; margin: 0; max-width: 48%; text-align: right; text-shadow: 0 1px 3px rgb(0 0 0 / .7); }
  @media (max-width: 800px) {
    .hero-side { display: block; min-height: 0; }
    .hero-side .hero-img { position: relative; left: 0; width: 100%; height: 220px; }
    .hero-side .hero-img::after { background: linear-gradient(180deg, rgb(27 58 92 / 0) 45%, var(--navy) 100%); }
    .hero-side .hero-over { padding: 18px 0 30px; }
    .hero-side .hero-over > * { max-width: none; }
    .hero-side .hero-credit { position: static; max-width: none; text-align: left; margin-top: 10px; }
  }
  .entry-pillar .toc { margin-top: 18px; }
}

@layer article {
  .crumbs { display: flex; gap: 8px; align-items: center; font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
  .crumbs a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .crumb-cluster { color: var(--brass-ink); } .crumb-cluster svg { color: var(--brass-ink); }
  .entry-title { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.9rem); margin-block: 12px; max-width: 30ch; }
  .entry-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--rule-2); font: 400 .8rem/1.4 var(--mono); color: var(--ink-2); }
  .meta-checked { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
  .meta-checked .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brass); }
  /* full width: prose keeps a readable measure; tables, grids, figures and cards use the whole wrap */
  .entry-content { padding-top: 36px; }
  /* everything in the body uses the whole wrap: prose, tables, grids and figures alike */
  .entry-content > p { margin-block: 0 1.1em; }
  .entry-content > p:first-of-type:not(.aff-note)::first-letter { font-family: var(--serif); font-size: 3.1em; float: left; line-height: .85; padding: 4px 8px 0 0; color: var(--navy); }
  @media (prefers-color-scheme: dark) { .entry-content > p:first-of-type:not(.aff-note)::first-letter { color: var(--brass); } }
  .entry-content h2 { font-size: 1.5rem; margin: var(--section-gap) 0 var(--section-after); padding-top: var(--section-pad); border-top: 2px dotted var(--rule-dot); }
  .entry-content h3 { font-size: 1.12rem; margin-block: 1.6em .5em; }
  .entry-content ul, .entry-content ol { padding-left: 1.3em; } .entry-content li { margin: .35em 0; }
  sup.cite { font-size: .62em; line-height: 0; vertical-align: super; margin-left: 1px; font-family: var(--mono); }
  sup.cite a { color: var(--ink-3); text-decoration: none; } sup.cite a:hover { color: var(--brass-ink); }

  /* the answer: a memo card, full width, bullets in two columns on wide screens */
  .key-facts { background: var(--paper-2); border-top: 3px double var(--rule-dot); border-bottom: 1px dotted var(--rule-dot); padding: 24px 28px 22px; margin: 0 0 40px; }
  .key-facts-label { margin: 0 0 10px; font: 500 .66rem/1 var(--mono); text-transform: uppercase; letter-spacing: .18em; color: var(--brass-ink); }
  .key-facts > p { margin: 0 0 12px; font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; max-width: 80ch; }
  .key-facts ul { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--rule); list-style: none; display: grid; gap: 7px 32px; font-size: .93rem; color: var(--ink-2); }
  @media (min-width: 1000px) { .key-facts ul { grid-template-columns: 1fr 1fr; } }
  .key-facts li { padding-left: 20px; position: relative; }
  .key-facts li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--brass); font-family: var(--mono); }

  /* diagrams and infographics: full width, caption in mono */
  .figure { margin: 2em 0; padding: 14px 16px 10px; border-top: 2px solid var(--rule-dot); border-bottom: 1px solid var(--rule); background: var(--paper); }
  .figure svg, .figure img { display: block; width: 100%; height: auto; }
  .figure figcaption { margin-top: 8px; font: 400 .74rem/1.5 var(--mono); color: var(--ink-3); }
  @media (prefers-color-scheme: dark) { .figure { background: #F7F4EC; border-radius: var(--r); } }

  .table-wrap { overflow-x: auto; margin: 1.2em 0; border-top: 2px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
  table { width: 100%; border-collapse: collapse; font-size: .92rem; }
  th, td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
  th { font: 500 .68rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); background: var(--paper-2); }
  td { font-variant-numeric: tabular-nums; } tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
  tr:last-child td { border-bottom: 0; }

  /* the decision grid: ledger rows, two columns of them on wide screens */
  .table-wrap-decision { border: 0; overflow: visible; }
  table.decision thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.decision, table.decision tbody { display: grid; gap: 0 40px; }
  @media (min-width: 1100px) { table.decision tbody { grid-template-columns: 1fr 1fr; } }
  table.decision tr { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--rule); background: transparent; }
  table.decision td { border: 0; padding: 12px 0 12px 16px; background: transparent !important; }
  table.decision td:first-child { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; padding-bottom: 2px; border-left: 3px solid var(--brass); }
  table.decision td:first-child::before { content: "If you are"; display: block; font: 500 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 5px; }
  table.decision td:last-child { padding-top: 0; color: var(--ink-2); border-left: 3px solid transparent; }

  .callout { margin: 1.4em 0; padding: 12px 16px 12px 18px; border-left: 3px solid var(--rule-2); background: var(--paper-2); }
  .callout p { margin: 0; } .callout p + p { margin-top: .6em; }
  .callout-label { display: block; font: 500 .66rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; margin-bottom: 6px; }
  .callout-good { border-color: var(--navy); } .callout-good .callout-label { color: var(--navy); }
  .callout-disagree { border-color: var(--stamp); } .callout-disagree .callout-label { color: var(--stamp); }
  .callout-heard { border-color: var(--ink-3); } .callout-heard .callout-label { color: var(--ink-2); }
  .callout-check { border-color: var(--brass); } .callout-check .callout-label { color: var(--brass-ink); }
  @media (prefers-color-scheme: dark) { .callout-good { border-color: #8FB3DA; } .callout-good .callout-label { color: #8FB3DA; } }

  ol.steps { list-style: none; padding: 0; counter-reset: step; }
  ol.steps li { position: relative; padding: 6px 0 10px 44px; counter-increment: step; border-bottom: 1px solid var(--rule); }
  ol.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 8px; font: 500 .8rem/1.4 var(--mono); color: var(--brass-ink); }

  .route { margin: 1.4em 0; padding: 12px 14px 12px 18px; list-style: none; position: relative; background: var(--paper-2); }
  .route::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px; background: var(--rule-2); }
  .route-stop { position: relative; padding: 4px 0 4px 30px; font-family: var(--serif); font-weight: 600; }
  .route-stop::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 12px; background: var(--paper); border: 3px solid var(--rule-2); border-radius: 50%; }
  .route-end::before { border-color: var(--brass); }
  .leg-text { font-size: .9rem; color: var(--ink-2); }
  .route-leg { position: relative; padding: 6px 0 6px 30px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .9rem; color: var(--ink-2); }
  .line-badge { display: inline-block; padding: 2px 8px; background: var(--navy); color: #fff; font: 500 .72rem/1.5 var(--mono); }
  .line-walk .line-badge { background: transparent; color: var(--ink); border: 1px solid var(--ink-3); }

  .faq-item { border-top: 1px solid var(--rule); }
  .faq-item:last-of-type { border-bottom: 1px solid var(--rule); }
  .faq-item summary { cursor: pointer; padding: 13px 36px 13px 0; font-weight: 600; list-style: none; position: relative; font-family: var(--serif); }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 8px; font: 300 1.5rem/1.4 var(--mono); color: var(--brass-ink); transition: rotate .2s; }
  .faq-item[open] summary::after { rotate: 45deg; }
  .faq-item summary h3 { display: inline; font-size: 1.02rem; margin: 0; }
  .faq-answer { padding: 0 0 16px; color: var(--ink-2); } .faq-answer p { margin: 0; }

  /* Related Articles: cards with the target's featured image (or a tinted block with its section icon) */
  .related-articles ul { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .related-articles li { margin: 0; }
  .related-articles li a { display: grid; grid-template-rows: 120px auto auto; align-content: start; height: 100%; text-decoration: none; color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--paper); }
  .related-articles li a:hover { box-shadow: var(--shadow); }
  .rel-img { display: grid; place-items: center; overflow: hidden; }
  .rel-img img { width: 100%; height: 100%; object-fit: cover; }
  .rel-img svg { width: 36px; height: 36px; color: #fffd; }
  .rel-t { padding: 12px 14px 4px; font: 600 .98rem/1.3 var(--serif); }
  .rel-k { padding: 0 14px 12px; font: 500 .64rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--brass-ink); }
  .sources ol { font: 400 .84rem/1.5 var(--mono); color: var(--ink-2); padding-left: 2.2em; columns: 2; column-gap: 40px; } .sources li { margin: .5em 0; break-inside: avoid; } .sources a { color: var(--ink-2); }
  @media (max-width: 900px) { .sources ol { columns: 1; } }
  .aff-note { font-size: .86rem; padding: 10px 14px; border: 1px dashed var(--brass); margin: 0 0 20px; }
}

@layer home {
  .masthead { position: relative; }
  .mast-in { position: relative; padding: 44px 0 10px; display: grid; gap: 14px; }
  .masthead.has-photo { color: #fff; background: var(--navy); overflow: hidden; margin-bottom: 8px; }
  .masthead.has-photo .mast-in { padding-bottom: 28px; }
  .mast-photo { position: absolute; inset: 0; } .mast-photo img { width: 100%; height: 100%; object-fit: cover; }
  .mast-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(27 58 92 / .55), rgb(18 42 69 / .9)); }
  .has-photo .mast-title, .has-photo .mast-sub { color: #fff; } .has-photo .mast-kicker { color: var(--brass); }
  .mast-kicker { margin: 0; font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--brass-ink); }
  .mast-title { margin: 0; font-size: clamp(1.8rem, 1rem + 2.8vw, 3rem); max-width: 30ch; font-weight: 600; }
  .mast-sub { margin: 0; max-width: 64ch; color: var(--ink-2); font-size: 1.08rem; }
  /* section row with icons */
  .sections { display: grid; gap: 10px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .sections a { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 14px; border: 1px solid var(--rule); border-top: 3px solid var(--navy); border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--paper); }
  .sections a:hover { box-shadow: var(--shadow); } .sections a svg { grid-row: 1 / 3; width: 28px; height: 28px; color: var(--navy); }
  .sections b { font: 600 1.05rem/1.2 var(--serif); } .sections small { color: var(--ink-3); font-size: .76rem; line-height: 1.3; }
  .sections .sec-map { border-top-color: var(--brass); } .sections .sec-map svg { color: var(--brass-ink); }
  @media (prefers-color-scheme: dark) { .sections a svg { color: var(--ink); } }
  .sec-h { display: flex; align-items: baseline; gap: 14px; font-size: 1.35rem; margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--rule-2); }
  .sec-h small { font: 400 .72rem/1 var(--mono); letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
  .doors { display: grid; gap: 16px; } @media (min-width: 800px) { .doors { grid-template-columns: repeat(3, 1fr); } }
  .door { display: grid; gap: 8px; padding: 0 0 16px; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--paper); text-decoration: none; color: var(--ink); }
  .door:hover { box-shadow: var(--shadow); }
  .door-thumb { height: 140px; display: grid; place-items: center; margin-bottom: 6px; overflow: hidden; } .door-thumb svg { width: 44px; height: 44px; color: #fffd; }
  .door-k { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; padding: 0 18px; } .door-t { color: var(--ink-2); font-size: .94rem; padding: 0 18px; }
  .door-go { font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--brass-ink); margin-top: 6px; padding: 0 18px; display: inline-flex; align-items: center; gap: 6px; } .door-go svg { color: var(--brass-ink); }
  .ledger-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
  .ledger-table td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .lt-date { white-space: nowrap; font: 500 .78rem/1.6 var(--mono); color: var(--brass-ink); width: 7.5em; }
  .lt-what a { color: var(--ink); font-weight: 600; text-decoration: none; font-family: var(--serif); font-size: 1.04rem; } .lt-what a:hover { color: var(--navy); }
  .lt-sec { display: none; font: 500 .66rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); text-align: right; white-space: nowrap; }
  .lt-sec svg { color: var(--ink-3); vertical-align: -2px; margin-right: 6px; }
  @media (min-width: 700px) { .lt-sec { display: table-cell; } }
  .twocol { display: grid; gap: 24px; margin-top: 44px; } @media (min-width: 900px) { .twocol { grid-template-columns: 1.1fr 1fr; } }
  .datacard { padding: 20px; border-top: 3px double var(--rule-2); background: var(--paper-2); display: grid; gap: 10px; align-content: start; }
  .dc-k { margin: 0; font: 500 .66rem/1 var(--mono); text-transform: uppercase; letter-spacing: .18em; color: var(--brass-ink); display: inline-flex; align-items: center; gap: 8px; } .dc-k svg { color: var(--brass-ink); }
  .datacard h3 { margin: 0; font-size: 1.3rem; } .dc-sub { margin: 0; color: var(--ink-2); font-size: .92rem; }
  .bars { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; align-items: end; height: 150px; padding: 10px 0 22px; border-bottom: 1px solid var(--rule-2); position: relative; }
  .bars span { position: relative; height: calc(var(--v) / 430 * 100%); background: var(--navy); border-top: 3px solid var(--brass); }
  .bars i { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font: 400 .62rem/1 var(--mono); color: var(--ink-3); font-style: normal; }
  .dc-prov { margin: 0; font: 400 .72rem/1.5 var(--mono); color: var(--ink-3); } .dc-prov a { color: var(--brass-ink); }
  .mapcard { display: grid; grid-template-rows: auto 1fr; background: var(--paper-2); border-top: 3px solid var(--navy); }
  .mapcard-art svg, .mapcard-art img { display: block; width: 100%; height: auto; }
  .mp-bg { fill: #EBEEF2; } .mp-water { fill: none; stroke: #9DB9CE; stroke-width: 28; } .mp-road { stroke: #fff; stroke-width: 6; fill: none; } .mp-thin { stroke-width: 3; }
  .mp-pier { fill: var(--navy); } .mp-pins circle { fill: var(--brass); stroke: #fff; stroke-width: 2; }
  .mp-label text { font: 600 11px var(--mono); fill: var(--ink); }
  @media (prefers-color-scheme: dark) { .mp-bg { fill: #242A34; } .mp-road { stroke: #3A4250; } .mp-water { stroke: #1F3A52; } .mp-label text { fill: #EDE8DC; } }
  .mapcard-text { padding: 16px 20px 20px; display: grid; gap: 8px; align-content: start; } .mapcard-text h3 { margin: 0; font-size: 1.3rem; display: inline-flex; align-items: center; gap: 8px; } .mapcard-text h3 svg { color: var(--navy); } .mapcard-text p { margin: 0; color: var(--ink-2); font-size: .94rem; }
  @media (prefers-color-scheme: dark) { .mapcard-text h3 svg { color: var(--ink); } }
  /* guide cards with thumbnails */
  .card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .card { display: grid; gap: 6px; padding: 0 0 14px; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); background: var(--paper); align-content: start; }
  .card:hover { box-shadow: var(--shadow); }
  .card-thumb { height: 130px; display: grid; place-items: center; margin-bottom: 6px; overflow: hidden; } .card-thumb img, .door-thumb img { width: 100%; height: 100%; object-fit: cover; } .card-thumb svg { width: 40px; height: 40px; color: #fffd; }
  .card-k { font: 500 .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--brass-ink); padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; } .card-k svg { color: var(--brass-ink); }
  .card h3 { margin: 0; font-size: 1.08rem; padding: 0 14px; } .card p { margin: 0; color: var(--ink-2); font-size: .9rem; padding: 0 14px; }
  .howwork { display: grid; gap: 18px; margin-top: 44px; align-items: start; } @media (min-width: 800px) { .howwork { grid-template-columns: 130px 1fr; } }
  .hw-stamp { width: 118px; height: 118px; border: 3px double var(--stamp); border-radius: 50%; display: grid; place-items: center; text-align: center; font: 500 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--stamp); rotate: -8deg; opacity: .85; }
  .howwork p { color: var(--ink-2); max-width: 80ch; }
}

/* ---- theme-only features: WordPress markup, search dialog, archives, pagination, plugins, print ---- */
@layer chrome {
  .admin-bar .site-head { top: 32px; }
  @media (max-width: 782px) { .admin-bar .site-head { top: 46px; } }
  .site-head { view-transition-name: site-head; }
  .head-search-btn:hover, .menu-btn:hover { background: #ffffff1f; }

  /* the search dialog with the instant-answers panel */
  .search-panel { border: 0; padding: 0; background: transparent; width: min(94vw, 640px); margin: 8vh auto auto; overflow: visible; color: var(--ink); }
  .search-panel::backdrop { background: rgb(18 42 69 / .55); }
  .search-panel .ask-form { position: relative; padding: 14px; background: var(--paper); border-top: 3px solid var(--brass); border-radius: var(--r); box-shadow: var(--shadow); }
  .search-close { position: absolute; right: 0; top: -46px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); font: 400 1.5rem/1 var(--sans); cursor: pointer; }
  .ask-box { display: flex; align-items: center; background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 3px 3px 3px 14px; }
  .ask-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.05rem; color: var(--ink); padding: 10px 0; }
  .ask-box input::placeholder { color: var(--ink-3); }
  .ask-box button { width: 44px; height: 44px; border: 0; border-radius: var(--r); background: var(--navy); color: #fff; display: grid; place-items: center; cursor: pointer; }
  .ask-box button svg { width: 22px; height: 22px; }
  .answers { display: grid; gap: 8px; margin-top: 12px; max-height: min(60vh, 520px); overflow: auto; }
  .answers[hidden] { display: none; }
  .answer { display: block; padding: 11px 14px; background: var(--paper-2); border-left: 3px solid var(--brass); border-radius: var(--r); text-decoration: none; color: var(--ink); }
  .answer:hover { background: var(--paper-3); }
  .answer-q { margin: 0 0 4px; font: 600 .98rem/1.3 var(--serif); }
  .answer-a { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
  .answer-src { margin: 6px 0 0; font: 400 .66rem/1.4 var(--mono); color: var(--ink-3); }
  .answer-src span { color: var(--brass-ink); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; margin-right: 6px; }
  .answers mark { background: transparent; color: var(--stamp); font-weight: 600; }
  .answers-none { margin: 4px 6px; color: var(--ink-2); font-size: .92rem; }
  .answers-more { margin: 0; } .answers-more button { width: 100%; border: 0; background: transparent; color: var(--navy); font: 600 .9rem var(--sans); padding: 10px; cursor: pointer; text-align: left; }
  @media (prefers-color-scheme: dark) { .answers-more button { color: #8FB3DA; } }

  /* archives, search results, 404 */
  .listing { padding-top: 28px; padding-bottom: 20px; }
  .listing-header { max-width: var(--measure); margin-bottom: 22px; }
  .listing-header h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); margin: 0 0 8px; }
  .listing-intro { color: var(--ink-2); } .listing-intro p { margin: 0 0 .6em; }
  .listing-pillar .btn { margin-top: 10px; }
  .search-panel-inline { display: flex; gap: 8px; max-width: 560px; margin: 12px 0; }
  .search-panel-inline input { flex: 1; padding: 11px 14px; font: inherit; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--paper); color: var(--ink); }
  .search-panel-inline .btn { border: 0; cursor: pointer; font-family: inherit; }
  .qlist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .qlist a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--rule-2); border-radius: var(--r); color: var(--ink); text-decoration: none; font: 600 .95rem var(--serif); }
  .qlist a:hover { background: var(--paper-2); } .qlist svg { color: var(--navy); } @media (prefers-color-scheme: dark) { .qlist svg { color: var(--ink); } }
  .pagination { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px; font: 500 .8rem/1 var(--mono); }
  .pagination a, .pagination span { padding: 9px 13px; border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none; color: var(--ink); }
  .pagination .current { background: var(--navy); border-color: var(--navy); color: #fff; }
  .pagination a:hover { background: var(--paper-2); }
  .main-listing { padding-bottom: 40px; }
}

@layer article {
  /* the featured photo after the In brief box */
  .article-photo figcaption { margin-top: 6px; font: 400 .72rem/1.5 var(--mono); color: var(--ink-3); }
  .photo-credit a { color: inherit; }
  /* a photo or diagram the publisher put in the body: .figure (above) gives it the full-width treatment */
  .figure.article-photo img { border-radius: 0; max-height: none; }
  .article-photo-missing { font: 400 .8rem var(--mono); color: var(--stamp); }
  .wp-block-image { margin-inline: 0; }
  .alignleft, .alignright, .aligncenter { display: block; margin: 1.2em auto; }
  .wp-caption { max-width: 100%; } .wp-caption-text { font: 400 .74rem/1.5 var(--mono); color: var(--ink-3); }
  .entry-content img { max-width: 100%; height: auto; }
  .entry-content > h2:first-child { margin-top: 0; }
  .stop-note { font: 500 .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--stamp); margin-left: 8px; }
  .route-change::before { border-color: var(--stamp) !important; }
  .entry-content a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .entry-content .wp-block-table { margin: 1.2em 0; }
  /* the Niche Map plugin on /long-beach-map/: full width, no contents dropdown */
  .has-map .entry-content > * { max-width: none; }
  .has-map .niche-map, .has-map [id^="niche-map"] { --blue: var(--navy); }
}

/* the hero's text colors: a later layer than .article so they beat .crumbs, .entry-meta and .meta-checked */
@layer home {
  .hero-over .crumbs, .hero-over .crumbs a, .hero-over .crumb-cluster { color: #fffc; }
  .hero-over .crumb-cluster svg { color: var(--brass); }
  .hero-over .entry-title { color: #fff; max-width: 24ch; margin-bottom: 14px; }
  .hero-over .entry-meta { color: #fffd; border-bottom: 0; margin: 0; padding: 0; }
  .hero-over .meta-checked { color: #fff; }
  .hero-over .meta-by a { color: #fff; }
}


/* tours (0.1.5): product pages from the Viator feed; see inc/tours.php */
@layer article {
  .tour-card { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; margin: 16px 0 28px; padding: 14px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow); }
  @media (min-width: 560px) { .tour-card { grid-template-columns: 180px 1fr; gap: 18px; padding: 16px; } }
  .tour-card-pic { display: block; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--paper-3); }
  .tour-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tour-card-body { display: grid; gap: 5px; }
  .tour-card-k { margin: 0; font: 500 .66rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
  .tour-card-name { margin: 0; font: 600 1.05rem/1.35 var(--serif); } .tour-card-name a { color: var(--ink); text-decoration: none; } .tour-card-name a:hover { color: var(--navy); }
  .tour-card-price { margin: 0; font-size: .98rem; color: var(--ink); } .tour-card-asof, .tour-card-rating { color: var(--ink-3); font: 400 .78rem/1.4 var(--mono); }
  .btn.tour-card-btn { justify-self: start; margin-top: 4px; background: var(--brass); color: #1C2430; white-space: nowrap; } .btn.tour-card-btn:hover { background: var(--brass-ink); color: #fff; }
  .tour-card-btn::after, .tour-btn::after { content: " \2197"; }
  .tour-noimg { display: block; background: var(--paper-3); }
  .tour-grid { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
  @media (min-width: 700px) { .tour-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1100px) { .tour-grid { grid-template-columns: repeat(4, 1fr); } .tour-more .tour-grid { grid-template-columns: repeat(3, 1fr); } }
  .entry-content .tour-grid li { margin: 0; padding: 0; }
  .tour-tile a { display: flex; flex-direction: column; height: 100%; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); }
  .tour-tile a:hover { box-shadow: var(--shadow); border-color: var(--brass); }
  .tour-tile-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-3); }
  .tour-tile-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; flex: 1; }
  .tour-tile-name { font: 600 .96rem/1.3 var(--serif); flex: 1; } .tour-tile-price { color: var(--brass-ink); font: 500 .8rem/1.4 var(--mono); }
  .tour .hero-side .hero-over > * { max-width: none; }
  .tour-top { display: grid; gap: 16px; margin: 20px 0 28px; padding: 16px; background: var(--paper-2); border-radius: var(--r); }
  @media (min-width: 760px) { .tour-top { grid-template-columns: 360px 1fr; align-items: center; gap: 26px; padding: 22px; } }
  .tour-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
  .tour-price { margin: 0 0 12px; font-size: .92rem; line-height: 1.45; color: var(--ink-3); } .tour-price strong { font: 600 1.9rem/1 var(--serif); color: var(--ink); margin-right: 4px; }
  .tour-rating { margin: 0 0 14px; font-size: .92rem; color: var(--ink-3); } .tour-rating strong { color: var(--ink); }
  .tour-editorial { margin-top: 22px; } .tour-editorial h2 { margin-top: 0; }
  .tour-editorial .nprod-editorial > p:first-of-type { font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; font-weight: 600; }
  .tour-operator { color: var(--ink-2); }
  .tours-home .listing-intro { max-width: var(--measure); } .tours-block { margin: 36px 0; } .tours-about { max-width: var(--measure); margin: 36px 0; }
  .type-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
  @media (min-width: 800px) { .type-tiles { grid-template-columns: repeat(4, 1fr); } }
  .type-tiles a { display: grid; gap: 2px; text-decoration: none; color: var(--ink); background: var(--paper-2); border-left: 4px solid var(--brass); border-radius: var(--r); padding: 12px 14px; }
  .type-tiles a:hover { background: var(--paper-3); } .type-name { font: 600 .98rem/1.3 var(--serif); } .type-count { color: var(--ink-3); font: 400 .74rem/1.4 var(--mono); }
  .tour-search { max-width: 560px; }
  .tours-band { margin: 40px auto; } .band-more { margin: 8px 0 24px; }
  @media (max-width: 899px) { .tours-band .tour-grid .tour-tile:nth-child(n+5) { display: none; } }
}

@media print {
  .site-head, .tabbar, .toc, .search-panel, .skip, .related-articles, .pagination { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { width: 100%; }
  .hero-head { min-height: 0; color: #000; } .hero-img { display: none; } .hero-over .entry-title, .hero-over .entry-meta, .hero-over .meta-checked, .hero-over .crumbs, .hero-over .crumbs a { color: #000; }
  .entry-content a { color: #000; text-decoration: none; }
  .entry-content a[href^="http"]:after { content: " (" attr(href) ")"; font-size: .8em; }
  .sources a:after, sup.cite a:after { content: none !important; }
  .site-foot { margin-top: 24px; padding: 12px 0; background: #fff; }
  .table-wrap, .figure, .key-facts, .callout { break-inside: avoid; }
}