/* ✿ Joe & Gabby · "Maison" ✿
   The whole site's look: tokens, type, nav, footer and every section.
   Pages only use these class names, so a redesign means editing this file. */

:root {
  --paper: #f3efe9;
  --paper-2: #ebe5dc;
  --paper-3: #e2dacd;
  --ink: #1d1a17;
  --ink-soft: #4f473f;
  --espresso: #1b1714;
  --espresso-2: #2a231d;
  --taupe: #8a7d70;
  --sand: #cfc5b8;
  --line: rgba(29, 26, 23, .15);
  --line-light: rgba(255, 255, 255, .18);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
  --max: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* Big type is allowed to bleed off the edges, never to widen the page */
.hero, .life-bleed, .page-title-wrap, .projects, main { overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }

/* ---------- type ---------- */
.eyebrow { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); }
.display { font-family: var(--serif); font-weight: 300; line-height: .95; letter-spacing: -.01em; }
.caps { text-transform: uppercase; }
.serif { font-family: var(--serif); }
em, .it { font-style: italic; }
.lede { font-size: 17px; color: var(--ink-soft); max-width: 36rem; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

.link-line { display: inline-block; font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: opacity .3s; }
.link-line:hover { opacity: .6; }
.btn-line { display: inline-block; border: 1px solid currentColor; padding: 13px 28px; font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; transition: background .35s, color .35s; }
.btn-line:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.on-dark .btn-line:hover, .btn-line.light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tags span { border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- nav ---------- */
.site-nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gutter); color: var(--ink); transition: background .4s, color .4s, padding .4s, box-shadow .4s; }
.has-hero .site-nav { color: #fff; }
.site-nav.is-solid { background: rgba(243, 239, 233, .94); color: var(--ink); padding-top: 14px; padding-bottom: 14px; box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.monogram { font-family: var(--serif); font-size: 24px; letter-spacing: .06em; line-height: 1; }
.site-nav ul { display: flex; gap: 32px; list-style: none; }
.site-nav ul a { font-size: 11px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; position: relative; padding: 4px 0; }
.site-nav ul a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.site-nav ul a:hover::after, .site-nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.menu-btn { display: none; font-size: 11px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; }
.menu-panel { position: fixed; z-index: 60; inset: 0; background: var(--espresso); color: #efe9e1; display: flex; flex-direction: column; justify-content: center; padding: 0 32px; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.menu-open .menu-panel { opacity: 1; pointer-events: auto; }
.menu-panel a { font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1.25; }
.menu-panel .menu-close { position: absolute; top: 22px; right: 22px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.menu-panel .menu-small { margin-top: 36px; display: flex; gap: 24px; }
.menu-panel .menu-small a { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #a89a8b; }
.menu-open { overflow: hidden; }

/* ---------- home hero: giant name bleeding off the edges, photo stacked across the seam ---------- */
.hero { position: relative; height: min(92vh, 900px); min-height: 580px; color: #fff; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; background: #111; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) contrast(1.05); transform: scale(1.04); animation: settle 2.4s var(--ease) forwards; }
@keyframes settle { to { transform: scale(1); } }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,12,.6) 0%, rgba(20,16,12,.3) 38%, rgba(20,16,12,.12) 60%, rgba(20,16,12,.3) 100%); }
.hero-name { position: absolute; top: 88px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 13.6vw, 230px); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; }
.hero-tag { position: absolute; top: calc(88px + clamp(64px, 13.6vw, 230px) * .98); left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; padding: 0 20px; }
.hero-inset { position: absolute; left: 50%; bottom: -170px; transform: translateX(-50%); width: min(400px, 60vw); aspect-ratio: 4 / 5; box-shadow: 0 40px 80px rgba(20, 16, 12, .22); overflow: hidden; }
.hero-inset img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- statement ---------- */
.statement { text-align: center; padding: 240px var(--gutter) 110px; }
.statement h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4.8vw, 62px); line-height: 1.08; max-width: 800px; margin: 18px auto 26px; }
.statement p { max-width: 540px; margin: 0 auto; color: var(--ink-soft); }
.statement .tags { margin-top: 32px; }

/* ---------- three doors ---------- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter) 140px; }
.door { display: block; }
.door-ph { aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); }
.door-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.door:hover .door-ph img { transform: scale(1.045); }
.door h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin-top: 18px; }
.door p { font-size: 14px; color: var(--ink-soft); max-width: 30ch; margin: 4px 0 12px; }
.type-tile small { font-size: .62em; opacity: .65; margin-top: 4px; }
.type-tile { background: var(--espresso); color: #efe9e1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(24px, 2.4vw, 32px); transition: background .6s; }
.door:hover .type-tile { background: var(--espresso-2); }

/* ---------- full-screen photo with layered, moving type across its top edge ---------- */
.feature { position: relative; }
.feature-marquee { position: relative; z-index: 3; overflow: hidden; margin-bottom: -.52em; font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 10vw, 168px); line-height: 1; text-transform: uppercase; pointer-events: none; }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 48s linear infinite; }
.marquee-track span { padding-right: .4em; }
@keyframes marquee { to { transform: translateX(-50%); } }
.feature-photo { position: relative; display: block; height: 100vh; min-height: 560px; max-height: 1100px; overflow: hidden; color: #fff; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.feature-photo:hover img { transform: scale(1.02); }
.feature-photo::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, var(--paper) 0%, rgba(243,239,233,0) 100%); pointer-events: none; }
.feature-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,16,12,.62) 0%, rgba(20,16,12,0) 45%); pointer-events: none; }
.feature-card { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 6vw, 64px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.feature-card h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; }
.feature-card p { max-width: 34ch; font-size: 15px; opacity: .92; margin-top: 10px; }
.feature-chapters { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; justify-content: flex-end; }
.feature-chapters li { border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 5px 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.feature-chapters li.soon { opacity: .55; }

/* full-bleed with giant white type overlapping its bottom edge */
.bleed { position: relative; display: block; height: 88vh; min-height: 520px; max-height: 980px; overflow: hidden; color: #fff; }
.bleed img { width: 100%; height: 100%; object-fit: cover; }
.bleed::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,16,12,.5), rgba(20,16,12,.05) 55%); }
.bleed-copy { position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(90px, 12vw, 170px); max-width: 420px; }
.bleed-copy p { margin: 10px 0 18px; }
.bleed-word { position: relative; z-index: 3; margin-top: -.55em; padding: 0 var(--gutter); font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(60px, 11vw, 190px); line-height: 1; white-space: nowrap; pointer-events: none; }
/* The word sits half on the photo, half on the paper: two copies, clipped at the seam (55% down). */
.bleed-word .top { position: absolute; left: var(--gutter); top: 0; color: #fff; clip-path: inset(0 0 45% 0); }
.bleed-word .bottom { display: block; color: var(--ink); clip-path: inset(55% 0 0 0); }

/* ---------- updates list ---------- */
.updates { padding-top: 130px; padding-bottom: 110px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 6px; }
.section-head h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(42px, 5.4vw, 70px); line-height: 1; }
.update { display: grid; grid-template-columns: 160px 1fr 240px; gap: 36px; align-items: center; padding: 32px 0; border-bottom: 1px solid var(--line); }
.update time, .update .tag { font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.update .tag { display: block; margin-top: 4px; }
.update h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; margin-bottom: 8px; }
.update p { color: var(--ink-soft); max-width: 58ch; }
.update .more { margin-top: 12px; }
.update-ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.update-ph img { width: 100%; height: 100%; object-fit: cover; }
.update.no-img { grid-template-columns: 160px 1fr; }
.update-empty { color: var(--taupe); padding: 30px 0; }

.update h3 a { transition: opacity .3s; }
.update h3 a:hover { opacity: .65; }

/* ---------- blog post ---------- */
.post { padding: 150px 0 120px; }
.post-head { text-align: center; max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.post-head h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 7vw, 96px); line-height: 1; margin: 16px 0 0; }
.post-cover { max-width: 1040px; margin: 56px auto 0; padding: 0 var(--gutter); }
.post-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-body { max-width: 680px; margin: 64px auto 0; padding: 0 var(--gutter); }
.post-body p { font-family: var(--serif); font-size: 22px; line-height: 1.6; color: var(--ink); margin-bottom: 26px; }
.post-body p:first-child::first-letter { float: left; font-size: 4.1em; line-height: .8; padding: 8px 12px 0 0; font-weight: 300; }
.post-body a { border-bottom: 1px solid currentColor; }
.post-body h2 { font-family: var(--serif); font-weight: 300; font-size: 36px; line-height: 1.1; margin: 48px 0 18px; }
.post-body blockquote { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.25; text-align: center; margin: 56px -6% 56px; padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-body figure { margin: 48px -12%; }
.post-body figure img { width: 100%; max-height: 80vh; object-fit: cover; }
.post-body figcaption { margin-top: 12px; text-align: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.post-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 56px -12%; }
.post-gallery figure { margin: 0; }
.post-gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; max-height: none; }
.post-sign { text-align: center; font-style: italic; color: var(--ink-soft) !important; margin-top: 48px; }
.post-nav { max-width: 1040px; margin: 90px auto 0; padding: 30px var(--gutter) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.post-nav a:not(.link-line) { font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.post-nav a .eyebrow { display: block; margin-bottom: 4px; }
.post-nav .right { text-align: right; }

/* ---------- black announcement box ---------- */
.announce { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; background: var(--espresso); color: #efe9e1; }
.announce-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 80px clamp(28px, 7vw, 110px); }
.announce-copy .eyebrow { color: #a89a8b; }
.announce-copy h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; margin: 16px 0 20px; }
.announce-copy p { max-width: 400px; color: #cfc6bb; font-size: 15px; }
.announce-copy .btn-line { margin-top: 30px; }
.announce-ph { overflow: hidden; min-height: 420px; }
.announce-ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- projects ---------- */
.projects { position: relative; padding: 130px 0 140px; overflow: hidden; }
.projects-title { position: relative; z-index: 2; text-align: center; font-family: var(--serif); font-weight: 300; font-size: clamp(42px, 7.4vw, 112px); line-height: .98; text-transform: uppercase; max-width: 1100px; margin: 14px auto 0; }
.peek { position: absolute; z-index: 1; width: clamp(110px, 14vw, 210px); aspect-ratio: 3 / 4; overflow: hidden; }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.peek.l { left: -30px; top: 190px; } .peek.r { right: -24px; top: 100px; }
.project-list { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 80px; }
.project-ph { aspect-ratio: 1200 / 630; overflow: hidden; background: #111; }
.project-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.project:hover .project-ph img { transform: scale(1.04); }
.project h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin-top: 16px; }
.project p { font-size: 14px; color: var(--ink-soft); margin: 2px 0 8px; }
.project-list.lead { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.project-list.lead .project h3 { font-size: 36px; }
.project-also { position: relative; z-index: 2; display: grid; grid-template-columns: 160px 200px 1fr auto; gap: 28px; align-items: baseline; margin-top: 56px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: opacity .3s; }
.project-also:hover { opacity: .7; }
.project-also h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; }
.project-also p { font-size: 14px; color: var(--ink-soft); }
.project-also .url, .project .url { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); }

/* ---------- projects page ---------- */
.proj-story { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 6vw, 90px); align-items: center; padding-top: 70px; padding-bottom: 130px; }
.proj-copy h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4vw, 54px); line-height: 1.05; margin: 12px 0 18px; }
.proj-copy p { color: var(--ink-soft); max-width: 44ch; margin-bottom: 30px; }
.proj-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.proj-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2); }
.proj-strip img:nth-child(2) { margin-top: 48px; }
.stats { display: flex; gap: 36px; margin: 30px 0 4px; }
.stats b { display: block; font-family: var(--serif); font-weight: 300; font-size: 42px; line-height: 1; color: #f3ede5; }
.stats span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #a89a8b; }

.proj-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 130px; }
.proj-card { display: block; }
.proj-card-ph { aspect-ratio: 16 / 11; overflow: hidden; background: var(--espresso); margin-bottom: 18px; }
.proj-card-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.proj-card:hover .proj-card-ph img { transform: scale(1.04); }
.proj-card h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.05; margin: 6px 0 4px; }
.proj-card p { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; }
.proj-anchor { scroll-margin-top: 70px; }
.proj-wide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.proj-wide.logo img { aspect-ratio: 1200 / 630; }
.stats.on-paper b { color: var(--ink); }
.stats.on-paper span { color: var(--taupe); }
.stats.on-paper { margin: 6px 0 30px; }
.dominate-ph { background: #0d1b33; display: flex; align-items: center; }
.dominate-ph img { height: auto !important; object-fit: contain !important; }

/* ---------- inner page hero: full-bleed photo, title overlapping into the paper ---------- */
.page-hero { position: relative; height: 72vh; min-height: 460px; max-height: 760px; color: #fff; overflow: hidden; }
.page-hero img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,12,.45), rgba(20,16,12,.1) 40%, rgba(20,16,12,.25)); }
.page-title { position: relative; z-index: 3; margin-top: -.55em; padding: 0 var(--gutter); text-align: center; font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 12vw, 200px); line-height: 1; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.page-title .top { position: absolute; left: 0; right: 0; top: 0; color: #fff; clip-path: inset(0 0 45% 0); }
.page-title .bottom { display: block; color: var(--ink); clip-path: inset(55% 0 0 0); }
.page-intro { text-align: center; padding: 34px var(--gutter) 90px; }
.page-intro h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; max-width: 720px; margin: 14px auto 16px; }
.page-intro p { max-width: 560px; margin: 0 auto; color: var(--ink-soft); }
/* plain page top (no photo) */
.page-top { padding: 150px var(--gutter) 70px; text-align: center; }
.page-top h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 9vw, 130px); line-height: .95; text-transform: uppercase; margin-top: 12px; }
.page-top p { max-width: 560px; margin: 22px auto 0; color: var(--ink-soft); }

/* ---------- story timeline ---------- */
.origins { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 90px); max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); }
.origin { border-top: 1px solid var(--ink); padding-top: 22px; }
.origin .who { font-family: var(--serif); font-size: 44px; font-weight: 300; line-height: 1; }
.origin .from { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); margin: 6px 0 22px; }
.origin time { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.origin h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 4px 0 8px; }
.origin p { color: var(--ink-soft); }
.meet { text-align: center; max-width: 760px; margin: 0 auto; padding: 110px var(--gutter) 40px; }
.meet time { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); }
.meet h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 6vw, 84px); line-height: 1; margin: 12px 0 18px; }
.meet h2 em { font-style: italic; }
.meet p { color: var(--ink-soft); max-width: 52ch; margin: 0 auto; }
.meet-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 560px; margin: 40px auto 0; }
.meet-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.meet-photos img:nth-child(2) { margin-top: 48px; }

.timeline { max-width: var(--max); margin: 0 auto; padding: 60px var(--gutter) 40px; }
.moment { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 6vw, 90px); align-items: center; padding: 70px 0; border-top: 1px solid var(--line); }
.moment:nth-child(even) .moment-copy { order: 2; }
.moment time { font-size: 11px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); }
.moment h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.05; margin: 10px 0 16px; }
.moment p { color: var(--ink-soft); max-width: 46ch; }
.moment p + p { margin-top: 10px; }
.moment-photos { display: grid; gap: 12px; }
.moment-photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; background: var(--paper-2); }
.moment-photos.n1 img { aspect-ratio: 5 / 4; }
.moment-photos.n2 { grid-template-columns: 1fr 1fr; }
.moment-photos.n2 img:nth-child(2) { margin-top: 40px; }
.moment-photos.n3 { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; }
.moment-photos.n3 img:first-child { grid-row: span 2; aspect-ratio: auto; }
.moment-photos.n3 img:not(:first-child) { aspect-ratio: 5 / 4; }
.moment-photos.n4 { grid-template-columns: 1fr 1fr; }
.moment-photos.n4 img { aspect-ratio: 1; }

.chapter-end { background: var(--espresso); color: #efe9e1; text-align: center; padding: 120px var(--gutter); }
.chapter-end time { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #a89a8b; }
.chapter-end h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 7vw, 100px); line-height: 1; margin: 14px 0 18px; }
.chapter-end p { max-width: 520px; margin: 0 auto; color: #cfc6bb; }
.chapter-end .btn-line { margin-top: 32px; }
.chapter-end-photos { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 14px; max-width: 980px; margin: 56px auto 0; align-items: center; }
.chapter-end-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.chapter-end-photos img:nth-child(2) { aspect-ratio: 4 / 5.4; }

/* a quiet, centred moment for someone we've lost */
.tribute { text-align: center; max-width: 640px; margin: 0 auto; padding: 120px var(--gutter) 90px; }
.tribute time { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); }
.tribute h2 { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; margin: 12px 0 30px; }
.tribute img { width: min(380px, 78%); aspect-ratio: 4 / 5; object-fit: cover; object-position: 20% center; margin: 0 auto 28px; filter: grayscale(.3) sepia(.15); }
.tribute p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto; font-family: var(--serif); font-size: 21px; line-height: 1.5; }
.tribute p + p { margin-top: 16px; font-style: italic; }

/* ---------- in memory ---------- */
.memorial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.memorial-card { text-align: center; }
.memorial-card .portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.memorial-card .portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) sepia(.15); }
.memorial-card .initials { font-size: 11px; letter-spacing: .3em; color: var(--taupe); margin-top: 22px; }
.memorial-card h3 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; margin-top: 6px; }
.memorial-card .role { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-soft); }
.memorial-note { text-align: center; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.2; max-width: 760px; margin: 0 auto; padding: 110px var(--gutter) 130px; }

/* ---------- gifts ---------- */
.gift-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 960px; margin: 0 auto; padding: 0 var(--gutter); }
.gift-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; aspect-ratio: 1; background: #fbf9f5; border: 1px solid var(--line); transition: border-color .35s, transform .5s var(--ease); }
.gift-option:hover { border-color: var(--ink); transform: translateY(-3px); }
.gift-option img { height: 34px; width: auto; max-width: 70%; object-fit: contain; }
.gift-option span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.gift-aside { text-align: center; padding: 70px var(--gutter) 120px; color: var(--ink-soft); }
.gift-aside a { border-bottom: 1px solid currentColor; }
.pay-detail { max-width: 460px; margin: 0 auto; padding: 150px var(--gutter) 120px; text-align: center; }
.pay-detail .pay-logo { height: 40px; width: auto; margin: 0 auto 28px; }
.pay-detail h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 6vw, 64px); line-height: 1; }
.pay-detail .to { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); margin: 16px 0 34px; }
.pay-detail .qr { width: 240px; height: 240px; margin: 0 auto; padding: 16px; background: #fff; border: 1px solid var(--line); }
.pay-detail .qr img { width: 100%; height: 100%; object-fit: contain; }
.pay-detail p { margin-top: 26px; color: var(--ink-soft); font-size: 15px; }
.pay-detail .back { margin-top: 40px; }

/* ---------- footer ---------- */
.site-footer { background: var(--espresso); color: #d8cfc4; padding: 100px var(--gutter) 44px; text-align: center; }
.site-footer .sig { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(48px, 8vw, 104px); color: #f3ede5; line-height: 1; }
.site-footer .place { margin-top: 14px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #a89a8b; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 50px 0 28px; font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; }
.site-footer nav a:hover { color: #fff; }
.site-footer .quiet { font-size: 13px; color: #9a8f83; }
.site-footer .quiet a { border-bottom: 1px solid #5a5048; }
.site-footer .fine { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line-light); font-size: 11px; letter-spacing: .2em; color: #7d7268; }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .marquee-track, .hero-bg img { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- phones & tablets ---------- */
@media (max-width: 860px) {
  body { font-size: 15px; }
  .site-nav ul { display: none; }
  .menu-btn { display: block; }
  .hero { height: 82vh; min-height: 540px; }
  .hero-name { top: 96px; font-size: 21vw; text-align: center; }
  .hero-name span { display: block; }
  .hero-tag { top: calc(96px + 21vw * 1.9); line-height: 1.9; }
  .hero-inset { width: 60vw; bottom: -120px; }
  .statement { padding: 170px var(--gutter) 80px; }
  .doors { grid-template-columns: 1fr; gap: 48px; padding-bottom: 100px; }
  .door-ph { aspect-ratio: 4 / 5; }
  .feature-marquee { font-size: 19vw; }
  .feature-photo { height: 86vh; }
  .feature-chapters { justify-content: flex-start; }
  .bleed { height: 72vh; }
  .bleed-copy { bottom: 21vw; right: var(--gutter); }
  .bleed-word { font-size: 17vw; }
  .update, .update.no-img { grid-template-columns: 1fr; gap: 12px; }
  .update-ph { order: -1; }
  .announce { grid-template-columns: 1fr; }
  .announce-ph { order: -1; aspect-ratio: 4 / 5; min-height: 0; }
  .announce-copy { padding: 64px var(--gutter) 72px; }
  .project-list, .project-list.lead { grid-template-columns: 1fr; gap: 40px; }
  .project-also { grid-template-columns: 1fr; gap: 6px; }
  .peek { display: none; }
  .projects { padding: 100px 0; }
  .page-hero { height: 62vh; }
  .page-title { font-size: 17vw; }
  .origins { grid-template-columns: 1fr; gap: 44px; }
  .moment { grid-template-columns: 1fr; padding: 52px 0; gap: 24px; }
  .moment:nth-child(even) .moment-copy { order: 0; }
  .moment-copy { order: 2; }
  .chapter-end-photos { grid-template-columns: 1fr 1fr; }
  .chapter-end-photos img:nth-child(3) { display: none; }
  .memorial { grid-template-columns: 1fr; gap: 56px; }
  .gift-options { grid-template-columns: 1fr 1fr; }
  .proj-story { grid-template-columns: 1fr; padding-bottom: 90px; }
  .proj-index { grid-template-columns: 1fr; gap: 44px; padding-bottom: 90px; }
  .dominate-ph { aspect-ratio: auto !important; }
  .proj-strip img:nth-child(2) { margin-top: 24px; }
  .stats { gap: 22px; }
  .stats b { font-size: 34px; }
  .post { padding-top: 120px; }
  .post-body p { font-size: 19px; }
  .post-body figure, .post-body blockquote, .post-gallery { margin-left: 0; margin-right: 0; }
  .post-gallery { grid-template-columns: 1fr 1fr; }
  .post-nav { grid-template-columns: 1fr; text-align: center; }
  .post-nav .right { text-align: center; }
}

/* ---------- Gabby Makes (mockup) ---------- */
.mk-hero { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 86vh; }
.mk-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 140px clamp(28px, 7vw, 110px) 80px; }
.mk-hero-copy h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 9vw, 140px); line-height: .9; margin: 14px 0 26px; }
.mk-hero-copy h1 em { display: block; }
.mk-hero-copy p { max-width: 40ch; color: var(--ink-soft); }
.mk-hero-ph { overflow: hidden; }
.mk-hero-ph img { width: 100%; height: 100%; object-fit: cover; }
.mk-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 80px var(--gutter) 40px; }
.mk-filters span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; }
.mk-filters span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 130px; }
.mk-card .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); position: relative; }
.mk-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.mk-card:hover .ph img { transform: scale(1.04); }
.mk-card .ph .soon { position: absolute; left: 14px; top: 14px; background: var(--paper); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 5px 10px; }
.mk-card .ph.empty { display: grid; place-items: center; background: var(--espresso); color: #efe9e1; font-family: var(--serif); font-style: italic; font-size: 30px; }
.mk-card .kind { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); margin-top: 16px; display: block; }
.mk-card h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; margin: 4px 0 6px; }
.mk-card p { font-size: 14px; color: var(--ink-soft); }
.mk-card.wide { grid-column: span 2; }
.mk-card.wide .ph { aspect-ratio: 16 / 10; }
.mk-divider { text-align: center; padding: 30px var(--gutter) 70px; }
.mk-divider h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5vw, 66px); line-height: 1; margin-top: 10px; }
.mk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 120px; counter-reset: s; }
.mk-step { border-top: 1px solid var(--ink); padding-top: 16px; }
.mk-step b { font-family: var(--serif); font-weight: 300; font-size: 44px; display: block; line-height: 1; }
.mk-step h4 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 8px 0 6px; }
.mk-step p { font-size: 14px; color: var(--ink-soft); }
.mk-banner { background: #f6e7c8; color: #5b4a2a; text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; position: relative; z-index: 51; }
@media (max-width: 860px) {
  .mk-hero { grid-template-columns: 1fr; }
  .mk-hero-ph { order: -1; height: 62vh; }
  .mk-hero-copy { padding: 50px var(--gutter) 30px; }
  .mk-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .mk-card.wide { grid-column: span 2; }
  .mk-card h3 { font-size: 22px; }
  .mk-steps { grid-template-columns: 1fr 1fr; }
}

/* Create with Gabby: compact intro, grid right away */
.cg-head { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; max-width: var(--max); margin: 0 auto; padding: 130px var(--gutter) 34px; }
.cg-head .me { aspect-ratio: 4 / 5; overflow: hidden; }
.cg-head .me img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cg-head h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 6vw, 84px); line-height: .95; margin: 8px 0 14px; }
.cg-head p { max-width: 52ch; color: var(--ink-soft); }
.cg-filters { display: flex; flex-wrap: wrap; gap: 8px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 26px; }
.cg-filters span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; }
.cg-filters span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 20px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 120px; }
.cg-grid .mk-card .ph { aspect-ratio: 1; }
.cg-grid .mk-card h3 { font-size: 26px; }
@media (max-width: 860px) {
  .cg-head { grid-template-columns: 110px 1fr; gap: 18px; padding-top: 100px; }
  .cg-head h1 { font-size: 40px; }
  .cg-head p { font-size: 14px; }
  .cg-grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .cg-grid .mk-card h3 { font-size: 19px; }
  .cg-grid .mk-card p { display: none; }
}
.cg-filters button { font: inherit; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: none; cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.cg-filters button:hover { border-color: var(--ink); }
.cg-filters button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cg-grid .mk-card[hidden] { display: none; }
.mk-template { display: inline-block; margin-top: 10px; }
.mk-card a.ph { display:block; }
/* three-photo galleries sit in one row */
.post-gallery:has(> figure:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .post-gallery:has(> figure:nth-child(3):last-child) { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .post-gallery figcaption { font-size: 9px; letter-spacing: .12em; } }