/* Shared Afterglow tokens and public-page components. */
:root {
  --ink-0:#faf1e6; --ink-1:#fffaf3; --ink-2:#f0ded9; --ink-3:#e9d5ce; --ink-4:#ccb0b1;
  --text:#442a30; --muted:#775b60; --dim:#775b60; --line:#d9bfc0; --line-strong:#b9969d;
  --coral:#8b3542; --coral-hover:#712635; --coral-dim:#f0ded9;
  --aurora-1:#3c5830; --aurora-2:#365f6a; --aurora-3:#754166; --aurora-4:#8b3542;
  --warn:#80520c; --bad:#942c3d; --good:#3c5830;
  --font-display:'Barlow Semi Condensed',sans-serif; --font-body:'Source Sans 3',sans-serif;
  --shadow-sm:0 1px 3px #442a3010; --shadow-md:0 8px 24px #442a3012; --shadow-lg:0 20px 60px #442a3020;
  --shadow-glow-green:none; --shadow-glow-coral:none;
}
html,body { overflow-x:clip; }
body { background:var(--ink-0); color:var(--text); font-family:var(--font-body); font-synthesis:none; }
.aurora-background { display:none; }
h1,h2,h3,.brand-name { font-family:var(--font-display); }
h1 em,h2 em,h3 em,.brand-name em { font-style:normal; font-weight:inherit; }
.header { background:#2b202b; color:#fff3e8; border-bottom:1px solid #735561; z-index:110; }
.header.scrolled { background:#2b202b; }
.header-title .brand-name em { font-style:normal; font-weight:inherit; }
.header .brand-name,.header .brand-name em,.header .header-nav a,.header .header-tagline { color:#fff3e8; }
.header .header-brand img { filter:brightness(0) invert(1); }
.header-nav a:hover,.header-nav a.nav-active { color:#f4c7aa; }
.header-nav .nav-active::after { background:#f4c7aa; }
.nav-toggle { color:#fff3e8; }
.nav-toggle span { background:#fff3e8; }
.header-nav.active { background:#2b202b; }
.c-btn--primary,.btn-primary,.blog-filter-btn.active,.blog-filter-btn:hover { background:#8b3542; color:#fff4e9; border-color:#8b3542; }
.c-btn--primary:hover,.btn-primary:hover { background:#712635; color:#fff4e9; }
.c-btn--ghost { color:#442a30; border-color:#a47b83; }
.blog-hero h1,.article-content h1,.article-header h1 { background:none; -webkit-text-fill-color:currentColor; color:#442a30; }
.blog-card,.article-sidebar,.article-hero,.hub-card,.destination-card { box-shadow:none; }
.article-content a,.article-body a { color:#8b3542; }
p a:not(.btn):not(.c-btn) { text-decoration:underline; text-underline-offset:3px; }
.footer { background:#2b202b; color:#fff3e8; border-color:#80636e; }
.footer p,.footer a,.footer h2,.footer-data,.footer-copy,.footer-links-secondary { color:#e8d1d3; }
.footer .footer-grid,.footer .footer-data,.footer .footer-copy { border-color:#80636e; }
.c-partner { background:#f0ded9; border-color:#d9bfc0; }
.c-consent { background:#fff8ef; color:#442a30; border-color:#b9969d; box-shadow:0 10px 40px #25152533; }
.c-consent h2,.c-consent p { color:#442a30; }
.c-consent .c-consent-accept { background:#8b3542; color:#fff4e9; }
.c-consent .c-consent-decline { border-color:#8b3542; color:#442a30; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #8b3542; outline-offset:4px; }
.header a:focus-visible,.header button:focus-visible { outline-color:#f4c7aa; }
@media(max-width:768px) { .header-nav { background:#2b202b; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } }

.footer .footer-col h2 { font-size:.6875rem; font-weight:600; line-height:1.6; letter-spacing:.14em; color:#e8d1d3; }
/* ============================================================================
   Subpage corrections — components the Afterglow palette flip left behind
   ----------------------------------------------------------------------------
   Kept here rather than in a new stylesheet on purpose: site.css is already
   linked from all 92 public pages, so these land everywhere without editing
   any HTML.

   Scope note: the block above already remaps the styles.css dark tokens to the
   Afterglow light palette on :root, site-wide. That conversion is done and is
   NOT repeated here. What remains are components that were built for the dark
   theme and never followed the palette across, plus the image slots the site
   has never had.

   Measured before writing (Chrome, 1440x1000, /destinations/):
     .c-dest-card stats   contrast 1.15:1 - 1.44:1   (WCAG AA needs 4.5:1)
     .c-dest-card heading contrast 2.70:1 - 4.08:1
     .footer-grid         3 columns holding 4 children at 700-899px -> 2 rows
   ========================================================================= */


/* ---------- 1. Destination cards ---------------------------------------
   Root cause: the card is a PHOTO card. Its background is a scrim stack
   ending in rgba(11,15,25,.92), designed to sit over an image with white
   text on top. The photo was never added and the palette flip turned the
   text dark, so the page shipped dark text on a near-black scrim.

   Fix: put the photograph back, keep the scrim it was designed for, and
   return the type to light. Contrast is restored by the same change that
   adds the imagery.                                                       */

.c-dest-card {
    /* The photo goes in this custom property, set per card in the markup:
       style="--card-photo:url('https://images.unsplash.com/photo-...')"      */
    background-image:
        linear-gradient(180deg, rgba(20, 12, 16, 0) 28%, rgba(20, 12, 16, 0.55) 55%, rgba(20, 12, 16, 0.88) 100%),
        var(--card-photo, none),
        linear-gradient(150deg, #3b2b38, #23323a);
    background-size: cover, cover, cover;
    background-position: center, center, center;
    background-repeat: no-repeat;
}

/* The heading selector never matched: the CSS targets h3, the markup uses h2,
   so the card heading fell through to the global 34px dark-plum h2. */
.c-dest-card h2,
.c-dest-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.15;
    font-weight: 500;
    color: #fff;
    margin: 0 0 6px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Type over the scrim must be light — this is what fixes the 1.15:1 reading. */
.c-dest-card .c-dest-card-region {
    color: #f6c9a8;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.c-dest-card .c-dest-card-stats {
    color: #f0e2df;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
    flex-wrap: wrap;
    row-gap: 2px;
}
.c-dest-card .c-dest-card-stats strong { color: #fff; }

.c-dest-card:hover { border-color: rgba(255, 255, 255, 0.34); }
.c-dest-card:hover h2,
.c-dest-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }


/* ---------- 2. Footer --------------------------------------------------
   styles.css sets 3 columns from 640px and 4 from 900px, but the markup has
   four children (brand + Forecast + About + Pa norsk). Between 700 and 899px
   the fourth wrapped onto a second row under the brand. Measured: 2 grid rows.
   A 2x2 grid is the sane tablet layout.                                    */

@media (min-width: 640px) and (max-width: 899px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}


/* ---------- 3. Article and page imagery --------------------------------
   The site carried no photography at all: 92 of 93 pages had no image beyond
   the logo. These are the slots, including the credit line the Unsplash
   License requires.                                                        */

.page-figure {
    margin: 0 0 var(--space-6, 32px);
}
.page-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--ink-2);
    border-radius: var(--r-md, 12px);
}
.page-figure figcaption {
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.page-figure figcaption a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.page-figure figcaption a:hover { color: var(--text); }

/* Article hero sits above the lede, wider than it is tall. */
.article-hero-figure img { aspect-ratio: 21 / 9; border-radius: var(--r-lg, 20px); }
@media (max-width: 700px) {
    .article-hero-figure img { aspect-ratio: 3 / 2; }
}


/* ---------- 4. Card thumbnails ----------------------------------------- */

.card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--ink-2);
    border-radius: var(--r-md, 12px);
    margin-bottom: 14px;
    transition: filter 200ms ease;
}
a:hover > .card-thumb,
.blog-card:hover .card-thumb,
.hub-card:hover .card-thumb { filter: brightness(1.04) saturate(1.04); }

/* A deliberate tinted block for cards with no photography, so an empty slot
   reads as a design choice rather than a broken image. */
.card-thumb-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 14px;
    border-radius: var(--r-md, 12px);
    background:
        radial-gradient(120% 90% at 20% 100%, rgba(60, 88, 48, 0.55), transparent 62%),
        radial-gradient(100% 80% at 80% 100%, rgba(117, 65, 102, 0.5), transparent 62%),
        linear-gradient(180deg, #2b202b, #43303a);
}


/* ---------- 5. Reduced motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .card-thumb { transition: none; }
}