/* jaynorth.net: a front door to the two JR North sites.
   Off-road tokens from C:\OffRoadWebsite (SPEC 12), photography tokens from C:\PhotographyWebsite. */

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque-variable.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Figtree;
    src: url('../fonts/figtree-variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #F0F0EC;
    --surface: #FFFFFF;
    --ink: #1A1B18;
    --ink-2: #403F39;
    --muted: #5A5C57;
    --line: #D8D8D0;

    /* Off-road */
    --or-accent: #A8400C;
    --or-accent-hover: #8A3308;
    --or-forest: #25332B;
    --or-forest-2: #34473C;
    --or-topo: #4C6355;

    /* Photography */
    --ph-accent: #1E5A5E;
    --ph-accent-hover: #16474A;
    --ph-slate: #2F3A3D;
    --ph-slate-2: #3F4E50;

    --dark: #1A1E1D;
    --on-dark: #DCE2DF;
    --on-dark-muted: #A9B0AD;

    --shadow: 0 1px 2px rgba(26, 27, 24, .06), 0 14px 36px rgba(26, 27, 24, .12);
    --shadow-hover: 0 2px 4px rgba(26, 27, 24, .08), 0 26px 50px rgba(26, 27, 24, .20);
    --radius-card: 16px;
    --radius-pill: 999px;

    --font-display: 'Bricolage Grotesque', Georgia, serif;
    --font-body: Figtree, 'Helvetica Neue', Arial, sans-serif;

    --gutter: 16px;
    --wrap-max: 1120px;
}

@media (min-width: 900px) {
    :root { --gutter: 56px; }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
}

h1, h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

p { margin: 0; }

img, svg { display: block; }

a { color: inherit; }

:focus-visible { outline: 3px solid #E58A4E; outline-offset: 3px; }

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 10;
    padding: 10px 16px;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 600;
}
.skip-link:focus { top: 12px; }

.wrap {
    width: 100%;
    max-width: calc(var(--wrap-max) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---------- Hero: the off-road forest fading into the photography slate ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, var(--or-forest) 0%, #2A3634 55%, var(--ph-slate) 100%);
    color: #fff;
}

.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; }

.hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding-top: 56px;
    padding-bottom: 120px;
    text-align: center;
}

.hero__logo { width: 220px; }
.hero__logo img { width: 100%; height: auto; }

.hero h1 { font-size: 40px; }

.hero p { max-width: 600px; font-size: 18px; color: var(--on-dark); }

@media (min-width: 900px) {
    .hero__inner { padding-top: 80px; padding-bottom: 150px; }
    .hero__logo { width: 320px; }
    .hero h1 { font-size: 60px; }
    .hero p { font-size: 20px; }
}

/* ---------- The two destinations ---------- */
.destinations {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: -84px;
    padding-bottom: 64px;
}

@media (min-width: 760px) {
    .destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: -104px; }
}

.dest {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.dest:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

.dest:focus-visible { outline-offset: 4px; }

.dest--offroad:focus-visible { outline-color: var(--or-accent); }
.dest--photo:focus-visible { outline-color: var(--ph-accent); }

.dest__art { position: relative; height: 190px; overflow: hidden; }
.dest__art svg { width: 100%; height: 100%; }
.dest--offroad .dest__art { background: var(--or-forest); }
.dest--photo .dest__art { background: var(--ph-slate); }

.dest__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 24px 26px 28px; }

.dest__kicker {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dest--offroad .dest__kicker { color: var(--or-accent); }
.dest--photo .dest__kicker { color: var(--ph-accent); }

.dest h2 { font-size: 28px; }

.dest p { color: var(--ink-2); }

.dest__go {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    min-height: 44px;
    margin-top: auto;
    padding: 0 22px;
    border-radius: var(--radius-pill);
    color: #fff;
    font-weight: 600;
    transition: background-color .2s ease;
}
.dest__go svg { width: 18px; height: 18px; transition: transform .2s ease; }
.dest--offroad .dest__go { background: var(--or-accent); }
.dest--photo .dest__go { background: var(--ph-accent); }
.dest--offroad:hover .dest__go { background: var(--or-accent-hover); }
.dest--photo:hover .dest__go { background: var(--ph-accent-hover); }
.dest:hover .dest__go svg { transform: translateX(3px); }

.dest__host { font-size: 14px; color: var(--muted); }

/* ---------- Footer ---------- */
.ftr {
    margin-top: auto;
    background: var(--dark);
    color: var(--on-dark-muted);
    font-size: 15px;
}
.ftr .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    padding-top: 28px;
    padding-bottom: 28px;
}
.ftr nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ftr a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); }
.ftr a:hover { color: #fff; }

/* ---------- 404 ---------- */
.lost { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 72px 0; text-align: center; }
.lost h1 { font-size: 36px; }
.lost p { color: var(--ink-2); }
.lost nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.lost a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: var(--radius-pill);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
    .dest:hover { transform: none; }
}
.lost .go-or { background: var(--or-accent); }
.lost .go-ph { background: var(--ph-accent); }
.lost .go-home { background: var(--dark); }