:root{
  --navy:#20376B; --green:#54995D; --deep:#3B7950; --fire:#EF9037; --gold:#F3B445;
  --paper:#F3F1EA; --white:#FFFFFF; --char:#1E2A3F; --rule:#DCD8CC;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", "Segoe UI", Arial, sans-serif;
}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--char);font:400 1.0625rem/1.6 var(--sans)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--fire);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
.label{font:600 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--deep);margin-bottom:1rem}
h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--navy);line-height:1.05}
h2{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:18ch}
.lede{font-size:1.2rem;max-width:52ch;margin-top:1.25rem}
.btn{display:inline-block;background:var(--navy);color:var(--paper);font:600 1rem/1 var(--sans);padding:1rem 1.5rem;border-radius:6px;text-decoration:none;border:2px solid var(--navy)}
.btn:hover{background:var(--fire);border-color:var(--fire);color:var(--navy)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn.ghost:hover{background:var(--paper);color:var(--navy)}
img.ph{width:100%;height:100%;object-fit:cover;padding:0;display:block}
.ph{background:linear-gradient(160deg,#5E7D72 0%,#3E5A55 45%,#24364A 100%);color:#E6E9E4;display:grid;place-items:center;text-align:center;font-size:.85rem;padding:1rem}

/* header */
header{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:4px solid var(--green)}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;padding-bottom:.75rem}
.logo{display:block;line-height:0}
.logo img{height:64px;width:auto}
nav a{color:var(--navy);text-decoration:none;font-weight:600;margin-left:1.6rem}
nav a:hover{color:var(--fire)}

/* hero */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;color:var(--paper);overflow:hidden}
.hero .bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 70% 75%,rgba(239,144,55,.35),transparent 45%),
  linear-gradient(180deg,#7D8F8C 0%,#4F6A64 40%,#2B4250 70%,#1B2A44 100%)}
.hero .bg img,.hero .bg video{width:100%;height:100%;object-fit:cover}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(32,55,107,.9) 0%,rgba(32,55,107,.55) 55%,rgba(32,55,107,.3) 100%)}
.hero .inner{position:relative;z-index:2;padding-bottom:5rem}
.hero h1{color:var(--paper);font-size:clamp(3rem,9vw,7.5rem);line-height:.92;max-width:10ch}
.hero p{font-size:clamp(1.15rem,2vw,1.4rem);max-width:36ch;margin:1.5rem 0 2rem}
.hero .btn{margin-right:.75rem;margin-bottom:.75rem}
.hero .btn:not(.ghost){background:var(--fire);border-color:var(--fire);color:var(--navy)}
.hero .btn:not(.ghost):hover{background:var(--gold);border-color:var(--gold)}
.credits-link{margin-top:1rem;font-size:.8rem}.credits-link a{color:var(--deep)}
.asset-note{position:absolute;right:1.5rem;top:6rem;z-index:2;font-size:.75rem;opacity:.7;max-width:22ch;text-align:right}

section{padding:6rem 0}

/* worlds */
.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
.world{position:relative;aspect-ratio:3/4;color:var(--paper);text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;padding:1.75rem;overflow:hidden;border-radius:4px}
.world .ph{position:absolute;inset:0}
.world::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(32,55,107,.9),transparent 60%)}
.world *{position:relative;z-index:1}
.world .ph{z-index:0}
.world h3{color:var(--paper);font-size:2.4rem}
.world p{margin-top:.4rem}
.world span{display:inline-block;margin-top:1rem;font-weight:600;color:var(--gold)}

/* seasons */
.seasons{background:var(--navy);color:var(--paper)}
.seasons h2{color:var(--paper)}
.seasons .label{color:var(--gold)}
.season-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
.season .ph{aspect-ratio:4/5;border-radius:4px;height:auto}
.season h3{color:var(--paper);font-size:1.3rem;margin-top:1rem}
.season p{font-size:.95rem;opacity:.85}
.s1 .ph{background:linear-gradient(180deg,#9FC3D6,#6E9E73)}
.s2 .ph{background:linear-gradient(180deg,#59666E,#3B4F4A)}
.s3 .ph{background:linear-gradient(180deg,#C9CFCC,#8A9893)}
.s4 .ph{background:linear-gradient(180deg,#22304D,#7A4A2A)}

/* products */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-top:3rem}
.product{background:var(--white);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.product .ph{aspect-ratio:4/3;height:auto;background:var(--white);color:var(--deep)}
.product img.contain{object-fit:contain;padding:1rem}
.product .body{padding:1.5rem}
.product h3{font-size:1.6rem}
.product .benefit{margin-top:.4rem}
.product .spec{font-size:.9rem;color:#5A6166;margin-top:.75rem}
.buy{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.soon{font:700 1.4rem/1 var(--serif);color:var(--fire)}
.price{font:700 1.8rem/1 var(--serif);color:var(--navy)}
.ship{font-size:.85rem;color:#5A6166;margin-top:.75rem}

/* split stories */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}
.split .ph{aspect-ratio:4/5;border-radius:4px;height:auto}
.split.rev .ph{order:2}
.split .btn{margin-top:2rem}
.keep{background:var(--white)}

/* field notes */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem}
.note .ph{aspect-ratio:3/2;border-radius:4px;height:auto}
.note .label{margin:1.25rem 0 .5rem}
.note h3{font-size:1.45rem}
.note a{text-decoration:none}
.note a:hover h3{color:var(--deep)}

/* newsletter */
.news{background:var(--deep);color:var(--paper);text-align:left}
.news h2{color:var(--paper)}
.news form{display:flex;gap:.75rem;margin-top:2rem;max-width:520px;flex-wrap:wrap}
.news input{flex:1 1 240px;padding:1rem;border-radius:6px;border:2px solid var(--paper);font:inherit;background:var(--paper);color:var(--char)}
.news .btn{background:var(--fire);border-color:var(--fire);color:var(--navy)}
.news .btn:hover{background:var(--gold);border-color:var(--gold)}

/* contact + footer */
.contact dl{display:grid;grid-template-columns:max-content 1fr;gap:.6rem 1.5rem;margin-top:2rem}
.contact dt{font-weight:600;color:var(--navy)}
footer{background:var(--paper);color:var(--navy);padding:3.5rem 0;font-size:.9rem;border-top:6px solid var(--navy)}
footer .f-logo{margin-bottom:1.5rem;line-height:0}
footer .f-logo img{height:96px;width:auto}
footer p{max-width:80ch}
footer p+p{margin-top:.6rem}

@media (max-width:860px){
  .logo img{height:52px}
  nav a:not(.shop){display:none}
  .worlds,.notes{grid-template-columns:1fr}
  .world{aspect-ratio:4/3}
  .season-row{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:2rem}
  .split.rev .ph{order:0}
  .credits{margin-top:1.5rem}.credits summary{cursor:pointer;color:var(--paper)}.credits ul{margin-top:.75rem;padding-left:1.1rem;font-size:.8rem}
.asset-note{display:none}
  section{padding:4.5rem 0}
}
@media (max-width:480px){.contact dl{grid-template-columns:1fr}}

/* inner pages */
.page-head{padding:4.5rem 0 2.5rem}
.page-head h1{font-size:clamp(2.4rem,5.5vw,4rem);max-width:16ch}
.page-head .lede{margin-top:1.25rem}
.page-hero{max-width:1180px;margin:0 auto;padding:0 1.5rem}
.page-hero img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:4px}
.prose{max-width:68ch;margin:0 auto;padding:3.5rem 1.5rem 5rem;font-size:1.125rem}
.prose h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:2.75rem 0 .9rem;max-width:none}
.prose p+p{margin-top:1.1rem}
.prose ul{margin:1rem 0 0;padding-left:1.25rem}
.prose li{margin-bottom:.5rem}
.prose .note-box{background:var(--white);border-left:5px solid var(--fire);padding:1.25rem 1.5rem;margin:2rem 0;border-radius:0 4px 4px 0}
.prose .back{display:inline-block;margin-top:3rem;font-weight:600;color:var(--deep)}
.notes-index{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-bottom:5rem}
.notes-index p.excerpt{margin-top:.6rem;color:var(--char)}
nav a.on{color:var(--fire)}
@media (max-width:860px){.notes-index{grid-template-columns:1fr}}

/* about / story page */
.story-intro{max-width:62ch;margin:0 auto;padding:3.5rem 1.5rem 1rem;font-size:1.2rem}
.story-intro p+p{margin-top:1.1rem}
.story-intro .kicker{font:500 clamp(1.4rem,2.6vw,1.8rem)/1.35 var(--serif);color:var(--navy)}
.chapter{padding:5rem 0}
.chapter.alt{background:var(--white)}
.chapter .split{align-items:start}
.chapter .split > div{font-size:1.1rem}
.chapter .split p+p{margin-top:1rem}
.chapter h2{margin-bottom:1.5rem}
.chapter .split .ph{position:sticky;top:7rem}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:2.5rem}
.strip img{aspect-ratio:1/1;object-fit:cover;border-radius:4px;width:100%}
.solo{max-width:62ch;font-size:1.1rem}
.solo p+p{margin-top:1rem}
.punch{font:700 clamp(1.3rem,2.4vw,1.6rem)/1.3 var(--serif);color:var(--deep);margin-top:1.5rem}
.quote{background:var(--navy);color:var(--paper);padding:5rem 0;text-align:center}
.quote blockquote{font:700 clamp(1.9rem,4.4vw,3.2rem)/1.15 var(--serif);max-width:20ch;margin:0 auto;color:var(--paper)}
.quote blockquote span{color:var(--gold)}
.closing{padding:5.5rem 0;text-align:center}
.closing p.big{font:700 clamp(1.6rem,3.6vw,2.6rem)/1.2 var(--serif);color:var(--navy);max-width:22ch;margin:0 auto}
.closing .sign{margin-top:2rem;font:600 .85rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
.closing .btn{margin-top:2.5rem}
@media (max-width:860px){.strip{grid-template-columns:1fr 1fr}.chapter .split .ph{position:static}.chapter{padding:3.5rem 0}}