/*
Theme Name: Andre Luu
Theme URI: https://andreluu.com
Author: Andre Luu
Description: Mobile-first, image-first theme for andreluu.com. Vanilla CSS, no jQuery, no page builder.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: andreluu
*/

/* ---------- tokens ---------- */
:root {
  /* Vietnamese learning site: feng shui palette (research/08, owner approved 2026-11-03).
     Metal ground feeds Water text; Wood and Fire live in the articles and photographs, never in colour. */
  --bg: #FFFFFF;           /* Metal: pure white ground */
  --bg-2: #F2F5F9;         /* Metal with a Water tint: panels, cards */
  --bg-3: #E9EDF3;         /* image placeholder */
  --line: #D6DCE4;         /* Metal: cool 1px rules */
  --text: #0B1A33;         /* Water: brand navy reading text (17.4:1) */
  --text-2: #4B586B;       /* Water: secondary text (7.2:1) */
  --accent: #1A4D8F;       /* Water: links (8.4:1) */
  --button: #0B1A33;       /* Water: buttons, white text */
  --book: #874322;         /* Earth: burnt clay, booking only, one per screen (7.35:1) */
  --accent-2: #C9A24B;     /* Metal: brand gold, small graphic marks only */
  --radius: 4px;           /* cards square-ish; buttons 6px */
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 10px;
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-h: 64px;
  color-scheme: light;
}
@media (min-width: 900px) { :root { --header-h: 76px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 clamp(18px, 17px + .3vw, 20px)/1.75 var(--font); overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.35rem); }
p { margin: 0 0 1.1em; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 1000; background: var(--accent); color: #fff; padding: 8px 12px; border-radius: 6px; }
.skip-link:focus { left: 8px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--line); }
/* no filter/transform on .site-header: the mobile drawer is position:fixed inside it and needs the viewport as containing block */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); }
.logo img { height: clamp(34px, 5vw, 46px); width: auto; }
.nav-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); color: var(--text); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.nav-toggle .bars { width: 20px; height: 14px; position: relative; display: block; }
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.nav-toggle .bars::before { top: 0; } .nav-toggle .bars span { top: 6px; } .nav-toggle .bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .bars span { opacity: 0; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--text); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.site-nav a:hover, .site-nav .current-menu-item > a, .site-nav .current-menu-ancestor > a { color: var(--accent); text-decoration: none; }
.nav-search { display: flex; gap: 6px; }
.nav-search input { background: var(--bg-3); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; width: 100%; }
.nav-search button { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 700; cursor: pointer; }

/* mobile: drawer */
@media (max-width: 899px) {
  .site-nav { position: fixed; top: var(--header-h); right: 0; bottom: 0; left: 0; z-index: 99; background: var(--bg-2); padding: 20px var(--gutter) 40px; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform .25s ease, visibility 0s .25s; visibility: hidden; }
  .site-nav.is-open { transition: transform .25s ease; }
  .site-nav.is-open { transform: none; visibility: visible; }
  .site-nav > ul > li { border-bottom: 1px solid var(--line); }
  .site-nav > ul > li > a { display: block; padding: 14px 0; font-size: 1rem; }
  .site-nav .sub-menu { padding: 0 0 10px 14px; }
  .site-nav .sub-menu a { display: block; padding: 8px 0; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-2); }
  .nav-search { margin-top: 20px; }
  body.nav-open { overflow: hidden; }
}
/* desktop: horizontal with hover dropdowns */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; align-items: center; gap: 24px; }
  .site-nav > ul { display: flex; gap: 22px; }
  .site-nav > ul > li { position: relative; }
  .site-nav > ul > li > a { display: block; padding: 10px 0; }
  .site-nav .sub-menu { position: absolute; top: 100%; left: -12px; min-width: 240px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
  .site-nav li:hover > .sub-menu, .site-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
  .site-nav .sub-menu a { display: block; padding: 8px 12px; border-radius: 6px; text-transform: none; letter-spacing: 0; font-weight: 500; }
  .site-nav .sub-menu a:hover { background: var(--bg-3); }
  .nav-search input { width: 160px; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: clamp(380px, 62vh, 680px); display: grid; align-items: end; isolation: isolate; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15,17,19,.95) 0%, rgba(15,17,19,.35) 50%, rgba(15,17,19,.1) 100%); }
.hero .wrap { padding-block: clamp(28px, 6vw, 64px); }
.hero .kicker { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: 8px; }
.hero h1 { max-width: 16ch; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.hero p { max-width: 55ch; color: var(--text); font-size: clamp(1rem, .95rem + .4vw, 1.2rem); }
.btn { display: inline-block; background: var(--accent); color: #fff; font-weight: 700; padding: 12px 20px; border-radius: 999px; border: 0; cursor: pointer; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- sections / cards ---------- */
.section { padding-block: clamp(36px, 6vw, 72px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-head a { font-weight: 600; white-space: nowrap; }
.grid { display: grid; gap: clamp(16px, 2.5vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s; }
.card:hover { transform: translateY(-2px); border-color: #C8C6C2; box-shadow: 0 10px 30px rgba(42,36,32,.08); }
.card .thumb { aspect-ratio: 3 / 2; background: var(--bg-3); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .cat { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 700; }
.card h3 { margin: 0; }
.card h3 a { color: var(--text); }
.card h3 a:hover { color: var(--accent); text-decoration: none; }
.card .excerpt { color: var(--text-2); font-size: .95rem; margin: 0; }
.card .meta { color: var(--text-2); font-size: .8rem; margin-top: auto; }
.card.featured { grid-column: 1 / -1; }
@media (min-width: 700px) { .card.featured { flex-direction: row; } .card.featured .thumb { flex: 1 1 58%; aspect-ratio: auto; min-height: 320px; } .card.featured .body { flex: 1 1 42%; justify-content: center; padding: 28px; } .card.featured h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); } }

/* ---------- series list (numbered tutorials) ---------- */
.series { counter-reset: s; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.series a { counter-increment: s; display: flex; gap: 14px; align-items: center; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
.series a::before { content: counter(s, decimal-leading-zero); color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.series a:hover { border-color: var(--accent); text-decoration: none; }

/* ---------- CTA band / newsletter ---------- */
.band { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px, 4vw, 48px); display: grid; gap: 20px; }
@media (min-width: 800px) { .band { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.band h2 { margin-bottom: .3em; }
.band p { color: var(--text-2); margin: 0; }
.newsletter form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter input[type=email] { flex: 1 1 220px; background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 12px 14px; border-radius: 999px; }
.newsletter .note { font-size: .8rem; color: var(--text-2); margin-top: 8px; }

/* ---------- article ---------- */
.article-head { padding-block: clamp(24px, 5vw, 56px) 16px; }
.article-head .cat { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .8rem; }
.article-head .meta { color: var(--text-2); font-size: .9rem; }
.article-hero img { width: 100%; max-height: 72vh; object-fit: cover; border-radius: var(--radius); }
.prose { max-width: 760px; margin-inline: auto; font-size: clamp(1.02rem, 1rem + .25vw, 1.15rem); }
.prose img { border-radius: 8px; margin: 1.4em auto; }
.prose figure { margin: 1.4em 0; } .prose figcaption { color: var(--text-2); font-size: .85rem; text-align: center; margin-top: 6px; }
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose blockquote { border-left: 3px solid var(--accent); margin: 1.4em 0; padding: .2em 0 .2em 1em; color: var(--text-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.prose iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; border-radius: 8px; }
.prose .wp-caption { max-width: 100%; }
.prose .alignleft, .prose .alignright { float: none; margin-inline: auto; }
@media (min-width: 700px) { .prose .alignleft { float: left; margin: .4em 1.4em 1em 0; max-width: 48%; } .prose .alignright { float: right; margin: .4em 0 1em 1.4em; max-width: 48%; } }
.share { display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0; }
.share a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; color: var(--text); font-size: .9rem; }
.share a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.post-nav { display: grid; gap: 12px; grid-template-columns: 1fr; margin-block: 32px; }
@media (min-width: 600px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a { display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; color: var(--text); }
.post-nav a span { display: block; font-size: .75rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .08em; }
@media (min-width: 600px) { .post-nav .next { text-align: right; } }
.author-box { display: flex; gap: 16px; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-block: 32px; }
.author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.author-box p { margin: 0; color: var(--text-2); font-size: .95rem; }

/* ---------- archive / page ---------- */
.page-title { padding-block: clamp(24px, 5vw, 48px) 8px; }
.page-title p { color: var(--text-2); max-width: 65ch; }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-block: 40px; }
.pagination .page-numbers { border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; color: var(--text); }
.pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination a:hover { border-color: var(--accent); text-decoration: none; }

/* ---------- comments (minimal) ---------- */
.comments { max-width: 760px; margin: 40px auto; }
.comment-list { list-style: none; padding: 0; } .comment-list .comment { border-top: 1px solid var(--line); padding: 16px 0; }
.comment-form textarea, .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url] { width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); padding: 10px; border-radius: 8px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: clamp(40px, 8vw, 96px); padding-block: 40px 28px; color: var(--text-2); font-size: .92rem; }
.site-footer .cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.site-footer h4 { color: var(--text); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 6px; }
.site-footer a { color: var(--text-2); } .site-footer a:hover { color: var(--accent); }
.site-footer .legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .82rem; }
.social { display: flex; gap: 10px; }
.social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); }
.social a:hover { border-color: var(--accent); color: var(--accent); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- WP core alignment & embeds ---------- */
.alignwide { width: min(100% - 2 * var(--gutter), 1000px); margin-inline: auto; }
.alignfull { width: 100%; }
.wp-block-image img { height: auto; }

/* ---------- prints zone (English, buyer-facing) ---------- */
.zone-prints { --accent: #c9a96e; }
.zone-prints .site-nav a { text-transform: none; letter-spacing: 0; font-size: .95rem; }
.prints-intro h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); }
.prints-grid .card .thumb { aspect-ratio: 1 / 1; background: var(--bg-2); display: grid; place-items: center; padding: 10%; }
.prints-grid .card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.print-page .print-hero { margin-block: clamp(16px, 3vw, 32px) 24px; display: grid; place-items: center; }
.print-page .print-hero img { max-height: 78vh; width: auto; max-width: 100%; height: auto; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.print-layout { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .print-layout { grid-template-columns: 1.4fr 1fr; align-items: start; } .print-buy { position: sticky; top: calc(var(--header-h) + 16px); } }
.print-main .kicker { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; }
.print-story { max-width: 62ch; margin: 0; }
.facts { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 28px 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); }
.facts dd { margin: 0; color: var(--text); }
.print-page .ref { color: var(--text-2); font-size: .8rem; }
.print-page .ref a { color: var(--text-2); }
.print-buy { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.print-buy h2 { font-size: 1.1rem; margin-bottom: 12px; }
.sizes { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.sizes td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.sizes td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.print-buy .btn { display: block; text-align: center; margin: 12px 0 16px; }
.assurance { list-style: none; padding: 0; margin: 0 0 12px; color: var(--text-2); font-size: .9rem; }
.assurance li { padding-left: 18px; position: relative; margin-bottom: 6px; }
.assurance li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }
.print-buy .note { color: var(--text-2); font-size: .85rem; margin: 0; }
.wordmark { font-weight: 800; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); letter-spacing: .02em; color: #fff; white-space: nowrap; }
.wordmark span { font-weight: 400; color: var(--text-2); }
.site-footer .wordmark { font-size: 1.1rem; }

/* ---------- Vietnamese site: light reading design ---------- */
.site-header { background: rgba(255,255,255,.97); }
.site-nav a { color: var(--text); }
.site-nav a:hover, .site-nav .current-menu-item > a, .site-nav .current-menu-ancestor > a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-2); text-decoration-thickness: 2px; text-underline-offset: 6px; }
a { color: var(--accent); text-decoration-color: rgba(11,26,51,.35); }
.hero h1, .hero p { color: #fff; }
.hero .kicker { color: #fff; opacity: .9; }
.hero .btn { background: #fff; color: var(--accent); }
.hero .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.card { background: var(--bg); }
.card .cat { color: var(--accent); }
.article-head .cat, .card .cat { letter-spacing: .08em; }
.prose { font-size: clamp(18px, 17px + .35vw, 20px); line-height: 1.8; max-width: 70ch; }
.prose a { text-decoration: underline; }
.prose blockquote { border-left-color: var(--accent-2); }
.series a { background: var(--bg); }
.series a::before { color: var(--accent); }
.series a:hover { border-color: var(--accent); }
.newsletter input[type=email] { background: #fff; color: var(--text); }
.site-footer { background: var(--bg-2); }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--accent); }
.card .meta, .article-head .meta { font-size: 15px; }
.card .excerpt { font-size: 16px; }
.brand-lockup { height: clamp(34px, 3vw + 18px, 46px); width: auto; display: block; }
.brand-lockup-stacked { width: 128px; height: auto; display: block; margin-bottom: 8px; }

/* Vietnamese menu: sentence case, and the drawer is used until there is room for the full bar */
.site-nav a { text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 600; }
@media (min-width: 900px) and (max-width: 1179px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: fixed; top: var(--header-h); right: 0; bottom: 0; left: 0; z-index: 99; background: var(--bg); padding: 20px var(--gutter) 40px; overflow-y: auto; transform: translateX(100%); visibility: hidden; display: block; transition: transform .25s ease, visibility 0s .25s; }
  .site-nav.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
  .site-nav > ul { display: block; }
  .site-nav > ul > li { border-bottom: 1px solid var(--line); }
  .site-nav > ul > li > a { padding: 14px 0; }
  .site-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 10px 14px; }
  .nav-search { margin-top: 20px; }
  .nav-search input { width: 100%; }
}

/* ---------- feng shui form rules for the Vietnamese site (research/08 D) ---------- */
body:not(.zone-prints) .btn { background: var(--button); color: #fff; border-radius: 6px; }
body:not(.zone-prints) .btn.book, body:not(.zone-prints) .book-cta { background: var(--book); color: #fff; border-radius: 6px; }
body:not(.zone-prints) .card, body:not(.zone-prints) .band, body:not(.zone-prints) .post-nav a, body:not(.zone-prints) .author-box, body:not(.zone-prints) .series a { border-radius: 2px; }
body:not(.zone-prints) .share a, body:not(.zone-prints) .pagination .page-numbers, body:not(.zone-prints) .nav-search input, body:not(.zone-prints) .nav-search button { border-radius: 6px; }
body:not(.zone-prints) a:visited { color: inherit; }
body:not(.zone-prints) .prose a, body:not(.zone-prints) .section-head a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body:not(.zone-prints) .prose a:hover, body:not(.zone-prints) .section-head a:hover { color: var(--text); }
body:not(.zone-prints) .pagination .current { background: var(--button); border-color: var(--button); }
body:not(.zone-prints) .series a::before { color: var(--accent-2); }
body:not(.zone-prints) .site-nav a:hover { color: var(--text); }
body:not(.zone-prints) .site-footer { background: var(--bg-2); }
.book-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; white-space: nowrap; }
.book-cta:hover { filter: brightness(1.1); text-decoration: none; color: #fff; }
.book-cta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); }
.site-header .wrap { gap: 12px; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (max-width: 479px) { .book-cta { padding: 8px 12px; font-size: 14px; } }
@media (min-width: 1180px) { body:not(.zone-prints) .header-actions { order: 3; margin-left: 0; } body:not(.zone-prints) .site-nav { margin-left: auto; } }

/* ---------- Phototrip page ---------- */
.trip-hero { position: relative; min-height: clamp(340px, 55vh, 600px); display: grid; align-items: end; isolation: isolate; }
.trip-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.trip-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11,26,51,.85), rgba(11,26,51,.15) 60%); }
.trip-hero .wrap { padding-block: clamp(28px, 6vw, 64px); color: #fff; }
.trip-hero h1, .trip-hero p { color: #fff; max-width: 34ch; }
.trip-hero p { max-width: 55ch; }
.trip-hero .kicker { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.trip-cols { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.dots { list-style: none; padding: 0; margin: 0; }
.dots li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.dots li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); }
.steps ol { padding-left: 1.3em; margin: 0; }
.steps li { margin-bottom: 12px; }
.steps li::marker { color: var(--accent-2); font-weight: 700; }
.trip-card { position: relative; }
.trip-card .thumb { aspect-ratio: 3 / 2; }
.trip-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.trip-card .btn { align-self: flex-start; margin-top: 8px; }
.avail { display: inline-flex; align-items: center; gap: 8px; color: var(--book); font-weight: 700; font-size: 15px; }
.avail::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--book); }
.sample-tag { position: absolute; top: 10px; left: 10px; z-index: 2; background: #fff; color: var(--text); font-size: 13px; font-weight: 700; padding: 4px 8px; border: 1px solid var(--line); }
.trip-note { color: var(--text-2); margin-top: 16px; }
.places { display: grid; gap: clamp(12px, 2vw, 20px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.place { display: block; color: var(--text); text-decoration: none; }
.place-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); }
.place-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.place:hover .place-img img { transform: scale(1.03); }
.place-name { display: block; padding-top: 8px; font-weight: 600; }
.trip-form-wrap { max-width: 860px; }
.form-grid { display: grid; gap: 14px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-bottom: 14px; }
.trip-form label { display: grid; gap: 6px; font-weight: 600; font-size: 16px; }
.trip-form label.full { margin-bottom: 16px; }
.trip-form input, .trip-form textarea { font: inherit; font-weight: 400; color: var(--text); background: #fff; border: 1px solid #9AA6B5; border-radius: 4px; padding: 12px 14px; }
.trip-form input:focus, .trip-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.trip-form .hp { position: absolute; left: -9999px; }
.form-msg { padding: 12px 14px; border-left: 3px solid var(--accent-2); background: var(--bg-2); }
.form-msg.err { border-left-color: var(--book); }
.contact-alt { margin-top: 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.trip-hero .hero-btn { background: #fff; color: var(--text); }
/* one clay object per screen: header button, availability dot, form submit */
@media (min-width: 1180px) { body:not(.zone-prints) .site-nav a { white-space: nowrap; } body:not(.zone-prints) .site-nav > ul { gap: 18px; } body:not(.zone-prints) .nav-search input { width: 130px; } }

/* ==========================================================================
   Vietnamese site on the prints design system (owner, 2026-11-03).
   Same paper, ink, gold marks, spacing and minimal layout as the prints zone.
   Differences only: Lora headings (Cinzel has no Vietnamese accents), navy links, clay booking button.
   ========================================================================== */
body:not(.zone-prints) {
  --bg: #FAFAF7;            /* brand paper (Metal/Earth) */
  --bg-2: #FFFFFF;          /* panels */
  --bg-3: #EEEDEA;          /* image placeholder */
  --line: #DDDCD9;          /* ink tint */
  --text: #2A2420;          /* brand warm ink */
  --text-2: #645F5B;        /* ink tint, 6:1 */
  --accent: #0B1A33;        /* brand navy: links (Water, wealth for Earth) */
  --button: #2A2420;        /* ink buttons, as in prints */
  --book: #874322;          /* burnt clay: booking only, one per screen */
  --accent-2: #C9A24B;      /* gold: small marks only */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Lora", Georgia, serif;
  background: var(--bg); color: var(--text); font-family: var(--font);
}
body:not(.zone-prints) h1, body:not(.zone-prints) h2, body:not(.zone-prints) h3, body:not(.zone-prints) h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; color: var(--text); }
body:not(.zone-prints) h1 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem); line-height: 1.2; }
body:not(.zone-prints) .site-header { background: rgba(250,250,247,.96); }
body:not(.zone-prints) .btn { background: var(--button); color: #FAFAF7; border-radius: 2px; letter-spacing: .02em; }
body:not(.zone-prints) .btn:hover { background: #3E3632; filter: none; }
body:not(.zone-prints) .btn.book, body:not(.zone-prints) .book-cta { background: var(--book); color: #fff; border-radius: 2px; }
body:not(.zone-prints) .hero .btn, body:not(.zone-prints) .trip-hero .hero-btn { background: #FAFAF7; color: var(--text); }
body:not(.zone-prints) .hero .btn.ghost { background: transparent; color: #fff; }
/* cards like the prints tiles: no box, photo then text */
body:not(.zone-prints) .card { background: transparent; border: 0; border-radius: 0; }
body:not(.zone-prints) .card:hover { transform: none; box-shadow: none; }
body:not(.zone-prints) .card .thumb { background: var(--bg-3); }
body:not(.zone-prints) .card .body { padding: 14px 2px 0; }
body:not(.zone-prints) .card h3 { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; }
body:not(.zone-prints) .card .cat, body:not(.zone-prints) .article-head .cat { color: var(--text-2); font-weight: 600; letter-spacing: .14em; font-size: 13px; }
body:not(.zone-prints) .card.featured { background: transparent; }
body:not(.zone-prints) .band, body:not(.zone-prints) .author-box, body:not(.zone-prints) .post-nav a, body:not(.zone-prints) .series a { background: var(--bg-2); border-radius: 2px; }
body:not(.zone-prints) .section[style*="--bg-2"] { background: var(--bg-2) !important; }
body:not(.zone-prints) .site-footer { background: var(--bg-3); }
body:not(.zone-prints) .site-nav a:hover, body:not(.zone-prints) .site-nav .current-menu-item > a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-2); text-decoration-thickness: 2px; text-underline-offset: 6px; }
body:not(.zone-prints) .trip-hero::after { background: linear-gradient(to top, rgba(42,36,32,.82), rgba(42,36,32,.1) 60%); }
body:not(.zone-prints) .trip-form input, body:not(.zone-prints) .trip-form textarea { border-color: #B9B5AF; border-radius: 2px; }
body:not(.zone-prints) .hero h1, body:not(.zone-prints) .hero p, body:not(.zone-prints) .hero .kicker,
body:not(.zone-prints) .trip-hero h1, body:not(.zone-prints) .trip-hero p, body:not(.zone-prints) .trip-hero .kicker { color: #fff; }
body:not(.zone-prints) .hero h1, body:not(.zone-prints) .trip-hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.35); }
body:not(.zone-prints) .card.featured .body { justify-content: center; }
/* One paper everywhere (owner, 2026-11-03, feng shui: no beige, no pure-white panels). Panels are an ink tint of the paper. */
body:not(.zone-prints) { --bg-2: #F3F2EF; }
body:not(.zone-prints) .newsletter input[type=email] { background: #FAFAF7; }
body:not(.zone-prints) .site-header, .zone-prints .site-header { background: #FAFAF7; }
/* Header and footer share the frame grey #EEEDEA on both sites (owner, 2026-11-03): Metal, ink tint, not beige. */
body:not(.zone-prints) .site-header, .zone-prints .site-header { background: #EEEDEA; border-bottom-color: #DDDCD9; }
body:not(.zone-prints) .site-footer, .zone-prints .site-footer { background: #EEEDEA; }
@media (max-width: 1179px) { body:not(.zone-prints) .site-nav { background: #EEEDEA; } }
@media (max-width: 899px) { .zone-prints .site-nav { background: #EEEDEA; } }
body:not(.zone-prints) .nav-search input { background: #FAFAF7; }

/* ---------- navigation per research/12 (owner, 2026-11-03) ---------- */
body:not(.zone-prints) .site-header { position: static; }                       /* header not sticky */
.site-nav li:hover > .sub-menu { opacity: 0; visibility: hidden; }              /* no hover menus */
.site-nav li.open > .sub-menu, .site-nav li:focus-within > .sub-menu.kb { opacity: 1; visibility: visible; transform: none; }
.sub-toggle { background: none; border: 0; padding: 4px 6px; margin-left: 2px; cursor: pointer; color: inherit; vertical-align: middle; }
.sub-toggle::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }   /* round, no pointed caret (feng shui) */
.menu-item-has-children.open > .sub-toggle::before { background: currentColor; }
.site-nav .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
.drawer-extra { display: none; }
.nav-row { display: none; }
@media (max-width: 1179px) {
  body:not(.zone-prints) .site-nav { display: flex; flex-direction: column; }
  body:not(.zone-prints) .site-nav .nav-search { order: -1; margin: 0 0 16px; }
  body:not(.zone-prints) .site-nav .sub-menu { display: none; width: 100%; }
  body:not(.zone-prints) .site-nav li.open > .sub-menu { display: block; }
  body:not(.zone-prints) .drawer-extra { display: block; list-style: none; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
  body:not(.zone-prints) .drawer-extra a { display: block; padding: 12px 0; font-weight: 600; }
}
@media (min-width: 480px) and (max-width: 1179px) {
  body:not(.zone-prints) .nav-row { display: block; border-top: 1px solid var(--line); }
  body:not(.zone-prints) .nav-row ul { list-style: none; margin: 0 auto; padding: 10px var(--gutter); display: flex; gap: 22px; justify-content: center; flex-wrap: nowrap; }
  body:not(.zone-prints) .nav-row a { color: var(--text); font-weight: 600; font-size: 16px; white-space: nowrap; text-decoration: none; }
  body:not(.zone-prints) .nav-row .current-menu-item a, body:not(.zone-prints) .nav-row a:hover { text-decoration: underline; text-decoration-color: var(--accent-2); text-decoration-thickness: 2px; text-underline-offset: 6px; }
}
/* prints zone: two links stay visible at every width, no drawer */
@media (max-width: 899px) {
  .zone-prints .nav-toggle { display: none; }
  .zone-prints .site-nav { position: static; transform: none; visibility: visible; background: none; padding: 0; overflow: visible; }
  .zone-prints .site-nav > ul { display: flex; gap: 16px; }
  .zone-prints .site-nav > ul > li { border: 0; }
  .zone-prints .site-nav > ul > li > a { padding: 0; font-size: 15px; }
  .zone-prints .site-header .wrap { flex-wrap: wrap; height: auto; padding-block: 10px; }
}

/* ---------- hubs, course table of contents, sitemap ---------- */
.crumbs { font-size: 15px; color: var(--text-2); margin-bottom: 6px; }
.crumbs a { color: var(--text-2); }
.course-toc { display: grid; gap: 28px 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin: 8px 0 48px; }
.course-part h2 { font-size: 1.2rem; margin-bottom: 8px; }
.course-part h2 a { color: var(--text); text-decoration: none; }
.course-part ol { margin: 0; padding-left: 1.4em; }
.course-part li { margin-bottom: 6px; }
.course-part li::marker { color: var(--accent-2); font-weight: 700; }
.hub-topics ul { list-style: none; padding: 0; margin: 8px 0 40px; display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.hub-topics a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 500; }
.hub-topics a:hover { color: var(--accent); }
.hub-topics .n, .sitemap-cols .n { color: var(--text-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.hub-extra { margin-bottom: 40px; }
.sitemap-cols { display: grid; gap: 32px 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.sitemap-cols h2 { font-size: 1.15rem; }
.sitemap-cols ul { padding-left: 1.1em; margin: 0 0 20px; }
.sitemap-cols li { margin-bottom: 4px; }

/* ---------- in-article wayfinding ---------- */
.breadcrumbs ol { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; color: var(--text-2); }
.breadcrumbs li + li::before { content: "·"; margin-right: 8px; color: var(--accent-2); font-weight: 700; }
.breadcrumbs a { color: var(--text-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--text); }
@media (max-width: 599px) { .breadcrumbs li.far { display: none; } .breadcrumbs li:last-child { display: none; } }
.chips { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 2px; font-size: 15px; color: var(--text); text-decoration: none; background: var(--bg); }
.chips a:hover { border-color: var(--text); }
.chips .k { color: var(--text-2); }
.course-nav { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 40px 0 8px; }
@media (min-width: 600px) { .course-nav { grid-template-columns: 1fr 1fr; } .course-nav .next { text-align: right; } }
.course-nav a { display: block; padding: 14px 16px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); text-decoration: none; font-weight: 600; font-size: 17px; }
.course-nav a span { display: block; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.course-nav a:hover { border-color: var(--text); }
.course-index { margin: 0 0 24px; }
.site-nav > .drawer-extra { display: none; }
@media (max-width: 1179px) { body:not(.zone-prints) .site-nav > .drawer-extra { display: block; } }

/* ---------- old article shortcodes, restyled ---------- */
.table-wrap { overflow-x: auto; margin: 1.4em 0; }
.table-wrap table { display: table; min-width: 100%; }
.prose th { background: var(--bg-2); font-weight: 600; }
.legacy-tab { margin: 1.2em 0; }
.legacy-tab-title { font-family: var(--font); font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); margin: 0 0 .4em; }
.legacy-quote { border-left: 3px solid var(--accent-2); margin: 1.6em 0; padding: .2em 0 .2em 1em; font-family: var(--font-display); font-size: 1.15em; }
.legacy-quote cite { display: block; font-family: var(--font); font-style: normal; font-size: 15px; color: var(--text-2); margin-top: 6px; }
.note { background: var(--bg-2); border-left: 3px solid var(--accent-2); padding: 14px 18px; margin: 1.4em 0; }
.note p:last-child { margin-bottom: 0; }
.signoff { border-top: 1px solid var(--line); margin-top: 2em; padding-top: 1em; color: var(--text-2); font-size: .95em; }
.signoff h4 { font-family: var(--font); font-size: 16px; color: var(--text); }
.signoff ol { padding-left: 1.3em; }
.signoff ol li::marker { color: var(--accent-2); font-weight: 700; }
.signoff + .signoff { margin-top: 1em; }

/* ---------- article formatting under review (.formatted, inc/format.php) ---------- */
.formatted .prose h2 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.8rem); margin: 1.8em 0 .5em; }
.formatted .prose h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem); margin: 1.5em 0 .4em; }
.formatted .prose h4, .formatted .prose h5, .formatted .prose h6 { font-family: var(--font); font-size: 1.05rem; font-weight: 700; margin: 1.3em 0 .3em; }
.formatted .prose h2, .formatted .prose h3 { scroll-margin-top: 20px; }
/* 3. images: full column width, same spacing; captions styled; left-floated ones sit beside text on wide screens only */
.formatted .prose img, .formatted .prose .wp-caption { display: block; width: 100% !important; max-width: 100%; height: auto; margin: 1.6em 0; border-radius: 0; }
.formatted .prose .wp-caption img { margin: 0; }
.formatted .prose .wp-caption-text, .formatted .prose figcaption { font-size: 15px; color: var(--text-2); text-align: left; margin-top: 8px; }
.formatted .prose a > img { margin: 1.6em 0; }
@media (min-width: 900px) {
  .formatted .prose .alignleft, .formatted .prose .wp-caption.alignleft { float: left; width: 46% !important; margin: .4em 1.6em 1em 0; }
  .formatted .prose .alignleft img { margin: 0; }
}
/* 4. video */
.formatted .prose iframe, .formatted .prose .wp-block-embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 1.6em 0; border: 0; }
/* 5. contents list */
.toc { background: var(--bg-2); border-left: 3px solid var(--accent-2); padding: 16px 20px; margin: 0 0 2em; }
.toc-title { font-weight: 700; margin: 0 0 8px; }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc li { margin-bottom: 4px; }
.toc li::marker { color: var(--accent-2); font-weight: 700; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.legacy-tab-title { font-weight: 700; }

/* ==========================================================================
   Article type scale and spacing rhythm (owner review 2026-11-03), preview on .formatted.
   Body B = 18 to 20 px. Scale about 1.25 per level. Space is measured in em of body text.
   Rule of proximity: a heading sits closer to its own text than to the text above it.
   ========================================================================== */
.formatted .article-head { padding: 28px 0 0; }
.formatted .article-head .breadcrumbs ol { margin: 0 0 12px; }
.formatted .article-head h1 { font-size: clamp(30px, 25px + 1.5vw, 42px); line-height: 1.2; margin: 0; }
.formatted .article-head .meta { margin: 10px 0 0; font-size: 15px; line-height: 1.5; }
.formatted .article-head .chips { margin: 14px 0 0; }
.formatted .article-hero { margin: 24px auto 32px; }

.formatted .prose { max-width: 68ch; font-size: clamp(18px, 17px + .3vw, 20px); line-height: 1.7; }
.formatted .prose > :first-child { margin-top: 0; }
.formatted .prose p { margin: 0 0 1em; }
.formatted .prose h2 { font-size: clamp(24px, 21px + .9vw, 30px); line-height: 1.3; margin: 2.2em 0 .55em; }
.formatted .prose h3 { font-size: clamp(20px, 18.5px + .45vw, 23px); line-height: 1.35; margin: 1.7em 0 .45em; }
.formatted .prose h4, .formatted .prose h5, .formatted .prose h6 { font-family: var(--font); font-size: 1em; line-height: 1.45; font-weight: 700; margin: 1.4em 0 .35em; }
.formatted .prose :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) { margin-top: .6em; }
.formatted .prose ul, .formatted .prose ol { margin: 0 0 1em; padding-left: 1.3em; }
.formatted .prose li { margin-bottom: .35em; }
.formatted .prose li > :is(ul, ol) { margin: .35em 0 0; }
/* images: one consistent gap above and below, never doubled by a wrapping paragraph */
.formatted .prose img, .formatted .prose .wp-caption, .formatted .prose figure { margin: 1.75em 0; }
.formatted .prose p:has(> img:only-child), .formatted .prose p:has(> a:only-child > img) { margin: 0; }
.formatted .prose p > img, .formatted .prose p > a > img { margin: 1.75em 0; }
.formatted .prose .wp-caption img, .formatted .prose figure img { margin: 0; }
.formatted .prose .wp-caption-text, .formatted .prose figcaption { margin: .55em 0 0; font-size: 15px; line-height: 1.5; }
.formatted .prose :is(.table-wrap, .legacy-quote, .note, blockquote, iframe) { margin: 1.5em 0; }
.formatted .prose .legacy-tab { margin: 1.25em 0; }
.formatted .prose .legacy-tab-title { margin: 0 0 .4em; font-size: 15px; }
.formatted .toc { margin: 0 0 2em; padding: 16px 20px; font-size: .95em; line-height: 1.5; }
.formatted .toc li { margin-bottom: .25em; }
.formatted .signoff { margin-top: 2.2em; padding-top: 1.2em; }
.formatted .signoff p { margin: 0 0 .6em; }
.formatted .course-nav { margin: 2.2em 0 .75em; }
.formatted .share { margin: 1.75em 0; }
.formatted .author-box { margin: 1.75em 0; }
@media (max-width: 599px) {
  .formatted .article-head { padding-top: 18px; }
  .formatted .article-hero { margin: 18px auto 24px; }
}
/* Old articles write captions as an italic line right after the image: keep it tight to its image, styled as a caption */
.formatted .prose p:has(+ p > em:only-child) > img, .formatted .prose p:has(+ p > em:only-child) > a > img { margin-bottom: .55em; }
.formatted .prose p:has(> img, > a > img) + p:has(> em:only-child) { font-size: 15px; line-height: 1.5; color: var(--text-2); margin: 0 0 1.75em; }
/* Most old captions sit in the same paragraph as the image: <p><a><img></a><br><em>caption</em></p> */
.formatted .prose p:has(> img, > a > img) > em { display: block; font-size: 15px; line-height: 1.5; color: var(--text-2); margin: 0 0 .75em; }
.formatted .prose p:has(> em):has(> img, > a > img) > img,
.formatted .prose p:has(> em):has(> img, > a > img) > a > img { margin-bottom: .55em; }
.formatted .prose p:has(> img, > a > img) > br { display: none; }
/* Minimal numbered lists (owner, 2026-11-03): no gold bar, no gold numbers, no underlines until hover */
.toc, .formatted .toc { border-left: 0; background: var(--bg-2); padding: 18px 22px; }
.toc li::marker, .course-part li::marker { color: var(--text-2); font-weight: 400; }
.toc a, .course-part li a { color: var(--text); text-decoration: none; }
.toc a:hover, .course-part li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.toc-title { font-weight: 600; }
/* Tables (owner, 2026-11-03): bigger text, less white space, minimal lines */
.formatted .prose .table-wrap, .formatted .prose table { margin: 1.5em 0; }
.formatted .prose table, .formatted .prose .table-wrap table { display: table; width: auto; min-width: 0; max-width: 100%; border-collapse: collapse; font-size: clamp(17px, 16px + .25vw, 18px); line-height: 1.4; }
.formatted .prose td, .formatted .prose th { border: 0; border-bottom: 1px solid var(--line); padding: 7px 28px 7px 0; vertical-align: top; text-align: left; }
.formatted .prose tr > :last-child { padding-right: 0; }
.formatted .prose th, .formatted .prose tr:first-child td:has(> strong) { background: none; font-weight: 600; border-bottom: 1.5px solid var(--text); }
.formatted .prose th p, .formatted .prose td p { margin: 0; }
/* Tabs: a row of plain labels, the active one underlined; panels show their own title only when not tabbed */
.legacy-tabs { margin: 1.5em 0; }
.tab-list { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--line); margin-bottom: .9em; }
.tab-list [role=tab] { background: none; border: 0; padding: 8px 0; margin-bottom: -1px; font: inherit; font-size: 17px; font-weight: 600; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; }
.tab-list [role=tab][aria-selected=true] { color: var(--text); border-bottom-color: var(--text); }
.tab-list [role=tab]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legacy-tabs.is-tabbed .legacy-tab-title { display: none; }
.legacy-tabs.is-tabbed .legacy-tab { margin: 0; }
.legacy-tabs.is-tabbed .legacy-tab .table-wrap, .legacy-tabs.is-tabbed .legacy-tab table { margin-top: 0; }

/* Spacing fix (owner, 2026-11-03: "unreasonable spaces"). All vertical space is a multiple of the BODY size (--b),
   never of a heading's own size; stray old line breaks and empty paragraphs take no space. */
.formatted .prose { --b: clamp(18px, 17px + .3vw, 20px); }
.formatted .prose h2 { margin: calc(var(--b) * 2) 0 calc(var(--b) * .5); }
.formatted .prose h3 { margin: calc(var(--b) * 1.6) 0 calc(var(--b) * .4); }
.formatted .prose :is(h4, h5, h6) { margin: calc(var(--b) * 1.3) 0 calc(var(--b) * .3); }
.formatted .prose :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) { margin-top: calc(var(--b) * .6); }
.formatted .prose p:empty, .formatted .prose p:has(> br:only-child) { display: none; }
.formatted .prose :is(img, .wp-caption, figure, .table-wrap, .legacy-tabs, .note, .legacy-quote, blockquote, iframe) { margin-top: calc(var(--b) * 1.5); margin-bottom: calc(var(--b) * 1.5); }
.formatted .prose p:has(> :is(img, a > img)) > em { margin-bottom: calc(var(--b) * .5); }
.formatted .toc { margin-bottom: calc(var(--b) * 1.5); }
.formatted .signoff { margin-top: calc(var(--b) * 2); }
.formatted .course-nav { margin-top: calc(var(--b) * 1.5); }
.formatted .prose > :last-child { margin-bottom: 0; }
/* Old in-article copyright line (e.g. "© 2013-2014 Andre Luu."): small and quiet, normal spacing */
.formatted .prose div[align=right] { font-size: 15px; color: var(--text-2); text-align: right; margin: calc(var(--b) * .75) 0 0; }
.formatted .signoff > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Shade as grouping (owner review 2026-11-03), preview on .formatted.
   One shade only (#F3F2EF on paper). Reading text is never shaded. Shade marks what is NOT the narrative:
   1. reference data you return to (tables, tabbed tables) sits on a panel, so the eye can skip or find it;
   2. side notes and the contents list sit on the same panel;
   3. everything after the article (course links, sharing) is one shaded band, so the article clearly ends.
   No boxes inside boxes, no borders on shaded panels.
   ========================================================================== */
.formatted .prose .table-wrap, .formatted .prose .legacy-tabs { background: var(--bg-2); padding: 14px 20px 6px; }
.formatted .prose .legacy-tabs .table-wrap { background: none; padding: 0; margin: 0 0 8px; }
.formatted .prose .legacy-tabs .tab-list { margin: 0 0 .6em; }
.formatted .prose .table-wrap table, .formatted .prose .legacy-tabs table { margin: 0 0 8px; }
.formatted .prose .note { border-left: 0; padding: 14px 20px; }
.formatted .toc { border: 0; }
.formatted .article-end { background: var(--bg-2); padding: 20px 22px 6px; margin: calc(var(--b, 19px) * 2) 0 0; }
.formatted .article-end .course-nav { margin: 0 0 4px; }
.formatted .article-end .course-nav a { background: none; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; }
.formatted .article-end .course-index { margin: 6px 0 14px; }
.formatted .article-end .share { margin: 0 0 14px; }
.formatted .article-end .share a { background: none; }

/* Back to top: a round icon button (owner 2026-11-03); soft round-capped chevron, no pointed arrow. */
.site-footer .legal { align-items: center; }
.site-footer .to-top { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); color: var(--text-2); text-decoration: none; flex: none; }
.site-footer .to-top:hover, .site-footer .to-top:focus-visible { color: var(--text); border-color: var(--text-2); }

/* Header controls as one family (owner 2026-11-03): search field and Phototrip share one height, one rounded-rectangle corner (owner: no pointed corners), one type size.
   The search icon sits inside the field, so there is no separate dark box. */
body:not(.zone-prints) { --ctl-h: 40px; --ctl-r: 10px; }
body:not(.zone-prints) .nav-search { position: relative; display: flex; gap: 0; }
body:not(.zone-prints) .nav-search input { height: var(--ctl-h); border-radius: var(--ctl-r); border: 1px solid var(--line); background: #FAFAF7; padding: 0 40px 0 12px; font-size: 15px; -webkit-appearance: none; appearance: none; }
body:not(.zone-prints) .nav-search input:focus { outline: none; border-color: var(--accent); }
body:not(.zone-prints) .nav-search button { position: absolute; right: 0; top: 0; width: 40px; height: var(--ctl-h); padding: 0; display: grid; place-items: center; background: none; color: var(--text-2); border: 0; border-radius: var(--ctl-r); }
body:not(.zone-prints) .nav-search button:hover, body:not(.zone-prints) .nav-search button:focus-visible { color: var(--accent); }
body:not(.zone-prints) .book-cta { height: var(--ctl-h); box-sizing: border-box; padding: 0 18px; border-radius: var(--ctl-r); font-size: 15px; font-weight: 600; border: 1px solid var(--book); }
body:not(.zone-prints) .book-cta::before { content: none; }
@media (max-width: 479px) { body:not(.zone-prints) .book-cta { padding: 0 14px; } }
@media (min-width: 1180px) { body:not(.zone-prints) .nav-search input { width: 170px; } }

/* ---------- legibility pass (owner 2026-11-03: "text a little too small") ----------
   Article: larger body on a narrower column (about 66 characters a line; it was about 86).
   Tables and tabbed tables keep the wider width. Small text raised to 17px; nothing under 15px. */
.formatted .prose { max-width: 720px; font-size: clamp(19px, 17.6px + .35vw, 21px); line-height: 1.7; }
.formatted .prose .table-wrap, .formatted .prose .legacy-tabs {
  width: min(860px, calc(100vw - 32px)); max-width: none;
  margin-left: calc((100% - min(860px, calc(100vw - 32px))) / 2);
}
.formatted .prose table, .formatted .prose .table-wrap table { font-size: clamp(17px, 16px + .3vw, 19px); }
.formatted .article-head .meta, .card .meta { font-size: 17px; }
.formatted .prose .wp-caption-text, .formatted .prose figcaption,
.formatted .prose p:has(> img, > a > img) + p:has(> em:only-child),
.formatted .prose p:has(> img, > a > img) > em { font-size: 17px; }
.formatted .prose .legacy-tab-title, .legacy-tabs [role=tab] { font-size: 17px; }
.formatted .toc { font-size: 1em; }
body:not(.zone-prints) .site-nav a { font-size: 17px; }
body:not(.zone-prints) .site-footer { font-size: 17px; }
body:not(.zone-prints) .site-footer h4 { font-size: 15px; }
body:not(.zone-prints) .site-footer .legal { font-size: 15px; }
body:not(.zone-prints) .breadcrumbs { font-size: 16px; }
body:not(.zone-prints) .course-nav span { font-size: 15px; }
body:not(.zone-prints) .card .cat { font-size: 15px; }
body:not(.zone-prints) .book-cta, body:not(.zone-prints) .nav-search input { font-size: 16px; }

/* One step larger (owner 2026-11-03): body 22px desktop / 20px phone; column widened to keep about 66 characters a line. */
.formatted .prose { max-width: 750px; font-size: clamp(20px, 18.6px + .35vw, 22px); }
.formatted .prose h2 { font-size: clamp(26px, 23px + .9vw, 32px); }
.formatted .prose h3 { font-size: clamp(21px, 19.5px + .45vw, 24px); }
.formatted .article-head h1 { font-size: clamp(32px, 27px + 1.5vw, 44px); }
.formatted .prose table, .formatted .prose .table-wrap table { font-size: clamp(18px, 17px + .3vw, 20px); }
.formatted .article-head .meta, .card .meta,
.formatted .prose .wp-caption-text, .formatted .prose figcaption,
.formatted .prose p:has(> img, > a > img) + p:has(> em:only-child),
.formatted .prose p:has(> img, > a > img) > em,
.formatted .prose .legacy-tab-title, .legacy-tabs [role=tab] { font-size: 18px; }
body:not(.zone-prints) .site-nav a, body:not(.zone-prints) .site-footer { font-size: 18px; }
body:not(.zone-prints) .breadcrumbs, body:not(.zone-prints) .site-footer h4, body:not(.zone-prints) .site-footer .legal,
body:not(.zone-prints) .course-nav span, body:not(.zone-prints) .card .cat { font-size: 16px; }
body:not(.zone-prints) .book-cta, body:not(.zone-prints) .nav-search input { font-size: 17px; }

/* ---------- rounded-rectangle controls, whole site (owner 2026-11-03: no pointed corners) ----------
   Every button and input field: 10px corners. Photos and shaded panels are unchanged. */
:root { --ctl-r: 10px; }
.btn, .zone-prints .btn, body:not(.zone-prints) .btn, body:not(.zone-prints) .btn.book,
.chips a, .nav-toggle, .pagination .page-numbers, body:not(.zone-prints) .pagination .page-numbers,
.zone-prints .size-opt span, .newsletter input[type=email],
.trip-form input, .trip-form textarea, body:not(.zone-prints) .trip-form input, body:not(.zone-prints) .trip-form textarea,
.comment-form textarea, .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form input[type=submit], .comment-form .submit,
.course-nav a, body:not(.zone-prints) .post-nav a { border-radius: var(--ctl-r); }

/* ---------- same reading sizes on pages and hubs as on articles (owner approved 2026-11-03) ---------- */
body:not(.zone-prints) .prose { max-width: 750px; font-size: clamp(20px, 18.6px + .35vw, 22px); line-height: 1.7; }
body:not(.zone-prints) .page-title p, body:not(.zone-prints) .hero p { font-size: clamp(19px, 18px + .3vw, 21px); }
body:not(.zone-prints) .card h3 { font-size: 21px; }
body:not(.zone-prints) .card .excerpt { font-size: 18px; }
body:not(.zone-prints) .course-part h2 { font-size: 24px; }
body:not(.zone-prints) .note, body:not(.zone-prints) .kicker, body:not(.zone-prints) .avail { font-size: 16px; }
body:not(.zone-prints) .sample-tag { font-size: 15px; }

/* Alignment (owner 2026-11-03): table and tab panels sit on the text column like the contents, note and course panels,
   with the same 22px inner padding. Wide tables scroll inside their panel. */
.formatted .prose .table-wrap, .formatted .prose .legacy-tabs { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; padding-inline: 22px; overflow-x: auto; }
.formatted .prose .legacy-tabs .table-wrap { padding-inline: 0; }

/* ---------- guest comments (owner 2026-11-03) ---------- */
body:not(.zone-prints) .comments { max-width: 750px; margin: 48px auto 0; font-size: clamp(19px, 17.6px + .35vw, 21px); line-height: 1.6; }
.comments .comments-title, .comments .comment-reply-title { font-size: clamp(24px, 21px + .9vw, 30px); margin: 0 0 .4em; }
.comments .comment-reply-title small { font-size: 17px; font-weight: 400; margin-left: 12px; }
.comments .comment-notes { color: var(--text-2); font-size: 17px; margin: 0 0 1.2em; }
.comment-form p { margin: 0 0 1em; }
.comment-form label { display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.comment-form textarea, .comment-form input[type=text], .comment-form input[type=email] { font: inherit; font-size: 19px; background: #FAFAF7; border: 1px solid var(--line); padding: 12px 14px; }
.comment-form textarea:focus, .comment-form input:focus { outline: none; border-color: var(--accent); }
.comment-form .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.comment-form .comment-form-cookies-consent input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.comment-form .comment-form-cookies-consent label { font-weight: 400; color: var(--text-2); margin: 0; }
.comment-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.comment-form .btn { padding: 12px 24px; font-size: 18px; }
.comment-list .comment { padding: 20px 0; border-top: 1px solid var(--line); }
.comment-list .children { list-style: none; padding-left: 24px; border-left: 2px solid var(--bg-3); margin-top: 16px; }
.comment-list .comment-author { font-weight: 700; }
.comment-list .comment-author .fn { font-style: normal; }
.comment-list .comment-metadata { font-size: 16px; color: var(--text-2); }
.comment-list .comment-metadata a { color: inherit; text-decoration: none; }
.comment-list .comment-content p { margin: .5em 0; }
.comment-list .reply a, .comment-list .comment-awaiting-moderation { font-size: 16px; color: var(--text-2); }

/* ---------- phototrip request form (owner 2026-11-03): four required details, inline checks ---------- */
.trip-form select { font: inherit; font-weight: 400; color: var(--text); background: #fff; border: 1px solid #B9B5AF; border-radius: var(--ctl-r); padding: 12px 14px; width: 100%; }
.trip-form input, .trip-form textarea { border-radius: var(--ctl-r); }
.trip-form .field-err { display: block; color: #9B2C1F; font-size: 16px; font-weight: 600; margin-top: 6px; }
.trip-form label:has(.field-err) input { border-color: #9B2C1F; }
.trip-form .opt { font-weight: 400; color: var(--text-2); }
.form-lead { color: var(--text-2); max-width: 62ch; }
.form-privacy { font-size: 16px; color: var(--text-2); margin-top: 12px; }
.trip-card .excerpt { margin: 4px 0 12px; }

/* Pre-launch check: finger-sized tap targets on phones (44px rows for footer links; taller category labels). */
@media (max-width: 767px) {
  .site-footer li a { display: inline-block; padding: 11px 0; }
  .site-footer ul { margin: 0; }
  .site-footer li { margin: 0; }
  .card .cat { display: inline-block; padding: 8px 0; }
  .places .place-name { display: block; padding: 8px 0; }
}