/* National-park field guide: clear typography, warm paper, and quiet landscape layers. */
:root{
 --paper:#f2eee7;--card:#f8f5ee;--ink:#29352c;--ink-2:#4d574d;--muted:#686e61;
 --line:rgba(41,53,44,.18);--rust:#97603a;--green:#465943;--gold:#ae813e;
 --display:"Anton",Impact,system-ui,sans-serif;
 --body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
 --mono:"IBM Plex Mono",ui-monospace,monospace;--script:"Yellowtail",cursive;
 --max:1280px;
}
html,body{background:var(--paper);color:var(--ink)}
body::before{opacity:.35}
::selection{background:#d9c4a2;color:var(--ink)}
.nav .links{border:0;border-radius:0;background:transparent;backdrop-filter:none}
.nav.scrolled .pill{border:1px solid var(--line);background:transparent;color:var(--ink)!important}
.nav.scrolled .pill:hover{background:var(--green);color:var(--paper)!important}
.landscape-slide img{filter:saturate(.88)}
.trailhead-board{background:transparent;color:var(--ink);border:0;border-block:1px solid var(--line);border-radius:0;box-shadow:none;padding:34px 0 22px}
.trailhead-board::before{display:none}
.park-emblem{color:var(--rust)}
.trailhead-board .label,.trailhead-routes .route-number,.trailhead-routes a>span:last-child{color:var(--rust)}
.trailhead-board p{color:var(--ink-2)}
.trailhead-routes,.trailhead-routes a{border-color:var(--line)}
.trailhead-routes a:hover{background:rgba(151,96,58,.045)}
.trailhead-routes small,.trailhead-footer{color:var(--muted)}
.trail-start{margin:7px auto 0;background:var(--line)}
.trail-svg{max-width:100%}
.trail-bg{stroke:rgba(93,106,75,.24)}
/* All desktop anchors share the page center; alternating panels flank the route. */
.sec-head.exp{width:calc(50% - 60px);padding-left:0}
.sec-head.exp .marker{left:auto;right:-82px;top:40%}
.sec-head.exp h2{font-size:clamp(30px,3.7vw,48px)}
.stop,.stop:nth-child(odd),.stop:nth-child(even){width:calc(50% - 60px);padding:0;margin-bottom:64px}
.stop:nth-child(odd){margin-left:0;margin-right:auto}
.stop:nth-child(even){margin-left:auto;margin-right:0}
.stop+.stop{margin-top:-70px}
.stop:nth-child(odd) .pin{left:auto;right:-82px}
.stop:nth-child(even) .pin{left:-82px;right:auto}
.stop .pin{top:24px;width:44px;height:44px}
.pin .flag{font-size:10px;letter-spacing:.02em}
.stop .card{display:flow-root;padding:24px;border:1px solid var(--line);background:var(--card)}
.stop .wp{font-size:10px;line-height:1.6;margin-bottom:12px}
.stop h3{font-size:clamp(20px,2vw,28px);line-height:1.3;overflow-wrap:normal}
.stop.life h3{font-size:clamp(23px,2.6vw,34px)}
.stop .sub{font-size:13px;line-height:1.6}
.stop p{font-size:14px;line-height:1.75}
.experience-art{margin:0;min-width:0;background:var(--card)}
.experience-art img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.experience-art figcaption{display:none}
/* Keep the real university artwork, rendered like a monochrome printed emblem. */
.university-art img{filter:grayscale(1) contrast(1.25);aspect-ratio:1;object-fit:contain}
.ustc-art{padding:8px}
.unsw-art{padding:4px 0}
.creds{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0;padding:0}
.creds li{font:400 10px/1.5 var(--mono);padding:5px 8px;border:1px solid var(--line);color:var(--ink-2)}
.creds svg{display:none}
/* Original permit and stamp behavior are inherited from style.css. */
.permit{background:var(--card);border:1px solid var(--line);box-shadow:4px 4px 0 #ded9cc}
.p-foot{grid-template-columns:minmax(0,1fr) 160px 200px;gap:20px;padding:26px 32px}
.p-foot .endorse{grid-column:1}
.p-foot .sig{grid-column:3;min-width:0}
.stamp{right:282px;bottom:10px;top:auto;width:120px;height:120px}
/* Woodcut badges sit directly on paper, without colored cartoon patches. */
.badges{gap:38px 40px}
.poi{text-align:center;border:0;padding:0}
.wild-badge{display:block;width:clamp(150px,17vw,210px);height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto 16px;mix-blend-mode:multiply}
.poi h3{margin:10px 0;font-size:19px}
.poi p{max-width:260px;margin:0 auto;font-size:14px;line-height:1.7}
.poi .go{font-size:10px}
.end{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:30px 0 0;color:var(--ink)}
.end .label{color:var(--rust)}
.end h2{font:400 clamp(30px,4vw,48px)/1.3 var(--display);letter-spacing:0;text-transform:none;margin:18px 0 24px}
.end p{color:var(--ink-2);max-width:760px;font-size:16px;line-height:1.75}
.end .row{gap:20px 32px;margin-top:26px}
.end .btn,.end .btn.solid{background:none;color:var(--ink);border:0;border-bottom:1px solid #8d9687;border-radius:0;padding:9px 0;font:500 13px/1.5 var(--body)}
.end .btn:hover{color:var(--rust);border-color:var(--rust);background:none}
.foot{padding-top:18px;letter-spacing:.035em}
@media(max-width:1100px) and (min-width:901px){
 .stop .card{padding:18px}
 .stop h3{font-size:20px}
}
@media(max-width:900px){
 .sec-head.exp{width:auto;padding-left:60px}
 .sec-head.exp .marker{left:0;right:auto;top:0}
 .stop,.stop:nth-child(odd),.stop:nth-child(even){width:auto;margin:0 0 38px 60px;padding:0}
 .stop:nth-child(odd) .pin,.stop:nth-child(even) .pin{left:-60px;right:auto}
 .stop h3{font-size:clamp(24px,4vw,32px)}
 .trail-start{margin-left:21px}
 .p-foot{grid-template-columns:minmax(0,1fr) 130px;padding:24px;gap:20px}
 .p-foot .endorse,.p-foot .sig{grid-column:1}
 .p-foot .sig{max-width:220px}
 .stamp{right:34px;bottom:22px;width:104px;height:104px;top:auto}
}
@media(max-width:560px){
 .sec-head.exp{padding-left:44px}
 .sec-head.exp h2{font-size:clamp(24px,6.5vw,32px)}
 .stop,.stop:nth-child(odd),.stop:nth-child(even){margin-left:44px;margin-bottom:32px}
 .stop:nth-child(odd) .pin,.stop:nth-child(even) .pin{left:-44px;width:32px;height:32px}
 .stop .card{padding:18px 14px}
 .stop .wp{font-size:9px;letter-spacing:.02em}
 .stop h3{font-size:clamp(15px,4vw,22px)}
 .stop.life h3{font-size:22px}
 .stop .sub{font-size:12px}
 .stop p{font-size:13px}
 .creds li{font-size:9px;padding:4px 6px;max-width:100%;overflow-wrap:anywhere}
 .trail-start{margin-left:17px}
 .trailhead-board{padding:24px 0 20px}
 .badges{gap:26px 18px}
 .wild-badge{width:100%;max-width:170px;margin-bottom:10px}
 .poi h3{font-size:16px}
 .poi p{font-size:12px}
 .p-foot{grid-template-columns:1fr;padding:20px 18px 122px}
 .p-foot .endorse,.p-foot .sig{grid-column:1}
 .stamp{bottom:14px;right:40px;width:94px;height:94px}
 .end h2{font-size:clamp(24px,6vw,32px)}
 .end p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
 .permit.stamped,.permit.stamped .stamp{animation:none}
 .stamp,.sig .s,.box path{transition:none!important}
}

/* Illustrations occupy the open side of each desktop timeline entry. */
.park-hero h1{font-size:clamp(76px,10vw,150px);line-height:1;letter-spacing:.01em;text-transform:uppercase}
.sec-head h2{font-size:clamp(44px,6vw,76px);letter-spacing:.01em}
.sec-head.exp h2{font-size:clamp(40px,4.7vw,62px)}
.stop h3,.stop.life h3{font-size:clamp(30px,3vw,44px);line-height:1.15;letter-spacing:.01em}
.stop.illustrated{min-height:340px}
.stop .experience-art{position:absolute;top:50%;left:calc(150% + 120px);width:min(78%,340px);padding:0;transform:translate(-50%,-50%);background:var(--paper)}
.stop:nth-child(even) .experience-art{left:calc(-50% - 120px)}
.stop .university-art{width:min(66%,280px)}
.unsw-art img{filter:saturate(.65) contrast(.95)}
@media(max-width:900px){
 .stop.illustrated{min-height:0}
 .stop .experience-art,.stop:nth-child(even) .experience-art{position:static;transform:none;width:min(60%,260px);margin:24px auto 0}
 .stop .university-art{width:min(55%,220px)}
}
@media(max-width:560px){
 .park-hero h1{font-size:clamp(60px,17vw,90px)}
 .sec-head h2{font-size:clamp(36px,9vw,52px)}
 .sec-head.exp h2{font-size:clamp(32px,8vw,44px)}
 .stop h3,.stop.life h3{font-size:32px}
 .stop .experience-art,.stop:nth-child(even) .experience-art{width:min(74%,240px)}
 .stop .university-art{width:min(66%,200px)}
}

/* A short personal note, following the supplied warm-paper reference. */
#contact{max-width:780px}
.end{padding:0;border:0;background:none;overflow:visible}
.end .sr-only{margin:0;padding:0}
.end .personal-note{max-width:none;margin:0;color:#303c2e;font:500 clamp(17px,1.6vw,21px)/1.85 var(--body);letter-spacing:-.015em}
.end .personal-signature{margin:26px 0 0;color:#a45d35;font:400 30px/1.4 var(--script)}
.end .row{gap:12px 24px;margin-top:24px}
.end .btn,.end .btn.solid{font-size:12px;color:var(--ink-2);border-bottom:0}
.end .btn:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:560px){
 .end .personal-note{font-size:17px;line-height:1.8}
 .end .personal-signature{font-size:28px;margin-top:22px}
}

/* Formal humanist type and restrained trail-guide details. */
body{font-family:var(--body);font-size:16px;line-height:1.7}
.mark{font-family:var(--body);font-weight:600;letter-spacing:0}
.links a{font-size:13px;font-weight:500}
.park-hero .role{font:500 clamp(19px,2vw,25px)/1.4 var(--body);letter-spacing:.015em}
.park-hero .tag{font:400 16px/1.6 var(--body)}
.stop .sub{font:600 15px/1.5 var(--body);letter-spacing:0;color:#795536}
.stop p{font-size:16px;line-height:1.7}
.stop .wp{font-size:9px;letter-spacing:.09em;color:#63705e}
.stop .wp::before{content:"";display:inline-block;width:14px;height:2px;background:#788768;margin-right:9px;vertical-align:middle}
.stop .card{background:rgba(248,245,238,.9);border-color:rgba(77,87,77,.16);border-top:2px solid #9aab8c}
.label{font-family:var(--mono);font-size:10px;color:#65724f;letter-spacing:.12em}
.creds li{font-size:9px;line-height:1.5}
.p-head .agency{font-size:9px;line-height:1.7}
.p-items em{font:400 15px/1.6 var(--body)}
.end .personal-note{font-weight:400;letter-spacing:0;font-size:18px;line-height:1.8}
/* A faint Rainier view carries the hero's scenery into the field-guide directory. */
.trailhead-board{isolation:isolate;overflow:hidden;border-top-color:#829371}
.trailhead-landscape{position:absolute;top:-24px;right:-20px;width:48%;height:230px;object-fit:cover;object-position:center 38%;opacity:.18;filter:saturate(.5);pointer-events:none;z-index:-1;mask-image:linear-gradient(90deg,transparent,#000 50%),linear-gradient(180deg,#000 35%,transparent 100%);mask-composite:intersect}
.trailhead-routes{position:relative}
.trailhead-routes a:hover{background:rgba(111,131,87,.07)}
/* The Matterhorn is a single low-contrast wash beneath all six badges. */
.interest-field{position:relative;isolation:isolate;overflow:hidden;padding:24px 24px 30px;margin-inline:-24px}
.interest-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 53%;transform:scale(1.3);opacity:.36;filter:grayscale(.55) saturate(.6) contrast(1.05);z-index:-1;pointer-events:none;mask-image:radial-gradient(ellipse 53% 45% at 50% 50%,#000 10%,rgba(0,0,0,.65) 55%,transparent 100%),linear-gradient(90deg,transparent 12%,#000 26%,#000 74%,transparent 88%),linear-gradient(180deg,transparent 12%,#000 24%,#000 76%,transparent 88%);mask-composite:intersect}
.badges{position:relative;gap:42px 40px}
.poi p{font-size:15px;line-height:1.65;color:#39483b}
.poi h3{font-size:20px;font-weight:600;letter-spacing:0}
.poi .go{font-size:10px}
/* Smaller university marks, set upright beside their waypoints. */
.stop .university-art{width:min(46%,190px);background:transparent}
@media(max-width:900px){
 .stop .university-art,.stop:nth-child(even) .university-art{width:min(40%,160px)}
 .trailhead-landscape{width:60%;height:220px;opacity:.12}
}
@media(max-width:560px){
 .park-hero .role{font-size:20px}
 .park-hero .tag{font-size:14px}
 .stop .sub{font-size:14px}
 .stop p{font-size:15px;line-height:1.7}
 .stop .wp{font-size:8px;letter-spacing:.04em}
 .stop .university-art,.stop:nth-child(even) .university-art{width:min(54%,145px)}
 .trailhead-landscape{width:72%;height:180px;opacity:.1}
 .interest-field{padding:16px 10px 22px;margin-inline:-10px}
 .interest-landscape{opacity:.3;object-position:51% center;transform:scale(1.12)}
 .badges{gap:30px 18px}
 .poi h3{font-size:17px}
 .poi p{font-size:14px}
 .end .personal-note{font-size:16px;line-height:1.75}
}

/* A single trailhead leads directly into the route. */
.trailhead-board{border-bottom:0;padding-bottom:0}
.trailhead-intro{justify-content:center;text-align:center;padding-bottom:0;gap:18px}
.trailhead-board h2{margin-bottom:0}
.trailhead-board .park-emblem{width:48px;height:58px}
.trailhead-landscape{height:170px;top:-22px}
.trail-start{margin-top:18px}
.stop .experience-art:not(.university-art){width:min(64%,270px)}
@media(max-width:900px){
 .trailhead-intro{justify-content:flex-start;text-align:left}
 .stop .experience-art:not(.university-art){width:min(48%,210px)}
}
@media(max-width:560px){
 .trailhead-intro{gap:12px}
 .trailhead-board .park-emblem{width:34px;height:42px}
 .stop .experience-art:not(.university-art){width:min(64%,190px)}
}
/* The white JPEG blends directly into the page without a circular backing. */
.stop .ustc-art{padding:0}
.ustc-art .art-open{background:transparent;border-radius:0;overflow:visible;padding:0}
.trailhead-landscape{top:0;right:0;height:100%;opacity:.14;mask-image:linear-gradient(90deg,transparent,#000 48%,transparent 100%),linear-gradient(180deg,transparent,#000 35%,transparent 100%);mask-composite:intersect}

/* One shared gap between modules: Experience → Toolkit → Points of Interest → closing note. */
:root{--module-gap:clamp(88px,10.5vw,152px)}
#trail{padding-bottom:0}
.stops .stop:last-child{margin-bottom:0}
#toolkit,#poi{padding-top:var(--module-gap);padding-bottom:0}
/* The badge field keeps a little wash below its last row, so the note starts that much sooner. */
#contact{padding-top:calc(var(--module-gap) * .5 - 30px);padding-bottom:clamp(56px,6vw,84px)}
@media(max-width:560px){#contact{padding-top:calc(var(--module-gap) * .5 - 22px)}}
/* A summit marker on the trail separates the interests from the closing note. */
.summit-divider{display:flex;align-items:center;gap:18px;margin:0 0 calc(var(--module-gap) * .5);color:var(--rust)}
.sd-line{flex:1;height:2px;background:repeating-linear-gradient(90deg,rgba(93,106,75,.38) 0 2px,transparent 2px 10px)}
.sd-mark{display:flex;flex-direction:column;align-items:center;gap:6px}
.sd-mark svg{width:36px;height:29px}
.sd-mark small{font:500 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#65724f}
/* The owner's portrait replaces the generic mountain mark in the navigation. */
.mark-avatar{display:block;width:34px;height:34px;flex-shrink:0;border-radius:50%;object-fit:cover;object-position:32% center;border:1px solid rgba(242,238,231,.65)}
.nav.scrolled .mark-avatar{border-color:var(--line)}

/* Waypoint locations get their own tag so the cities read at a glance. */
.stop .place{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;padding:5px 12px 5px 9px;border-radius:999px;background:rgba(70,89,67,.09);font:600 14px/1.3 var(--body);letter-spacing:.01em;color:#2f4a36}
.stop .place svg{width:15px;height:15px;flex-shrink:0;color:var(--rust)}
/* Experience illustrations open a field card; the caption says what is behind it. */
.art-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;border-radius:4px}
.art-open:focus-visible{outline:2px solid var(--rust);outline-offset:6px}
.art-open img{transition:transform .45s cubic-bezier(.2,.8,.2,1.25),filter .45s}
.experience-art:hover .art-open img{transform:translateY(-6px) scale(1.03);filter:drop-shadow(0 14px 14px rgba(60,44,30,.16))}
.university-art:hover .art-open img{filter:grayscale(1) contrast(1.25) drop-shadow(0 14px 14px rgba(60,44,30,.16))}
/* The caption is drawn as a button, with a pulsing dot, so first-time visitors can tell the illustration opens something. */
.experience-art .art-hint{display:flex;align-items:center;gap:9px;width:fit-content;margin:14px auto 0;padding:9px 16px 9px 13px;border:1px solid rgba(151,96,58,.5);border-radius:999px;background:rgba(151,96,58,.07);font:600 10.5px/1.2 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--rust);cursor:pointer;user-select:none;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.art-hint::before{content:"";width:7px;height:7px;flex-shrink:0;border-radius:50%;background:currentColor;animation:hint-pulse 2.2s ease-out infinite}
.experience-art:hover .art-hint{background:var(--rust);border-color:var(--rust);color:var(--paper);box-shadow:0 6px 16px rgba(151,96,58,.24)}
.art-hint span{display:inline-block;transition:transform .3s var(--ease)}
.experience-art:hover .art-hint span{transform:translateX(3px)}
@keyframes hint-pulse{0%{box-shadow:0 0 0 0 rgba(151,96,58,.55)}70%,100%{box-shadow:0 0 0 7px rgba(151,96,58,0)}}
@media(prefers-reduced-motion:reduce){.art-hint::before{animation:none}}
dialog.wd{width:min(560px,calc(100vw - 32px));max-width:none;padding:0;border:0;background:none;color:var(--ink);overflow:visible}
dialog.wd::backdrop{background:rgba(31,40,33,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.wd-card{position:relative;background:var(--card);border:1px solid var(--line);box-shadow:6px 6px 0 #ded9cc,0 30px 80px rgba(20,28,22,.22);padding:28px 30px 24px;max-height:calc(100svh - 48px);overflow:auto}
.wd-card::before{content:"";position:absolute;inset:7px;border:1px solid var(--line);pointer-events:none}
.wd-close{position:absolute;z-index:1;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-2);cursor:pointer;transition:background .2s,transform .3s var(--ease)}
.wd-close:hover{background:rgba(41,53,44,.07);transform:rotate(90deg)}
.wd-close svg{width:18px;height:18px}
.wd-head{display:grid;grid-template-columns:88px minmax(0,1fr);gap:20px;align-items:center;padding-right:28px;margin-bottom:22px}
.wd-head img{width:88px;height:88px;object-fit:contain;mix-blend-mode:multiply}
#d-unsw .wd-head img{filter:saturate(.65) contrast(.95)}
#d-ustc .wd-head img{filter:grayscale(1) contrast(1.25)}
.wd-kicker{font:500 9px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#65724f}
.wd-head h3{font:400 30px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:6px 0 8px}
.wd-head p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.wd-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.wd-list a,.wd-soon>div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;padding:14px 6px;border-bottom:1px dashed var(--line);color:inherit;text-decoration:none;transition:background .2s}
.wd-list a:hover{background:rgba(151,96,58,.06)}
.wd-list a:focus-visible{outline:2px solid var(--rust);outline-offset:-2px}
.wd-meta{grid-column:1;font:500 9px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#795536}
.wd-list b{grid-column:1;font:600 17px/1.3 var(--body)}
.wd-text{grid-column:1;margin-top:2px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.wd-go{grid-column:2;grid-row:1/4;align-self:center;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rust);white-space:nowrap}
.wd-soon{opacity:.62}
.wd-soon .wd-go{color:var(--muted)}
.wd-note{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
@media(max-width:560px){
 .stop .place{font-size:13px}
 .wd-card{padding:24px 18px 18px}
 .wd-head{grid-template-columns:60px minmax(0,1fr);gap:14px}
 .wd-head img{width:60px;height:60px}
 .wd-head h3{font-size:24px}
 .wd-list a,.wd-soon>div{grid-template-columns:1fr}
 .wd-go{grid-column:1;grid-row:auto;margin-top:10px}
}
/* The Thunder badge is a full-colour vector, so it keeps its own whites instead of multiplying into the paper. */
.wild-badge[src$="badge-thunder.svg"]{mix-blend-mode:normal}

.stop .school-ranking{font:500 11px/1.6 var(--mono);color:var(--rust);margin:10px 0 14px}
.school-ranking a{text-decoration:underline;text-underline-offset:4px}