:root { --ink:#0b1f3a; --navy:#07172c; --mist:#e8eee9; --gold:#d9a74f; --coral:#ffb19c; --serif:"Brygada 1918", Georgia, serif; --sans:"Onest", Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--mist); color:var(--ink); font:16px/1.5 var(--sans); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--serif); font-weight:500; letter-spacing:-.035em; } a { color:inherit; } :focus-visible { outline:3px solid var(--coral); outline-offset:4px; } .skip-link { position:fixed; z-index:20; top:-4rem; left:1rem; padding:.7rem 1rem; background:#fff; color:var(--ink); font-weight:700; } .skip-link:focus { top:1rem; }
.site-header { position:absolute; z-index:5; width:100%; min-height:84px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:0 4.5vw; color:#fff; } .brand { display:inline-flex; width:fit-content; text-decoration:none; } .site-header .brand { position:relative; isolation:isolate; } .site-header .brand::before { content:""; position:absolute; z-index:-1; width:8.5rem; height:5.2rem; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(221,174,77,.28),transparent 74%); } .brand img { height:58px; width:auto; object-fit:contain; filter:brightness(1.32) saturate(.9); } nav { display:flex; gap:1.8rem; } nav a,.header-action,.site-footer a { font-size:.79rem; font-weight:600; text-decoration:none; } nav a { color:rgba(255,255,255,.84); } nav a:hover,.site-footer a:hover { text-decoration:underline; text-underline-offset:.28em; } .header-action { justify-self:end; } .header-action span { color:var(--coral); } .menu-toggle { display:none; }
.trek-hero { position:relative; min-height:min(760px,92svh); display:flex; align-items:end; overflow:hidden; background:var(--navy); color:#fff; isolation:isolate; } .trek-hero::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(5,18,34,.96) 0%,rgba(5,18,34,.72) 42%,rgba(5,18,34,.16) 100%); } .trek-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.8) contrast(1.08); } .hero-copy { position:relative; z-index:2; width:min(45rem,63vw); padding:9.5rem 7vw 6.5rem; } .kicker { margin-bottom:.85rem; color:inherit; font-size:.8rem; font-weight:700; } .hero-copy h1 { max-width:9.6ch; margin-bottom:1.35rem; font-size:clamp(3.8rem,6.4vw,7.2rem); line-height:.9; } .hero-copy p:not(.kicker) { max-width:42ch; color:rgba(255,255,255,.84); font-size:1.1rem; } .button { display:inline-flex; align-items:center; gap:.85rem; margin-top:1.45rem; padding:1rem 1.25rem; font-size:.88rem; font-weight:700; text-decoration:none; } .button-light { color:var(--ink); background:#fff; } .button-dark { color:#fff; background:var(--ink); } .hero-caption { position:absolute; z-index:2; right:4.5vw; bottom:1.5rem; font-size:.72rem; color:rgba(255,255,255,.77); }
.trail-intro,.destinations,.guide,.packages,.brief { padding:clamp(5rem,10vw,10rem) 7vw; } .trail-intro { display:grid; grid-template-columns:1fr .9fr; gap:clamp(3rem,11vw,12rem); background:var(--gold); } .trail-intro h2 { max-width:8ch; font-size:clamp(3rem,5.4vw,6rem); line-height:.91; } .trail-intro div { align-self:end; } .trail-intro p { max-width:40ch; font-size:1.17rem; } .trail-intro p:last-child { margin-bottom:0; }
.destinations { background:var(--mist); } .section-head { display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(3rem,10vw,11rem); align-items:end; margin-bottom:3.5rem; } .section-head h2,.guide h2,.brief h2 { max-width:12ch; margin:0; font-size:clamp(3rem,5vw,5.7rem); line-height:.92; } .section-head>p { max-width:34ch; margin:0; color:#29405c; font-size:1.08rem; } .filter-row { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:3rem; } .filter { padding:.65rem .9rem; border:1px solid rgba(11,31,58,.35); border-radius:0; color:var(--ink); background:transparent; font:600 .85rem var(--sans); cursor:pointer; } .filter.is-active,.filter:hover { color:#fff; background:var(--ink); border-color:var(--ink); } .route-list { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; margin:0; padding:0; list-style:none; } .route-list li { grid-column:span 4; min-height:29rem; } .route-list li:nth-child(1),.route-list li:nth-child(6),.route-list li:nth-child(10) { grid-column:span 8; } .route-list a { position:relative; display:block; height:100%; overflow:hidden; color:#fff; background:var(--navy); text-decoration:none; } .route-list img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .55s ease; } .route-list a::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 32%,rgba(4,18,34,.87)); } .route-list a:hover img { transform:scale(1.05); } .route-list div { position:absolute; z-index:1; right:1.35rem; bottom:1.35rem; left:1.35rem; } .route-list span { display:block; margin-bottom:.4rem; font-size:.74rem; font-weight:700; } .route-list h3 { margin:0 0 .45rem; font-size:clamp(1.8rem,2.4vw,2.6rem); line-height:.98; } .route-list p { max-width:38ch; margin:0; color:rgba(255,255,255,.84); }
.guide { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(3rem,10vw,11rem); background:var(--navy); color:#fff; } .guide>div:first-child { align-self:start; } .guide .kicker { color:var(--coral); } .guide-notes { display:grid; gap:3.2rem; } .guide article h3 { margin-bottom:.5rem; font-size:2rem; } .guide article p { max-width:48ch; margin:0; color:rgba(255,255,255,.75); font-size:1.05rem; }
.packages { background:#bdd4e2; } .package-list { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .package-list a { min-height:19rem; display:flex; flex-direction:column; justify-content:end; padding:1.4rem; background:var(--ink); color:#fff; text-decoration:none; transition:background .2s ease,transform .2s ease; } .package-list a:nth-child(2) { background:#305777; } .package-list a:nth-child(3) { background:#42735f; } .package-list a:nth-child(4) { background:#80543f; } .package-list a:hover { transform:translateY(-5px); } .package-list span { color:rgba(255,255,255,.78); font-size:.76rem; font-weight:700; } .package-list strong { margin:.5rem 0 1rem; font:500 2rem/.98 var(--serif); letter-spacing:-.03em; } .package-list em { color:#fff; font-size:.88rem; font-style:normal; }
.brief { display:grid; grid-template-columns:1fr .9fr; gap:clamp(3rem,10vw,11rem); background:var(--coral); } .brief>div:last-child { align-self:end; } .brief>div:last-child p { max-width:37ch; font-size:1.15rem; } .brief .button { margin-bottom:0; }.site-footer { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2rem 4.5vw; color:#fff; background:#061426; } .site-footer .brand img { height:42px; filter:none; } .site-footer p { margin:0; color:rgba(255,255,255,.62); font-size:.78rem; }
@media (max-width:900px) { .site-header { grid-template-columns:1fr auto; padding:0 5vw; } .menu-toggle { display:block; border:0; color:#fff; background:transparent; font:700 .8rem var(--sans); } nav { display:none; grid-column:1/-1; grid-row:2; padding-bottom:1rem; flex-direction:column; gap:.7rem; } nav.is-open { display:flex; } .header-action { display:none; } .trail-intro,.guide,.brief,.section-head { grid-template-columns:1fr; } .trail-intro,.guide,.brief { gap:3rem; } .route-list li,.route-list li:nth-child(n) { grid-column:span 6; } .package-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .site-header { min-height:64px; } .brand img { height:50px; } .trek-hero { min-height:43rem; } .hero-copy { width:100%; padding:7.2rem 5vw 4rem; } .hero-copy h1 { max-width:10.5ch; font-size:clamp(3.35rem,13.5vw,4.3rem); } .hero-caption { right:5vw; bottom:1.25rem; } .trail-intro,.destinations,.guide,.packages,.brief { padding:4.5rem 5vw; } .trail-intro h2,.section-head h2,.guide h2,.brief h2 { font-size:clamp(2.8rem,12vw,4rem); } .route-list { grid-template-columns:1fr; } .route-list li,.route-list li:nth-child(n) { grid-column:auto; min-height:25rem; } .package-list { grid-template-columns:1fr; } .package-list a { min-height:14rem; } .site-footer { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:no-preference) { .trek-hero .hero-copy>* { animation:rise .65s both; } .trek-hero .hero-copy>*:nth-child(2) { animation-delay:.06s; } .trek-hero .hero-copy>*:nth-child(3) { animation-delay:.12s; } @keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } }

/* Keep the catalogue header in lockstep with the homepage and route pages. */
.site-header { min-height:96px; }
.site-header .brand::before { width:10.2rem; height:6.3rem; }
.site-header .brand img { height:72px; }
.site-header nav a,
.site-header .header-action { font-size:.94rem; font-weight:650; }
@media (max-width:900px) { .site-header { min-height:80px; } }
@media (max-width:560px) { .site-header { min-height:72px; } .site-header .brand img { height:56px; } }