/* Never Bored in Orlando: site stylesheet
   Mobile-first, vanilla CSS. No framework, no build step required. */

:root {
  /* Brand palette. Energetic, editorial, not corporate-tourism */
  --color-coral: #ff6b4a;
  --color-coral-dark: #e5522f;
  --color-teal: #0e7c7b;
  --color-teal-dark: #0a5f5e;
  --color-yellow: #ffb627;
  --color-plum: #8e4ec6;
  --color-pink: #e0457b;
  --color-ink: #1f2937;
  --color-ink-soft: #4b5563;
  --color-bg: #fffaf3;
  --color-surface: #ffffff;
  --color-border: #ecdfd0;
  --color-focus: #1d4ed8;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --max-width: 1240px;

  --shadow-card: 0 1px 2px rgba(31, 41, 55, 0.06), 0 6px 16px rgba(31, 41, 55, 0.08);
}

/* Reset (minimal, not a full framework reset) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.5;
}

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

a {
  color: var(--color-teal-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

p {
  margin: 0 0 var(--space-4);
}

.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .wrap {
    padding-inline: var(--space-6);
  }
}

/* Narrower single-column container for article/guide pages. Overrides
   .wrap's max-width so the whole article (header, hero, facts panels,
   body copy) shares one consistent, comfortably-filled reading width
   instead of leaving a large empty gutter on wide screens. */
.wrap.wrap-narrow {
  max-width: 820px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* Header */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-ink);
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-ink);
}

/* Three evenly spaced bars drawn as background gradients.
   The previous version mixed a border-top for the first bar with two absolutely
   positioned pseudo-elements for the others. Under the global
   `box-sizing: border-box` the border ate into the declared height, so the bars
   landed at 0-2px, 7-9px and 10-12px — a 5px gap above and a 1px gap below,
   which read as a thick smudge rather than a menu icon. Backgrounds are
   positioned against the same box, so the spacing can't drift. */
.nav-toggle-icon {
  display: block;
  width: 18px;
  height: 14px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 100% 2px;
  background-position: left top, left center, left bottom;
  background-repeat: no-repeat;
}

.primary-nav {
  display: none;
}

.primary-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.primary-nav a {
  display: block;
  padding: var(--space-2) var(--space-2);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.primary-nav a:hover {
  background: var(--color-bg);
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  .primary-nav,
  .primary-nav.is-open {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    background: none;
  }

  .primary-nav ul {
    flex-direction: row;
    padding: 0;
    gap: var(--space-5);
  }

  .primary-nav a {
    padding: var(--space-2) 0;
  }
}

/* Hero */
.hero {
  padding-block: var(--space-6) var(--space-7);
  background: linear-gradient(180deg, #fff3e8 0%, var(--color-bg) 100%);
}

.hero-inner {
  display: grid;
  gap: var(--space-5);
}

.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-coral-dark);
  background: #ffe6db;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

.hero h1 {
  font-size: clamp(1.9rem, 4vw + 1rem, 3rem);
  max-width: 20ch;
}

/* Hidden on phones so the headline and the "Start exploring" button sit above
   the fold together. The copy still ships in the HTML, so search engines and
   screen readers get it either way — this is a display decision, not a
   content one. */
.hero-lede {
  display: none;
  font-size: 1.125rem;
  color: var(--color-ink-soft);
  max-width: 58ch;
}

@media (min-width: 700px) {
  .hero-lede {
    display: block;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  font-size: 0.95rem;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-coral);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-coral-dark);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn-secondary:hover {
  background: var(--color-ink);
  color: #fff;
}

.hero-media img {
  border-radius: var(--radius-lg);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}

/* Section headings */
.section {
  padding-block: var(--space-7);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: clamp(1.4rem, 2vw + 1rem, 2rem);
}

.section-head p {
  margin: 0;
  color: var(--color-ink-soft);
}

.section-link {
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* Category filter */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  list-style: none;
  padding: 0;
}

.filter-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}

.filter-btn[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}

.filter-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--color-ink-soft);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.filter-empty[hidden] {
  display: none;
}

.filter-more {
  margin-top: var(--space-5);
  text-align: center;
}

/* Featured experience */
.featured {
  display: grid;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.featured-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.featured-body {
  padding: var(--space-5) var(--space-5) var(--space-6);
}

.featured-body .eyebrow {
  background: #e6f5f4;
  color: var(--color-teal-dark);
}

.featured-body h3 {
  font-size: clamp(1.3rem, 2vw + 1rem, 1.8rem);
}

.featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}

@media (min-width: 800px) {
  .featured {
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }

  .featured-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.12);
}

.card[hidden] {
  display: none;
}

.card-media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.card-category {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-coral-dark);
}

.card-title {
  font-size: 1.05rem;
  margin: 0;
}

.card-title a {
  color: var(--color-ink);
  text-decoration: none;
}

.card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-title a:hover {
  text-decoration: underline;
}

.card-summary {
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  margin: 0;
}

.card-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* Curated strip */
.curated {
  background: linear-gradient(180deg, #eef7f6 0%, var(--color-bg) 100%);
}

.curated .card {
  background: var(--color-surface);
}

/* Ad slot */
.ad-slot {
  margin-block: var(--space-6);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  text-align: center;
  padding: var(--space-4);
}

/* Newsletter */
.newsletter {
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.newsletter h2 {
  font-size: clamp(1.3rem, 2vw + 1rem, 1.9rem);
}

.newsletter p {
  color: #d1d5db;
  margin: 0;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.newsletter-form label {
  position: absolute;
  left: -9999px;
}

.newsletter-form input[type="email"] {
  flex: 1 1 240px;
  padding: var(--space-3) var(--space-4);
  border-radius: 999px;
  border: none;
  font: inherit;
}

.newsletter-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.newsletter-status {
  font-size: 0.9rem;
  color: #d1d5db;
}

@media (min-width: 700px) {
  .newsletter {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------
 * Article / guide template
 * ------------------------------------------------------------------- */
.breadcrumbs {
  padding-block: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  color: var(--color-border);
}

.breadcrumbs a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
}

.article-header {
  padding-block: var(--space-4) var(--space-6);
}

.article-header h1 {
  font-size: clamp(1.8rem, 3.5vw + 1rem, 2.7rem);
}

.article-lede {
  font-size: 1.1rem;
  color: var(--color-ink-soft);
}

.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-top: var(--space-3);
}

.article-body {
  width: 100%;
}

.article-body h2 {
  font-size: clamp(1.3rem, 2vw + 1rem, 1.7rem);
  margin-top: var(--space-7);
}

.article-body h3 {
  font-size: 1.15rem;
  margin-top: var(--space-6);
}

.article-body p {
  font-size: 1.02rem;
}

.article-body ul,
.article-body ol {
  padding-left: 1.3em;
}

.article-body li {
  margin-bottom: var(--space-2);
}

/* Key facts panel */
.facts-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-5) 0;
}

.facts-panel h3 {
  margin-top: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}

.facts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
}

.facts-list div {
  display: grid;
  gap: 2px;
}

.facts-list dt {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-ink-soft);
}

.facts-list dd {
  margin: 0;
  font-size: 0.98rem;
}

@media (min-width: 640px) {
  .facts-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Deferred social embed facade. Instagram posts are portrait, so this is
   kept narrower than the article column and centered rather than
   stretched full-width. */
.social-embed {
  margin: var(--space-5) auto;
  max-width: 420px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.social-embed-facade {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}

.social-embed-facade img {
  width: 100%;
  aspect-ratio: 9 / 12;
  object-fit: cover;
  max-height: 480px;
}

.social-embed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(31, 41, 55, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-embed-play svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

.social-embed-caption {
  padding: var(--space-3) var(--space-4) var(--space-4);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  border-top: 1px solid var(--color-border);
}

.social-embed-caption p {
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
}

.social-embed-caption .btn {
  font-size: 0.85rem;
  padding: var(--space-2) var(--space-4);
}

.social-embed-frame {
  padding: var(--space-4);
  display: flex;
  justify-content: center;
}

/* Instagram's /embed/ page has no way to tell us its height from another
   origin, so the box has to be sized here. 400x740 is the reel embed's own
   proportion: the 9:16 video plus its header and action bar. */
.social-embed-frame iframe {
  width: 100%;
  aspect-ratio: 400 / 740;
  max-height: 80vh;
  border: 0;
  display: block;
  background: var(--color-surface);
}

/* Author box */
.author-box {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-7);
}

.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-coral), var(--color-teal));
  flex-shrink: 0;
}

.author-box h3 {
  margin: 0;
  font-size: 1rem;
}

.author-box p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.verified-note {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-top: var(--space-3);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-7) var(--space-6);
  margin-top: var(--space-7);
  color: var(--color-ink-soft);
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.footer-grid h3 {
  font-size: 0.95rem;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.footer-grid a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.footer-grid a:hover {
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
}

/* Social icons. Each link is a 40px circle so it clears the 24px minimum
   touch target on phones — icon-only links are easy to make too small to
   tap accurately. */
.social-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-3);
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-ink-soft);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.social-links a:hover {
  color: #fff;
  background: var(--color-coral);
  border-color: var(--color-coral);
}

.social-links a:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 2px;
}

.social-links svg {
  width: 19px;
  height: 19px;
  display: block;
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 404 page */
.error-page {
  max-width: 62ch;
}

.error-lede {
  font-size: 1.1rem;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-5);
}

.error-subhead {
  font-size: 1.15rem;
  margin: var(--space-7) 0 var(--space-3);
}

.error-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.error-links a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 600;
}

.error-links a:hover {
  border-color: var(--color-coral);
  color: var(--color-coral-dark);
}

.error-note {
  margin-top: var(--space-6);
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

@media (min-width: 700px) {
  .error-links {
    grid-template-columns: 1fr 1fr;
  }
}

/* Standalone content pages (About, Contact) */
.prose h1 {
  font-size: clamp(1.8rem, 3vw + 1rem, 2.6rem);
  margin-bottom: var(--space-4);
}

.prose h2 {
  font-size: 1.3rem;
  margin-top: var(--space-7);
}

.prose p {
  color: var(--color-ink-soft);
  max-width: 68ch;
}

.page-lede {
  font-size: 1.15rem;
  color: var(--color-ink) !important;
  margin-bottom: var(--space-6);
}

/* Contact form.
   No card wrapper: on a cream page background, a white card containing white
   inputs reads as muddy. Plain white fields directly on the page give the
   boundaries something to contrast against. */
.page-form {
  max-width: 36rem;
  margin: var(--space-6) 0 var(--space-7);
}

.form-row {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 560px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-field {
  margin-bottom: var(--space-4);
}

.form-row .form-field {
  margin-bottom: 0;
}

.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}

.form-field input,
.form-field textarea {
  width: 100%;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 9rem;
  line-height: 1.6;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #a9a29b;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-coral);
  box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.18);
}

/* Off-screen rather than display:none, which some bots know to skip. */
.form-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.form-actions .btn {
  flex: none;
}

.form-note {
  flex: 1 1 15rem;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.form-status {
  display: none;
  font-size: 0.92rem;
  font-weight: 600;
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}

.form-status.is-visible {
  display: block;
}

.form-status.is-ok {
  color: var(--color-teal-dark);
  background: #e6f4f3;
}

.form-status.is-error {
  color: #b3261e;
  background: #fdeceb;
}

/* Affiliate disclosure. Sits above the article meta so it is seen before the
   recommendation, which is the point of disclosing at all. */
.affiliate-note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-coral);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}

/* About page photo strip. Three squares at every width rather than reflowing to
   one column on phones: a single 800px portrait would dominate a short page,
   and a row of three reads as deliberate even when each is small. */
.about-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-6);
}

.about-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

@media (min-width: 700px) {
  .about-gallery {
    gap: var(--space-4);
  }
}