:root { --ink:#0b1f3a; --ink-soft:#39516a; --paper:#eef0ec; --paper-deep:#d8ded8; --sky:#a8c7d9; --signal:#b5371b; --serif:"Brygada 1918", Georgia, serif; --sans:"Onest", Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.48; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--serif); font-weight:500; letter-spacing:-.045em; } a { color:inherit; } .skip-link { position:fixed; left:1rem; top:-4rem; z-index:10; padding:.8rem 1rem; color:#fff; background:var(--ink); } .skip-link:focus { top:1rem; } :focus-visible { outline:3px solid var(--signal); outline-offset:4px; }
.site-header { min-height:96px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:0 4.5vw; background:var(--paper); } .brand { display:inline-flex; width:fit-content; align-items:center; } .brand img { display:block; height:64px; width:auto; object-fit:contain; } nav { display:flex; gap:1.7rem; } nav a,.header-action,.site-footer a { font-size:.9rem; font-weight:650; text-decoration:none; } nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:.35em; } .header-action { justify-self:end; } .header-action span { color:var(--signal); font-size:1.1rem; } .menu-toggle { display:none; border:0; color:var(--ink); background:transparent; font:inherit; font-weight:700; }
.journal-hero { min-height:calc(100svh - 96px); display:grid; grid-template-columns:42% 1fr; padding:0 4.5vw 4.5rem; background:var(--paper); } .hero-copy { grid-column:2; align-self:end; max-width:54rem; } h1 { display:flex; flex-direction:column; margin:0 0 1.5rem; font-size:clamp(5rem,9vw,9.5rem); line-height:.78; } h1 span { overflow:hidden; } h1 span::after { content:""; display:block; animation:headline-rise .85s cubic-bezier(.16,1,.3,1) both; } h1 span { animation:headline-rise .85s cubic-bezier(.16,1,.3,1) both; } h1 span + span { animation-delay:.11s; } .hero-copy p { max-width:38ch; margin:0 0 2rem; color:var(--ink-soft); font-size:clamp(1.05rem,1.5vw,1.35rem); } .button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:.8rem; padding:.8rem 1.1rem; border:0; background:var(--ink); color:#fff; font:700 .88rem var(--sans); text-decoration:none; transition:transform .2s ease,background .2s ease; } .button:hover { transform:translateY(-2px); background:#17304e; }
.edition-intro { display:grid; grid-template-columns:42% 1fr; column-gap:0; padding:8rem 4.5vw 7rem; background:var(--sky); } .edition-intro h2 { grid-column:1; max-width:9ch; margin:0; font-size:clamp(3rem,5.3vw,5.7rem); line-height:.9; } .edition-intro > p { grid-column:2; align-self:end; max-width:33ch; margin:0 0 4rem; font-size:1.2rem; } .edition-facts { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:4rem; } .edition-facts div { max-width:18rem; } .edition-facts strong { display:block; font:500 clamp(1.5rem,2.2vw,2.35rem)/1 var(--serif); letter-spacing:-.04em; } .edition-facts span { display:block; margin-top:.55rem; color:#28415d; }
.featured { min-height:100svh; display:grid; grid-template-columns:42% 1fr; align-items:center; padding:7rem 4.5vw; background:var(--ink); color:#fff; } .featured-photo { grid-column:1; width:calc(100% - 2.5rem); height:min(75svh,48rem); overflow:hidden; background:#17304e; } .featured-photo img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.78) contrast(1.06); } .featured-copy { grid-column:2; align-self:end; padding:0 0 3rem 6vw; max-width:49rem; } .article-meta { margin:0 0 1.1rem; color:#a8c7d9; font-size:.9rem; font-weight:700; } .featured h2 { max-width:9ch; margin:0 0 1.6rem; font-size:clamp(3.3rem,5.4vw,6.1rem); line-height:.88; } .featured-copy > p:not(.article-meta) { max-width:37ch; margin-bottom:2rem; color:rgba(255,255,255,.76); font-size:1.08rem; } .article-link { color:#fff; font-weight:700; text-underline-offset:.35em; }
.article-index { padding:8rem 4.5vw; background:var(--paper); } .index-intro { display:grid; grid-template-columns:42% 1fr; align-items:end; margin-bottom:4.5rem; } .index-intro h2 { grid-column:1; margin:0; font-size:clamp(3.1rem,5vw,5.2rem); line-height:.9; } .filter-group { grid-column:2; display:flex; flex-wrap:wrap; gap:.65rem; align-items:flex-end; } .filter-button { border:0; padding:.7rem .85rem; background:transparent; color:var(--ink); font:700 .9rem var(--sans); cursor:pointer; } .filter-button.is-active { background:var(--ink); color:#fff; } .article-list { margin-left:42%; } .article-row { display:grid; grid-template-columns:9.4rem 1fr auto; gap:2rem; align-items:center; min-height:10.5rem; padding:1rem 0; text-decoration:none; transition:opacity .2s ease; } .article-row:hover h3 { text-decoration:underline; text-underline-offset:.18em; } .article-row img { width:9.4rem; height:7.2rem; object-fit:cover; filter:saturate(.82); } .article-row .article-meta { margin:0 0 .35rem; color:var(--signal); font-size:.76rem; } .article-row h3 { max-width:24ch; margin:0; font-size:clamp(1.55rem,2.2vw,2.3rem); line-height:1; } .read-time { color:var(--ink-soft); font-size:.88rem; white-space:nowrap; } .empty-state { margin:3rem 0 0 42%; font-size:1.1rem; }
.journal-close { min-height:90svh; display:grid; grid-template-columns:1fr 42%; align-items:end; gap:5vw; padding:7rem 4.5vw 4.5rem; background:var(--ink); color:#fff; } .journal-close h2 { max-width:9ch; margin:0; font-size:clamp(4rem,8vw,8.8rem); line-height:.84; } .journal-close div { max-width:27rem; padding-bottom:.6rem; } .journal-close p { margin-bottom:2rem; color:rgba(255,255,255,.72); font-size:1.18rem; } .button-accent { background:var(--signal); } .button-accent:hover { background:#8f2b16; }.site-footer { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2rem 4.5vw; color:#fff; background:#09182c; } .site-footer .brand img { height:42px; filter:brightness(1.3); } .site-footer p { margin:0; color:rgba(255,255,255,.62); font-size:.82rem; }
@keyframes headline-rise { from { transform:translateY(105%); opacity:0; } to { transform:translateY(0); opacity:1; } }
.featured h2 { max-width:10ch; margin-bottom:0; } .featured-copy > .article-meta { margin:1.1rem 0; } .article-row .article-meta { margin:.45rem 0 0; font-size:.82rem; }
.edition-intro > *, .featured > *, .article-index > *, .article-row, .journal-close > * { animation:section-arrival .72s cubic-bezier(.16,1,.3,1) both; } .edition-intro > :nth-child(2), .featured > :nth-child(2), .article-index > :nth-child(2), .journal-close > :nth-child(2) { animation-delay:.1s; } .article-row:nth-child(2) { animation-delay:.06s; } .article-row:nth-child(3) { animation-delay:.12s; } .article-row:nth-child(4) { animation-delay:.18s; } .article-row:nth-child(5) { animation-delay:.24s; } @keyframes section-arrival { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:900px) { .site-header { min-height:80px; grid-template-columns:1fr auto; padding:0 5vw; } .brand img { height:58px; } .menu-toggle { display:block; } nav { display:none; grid-column:1/-1; grid-row:2; flex-direction:column; gap:.8rem; padding:0 0 1rem; } nav.is-open { display:flex; } .header-action { display:none; } .journal-hero { min-height:calc(90svh - 80px); } .featured { grid-template-columns:1fr 1fr; gap:2rem; } .featured-copy { padding:0; } .article-list { margin-left:25%; } .index-intro { grid-template-columns:25% 1fr; } }
@media (max-width:600px) { .journal-hero { min-height:calc(100svh - 72px); display:block; padding:0 5vw 2.2rem; } .hero-copy { padding-top:45svh; } h1 { font-size:18vw; } .edition-intro,.featured,.index-intro,.journal-close { display:block; padding-left:5vw; padding-right:5vw; } .edition-intro { padding-top:5rem; padding-bottom:5rem; } .edition-intro > p { margin:2rem 0 3rem; } .edition-facts { display:grid; grid-template-columns:1fr 1fr; gap:2rem 1.2rem; margin-top:0; } .edition-facts strong { font-size:1.55rem; } .featured { min-height:auto; padding-top:4rem; padding-bottom:4rem; } .featured-photo { width:80%; height:31rem; margin-left:auto; } .featured-copy { padding-top:3rem; } .featured h2 { font-size:15vw; } .article-index { padding:5rem 5vw; } .index-intro { margin-bottom:2.5rem; } .index-intro h2 { margin-bottom:2rem; font-size:14vw; } .filter-group { gap:.25rem; } .filter-button { padding:.65rem .7rem; font-size:.82rem; } .article-list { margin:0; } .article-row { grid-template-columns:5.4rem 1fr; gap:1rem; min-height:8rem; } .article-row img { width:5.4rem; height:5.4rem; } .article-row h3 { font-size:1.48rem; } .read-time { grid-column:2; margin-top:-1.8rem; font-size:.75rem; } .empty-state { margin-left:0; } .journal-close { min-height:80svh; padding-top:5rem; padding-bottom:3rem; } .journal-close h2 { font-size:15vw; } .journal-close div { margin-top:4rem; } .site-footer { align-items:flex-start; flex-direction:column; padding:2rem 5vw; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* Articles reset: turn the sparse report treatment into a denser editorial travel journal. */
.site-header { min-height:76px; padding:0 clamp(1.25rem,4vw,4.5rem); }
.brand img { height:52px; }
nav { gap:1.35rem; }
nav a, .header-action { font-size:.84rem; }
.journal-hero { position:relative; min-height:650px; grid-template-columns:minmax(0,1.05fr) minmax(26rem,.95fr); padding:0 clamp(1.25rem,6vw,7rem); overflow:hidden; background:#dbe4df; }
.journal-hero::after { content:""; position:absolute; inset:0 0 0 54%; background:url("assets/trekking/hero-high-country.jpg") center/cover no-repeat; filter:saturate(.8) contrast(1.03); }
.journal-hero::before { display:none; }
.hero-copy { position:relative; z-index:2; grid-column:1; align-self:center; max-width:38rem; padding:4rem 0 3rem; }
h1 { margin-bottom:1.4rem; font-size:clamp(5.2rem,9vw,10rem); line-height:.78; }
.hero-copy p { max-width:31ch; margin-bottom:2.2rem; color:#203c56; font-size:clamp(1.05rem,1.25vw,1.25rem); }
.edition-intro { grid-template-columns:1fr minmax(19rem,.8fr); gap:clamp(2rem,6vw,8rem); padding:6rem clamp(1.25rem,6vw,7rem); }
.edition-intro h2 { max-width:10ch; font-size:clamp(3.4rem,5vw,6.2rem); }
.edition-intro > p { grid-column:2; margin:0; max-width:35ch; font-size:1.18rem; }
.edition-facts { grid-column:1/-1; grid-template-columns:repeat(3,1fr); gap:4vw; margin-top:3.2rem; }
.edition-facts div { max-width:22rem; }
.edition-facts strong { font-size:clamp(1.65rem,2.3vw,2.65rem); }
.edition-facts img { display:block; width:100%; height:12rem; margin-top:1.5rem; object-fit:cover; filter:saturate(.78) contrast(1.05); }
.featured { min-height:720px; grid-template-columns:minmax(20rem,.9fr) minmax(0,1fr); gap:clamp(3rem,8vw,10rem); padding:5.5rem clamp(1.25rem,6vw,7rem); overflow:hidden; }
.featured-photo { grid-column:1; width:100%; height:clamp(28rem,44vw,42rem); }
.featured-copy { grid-column:2; align-self:center; min-width:0; padding:0; max-width:38rem; }
.featured h2 { max-width:10ch; font-size:clamp(3.7rem,5.5vw,7rem); }
.featured-copy > p:not(.article-meta) { font-size:1.12rem; }
.article-index { padding:6rem clamp(1.25rem,6vw,7rem) 7rem; }
.index-intro { grid-template-columns:minmax(18rem,.72fr) 1.28fr; gap:3rem; margin-bottom:3.5rem; }
.index-intro h2 { font-size:clamp(3.4rem,5vw,6rem); }
.filter-group { justify-content:flex-start; }
.filter-button { padding:.8rem 1rem; font-size:.9rem; }
.article-list { margin-left:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,7vw,9rem); }
.article-row { grid-template-columns:8.5rem 1fr auto; gap:1.35rem; min-height:10.25rem; }
.article-row img { width:8.5rem; height:7rem; }
.article-row h3 { max-width:19ch; font-size:clamp(1.45rem,1.8vw,2.1rem); }
.journal-close { min-height:540px; grid-template-columns:1.1fr .9fr; align-items:center; gap:8vw; padding:5rem clamp(1.25rem,6vw,7rem); }
.journal-close h2 { max-width:8ch; font-size:clamp(4.2rem,7.4vw,8.5rem); }
.journal-close div { padding:0; }
.site-footer { padding:1.7rem clamp(1.25rem,4vw,4.5rem); }
@media (max-width:900px) { .journal-hero { min-height:600px; grid-template-columns:1fr .85fr; } .article-list { grid-template-columns:1fr; } .edition-intro { gap:3rem; } }
@media (max-width:600px) { .site-header { min-height:68px; } .brand img { height:48px; } .journal-hero { display:block; min-height:680px; padding:0 5vw; background:#dbe4df; } .journal-hero::after { inset:52% 0 0; background-position:center; } .hero-copy { padding:5.6rem 0 0; } h1 { font-size:21vw; } .hero-copy p { max-width:28ch; font-size:1rem; } .edition-intro { padding-top:4.5rem; padding-bottom:4.5rem; } .edition-intro > p { font-size:1.05rem; } .edition-facts { gap:2rem 1.3rem; } .featured { display:grid; grid-template-columns:1fr; gap:2.5rem; padding-top:4rem; padding-bottom:4.5rem; } .featured-photo { width:100%; height:25rem; margin:0; } .featured-copy { padding:0; } .featured h2 { font-size:15vw; } .index-intro { display:block; } .index-intro h2 { margin-bottom:1.8rem; font-size:15vw; } .article-row { grid-template-columns:6.1rem minmax(0,1fr) auto; gap:.85rem; } .article-row img { width:6.1rem; height:5.35rem; } .article-row h3 { font-size:1.4rem; } .article-row .article-meta { font-size:.82rem; } .read-time { grid-column:3; margin:0; align-self:end; } .journal-close { display:grid; grid-template-columns:1fr; min-height:590px; gap:2rem; } .journal-close h2 { font-size:17vw; } }