/* Interior pages use the approved homepage palette and component treatment.
   Loaded after each page's layout CSS; the homepage has no dependency on this file. */
.site-interior {
  --blue: #1644e8;
  --blue-dark: #1036bd;
  --ink: #18202b;
  --muted: #59616b;
  --line: #d9dce0;
  --paper: #fff;
  --surface: #fff;
  --soft: #f3f4f5;
  --sky: #f3f4f5;
  --blue-soft: #f3f4f5;
  --learn-rule: var(--line);
  --learn-soft: var(--soft);
  --learn-accent: var(--blue);
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --shadow-soft: none;
  --shadow-pop: none;
  background: var(--paper);
  color: var(--ink);
}
.site-interior main .container { width: min(1160px, calc(100% - 80px)); }
.site-interior main .container.narrow, .site-interior main .policy { max-width: 820px; }
.site-interior :is(h1, h2, h3) { font-family: inherit; font-weight: 800; letter-spacing: -.025em; }
.site-interior :is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.site-interior .breadcrumb { padding-block: 18px; font-size: 12px; }
.site-interior .breadcrumb ol { flex-wrap: wrap; }
.site-interior .eyebrow { margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.site-interior :is(.section-title, .learn-hub-heading h2, .learn-next-ocean h2, .spot-weather-heading h2, .spot-prose-section h2, .spot-safety-box h2) { font-size: 30px; line-height: 1.5; }
.site-interior :is(.section-copy, .category-lead, .learn-lead, .app-hero-copy) { font-size: 15px; line-height: 1.95; }
.site-interior :is(.page-section, .product-section, .learn-hub-section, .journey-section) { padding-block: 64px; border-color: var(--line); }
.site-interior :is(.page-section-soft, .journey-section, .learn-hub-shortcuts) { background: var(--soft); }
.site-interior .heading-row { gap: 24px; margin-bottom: 28px; }
.site-interior :is(.button, .learn-primary-link, .learn-ocean-links a, .finder-submit) { min-height: 48px; border-radius: 4px; font-size: 14px; font-weight: 700; box-shadow: none; transform: none; }
.site-interior :is(.button-primary, .learn-primary-link, .learn-ocean-links a:first-child, .finder-submit) { background: var(--ink); border-color: var(--ink); color: #fff; }
.site-interior :is(.button-primary, .learn-primary-link, .learn-ocean-links a:first-child, .finder-submit):hover { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: none; transform: none; }
.site-interior .button-secondary { background: #fff; border-color: var(--line); color: var(--ink); }
.site-interior .button-secondary:hover { border-color: var(--blue); color: var(--blue); box-shadow: none; transform: none; }
.site-interior :is(.text-link, .learn-card-action, .level-action) { color: var(--blue); font-weight: 700; }

/* Blue introductions and white type create the same immediate identity as home. */
.site-interior :is(.category-hero, .spot-directory-hero, .spot-area-hero, .spot-detail-hero, .learn-hub-hero, .learn-article-hero, .app-hero, .hero) {
  padding-block: 48px;
  background: var(--blue);
  color: #fff;
  border: 0;
}
.site-interior :is(.category-hero, .spot-directory-hero, .spot-area-hero, .spot-detail-hero, .learn-hub-hero, .learn-article-hero, .app-hero, .hero) h1 {
  color: #fff;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.5;
  letter-spacing: -.03em;
}
.site-interior :is(.category-hero, .spot-directory-hero, .spot-area-hero, .spot-detail-hero, .learn-hub-hero, .learn-article-hero, .app-hero, .hero) :is(h1 span, .eyebrow, .category-lead, .spot-detail-lead, .spot-reviewed, .spot-count, .spot-count span, .learn-lead, .learn-meta, .learn-hub-caption, .app-hero-copy, .intro) { color: #fff; }
.site-interior :is(.category-hero, .spot-directory-hero, .spot-area-hero, .spot-detail-hero, .learn-hub-hero, .learn-article-hero, .app-hero, .hero) :is(a, button, summary):focus-visible { outline-color: #fff; }
.site-interior :is(.category-hero-grid, .spot-directory-hero-grid) { grid-template-columns: minmax(0, 1fr) 240px; gap: 56px; }
.site-interior .category-art { min-height: 220px; height: 220px; background-color: transparent; background-image: var(--category-art-image); background-size: contain; background-position: center; background-repeat: no-repeat; filter: none; }
.site-interior .art-care { background-image: url('/assets/images/character-sun-spot.webp'); }
.site-interior .spot-character { filter: none; }
.site-interior .spot-character--directory { width: 220px; }
.site-interior .spot-character--area { width: 180px; justify-self: center; }
.site-interior .spot-count { margin-top: 24px; }
.site-interior .spot-count strong { font-size: 40px; }
.site-interior .learn-hub-visual { min-height: 260px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.site-interior .learn-hub-visual > img { height: 210px; }
.site-interior .learn-visual-label { display: none; }
.site-interior .learn-mini-route { border-color: #ffffff70; }
.site-interior .learn-mini-route, .site-interior .learn-mini-route :is(i, b) { color: #fff; }
.site-interior .learn-hero-art { background: transparent; }
.site-interior .learn-primary-link { border: 1px solid #ffffff80; }
.site-interior .learn-primary-link:hover { background: #fff; color: var(--blue); }
.site-interior .app-hero-card { min-height: 430px; background: transparent; border-radius: 0; }
.site-interior .app-hero-card:hover { transform: none; }
.site-interior .hero-app-preview { width: min(70%, 230px); border-radius: 12px; box-shadow: none; }
.site-interior .app-hero .button-primary { border-color: #ffffff80; }
.site-interior .app-hero .button-primary:hover { background: #fff; color: var(--blue); border-color: #fff; }
.site-interior .app-store-help { background: #fff; color: var(--ink); border-radius: 4px; }
.site-interior .brand-message { padding-block: 64px; background: var(--ink); border: 0; }
.site-interior .brand-message h2 { font-size: 32px; }
.site-interior .brand-message::before, .site-interior .brand-message::after { display: none; }

/* Flat cards, restrained borders and the homepage's four-pixel corners. */
.site-interior :is(.topic-card, .content-card, .directory-card, .routine-card, .feature-card, .spot-area-card, .spot-list-card, .spot-basic-card, .spot-panel, .spot-weather-card, .spot-safety-box, .spot-schema, .learn-story-card, .learn-panel, .learn-term, .learn-answer, .learn-checklist, .learn-controls, .learn-quiz, .finder-result-card, .spot-finder) {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}
.site-interior :is(.spot-area-card, .spot-list-card, .learn-story-card, .content-card, .finder-result-card) { border-top: 3px solid var(--blue); }
.site-interior :is(.topic-card, .content-card, .directory-card, .routine-card, .feature-card, .spot-area-card, .spot-list-card, .learn-story-card, .finder-result-card):hover { border-color: var(--blue); box-shadow: none; transform: none; }
.site-interior :is(.routine-card, .feature-card) { border-width: 2px 0 0; border-color: var(--ink); border-radius: 0; padding: 26px; }
.site-interior :is(.routine-number, .feature-number, .card-kicker, .status-label) { color: var(--blue); background: transparent; box-shadow: none; border: 0; border-radius: 0; }
.site-interior :is(.routine-card h3, .feature-card h3, .content-card h3, .learn-story-copy h3) { font-size: 24px; line-height: 1.6; }
.site-interior :is(.content-card p, .routine-card p, .feature-card p) { font-size: 14px; color: var(--muted); }
.site-interior .card-footer { border-color: var(--line); }
.site-interior :is(.spot-area-card-main, .spot-list-card > a) { padding: 24px; }
.site-interior .spot-area-card-heading h3 { font-size: 28px; }
.site-interior .spot-preview-links { padding: 0 24px 24px; }
.site-interior :is(.spot-list-meta li, .spot-condition-list dd span, .schema-list li) { border-radius: 2px; border-color: var(--line); background: var(--soft); color: var(--muted); }
.site-interior :is(.spot-detail-lead, .spot-score-row, .spot-prose-section > p, .spot-prose-section li, .spot-safety-box > p, .spot-preview-links a) { color: var(--muted); }
.site-interior .spot-detail-hero .spot-detail-lead { color: #fff; }
.site-interior .spot-basic-card :is(.eyebrow, .spot-basic-title) { color: var(--blue); }
.site-interior .spot-panel h2 { font-size: 26px; line-height: 1.5; }
.site-interior :is(.spot-score-row, .spot-fact-list > div, .spot-condition-list > div, .spot-facility-list > div, .spot-weather-days, .spot-panel-note) { border-color: var(--line); }
.site-interior .spot-score-dot { background: #d9dce0; box-shadow: none; }
.site-interior .spot-score-dot.is-filled { background: var(--blue); }
.site-interior :is(.spot-map-frame, #spot-map) { border-color: var(--line); border-radius: 4px; background: var(--soft); }
.site-interior .spot-basic-card a:focus-visible { outline-color: var(--blue); }
.site-interior .spot-weather-card { padding: 32px; }
.site-interior :is(.spot-weather-temperature > span, .spot-weather-day-temperature > span) { color: var(--muted); }
.site-interior .spot-safety-box { border-left: 3px solid var(--blue); }
.site-interior :is(.journey-link, .journey-link:nth-child(n)) { border-color: var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.site-interior .journey-link:hover, .site-interior .journey-link[aria-current='page'] { background: #fff; }
.site-interior .preview-card { border-radius: 4px; border-color: var(--line); box-shadow: none; background: var(--soft); }
.site-interior .preview-card img { border-radius: 12px; }

/* The directory retains the same native controls and result behavior. */
.site-interior .spot-directory-hero .spot-finder { margin-top: 32px; }
.site-interior .spot-finder :is(.finder-heading h2, .finder-results-heading h3) { color: var(--ink); }
.site-interior .spot-finder :is(label, legend) { color: var(--ink); }
.site-interior .spot-finder :is(select, input[type='search']) { border-color: var(--line); border-radius: 4px; background: #fff; color: var(--ink); font-size: 16px; }
.site-interior .spot-finder :is(.finder-heading > span, .finder-details summary, .finder-help, [data-finder-status], .finder-result-card p) { color: var(--muted); }
.site-interior .spot-finder :is(input, select, button, summary, a):focus-visible { outline-color: var(--blue); }
.site-interior .finder-result-card :is(.result-area, .result-link) { color: var(--blue); }
.site-interior .finder-more { border-color: var(--line); border-radius: 4px; color: var(--blue); }
.site-interior .finder-facilities input { accent-color: var(--blue); }

/* Editorial cards mirror the homepage note previews. */
.site-interior .blog-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.site-interior .blog-story-card { min-width: 0; border-bottom: 1px solid var(--line); }
.site-interior .blog-story-card > a { display: flex; flex-direction: column; height: 100%; padding-bottom: 24px; }
.site-interior .blog-story-card img { display: block; width: 100%; aspect-ratio: 1280 / 671; height: auto; object-fit: cover; margin-bottom: 20px; }
.site-interior .blog-story-card h3 { font-size: 24px; line-height: 1.8; margin: 14px 0 24px; }
.site-interior .blog-story-card a:hover h3 { color: var(--blue); }
.site-interior .blog-story-category { font-size: 12px; font-weight: 700; color: var(--blue); }
.site-interior .blog-story-action { display: flex; justify-content: space-between; margin-top: auto; color: var(--blue); font-size: 13px; font-weight: 700; }

/* Learning tools keep diagrams, selected states and keyboard behavior. */
.site-interior .learn-story-art { background: var(--soft); }
.site-interior .learn-story-copy { padding: 24px; }
.site-interior .learn-word-stack > span { border-color: var(--line); border-radius: 4px; background: #fff; color: var(--blue); }
.site-interior :is(.learn-ocean-links a, .learn-related-grid a) { border-color: var(--line); border-radius: 4px; box-shadow: none; }
.site-interior .learn-related-grid a { background: #fff; border-top: 3px solid var(--blue); color: var(--blue); }
.site-interior .learn-related-grid a:hover { background: var(--soft); }
.site-interior .learn-related-grid strong { color: var(--ink); }
.site-interior :is(.learn-article-body h2, .learn-hub-heading h2, .learn-next-ocean h2) { font-weight: 800; }
.site-interior :is(.learn-article-body p, .learn-list, .learn-table, .learn-question-grid a, .learn-checklist label > span, .learn-toc a) { color: var(--muted); }
.site-interior .learn-article-body :is(.learn-label, .eyebrow) { color: var(--blue); }
.site-interior :is(.learn-answer, .learn-note, .learn-sources, .learn-panel-blue, .learn-controls, .learn-checklist, .learn-quiz) { background: var(--soft); }
.site-interior .learn-answer { border-left: 3px solid var(--blue); }
.site-interior .learn-answer p strong, .site-interior .learn-note strong { color: var(--ink); }
.site-interior :is(.learn-note, .learn-sources, .learn-diagram, .learn-table-wrap, .learn-tool-button, .learn-controls input, .learn-filter-row button, .learn-quiz-options button, [data-term-empty]) { border-color: var(--line); border-radius: 4px; }
.site-interior .learn-diagram { background: #fff; }
.site-interior .learn-note { border-left-color: var(--blue); }
.site-interior .learn-table thead, .site-interior .learn-table th { background: var(--soft); color: var(--ink); }
.site-interior .learn-table :is(th, td) { border-color: var(--line); }
.site-interior :is(.learn-controls > label, .learn-tool-button, .learn-quiz-options button, .learn-filter-row button) { color: var(--ink); }
.site-interior .learn-tool-button:hover, .site-interior .learn-quiz-options button:hover { border-color: var(--blue); background: #fff; }
.site-interior :is(.learn-filter-row button, .learn-quiz-options button)[aria-pressed='true'] { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: none; }
.site-interior .learn-quiz .learn-quiz-feedback { color: var(--blue); }
.site-interior .learn-steps li > span, .site-interior .learn-tool-heading output { background: var(--soft); color: var(--blue); border-radius: 4px; }
.site-interior .learn-term .learn-term-example { border-color: var(--line); color: var(--muted); }

/* The standalone policy and footer follow the same neutral canvas. */
.site-interior .site-footer { background: #fff; border-color: var(--line); }
.site-interior .footer-bottom { border-color: var(--line); }
.site-interior .policy { padding-top: 36px; }
.site-interior .policy-section { border-top: 1px solid var(--line); }
.site-interior .policy-section :is(p, li) { color: var(--muted); }
.site-interior .policy .contact { border-color: var(--line); border-radius: 4px; background: var(--soft); box-shadow: none; }
.site-interior .updated { border: 1px solid #ffffff80; border-radius: 4px; background: transparent; color: #fff; }

@media (max-width: 960px) {
  .site-interior :is(.category-hero-grid, .spot-directory-hero-grid, .learn-hero-grid) { grid-template-columns: minmax(0, 1fr) 180px; gap: 28px; }
  .site-interior .category-art { min-height: 180px; height: 180px; }
  .site-interior .spot-character--directory { width: 180px; }
  .site-interior .app-hero-grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
  .site-interior .hero-app-preview { width: 190px; }
  .site-interior .app-hero-card { min-height: 410px; }
}
@media (max-width: 760px) {
  .site-interior main .container { width: calc(100% - 40px); }
  .site-interior :is(.page-section, .product-section, .learn-hub-section, .journey-section) { padding-block: 44px; }
  .site-interior :is(.category-hero, .spot-directory-hero, .spot-area-hero, .spot-detail-hero, .learn-hub-hero, .learn-article-hero, .app-hero, .hero) { padding-block: 32px; }
  .site-interior :is(.category-hero, .spot-directory-hero, .spot-area-hero, .spot-detail-hero, .learn-hub-hero, .learn-article-hero, .app-hero, .hero) h1 { font-size: clamp(29px, 7.8vw, 40px); line-height: 1.5; }
  .site-interior :is(.section-title, .learn-hub-heading h2, .learn-next-ocean h2, .spot-weather-heading h2, .spot-prose-section h2, .spot-safety-box h2) { font-size: 24px; }
  .site-interior :is(.category-lead, .learn-lead, .section-copy, .app-hero-copy) { font-size: 14px; }
  .site-interior :is(.category-hero-grid, .spot-directory-hero-grid, .learn-hero-grid, .learn-article-hero .learn-hero-grid) { grid-template-columns: 1fr; gap: 20px; }
  .site-interior :is(.category-hero-grid, .spot-directory-hero-grid, .learn-hub-hero .learn-hero-grid) { position: relative; }
  .site-interior .category-art { position: absolute; right: 0; top: 0; width: 72px; height: 72px; min-height: 0; }
  .site-interior .category-hero h1 { padding-right: 75px; }
  .site-interior .spot-character--directory { position: absolute; right: 0; top: 0; width: 75px; }
  .site-interior .spot-directory-hero h1 { padding-right: 72px; }
  .site-interior .spot-directory-hero .spot-finder { margin-top: 24px; }
  .site-interior .spot-area-hero-grid { grid-template-columns: 1fr; }
  .site-interior .spot-area-hero-grid { position: relative; }
  .site-interior .spot-character--area { position: absolute; right: 0; top: 0; width: 72px; margin: 0; transform: none; }
  .site-interior .spot-area-hero h1 { padding-right: 72px; }
  .site-interior .spot-basic-visual { padding-top: 60px; }
  .site-interior .spot-character--detail { width: 86px; }
  .site-interior .spot-panel h2 { font-size: 24px; }
  .site-interior .spot-weather-card { padding: 22px 18px; }
  .site-interior .learn-hub-visual { display: block; position: absolute; right: 0; top: 0; min-height: 0; width: 72px; }
  .site-interior .learn-hub-visual > img { width: 72px; height: 72px; }
  .site-interior .learn-mini-route { display: none; }
  .site-interior .learn-hub-hero h1 { padding-right: 75px; }
  .site-interior .learn-story-copy { padding: 22px 18px; }
  .site-interior .learn-story-copy h3 { font-size: 22px; }
  .site-interior .app-hero-grid { grid-template-columns: 1fr; }
  .site-interior .app-hero-card { min-height: 0; max-height: 260px; overflow: hidden; justify-content: center; }
  .site-interior .hero-app-preview { width: 150px; }
  .site-interior .brand-message h2 { font-size: 26px; }
  .site-interior .blog-story-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-interior .blog-story-card h3 { font-size: 21px; }
}
@media (max-width: 380px) {
  .site-interior main .container { width: calc(100% - 32px); }
  .site-interior .eyebrow { font-size: 11px; }
  .site-interior .learn-story-copy { padding-inline: 16px; }
  .site-interior .learn-story-copy h3 { font-size: 20px; }
}
@media print {
  .site-interior main :is(.category-hero, .spot-directory-hero, .spot-area-hero, .spot-detail-hero, .learn-hub-hero, .learn-article-hero, .app-hero, .hero) { background: #fff; color: #18202b; }
  .site-interior main :is(.learn-article-hero h1, .learn-article-hero .eyebrow, .learn-article-hero .learn-lead, .learn-article-hero .learn-meta) { color: #18202b; }
}