/* Consolidated site and paper styles. Workbench and editorial layouts have their own modules. */
:root { --wine:#681727;--mist:#8CA6BC;--blue:#456383;--cream:#F2EEE8;--ink:#242424;--white:#fff;--line:#24242430;--max:1200px }
* { box-sizing:border-box }
html { scroll-behavior:smooth;scroll-padding-top:90px }
body { margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.6 }
button, input, select, textarea { font:inherit }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent;touch-action:manipulation }
a { color:inherit;text-decoration:none }
button { cursor:pointer;color:inherit }
button:disabled { cursor:not-allowed;opacity:.45 }
button { border:0 }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, canvas:focus-visible, summary:focus-visible { outline:3px solid var(--mist);outline-offset:5px }
img, video { display:block;width:100% }
img { object-fit:cover;object-position:var(--focus,50% 50%) }
picture { display:block }
h1, h2, h3, p { margin-top:0 }
h1, h2, h3 { font-weight:500;line-height:1.05;letter-spacing:-.055em }
h1 { font-size:clamp(44px,6.8vw,96px) }
h2 { font-size:clamp(32px,4.2vw,60px) }
h3 { font-size:30px }
p { line-height:1.65 }
.eyebrow { text-transform:uppercase;font-size:11px;letter-spacing:.13em;font-weight:600;display:block;line-height:1.5 }
.button { min-height:50px;padding:14px 22px;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--wine);color:var(--cream);font-size:15px;line-height:1.4;border:1px solid var(--wine);transition:background .2s,color .2s }
.button:hover { background:var(--cream);color:var(--wine) }
.button.light { background:var(--cream);color:var(--wine);border-color:var(--cream) }
.button.light:hover { background:var(--wine);color:var(--cream) }
.button.full { width:100%;justify-content:center;gap:12px }
.text-link, .link-button { font-size:15px;text-decoration:underline;text-underline-offset:5px;line-height:1.6 }
.link-button { background:transparent;padding:10px 0;min-height:48px }
.actions { display:flex;gap:30px;align-items:center;flex-wrap:wrap }
.small, small { font-size:13px;line-height:1.65 }
.section, .page { width:min(var(--max),calc(100% - 96px));margin-inline:auto }
.section { padding-block:88px }
.page { padding-block:76px 100px }
.page-title { max-width:1000px;margin-bottom:48px }
.page-title .eyebrow { margin-bottom:22px }
.page-title h1 { margin-bottom:30px }
.page-title p { max-width:680px;font-size:19px }
.reading { max-width:680px }
.reading p { margin-bottom:26px }
.reading .button { margin-top:20px }
.reading-page { min-height:75vh }
.skip-link { position:fixed;top:-100px;left:20px;background:var(--cream);padding:12px;z-index:1000 }
.skip-link:focus { top:10px }
.visually-hidden { position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap }
#site-header { min-height:88px;padding:18px max(32px,calc((100vw - var(--max))/2));display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--cream);border-bottom:1px solid var(--line);position:relative;z-index:30 }
.brand { font-weight:700;font-size:13px;line-height:1.1;letter-spacing:-.02em;white-space:pre-line;flex-shrink:0 }
.brand::after { content:'↗';display:inline-block;font-size:23px;margin-left:9px;position:absolute;margin-top:-26px }
#main-nav { display:flex;align-items:center;gap:26px }
#main-nav a { font-size:13px;white-space:nowrap;line-height:1.3 }
#main-nav a[aria-current=page] { text-decoration:underline;text-underline-offset:7px }
.menu-toggle { display:none }
.hero { min-height:calc(100svh - 88px);height:max(690px,calc(100svh - 88px));position:relative;isolation:isolate;color:var(--cream);display:flex;align-items:center;overflow:hidden }
.hero-background, .hero-photo, .hero-background picture, .hero-background img, .hero-background video, .hero-overlay, .hero-video-poster { position:absolute;inset:0;width:100%;height:100%;object-fit:cover }
.hero-background { z-index:-2 }
.hero-overlay { z-index:2 }
.hero-background video { z-index:1 }
.hero-content { width:min(1200px,calc(100% - 96px));margin:50px auto 90px }
.hero-content>.eyebrow { margin-bottom:42px }
.hero h1 { font-size:clamp(64px,9.4vw,144px);line-height:.92;letter-spacing:-.067em;font-weight:600;margin-bottom:46px;max-width:1160px }
.hero-bottom { display:flex;align-items:end;justify-content:space-between;gap:40px }
.hero-bottom p { max-width:600px;font-size:18px;margin-bottom:0 }
.hero-bottom .button { flex-shrink:0 }
.hero-scroll { position:absolute;bottom:28px;left:max(48px,calc((100vw - 1200px)/2));font-size:10px;letter-spacing:.15em }
.hero-video-toggle { position:absolute;right:30px;bottom:20px;background:#24242490;color:white;border:1px solid #fff7;padding:10px 15px;font-size:12px }
.statement { display:grid;grid-template-columns:1fr 2fr;gap:50px }
.statement h2 { font-size:clamp(46px,6vw,86px) }
.statement p { max-width:600px;font-size:20px }
.explore-home { border-top:1px solid var(--line) }
.carousel-heading { display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:35px }
.carousel-heading h2 { max-width:700px;margin:15px 0 0;font-size:clamp(32px,4.2vw,56px) }
.carousel-buttons { display:flex;gap:9px;flex-shrink:0 }
.carousel-buttons button { width:49px;height:49px;border:1px solid var(--ink);background:transparent;font-size:24px }
.carousel-buttons button:hover { background:var(--ink);color:var(--cream) }
.neighbourhood-rail { display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px;scrollbar-width:thin;scrollbar-color:var(--wine) transparent;overscroll-behavior-x:contain }
.neighbourhood-card { flex:0 0 calc((100% - 48px)/3);min-width:280px;scroll-snap-align:start }
.card-image { position:relative;display:block;overflow:hidden;aspect-ratio:4/5 }
.card-image picture, .card-image img { height:100%;transition:transform .7s }
.card-image:hover img { transform:scale(1.035) }
.photo-index { position:absolute;bottom:15px;left:16px;background:var(--cream);padding:5px 10px;font-size:10px;letter-spacing:.05em }
.card-copy { padding-top:25px }
.card-copy .eyebrow { color:var(--wine) }
.card-copy h3 { font-size:40px;margin:12px 0 18px }
.card-copy p { font-size:15px;margin-bottom:22px }
.section-foot { display:flex;justify-content:space-between;gap:40px;margin-top:25px;font-size:13px }
.section-foot p { max-width:480px }
.palette-teaser { display:grid;grid-template-columns:1fr 1fr;background:var(--wine);color:var(--cream) }
.palette-teaser>div:last-child { padding:75px clamp(32px,6vw,100px) }
.palette-teaser h2 { font-size:clamp(44px,5vw,72px);margin-top:25px }
.palette-teaser p { max-width:480px }
.palette-still { position:relative;background:var(--mist);padding:70px 12%;overflow:hidden;display:flex;flex-direction:column;justify-content:center }
.palette-still picture { aspect-ratio:4/3;transform:rotate(-4deg);box-shadow:0 20px 40px #24242430 }
.palette-still img { height:100% }
.palette-still>b { position:absolute;bottom:48px;left:40px;font-size:36px;font-weight:500;line-height:1.1;letter-spacing:-.05em }
.editorial-swatches { display:flex;margin:0 20px 30px;transform:rotate(-4deg) }
.editorial-swatches span { height:66px;flex:1;background:#E8DBB7 }
.editorial-swatches span:nth-child(2) { background:#486458 }
.editorial-swatches span:nth-child(3) { background:#463330 }
.editorial-swatches span:nth-child(4) { background:#C0B6A3 }
.mini-process { padding-left:20px;font-size:13px;margin-top:35px;columns:2;column-gap:20px }
.mini-process li { margin-bottom:10px }
.large-note { font-size:21px;color:var(--wine);margin-bottom:50px }
.participation { max-width:680px;margin-top:45px;font-size:15px;border-top:1px solid var(--line);padding-top:25px }
.breadcrumb { font-size:14px;display:inline-block;margin-bottom:55px;text-decoration:underline;text-underline-offset:4px }
.guide-heading { display:grid;grid-template-columns:1.6fr 1fr;gap:70px;align-items:end }
.guide-heading h1 { font-size:clamp(70px,11vw,150px);margin:22px 0 }
.guide-heading h2 { font-size:clamp(32px,4vw,54px);max-width:750px;margin-bottom:0 }
.guide-heading>p { max-width:430px;margin-bottom:0 }
.guide-hero { height:clamp(340px,48vw,650px);overflow:hidden }
.guide-hero picture, .guide-hero img { height:100% }
.guide-context { display:grid;grid-template-columns:1.5fr 1fr;gap:90px;border-bottom:1px solid var(--line) }
.story-lead { font-size:27px;line-height:1.5;margin:25px 0 0 }
.guide-context aside h2 { font-size:30px }
.guide-context aside p { font-size:15px }
.access-note { border-left:3px solid var(--wine);padding-left:15px;margin-top:25px }
.access-note a { font-size:14px }
.route-sequence { display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:30px 0 }
.route-sequence li { font-size:13px;border-bottom:1px solid var(--wine);padding-bottom:8px }
.route-sequence li:not(:last-child)::after { content:' →';margin-left:10px }
.route-note { max-width:680px;font-size:14px;color:#5a554f }
.route-stop { display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center;margin-top:75px }
.route-stop.reverse .route-image { order:2 }
.route-image { aspect-ratio:4/3;overflow:hidden }
.route-image picture, .route-image img { height:100% }
.step-number { font-size:76px;line-height:1;font-weight:400;letter-spacing:-.07em;color:var(--wine);display:block;margin-bottom:25px }
.route-copy h2 { font-size:clamp(32px,3.8vw,48px) }
.route-copy p { max-width:480px }
.tasks { background:var(--blue);color:var(--cream);width:100%;padding-inline:max(48px,calc((100vw - 1200px)/2)) }
.tasks ol { display:grid;grid-template-columns:repeat(3,1fr);gap:50px;counter-reset:tasks;list-style:none;padding:0;margin:35px 0 0 }
.tasks li { font-size:24px;line-height:1.4;letter-spacing:-.025em }
.tasks li::before { counter-increment:tasks;content:'0'counter(tasks);display:block;font-size:14px;border-top:1px solid #fff7;padding-top:18px;margin-bottom:20px }
.optional-section { display:grid;grid-template-columns:1fr 2fr;gap:50px;border-bottom:1px solid var(--line) }
.optional-section h2 { font-size:34px }
.optional-section p { max-width:680px }
.colour-invite h2 { font-size:clamp(36px,5vw,64px);max-width:950px;margin:25px 0 40px }
.sources { padding-top:0 }
.sources h2 { font-size:20px;letter-spacing:-.02em }
.sources a { display:block;max-width:680px;margin:12px 0;font-size:14px }
.about-page>.page-title { max-width:980px }
.about-split { display:grid;grid-template-columns:1fr 1.2fr;gap:80px;padding:55px 0 80px;border-top:1px solid var(--line) }
.about-split h2 { max-width:400px }
.about-split p { font-size:23px;max-width:680px }
.about-steps { display:grid;grid-template-columns:repeat(2,1fr);list-style:none;padding:0;gap:50px 70px }
.about-steps li { border-top:1px solid var(--ink);padding-top:15px }
.about-steps span { color:var(--wine);font-size:14px }
.about-steps h2 { font-size:34px;margin:22px 0 }
.about-steps p { max-width:480px }
.about-colour { background:var(--mist);padding:55px;margin:75px 0 }
.about-colour h2 { max-width:750px }
.about-colour p { max-width:680px }
.team-examples { margin-top:75px }
.team-examples figure { max-width:680px;margin:20px 0 }
.team-examples figcaption { font-size:13px;margin-top:10px }
.film-grid { display:grid;grid-template-columns:1fr 1fr;gap:70px 40px }
.film.wide { grid-column:1/-1 }
.film-media { position:relative;background:var(--blue);overflow:hidden;max-height:720px }
.film-media video, .film-media>picture, .film-media img, .film-media iframe { width:100%;height:100%;object-fit:contain;border:0 }
.film-media>picture img { object-fit:cover;filter:brightness(.7) }
.film-pending { position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:24px }
.film>.eyebrow { margin-top:24px }
.film h2 { font-size:34px;margin:12px 0 20px }
.film p { max-width:680px }
.embed-poster { position:relative;height:100% }
.embed-poster picture, .embed-poster img { height:100% }
.embed-poster button { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) }
.release { border-block:1px solid var(--ink) }
.release summary { padding:25px 0;font-size:22px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px }
.release summary span { font-size:30px }
.release[open] summary span { transform:rotate(45deg) }
.release article { padding:35px 0 50px }
.release article h2 { font-size:36px }
.lead { font-size:23px }
.media-section { padding-block:65px;border-bottom:1px solid var(--line) }
.media-section>h2 { font-size:43px }
.media-section>p { max-width:680px }
.facts { display:grid;grid-template-columns:1fr 1fr;gap:0 45px }
.facts div { padding:22px 0;border-bottom:1px solid var(--line) }
.facts dt { font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--wine);margin-bottom:10px }
.facts dd { margin:0 }
.media-image-list { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px }
.media-image-list article { border-top:1px solid var(--ink);padding-top:20px }
.media-image-list h3 { font-size:23px;letter-spacing:-.03em }
.media-image-list small { display:block;margin-bottom:12px }
.target-media { display:grid;grid-template-columns:1fr 1fr;gap:35px 50px;margin-top:35px }
.target-media article { padding-top:25px;border-top:1px solid var(--line) }
.target-media h3 { font-size:30px }
.target-media p { font-size:16px }
.target-media small { display:block;margin-bottom:20px }
.contact-downloads { display:grid;grid-template-columns:1fr 1fr;gap:70px }
.contact-downloads h2 { font-size:31px }
.contact-downloads a { display:block;margin-block:10px }
.media-placeholder { width:100%;height:100%;background:var(--mist) }
.local-note { max-width:850px;font-size:13px;border-left:2px solid var(--wine);padding-left:17px;margin-bottom:35px }
.palette-page .page-title { margin-bottom:25px }
.segmented { display:flex;border:1px solid var(--wine) }
.segmented button { width:50%;min-height:46px;padding:8px;background:transparent;font-size:13px }
.segmented button[aria-pressed=true] { background:var(--wine);color:var(--cream) }
.form-message { font-size:14px;color:var(--wine);min-height:25px;line-height:1.6 }
#site-footer { background:var(--wine);color:var(--cream);padding:65px max(48px,calc((100vw - var(--max))/2)) 40px }
.footer-statement { font-size:clamp(30px,4.5vw,60px);font-weight:500;line-height:1.02;letter-spacing:-.06em;max-width:1050px;padding-bottom:40px;border-bottom:1px solid #f2eee85a }
.footer-bottom { display:grid;grid-template-columns:1.5fr 1fr auto;gap:50px;padding-top:40px }
.footer-brand { font-size:18px;font-weight:600 }
.footer-bottom p { font-size:12px;max-width:400px;margin-top:20px }
.footer-bottom small { font-size:10px;letter-spacing:.08em }
.footer-bottom nav { display:grid;grid-template-columns:1fr 1fr;gap:12px 25px;align-content:start }
.footer-bottom nav a { font-size:12px;text-decoration:none }
.footer-bottom button { align-self:start;font-size:12px;white-space:nowrap }
.reveal { opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s }
.reveal.in-view { opacity:1;transform:none }
.intro-lock { overflow:hidden }
.intro-overlay { position:fixed;inset:0;z-index:200;background:var(--wine);color:var(--cream);perspective:1600px;transition:opacity .4s }
.intro-brand { position:absolute;top:44px;left:24px;right:24px;text-align:center;font-size:12px;letter-spacing:.16em }
.envelope-group { position:absolute;left:50%;top:50%;transform:translate(-50%,-45%);width:min(560px,calc((100vw - 48px)*.88));text-align:center }
.envelope { position:relative;width:100%;aspect-ratio:1.6;background:transparent;padding:0;display:block;perspective:1200px;transform-style:preserve-3d;box-shadow:0 25px 45px #1e020730 }
.envelope-back { position:absolute;inset:0;background:#CFC7BD }
.envelope-front { position:absolute;inset:0;background:linear-gradient(33deg,#E9E2D8 49.8%,transparent 50%) left bottom/50% 100% no-repeat,linear-gradient(-33deg,#E5DDD2 49.8%,transparent 50%) right bottom/50% 100% no-repeat,linear-gradient(147deg,transparent 49.8%,#DED5CA 50%) left bottom/50% 100% no-repeat,linear-gradient(-147deg,transparent 49.8%,#E2DACF 50%) right bottom/50% 100% no-repeat;background-color:#E6DFD5;clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,0 100%);z-index:4 }
.envelope-flap { position:absolute;top:0;left:0;width:100%;height:55%;background:#F0EAE0;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;z-index:6;backface-visibility:visible;filter:drop-shadow(0 2px 1px #24242420) }
.envelope-address { position:absolute;top:57%;left:12%;z-index:7;color:var(--wine);text-align:left;transform:rotate(-2deg) }
.envelope-address b { font:normal clamp(15px,2vw,25px) Georgia,serif;display:block }
.envelope-address small { font-size:11px;display:block;margin-top:10px }
.intro-open { margin-top:24px;background:transparent;color:var(--cream);font-size:15px;padding:10px;min-height:48px }
.intro-skip { position:absolute;right:28px;bottom:calc(76px + env(safe-area-inset-bottom, 0px));background:transparent;color:var(--cream);border-bottom:1px solid #f2eee880;font-size:13px;padding:10px 0;min-height:48px }
.opening .envelope-flap { animation:flap-open .7s ease forwards }
.opening .envelope-address, .opening .intro-open, .opening .intro-brand { transition:opacity .4s;opacity:0 }
.opening { animation:intro-out 2.35s linear forwards }
.opening .envelope-back, .opening .envelope-front { animation:envelope-out 2.1s linear forwards }
@media(min-width:1550px) {
  .hero h1 { font-size:144px }
  .hero { max-height:1050px }
}
@media(max-width:1050px) {
  #site-header { padding-inline:28px;gap:22px }
  #main-nav { gap:16px }
  #main-nav a { font-size:12px }
  .section, .page { width:calc(100% - 64px) }
  .hero-content { width:calc(100% - 64px) }
  .hero-bottom p { max-width:510px }
  .hero-bottom { gap:25px }
  .neighbourhood-card { flex-basis:calc((100% - 24px)/2);min-width:280px }
  .guide-heading { gap:40px }
  .guide-context { gap:45px }
  .route-stop { gap:35px }
  .footer-bottom { gap:30px }
  .hero-scroll { left:32px }
}
@media(max-width:760px) {
  body { font-size:16px }
  .section, .page { width:calc(100% - 44px) }
  .section { padding-block:64px }
  .page { padding-block:45px 65px }
  .eyebrow { font-size:10px }
  #site-header { min-height:76px;padding:18px 22px }
  .brand { font-size:12px }
  .menu-toggle { display:block;background:transparent;font-size:13px;padding:10px 0;min-height:44px }
  #main-nav { display:none;position:absolute;top:100%;left:0;right:0;padding:22px;background:var(--cream);border-bottom:1px solid var(--line);grid-template-columns:1fr 1fr;gap:0 25px }
  #main-nav.open { display:grid }
  #main-nav a { padding:16px 0;font-size:14px;white-space:normal }
  .hero { height:auto;min-height:calc(100svh - 76px);padding-block:45px 75px }
  .hero-content { width:calc(100% - 44px);margin:25px auto 30px }
  .hero-content>.eyebrow { margin-bottom:40px;max-width:250px }
  .hero h1 { font-size:clamp(53px,11.6vw,87px);line-height:.99;letter-spacing:-.06em;margin-bottom:35px;overflow-wrap:normal }
  .hero-bottom { display:block }
  .hero-bottom p { font-size:16px;max-width:490px;margin-bottom:28px }
  .hero-bottom .button { min-height:52px }
  .hero-scroll { left:22px;bottom:25px;font-size:9px }
  .hero-video-toggle { right:18px;bottom:14px;font-size:10px;max-width:155px }
  .hero-background img { object-position:var(--mobile-focus,50% 50%) }
  .statement { grid-template-columns:1fr;gap:30px }
  .statement h2 { font-size:52px }
  .statement p { font-size:18px }
  .carousel-heading { align-items:end;gap:15px }
  .carousel-heading h2 { font-size:34px;line-height:1.08 }
  .carousel-buttons { gap:6px }
  .carousel-buttons button { width:42px;height:48px }
  .neighbourhood-card { flex-basis:88%;min-width:0 }
  .card-image { aspect-ratio:4/4.5 }
  .card-copy h3 { font-size:37px }
  .card-copy p { font-size:16px }
  .section-foot { display:block;font-size:13px;margin-top:30px }
  .palette-teaser { grid-template-columns:1fr }
  .palette-still { min-height:490px;padding:50px 12% 90px }
  .palette-still>b { font-size:30px;bottom:30px;left:25px }
  .palette-teaser>div:last-child { padding:50px 22px 55px }
  .palette-teaser h2 { font-size:50px }
  .mini-process { columns:1 }
  .page-title h1 { font-size:46px;line-height:1.08 }
  .page-title p { font-size:17px }
  .page-title { margin-bottom:35px }
  .large-note { font-size:18px }
  .breadcrumb { margin-bottom:35px }
  .guide-heading { grid-template-columns:1fr;gap:25px }
  .guide-heading h1 { font-size:clamp(58px,15vw,95px);overflow-wrap:anywhere }
  .guide-heading h2 { font-size:35px }
  .guide-heading>p { max-width:600px }
  .guide-hero { height:340px }
  .guide-context { grid-template-columns:1fr;gap:40px }
  .story-lead { font-size:23px }
  .guide-context aside p { font-size:16px }
  .route-sequence { gap:10px }
  .route-sequence li { font-size:12px }
  .route-stop { grid-template-columns:1fr;gap:28px;margin-top:55px }
  .route-stop.reverse .route-image { order:0 }
  .route-copy h2 { font-size:34px }
  .step-number { font-size:62px;margin-bottom:16px }
  .route-copy p { font-size:16px }
  .tasks { width:100%;padding-inline:22px }
  .tasks ol { grid-template-columns:1fr;gap:35px }
  .tasks li { font-size:23px }
  .tasks li::before { margin-bottom:13px }
  .optional-section { grid-template-columns:1fr;gap:22px }
  .colour-invite h2 { font-size:37px }
  .actions { gap:24px }
  .about-split { grid-template-columns:1fr;gap:20px;padding-block:35px 45px }
  .about-split h2 { font-size:36px }
  .about-split p { font-size:19px }
  .about-steps { grid-template-columns:1fr;gap:35px }
  .about-steps h2 { font-size:30px;margin:15px 0 }
  .about-colour { padding:30px 22px;margin:50px 0 }
  .about-colour h2 { font-size:37px }
  .film-grid { gap:50px 20px }
  .film h2 { font-size:26px }
  .film p { font-size:15px }
  .film-media { max-height:none }
  .film-grid .film:not(.wide) { grid-column:1/-1;max-width:430px }
  .media-section { padding-block:45px }
  .media-section>h2 { font-size:33px }
  .facts { grid-template-columns:1fr }
  .media-image-list { grid-template-columns:1fr 1fr;gap:20px }
  .media-image-list h3 { font-size:20px }
  .target-media { grid-template-columns:1fr;gap:30px }
  .target-media h3 { font-size:27px }
  .contact-downloads { grid-template-columns:1fr;gap:30px }
  .release summary { font-size:18px }
  .release article h2 { font-size:29px }
  .local-note { font-size:13px }
  #site-footer { padding:45px 22px 30px }
  .footer-statement { font-size:clamp(28px,7vw,36px);padding-bottom:28px;line-height:1.12 }
  .footer-bottom { grid-template-columns:1fr;gap:30px;padding-top:30px }
  .footer-bottom nav { grid-template-columns:1fr 1fr }
  .footer-bottom nav a { font-size:13px;padding:5px 0 }
  .footer-bottom p { font-size:13px }
  .footer-bottom button { justify-self:start }
  .intro-brand { top:40px;font-size:10px;letter-spacing:.1em }
  .envelope-group { width:calc((100vw - 44px)*.9);top:48% }
  .envelope-address { top:57%;left:10% }
  .envelope-address b { font-size:17px }
  .envelope-address small { font-size:10px;margin-top:7px }
  .intro-open { font-size:13px;margin-top:24px }
  .intro-skip { right:22px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *, *::before, *::after { animation:none!important;transition:none!important }
  .reveal { opacity:1;transform:none }
  .intro-overlay.opening { opacity:0 }
}
h1[tabindex="-1"]:focus { outline:none }
#main-nav a { text-decoration:none }
#main-nav a[aria-current=page] { text-decoration:underline }
.hero { color:var(--hero-text,var(--cream)) }
.hero .button.light { background:var(--hero-button-bg,var(--cream));color:var(--hero-button-ink,var(--wine));border-color:var(--hero-button-bg,var(--cream)) }
.hero-background video { object-position:var(--focus,50% 50%) }
@media(max-width:700px) {
  .hero-background video { object-position:var(--mobile-focus,50% 50%) }
}
main:focus { outline:none }
.explore-page .carousel-heading { display:flex;justify-content:flex-end;margin-bottom:18px }
.explore-page .carousel-heading>div:not(.carousel-buttons) { display:none }
input.visually-hidden { position:absolute!important;width:1px!important;max-width:1px!important;height:1px!important;padding:0!important;border:0!important;margin:0!important;left:0;top:0 }
.palette-confirm { width:min(460px,calc(100vw - 44px));border:1px solid var(--wine);padding:30px;background:var(--cream);color:var(--ink);box-shadow:0 20px 80px #0003 }
.palette-confirm::backdrop { background:#24242480 }
.palette-confirm p { font-size:19px;line-height:1.5;margin:0 0 30px }
.palette-confirm .actions { gap:25px }
.palette-confirm .button { min-height:48px }
/* Travel magazine paper system. Images, frames, typography and motion stay independent. */
body { font-family:var(--body-font,Arial,Helvetica,sans-serif) }
h1, h2, h3 { font-family:var(--display-font,Arial,Helvetica,sans-serif) }
body::before { content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:var(--grain-opacity,.055);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23paper)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E") }
.section { padding-block:var(--section-space,88px) }
#site-header { position:sticky;top:0;background:var(--cream) }
.reading-progress { position:fixed;top:0;left:0;width:100%;height:3px;background:var(--wine);transform-origin:0 0;z-index:150;pointer-events:none }
.hero-background { transform:translate3d(0,var(--drift-y,0px),0) scale(1.065);will-change:transform }
.hero-content { position:relative;z-index:3 }
.hero-postcards { position:absolute;right:max(44px,calc((100vw - var(--max))/2));top:38px;width:215px;height:150px;pointer-events:none;z-index:2 }
.hero-postcard { position:absolute;inset:0 0 auto auto;width:165px;height:112px;padding:6px 6px 18px;background:var(--paper);box-shadow:0 10px 24px #0004;transform:translate3d(0,var(--drift-y,0px),0) rotate(calc(var(--tilt) + var(--drift-turn,0deg))) }
.hero-postcard:nth-child(even) { width:106px;height:135px;right:128px;top:22px;z-index:-1;padding-bottom:14px }
.hero-postcard picture, .hero-postcard img { height:100% }
.hero.invitation-arrived .hero-content { animation:arrival-text .65s ease both }
@keyframes arrival-text {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fieldnotes { display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:center;min-height:810px;position:relative }
.fieldnotes-copy { align-self:start;position:sticky;top:150px;padding-top:70px }
.fieldnotes-copy h2 { font-size:clamp(46px,5.2vw,74px);margin:25px 0 30px;max-width:480px }
.fieldnotes-copy p { font-size:19px;max-width:440px }
.fieldnotes-copy small { display:block;font-size:10px;letter-spacing:.12em;margin-top:22px }
.fieldnotes-rule { display:block;width:90px;border-top:1px solid var(--wine);margin-top:40px }
.collage-board { position:relative;height:595px;isolation:isolate }
.collage-sheet { position:absolute;width:72%;height:66%;top:19%;left:15%;background:var(--mist);transform:rotate(3deg);opacity:.45;clip-path:polygon(0 1%,98% 0,100% 96%,97% 100%,0 98%) }
.collage-photo { position:absolute;left:var(--photo-x);top:var(--photo-y);width:var(--photo-width);margin:0;padding:var(--photo-border) var(--photo-border) 0;background:var(--paper);box-shadow:0 16px 30px #24242424,0 1px 3px #24242420;transform:translate3d(0,var(--drift-y,0px),0) rotate(calc(var(--tilt) + var(--drift-turn,0deg)));z-index:var(--photo-layer);will-change:transform }
.collage-photo picture { aspect-ratio:4/3;overflow:hidden }
.collage-photo img { height:100% }
.collage-photo:nth-of-type(2) picture { aspect-ratio:3/4 }
.collage-photo figcaption { font-size:11px;line-height:1.4;min-height:39px;padding:13px 3px 11px;display:flex;gap:12px;align-items:center }
.collage-photo figcaption span { font-size:9px;color:var(--wine) }
.postmark { position:absolute;left:1%;top:0;border:1px solid var(--wine);width:138px;height:100px;border-radius:50%;display:grid;place-content:center;text-align:center;font-size:9px;line-height:1.6;letter-spacing:.08em;color:var(--wine);transform:rotate(-14deg);opacity:.7 }
.postmark::after { content:"";position:absolute;left:100%;top:26px;width:55px;height:30px;background:repeating-linear-gradient(0deg,transparent 0 7px,var(--wine) 7px 8px) }
.postmark i { font-size:22px;font-style:normal;line-height:1 }
.collage-caption { position:absolute;left:50%;right:0;bottom:0;font-size:12px;font-style:italic;transform:rotate(-2deg);text-align:right }
.neighbourhood-rail { gap:24px;padding:18px 8px 32px;scroll-padding-inline:8px }
.neighbourhood-card { margin-top:var(--photo-offset,0px) }
.card-image { border:var(--photo-border) solid var(--paper);border-bottom-width:28px;box-shadow:0 9px 20px #24242418;transform:rotate(var(--tilt,0deg));transition:transform .45s,box-shadow .45s;isolation:isolate;aspect-ratio:4/4.8 }
.card-image:hover { transform:rotate(0deg) translateY(-5px);box-shadow:0 15px 30px #24242425 }
.photo-index { bottom:10px;left:9px;background:var(--paper);font-size:9px }
.card-copy { padding:30px 8px 0 }
.card-copy h3 { font-size:43px }
.card-copy p { max-width:340px }
.guide-hero { background:var(--paper);padding:14px;box-shadow:0 8px 18px #24242416;width:calc(100% - 42px);margin-inline:auto;transform:rotate(-.5deg) }
.guide-context { padding-top:110px }
.route-image { position:relative;overflow:visible;aspect-ratio:4/3;margin-bottom:28px }
.route-photo-main { position:absolute;inset:0;border:var(--photo-border) solid var(--paper);border-bottom-width:24px;background:var(--paper);box-shadow:0 12px 28px #24242420;transform:translate3d(0,var(--drift-y,0px),0) rotate(calc(var(--tilt) + var(--drift-turn,0deg)));overflow:hidden }
.route-photo-main picture, .route-photo-main img { height:100% }
.route-detail { position:absolute;right:-18px;bottom:-30px;width:36%;aspect-ratio:var(--detail-ratio,4/5);background:var(--paper);padding:6px 6px 17px;box-shadow:0 9px 20px #24242428;transform:translate3d(0,var(--drift-y,0px),0) rotate(8deg) }
.route-detail picture { height:100%;overflow:hidden }
.route-detail img { height:100%;transform:none }
.route-copy { position:relative;z-index:2 }
.route-stop { margin-top:95px }
.reveal { transition-duration:var(--reveal-duration,850ms) }
.palette-still picture { border:9px solid var(--paper);border-bottom-width:24px;position:relative;z-index:2 }
.palette-still::before { content:"";position:absolute;inset:15% 17% 29% 13%;background:var(--paper);transform:rotate(5deg);box-shadow:0 7px 24px #24242422 }
.editorial-swatches { position:relative;z-index:3;box-shadow:0 7px 18px #24242418 }
.film-media { border:8px solid var(--paper);box-shadow:0 12px 28px #24242418 }
.film:nth-child(2) .film-media { transform:rotate(-1.4deg) }
.film:nth-child(3) .film-media { transform:rotate(1.2deg) }
.film h2 { margin-top:20px }
.about-colour { background:var(--paper);border:1px solid var(--paper-edge);box-shadow:6px 7px 0 #8ca6bc33;position:relative }
.release { background:var(--paper);border:1px solid var(--paper-edge);padding:26px 32px;box-shadow:5px 6px 0 #8ca6bc26 }
.media-section, .reading-page .reading { position:relative }
.reading-page .reading { background:var(--paper);border:1px solid var(--paper-edge);padding:38px }
#site-footer { position:relative;overflow:hidden }
#site-footer::after { content:"";position:absolute;right:-40px;top:35px;width:180px;height:180px;background:radial-gradient(var(--cream) 1px,transparent 1px) 0 0/15px 15px;opacity:.16;transform:rotate(-12deg);pointer-events:none }
/* Envelope stack: back → open flap → photo stack → front folds → address. */
.intro-overlay { overflow:hidden;--fan-spread:1;isolation:isolate;animation:none }
.intro-overlay::before { content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;background-image:repeating-linear-gradient(7deg,transparent 0 3px,#f2eee82b 3px 4px) }
.envelope-group { width:min(var(--envelope-width,560px),calc((100vw - 48px)*.88));top:53%;transform:translate(-50%,-45%) }
.envelope { aspect-ratio:var(--envelope-ratio,1.6);transform-style:flat;box-shadow:0 24px 38px #16040a40;isolation:isolate;outline-offset:9px }
.envelope-back { background:var(--envelope-paper);z-index:1;box-shadow:inset 0 0 0 1px #24242420,inset 0 3px 5px #24242420 }
.envelope-lining { position:absolute;inset:1px;background:var(--envelope-lining);z-index:1;clip-path:polygon(0 0,100% 0,50% 67%);box-shadow:inset 0 7px 14px #0003 }
.envelope-front { background:linear-gradient(33deg,#fff4 49.7%,transparent 50%) left bottom/50% 100% no-repeat,linear-gradient(-33deg,#00000005 49.7%,transparent 50%) right bottom/50% 100% no-repeat,linear-gradient(147deg,transparent 49.7%,#00000008 50%) left bottom/50% 100% no-repeat,linear-gradient(-147deg,transparent 49.7%,#ffffff08 50%) right bottom/50% 100% no-repeat;background-color:var(--envelope-paper);clip-path:polygon(0 0,50% 43%,100% 0,100% 100%,0 100%);z-index:5;box-shadow:inset 0 -1px #24242420 }
.envelope-fold { position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(33deg,transparent 49.6%,#24242414 49.8%,transparent 50.2%) left bottom/50% 100% no-repeat,linear-gradient(-33deg,transparent 49.6%,#24242414 49.8%,transparent 50.2%) right bottom/50% 100% no-repeat }
.envelope-flap { height:58%;background:var(--envelope-flap);z-index:7;transform-origin:50% 0;filter:drop-shadow(0 2px 1px #24242435);animation:none }
.envelope-address { z-index:8;color:var(--envelope-ink) }
.envelope-address b { font-size:clamp(18px,2vw,25px) }
.envelope-address small { font-size:12px }
.envelope-mark { position:absolute;right:11%;bottom:17%;z-index:8;width:48px;height:48px;border:1px solid #68172766;border-radius:50%;font-size:25px;display:grid;place-items:center;color:var(--envelope-ink);transform:rotate(12deg);opacity:.65 }
.invitation-stack { position:absolute;inset:0;z-index:3;pointer-events:none }
.invitation-photo { position:absolute;left:9%;top:9%;width:82%;height:86%;padding:9px 9px 24px;background:var(--paper);box-shadow:0 10px 22px #24242435;opacity:0;z-index:var(--photo-order);transform:translateY(7%);will-change:transform,opacity }
.invitation-photo picture, .invitation-photo img { height:100% }
.opening.intro-overlay { animation:invitation-fade var(--intro-duration) linear forwards }
.opening .envelope-flap { animation:envelope-flap-turn calc(var(--intro-duration)*.255) cubic-bezier(.35,.05,.25,1) forwards,paper-retreat var(--intro-duration) linear forwards }
.opening .invitation-stack { animation:stack-layer var(--intro-duration) steps(1,end) forwards }
.opening .invitation-photo { animation:photos-unfold calc(var(--intro-duration) - var(--photo-delay)) cubic-bezier(.3,.1,.2,1) var(--photo-delay) both }
.opening .invitation-photo.lead-photo { animation-name:lead-unfold }
.opening .envelope-front, .opening .envelope-back, .opening .envelope-lining, .opening .envelope-fold, .opening .envelope-mark { animation:paper-retreat var(--intro-duration) linear forwards }
.opening .envelope-address, .opening .intro-brand, .opening .intro-open { opacity:0;transition:opacity .25s }
@keyframes envelope-flap-turn {0%{transform:rotateX(0deg);z-index:7}53%{z-index:7}54%{z-index:2}100%{transform:rotateX(180deg);z-index:2}}
@keyframes stack-layer {0%,72%{z-index:3}73%,100%{z-index:9}}
@keyframes photos-unfold {0%,17%{opacity:0;transform:translate(0,7%) rotate(0)}24%{opacity:1;transform:translate(0,-6%) rotate(0)}47%{opacity:1;transform:translate(0,-67%) rotate(0)}64%,76%{opacity:1;transform:translate(calc(var(--fan-x)*var(--fan-spread)),var(--fan-y)) rotate(var(--fan-angle))}89%,100%{opacity:0;transform:translate(calc(var(--fan-x)*var(--fan-spread)),calc(var(--fan-y) - 8%)) rotate(var(--fan-angle))}}
@keyframes lead-unfold {0%,17%{opacity:0;transform:translate(0,7%) rotate(0)}24%{opacity:1;transform:translate(0,-6%) rotate(0)}47%{opacity:1;transform:translate(0,-67%) rotate(0)}64%,75%{opacity:1;transform:translate(calc(var(--fan-x)*var(--fan-spread)),var(--fan-y)) rotate(var(--fan-angle)) scale(1)}100%{opacity:1;transform:translate(0,-25%) rotate(0) scale(var(--lead-scale,4.5))}}
@keyframes paper-retreat {0%,73%{opacity:1}92%,100%{opacity:0}}
@keyframes invitation-fade {0%,84%{opacity:1}100%{opacity:0}}
@media(min-width:1550px) {
  .hero-postcards { top:45px;right:max(60px,calc((100vw - var(--max))/2));width:240px }
}
@media(max-width:1050px) {
  .fieldnotes { gap:35px;grid-template-columns:.9fr 1.1fr;min-height:700px }
  .fieldnotes-copy { padding-top:35px }
  .fieldnotes-copy h2 { font-size:52px }
  .collage-board { height:510px }
  .hero-postcards { right:35px;top:28px;transform:scale(.8);transform-origin:right top }
  .route-detail { right:-12px }
}
@media(max-width:760px) {
  .section { padding-block:var(--mobile-space,64px) }
  .hero { display:flex;flex-direction:column;align-items:stretch;padding-block:32px 72px;min-height:calc(100svh - 76px) }
  .hero-content { margin:22px auto 30px;order:1 }
  .hero-content>.eyebrow { margin-bottom:32px }
  .hero h1 { font-size:clamp(51px,12.2vw,86px);margin-bottom:30px }
  .hero-postcards { position:relative;top:auto;right:auto;order:2;align-self:flex-end;margin:0 30px 5px 0;width:160px;height:108px;transform:none }
  .hero-postcard { width:125px;height:85px;padding:5px 5px 12px }
  .hero-postcard:nth-child(even) { width:75px;height:97px;right:95px;top:9px;padding-bottom:10px }
  .hero-scroll { bottom:24px;max-width:170px }
  .fieldnotes { display:flex;flex-direction:column;gap:35px;min-height:0;overflow:clip;align-items:stretch }
  .fieldnotes-copy { position:static;padding-top:0 }
  .fieldnotes-copy h2 { font-size:52px;margin:22px 0 24px;max-width:350px }
  .fieldnotes-copy p { font-size:17px }
  .fieldnotes-copy small { font-size:9px }
  .fieldnotes-rule { margin-top:27px }
  .collage-board { height:470px;width:100%;margin-top:12px }
  .collage-photo { padding:6px 6px 0 }
  .collage-photo figcaption { font-size:9px;min-height:31px;padding:10px 1px;gap:7px }
  .postmark { width:105px;height:80px;font-size:7px;top:-5px }
  .postmark::after { width:30px }
  .collage-caption { font-size:10px;bottom:3px;left:43% }
  .neighbourhood-card { margin-top:calc(var(--photo-offset,0px)*.5) }
  .neighbourhood-rail { padding-top:15px;padding-inline:7px }
  .card-copy { padding-top:30px }
  .card-image { border-width:7px;border-bottom-width:24px }
  .guide-hero { width:calc(100% - 28px);height:325px;padding:9px }
  .guide-context { padding-top:75px }
  .route-stop { margin-top:70px;gap:34px }
  .route-image { margin:0 8px 30px 0 }
  .route-detail { width:29%;right:-10px;bottom:-22px;padding:5px 5px 13px }
  .route-copy h2 { font-size:34px }
  .release { padding:22px }
  .reading-page .reading { padding:26px }
  .envelope-group { top:54%;width:calc((100vw - 44px)*.9) }
  .intro-overlay { --fan-spread:.63 }
  .envelope-address { left:10%;top:58% }
  .envelope-address b { font-size:17px }
  .envelope-address small { font-size:10px;margin-top:6px }
  .envelope-mark { width:32px;height:32px;right:9%;bottom:17%;font-size:17px }
  .invitation-photo { padding:6px 6px 15px }
  .intro-open { margin-top:24px }
}
@media(max-width:380px) {
  .collage-board { height:410px }
  .hero h1 { font-size:48px }
  .fieldnotes-copy h2 { font-size:46px }
}
@media(prefers-reduced-motion:reduce) {
  .hero-background, .hero-postcard, .collage-photo, .route-photo-main, .route-detail { will-change:auto;--drift-y:0px!important;--drift-turn:0deg!important }
  .hero-background { transform:scale(1.065) }
  .opening.intro-overlay { opacity:0 }
  .reveal { opacity:1;transform:none }
  .hero.invitation-arrived .hero-content { animation:none }
}
.intro-lock .hero-content { opacity:0 }
.intro-overlay:not(.keyboard-used) .envelope:focus { outline:none }
.intro-overlay::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h160v160H0z'/%3E%3C/svg%3E");opacity:.065 }
.opening[data-phase="zoom"] .lead-photo { z-index:99 }
.opening .envelope { animation:shadow-retreat var(--intro-duration) linear forwards }
@keyframes shadow-retreat {0%,73%{box-shadow:0 24px 38px #16040a40}92%,100%{box-shadow:0 24px 38px transparent}}
.collage-photo:first-of-type figcaption { justify-content:flex-end }
@media(max-width:760px) {
  .intro-overlay { --fan-spread:.5 }
}
