:root{
  --canvas:#F5F1E5;
  --canvas-deep:#E9E4D6;
  --ink:#383839;
  --ink-soft:#6B6A66;
  --ink-on-photo:#F6F0DE;
  --rule:rgba(56,56,57,.14);
  --serif:"Libre Caslon Text","Adobe Caslon Pro",Georgia,serif;
  --sans:"DM Sans","Euclid Circular B",Helvetica,Arial,sans-serif;
  --col:750px;
  --gutter:clamp(20px,4vw,60px);
  --header-h:74px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.5px;line-height:1.7}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- type scale ---------- */
.label{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;line-height:1}
.h-section{font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:8px;text-transform:uppercase;text-align:center}
.h-title{font-family:var(--serif);font-size:30px;font-weight:400;letter-spacing:15px;text-transform:uppercase;line-height:40px;text-indent:15px}
.prose{font-family:var(--serif);font-size:15px;line-height:1.75;letter-spacing:0;font-weight:400}
.prose p+p{margin-top:1.1em;text-indent:1.6em}
.quote{font-family:var(--serif);font-size:18px;line-height:28px;letter-spacing:0;font-weight:400}
.caption{font-size:10px;line-height:1.75;color:var(--ink-soft);letter-spacing:.4px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--canvas);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);transition:background .4s}
.site-header.over-hero{background:transparent;color:var(--ink-on-photo);position:fixed;left:0;right:0}
.brand{font-family:var(--serif);font-size:12px;letter-spacing:3.5px;text-transform:uppercase;white-space:nowrap}
.brand small{display:block;font-family:var(--sans);font-size:8px;letter-spacing:2.5px;opacity:.65;margin-top:3px}
.nav{display:flex;gap:28px;justify-self:center}
.nav a{font-size:10px;letter-spacing:2px;text-transform:uppercase;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s}
.nav a:hover::after,.nav a.active::after{right:0}
.hdr-right{justify-self:end;display:flex;gap:18px;align-items:center}
.icon-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4}
.menu-btn{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;color:var(--ink-on-photo);background:#8d8a80}
.hero img,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(30,28,24,.28),rgba(30,28,24,.08) 40%,rgba(30,28,24,.45))}
.hero-inner{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter)}
.hero .h-title{color:var(--ink-on-photo)}
.hero .tags{margin-top:22px;font-size:9px;letter-spacing:3px;text-transform:uppercase}
.hero .tags span{margin:0 10px}
.hero .standfirst{position:absolute;left:50%;transform:translateX(-50%);bottom:38px;z-index:1;max-width:560px;text-align:center;padding:0 var(--gutter);font-size:11px;line-height:1.7;color:var(--ink-on-photo)}
.hero--short{height:72vh}

/* ---------- layout ---------- */
.wrap{padding:0 var(--gutter)}
.section{padding:100px 0 0}
.article-grid{display:grid;grid-template-columns:minmax(120px,1fr) var(--col) minmax(120px,1fr);gap:0 clamp(28px,5vw,80px);align-items:start}
.article-grid>.meta{padding-top:6px}
.meta dl{display:grid;gap:22px}
.meta dt{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.meta dd{font-size:11px}
.side{padding-top:6px}
.side img{width:100%;max-width:200px;aspect-ratio:3/4;object-fit:cover}
.side .caption{max-width:200px;margin-top:18px}
.side.low{align-self:end}
.side .quote{max-width:220px}
.side .quote footer{margin-top:18px;font-size:11px;font-family:var(--sans);letter-spacing:.5px}

/* image rows */
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);padding:70px var(--gutter) 0}
.row-3 img{width:100%;aspect-ratio:3/4;object-fit:cover}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);padding:70px var(--gutter) 0}
.row-2 img{width:100%;aspect-ratio:4/5;object-fit:cover}
.full{padding:70px var(--gutter) 0}
.full img{width:100%;aspect-ratio:16/9;object-fit:cover}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* prev / next */
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:60px var(--gutter) 0;font-size:9px;letter-spacing:2.5px;text-transform:uppercase}
.pager .mid{text-align:center;opacity:.8}
.pager .next{text-align:right}
.pager b{font-weight:600;margin:0 10px}

/* index */
.index{margin-top:90px;padding:70px var(--gutter) 60px;background:var(--canvas-deep)}
.index .h-section{margin-bottom:40px}
.index-preview{width:140px;aspect-ratio:1/1;object-fit:cover;margin:0 auto 34px;transition:opacity .3s}
.index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:18px 8px;text-align:center;font-size:9px;letter-spacing:1.5px}
.index-grid a{display:block;padding:6px 0;opacity:.7}
.index-grid a:hover,.index-grid a.on{opacity:1;font-weight:600}
.index-foot{display:flex;justify-content:space-between;margin-top:40px;font-size:9px;letter-spacing:2.5px;text-transform:uppercase}
.credits{margin-top:28px;font-size:9px;letter-spacing:.3px;color:var(--ink-soft);line-height:1.8;max-width:900px}

/* ---------- home / journal ---------- */
.intro{max-width:640px;margin:0 auto;text-align:center;padding:90px var(--gutter) 0}
.intro .h-section{margin-bottom:28px}
.intro .prose{font-size:16px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px) clamp(12px,1.6vw,24px);padding:70px var(--gutter) 0}
.post-grid.two{grid-template-columns:1fr 1fr}
.card{display:block}
.card .ph{overflow:hidden;aspect-ratio:3/4;background:var(--canvas-deep)}
.card.wide .ph{aspect-ratio:4/5}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.card:hover img{transform:scale(1.04)}
.card .kicker{margin-top:16px;font-size:9px;letter-spacing:2.5px;text-transform:uppercase;opacity:.75}
.card h3{font-family:var(--serif);font-size:15px;font-weight:400;letter-spacing:2px;text-transform:uppercase;line-height:1.5;margin-top:8px}
.card p{margin-top:8px;color:var(--ink-soft);max-width:34em}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;padding:50px var(--gutter) 0;font-size:9px;letter-spacing:2.5px;text-transform:uppercase}
.filters a{opacity:.55;padding-bottom:4px;border-bottom:1px solid transparent}
.filters a.on,.filters a:hover{opacity:1;border-color:currentColor}
.more{text-align:center;padding:60px 0 0;font-size:9px;letter-spacing:2.5px;text-transform:uppercase}
.more a{border-bottom:1px solid currentColor;padding-bottom:4px}

/* neighbourhoods strip */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,16px);padding:70px var(--gutter) 0}
.strip a{position:relative;aspect-ratio:3/4;overflow:hidden;display:block;background:var(--canvas-deep)}
.strip img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.strip span{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:var(--ink-on-photo);font-size:9px;letter-spacing:3px;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.35)}

/* about */
.about-grid{display:grid;grid-template-columns:1fr var(--col) 1fr;gap:0 clamp(28px,5vw,80px);padding:0 var(--gutter)}

/* newsletter */
.newsletter{margin-top:100px;padding:80px var(--gutter);text-align:center;border-top:1px solid var(--rule)}
.newsletter .h-section{margin-bottom:22px}
.newsletter form{display:flex;max-width:420px;margin:28px auto 0;border-bottom:1px solid var(--ink)}
.newsletter input{flex:1;background:none;border:0;padding:10px 0;font:inherit;color:inherit;letter-spacing:.5px;outline:0}
.newsletter input::placeholder{color:var(--ink-soft)}
.newsletter button{font-size:9px;letter-spacing:2.5px;text-transform:uppercase}

/* ---------- footer ---------- */
.site-footer{background:var(--canvas-deep);padding:110px var(--gutter) 40px;margin-top:0}
.foot-cols{display:grid;grid-template-columns:repeat(3,max-content);gap:90px;justify-content:center}
.foot-cols h4{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:22px}
.foot-cols a{display:block;font-size:11px;line-height:2.1}
.foot-bottom{display:flex;justify-content:space-between;margin-top:120px;font-size:10px;color:var(--ink-soft)}

/* ---------- views ---------- */
.view{display:none}
.view.on{display:block}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .article-grid{grid-template-columns:1fr;gap:40px}
  .article-grid>.meta dl{grid-template-columns:repeat(4,max-content);gap:40px}
  .side{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:end}
  .about-grid{grid-template-columns:1fr}
  :root{--col:100%}
}
@media (max-width:760px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .site-header{grid-template-columns:1fr auto}
  .h-title{font-size:22px;letter-spacing:8px;line-height:34px;text-indent:8px}
  .hero{min-height:480px}
  .row-3,.post-grid{grid-template-columns:1fr 1fr}
  .strip{grid-template-columns:repeat(2,1fr)}
  .article-grid>.meta dl{grid-template-columns:1fr 1fr;gap:22px}
  .side{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr;gap:40px;justify-content:start}
  .foot-bottom{flex-direction:column;gap:10px;margin-top:70px}
  .pager{grid-template-columns:1fr 1fr}
  .pager .mid{display:none}
  .section{padding-top:70px}
}
.mobile-nav{display:none;position:fixed;inset:var(--header-h) 0 0 0;background:var(--canvas);z-index:49;padding:40px var(--gutter);flex-direction:column;gap:22px;font-size:12px;letter-spacing:3px;text-transform:uppercase}
.mobile-nav.open{display:flex}