:root {
  --paper: #f8f4ed;
  --plaster: #f5f0e8;
  --sand: #e8ddd0;
  --espresso: #2b1f1a;
  --ink: #493b34;
  --muted: #7a7370;
  --clay: #b27a63;
  --sage: #5c6653;
  --bronze: #a9895a;
  --line: rgba(43, 31, 26, .18);
  --major-break: clamp(220px, 24vw, 380px);
  --hero-break: clamp(143px, 15.6vw, 247px);
  --portrait-lift: clamp(72px, 7vw, 112px);
  --newsletter-break: clamp(56px, 6vw, 96px);
  --chapter-gap: clamp(10.95rem, 15.625vw, 17.2rem);
  --layer-shadow: 0 52px 82px -30px rgba(20, 13, 10, .78), 0 18px 36px -22px rgba(20, 13, 10, .84);
  --page: min(1240px, calc(100vw - 96px));
  --hero-title-size: clamp(4.15rem, 7.35vw, 7.8rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--espresso);
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.home-page { overflow-x: clip; }
body.menu-open { overflow: hidden; }
.page-backdrop { position: fixed; z-index: 0; inset: 0; background: linear-gradient(rgba(43,31,26,.68), rgba(43,31,26,.78)), url("../images/hero-poster-3.jpg") 58% center / cover no-repeat; pointer-events: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 1000; padding: .8rem 1rem; background: white; }
.skip-link:focus { top: 1rem; }

.site-intro { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; overflow: hidden; color: white; pointer-events: none; animation: intro-finish 0s linear 2.72s forwards; }
.site-intro::before, .site-intro::after { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; width: 50.1%; background: var(--espresso); animation-duration: 1.08s; animation-timing-function: cubic-bezier(.76,0,.24,1); animation-delay: 1.64s; animation-fill-mode: forwards; }
.site-intro::before { left: 0; animation-name: curtain-left; }
.site-intro::after { right: 0; animation-name: curtain-right; }
.site-intro-mark { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; line-height: .9; animation: intro-mark 1.1s cubic-bezier(.2,.7,.2,1) both, intro-mark-out .52s ease 1.6s forwards; }
.site-intro-mark span { font-size: var(--hero-title-size); font-weight: 300; letter-spacing: -.055em; }
.site-intro-mark strong { color: var(--bronze); font-size: var(--hero-title-size); font-weight: 300; letter-spacing: -.055em; }
.site-intro-mark small { margin-top: 1.7rem; font-size: .55rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; opacity: .58; }
.site-intro-line { position: absolute; z-index: 1; top: 50%; left: 50%; width: 1px; height: 0; background: rgba(255,255,255,.5); transform: translate(-50%, -50%); animation: intro-line .72s ease .18s forwards, intro-line-open .5s ease 1.56s forwards; }
@keyframes intro-mark {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes intro-line {
  from { height: 0; }
  to { height: 78%; }
}
@keyframes intro-line-open { to { height: 100%; opacity: 0; } }
@keyframes intro-mark-out { to { opacity: 0; } }
@keyframes curtain-left { to { transform: translateX(-100%); } }
@keyframes curtain-right { to { transform: translateX(100%); } }
@keyframes intro-finish { to { visibility: hidden; } }

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 84px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.25);
  transition: background .35s, min-height .35s;
}
.site-header.scrolled { min-height: 70px; background: rgba(43,31,26,.96); backdrop-filter: blur(12px); }
.brand-lockup { display: flex; align-items: center; gap: 1rem; }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.brand span { font-size: 1.22rem; font-weight: 400; letter-spacing: .015em; }
.brand small { margin-top: .4rem; font-size: .52rem; text-transform: uppercase; letter-spacing: .28em; opacity: .75; }
.brand-divider { width: 1px; height: 34px; background: rgba(255,255,255,.34); }
.rsr-brand { display: flex; align-items: center; opacity: .82; transition: opacity .25s ease, transform .25s ease; }
.rsr-brand:hover { opacity: 1; transform: translateY(-1px); }
.rsr-brand img { width: clamp(58px, 4.8vw, 74px); height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.3vw, 2.4rem); }
.site-nav a { font-size: .66rem; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .16em; }
.site-nav a:not(.nav-contact) { position: relative; }
.site-nav a:not(.nav-contact)::after { content: ""; position: absolute; left: 0; bottom: -.5rem; width: 0; height: 1px; background: var(--bronze); transition: width .25s; }
.site-nav a:hover::after { width: 100%; }
.nav-contact { padding: .75rem 1.15rem; border: 1px solid rgba(255,255,255,.7); }
.menu-button { display: none; }

.hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--espresso); color: white; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: hero-arrive 2.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hero-arrive {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,19,16,.78) 0%, rgba(28,19,16,.36) 47%, rgba(28,19,16,.14) 78%), linear-gradient(0deg, rgba(24,16,13,.55), transparent 45%); }
.hero-copy { position: relative; z-index: 2; width: var(--page); min-height: 100svh; margin: auto; padding: 10rem 0 7rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.eyebrow { margin: 0 0 1.3rem; color: var(--bronze); font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .28em; }
.eyebrow::before { content: ""; display: inline-block; vertical-align: middle; width: 36px; height: 1px; margin-right: .9rem; background: currentColor; }
.eyebrow.light { color: #e7d7c2; }
.hero h1 { margin: 0; max-width: 760px; font-size: var(--hero-title-size); font-weight: 300; letter-spacing: -.055em; line-height: .86; }
.hero h1 em { color: #eadfce; font-style: normal; font-weight: 300; }
.hero-byline { margin: 1.1rem 0 0; color: var(--bronze); font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; }
.hero-intro { max-width: 570px; margin: 2.6rem 0 0; font-size: clamp(.95rem, 1.4vw, 1.1rem); font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.86); }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 2.4rem; }
.button { display: inline-block; padding: 1rem 1.45rem; border: 1px solid transparent; text-decoration: none; text-transform: uppercase; letter-spacing: .14em; font-size: .65rem; font-weight: 600; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-2px); }
.button-light { background: var(--plaster); color: var(--espresso); }
.button-dark { background: var(--espresso); color: white; }
.text-link { display: inline-block; margin-top: 1.5rem; text-decoration: none; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px solid var(--bronze); padding-bottom: .35rem; }
.hero-actions .text-link { margin: 0; }
.light-link { color: white; border-color: rgba(255,255,255,.55); }
.text-link span { margin-left: .45rem; }
.scroll-cue { position: absolute; z-index: 3; right: 4vw; bottom: 2.5rem; color: white; text-decoration: none; text-transform: uppercase; font-size: .52rem; letter-spacing: .2em; writing-mode: vertical-rl; }
.scroll-cue span { display: inline-block; width: 1px; height: 45px; margin-bottom: .8rem; background: rgba(255,255,255,.7); }
.hero-break { position: relative; z-index: 1; height: var(--hero-break); background: transparent; }

section { position: relative; }
.hero, .about, .newsletter, .contact, footer { z-index: 1; }
.hero, .about, .newsletter, .contact { box-shadow: var(--layer-shadow); }
.depth-stage { position: relative; z-index: 1; isolation: isolate; padding: var(--chapter-gap) 0 clamp(5.5rem, 8vw, 8rem); overflow: clip; background: linear-gradient(110deg, rgba(178,122,99,.12), transparent 38%, rgba(92,102,83,.14)); }
.depth-stage .depth-panel { position: relative; z-index: 1; width: min(1360px, calc(100vw - 64px)); margin: 0 auto var(--chapter-gap); padding-right: clamp(2rem, 4.5vw, 4rem); padding-left: clamp(2rem, 4.5vw, 4rem); border: 1px solid rgba(255,255,255,.34); background: rgba(248,244,237,.97); box-shadow: 0 64px 110px -38px rgba(20,13,10,.82), 0 20px 42px -24px rgba(20,13,10,.88); translate: 0 var(--panel-shift, 0px); will-change: translate; }
.depth-stage .manifesto { padding-top: clamp(6rem, 9vw, 9rem); padding-bottom: clamp(6rem, 9vw, 9rem); }
.depth-stage .stories { margin-left: max(24px, calc((100vw - 1360px)/2 - 1.5vw)); }
.depth-stage .obsession-edit { margin-right: max(24px, calc((100vw - 1360px)/2 - 1.5vw)); margin-left: auto; }
.depth-stage .resources { margin-right: auto; margin-left: max(24px, calc((100vw - 1360px)/2 - 1.5vw)); margin-bottom: 0; }
.manifesto { width: var(--page); margin: auto; padding: 8rem 0; }
.section-number { position: absolute; top: 8rem; right: 0; color: var(--bronze); font-size: .62rem; letter-spacing: .15em; }
.manifesto-copy { max-width: 880px; }
.manifesto-copy h2 { transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity 1s ease; }
.manifesto:not(.in-view) .manifesto-copy h2 { opacity: 0; transform: translateX(-45px); }
.manifesto.in-view .section-number { animation: number-arrive 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes number-arrive {
  from { opacity: 0; transform: translateY(45px); }
  to { opacity: 1; transform: none; }
}
h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 300; letter-spacing: -.045em; line-height: 1.03; }
.manifesto-copy > p:last-child { max-width: 600px; margin: 2rem 0 0 auto; color: var(--ink); font-size: 1.05rem; }
.pathway-grid { margin-top: 6rem; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pathway { position: relative; min-height: 330px; padding: 2.2rem; text-decoration: none; border-right: 1px solid var(--line); transition: background .3s, color .3s; }
.pathway:last-child { border: 0; }
.pathway:hover { background: var(--espresso); color: white; }
.pathway-no { font-size: .62rem; color: var(--bronze); }
.pathway h3 { margin: 5rem 0 1rem; font-size: clamp(1.5rem, 2.4vw, 2.3rem); font-weight: 400; }
.pathway p { max-width: 280px; color: var(--muted); font-size: .9rem; }
.pathway:hover p { color: rgba(255,255,255,.68); }
.pathway .arrow { position: absolute; left: 2.2rem; bottom: 2rem; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }

.about { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(420px, .95fr) minmax(420px, 1.05fr); align-items: center; gap: clamp(3rem, 6vw, 7rem); min-height: 780px; padding: 0 max(5vw, calc((100vw - 1400px)/2)) clamp(4rem, 6vw, 6rem); overflow: visible; background: var(--paper); color: var(--espresso); }
.about::before { content: "JULIA"; position: absolute; z-index: -1; right: -1vw; bottom: -3vw; color: rgba(43,31,26,.035); font-size: clamp(8rem, 22vw, 21rem); font-weight: 600; letter-spacing: -.09em; line-height: .7; transform: translateY(var(--about-shift, 0px)); pointer-events: none; }
.about-image-wrap { position: relative; z-index: 2; width: min(100%, 650px); height: clamp(620px, 68vw, 780px); margin: 0 auto calc(-1 * var(--portrait-lift)); transform: translateY(calc(-1 * var(--portrait-lift))); }
.about-image-wrap::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid rgba(198,154,116,.55); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.about-image { position: absolute; inset: 0; background: url("../images/julia-meet-profile.jpg") center calc(7% + var(--portrait-shift, 0px)) / 125% auto no-repeat; box-shadow: 0 18px 26px -14px rgba(43,31,26,.34), 0 44px 76px -36px rgba(43,31,26,.28); clip-path: inset(0 0 100% 0); transition: transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .8s ease; }
.about.in-view .about-image { animation: portrait-reveal 1.15s cubic-bezier(.76,0,.24,1) .12s forwards; }
.about-image-wrap:hover .about-image { transform: translate(-7px, -7px); box-shadow: 0 22px 30px -15px rgba(43,31,26,.38), 0 54px 86px -38px rgba(43,31,26,.32); }
.about-image-wrap:hover::before { transform: translate(7px, 7px); }
.about-image-caption { position: absolute; z-index: 3; left: -1.2rem; bottom: 1.4rem; padding: .65rem .9rem; background: var(--paper); color: var(--espresso); font-size: .52rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; transform: rotate(-90deg) translateY(-100%); transform-origin: left bottom; }
@keyframes portrait-reveal { to { clip-path: inset(0 0 0 0); } }
.about-copy { max-width: 640px; padding: clamp(4rem, 8vw, 8rem) 0 0; }
.about-copy .eyebrow { color: var(--bronze); }
.about-copy h2 { font-size: clamp(2.7rem, 4.5vw, 5rem); }
.about-bio { max-width: 66ch; margin: 2.2rem 0 2.3rem; }
.about-bio p { margin: 0; color: var(--ink); font-size: 1.03rem; line-height: 1.72; }
.about-bio p + p { margin-top: 1.35rem; }
.about-bio .about-signoff { max-width: 540px; color: var(--espresso); font-size: 1.08rem; font-weight: 500; }
.keep-together { white-space: nowrap; }

.testimonials-carousel { position: relative; z-index: 2; min-height: 780px; overflow: hidden; padding: clamp(4rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4.5rem); background: url("../images/sale-1.jpg") center / cover no-repeat; color: white; box-shadow: var(--layer-shadow); }
.testimonials-shade { position: absolute; inset: 0; background: rgba(62,76,62,.38); backdrop-filter: saturate(.78); }
.testimonials-intro { position: relative; z-index: 2; width: var(--page); margin: 0 auto 2.5rem; text-align: center; }
.testimonials-intro .eyebrow { margin: 0 0 .75rem; }
.testimonials-intro h2 { font-size: clamp(2.7rem, 4.5vw, 5rem); text-shadow: 0 2px 24px rgba(43,31,26,.22); }
.testimonial-stage { position: relative; z-index: 2; width: min(1180px, 92vw); height: 420px; margin: auto; perspective: 1000px; }
.testimonial-card { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(700px, 64vw); min-height: 360px; margin: 0; padding: clamp(2.2rem, 4vw, 4rem); border: 1px solid rgba(255,255,255,.48); background: rgba(245,240,232,.94); box-shadow: 0 24px 65px rgba(43,31,26,.18); color: var(--espresso); text-align: center; opacity: 0; transform: translate(-50%, -50%) scale(.82); transition: transform .65s cubic-bezier(.2,.7,.2,1), opacity .5s ease; pointer-events: none; }
.testimonial-card.is-active { z-index: 3; opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.testimonial-card.is-prev { z-index: 1; opacity: .58; transform: translate(-108%, -50%) scale(.82); }
.testimonial-card.is-next { z-index: 1; opacity: .58; transform: translate(8%, -50%) scale(.82); }
.testimonial-stars { color: var(--bronze); font-size: .68rem; letter-spacing: .26em; }
.testimonial-card blockquote { max-width: 610px; margin: 2rem 0; color: var(--espresso); font-size: clamp(1.2rem, 1.65vw, 1.65rem); font-weight: 300; line-height: 1.48; }
.testimonial-card figcaption { color: var(--muted); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.testimonial-controls { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.6rem; }
.testimonial-controls button { width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.8); background: rgba(43,31,26,.12); color: white; font-size: 1.25rem; cursor: pointer; transition: background .25s ease, color .25s ease; }
.testimonial-controls button:hover, .testimonial-controls button:focus-visible { background: var(--paper); color: var(--espresso); }
.testimonial-controls p { min-width: 62px; margin: 0; color: rgba(255,255,255,.78); font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-align: center; }

.stories, .resources { width: var(--page); margin: auto; padding: 9rem 0; }
.stories, .resources { z-index: 2; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 4rem; }
.section-heading h2 { font-size: clamp(2.7rem, 4.8vw, 4.8rem); }
.section-heading > p { max-width: 420px; margin: 0; color: var(--muted); }
.story-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
.story-card { display: grid; background: var(--plaster); box-shadow: 0 10px 30px rgba(43,31,26,.04); transition: translate .4s ease, box-shadow .4s ease; }
.story-card:hover { translate: 0 -8px; box-shadow: 0 24px 55px rgba(43,31,26,.14); }
.story-feature { grid-row: span 2; }
.story-origin { grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr); margin-top: 1.5rem; }
.story-origin .story-visual { min-height: 100%; }
.story-visual { position: relative; z-index: 0; min-height: 330px; overflow: hidden; }
.story-visual::before { content: ""; position: absolute; z-index: -1; inset: -3%; background: linear-gradient(rgba(43,31,26,.08),rgba(43,31,26,.42)), url("../images/hero-poster-3.jpg") 62% center / cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
.story-card:hover .story-visual::before { transform: scale(1.06); filter: saturate(1.08); }
.visual-glendale { min-height: 500px; }
.visual-glendale::before { background: linear-gradient(rgba(43,31,26,.02), rgba(43,31,26,.18)), url("../images/sycamore-living-room.jpg") center / cover; }
.visual-valley::before { background: linear-gradient(rgba(43,31,26,.04), rgba(43,31,26,.2)), url("../images/east-glenoaks-house.jpg") center 48% / cover; }
.visual-glassell { min-height: 250px; background: var(--sage); }
.visual-glassell::before { background: linear-gradient(rgba(43,31,26,.02), rgba(43,31,26,.18)), url("../images/glassell-park-craftsman.jpg") center / cover; }
.story-visual span { position: absolute; left: 1.5rem; top: 1.5rem; padding: .45rem .7rem; background: rgba(43,31,26,.82); color: white; font-size: .55rem; text-transform: uppercase; letter-spacing: .15em; }
.story-copy { padding: 2rem; }
.story-copy .location { margin: 0 0 .8rem; color: var(--bronze); font-size: .58rem; font-weight: 600; text-transform: uppercase; letter-spacing: .17em; }
.story-copy h3 { margin: 0 0 1rem; font-size: 1.65rem; font-weight: 400; line-height: 1.2; }
.story-copy > p:not(.location) { color: var(--muted); font-size: .9rem; }
.story-copy a { display: inline-block; margin-top: 1rem; font-size: .62rem; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .12em; }
.story-status { display: inline-block; margin-top: 1rem; color: var(--bronze); font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.depth-stage .obsession-edit {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(400px, .84fr);
  min-height: 720px;
  padding: 0;
  overflow: hidden;
  border-color: rgba(255,255,255,.14);
  background: #211713;
  color: white;
}
.obsession-visual { position: relative; min-height: 720px; overflow: hidden; background: var(--espresso); }
.obsession-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 62%, rgba(33,23,19,.34)), linear-gradient(0deg, rgba(33,23,19,.3), transparent 28%); pointer-events: none; }
.obsession-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; transition: transform 900ms cubic-bezier(.23,1,.32,1), filter 900ms ease; }
.obsession-photo-credit { position: absolute; z-index: 2; right: 1.2rem; bottom: 1rem; margin: 0; color: rgba(255,255,255,.68); font-size: .5rem; letter-spacing: .08em; }
.obsession-photo-credit a { text-underline-offset: .18em; }
.obsession-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(3.5rem, 5.5vw, 6rem); }
.obsession-copy h2 { max-width: 650px; font-size: clamp(3rem, 4.6vw, 5.25rem); }
.obsession-intro { max-width: 54ch; margin: 2rem 0 2.4rem; color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.75; }
.obsession-notes { border-top: 1px solid rgba(255,255,255,.2); }
.obsession-notes p { display: grid; grid-template-columns: minmax(120px, .65fr) 1.35fr; gap: 1.25rem; margin: 0; padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.obsession-notes strong { color: #e7d7c2; font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.obsession-notes span { color: rgba(255,255,255,.7); font-size: .78rem; line-height: 1.55; }
.obsession-copy .text-link { align-self: flex-start; margin-top: 2.3rem; }
@media (hover: hover) and (pointer: fine) {
  .obsession-edit:hover .obsession-visual img { transform: scale(1.025); filter: saturate(1.06); }
}
.depth-stage .guides-gateway { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); min-height: 570px; padding: 0; overflow: hidden; border-color: rgba(255,255,255,.16); background: var(--sage); box-shadow: 0 26px 56px -34px rgba(20,13,10,.44); color: white; }
.guides-gateway::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: clamp(10px, 1.1vw, 18px); background: var(--clay); pointer-events: none; }
.guide-gateway-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(3.5rem, 6vw, 6rem); }
.guide-gateway-copy h2 { max-width: 680px; font-size: clamp(3rem, 5.2vw, 5.4rem); }
.guide-gateway-copy p { max-width: 620px; margin: 2rem 0 2.5rem; color: rgba(255,255,255,.76); font-size: 1rem; }
.guide-gateway-copy .button { padding: 1rem 1.35rem; }
.guide-gateway-copy .button span { margin-left: .55rem; }
.guide-paths { display: flex; flex-direction: column; padding: 8px clamp(10px, 1.1vw, 18px) 8px 0; border-left: 1px solid rgba(255,255,255,.22); }
.guide-path { position: relative; flex: 1; min-height: 134px; padding: 1.6rem clamp(2rem, 4vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; border-bottom: 1px solid rgba(255,255,255,.22); color: white; text-decoration: none; transition: transform 220ms cubic-bezier(.23,1,.32,1), box-shadow 220ms cubic-bezier(.23,1,.32,1), background-color 180ms ease, color 180ms ease; }
.guide-path:last-child { border-bottom: 0; }
.guide-path span { display: flex; flex-direction: column; }
.guide-path strong { font-size: clamp(1.55rem, 2.3vw, 2.35rem); font-weight: 300; line-height: 1.08; }
.guide-path small { margin-top: .5rem; color: rgba(255,255,255,.78); font-size: .72rem; letter-spacing: .02em; transition: color .35s ease; }
.guide-path b { font-size: 1.2rem; font-weight: 300; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.guide-path:focus-visible { z-index: 2; outline: 2px solid var(--paper); outline-offset: -4px; background: var(--clay); color: var(--espresso); }
.guide-path:focus-visible small { color: var(--espresso); }
.guide-path:focus-visible b { transform: translate(6px, -6px); }
@media (hover: hover) and (pointer: fine) {
  .guide-path:hover { z-index: 2; background: var(--clay); color: var(--espresso); box-shadow: 0 18px 30px -18px rgba(28,19,16,.72); transform: translateY(-5px) scale(1.012); }
  .guide-path:hover small { color: var(--espresso); }
  .guide-path:hover b { transform: translate(6px, -6px); }
  .guide-path:active { box-shadow: 0 8px 18px -14px rgba(28,19,16,.7); transform: translateY(-1px) scale(.985); transition-duration: 120ms; }
}

.newsletter { padding: clamp(5rem, 8vw, 8rem) max(6vw, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: 1fr .8fr; gap: 6rem; align-items: end; background: var(--espresso); color: white; }
.newsletter-copy h2 { font-size: clamp(2.8rem, 5.3vw, 5.6rem); }
.newsletter-copy > p:last-child { max-width: 560px; margin-top: 2rem; color: rgba(255,255,255,.67); }
.newsletter-form label { display: block; margin-bottom: .8rem; font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; }
.email-field { display: flex; border-bottom: 1px solid rgba(255,255,255,.45); }
.email-field input { flex: 1; min-width: 0; padding: 1rem 0; border: 0; outline: 0; background: transparent; color: white; font-size: 1.05rem; }
.email-field input::placeholder { color: rgba(255,255,255,.4); }
.email-field button { border: 0; background: transparent; color: var(--bronze); font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.newsletter-form small { display: block; margin-top: 1rem; color: rgba(255,255,255,.38); font-size: .65rem; }
.newsletter-portrait { position: relative; min-height: 430px; display: flex; align-items: flex-end; overflow: hidden; background: linear-gradient(0deg, rgba(43,31,26,.9) 0%, rgba(43,31,26,.02) 62%), url("../images/julia-newsletter-red-dress.jpg") center / cover no-repeat; }
.newsletter-route { position: relative; z-index: 1; max-width: 480px; padding: 2rem; }
.newsletter-route p { margin: 0 0 1.6rem; color: rgba(255,255,255,.8); }
.newsletter-copy, .newsletter-portrait { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.newsletter:not(.in-view) .newsletter-copy { opacity: 0; transform: translateX(-42px); }
.newsletter:not(.in-view) .newsletter-portrait { opacity: 0; transform: translateY(48px); }
.newsletter.in-view .newsletter-portrait { transition-delay: .16s; }
.section-breath { position: relative; z-index: 1; height: var(--newsletter-break); background: transparent; }
.contact-breath { position: relative; z-index: 1; height: var(--major-break); background: transparent; }

.contact { display: grid; grid-template-columns: .85fr 1fr; width: min(1360px, calc(100vw - 64px)); margin-right: auto; margin-left: max(24px, calc((100vw - 1360px)/2 - 1.5vw)); padding: 9rem clamp(2rem, 4.5vw, 4rem); gap: clamp(4rem, 9vw, 9rem); background: var(--paper); box-shadow: 0 34px 80px rgba(43,31,26,.12); }
.contact-intro h2 { font-size: clamp(2.7rem, 4.5vw, 4.7rem); }
.contact-intro > p:not(.eyebrow) { max-width: 500px; color: var(--muted); }
.contact-intro > a { display: inline-block; margin-top: 2rem; color: var(--bronze); font-size: .78rem; text-decoration: none; }
.contact-form { display: grid; gap: 1.3rem; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form label { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; }
.contact-form input, .contact-form select, .contact-form textarea { display: block; width: 100%; margin-top: .55rem; padding: .9rem .2rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: 0; background: transparent; color: var(--espresso); font-size: .95rem; text-transform: none; letter-spacing: normal; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--bronze); }
.contact-form textarea { resize: vertical; }
.contact-form .button { justify-self: start; margin-top: .6rem; border: 0; padding: 1rem 1.5rem; }
.form-note { margin: 0; color: var(--muted); font-size: .67rem; line-height: 1.6; }
.form-note a { color: var(--espresso); }
.hidden-field { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }

footer { position: relative; padding: 4rem 4vw 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; background: #211713; color: white; }
.footer-brand { display: flex; flex-direction: column; }
.footer-brand strong { font-size: 1.6rem; font-weight: 300; }
.footer-brand span { margin-top: .5rem; color: var(--bronze); font-size: .62rem; text-transform: uppercase; letter-spacing: .18em; }
.footer-links { display: flex; justify-content: flex-end; gap: 1.6rem; flex-wrap: wrap; }
.footer-links a { font-size: .6rem; text-decoration: none; text-transform: uppercase; letter-spacing: .13em; }
.footer-meta { grid-column: 1 / -1; padding-top: 2rem; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.45); font-size: .62rem; line-height: 1.7; }
.footer-meta p:last-child { text-align: right; }
.footer-meta a { color: inherit; }

/* Inner pages */
.inner-page { background: var(--plaster); }
.inner-header { background: rgba(43,31,26,.98); }
.page-hero { padding: 12rem max(4vw, calc((100vw - 1240px)/2)) 7rem; background: var(--espresso); color: white; }
.page-hero .page-kicker { margin: 0 0 1.5rem; color: var(--bronze); font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; }
.page-hero h1 { max-width: 980px; margin: 0; font-size: clamp(3.4rem, 7vw, 7.5rem); font-weight: 300; letter-spacing: -.055em; line-height: .92; }
.page-hero > p:last-child { max-width: 690px; margin: 2rem 0 0; color: rgba(255,255,255,.7); font-size: 1.02rem; }
.page-section { width: var(--page); margin: auto; padding: 7rem 0; }
.page-section.alt { width: 100%; padding-left: max(4vw, calc((100vw - 1240px)/2)); padding-right: max(4vw, calc((100vw - 1240px)/2)); background: var(--sand); }
.favorites-landing { min-height: 100svh; padding-top: 84px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr); background: #211713; color: white; }
.favorites-landing-image { position: relative; min-height: calc(100svh - 84px); overflow: hidden; background: var(--espresso); }
.favorites-landing-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 68%, rgba(33,23,19,.28)), linear-gradient(0deg, rgba(33,23,19,.25), transparent 30%); pointer-events: none; }
.favorites-landing-image img { width: 100%; height: 100%; min-height: calc(100svh - 84px); object-fit: cover; object-position: 50% center; transition: transform 900ms cubic-bezier(.23,1,.32,1), filter 900ms ease; }
.favorites-landing-image p { position: absolute; z-index: 2; right: 1.2rem; bottom: 1rem; margin: 0; color: rgba(255,255,255,.7); font-size: .5rem; letter-spacing: .07em; }
.favorites-landing-image p a { text-underline-offset: .18em; }
.favorites-landing-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(4rem, 6vw, 7rem); }
.favorites-landing-copy h1 { max-width: 700px; margin: 0; font-size: clamp(3.5rem, 4.8vw, 5.5rem); font-weight: 300; letter-spacing: -.04em; line-height: .98; }
.favorites-landing-copy > p { max-width: 58ch; margin: 2rem 0 0; color: rgba(255,255,255,.76); font-size: 1rem; line-height: 1.75; }
.favorites-landing-copy > p + p { margin-top: 1.1rem; }
.favorites-landing-copy .text-link { margin-top: 2.5rem; }
.favorites-framework { width: var(--page); margin: auto; padding: clamp(6rem, 10vw, 10rem) 0; display: grid; grid-template-columns: minmax(0, .86fr) minmax(460px, 1.14fr); gap: clamp(4rem, 9vw, 9rem); align-items: start; }
.favorites-framework-intro h2 { max-width: 650px; font-size: clamp(3rem, 5.2vw, 5.6rem); }
.favorites-framework-intro p { max-width: 48ch; margin: 2rem 0 0; color: var(--ink); font-size: 1rem; }
.favorites-framework-notes { border-top: 1px solid var(--line); }
.favorites-framework-notes article { display: grid; grid-template-columns: minmax(140px, .62fr) 1.38fr; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.favorites-framework-notes h3 { margin: 0; color: var(--sage); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.favorites-framework-notes p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.favorites-board-intro { align-items: center; }
.favorites-board { width: var(--page); margin: auto; padding: clamp(6rem, 10vw, 10rem) 0; }
.favorites-board-heading { max-width: 780px; margin-bottom: clamp(3.5rem, 7vw, 6.5rem); }
.favorites-board-heading h2 { margin: 0; font-size: clamp(3rem, 5.2vw, 5.6rem); }
.favorites-board-heading p { max-width: 48ch; margin: 1.7rem 0 0; color: var(--ink); font-size: 1rem; }
.obsession-board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.obsession-board-grid .obsession-card:nth-child(even) { margin-top: clamp(3rem, 7vw, 7rem); }
.obsession-card { min-width: 0; }
.obsession-card-image { position: relative; display: block; aspect-ratio: 1.08 / 1; overflow: hidden; background: var(--espresso); }
.obsession-card-image img { width: 100%; height: 100%; object-fit: cover; transition: opacity .24s ease, transform .65s cubic-bezier(.23,1,.32,1); }
.obsession-card-image img.image-focus-firewood-card { object-position: 30% center; }
.obsession-card-image img.image-focus-left, .obsession-detail-image img.image-focus-left, .obsession-visual img.image-focus-left { object-position: left center; }
.obsession-card-image img.is-changing { opacity: .28; transform: scale(1.015); }
.obsession-card-number { position: absolute; top: 1.2rem; left: 1.2rem; padding: .48rem .7rem; background: rgba(248,244,237,.92); color: var(--espresso); font-size: .58rem; font-weight: 600; letter-spacing: .16em; }
.obsession-card-copy { padding-top: 1.8rem; }
.obsession-card-place { margin: 0; color: var(--clay); font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; }
.obsession-card-copy h3 { margin: .55rem 0 .75rem; font-size: clamp(2.3rem, 3.5vw, 4rem); font-weight: 300; letter-spacing: -.045em; line-height: 1; }
.obsession-card-copy h3 a { text-decoration: none; }
.obsession-card-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 0; color: var(--ink); font-size: .72rem; font-weight: 500; }
.obsession-card-hook { max-width: 46ch; margin: 1.6rem 0 0; color: var(--ink); font-size: 1rem; line-height: 1.72; }

.obsession-detail-hero { min-height: 100svh; padding-top: 84px; display: grid; grid-template-columns: 1.12fr .88fr; background: var(--espresso); color: white; }
.obsession-detail-image { position: relative; min-height: calc(100svh - 84px); overflow: hidden; }
.obsession-detail-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(33,23,19,.28), transparent 38%); pointer-events: none; }
.obsession-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.obsession-detail-image > span { position: absolute; z-index: 2; left: 2rem; bottom: 1.8rem; font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.obsession-detail-image.has-corner-watermark > span { right: 2rem; left: auto; }
.obsession-detail-heading { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 6vw, 7rem); }
.obsession-back { align-self: flex-start; margin-bottom: auto; color: rgba(255,255,255,.68); font-size: .62rem; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .14em; }
.obsession-detail-heading .eyebrow { margin-top: auto; }
.obsession-detail-heading h1 { margin: 0; font-size: clamp(4.5rem, 7.5vw, 8.5rem); font-weight: 300; letter-spacing: -.06em; line-height: .78; }
.obsession-detail-heading h1.long-address { font-size: clamp(3.2rem, 5vw, 5.6rem); line-height: .88; }
.obsession-detail-hook { max-width: 43ch; margin: 2.5rem 0 0; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.7; }
.obsession-property-bar { width: 100%; display: grid; grid-template-columns: 1.45fr repeat(4, 1fr); background: var(--sand); border-bottom: 1px solid var(--line); }
.obsession-property-bar p { margin: 0; padding: 2rem clamp(1rem, 3vw, 3rem); border-right: 1px solid var(--line); }
.obsession-property-bar strong, .obsession-property-bar span { display: block; }
.obsession-property-bar strong { color: var(--espresso); font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 400; }
.obsession-property-bar span { margin-top: .25rem; color: var(--muted); font-size: .57rem; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; }
.obsession-story { width: var(--page); margin: auto; padding: clamp(7rem, 12vw, 12rem) 0; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(4rem, 10vw, 10rem); }
.obsession-story-label { position: sticky; top: 130px; align-self: start; }
.obsession-pullquote { max-width: 14ch; margin: 2.5rem 0 0; color: var(--clay); font-size: clamp(2.2rem, 3.8vw, 4.1rem); font-weight: 300; letter-spacing: -.045em; line-height: 1.08; }
.obsession-story-copy p { margin: 0 0 1.8rem; color: var(--ink); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.9; }
.obsession-story-copy p:first-child::first-letter { float: left; margin: .08em .12em 0 0; color: var(--clay); font-size: 4.5em; font-weight: 300; line-height: .72; }
.obsession-gallery { padding: 0 max(24px, 4vw) clamp(7rem, 11vw, 11rem); display: grid; grid-template-columns: .7fr 1.3fr; gap: max(16px, 2vw); background: var(--paper); }
.obsession-gallery figure { min-height: 580px; margin: 0; overflow: hidden; background: var(--sand); }
.obsession-gallery .obsession-gallery-wide { grid-column: 1 / -1; min-height: 75svh; }
.obsession-gallery figure img { width: 100%; height: 100%; object-fit: cover; }
.obsession-cta { padding: clamp(5rem, 9vw, 9rem) max(24px, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: end; background: var(--espresso); color: white; }
.obsession-cta h2 { margin: 0; font-size: clamp(3rem, 5.8vw, 6.5rem); font-weight: 300; letter-spacing: -.05em; line-height: .95; }
.obsession-cta-actions { display: flex; flex-direction: column; align-items: flex-start; }
.obsession-credit { grid-column: 1 / -1; max-width: 95ch; margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.55); font-size: .62rem; line-height: 1.7; }
@media (hover: hover) and (pointer: fine) {
  .favorites-landing:hover .favorites-landing-image img { transform: scale(1.02); filter: saturate(1.05); }
  .obsession-card:hover .obsession-card-image img { transform: scale(1.025); }
}
.page-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; align-items: start; }
.page-intro h2, .signup-panel h2 { font-size: clamp(2.5rem, 4.5vw, 4.6rem); }
.page-intro-copy { max-width: 650px; color: var(--ink); }
.page-intro-copy p:first-child { margin-top: 0; }
.issue-grid, .guide-library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.issue-card, .guide-library-card { min-height: 300px; padding: 2rem; display: flex; flex-direction: column; background: var(--paper); border-top: 3px solid var(--bronze); }
.issue-card time, .guide-status { color: var(--bronze); font-size: .58rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.issue-card h3, .guide-library-card h3 { margin: auto 0 1rem; font-size: 1.55rem; font-weight: 400; line-height: 1.2; }
.issue-card p, .guide-library-card p { margin: 0; color: var(--muted); font-size: .86rem; }
.available-guide-grid .guide-library-card {
  min-height: 270px;
  padding: 1.6rem;
  border-color: var(--sage);
  box-shadow: 0 9px 24px rgba(43,31,26,.06);
  transition: translate .35s ease, box-shadow .35s ease;
}
.available-guide-grid .guide-library-card:hover {
  translate: 0 -6px;
  box-shadow: 0 18px 38px rgba(43,31,26,.12);
}
.available-guide-grid .guide-type { margin-top: .7rem; }
.available-guide-grid .guide-library-card h3 {
  margin: 2rem 0 .75rem;
  font-size: 1.35rem;
}
.available-guide-grid .guide-library-card p { font-size: .8rem; }
.upcoming-guide-grid .guide-library-card {
  min-height: 260px;
  padding: 1.6rem;
}
.upcoming-guide-grid .guide-type { margin-top: 0; }
.upcoming-guide-grid .guide-library-card h3 {
  margin: 2rem 0 .75rem;
  font-size: 1.35rem;
}
.upcoming-guide-grid .guide-library-card p { font-size: .8rem; }
.upcoming-guide-grid .guide-note {
  padding-top: 1.35rem;
  color: var(--bronze);
  font-size: .58rem;
}
.freebie-actions {
  margin-top: auto;
  padding-top: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
}
.freebie-actions a {
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--bronze);
  text-decoration: none;
  font-size: .59rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.signup-panel { display: grid; grid-template-columns: 1fr .9fr; gap: 6rem; align-items: end; padding: 6rem; background: var(--sage); color: white; }
.signup-panel-copy p { max-width: 570px; color: rgba(255,255,255,.72); }
.signup-panel .newsletter-form { max-width: 520px; }
.newsletter-landing {
  min-height: 100svh;
  padding: 84px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr);
  background: var(--espresso);
  color: white;
}
.newsletter-landing-copy {
  width: min(680px, calc(100% - 8vw));
  margin: auto;
  padding: clamp(3rem, 7vh, 6rem) 0;
}
.newsletter-landing .page-kicker {
  margin: 0 0 1.2rem;
  color: var(--bronze);
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
}
.newsletter-landing h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(3rem, 5.35vw, 5.8rem);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .94;
}
.newsletter-lead {
  max-width: 600px;
  margin: 1.5rem 0 0;
  color: rgba(255,255,255,.7);
  font-size: clamp(.9rem, 1.15vw, 1.03rem);
}
.newsletter-topics {
  margin: 1.25rem 0 0;
  color: var(--bronze);
  font-size: .58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.newsletter-signup {
  max-width: 590px;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-top: clamp(1.8rem, 3.5vh, 2.5rem);
  border-top: 1px solid rgba(255,255,255,.2);
}
.newsletter-signup h2 {
  font-size: clamp(1.8rem, 2.5vw, 2.7rem);
  letter-spacing: -.035em;
}
.newsletter-signup > p {
  max-width: 570px;
  margin: .8rem 0 1.5rem;
  color: rgba(255,255,255,.62);
  font-size: .86rem;
}
.newsletter-fields {
  display: grid;
  grid-template-columns: minmax(105px, .65fr) minmax(210px, 1.35fr) auto;
  gap: 1.4rem;
  align-items: end;
}
.newsletter-form .newsletter-field {
  min-width: 0;
  margin: 0;
}
.newsletter-field span {
  display: block;
  margin-bottom: .55rem;
}
.newsletter-field input {
  width: 100%;
  min-width: 0;
  padding: .75rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.45);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: white;
  font-size: .95rem;
}
.newsletter-field input::placeholder { color: rgba(255,255,255,.35); }
.newsletter-field input:focus { border-color: var(--bronze); }
.newsletter-fields button {
  min-height: 43px;
  padding: 0 0 .6rem;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.45);
  background: transparent;
  color: var(--bronze);
  font-size: .64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
}
.newsletter-signup .newsletter-form small a { color: inherit; }
.newsletter-landing-portrait {
  position: relative;
  min-height: calc(100svh - 84px);
  margin: 0;
  overflow: hidden;
  background: #6f594c;
}
.newsletter-landing-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(35,23,18,.72));
  pointer-events: none;
}
.newsletter-landing-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
}
.newsletter-landing-portrait figcaption {
  position: absolute;
  z-index: 2;
  right: 2rem;
  bottom: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: white;
  line-height: 1.2;
}
.newsletter-landing-portrait figcaption span { font-size: .82rem; }
.newsletter-landing-portrait figcaption small {
  margin-top: .35rem;
  color: rgba(255,255,255,.6);
  font-size: .5rem;
  text-transform: uppercase;
  letter-spacing: .2em;
}
.newsletter-photo-note {
  position: absolute;
  z-index: 2;
  top: clamp(2rem, 5vw, 5rem);
  left: 0;
  padding: 1.2rem 1.5rem;
  background: rgba(248,244,237,.92);
  color: var(--espresso);
  transform: translateX(0);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.newsletter-landing-portrait:hover .newsletter-photo-note { transform: translateX(8px); }
.newsletter-photo-note span {
  display: block;
  color: var(--bronze);
  font-size: .5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.newsletter-photo-note strong {
  display: block;
  margin-top: .4rem;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.05;
}
.library-heading { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin-bottom: 3rem; }
.library-heading h2 { max-width: 740px; font-size: clamp(2.5rem, 4.5vw, 4.8rem); }
.library-heading p { max-width: 390px; color: var(--muted); }
.guide-library-card { min-height: 360px; }
.guide-library-card.ready { border-color: var(--sage); }
.guide-library-card.review { border-color: var(--clay); }
.guide-library-card.planned { border-color: var(--mid-gray); }
.guide-library-card .guide-type { margin-top: 1rem; color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; }
.guide-library-card .guide-note { margin-top: auto; padding-top: 2rem; color: var(--espresso); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; }
.legal-copy { max-width: 850px; }
.legal-copy h2 { margin: 4rem 0 1rem; font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -.025em; }
.legal-copy h2:first-of-type { margin-top: 0; }
.legal-copy h3 { margin: 2rem 0 .5rem; font-size: 1.05rem; font-weight: 600; }
.legal-copy p, .legal-copy li { color: var(--ink); }
.legal-copy ul { padding-left: 1.2rem; }
.legal-copy a { color: var(--bronze); }
.legal-date { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.legal-callout { margin: 2rem 0; padding: 1.5rem; border-left: 3px solid var(--bronze); background: var(--sand); }
.thanks-page { min-height: 100svh; display: grid; place-items: center; padding: 3rem 1.5rem; background: var(--espresso); color: white; }
.thanks-card { max-width: 720px; text-align: center; }
.thanks-card h1 { margin: 0; font-size: clamp(3.4rem, 8vw, 7rem); font-weight: 300; letter-spacing: -.05em; line-height: .95; }
.thanks-card p { max-width: 560px; margin: 2rem auto; color: rgba(255,255,255,.72); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.reveal.in-view, .reveal:target { opacity: 1; transform: none; }
.story-card { opacity: 0; transform: translateY(30px); }
.stories.in-view .story-card { animation: story-in .75s ease forwards; }
.stories.in-view .story-card:nth-child(2) { animation-delay: .14s; }
.stories.in-view .story-card:nth-child(3) { animation-delay: .28s; }
@keyframes story-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-intro { display: none; }
  .hero video { animation: none; }
  .testimonial-card { transition: none; }
  .guide-path { transition: background-color .2s ease, color .2s ease; }
  .guide-path:hover, .guide-path:active { box-shadow: none; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .depth-panel { translate: none !important; }
  .pathway, .site-header, .about-image { transition: none; }
  .obsession-visual img, .favorites-landing-image img { transition: none; }
  .story-card, .about-image { opacity: 1; transform: none; animation: none !important; clip-path: none; }
}

@media (max-width: 900px) {
  :root {
    --page: min(calc(100vw - 40px), 680px);
    --hero-title-size: clamp(4.35rem, 16vw, 7.25rem);
    --major-break: clamp(170px, 44vw, 260px);
    --hero-break: clamp(111px, 28.6vw, 169px);
    --portrait-lift: clamp(48px, 12vw, 72px);
    --newsletter-break: clamp(48px, 16vw, 72px);
    --chapter-gap: clamp(6.25rem, 26vw, 8.125rem);
  }
  .site-header { min-height: 70px; padding: 0 20px; }
  .menu-button { position: relative; z-index: 2; display: flex; flex: 0 0 35px; width: 35px; height: 35px; margin-left: auto; flex-direction: column; justify-content: center; gap: 7px; border: 0; background: transparent; cursor: pointer; }
  .menu-button span:not(.sr-only) { display: block; width: 24px; height: 1px; background: white; transition: transform .25s; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 70px 0 0; padding: 3rem 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; background: var(--espresso); transform: translateX(100%); transition: transform .3s; }
  .site-nav.open { transform: none; }
  .site-nav a { font-size: 1rem; font-weight: 300; text-transform: none; letter-spacing: 0; }
  .nav-contact { margin-top: 1rem; }
  .hero-copy { padding: 8rem 0 5rem; justify-content: center; }
  .hero h1 { font-size: var(--hero-title-size); }
  .hero-shade { background: linear-gradient(0deg, rgba(28,19,16,.8) 0%, rgba(28,19,16,.2) 80%); }
  .hero-intro { max-width: 480px; }
  .scroll-cue { display: none; }
  .manifesto, .stories, .resources { padding: 6rem 0; }
  .depth-stage { padding: var(--chapter-gap) 0 clamp(4rem, 18vw, 6rem); background-attachment: scroll; }
  .depth-stage .depth-panel { width: calc(100vw - 28px); margin: 0 auto var(--chapter-gap); padding-right: max(20px, calc((100vw - 680px)/2)); padding-left: max(20px, calc((100vw - 680px)/2)); translate: none; will-change: auto; }
  .depth-stage .resources { margin-right: auto; margin-left: auto; margin-bottom: 0; }
  .depth-stage .stories, .depth-stage .obsession-edit { margin-right: auto; margin-left: auto; }
  .section-number { top: 6rem; }
  .manifesto-copy > p:last-child { margin-left: 0; }
  .pathway-grid { grid-template-columns: 1fr; margin-top: 4rem; }
  .pathway { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }
  .pathway h3 { margin-top: 2.7rem; }
  .about { display: block; padding: 0 max(20px, calc((100vw - 680px)/2)) 5rem; background: var(--paper); }
  .about-image-wrap { width: 100%; height: 62svh; margin: 0 0 calc(2.5rem - var(--portrait-lift)); }
  .about-copy { max-width: none; padding: 1.5rem 0 0; }
  .testimonials-carousel { min-height: 730px; }
  .testimonials-intro { margin-bottom: 1.5rem; }
  .testimonial-stage { width: 100%; height: 430px; }
  .testimonial-card { width: min(82vw, 480px); min-height: 350px; padding: 2rem; }
  .testimonial-card blockquote { font-size: clamp(1.05rem, 3.8vw, 1.35rem); }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .story-grid { grid-template-columns: 1fr; }
  .story-feature { grid-row: auto; }
  .story-origin { grid-template-columns: 1fr; }
  .story-origin .story-visual { min-height: 280px; }
  .visual-glendale { min-height: 420px; }
  .depth-stage .obsession-edit { grid-template-columns: 1fr; min-height: 0; padding: 0; }
  .obsession-visual { min-height: min(72svh, 680px); }
  .obsession-copy { padding: 4.5rem max(24px, calc((100vw - 620px)/2)); }
  .depth-stage .guides-gateway { grid-template-columns: 1fr; min-height: 0; padding: 0; }
  .guide-gateway-copy { padding: 4.5rem max(24px, calc((100vw - 620px)/2)); }
  .guide-paths { border-top: 1px solid rgba(255,255,255,.22); border-left: 0; }
  .guide-path { min-height: 112px; padding-right: max(32px, calc((100vw - 620px)/2)); padding-left: max(24px, calc((100vw - 620px)/2)); }
  .newsletter { grid-template-columns: 1fr; gap: 3rem; padding: 6rem max(20px, calc((100vw - 680px)/2)); }
  .newsletter-portrait { min-height: 480px; }
  .contact { grid-template-columns: 1fr; width: calc(100vw - 28px); margin: 0 auto; padding: 6rem max(20px, calc((100vw - 680px)/2)); }
  .page-hero { padding: 10rem max(20px, calc((100vw - 680px)/2)) 5rem; }
  .page-section, .page-section.alt { padding-top: 5rem; padding-bottom: 5rem; }
  .page-intro, .signup-panel { grid-template-columns: 1fr; gap: 3rem; }
  .favorites-landing { grid-template-columns: 1fr; padding-top: 70px; }
  .favorites-landing-image, .favorites-landing-image img { min-height: min(72svh, 680px); }
  .favorites-landing-copy { padding: 5rem max(20px, calc((100vw - 680px)/2)); }
  .favorites-framework { grid-template-columns: 1fr; gap: 4rem; }
  .obsession-board-grid { grid-template-columns: 1fr; }
  .obsession-board-grid .obsession-card:nth-child(even) { margin-top: 1rem; }
  .obsession-card { max-width: 680px; }
  .obsession-detail-hero { grid-template-columns: 1fr; padding-top: 70px; }
  .obsession-detail-image { min-height: 68svh; }
  .obsession-detail-heading { min-height: 640px; }
  .obsession-property-bar { grid-template-columns: repeat(2, 1fr); }
  .obsession-property-bar p:first-child { grid-column: 1 / -1; }
  .obsession-story { grid-template-columns: 1fr; gap: 3.5rem; }
  .obsession-story-label { position: static; }
  .obsession-gallery { grid-template-columns: 1fr; }
  .obsession-gallery .obsession-gallery-wide { grid-column: auto; min-height: 62svh; }
  .obsession-gallery figure { min-height: 60svh; }
  .obsession-cta { grid-template-columns: 1fr; align-items: start; }
  .obsession-credit { grid-column: auto; }
  .signup-panel { padding: 5rem max(20px, calc((100vw - 680px)/2)); }
  .newsletter-landing { grid-template-columns: 1fr; padding-top: 70px; }
  .newsletter-landing-copy {
    width: min(680px, calc(100% - 40px));
    padding: 4.5rem 0;
  }
  .newsletter-landing h1 { max-width: 640px; font-size: clamp(3rem, 10vw, 5.2rem); }
  .newsletter-landing-portrait { min-height: min(760px, 92svh); }
  .newsletter-photo-note { transform: none; }
  .issue-grid, .guide-library-grid { grid-template-columns: 1fr; }
  .available-guide-grid .guide-library-card { width: min(100%, 520px); margin: auto; }
  .upcoming-guide-grid .guide-library-card { width: min(100%, 520px); margin: auto; }
  .library-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  :root { --hero-title-size: clamp(3.5rem, 16.5vw, 4.8rem); }
  .brand-lockup { gap: .65rem; }
  .brand span { font-size: 1rem; }
  .brand small { font-size: .42rem; letter-spacing: .2em; }
  .brand-divider { height: 28px; }
  .rsr-brand img { width: 48px; }
  .hero-copy { justify-content: center; padding-bottom: 4rem; }
  .hero h1 { font-size: var(--hero-title-size); }
  .hero-intro { font-size: .88rem; }
  .hero-actions { align-items: center; flex-direction: column; gap: 1.3rem; }
  .eyebrow { letter-spacing: .2em; }
  h2 { font-size: 2.7rem; }
  .pathway { padding: 1.7rem; }
  .pathway .arrow { left: 1.7rem; }
  .about-image-wrap { height: 50svh; margin-right: 0; }
  .about-image { background-position: center 6%; }
  .testimonial-controls { margin-top: .5rem; }
  .obsession-visual { min-height: 58svh; }
  .obsession-copy { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .obsession-copy h2 { font-size: 2.8rem; }
  .obsession-notes p { grid-template-columns: 1fr; gap: .35rem; }
  .favorites-landing-image, .favorites-landing-image img { min-height: 58svh; }
  .favorites-landing-copy { padding-top: 4rem; padding-bottom: 4.5rem; }
  .favorites-landing-copy h1 { font-size: clamp(3rem, 12.5vw, 4rem); }
  .favorites-framework-notes article { grid-template-columns: 1fr; gap: .5rem; }
  .obsession-card-image { aspect-ratio: .88 / 1; }
  .obsession-detail-heading { min-height: 540px; padding: 3.5rem 24px 4.5rem; }
  .obsession-detail-heading h1 { font-size: clamp(4.25rem, 21vw, 6.25rem); }
  .obsession-detail-heading h1.long-address { font-size: clamp(3.1rem, 14vw, 4.5rem); }
  .obsession-property-bar p { padding: 1.5rem; }
  .obsession-story { padding-top: 6rem; padding-bottom: 6rem; }
  .obsession-gallery { padding-right: 16px; padding-left: 16px; }
  .obsession-gallery figure, .obsession-gallery .obsession-gallery-wide { min-height: 52svh; }
  .obsession-cta h2 br { display: none; }
  .guide-gateway-copy { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .guide-path { min-height: 104px; gap: 1rem; }
  .guide-path strong { font-size: 1.55rem; }
  .field-pair { grid-template-columns: 1fr; }
  .newsletter-landing-copy { padding: 3.5rem 0; }
  .newsletter-landing h1 { font-size: clamp(2.8rem, 13vw, 4.15rem); }
  .newsletter-lead { font-size: .9rem; }
  .newsletter-topics { line-height: 1.8; }
  .newsletter-signup { margin-top: 2rem; padding-top: 1.75rem; }
  .newsletter-fields { grid-template-columns: minmax(95px, .7fr) minmax(170px, 1.3fr); gap: 1rem; }
  .newsletter-fields button { grid-column: 1 / -1; justify-self: end; min-height: 35px; margin-top: .25rem; padding-left: 1.2rem; }
  .newsletter-landing-portrait { min-height: 70svh; }
  .newsletter-photo-note { top: 1.5rem; padding: 1rem 1.2rem; }
  footer { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer-meta { flex-direction: column; }
  .footer-meta p:last-child { text-align: left; }
}