/* Ten Toe Express — design tokens & base styles.
   v1 (2026-10-19): matches the @TenToeExpress YouTube channel art — night
   desert (teal/navy sky, stars, mesas, saguaros, footprints in the sand).
   v2 (2026-10-21, "Brighter night"): lighter navy, white text, orange, no
   gold, no Cinzel. Paul: "still not super great".
   v3 (2026-10-21, "Desert day"): the whole site rethought. The channel's
   desert in full sun (blue sky, yellow sun, orange mesas, green saguaros),
   white header and pages, crisp navy text, bright orange accents, blue
   links, navy footer. No gold, no purple, no dark pages.
   Fonts: Pacifico (wordmark, like the channel logo), Plus Jakarta Sans
   (headings, labels), Inter (body).
   Image kit: design/ (rendered by design/render.ps1), palette notes:
   docs/image-notes.md. */

:root {
  --bg:        #FFF8F1;  /* page: pale sand, so white cards and panels stand out */
  --bg-2:      #FFF1E4;  /* deeper sand panels */
  --card:      #FFFFFF;  /* cards, panels */
  --card-2:    #FFF1E4;  /* table heads, code, hover */
  --line:      #F2DCC6;  /* dividers, card borders (sandy) */
  --head:      #0B1F33;  /* headings */
  --text:      #1E293B;  /* body text */
  --muted:     #475569;  /* secondary text */
  --accent:    #FF6A1A;  /* buttons, pills, underlines */
  --accent-2:  #D9480F;  /* hover, orange text on white */
  --link:      #0077CC;  /* links */
  --link-2:    #005799;  /* link hover */
  --glow:      #0099CC;  /* Mysteries pill */
  --grad-accent: linear-gradient(135deg, #FF8A3D 0%, #FF6A1A 50%, #EC560A 100%);

  --font-brand: 'Pacifico', cursive;
  --font-label: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-head:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:  'Inter', system-ui, -apple-system, sans-serif;

  --radius:    18px;
  --radius-sm: 12px;
  --shadow:    0 12px 30px rgba(180, 90, 30, .12);

  color-scheme: light;
}

* { box-sizing: border-box; }

html { font-size: 17px; background: var(--bg); }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.15;
  color: var(--head);
  margin: 0 0 .5rem;
  letter-spacing: -.025em;
}

img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: #FFFFFF; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.wrap-narrow { max-width: 780px; }

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Header ---------- */

.site-header {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid #E5E9EF;
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--head);
  white-space: nowrap;
}

.brand img { width: 42px; height: 42px; }

nav.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .4rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
}

nav.main-nav a {
  white-space: nowrap;
  padding: .45rem .85rem;
  border-radius: 999px;
  transition: background .15s, color .15s;
}

nav.main-nav a:hover { background: #FFF1E8; color: var(--accent-2); }
nav.main-nav a[aria-current="page"] { background: var(--grad-accent); color: #FFFFFF; }

/* ---------- Hero & page heads (painted daytime desert image) ----------
   The scene is one picture: design/hero-desert-drawing.png (ChatGPT ink and
   watercolor drawing, 2026-10-21; the painted version is hero-desert-day.png),
   saved as core/img/hero-desert-drawing.webp. Its left sky is kept clear for the
   headline. The old CSS moon/stars and the _desert.html SVG are hidden. */

.hero {
  position: relative;
  overflow: hidden;
  background: #1F8FEA url("../img/hero-desert-drawing.0d996a74351e.webp") center bottom / cover no-repeat;
  padding: 4.6rem 0 15rem;
}

/* the sun is in the picture now */
.hero .moon {
  display: none;
  position: absolute;
  right: 10%;
  top: 2.4rem;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #FFF8D6 45%, #FFEB99 100%);
  box-shadow: 0 0 30px 12px rgba(255, 255, 255, .7), 0 0 90px 40px rgba(255, 246, 214, .45), 0 0 200px 90px rgba(255, 255, 255, .18);
}

/* night-only shooting star: hidden in the daytime look */
.hero .shooting-star {
  display: none;
  position: absolute;
  right: 30%;
  top: 3.2rem;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  transform: rotate(-24deg);
  border-radius: 2px;
  opacity: .8;
}

.hero .wrap { position: relative; z-index: 2; }

.kicker {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 1rem;
}

.kicker::before,
.kicker::after { content: "✦"; color: var(--accent); margin: 0 .6em; font-size: .8em; }
.kicker::before { margin-left: 0; }
.hero .kicker { color: #0B1F33; }

.hero h1 { font-size: 3.4rem; line-height: 1.04; max-width: 13em; margin-bottom: 1.1rem; }
.hero h1 em { font-style: normal; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { font-size: 1.15rem; max-width: 33em; margin: 0 0 1.8rem; color: #16324A; }
.hero .actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-desert {
  display: none !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 240px;
  display: block;
  z-index: 1;
}

/* Smaller version for category / About / Contact pages */
/* min-height keeps every small header the same height even when a tagline
   wraps (Lost Treasure's did, so its header was taller than the others) */
.hero.hero-small { padding: 2.8rem 0 11rem; min-height: 370px; background-position: center 78%; }
.hero.hero-small .moon { width: 72px; height: 72px; top: 1.8rem; }
.hero.hero-small .shooting-star { display: none; }
.hero.hero-small .hero-desert { height: 200px; }
.hero.hero-small h1 { font-size: 2.7rem; margin-bottom: .35rem; max-width: none; }
/* tagline stays short so it wraps in the clear sky, left of the mesas; the
   soft white halo keeps it readable where a mesa top still reaches it */
.hero.hero-small p { margin: 0; font-size: 1.1rem; max-width: 30em; color: #16324A; text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .8); }
.hero.hero-small h1, .hero.hero-small .breadcrumb { text-shadow: 0 0 10px rgba(255, 255, 255, .85); }
.hero.hero-small .breadcrumb { margin-bottom: .7rem; }

/* ---------- Shared bits ---------- */

.pill {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .2rem .75rem;
  background: var(--glow);
  color: #FFFFFF;
  border: 1px solid var(--glow);
}

.pill-lost-treasure { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: .55rem;
}

.text-link {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .98rem;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: var(--grad-accent);
  color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(255, 106, 26, .28);
  transition: transform .15s, box-shadow .15s;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 106, 26, .42); }

.btn-ghost {
  background: #FFFFFF;
  color: var(--head);
  box-shadow: 0 10px 26px rgba(11, 31, 51, .12);
}

.btn-ghost:hover { background: #FFF1E8; color: var(--accent-2); box-shadow: 0 14px 32px rgba(11, 31, 51, .16); }

.breadcrumb {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.hero .breadcrumb { color: #16324A; }
.hero .breadcrumb a { color: #0B4F8A; }
.breadcrumb a { color: var(--link); font-weight: 700; }
.breadcrumb a:hover { text-decoration: underline; }

/* the one quiet YouTube mention */
.video-note {
  display: flex;
  gap: .9rem;
  align-items: center;
  gap: 1.1rem;
  margin: 3rem 0 1rem;
  padding: 1.4rem 1.6rem;
  background: var(--grad-accent);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(236, 86, 10, .25);
  color: #FFFFFF;
}

.video-note .icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
}

.video-note .icon svg { width: 32px; height: 32px; }
.video-note .vn-text { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.video-note strong { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.video-note .vn-text span { font-size: .95rem; color: #FFF1E4; }
.video-note .vn-text a { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.video-note .vn-btn {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .95rem;
  padding: .75rem 1.4rem;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--accent-2);
  box-shadow: 0 6px 16px rgba(120, 40, 0, .2);
  transition: transform .15s;
}
.video-note .vn-btn:hover { transform: translateY(-2px); }

/* ---------- Sections & card grid ---------- */

/* Home sections sit on warm sand (2026-10-21, card option 1): the first
   section a pale sand, the second band a shade deeper, with a dune edge. */
.section { padding-top: 2.6rem; padding-bottom: 3.6rem; background: linear-gradient(180deg, #FFF4E6 0%, #FFF9F2 100%); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.section-head h2 { font-size: 2.1rem; margin: 0; }

.section-head h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: .6rem;
  border-radius: 4px;
  background: var(--grad-accent);
}

.section-head .sub { margin: .55rem 0 0; color: var(--muted); font-size: .98rem; }
.section-head .see-all { font-size: .9rem; font-weight: 700; color: var(--link); white-space: nowrap; }
.section-head .see-all:hover { color: var(--link-2); text-decoration: underline; }

.band {
  position: relative;
  background: linear-gradient(180deg, #FCE8D2 0%, #FFF4E8 100%);
  margin-top: 0;
  padding: 1.4rem 0 3.6rem;
}

.band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -39px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V26C160 10 300 4 470 18s300 20 470 6 330-18 500-2v18z' fill='%23FCE8D2'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.7rem;
}

/* Framed cards: white card, sandy border and warm shadow, the photo inset
   with its own rounded corners, category pill on the photo, "Read the story"
   pinned to the bottom so a row lines up. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid #F5D9BF;
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: 0 14px 34px rgba(180, 90, 30, .14);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

/* hover: a solid 3px orange edge (1px border + 2px ring, so nothing shifts) */
.card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 20px 40px rgba(180, 90, 30, .22); }

.card .thumb-wrap { position: relative; }

.card .thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--card-2);
}

.card .thumb-wrap .pill { position: absolute; left: 12px; top: 12px; z-index: 2; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }

.card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card:hover .thumb img { transform: scale(1.05); }

.card .play { position: absolute; inset: 0; display: grid; place-items: center; }
.card .play svg { width: 46px; height: 46px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .3)); }

.card-body { padding: .9rem .6rem .5rem; display: flex; flex-direction: column; flex: 1; }
.card .read-more { margin-top: auto; padding-top: .9rem; font-family: var(--font-head); font-weight: 800; font-size: .88rem; color: var(--accent-2); }
.card .read-more:hover { color: var(--accent); }
.card h3 { font-size: 1.22rem; line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -.02em; }
.card h3 a:hover { color: var(--accent-2); }
.card p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.55; }

.empty-state {
  padding: 2.2rem;
  border: 1.5px dashed rgba(255, 106, 26, .35);
  background: var(--card);
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-align: center;
  grid-column: 1 / -1;
}

/* ---------- Article page ---------- */

.article-detail { padding-top: 1.8rem; }

.article-title { font-size: 2.7rem; line-height: 1.1; margin: .4rem 0 .9rem; }

.article-featured-image,
.article-video {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  margin: 1.5rem 0 2.2rem;
}

.article-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.article-video iframe { width: 100%; height: 100%; border: 0; }

.article-body { font-size: 1.06rem; line-height: 1.8; }

.article-body p { margin: 0 0 1.25rem; }
.article-body h2 { font-size: 1.65rem; margin-top: 2.4rem; }
.article-body h3 { font-size: 1.3rem; margin-top: 1.9rem; color: var(--accent-2); }
.article-body img { border-radius: var(--radius-sm); margin: 1.2rem 0; }
.article-body a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--link-2); }
.article-body ul, .article-body ol { margin: 0 0 1.25rem 1.4rem; padding: 0; }
.article-body li { margin-bottom: .45rem; }
.article-body li::marker { color: var(--accent); }
.article-body strong { color: var(--head); }
.article-body hr { border: 0; height: 1px; background: var(--line); margin: 2.2rem 0; }

.article-body blockquote {
  margin: 1.6rem 0;
  padding: 1.1rem 1.4rem;
  background: var(--card);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--head);
  font-style: italic;
}

.article-body blockquote p:last-child { margin-bottom: 0; }

.article-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.2rem 0 1.8rem;
  font-size: .9rem;
  line-height: 1.45;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.article-body th,
.article-body td {
  text-align: left;
  vertical-align: top;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--line);
}

.article-body th {
  background: var(--card-2);
  color: var(--accent-2);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .88rem;
}

.article-body tbody tr:last-child td { border-bottom: 0; }

.article-body code {
  background: var(--card-2);
  padding: .1rem .4rem;
  border-radius: 6px;
  font-size: .92em;
}

/* Photos, maps and charts with credits */
.article-body figure { margin: 2rem 0; }
.article-body figure img { width: 100%; height: auto; margin: 0; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); }
.article-body figcaption { margin-top: .55rem; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.article-body figcaption a { color: var(--muted); }

/* Case file: quick facts box near the top */
.article-body .case-file {
  margin: 1.8rem 0 2.2rem;
  padding: 1.2rem 1.4rem 1rem;
  background: var(--card);
  border: 1px solid rgba(255, 106, 26, .45);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, .08), var(--shadow);
}
.article-body .case-file h3 {
  margin: 0 0 .7rem;
  font-family: var(--font-label);
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.article-body .case-file h3::before { content: "✦ "; color: var(--accent); }
.article-body .case-file ul { list-style: none; margin: 0; padding: 0; }
.article-body .case-file li { margin: 0 0 .45rem; font-size: .96rem; line-height: 1.55; }
.article-body .case-file strong { color: var(--accent-2); }

/* YouTube line + "Deep dive yourself" sources */
.article-body .video-line { margin-top: 2.4rem; padding: .9rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .98rem; }
.article-body .deep-dive {
  margin-top: 2.6rem;
  padding: 1.3rem 1.4rem 1rem;
  border-top: 2px solid var(--accent);
  background: var(--bg-2);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.article-body .deep-dive h2 { margin-top: 0; font-size: 1.35rem; }
.article-body .deep-dive li { font-size: .9rem; line-height: 1.5; color: var(--muted); }

/* Topic bubbles under an article: orange on the night sky, each links to /topic/<slug>/ */
.topic-bubbles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.topic-bubble {
  display: inline-block;
  padding: .4rem .95rem;
  border-radius: 999px;
  background: rgba(255, 106, 26, .12);
  border: 1px solid rgba(255, 106, 26, .45);
  color: var(--accent-2);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.topic-bubble:hover, .topic-bubble:focus-visible { background: var(--grad-accent); color: var(--bg); border-color: var(--accent); }

.more-section { margin-top: 3rem; padding: 2.4rem 0 3rem; border-top: 1px solid var(--line); }
.more-heading { font-size: 1.8rem; margin: 0 0 1.4rem; }

/* ---------- About / pages ---------- */

.page-body { font-size: 1.06rem; line-height: 1.8; padding-top: 1.4rem; }
.page-body p { margin: 0 0 1.25rem; }
.page-body h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.page-body ul { margin: 0 0 1.25rem 1.4rem; padding: 0; }
.page-body li { margin-bottom: .5rem; }
.page-body li::marker { color: var(--accent); }
.page-body a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.page-body strong { color: var(--head); }

.about-intro {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin: .4rem 0 1.8rem;
  box-shadow: var(--shadow);
}

.about-intro img {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent), 0 0 30px rgba(255, 106, 26, .3);
}

.about-intro h2 { margin-top: 0; font-size: 1.9rem; }
.about-intro p { margin: 0; }

/* "Ten Toe Express" byline under article titles */
.byline {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-brand);
  font-size: 1.05rem;
  color: var(--head);
}

.byline:hover { color: var(--accent-2); }

/* ---------- Contact ---------- */

.contact-section { padding-top: 1.6rem; padding-bottom: 3.5rem; }
.contact-intro { color: var(--muted); margin: 0 0 1.5rem; }

.contact-flash {
  background: rgba(255, 106, 26, .12);
  border: 1px solid rgba(255, 106, 26, .4);
  color: var(--accent-2);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.contact-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 1.8rem 2rem 2rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 620px;
}

.contact-form label { font-weight: 700; font-size: .9rem; margin-bottom: .35rem; display: block; color: var(--head); }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .8rem .95rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--text);
  transition: border-color .15s, background .15s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--link);
  background: var(--card-2);
}

.contact-form .errorlist {
  list-style: none;
  color: #DC2626;
  font-size: .85rem;
  margin: .3rem 0 0;
  padding: 0;
}

.contact-form .btn { align-self: flex-start; }

/* Honeypot — hidden from real visitors, but not via display:none/hidden
   (some bots skip those specifically). See core/forms.py. */
.contact-hp { position: absolute; left: -9999px; top: -9999px; }

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  background: #0B1F33;
  margin-top: 4rem;
  padding: 2.4rem 0 2.8rem;
  font-size: .88rem;
  color: #C9D6E3;
  border-top: 0;
}

.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.5rem; }
.site-footer strong { font-family: var(--font-brand); font-weight: 400; font-size: 1.35rem; color: #FFFFFF; }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; font-weight: 600; }
.site-footer a { color: #DCE7F0; }
.site-footer a:hover { color: #FF8A4C; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 2.7rem; }
}

@media (max-width: 640px) {
  html { font-size: 16px; }
  .site-header { position: static; }
  .site-header .wrap { padding-top: .6rem; padding-bottom: .5rem; }
  .brand { font-size: 1.35rem; }
  .brand img { width: 36px; height: 36px; }
  nav.main-nav { gap: .1rem .1rem; font-size: .86rem; margin-left: -.6rem; }
  nav.main-nav a { padding: .35rem .6rem; }
  .grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .hero { padding: 3.8rem 0 6.5rem; }
  .hero.hero-small { padding-top: 3.4rem; padding-bottom: 7rem; min-height: 0; }
  .hero .moon { width: 40px; height: 40px; right: 7%; top: .8rem; }
  .hero.hero-small .moon { width: 36px; height: 36px; top: .8rem; }
  .hero .shooting-star { display: none; }
  .hero h1 { font-size: 2.15rem; }
  .hero.hero-small h1 { font-size: 1.95rem; }
  .hero-desert, .hero.hero-small .hero-desert { height: 130px; }
  .video-note { flex-wrap: wrap; padding: 1.2rem; }
  .video-note .vn-btn { width: 100%; text-align: center; }
  .about-intro { flex-direction: column; text-align: center; gap: 1rem; padding: 1.3rem 1.1rem; }
  .about-intro img { width: 110px; height: 110px; }
  .section-head h2 { font-size: 1.7rem; }
  .article-title { font-size: 2rem; }
  .contact-card { padding: 1.3rem 1.2rem 1.5rem; }
  /* Wide tables scroll sideways inside themselves instead of widening the page. */
  .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-body th, .article-body td { min-width: 130px; }
}