:root { --ink:#092722; --green:#0d352c; --copper:#b86a3d; --paper:#f4f1ea; --mist:#d8dcd4; --slate:#51625f; --line:rgba(9,39,34,.2); --ease:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.45; }
.skip-link { position:fixed; z-index:10; top:8px; left:8px; padding:.65rem .9rem; color:var(--paper); background:var(--green); transform:translateY(-160%); transition:transform 160ms var(--ease); }
.skip-link:focus { transform:translateY(0); }
.site-header { min-height:82px; display:flex; align-items:center; gap:2rem; padding:0 clamp(1.5rem,4vw,4rem); border-bottom:1px solid var(--line); background:rgba(244,241,234,.92); }
.wordmark { color:var(--ink); text-decoration:none; font:500 clamp(1.35rem,2vw,2rem)/1 Georgia, serif; letter-spacing:-.04em; }
.header-note { margin:0 auto 0 0; color:var(--slate); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; }
.text-link { color:var(--ink); font-size:.84rem; text-underline-offset:.3em; }
.hero { display:grid; grid-template-columns:1fr 1fr; min-height:min(720px,calc(100vh - 82px)); overflow:hidden; background:var(--green); }
.hero-copy { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; padding:clamp(3.5rem,8vw,8rem) clamp(1.5rem,6vw,7rem); color:var(--paper); background:radial-gradient(circle at 80% 20%,rgba(72,112,97,.18),transparent 35%),linear-gradient(135deg,#0c392e,#061e19); }
.hero-copy::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.36; background:repeating-radial-gradient(circle at 82% 68%, transparent 0 14px, rgba(220,235,224,.16) 15px 16px, transparent 17px 30px); mask-image:linear-gradient(90deg,transparent 40%,#000); }
.eyebrow, .template-copy p { margin:0; color:var(--slate); font-size:.67rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { position:relative; z-index:1; max-width:9ch; margin:.8rem 0 1rem; font:500 clamp(3.5rem,6vw,6.4rem)/.9 Inter,ui-sans-serif,sans-serif; letter-spacing:-.08em; }
h2 { margin:.6rem 0 0; font:400 clamp(2.35rem,4vw,4.75rem)/.98 Georgia, serif; letter-spacing:-.06em; }
.hero-statement { position:relative; z-index:1; max-width:12ch; margin:0 0 1.5rem; font:400 clamp(2rem,3.6vw,4rem)/1.02 Georgia,serif; letter-spacing:-.055em; }
.hero-copy .eyebrow,.hero-copy .lede { position:relative; z-index:1; color:#d5dfd7; }.hero-copy .eyebrow{max-width:24ch;line-height:1.7}.hero-copy .lede { max-width:34rem; margin:0 0 1.5rem; font-size:clamp(1rem,1.4vw,1.25rem); letter-spacing:.1em; }
.primary-link { position:relative; z-index:1; display:inline-flex; gap:.8rem; align-items:center; padding:.8rem 0; color:var(--paper); font-size:.85rem; font-weight:700; letter-spacing:.04em; text-underline-offset:.45em; }
.primary-link span { color:var(--copper); font-size:1.3rem; transition:transform 220ms var(--ease); }
.primary-link:hover span { transform:translateY(4px); }
.route-legend { position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:1rem; width:min(18rem,100%); margin:0 0 1.25rem; padding-left:1.5rem; border-left:1px solid var(--copper); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }.route-legend span::before{content:"";display:inline-block;width:8px;height:8px;margin-right:.65rem;border:1px solid var(--paper);border-radius:50%;background:var(--copper)}
.hero-art { position:relative; align-self:center; width:100%; aspect-ratio:16/9; overflow:hidden; background:#d6d6ce; isolation:isolate; }
.hero-art::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(9,39,34,.08),transparent 25%),linear-gradient(0deg,rgba(9,39,34,.12),transparent 32%); }
.hero-art img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; animation:art-in 800ms var(--ease) both; }
.zone-pin { position:absolute; z-index:4; display:flex; align-items:flex-start; gap:.5rem; min-width:9.6rem; padding:.6rem .7rem .6rem 1.85rem; color:#102d27; background:rgba(244,241,234,.94); border:1px solid rgba(9,39,34,.2); border-left:3px solid var(--copper); box-shadow:0 8px 20px rgba(9,39,34,.14); font-size:clamp(.58rem,.65vw,.72rem); font-weight:800; letter-spacing:.11em; line-height:1.35; text-transform:uppercase; }.zone-pin::before { content:""; position:absolute; top:50%; left:.5rem; width:11px; height:11px; border:2px solid var(--paper); border-radius:50%; background:var(--copper); box-shadow:0 0 0 1px rgba(9,39,34,.45); transform:translateY(-50%); }.zone-pin b { color:var(--copper); font:400 1.1rem/1 Georgia,serif; }.zone-pin-people { top:10%; left:7%; }.zone-pin-systems { top:19%; right:5%; }.zone-pin-outcomes { right:8%; bottom:11%; }
.city-reading { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,8vw,10rem); padding:clamp(4rem,9vw,10rem); border-bottom:1px solid var(--line); }.city-reading p { align-self:end; max-width:38rem; margin:0; color:#3e514c; font-size:clamp(1rem,1.5vw,1.35rem); }
.city-sequence { padding:clamp(4rem,8vw,8rem) clamp(1.5rem,6vw,7rem); background:var(--green); color:var(--paper); }.sequence-head { display:flex; justify-content:space-between; gap:2rem; align-items:end; }.sequence-head .eyebrow { color:#c6d0c9; }.city-sequence h2 { max-width:10ch; }.city-sequence ol { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0; margin:clamp(3rem,7vw,7rem) 0 0; list-style:none; border-top:1px solid rgba(244,241,234,.4); }.city-sequence li { position:relative; min-height:190px; padding:1.4rem 1.1rem 0; border-left:1px solid rgba(244,241,234,.4); }.city-sequence li:first-child { border-left:0; }.city-sequence li::before { content:""; position:absolute; top:-6px; left:-6px; width:11px; height:11px; border-radius:50%; background:var(--copper); }.city-sequence span { display:block; margin-bottom:2rem; color:#c6d0c9; font:400 1.2rem Georgia,serif; }.city-sequence strong { font-size:1.1rem; }.city-sequence p { max-width:16rem; margin:.6rem 0; color:#c6d0c9; font-size:.9rem; }
.gallery { padding:clamp(4rem,8vw,8rem) clamp(1.5rem,4vw,4rem); }.gallery-heading { max-width:50rem; margin:0 auto clamp(2.5rem,5vw,5rem); text-align:center; }.gallery-heading > p:last-child { max-width:40rem; margin:1.3rem auto 0; color:var(--slate); }.template-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; max-width:1440px; margin:auto; }.template { overflow:hidden; border:1px solid var(--line); background:#fffefa; transition:transform 260ms var(--ease),box-shadow 260ms var(--ease); }.template:hover { transform:translateY(-7px); box-shadow:0 16px 40px rgba(9,39,34,.12); }.template-preview { aspect-ratio:1.22; overflow:hidden; }.image-preview { background:#d9d8d0; }.image-preview img { width:100%; height:100%; display:block; object-fit:cover; transition:transform 600ms var(--ease); }.template:hover .image-preview img { transform:scale(1.04); }.template-copy { padding:1.4rem 1.45rem 1.6rem; }.template-copy p { margin-bottom:.65rem; }.template-copy h3 { margin:0 0 .35rem; font:400 2rem/1 Georgia,serif; letter-spacing:-.05em; }.template-copy span { color:var(--slate); font-size:.88rem; }.city-preview { position:relative; display:flex; align-items:end; gap:5%; padding:14% 9%; background:linear-gradient(135deg,#103e32,#071f1a); }.city-preview i { position:relative; z-index:1; display:block; width:15%; background:#eeece5; box-shadow:inset -7px 0 rgba(9,39,34,.12); }.city-preview i:nth-of-type(1){height:23%}.city-preview i:nth-of-type(2){height:41%;background:#d6dad2}.city-preview i:nth-of-type(3){height:62%;background:#f5f1e7}.city-preview i:nth-of-type(4){height:76%;background:#c9784c}.city-preview i:nth-of-type(5){height:49%;background:#d5d8d1}.preview-copper-path { position:absolute; width:102%; height:2px; background:var(--copper); transform:rotate(-18deg); left:-2%; top:54%; }
.art-direction { display:grid; grid-template-columns:minmax(7rem,.45fr) 1.25fr; gap:clamp(2rem,7vw,8rem); align-items:center; padding:clamp(4rem,8vw,8rem); background:#d9dfd9; }.direction-number { color:var(--copper); font:400 clamp(6rem,18vw,16rem)/.7 Georgia,serif; }.art-direction p:last-child { max-width:44rem; margin:1.5rem 0 0; color:#3e514c; font-size:1.12rem; }
.site-footer { display:flex; justify-content:space-between; gap:2rem; padding:2.25rem clamp(1.5rem,4vw,4rem); background:#071f1a; color:#edf0ea; font-size:.86rem; }.status-dot { display:inline-block; width:9px; height:9px; margin-right:.5rem; border-radius:50%; background:#d2a15e; }.site-footer details { max-width:39rem; color:#d4dbd3; }.site-footer summary { cursor:pointer; color:#fff; font-weight:700; }.site-footer details p { margin:1rem 0 0; }
@keyframes art-in { from { opacity:0; transform:scale(1.035); } to { opacity:1; transform:scale(1); } }
@media (min-width:800px) { .city-sequence li { animation:sequence-in linear both; animation-timeline:view(); animation-range:entry 8% cover 28%; } .city-sequence li:nth-child(2){animation-range:entry 11% cover 31%}.city-sequence li:nth-child(3){animation-range:entry 14% cover 34%} } @keyframes sequence-in { from { opacity:.25; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:800px) { .site-header{min-height:66px}.header-note{display:none}.hero{grid-template-columns:1fr}.hero-copy{min-height:460px}.zone-pin{min-width:8.2rem;padding:.45rem .5rem .45rem 1.55rem;font-size:.53rem}.zone-pin::before{left:.4rem;width:9px;height:9px}.zone-pin b{font-size:.95rem}.zone-pin-people{top:10%;left:5%}.zone-pin-systems{top:18%;right:4%}.zone-pin-outcomes{right:5%;bottom:8%}.city-reading,.art-direction{grid-template-columns:1fr}.city-sequence ol{grid-template-columns:1fr 1fr}.city-sequence li:nth-child(odd){border-left:0}.template-grid{grid-template-columns:1fr}.template-preview{aspect-ratio:1.5}.site-footer{flex-direction:column} }
@media (max-width:460px) { .site-header{gap:1rem}.text-link{font-size:.76rem}.city-sequence ol{grid-template-columns:1fr}.city-sequence li{border-left:0;border-bottom:1px solid rgba(244,241,234,.3)}.city-sequence li:last-child{border-bottom:0}.city-sequence li::before{left:-5px}.template-preview{aspect-ratio:1.2} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.hero-art img,.city-sequence li{animation:none}.template,.image-preview img,.primary-link span,.skip-link{transition:none} }