/*
 * Hex Marks the Spot: home page layout. Loaded by index.html only, after base.css.
 * The live demos (format table, ramps, contrast samples, shortcuts table) are in demos.css.
 *
 * Motion rule: every animated element is styled in its finished state first; animations
 * are added only inside `prefers-reduced-motion: no-preference`, so reduced motion (and any
 * browser that skips the query) shows the final picture at once.
 */

/* =========================================================================
   Chunky store button, like the push buttons of old Mac software
   ========================================================================= */

.btn-store {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: var(--map-green); color: #1B2430;
    border: 2px solid var(--btn-edge); border-radius: 8px;
    box-shadow: 4px 4px 0 var(--btn-edge);
    padding: 0.8rem 1.3rem;
    font-weight: 700; font-size: 1.05rem; text-decoration: none;
    transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
.btn-store:hover { text-decoration: none; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--btn-edge); }
.btn-store:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--btn-edge); }
.btn-store svg { width: 22px; height: 22px; flex: none; }
.on-sea .btn-store { --btn-edge: var(--sea-text); color: #1B2430; }

.fine-print { font-size: 0.9rem; color: var(--ink-soft); margin-top: 1rem; }

/* =========================================================================
   Hero: the chart as a band across the sheet
   ========================================================================= */

.hero {
    --hero-map: url("../images/hero-map-portrait-800.jpg");
    --hero-map-set: image-set(url("../images/hero-map-portrait-800.webp") type("image/webp") 1x,
                              url("../images/hero-map-portrait-1200.webp") type("image/webp") 2x,
                              url("../images/hero-map-portrait-800.jpg") type("image/jpeg") 1x);
    position: relative; isolation: isolate;
    display: grid; gap: 2rem; align-items: center;
    /* Bleed to just inside the sheet's neat line. */
    margin: 0 calc(var(--pad) * -1 + 14px) clamp(3.5rem, 8vw, 6rem);
    padding: clamp(1.5rem, 4vw, 3rem) calc(var(--pad) - 14px) clamp(2rem, 5vw, 4rem);
    overflow-x: clip;
}
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: var(--hero-map);
    background-repeat: no-repeat;
    /* Phones: the chart sits behind the screenshot, below the headline. */
    background-position: center bottom;
    background-size: 100% auto;
    mask-image: linear-gradient(to bottom, transparent 30%, #000 55%, #000 88%, transparent);
}

/* The WebP set only where image-set() with type() is understood. A plain fallback declaration
   would not help here: a custom property that fails at computed time drops the whole value. */
@supports (background-image: image-set(url("../images/hero-map-1600.webp") type("image/webp") 1x)) {
    .hero::before { background-image: var(--hero-map-set); }
}

/* A parchment wash keeps the rhumb lines quiet behind the headline. */
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, var(--paper) 25%, transparent 55%);
}

@media (prefers-color-scheme: dark) {
    .hero {
        --hero-map: url("../images/hero-map-dark-portrait-800.jpg");
        --hero-map-set: image-set(url("../images/hero-map-dark-portrait-800.webp") type("image/webp") 1x,
                                  url("../images/hero-map-dark-portrait-1200.webp") type("image/webp") 2x,
                                  url("../images/hero-map-dark-portrait-800.jpg") type("image/jpeg") 1x);
    }
}

/* Tablets (stacked layout, wider than a phone): the landscape chart along the bottom. */
@media (min-width: 36rem) and (max-width: 59.99rem) {
    .hero {
        --hero-map: url("../images/hero-map-1600.jpg");
        --hero-map-set: image-set(url("../images/hero-map-1600.webp") type("image/webp") 1x,
                                  url("../images/hero-map-2400.webp") type("image/webp") 2x,
                                  url("../images/hero-map-1600.jpg") type("image/jpeg") 1x);
    }
    .hero::before { background-position: right bottom; background-size: auto 65%; }
}
@media (min-width: 36rem) and (max-width: 59.99rem) and (prefers-color-scheme: dark) {
    .hero {
        --hero-map: url("../images/hero-map-dark-1600.jpg");
        --hero-map-set: image-set(url("../images/hero-map-dark-1600.webp") type("image/webp") 1x,
                                  url("../images/hero-map-dark-2400.webp") type("image/webp") 2x,
                                  url("../images/hero-map-dark-1600.jpg") type("image/jpeg") 1x);
    }
}

@media (min-width: 60rem) {
    .hero {
        --hero-map: url("../images/hero-map-1600.jpg");
        --hero-map-set: image-set(url("../images/hero-map-1600.webp") type("image/webp") 1x,
                                  url("../images/hero-map-2400.webp") type("image/webp") 2x,
                                  url("../images/hero-map-1600.jpg") type("image/jpeg") 1x);
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 3rem;
        min-height: 36rem;
    }
    .hero::before {
        background-position: right center;
        background-size: cover;
        mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
    }
    .hero::after {
        background: linear-gradient(to right,
            color-mix(in srgb, var(--paper) 88%, transparent) 0%,
            color-mix(in srgb, var(--paper) 78%, transparent) 40%,
            transparent 62%);
    }
}
@media (min-width: 60rem) and (prefers-color-scheme: dark) {
    .hero {
        --hero-map: url("../images/hero-map-dark-1600.jpg");
        --hero-map-set: image-set(url("../images/hero-map-dark-1600.webp") type("image/webp") 1x,
                                  url("../images/hero-map-dark-2400.webp") type("image/webp") 2x,
                                  url("../images/hero-map-dark-1600.jpg") type("image/jpeg") 1x);
    }
}

.kicker {
    font: italic 600 clamp(1.15rem, 2.2vw, 1.4rem)/1.2 var(--serif);
    color: var(--green-ink);
    margin-bottom: 0.6rem;
}
.hero .lead { font-size: clamp(1.1rem, 2.1vw, 1.3rem); line-height: 1.5; max-width: 31rem; }
.hero .cta { margin-top: 1.75rem; }

/* The screenshot, with the trail and the X drawn over it */
.hero-shot { margin: 0; justify-self: center; width: min(100%, 440px); }
.hero-shot figcaption, .loupe-shot figcaption, .crop-shot figcaption {
    font-size: 0.85rem; color: var(--ink-soft); text-align: center; margin-top: 0.75rem;
}
.shot-mark { position: relative; }

.shot { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--card-shadow); }
/* The window capture carries its own rounded, transparent corners. */
.shot--window { border-radius: 4.1% / 3.1%; }

/* Site delight 1: a dotted trail runs in from the headline and ends in an X on the swatch.
   The X sits on the centre of the swatch in the capture: 64.8 % across, 20 % down. */
.trail {
    position: absolute; z-index: 1;
    left: -58%; top: -7%; width: 120%; height: 55%;
    overflow: visible; pointer-events: none;
}
.trail-line {
    fill: none; stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 0.5 10; vector-effect: non-scaling-stroke;
}
.trail-reveal { fill: none; stroke: #fff; stroke-width: 30; stroke-dasharray: 1; stroke-dashoffset: 0; }

.x-mark {
    position: absolute; left: 64.8%; top: 20%; width: 13%;
    translate: -50% -50%; rotate: -6deg;
    overflow: visible; pointer-events: none;
}
.x-mark path { fill: none; stroke: #1B2430; stroke-opacity: 0.85; stroke-width: 5; stroke-linecap: round; }

/* The trail overlaps the headline column only on wide screens; on phones it comes in
   from the edge and stops behind the screenshot. */
@media (max-width: 59.99rem) {
    .trail { left: -6%; width: 69%; top: -10%; height: 34%; }
}

@media (prefers-reduced-motion: no-preference) {
    .trail-reveal { stroke-dashoffset: 1; animation: trail-draw 1.6s ease-in-out 0.3s forwards; }
    .x-mark { opacity: 0; scale: 0.6; animation: x-pop 0.2s ease-out 1.9s forwards; }
}
@keyframes trail-draw { to { stroke-dashoffset: 0; } }
@keyframes x-pop { to { opacity: 1; scale: 1; } }

/* =========================================================================
   Sections and chapters
   ========================================================================= */

.section { margin-block: clamp(3.5rem, 9vw, 6.5rem); scroll-margin-top: 1rem; }
.section-intro { max-width: var(--measure); margin-bottom: 2rem; }

.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-bottom: 2.5rem; }
.section-head p { margin: 0; }

/* A chapter: text on one side, a demo or screenshot on the other */
.chapter { display: grid; gap: 1.75rem 3.5rem; align-items: center; scroll-margin-top: 1rem; }
.chapter + .chapter {
    margin-top: clamp(3.5rem, 8vw, 5.5rem);
    padding-top: clamp(3.5rem, 8vw, 5.5rem);
    border-top: 1px dashed var(--rule);
}
@media (min-width: 52rem) {
    .chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .chapter--flip .chapter-text { order: 2; }
}
.chapter-demo > p { margin-bottom: 0.5rem; }

/* Chapter vignettes: the generated spot illustrations, as small parchment cards */
.vignette { display: block; width: clamp(8.5rem, 22vw, 11.5rem); margin-bottom: 1.25rem; }
.section-head .vignette { margin-bottom: 0; }
.vignette img {
    width: 100%; height: auto; aspect-ratio: 1;
    border-radius: 18px; box-shadow: var(--card-shadow);
    rotate: -2deg;
}
.chapter--flip .vignette img { rotate: 2deg; }

.crop-shot, .loupe-shot { margin: 0; justify-self: center; width: min(100%, 430px); }
.loupe-shot { width: min(100%, 600px); margin: 3rem auto 0; }

/* =========================================================================
   The route of a pick: waypoints joined by a dashed trail that ends at an X
   ========================================================================= */

.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; position: relative; }
.route li { position: relative; padding-left: 3.75rem; }
.route li::before {
    content: counter(list-item); position: absolute; left: 0; top: -0.2rem;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--paper); border: 2px solid var(--ink);
    font: 700 1.1rem var(--serif);
}
.route li:last-child::before {
    content: "\2715"; border-color: var(--rust); color: var(--rust); font-size: 1.3rem;
}
/* Each waypoint draws the trail to the next one, so it always stops at the X */
.route li:not(:last-child)::after {
    content: ""; position: absolute; left: calc(1.3rem - 1px); top: 2.4rem; bottom: -1.8rem;
    border-left: 2px dashed var(--ink-soft);
}
.route h3 { margin-bottom: 0.3rem; }
.route p { margin: 0; }
@media (min-width: 52rem) {
    .route { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
    .route li { padding-left: 0; padding-top: 3.75rem; }
    .route li:not(:last-child)::after {
        left: 2.6rem; right: -2.5rem; top: calc(1.1rem - 1px); bottom: auto;
        border-left: 0; border-top: 2px dashed var(--ink-soft);
    }
}

/* =========================================================================
   Lists
   ========================================================================= */

/* Library: four lists */
.lists { display: grid; gap: 1.1rem; margin: 1.5rem 0 0; }
@media (min-width: 40rem) { .lists { grid-template-columns: 1fr 1fr; } }
.lists div { border-left: 3px solid var(--map-green); padding-left: 1rem; }
.lists dt { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.lists dd { margin: 0.2rem 0 0; }

/* Settings: a raised card, each item a small inked waypoint */
.settings-card {
    background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius);
    box-shadow: var(--card-shadow); padding: 1.25rem 1.5rem;
}
.settings-card > p { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.settings-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.settings-list li { position: relative; padding-left: 1.6rem; }
.settings-list li::before {
    content: ""; position: absolute; left: 0.2rem; top: 0.62em;
    width: 0.55rem; height: 0.55rem; border-radius: 50%;
    border: 2px solid var(--green-ink);
}

/* =========================================================================
   On the sea: privacy promise and the final call to action
   ========================================================================= */

.promise ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.8rem; }
.promise li { padding-left: 1.8rem; position: relative; }
.promise li::before { content: "\2715"; position: absolute; left: 0; color: var(--map-green); font-weight: 700; }

.download img { width: 128px; height: 128px; margin-bottom: 1.5rem; }
@media (min-width: 40rem) {
    .download .wrap { display: flex; gap: 2.5rem; align-items: center; }
    .download img { margin-bottom: 0; }
}
.download h2 { margin-bottom: 0.3rem; }
.download .fine-print { color: var(--sea-soft); }

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