/* Headings / nav / buttons / titles — Avenir Black */
@font-face {
  font-family: "VOR Avenir";
  src: local("Avenir Black"), local("Avenir-Black"),
       url("../fonts/Avenir_Black.woff") format("woff");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
/* Body / long-form reading — Avenir Regular */
@font-face {
  font-family: "VOR Avenir Text";
  src: local("Avenir"), local("Avenir Roman"), local("Avenir-Roman"),
       url("../fonts/Avenir_Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root{
  --black:#181717;--ink:#111;--white:#fff;--paper:#f5f3ed;--muted:rgba(255,255,255,.64);
  --muted-dark:rgba(17,17,17,.58);--line:rgba(255,255,255,.18);--line-dark:rgba(17,17,17,.16);
  --ease:cubic-bezier(.19,1,.22,1);--page:calc(100vw - 40px);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:"VOR Avenir Text","Avenir","Avenir Next",Helvetica,Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}body.is-locked{overflow:hidden}a{color:inherit}img{display:block;max-width:100%}button,input{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-logo{position:fixed;top:20px;left:20px;z-index:1000;height:50px;width:auto;mix-blend-mode:difference}.site-logo img{height:25px;width:auto;display:block;filter:brightness(2)}.site-logo--mobile{display:none}.site-nav{position:fixed;top:20px;right:20px;z-index:1000;display:flex;gap:20px;align-items:center;text-transform:uppercase;mix-blend-mode:difference}.site-nav a{text-decoration:none;color:#fff;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-weight:900;font-size:18px;line-height:1;transition:opacity .2s ease,transform .2s ease}.site-nav a:hover,.site-nav a[aria-current="page"]{opacity:.58;transform:translateY(-1px)}
.footer{background:var(--black);color:#fff;border-top:1px solid var(--line);padding:30px 20px;text-align:center}.footer p{margin:0;display:flex;align-items:center;justify-content:center;gap:10px;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-weight:900}.footer-logo{width:90px;height:auto}
.hero-slider{position:relative;width:100%;overflow:hidden;background:#111}.slider-track{display:flex;width:100%;will-change:transform;transition:transform .7s var(--ease);touch-action:pan-y}.slider-track img{flex:0 0 33.333333%;width:33.333333%;height:100vh;min-height:640px;object-fit:cover;object-position:center;background:#222;user-select:none;-webkit-user-drag:none}.slider-arrow{position:absolute;bottom:22px;z-index:4;border:0;background:transparent;color:#fff;font-size:28px;padding:16px 28px;cursor:pointer}.slider-arrow--prev{left:14px}.slider-arrow--next{right:14px}.slider-count{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:4;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.home-intro{background:#fff;color:var(--ink);padding:110px 7vw 120px;display:grid;grid-template-columns:minmax(220px,.65fr) minmax(360px,1.35fr);gap:8vw;align-items:end}.eyebrow{margin:0 0 16px;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-weight:900;font-size:11px;line-height:1.35;letter-spacing:.16em;text-transform:uppercase}.home-intro h1{margin:0;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-weight:900;font-size:clamp(46px,7.2vw,116px);line-height:.84;letter-spacing:-.065em;text-transform:uppercase}.home-intro .intro-note{margin:0 0 3px;max-width:520px;font-size:17px;line-height:1.5;color:var(--muted-dark)}
.gallery-section{background:var(--black);padding:110px 4vw 120px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:46px}.section-head h2{margin:0;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-size:clamp(36px,5vw,76px);line-height:.9;letter-spacing:-.05em;text-transform:uppercase}.section-head p{max-width:480px;margin:0;color:var(--muted);font-size:14px;line-height:1.55}.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}.gallery-item{margin:0;overflow:hidden;background:#222;cursor:zoom-in;position:relative}.gallery-item:nth-child(6n+1),.gallery-item:nth-child(6n+4){grid-column:span 6}.gallery-item:nth-child(6n+2),.gallery-item:nth-child(6n+3),.gallery-item:nth-child(6n+5),.gallery-item:nth-child(6n+6){grid-column:span 3}.gallery-item img{width:100%;height:100%;min-height:300px;aspect-ratio:4/5;object-fit:cover;transition:transform .9s var(--ease),filter .4s ease}.gallery-item:nth-child(6n+1) img,.gallery-item:nth-child(6n+4) img{aspect-ratio:16/10}.gallery-item:hover img{transform:scale(1.025);filter:contrast(1.04)}
.home-journal{background:var(--paper);color:var(--ink);padding:110px 4vw 120px}.journal-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.journal-mini-card{display:block;text-decoration:none;border-top:1px solid var(--line-dark);padding-top:12px}.journal-mini-card img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#ddd;transition:filter .35s ease}.journal-mini-card:hover img{filter:grayscale(1)}.journal-mini-card .meta,.journal-card .meta{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.journal-mini-card h3{margin:10px 0 0;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-size:clamp(20px,2vw,31px);line-height:.98;letter-spacing:-.035em;text-transform:uppercase}
.blog-shell{background:var(--paper);color:var(--ink);min-height:100vh}.blog-masthead{padding:150px 4vw 52px;border-bottom:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:end;gap:40px}.blog-masthead h1{margin:0;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-weight:900;font-size:clamp(42px,6vw,88px);line-height:.9;letter-spacing:-.055em;text-transform:uppercase}.blog-masthead p{margin:0;max-width:480px;font-size:14px;line-height:1.55;color:var(--muted-dark)}.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 12px;padding:42px 4vw 96px}.journal-card{display:block;color:inherit;text-decoration:none;min-width:0}.journal-card figure{margin:0;overflow:hidden;background:#ddd;aspect-ratio:4/5}.journal-card img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease),filter .4s ease}.journal-card:hover img{transform:scale(1.018);filter:grayscale(.65)}.journal-card h2{margin:10px 0 0;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-weight:900;font-size:clamp(22px,2.3vw,36px);line-height:.97;letter-spacing:-.045em;text-transform:uppercase}.journal-card p{margin:10px 0 0;max-width:45ch;color:var(--muted-dark);font-size:13px;line-height:1.45}.pagination{display:none;justify-content:center;align-items:center;gap:8px;padding:0 4vw 100px}.pagination.is-visible{display:flex}.pagination button{border:1px solid var(--line-dark);background:transparent;color:var(--ink);min-width:42px;height:42px;cursor:pointer}.pagination button[aria-current="page"]{background:var(--ink);color:#fff}
.article-shell{background:var(--paper);color:var(--ink);min-height:100vh}.article-cover{position:relative;height:min(78vh,920px);min-height:560px;background:#222;overflow:hidden}.article-cover img{width:100%;height:100%;object-fit:cover}.article-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.06),rgba(0,0,0,.36))}.article-cover-meta{position:absolute;z-index:2;left:4vw;right:4vw;bottom:30px;color:#fff;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.15em;text-transform:uppercase}.article-header{padding:72px 4vw 80px;border-bottom:1px solid var(--line-dark);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:8vw;align-items:end}.article-header h1{margin:0;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-weight:900;font-size:clamp(46px,6.6vw,94px);line-height:.88;letter-spacing:-.06em;text-transform:uppercase}.article-deck{margin:0 0 4px;max-width:520px;font-size:18px;line-height:1.48;color:var(--muted-dark)}.article-body{padding:80px 4vw 120px}.copy{max-width:720px;margin:0 auto}.copy .lead{font-size:clamp(22px,2.15vw,31px);line-height:1.38;letter-spacing:-.02em}.copy p{font-size:17px;line-height:1.75;margin:0 0 26px}.copy h2{font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-size:34px;line-height:1;letter-spacing:-.04em;text-transform:uppercase;margin:70px 0 24px}.copy blockquote{margin:70px 0;padding:0 0 0 22px;border-left:2px solid var(--ink);font-size:25px;line-height:1.35;letter-spacing:-.02em}.story-image{margin:90px auto;max-width:1200px}.story-image img{width:100%;max-height:82vh;object-fit:cover;background:#ddd}.story-image--wide{aspect-ratio:16/9;overflow:hidden}.story-image--wide img{width:100%;height:100%;max-height:none;object-fit:cover}.story-image--placeholder figcaption::after{content:"  / replace image src with final Cloudinary link";opacity:.58}.story-image.is-portrait{max-width:760px}.story-image.is-portrait img{max-height:none;aspect-ratio:4/5}.story-image figcaption{margin-top:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}.story-pair{max-width:1200px;margin:90px auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}.story-pair figure{margin:0}.story-pair img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#ddd}.article-end{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-dark)}.article-end a{display:block;text-decoration:none;padding:42px 4vw 54px;min-height:210px}.article-end a+ a{border-left:1px solid var(--line-dark)}.article-end span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}.article-end strong{display:block;margin-top:20px;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-size:clamp(25px,3.2vw,52px);line-height:.95;letter-spacing:-.045em;text-transform:uppercase}
.archive-shell{background:var(--paper);color:var(--ink);min-height:100vh}.archive-masthead{padding:150px 4vw 70px;border-bottom:1px solid var(--line-dark)}.archive-masthead h1{margin:0;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-size:clamp(44px,6vw,88px);line-height:.9;letter-spacing:-.055em;text-transform:uppercase}.archive-list{padding:0 4vw 100px}.archive-row{display:grid;grid-template-columns:140px 1fr 220px;gap:30px;padding:30px 0;border-bottom:1px solid var(--line-dark);text-decoration:none;align-items:center}.archive-row img{width:100%;aspect-ratio:4/3;object-fit:cover}.archive-row h2{margin:0;font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;font-size:clamp(28px,4vw,60px);line-height:.92;letter-spacing:-.05em;text-transform:uppercase}.archive-row span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}
.zoom-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;cursor:zoom-out;padding:20px}.zoom-overlay.is-open{display:flex}.zoom-overlay img{max-width:95vw;max-height:92vh;object-fit:contain}.reveal{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .9s var(--ease)}.reveal.is-visible{opacity:1;transform:none}
@media (max-width:900px){
  .site-logo{display:none}.site-logo--mobile{display:block;top:12px;left:8px;height:auto;width:100%;max-width:10%;mix-blend-mode:difference}.site-logo--mobile img{width:100%;height:auto;filter:brightness(2)}.site-nav{top:15px;right:9px;gap:9px;max-width:82vw;justify-content:flex-end}.site-nav a{font-size:10px}.slider-track img{flex-basis:100%;width:100%;height:100svh;min-height:560px}.slider-arrow{bottom:14px;padding:14px 18px;font-size:24px}.slider-count{bottom:28px;font-size:9px}.home-intro{padding:82px 24px 86px;grid-template-columns:1fr;gap:32px}.home-intro h1{font-size:clamp(44px,16vw,72px)}.home-intro .intro-note{font-size:15px}.gallery-section,.home-journal{padding:82px 16px 88px}.section-head{display:block}.section-head p{margin-top:18px}.gallery-grid{grid-template-columns:1fr 1fr;gap:6px}.gallery-item,.gallery-item:nth-child(n){grid-column:span 1}.gallery-item img,.gallery-item:nth-child(n) img{min-height:0;aspect-ratio:4/5}.gallery-item:nth-child(5n+1){grid-column:span 2}.gallery-item:nth-child(5n+1) img{aspect-ratio:16/10}.journal-mini-grid{grid-template-columns:1fr;gap:34px}.journal-mini-card img{aspect-ratio:4/3}.blog-masthead{padding:110px 16px 34px;display:block}.blog-masthead p{margin-top:20px}.journal-grid{grid-template-columns:1fr;padding:28px 16px 70px;gap:40px}.journal-card figure{aspect-ratio:4/5}.journal-card img,.journal-card:nth-child(n) img{height:100%;object-fit:cover}.journal-card h2{font-size:30px}.pagination{padding-bottom:72px}.article-cover{height:68svh;min-height:460px}.article-cover-meta{left:16px;right:16px;bottom:18px;display:block}.article-cover-meta span{display:block;margin-top:7px}.article-header{padding:46px 16px 54px;grid-template-columns:1fr;gap:26px}.article-header h1{font-size:clamp(38px,12vw,56px);line-height:.92}.article-deck{font-size:16px}.article-body{padding:54px 16px 80px}.copy .lead{font-size:21px}.copy p{font-size:16px;line-height:1.68}.copy h2{font-size:29px;margin-top:54px}.copy blockquote{font-size:21px;margin:52px 0}.story-image,.story-pair{margin:58px auto}.story-pair{grid-template-columns:1fr;gap:8px}.story-image img{max-height:none}.article-end{grid-template-columns:1fr}.article-end a{min-height:150px;padding:30px 16px}.article-end a+a{border-left:0;border-top:1px solid var(--line-dark)}.archive-masthead{padding:110px 16px 50px}.archive-list{padding:0 16px 80px}.archive-row{grid-template-columns:90px 1fr;gap:18px}.archive-row>span:last-child{grid-column:2}.footer-logo{width:90px}.footer p{font-size:13px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.slider-track,.reveal,.gallery-item img,.journal-card img{transition:none!important}.reveal{opacity:1;transform:none}}


/* REV02: tighter Satisfy-inspired article rhythm while preserving VOR Avenir */
.journal-card figure {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.journal-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.journal-card .meta {
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.journal-card .meta span:nth-child(2)::before {
  content: "";
}
.journal-mini-card .meta {
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.article-shell--editorial {
  background: var(--paper);
  color: var(--ink);
}
.article-hero-clean {
  width: 100%;
  padding: 0;
  background: #111;
}
.article-hero-clean img {
  width: 100%;
  height: min(72vh, 780px);
  min-height: 520px;
  object-fit: cover;
  object-position: center;
  cursor: zoom-in;
}
.article-title-clean {
  padding: 54px 4vw 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: end;
  border-bottom: 1px solid var(--line-dark);
}
.article-title-clean .article-kicker {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted-dark);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.article-title-clean h1 {
  margin: 0;
  font-family: "VOR Avenir","Avenir Black","Avenir",sans-serif;
  font-weight: 900;
  font-size: clamp(46px, 8.2vw, 128px);
  line-height: .86;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.article-title-clean p {
  margin: 0 0 5px;
  max-width: 560px;
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1.25;
  letter-spacing: -.025em;
  color: rgba(17,17,17,.74);
}
.article-flow {
  padding: 52px 4vw 110px;
}
.article-copy {
  max-width: 680px;
  margin: 0 auto;
}
.article-copy p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -.005em;
  color: rgba(17,17,17,.86);
}
.article-copy .lead {
  font-size: clamp(21px, 2.05vw, 29px);
  line-height: 1.38;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 18px;
}
.article-copy .short-line {
  margin-top: 28px;
  margin-bottom: 12px;
  font-family: "VOR Avenir","Avenir Black","Avenir",sans-serif;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--ink);
}
.article-chapter {
  max-width: 680px;
  margin: 52px auto 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
}
.article-chapter span {
  display: block;
  color: var(--muted-dark);
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.article-media,
.article-media-grid,
.media-placeholder {
  margin: 44px auto 52px;
}
.article-media {
  max-width: min(1200px, 100%);
}
.article-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: none;
  object-fit: cover;
  background: #ddd;
  cursor: zoom-in;
}
.article-media figcaption,
.grid-caption,
.media-placeholder figcaption {
  max-width: 680px;
  margin: 10px auto 0;
  color: var(--muted-dark);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.article-media-grid {
  max-width: min(1240px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.article-media-grid--two {
  grid-template-columns: repeat(2, 1fr);
}
.article-media-grid figure {
  margin: 0;
  background: #ddd;
  overflow: hidden;
}
.article-media-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  cursor: zoom-in;
}
.article-media-grid .grid-caption {
  grid-column: 1 / -1;
}
.media-placeholder {
  max-width: min(1180px, 100%);
}
.media-placeholder div {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, transparent 49.8%, rgba(17,17,17,.18) 50%, transparent 50.2%),
    linear-gradient(45deg, transparent 49.8%, rgba(17,17,17,.18) 50%, transparent 50.2%),
    #e4e1d8;
  color: rgba(17,17,17,.54);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
}
.article-end {
  background: var(--paper);
}
.article-end strong {
  max-width: 700px;
}

@media (max-width: 900px) {
  .journal-card figure {
    aspect-ratio: 4 / 5;
  }
  .article-hero-clean img {
    height: 58svh;
    min-height: 420px;
  }
  .article-title-clean {
    padding: 40px 16px 38px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .article-title-clean .article-kicker {
    display: block;
    font-size: 9px;
    line-height: 1.65;
  }
  .article-title-clean .article-kicker span {
    display: block;
  }
  .article-title-clean h1 {
    font-size: clamp(42px, 15vw, 70px);
    line-height: .9;
  }
  .article-title-clean p {
    font-size: 17px;
    line-height: 1.35;
  }
  .article-flow {
    padding: 34px 16px 78px;
  }
  .article-copy p {
    font-size: 15.5px;
    line-height: 1.62;
    margin-bottom: 16px;
  }
  .article-copy .lead {
    font-size: 20px;
    line-height: 1.38;
  }
  .article-copy .short-line {
    font-size: 17px;
  }
  .article-chapter {
    margin: 42px auto 16px;
  }
  .article-media,
  .article-media-grid,
  .media-placeholder {
    margin: 34px auto 40px;
  }
  .article-media img,
  .article-media-grid img,
  .media-placeholder div {
    aspect-ratio: 4 / 3;
  }
  .article-media-grid,
  .article-media-grid--two {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .article-media figcaption,
  .grid-caption,
  .media-placeholder figcaption {
    font-size: 9px;
    margin-top: 8px;
  }
}


/* ==========================================================================
   REV03 — Unified SATISFY-inspired editorial article system
   Applies to all blog detail pages. Calm, compact, readable, no clutter.
   ========================================================================== */

/* Reading column shared by header + body */
:root{ --read: 680px; --read-wide: 1080px; }

/* --- Full-width top banner --- */
.article-hero-clean{ width:100%; padding:0; background:#111; }
.article-hero-clean img{
  width:100%; height:min(74vh,820px); min-height:460px;
  object-fit:cover; object-position:center; cursor:zoom-in;
}

/* --- Title / Date / Share block (below banner) --- */
.article-title-clean{
  display:block;                 /* override old 2-col grid */
  max-width:var(--read);
  margin:0 auto;
  padding:56px 24px 8px;
  border-bottom:0;               /* remove divider clutter */
}
.article-title-clean h1{
  margin:0;
  font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;
  font-weight:900;
  font-size:clamp(30px,4.6vw,52px);
  line-height:1.02;
  letter-spacing:-.035em;
  text-transform:none;           /* SATISFY uses sentence-case titles */
}
.article-title-clean .article-date{
  margin:14px 0 0;
  font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;
  font-weight:900;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-dark);
}
.article-share{
  display:inline-flex; align-items:center; gap:8px;
  margin:22px 0 0;
  padding:0; border:0; background:none; cursor:pointer;
  font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;
  font-weight:900;
  font-size:13px; letter-spacing:.02em; color:var(--ink);
}
.article-share:hover{ opacity:.6; }
.article-share svg{ width:15px; height:15px; }
.article-share .share-feedback{ font-weight:900; font-size:12px; color:var(--muted-dark); }

/* Hide legacy kicker + chapter dividers on editorial pages */
.article-shell--editorial .article-kicker,
.article-shell--editorial .article-chapter{ display:none; }

/* --- Body flow --- */
.article-flow{ padding:34px 24px 96px; }
.article-copy{ max-width:var(--read); margin:0 auto; }
.article-copy p{
  margin:0 0 20px;
  font-family:"VOR Avenir Text","Avenir","Avenir Next",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.72; letter-spacing:0;
  color:rgba(17,17,17,.9);
}
/* Consistent body — neutralize old lead / short-line emphasis */
.article-copy .lead,
.article-copy .short-line{
  font-family:"VOR Avenir Text","Avenir","Avenir Next",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.72; letter-spacing:0; font-weight:400;
  margin:0 0 20px; color:rgba(17,17,17,.9);
}
/* Genuine content subheads (City Forest / BRAUD) kept, styled calm */
.article-copy h2{
  font-family:"VOR Avenir","Avenir Black","Avenir",sans-serif;
  font-weight:900;
  font-size:20px; line-height:1.1; letter-spacing:-.02em;
  text-transform:none;
  margin:40px 0 16px;
}

/* --- Inline images: one by one, mixed sizes, never wider than viewport --- */
.article-media{
  margin:36px auto 40px;
  max-width:var(--read);          /* default = column width (medium) */
}
.article-media img{
  width:100%; height:auto; display:block;
  aspect-ratio:auto; max-height:none;
  object-fit:cover; background:#e4e1d8; cursor:zoom-in;
}
.article-media--sm{ max-width:340px; margin-left:0; margin-right:auto; } /* small, left-aligned */
.article-media--md{ max-width:var(--read); }
.article-media--wide{ max-width:var(--read-wide); }
.article-media figcaption{ display:none; }   /* no captions, per brief */

/* Kill legacy galleries / grids / grid captions on editorial pages */
.article-shell--editorial .article-media-grid,
.article-shell--editorial .grid-caption{ display:none !important; }

/* Clean placeholder (image not available yet) */
.media-placeholder{ max-width:var(--read); margin:36px auto 40px; }
.media-placeholder div{
  aspect-ratio:4/3; display:grid; place-items:center;
  background:
    linear-gradient(135deg,transparent 49.7%,rgba(17,17,17,.14) 50%,transparent 50.3%),
    linear-gradient(45deg,transparent 49.7%,rgba(17,17,17,.14) 50%,transparent 50.3%),
    #e4e1d8;
  color:rgba(17,17,17,.5); text-transform:uppercase; letter-spacing:.16em; font-size:10px;
}
.media-placeholder figcaption{ display:none; }

/* --- End nav --- */
.article-end{ background:var(--paper); }

/* --- Mobile: tight, premium, no overflow --- */
@media (max-width:900px){
  .article-hero-clean img{ height:52svh; min-height:320px; }
  .article-title-clean{ padding:36px 20px 4px; }
  .article-title-clean h1{ font-size:clamp(26px,7.6vw,38px); }
  .article-flow{ padding:26px 20px 72px; }
  .article-copy p,
  .article-copy .lead,
  .article-copy .short-line{ font-size:15.5px; line-height:1.68; margin-bottom:17px; }
  .article-copy h2{ font-size:18px; margin:32px 0 14px; }
  .article-media,
  .article-media--sm,
  .article-media--md,
  .article-media--wide,
  .media-placeholder{ margin:26px auto 30px; max-width:100%; }
  .article-media--sm{ max-width:62%; }
}

/* ========================================================================== 
   REV04 — Final blog detail system
   - Applies the approved BTR article rhythm to all blog detail pages.
   - New favicon handled in HTML files.
   - Article column widened to 1250px.
   - Image variants are now only: full-width within the article column, or left-aligned smaller images.
   - Letter tracking adjusted to -70 per client note.
   ========================================================================== */
.article-shell--editorial {
  --read: min(1250px, calc(100vw - 96px));
  --article-tracking: -0.07em;
}
.article-shell--editorial .article-title-clean,
.article-shell--editorial .article-flow {
  max-width: var(--read);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.article-shell--editorial .article-title-clean {
  display: block;
  padding-top: 54px;
  padding-bottom: 18px;
  border-bottom: 0;
}
.article-shell--editorial .article-title-clean h1 {
  font-family: "VOR Avenir", "Avenir Black", "Avenir", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: .98;
  letter-spacing: var(--article-tracking);
  text-transform: none;
  margin: 0;
}
.article-shell--editorial .article-title-clean .article-date,
.article-shell--editorial .article-share {
  letter-spacing: var(--article-tracking);
}
.article-shell--editorial .article-flow {
  padding-top: 30px;
  padding-bottom: 96px;
}
.article-shell--editorial .article-copy {
  max-width: var(--read);
  margin-left: auto;
  margin-right: auto;
}
.article-shell--editorial .article-copy p,
.article-shell--editorial .article-copy .lead,
.article-shell--editorial .article-copy .short-line {
  font-family: "VOR Avenir Text", "Avenir", "Avenir Next", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.68;
  letter-spacing: var(--article-tracking);
  margin: 0 0 18px;
  color: rgba(17,17,17,.9);
}
.article-shell--editorial .article-copy h2 {
  font-family: "VOR Avenir", "Avenir Black", "Avenir", sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: var(--article-tracking);
  text-transform: none;
  margin: 40px 0 16px;
}
.article-shell--editorial .article-media,
.article-shell--editorial .media-placeholder {
  max-width: var(--read);
  margin-top: 34px;
  margin-bottom: 42px;
}
.article-shell--editorial .article-media {
  width: 100%;
}
.article-shell--editorial .article-media--wide,
.article-shell--editorial .article-media--center {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.article-shell--editorial .article-media--md {
  width: min(560px, 78%);
  margin-left: 0;
  margin-right: auto;
}
.article-shell--editorial .article-media--sm,
.article-shell--editorial .article-media--left {
  margin-left: 0;
  margin-right: auto;
}
.article-shell--editorial .article-media--sm {
  width: min(390px, 54%);
}
.article-shell--editorial .article-media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: auto;
  max-height: none;
  object-fit: cover;
  background: #e4e1d8;
}
.article-shell--editorial .article-media figcaption,
.article-shell--editorial .media-placeholder figcaption,
.article-shell--editorial .grid-caption {
  display: none !important;
}
.article-shell--editorial .article-media-grid {
  display: none !important;
}
.article-shell--editorial .media-placeholder {
  width: min(460px, 64%);
  margin-left: 0;
  margin-right: auto;
}
.article-shell--editorial .media-placeholder div {
  width: 100%;
  aspect-ratio: 4 / 3;
}
@media (max-width: 900px) {
  .article-shell--editorial {
    --read: calc(100vw - 40px);
  }
  .article-shell--editorial .article-title-clean {
    padding-top: 36px;
    padding-bottom: 8px;
  }
  .article-shell--editorial .article-title-clean h1 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1;
  }
  .article-shell--editorial .article-flow {
    padding-top: 24px;
    padding-bottom: 72px;
  }
  .article-shell--editorial .article-copy p,
  .article-shell--editorial .article-copy .lead,
  .article-shell--editorial .article-copy .short-line {
    font-size: 15.5px;
    line-height: 1.66;
    margin-bottom: 16px;
  }
  .article-shell--editorial .article-copy h2 {
    font-size: 18px;
    margin: 32px 0 14px;
  }
  .article-shell--editorial .article-media,
  .article-shell--editorial .media-placeholder {
    max-width: var(--read);
    margin-top: 26px;
    margin-bottom: 34px;
  }
  .article-shell--editorial .article-media--wide,
  .article-shell--editorial .article-media--center {
    width: 100%;
  }
  .article-shell--editorial .article-media--md {
    width: 86%;
  }
  .article-shell--editorial .article-media--sm,
  .article-shell--editorial .media-placeholder {
    width: 72%;
  }
}
/* END REV04 */


/* ========================================================================== 
   REV05 — BTR detail desktop inline text beside non-full images
   - Desktop: non-wide image blocks can pair the article text beside the image.
   - Mobile: stacks back into a simple reading flow.
   ========================================================================== */
.article-shell--editorial .article-split {
  max-width: var(--read);
  width: 100%;
  margin: 34px auto 42px;
  display: grid;
  grid-template-columns: minmax(320px, 0.43fr) minmax(0, 0.57fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.article-shell--editorial .article-split--desktop-image-left .article-media {
  order: 1;
}
.article-shell--editorial .article-split--desktop-image-left .article-copy {
  order: 2;
}
.article-shell--editorial .article-split .article-media,
.article-shell--editorial .article-split .article-media--sm,
.article-shell--editorial .article-split .article-media--md,
.article-shell--editorial .article-split .article-media--left {
  width: 100%;
  max-width: none;
  margin: 0;
}
.article-shell--editorial .article-split .article-copy {
  max-width: none;
  margin: 0;
}
.article-shell--editorial .article-split .article-copy p:last-child {
  margin-bottom: 0;
}
.article-shell--editorial .article-split .article-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (min-width: 901px) {
  .article-shell--editorial .article-split .article-media--sm img {
    max-height: 520px;
  }
  .article-shell--editorial .article-split .article-media--md img {
    max-height: 620px;
  }
}
@media (max-width: 900px) {
  .article-shell--editorial .article-split {
    display: block;
    max-width: var(--read);
    margin: 26px auto 34px;
  }
  .article-shell--editorial .article-split .article-copy {
    margin-bottom: 22px;
  }
  .article-shell--editorial .article-split > .article-media:first-child + .article-copy {
    margin-top: 18px;
    margin-bottom: 0;
  }
  .article-shell--editorial .article-split .article-media,
  .article-shell--editorial .article-split .article-media--sm,
  .article-shell--editorial .article-split .article-media--md,
  .article-shell--editorial .article-split .article-media--left {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}
/* END REV05 */


/* ==========================================================================
   REV06 — Desktop editorial pullwords + Cloudinary image-safe layout
   - Pullwords are visual typography only on desktop.
   - Each word stacks vertically like the approved Satisfy-style reference.
   - Mobile keeps the article simple and hides pullwords.
   ========================================================================== */
@media (min-width: 901px) {
  .article-shell--editorial .article-pullword {
    margin: 0 0 24px;
    padding: 0;
    font-family: "VOR Avenir", "Avenir Black", "Avenir", sans-serif;
    font-size: 60px;
    font-weight: 600;
    line-height: .92;
    letter-spacing: -0.07em;
    text-transform: uppercase;
    color: var(--ink);
  }

  .article-shell--editorial .article-pullword span {
    display: block;
  }

  .article-shell--editorial .article-split .article-pullword + p {
    margin-top: 0;
  }

  .article-shell--editorial .article-split {
    align-items: start;
  }
}

@media (max-width: 900px) {
  .article-shell--editorial .article-pullword {
    display: none !important;
  }
}
/* END REV06 */


/* ==========================================================================
   REV07 — Pullword specificity fix + approved right-side typography
   - Fixes crossed-out pullword CSS by targeting p.article-pullword directly.
   - Desktop: visual pullwords sit in the right column beside non-full images.
   - Mobile: pullwords are hidden so reading flow stays clean.
   ========================================================================== */
@media (min-width: 901px) {
  .article-shell--editorial .article-split .article-copy p.article-pullword {
    display: block !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    font-family: "VOR Avenir", "Avenir Black", "Avenir", sans-serif !important;
    font-size: 60px !important;
    font-weight: 600 !important;
    line-height: .92 !important;
    letter-spacing: -0.07em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
  }

  .article-shell--editorial .article-split .article-copy p.article-pullword span {
    display: block !important;
  }

  .article-shell--editorial .article-split .article-copy p.article-pullword + p {
    margin-top: 0 !important;
  }
}

@media (max-width: 900px) {
  .article-shell--editorial .article-split .article-copy p.article-pullword {
    display: none !important;
  }
}
/* END REV07 */



/* ========================================================================== 
   REV08 — First pullword section: paragraph moves below the left image
   - Desktop: pullword stays right, supporting paragraph sits below the photo.
   - Mobile: image and paragraph stack naturally; pullword remains hidden.
   ========================================================================== */
@media (min-width: 901px) {
  .article-shell--editorial .article-split--pullword-side {
    grid-template-columns: minmax(320px, 0.43fr) minmax(0, 0.57fr);
    row-gap: 22px;
  }

  .article-shell--editorial .article-split--pullword-side > .article-media {
    grid-column: 1;
    grid-row: 1;
  }

  .article-shell--editorial .article-split--pullword-side > .article-copy--pullword-only {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .article-shell--editorial .article-split--pullword-side > .article-copy--under-media {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 900px) {
  .article-shell--editorial .article-copy--pullword-only {
    display: none;
  }

  .article-shell--editorial .article-split--pullword-side > .article-copy--under-media {
    margin-top: 18px;
    margin-bottom: 0;
  }
}
/* END REV08 */

/* ==========================================================================
   REV10 — Option 1 pullword layout cleanup
   - Desktop: image left + pullword right, with supporting paragraph below the pair.
   - Keeps paragraph readable instead of stretching across the whole page.
   - Mobile: normal stacked article flow, pullwords hidden.
   ========================================================================== */
@media (min-width: 901px) {
  .article-shell--editorial .article-split--pull-layout {
    grid-template-columns: minmax(420px, 0.48fr) minmax(360px, 0.52fr) !important;
    column-gap: clamp(46px, 5vw, 88px) !important;
    row-gap: 26px !important;
    align-items: center !important;
    margin-top: 48px !important;
    margin-bottom: 58px !important;
  }

  .article-shell--editorial .article-split--pull-layout > .article-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  .article-shell--editorial .article-split--pull-layout > .article-copy--pullword-only {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .article-shell--editorial .article-split--pull-layout > .article-copy--under-media {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 !important;
  }

  .article-shell--editorial .article-split--pull-layout > .article-copy--under-media p {
    max-width: 860px !important;
    margin-bottom: 18px !important;
  }

  .article-shell--editorial .article-split--pull-layout .article-copy p.article-pullword {
    margin: 0 !important;
    font-size: clamp(60px, 5.35vw, 96px) !important;
    font-weight: 600 !important;
    line-height: .86 !important;
    letter-spacing: -0.08em !important;
  }
}

@media (max-width: 900px) {
  .article-shell--editorial .article-split--pull-layout {
    display: block !important;
    margin: 26px auto 34px !important;
  }

  .article-shell--editorial .article-split--pull-layout > .article-copy--pullword-only {
    display: none !important;
  }

  .article-shell--editorial .article-split--pull-layout > .article-copy--under-media {
    margin-top: 18px !important;
  }
}
/* END REV10 */


/* ========================================================================== 
   REV11 — Pullword compact + FED four-image grid
   - First pullword reduced to three lines: NOT / ANOTHER / SHOOT.
   - FED section uses a 2x2 image grid on desktop, stacked cleanly on mobile.
   ========================================================================== */
@media (min-width: 901px) {
  .article-shell--editorial .article-split--pull-layout .article-copy p.article-pullword[aria-label="Not another shoot."] {
    font-size: clamp(64px, 6vw, 108px) !important;
    line-height: .84 !important;
    max-width: 620px !important;
  }

  .article-shell--editorial .article-split--pull-layout > .article-fed-grid {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  .article-shell--editorial .article-split--pull-layout:has(.article-fed-grid) {
    grid-template-columns: minmax(560px, 0.58fr) minmax(320px, 0.42fr) !important;
    column-gap: clamp(42px, 4vw, 72px) !important;
  }
}

.article-shell--editorial .article-fed-grid {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.article-shell--editorial .article-fed-grid figure {
  margin: 0;
  overflow: hidden;
  background: #e4e1d8;
}

.article-shell--editorial .article-fed-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

@media (max-width: 900px) {
  .article-shell--editorial .article-fed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 18px;
  }

  .article-shell--editorial .article-fed-grid img {
    aspect-ratio: 1 / 1;
  }
}
/* END REV11 */

/* ========================================================================== 
   REV12 TEST — Reduced-photo editorial article layout
   - Removes decorative pullwords and uses selected article text as large copy.
   - Keeps photography lighter: fewer single images + one FED grid block.
   - Designed to test cleaner rag, hierarchy, and desktop/mobile readability.
   ========================================================================== */
.article-shell--feature-test {
  --read: min(1250px, calc(100vw - 96px));
  --article-tracking: -0.035em;
}
.article-shell--feature-test .reveal {
  opacity: 1;
  transform: none;
}
.article-shell--feature-test .article-flow {
  padding-top: 36px;
}
.article-shell--feature-test .article-copy p {
  letter-spacing: var(--article-tracking);
  line-height: 1.58;
}
.article-shell--feature-test .article-copy--intro {
  max-width: var(--read);
}
.article-shell--feature-test .article-feature {
  width: 100%;
  max-width: var(--read);
  margin: 42px auto 70px;
  display: grid;
  grid-template-columns: minmax(420px, .48fr) minmax(420px, .52fr);
  gap: clamp(34px, 4vw, 76px);
  align-items: start;
}
.article-shell--feature-test .article-feature__media {
  margin: 0;
  background: #e4e1d8;
  overflow: hidden;
}
.article-shell--feature-test .article-feature__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.article-shell--feature-test .article-feature__copy {
  margin: 0;
  max-width: 720px;
}
.article-shell--feature-test .article-feature__statement {
  margin: -0.05em 0 0;
  font-family: "VOR Avenir Text", "Avenir", "Avenir Next", Helvetica, Arial, sans-serif;
  font-size: clamp(30px, 2.65vw, 48px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.07em;
  text-transform: none;
  color: var(--ink);
  text-wrap: pretty;
  hyphens: none;
}
.article-shell--feature-test .article-feature__below {
  grid-column: 1 / -1;
  max-width: 900px;
  margin: 4px 0 0;
}
.article-shell--feature-test .article-feature__below p {
  margin: 0 0 18px;
  font-family: "VOR Avenir Text", "Avenir", "Avenir Next", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: var(--article-tracking);
  color: rgba(17, 17, 17, .9);
  text-wrap: pretty;
}
.article-shell--feature-test .article-media--wide {
  max-width: var(--read);
  margin-top: 44px;
  margin-bottom: 62px;
}
.article-shell--feature-test .article-media--wide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-shell--feature-test .article-feature--fed {
  grid-template-columns: minmax(560px, .58fr) minmax(360px, .42fr);
}
.article-shell--feature-test .article-feature--fed .article-fed-grid {
  margin: 0;
}
.article-shell--feature-test .article-feature--fed .article-feature__statement {
  font-size: clamp(30px, 2.4vw, 42px);
}
@media (max-width: 900px) {
  .article-shell--feature-test {
    --read: calc(100vw - 40px);
    --article-tracking: -0.025em;
  }
  .article-shell--feature-test .article-flow {
    padding-top: 28px;
  }
  .article-shell--feature-test .article-copy--intro {
    max-width: var(--read);
  }
  .article-shell--feature-test .article-feature,
  .article-shell--feature-test .article-feature--fed {
    display: block;
    max-width: var(--read);
    margin: 32px auto 48px;
  }
  .article-shell--feature-test .article-feature__media {
    margin-bottom: 18px;
  }
  .article-shell--feature-test .article-feature__media img {
    aspect-ratio: 4 / 3;
  }
  .article-shell--feature-test .article-feature__statement,
  .article-shell--feature-test .article-feature--fed .article-feature__statement {
    font-size: clamp(22px, 7vw, 34px);
    line-height: 1.18;
    letter-spacing: -0.055em;
    margin-bottom: 18px;
    margin-top: 18px;
  }
  .article-shell--feature-test .article-feature__below {
    max-width: 100%;
  }
  .article-shell--feature-test .article-feature__below p {
    font-size: 15.5px;
    line-height: 1.62;
  }
  .article-shell--feature-test .article-media--wide {
    margin: 32px auto 48px;
  }
  .article-shell--feature-test .article-media--wide img {
    aspect-ratio: 4 / 3;
  }
}
/* END REV12 TEST */

/* ========================================================================== 
   REV13 TEST — Cleaner editorial spacing + desktop paragraph justification
   - Article feature below text now spans the full article width.
   - Large side statement is shortened so it does not exceed image height.
   - Desktop body paragraphs are justified for cleaner rag.
   ========================================================================== */
.article-shell--feature-test .article-feature {
  margin-top: 54px;
  margin-bottom: 78px;
}
.article-shell--feature-test .article-feature__below {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  margin: 22px 0 0;
}
.article-shell--feature-test .article-feature__below p {
  max-width: 100%;
}
.article-shell--feature-test .article-feature__statement {
  max-width: 100%;
  text-wrap: balance;
}
.article-shell--feature-test .article-media--wide {
  margin-top: 54px;
  margin-bottom: 78px;
}
.article-shell--feature-test .article-copy {
  max-width: var(--read);
}
@media (min-width: 901px) {
  .article-shell--feature-test .article-copy p,
  .article-shell--feature-test .article-feature__below p {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
  }
  .article-shell--feature-test .article-feature__statement {
    text-align: left;
    text-align-last: auto;
  }
}
@media (max-width: 900px) {
  .article-shell--feature-test .article-feature {
    margin-top: 34px;
    margin-bottom: 54px;
  }
  .article-shell--feature-test .article-feature__below {
    margin-top: 18px;
  }
}
/* END REV13 TEST */


/* ========================================================================== 
   REV05 PACK — unified detail pages, navbar alignment, justified blog copy
   ========================================================================== */
@media (min-width: 901px) {
  .site-logo {
    top: 20px;
    height: 25px;
    display: flex;
    align-items: center;
  }
  .site-logo img {
    height: 25px;
    width: auto;
  }
  .site-nav {
    top: 20px;
    height: 25px;
    align-items: center;
  }
  .site-nav a {
    height: 25px;
    line-height: 25px;
    display: inline-flex;
    align-items: center;
  }

  .article-shell--editorial .article-copy p,
  .article-shell--editorial .article-feature__copy p,
  .article-shell--editorial .article-feature__below p,
  .article-shell--editorial .copy p {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
    hyphens: auto;
  }

  .article-shell--feature-test .article-feature__below {
    width: 100%;
    max-width: 100%;
  }

  .article-shell--feature-test .article-feature__below p {
    max-width: 100%;
  }
}
/* END REV05 PACK */

/* ========================================================================== 
   VOR26-003 — final nav/footer alignment pass
   - Hide mobile logo on desktop so it never duplicates the main logo.
   - Align logo and menu on one consistent horizontal level.
   - Match mobile nav gutters to section padding.
   - Footer logo/text sizing adjustment.
   ========================================================================== */
.site-logo--mobile {
  display: none !important;
}
.footer-logo {
  width: 90px;
  height: auto;
  margin-bottom: 4px;
}

@media (min-width: 901px) {
  .site-logo:not(.site-logo--mobile) {
    display: flex !important;
    align-items: center;
    top: 20px;
    left: 20px;
    height: 25px;
    width: auto;
    padding: 0;
  }
  .site-logo:not(.site-logo--mobile) img {
    height: 25px;
    width: auto;
    display: block;
  }
  .site-logo--mobile {
    display: none !important;
  }
  .site-nav {
    top: 20px;
    right: 20px;
    height: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .site-nav a {
    display: inline-flex;
    align-items: center;
    height: 25px;
    line-height: 25px;
    padding: 0;
  }
}

@media (max-width: 900px) {
  .site-logo:not(.site-logo--mobile) {
    display: none !important;
  }
  .site-logo--mobile {
    display: block !important;
    position: fixed;
    top: 16px;
    left: 16px;
    width: 10vw;
    max-width: 10%;
    min-width: 36px;
    height: auto;
    padding: 0;
    mix-blend-mode: difference;
  }
  .site-logo--mobile img {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(2);
  }
  .site-nav {
    top: 16px;
    right: 16px;
    height: 18px;
    max-width: calc(100vw - 86px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
  }
  .site-nav a {
    display: inline-flex;
    align-items: center;
    height: 18px;
    line-height: 18px;
    padding: 0;
  }
  .footer p {
    font-size: 16px;
  }
}
/* END VOR26-003 */


/* ========================================================================== 
   VOR26-003 FINAL — nav hover static, archive/blog visibility, mobile archive order
   ========================================================================== */
.site-nav a,
.site-nav a:hover,
.site-nav a:focus,
.site-nav a[aria-current="page"] {
  transform: none !important;
}
.site-nav a {
  transition: opacity .2s ease, color .2s ease !important;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  opacity: .58;
}

/* Keep desktop/mobile nav aligned on one optical baseline */
@media (min-width: 901px) {
  .site-logo:not(.site-logo--mobile),
  .site-nav {
    top: 20px !important;
    height: 25px !important;
    align-items: center !important;
  }
  .site-logo--mobile {
    display: none !important;
  }
  .site-nav a {
    height: 25px !important;
    line-height: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
}

@media (max-width: 900px) {
  .site-logo:not(.site-logo--mobile) {
    display: none !important;
  }
  .site-logo--mobile {
    display: block !important;
    top: 16px !important;
    left: 16px !important;
    padding: 0 !important;
  }
  .site-nav {
    top: 16px !important;
    right: 16px !important;
    height: 18px !important;
    align-items: center !important;
    max-width: calc(100vw - 86px) !important;
  }
  .site-nav a {
    height: 18px !important;
    line-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
}

.footer-logo {
  width: 90px;
  height: auto;
  margin-bottom: 4px;
}
@media (max-width: 900px) {
  .footer p {
    font-size: 16px;
  }
}

/* Archive: keep staged rows in the source but hide them for now */
.archive-row[hidden],
.journal-card[hidden],
.journal-mini-card[hidden] {
  display: none !important;
}

/* Archive mobile requested order: date → image → title */
@media (max-width: 900px) {
  .archive-list {
    padding: 0 16px 80px !important;
  }
  .archive-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 34px 0 42px !important;
  }
  .archive-row > span {
    order: 1;
    font-size: 12px !important;
    letter-spacing: .18em !important;
  }
  .archive-row > img {
    order: 2;
    width: min(180px, 48vw) !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }
  .archive-row > h2 {
    order: 3;
    width: 100% !important;
    font-size: clamp(38px, 11vw, 58px) !important;
    line-height: .92 !important;
  }
}

/* City Forest archive detail page */
.city-archive-hero {
  background: var(--black);
  color: #fff;
  min-height: 90vh;
  display: grid;
  place-items: center;
  padding: 140px 4vw 80px;
}
.city-archive-hero__inner {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(280px, .55fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.city-archive-hero img {
  width: 100%;
  height: auto;
}
.city-archive-hero h1 {
  margin: 0;
  font-family: "VOR Avenir", "Avenir Black", "Avenir", sans-serif;
  font-weight: 900;
  font-size: clamp(54px, 8vw, 132px);
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.city-archive-hero p {
  margin: 24px 0 0;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,.74);
}
.city-archive-section {
  background: var(--paper);
  color: var(--ink);
  padding: 90px 4vw;
}
.city-archive-copy {
  width: min(980px, 100%);
  margin: 0 auto;
}
.city-archive-copy p {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 24px;
  letter-spacing: -0.035em;
}
.city-archive-copy h2 {
  margin: 66px 0 24px;
  font-family: "VOR Avenir", "Avenir Black", "Avenir", sans-serif;
  font-size: clamp(34px, 5vw, 76px);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.city-archive-image {
  width: min(1180px, 100%);
  margin: 70px auto;
}
.city-archive-image img {
  width: 100%;
  height: auto;
}
.city-racepack {
  width: min(1180px, 100%);
  margin: 70px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.city-racepack figure {
  margin: 0;
  background: #fff;
  padding: 22px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.city-racepack img {
  width: 100%;
  height: 180px;
  object-fit: contain;
}
.city-racepack figcaption {
  font-family: "VOR Avenir", "Avenir Black", "Avenir", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
@media (max-width: 900px) {
  .city-archive-hero {
    min-height: auto;
    padding: 110px 16px 64px;
  }
  .city-archive-hero__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .city-archive-hero h1 {
    font-size: clamp(48px, 17vw, 82px);
  }
  .city-archive-section {
    padding: 64px 16px;
  }
  .city-archive-copy p {
    font-size: 16px;
    line-height: 1.62;
  }
  .city-racepack {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .city-racepack figure {
    padding: 14px;
    min-height: 190px;
  }
  .city-racepack img {
    height: 126px;
  }
}
/* END VOR26-003 FINAL */


/* ==========================================================================
   VOR26-004 — archive/footer/detail cleanup
   ========================================================================== */
/* Keep Archive footer at the bottom when the page content is short. */
body.archive-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.archive-shell > main {
  flex: 1 0 auto;
}
body.archive-shell > .footer {
  margin-top: auto;
}

/* Archive detail only: use white content surfaces instead of paper. */
body.city-archive-detail {
  background: #fff;
}
body.city-archive-detail .city-archive-section,
body.city-archive-detail .article-end {
  background: #fff !important;
}

/* Navigation stays optically still on hover/current states. */
.site-nav a,
.site-nav a:hover,
.site-nav a:focus,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  transform: none !important;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  opacity: .58;
}

/* Keep staged homepage/blog/archive cards in source while hidden from UI. */
.journal-mini-card[hidden],
.journal-card[hidden],
.archive-row[hidden] {
  display: none !important;
}
/* END VOR26-004 */


/* ========================================================================== 
   VOR26-005 — clean URL deploy + final routing polish
   ========================================================================== */
.site-nav a,
.site-nav a:hover,
.site-nav a:focus,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  transform: none !important;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  opacity: .58;
}
.article-end--single {
  grid-template-columns: 1fr !important;
}
.article-end--single a {
  border-left: 0 !important;
}
.footer-logo {
  width: 90px;
  height: auto;
  margin-bottom: 4px;
}
@media (max-width: 900px) {
  .footer p { font-size: 16px; }
}
/* END VOR26-005 */