/* Sofia Schatz — Portfolio
   White board on dark backdrop. Wine / Espresso / Seafoam accents, used generously in type. */

:root{
  --backdrop:#0d0c08;
  --paper:#ffffff;
  --stone:#e8e4da;
  --ink:#141310;
  --ink-soft:#55503f;
  --ink-faint:#8f8a78;
  --wine:#7a170f;
  --espresso:#5a3420;
  --seafoam:#4f7a72;
  --line: rgba(20,19,16,0.13);
  --line-soft: rgba(20,19,16,0.07);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--backdrop);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--wine); color:#fff;}
img{max-width:100%; display:block;}
a{color:inherit;}
.serif{font-family:'Instrument Serif', serif;}

/* ---------- outer frame ---------- */
.frame{
  max-width:1180px;
  margin:0 auto;
  padding:56px 20px;
}
.board{
  background:var(--paper);
  padding:56px 64px;
  margin-bottom:28px;
  position:relative;
  overflow:hidden;
}
@media (max-width:760px){
  .board{padding:36px 22px;}
  .frame{padding:28px 12px;}
}

/* ---------- header row inside a board ---------- */
.label-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:56px;
  color:var(--ink-soft);
  font-weight:500;
}
.wordmark{
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  letter-spacing:0.03em;
}
.nav{display:flex; gap:22px;}
.nav a{color:var(--ink-soft); text-decoration:none; transition:color .2s ease;}
.nav a:hover, .nav a.active{color:var(--accent, var(--wine));}

/* ---------- home ---------- */
.home-board{padding-top:56px;}
.home-hero{max-width:760px; margin:40px 0 44px;}
.home-photo{margin:0 0 48px;}
.home-photo img{width:100%; height:min(62vh,620px); object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.home-photo:hover img{transform:scale(1.02);}
.home-name{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:clamp(64px,11vw,148px);
  line-height:0.92;
  letter-spacing:-0.02em;
  margin:0 0 32px;
}
.home-line{
  font-size:15px;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:600px;
  font-weight:400;
}
.c-wine{color:var(--wine);}
.c-espresso{color:var(--espresso);}
.c-seafoam{color:var(--seafoam);}
.home-line .c-wine, .home-line .c-espresso, .home-line .c-seafoam{font-weight:600;}
.home-links{display:flex; flex-wrap:wrap; gap:14px;}
.home-link{
  text-decoration:none;
  border:1px solid var(--line);
  padding:10px 20px;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.home-link:hover{
  border-color:var(--item-accent, var(--wine));
  color:var(--item-accent, var(--wine));
  transform:translateY(-2px);
}
@media (max-width:700px){
  .home-board{min-height:auto;}
}

/* ---------- centered intro block (home) ---------- */
.intro-center{
  text-align:center;
  max-width:680px;
  margin:0 auto 72px;
}
.intro-center h1{
  font-weight:700;
  font-size:14px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  line-height:2;
  margin:0;
}
.intro-center h1 em{
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  font-size:22px;
  vertical-align:-1px;
}
.intro-center h1 em.c-wine{color:var(--wine);}
.intro-center h1 em.c-espresso{color:var(--espresso);}
.intro-center h1 em.c-seafoam{color:var(--seafoam);}

/* ---------- page kicker / title (inner pages) ---------- */
.kicker{
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent, var(--wine));
  margin:0 0 12px;
  font-weight:600;
}
h1.page-title{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:clamp(38px,5.5vw,64px);
  letter-spacing:-0.01em;
  line-height:1.02;
  margin:0 0 18px;
}
h1.page-title em{font-style:italic; color:var(--accent, var(--wine));}
h2.section-title{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:clamp(24px,3.4vw,34px);
  letter-spacing:-0.005em;
  margin:0 0 16px;
}
h2.section-title em{font-style:italic; color:var(--accent, var(--wine));}
p.lede{
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:19px;
  line-height:1.5;
  color:var(--espresso);
  max-width:580px;
  margin:0 0 28px;
}
p.body-copy{
  font-size:13.5px;
  line-height:1.85;
  color:var(--ink-soft);
  margin:0 0 20px;
  max-width:580px;
  font-weight:400;
}
p.body-copy.wide{max-width:none;}
p.body-copy strong{color:var(--ink); font-weight:600;}

/* ---------- numbered index list (home) ---------- */
.index-list{max-width:760px; margin:0 auto;}
.index-item{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:14px;
  font-size:12px;
  letter-spacing:0.01em;
  line-height:1.7;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
}
.index-item:first-child{border-top:1px solid var(--line);}
.index-item .num{color:var(--item-accent, var(--wine)); font-weight:700;}
.index-item .title{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  transition:color .2s ease;
}
.index-item .sub{color:var(--ink-faint); text-transform:none; letter-spacing:0.01em;}
.index-item:hover .title{color:var(--item-accent, var(--wine));}

/* ---------- full-bleed single figure + caption row ---------- */
.figure{margin:32px 0;}
.figure img{width:100%; object-fit:cover;}
.figure-cap{
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

/* ---------- simple 2-up / 3-up figure rows ---------- */
.fig-row{display:grid; gap:16px; margin:32px 0;}
.fig-row.cols-2{grid-template-columns:1fr 1fr;}
.fig-row.cols-3{grid-template-columns:repeat(3,1fr);}
.fig-row img{width:100%; height:100%; object-fit:cover;}
@media (max-width:700px){
  .fig-row.cols-2, .fig-row.cols-3{grid-template-columns:1fr;}
}

/* ---------- flowing masonry gallery (fewer sections) ---------- */
.flow-gallery{
  columns:3 260px;
  column-gap:16px;
  margin:32px 0;
}
.flow-gallery figure{
  margin:0 0 16px;
  break-inside:avoid;
  position:relative;
  overflow:hidden;
}
.flow-gallery figure img{width:100%; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.flow-gallery figure:hover img{transform:scale(1.045);}
.flow-gallery figcaption{
  font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:8px;
}
@media (max-width:700px){ .flow-gallery{columns:2 160px;} }

/* ---------- two column ---------- */
.two-col{display:grid; grid-template-columns: 0.9fr 1.1fr; gap:48px; align-items:start;}
.two-col.reverse{grid-template-columns:1.1fr 0.9fr;}
.two-col img{width:100%; object-fit:cover;}
@media (max-width:760px){ .two-col, .two-col.reverse{grid-template-columns:1fr;} }

/* ---------- meta row ---------- */
.meta-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  margin:32px 0 4px; padding-top:20px; border-top:1px solid var(--line); font-size:12px;
}
.meta-row .meta-label{font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent, var(--wine)); margin-bottom:6px; font-weight:600;}
.meta-row .meta-value{color:var(--ink);}
@media (max-width:700px){ .meta-row{grid-template-columns:repeat(2,1fr); row-gap:20px;} }

/* ---------- timeline / education (about) ---------- */
.timeline{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
.timeline-item{margin-bottom:24px; font-size:12px; line-height:1.7;}
.timeline-item .date{color:var(--ink-faint); letter-spacing:0.03em; display:block; margin-bottom:3px;}
.timeline-item .role{font-weight:700; text-transform:uppercase; letter-spacing:0.02em;}
.timeline-item .org{color:var(--ink-soft); font-style:italic; font-family:'Instrument Serif',serif; font-size:15px;}
@media (max-width:700px){.timeline{grid-template-columns:1fr;}}

/* ---------- quote ---------- */
.quote-block{
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:clamp(20px,3vw,28px);
  line-height:1.5;
  text-align:center;
  max-width:660px;
  margin:56px auto;
  color:var(--espresso);
}
.quote-block .attr{
  display:block; font-family:'Inter', sans-serif; font-style:normal;
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent, var(--wine)); margin-top:16px; font-weight:600;
}

/* ---------- palette swatches ---------- */
.palette-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:24px 0;}
.swatch{width:54px; height:54px; display:flex; align-items:flex-end; padding:5px; font-size:7.5px; color:#fff; letter-spacing:0.02em; border:1px solid var(--line);}

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--ink); padding:11px 20px;
  font-family:'Inter', sans-serif; font-weight:600;
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover{background:var(--ink); color:#fff; transform:translateY(-1px);}
.btn.wine{border-color:var(--accent, var(--wine)); color:var(--accent, var(--wine));}
.btn.wine:hover{background:var(--accent, var(--wine)); color:#fff;}
.link-arrow{
  text-decoration:none; color:var(--accent, var(--wine)); font-weight:600;
  font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:opacity .2s ease;
}
.link-arrow:hover{opacity:0.65;}

/* ---------- bold colour-block hero (playful) ---------- */
.color-hero{
  position:relative;
  padding:64px 64px 56px;
  overflow:hidden;
}
.color-hero.wine{background:var(--wine); color:#fdf6ee;}
.color-hero.espresso{background:var(--espresso); color:#fdf6ee;}
.color-hero.seafoam{background:var(--seafoam); color:#0f1e1b;}
.color-hero .label-row{color:inherit; opacity:0.82; margin-bottom:64px;}
.color-hero .label-row a{color:inherit;}
.color-hero .nav a.active{opacity:1; text-decoration:underline; text-underline-offset:4px;}
.color-hero .wordmark{color:inherit;}
.color-hero .kicker-tag{
  display:inline-block;
  font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
  padding:5px 12px; border:1px solid currentColor; margin-bottom:22px;
}
.color-hero h1.mega{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  line-height:0.86;
  margin:0;
}
.color-hero h1.mega .big{
  display:block;
  font-size:clamp(72px,13vw,168px);
  letter-spacing:-0.02em;
}
.color-hero h1.mega .small{
  display:block;
  font-family:'Inter', sans-serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(16px,2vw,22px);
  letter-spacing:0.01em;
  margin-top:18px;
  max-width:520px;
  line-height:1.5;
  opacity:0.92;
}
.vert-tag{
  position:absolute;
  right:36px;
  top:64px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  opacity:0.75;
}
@media (max-width:760px){
  .color-hero{padding:40px 24px 40px;}
  .vert-tag{display:none;}
}

/* ---------- shoot rows (Branding editorial) ---------- */
.shoot-row{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:16px;
  margin:16px 0;
  align-items:end;
}
.shoot-row.reverse{grid-template-columns: 1fr 1.6fr;}
.shoot-row.reverse .shoot-small{order:1;}
.shoot-row.reverse .shoot-big{order:2;}
.shoot-big img, .shoot-small img{width:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.shoot-big img{height:420px;}
.shoot-small img{height:260px;}
.shoot-big:hover img, .shoot-small:hover img{transform:scale(1.03);}
.shoot-stack{display:flex; flex-direction:column; gap:12px;}
.shoot-stack img{width:100%; height:126px; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.shoot-stack:hover img{transform:scale(1.03);}
@media (max-width:760px){
  .shoot-row, .shoot-row.reverse{grid-template-columns:1fr;}
  .shoot-row.reverse .shoot-small, .shoot-row.reverse .shoot-big{order:0;}
  .shoot-big img{height:300px;}
  .shoot-small img{height:220px;}
}

/* ---------- catalogue, simple grid (Sof Atelier) — same dimensions as home ---------- */
.atelier-catalogue{
  min-height:100vh;
  min-height:100dvh;
  padding:clamp(24px,3vw,56px);
  background:var(--paper);
}
.atelier-catalogue .label-row{margin-bottom:clamp(28px,5vh,64px);}

/* ---------- atelier video — full background, own page ---------- */
.atelier-video{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  padding:clamp(24px,3vw,56px);
  background:var(--ink);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.av-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.34;
  z-index:0;
  pointer-events:none;
}
.atelier-video > .label-row,
.atelier-video > .footer-copy{
  position:relative;
  z-index:1;
}
.atelier-video .label-row{color:#f5f0e6;}
.atelier-video .wordmark{color:#f5f0e6;}
.atelier-video .nav a{color:rgba(245,240,230,0.75);}
.atelier-video .nav a:hover, .atelier-video .nav a.active{color:#fff;}
.atelier-video .footer-copy{color:rgba(245,240,230,0.6); border-top-color:rgba(245,240,230,0.25); margin-top:auto;}

/* ---------- atelier pampa — full-bleed photo + centered quote ---------- */
.atelier-pampa{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  padding:clamp(24px,3vw,56px);
  background:var(--paper);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.ap-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.4;
  z-index:0;
  pointer-events:none;
}
.atelier-pampa > .label-row,
.atelier-pampa > .ap-quote,
.atelier-pampa > .footer-copy{
  position:relative;
  z-index:1;
}
.atelier-pampa .footer-copy{margin-top:auto;}
.ap-quote{
  flex:1 1 auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  margin:0;
  padding:8vh 8vw 0;
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(18px,2.3vw,28px);
  line-height:1.55;
  text-align:center;
  color:var(--espresso);
  text-shadow:none;
}
@media (max-width:700px){
  .ap-quote{font-size:clamp(16px,4.4vw,22px); padding:0 4vw;}
}
.cat-grid-simple{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(40px,4.6vw,64px) clamp(30px,3.4vw,46px);
  max-width:720px;
  margin:0 auto;
}
.cat-tile{aspect-ratio:3/4; overflow:hidden; background:var(--stone);}
.cat-tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.cat-tile:hover img{transform:scale(1.35);}
@media (max-width:900px){ .cat-grid-simple{grid-template-columns:repeat(4,1fr); max-width:480px;} }
@media (max-width:640px){ .cat-grid-simple{grid-template-columns:repeat(2,1fr); max-width:320px; gap:32px 20px;} }

/* ---------- atelier grid — sketches + process photos, same dimensions as home ---------- */
.atelier-grid-section{
  min-height:100vh;
  min-height:100dvh;
  padding:clamp(24px,3vw,56px);
  background:var(--paper);
  display:flex;
  flex-direction:column;
}
.atelier-grid-section .label-row{margin-bottom:clamp(28px,5vh,64px);}
.ag-grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(3,1fr);
  min-height:0;
}
.ag-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(10px,1.4vw,22px);
  overflow:hidden;
  min-height:0;
  aspect-ratio:1/1;
}
.ag-cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.ag-cell:hover img{transform:scale(1.08);}

.ag-foot{
  display:grid;
  grid-template-columns:repeat(5,1fr);
}
.ag-foot > div{
  padding:clamp(14px,1.8vw,22px);
}
.ag-mark{
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:clamp(18px,1.8vw,24px);
  line-height:1.15;
  color:var(--wine);
}
.ag-label{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-family:'Inter', sans-serif;
  font-size:11px;
  line-height:1.5;
  color:var(--ink-soft);
}
.ag-label .dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--wine);
  margin-top:5px;
  flex-shrink:0;
}
@media (max-width:900px){
  .ag-grid{grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(5,1fr);}
  .ag-foot{grid-template-columns:repeat(3,1fr);}
  .ag-foot > div:nth-child(4), .ag-foot > div:nth-child(5){grid-column:span 1;}
}
@media (max-width:640px){
  .ag-grid{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(8,1fr);}
  .ag-foot{grid-template-columns:repeat(2,1fr);}
}

/* ---------- product grid ---------- */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:32px 0;}
.product-card img{width:100%; height:190px; object-fit:cover; background:var(--stone); margin-bottom:10px; transition:transform .5s ease;}
.product-card:hover img{transform:scale(1.04);}
.product-name{font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; font-weight:600;}
.product-tag{font-size:10px; color:var(--accent, var(--wine)); margin-top:3px;}
@media (max-width:760px){.product-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- contact ---------- */
.contact-line{font-size:14px; margin-bottom:12px;}
.contact-line .k{
  color:var(--accent, var(--wine)); display:inline-block; width:100px;
  text-transform:uppercase; font-size:10px; letter-spacing:0.06em; font-weight:600;
  vertical-align:middle;
}

/* ---------- footer copy ---------- */
.footer-copy{
  display:flex; justify-content:space-between;
  font-size:10px; letter-spacing:0.04em; color:var(--ink-faint);
  margin-top:48px; padding-top:16px; border-top:1px solid var(--line);
}
.footer-copy a{text-decoration:none;}
.footer-copy a:hover{color:var(--accent, var(--wine));}

hr.rule{border:none; border-top:1px solid var(--line); margin:32px 0;}

/* ---------- page accent themes ---------- */
.board.theme-wine, .detail-page.theme-wine{--accent:var(--wine); --item-accent:var(--wine);}
.board.theme-espresso, .detail-page.theme-espresso{--accent:var(--espresso); --item-accent:var(--espresso);}
.board.theme-seafoam, .detail-page.theme-seafoam{--accent:var(--seafoam); --item-accent:var(--seafoam);}

/* ---------- movement: scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.reveal-group .reveal:nth-child(1){transition-delay:.02s;}
.reveal-group .reveal:nth-child(2){transition-delay:.08s;}
.reveal-group .reveal:nth-child(3){transition-delay:.14s;}
.reveal-group .reveal:nth-child(4){transition-delay:.2s;}
.reveal-group .reveal:nth-child(5){transition-delay:.26s;}
.reveal-group .reveal:nth-child(6){transition-delay:.32s;}

/* image hover movement everywhere */
.figure img, .two-col img, .fig-row img{transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.figure:hover img, .two-col a:hover img, .fig-row .figure:hover img{transform:scale(1.035);}

/* ===================================================================
   LANDING — marquee homepage (1920×1080 desktop target)
   Tan backdrop, cream card, rows of serif words + photos scrolling
   left → right, infinitely, at slightly different speeds per row.
=================================================================== */
:root{
  --land-bg:#ffffff;
  --land-paper:#ffffff;
  --land-ink:#221d15;
  --land-ink-soft:#5c5340;
  --land-line: rgba(34,29,21,0.16);
}

body.home-landing{
  background:var(--land-bg);
  height:100vh;
  height:100dvh;
  overflow:hidden;
}
@media (max-width:900px){
  body.home-landing{height:auto; overflow:auto;}
}

.land{
  width:100vw;
  height:100vh;
  height:100dvh;
  min-height:640px;
  padding:0;
}
.land-card{
  background:var(--land-paper);
  border:none;
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:clamp(18px,2.4vw,40px) clamp(18px,3vw,48px);
  color:var(--land-ink);
  position:relative;
  overflow:hidden;
}

/* -- top bar: intro copy + nav -- */
.land-topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding-bottom:clamp(10px,1.6vh,20px);
}
.land-intro{max-width:560px;}
.land-kicker{
  display:block;
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:8px;
  color:var(--wine);
}
.land-bio{
  margin:0;
  font-family:'Inter', sans-serif;
  font-size:12px;
  line-height:1.65;
  color:var(--land-ink-soft);
  max-width:540px;
}
.land-nav{
  display:flex;
  gap:20px;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--wine);
  font-weight:500;
}
.land-nav a{text-decoration:none; color:inherit; transition:opacity .2s ease;}
.land-nav a:hover{opacity:0.6;}

/* -- the four scrolling rows -- */
.marquee-stack{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(4px,1vh,16px);
  min-height:0;
  border-top:1px solid var(--land-line);
  border-bottom:1px solid var(--land-line);
  padding-top:clamp(48px,8vh,110px);
  padding-bottom:clamp(20px,4vh,56px);
}
.marquee-row{
  overflow-x:hidden;
  overflow-y:visible;
  width:100%;
  font-size:clamp(32px,5.8vw,98px);
  padding-bottom:0.12em;
}
.marquee-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:marqueeLTR var(--mq-duration,60s) linear infinite;
}
.marquee-row:hover .marquee-track{animation-play-state:paused;}
@keyframes marqueeLTR{
  from{transform:translateX(-50%);}
  to{transform:translateX(0%);}
}
.marquee-group{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.mq-word{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:1em;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--land-ink);
  text-decoration:none;
  padding:0 0.28em;
  transition:color .25s ease;
  white-space:nowrap;
}
a.mq-word:hover{color:var(--wine);}
.mq-word.mq-name{font-style:italic;}
.mq-word.mq-accent-wine:hover{color:var(--wine);}
.mq-word.mq-accent-espresso:hover{color:var(--espresso);}
.mq-word.mq-accent-seafoam:hover{color:var(--seafoam);}
.mq-img{
  height:0.78em;
  width:0.78em;
  min-width:0.78em;
  object-fit:cover;
  margin:0 0.15em;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  filter:saturate(0.96);
  flex-shrink:0;
}
.mq-img:hover{transform:scale(1.08); filter:saturate(1.1);}

/* -- bottom bar -- */
.land-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:clamp(10px,1.6vh,18px);
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--land-ink-soft);
  font-weight:500;
}
.land-footer a{text-decoration:none; color:inherit; transition:color .2s ease;}
.land-footer a:hover{color:var(--wine);}
.land-tags span{margin:0 8px; opacity:0.6;}

@media (max-width:900px){
  .land{height:auto; padding:14px;}
  .land-card{height:auto;}
  .land-topbar{flex-direction:column; gap:16px;}
  .land-nav{flex-wrap:wrap; gap:12px 18px;}
  .marquee-stack{gap:22px; padding:22px 0;}
  .mq-word{font-size:clamp(28px,9vw,52px);}
  .land-footer{flex-direction:column; gap:8px; align-items:flex-start;}
}

/* ===================================================================
   CONTACT — same dimensions as home (.land / .land-card)
=================================================================== */
.contact-mid{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  gap:clamp(20px,4vh,40px);
}
.contact-headline{
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:clamp(48px,9vw,120px);
  line-height:0.92;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  margin:0;
  color:var(--land-ink);
}
.contact-methods{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:clamp(18px,4vw,56px);
}
.cm-item{
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:clamp(17px,2.1vw,26px);
  color:var(--wine);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, opacity .2s ease;
}
a.cm-item:hover{border-color:var(--wine); opacity:0.75;}
.cm-item.plain{color:var(--land-ink); font-style:normal; font-family:'Inter', sans-serif; font-size:clamp(12px,1.3vw,15px); letter-spacing:0.02em;}

.contact-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(6px,1vw,12px);
  padding-top:clamp(12px,2vh,22px);
}
.contact-strip a{display:block; aspect-ratio:1/1; overflow:hidden;}
.contact-strip img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(55%);
  transition:filter .35s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.contact-strip a:hover img{filter:grayscale(0%); transform:scale(1.06);}

@media (max-width:760px){
  .contact-headline{font-size:clamp(38px,13vw,64px);}
  .contact-strip{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .contact-strip{grid-template-columns:repeat(2,1fr);}
}

/* ---------- mobile nav ---------- */
.nav-toggle{display:none;}
@media (max-width:640px){
  .nav-toggle{
    display:block; background:none; border:1px solid var(--line);
    padding:6px 12px; font-family:'Inter',sans-serif; font-weight:600; font-size:10px;
    letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; color:var(--ink);
  }
  .nav{
    position:fixed; inset:0 0 0 0; background:var(--paper);
    flex-direction:column; gap:0; padding:80px 24px 24px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; z-index:60;
  }
  .nav a{padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:13px;}
  body.nav-open .nav{opacity:1; pointer-events:auto; transform:translateY(0);}
}

/* ===================================================================
   ABOUT — scattered numbered layout (1920×1080 desktop target)
   White full-bleed page, red pop (wine) on title/numbers/marks,
   real photo centered, numbered blocks placed around it.
=================================================================== */
body.about-landing{
  background:var(--paper);
  height:100vh;
  height:100dvh;
  overflow:hidden;
}
@media (max-width:900px){
  body.about-landing{height:auto; overflow:auto;}
}

.as-page{
  width:100vw;
  height:100vh;
  height:100dvh;
  min-height:640px;
  padding:clamp(24px,3vw,56px);
  display:flex;
  flex-direction:column;
}

.as-topbar{padding-bottom:clamp(20px,3vh,40px);}

.as-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding-bottom:clamp(16px,3vh,36px);
}
.as-title{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:clamp(48px,7vw,120px);
  line-height:0.92;
  letter-spacing:-0.01em;
  color:var(--wine);
  margin:0;
}
.as-block{max-width:320px;}
.as-num{
  display:block;
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--wine);
  margin-bottom:10px;
}
.as-heading{
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 10px;
}
.as-text{
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  line-height:1.7;
  letter-spacing:0.01em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}
.as-text a{color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; transition:color .2s ease;}
.as-text a:hover{color:var(--wine);}
.as-text .line{display:block;}

.as-body{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  gap:clamp(20px,3vw,56px);
}
.as-col{display:flex; flex-direction:column; min-height:0;}
.as-col-left{flex:0 0 22%;}
.as-col-center{flex:1 1 auto; align-items:center; justify-content:center;}
.as-col-right{flex:0 0 26%;}
.as-spacer{flex:1 1 auto;}

.as-mark{
  font-family:'Inter', sans-serif;
  font-size:18px;
  letter-spacing:0.1em;
  color:var(--wine);
}

.as-photo{
  width:clamp(260px,27vw,400px);
  aspect-ratio:3/2;
  height:auto;
  max-height:70%;
  margin:auto;
  overflow:hidden;
}
.as-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.02);
}
.as-photo.color img{filter:none;}

.cs-box{
  display:inline-block;
  margin-top:18px;
  padding:12px 22px;
  border:1px solid var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.cs-box:hover{background:var(--wine); border-color:var(--wine); color:#fff; transform:translateY(-2px);}

.as-cta{padding-bottom:2px;}

.as-footer{
  display:flex; justify-content:space-between;
  font-size:10px; letter-spacing:0.04em; color:var(--ink-faint);
  padding-top:clamp(14px,2.4vh,24px); margin-top:clamp(10px,1.6vh,18px);
  border-top:1px solid var(--line);
}

@media (max-width:900px){
  .as-page{height:auto; padding:20px;}
  .as-head{flex-direction:column; gap:20px;}
  .as-body{flex-direction:column; gap:32px;}
  .as-col-left, .as-col-right{flex:0 0 auto;}
  .as-photo{aspect-ratio:4/3; height:auto;}
  .as-title{font-size:clamp(40px,12vw,64px);}
}

/* ===================================================================
   INTERIOR — scrollable pages, page 1 is a scattered-photo hero
   (1920×1080 desktop target per section)
=================================================================== */
html.int-scroll-html{scroll-snap-type:y proximity;}
.int-page{scroll-snap-align:start;}

.int-hero{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,3vw,56px);
  background:var(--paper);
}
.int-hero .label-row{margin-bottom:0;}

.int-stage{
  position:relative;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:0 4vw;
}
.int-title{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:clamp(46px,8.4vw,148px);
  line-height:1;
  letter-spacing:-0.01em;
  text-align:center;
  color:var(--ink);
  margin:0;
  padding:0.12em 0.3em;
  background:var(--paper);
  position:relative;
  z-index:2;
  white-space:nowrap;
}
.int-photo{
  position:absolute;
  overflow:hidden;
  z-index:1;
  box-shadow:0 18px 34px rgba(20,19,16,0.16);
  transform-origin:center center;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.int-photo:hover{
  transform:scale(1.22);
  z-index:5;
  box-shadow:0 28px 50px rgba(20,19,16,0.28);
}
.int-photo img{width:100%; height:100%; object-fit:cover; display:block;}

.int-ph1{left:1%; top:8%; width:13%; aspect-ratio:0.82;}
.int-ph2{left:80%; top:3%; width:17%; aspect-ratio:0.82;}
.int-ph3{left:48.5%; top:19%; width:11.5%; aspect-ratio:0.8;}
.int-ph4{left:20%; top:41%; width:19%; aspect-ratio:0.8;}
.int-ph5{left:67%; top:64%; width:17%; aspect-ratio:0.85;}

.int-hero-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:500;
  padding-top:clamp(14px,2.2vh,26px);
}
.int-hero-foot a{color:inherit; text-decoration:none; transition:color .2s ease;}
.int-hero-foot a:hover{color:var(--wine);}
.int-scroll-cue{display:flex; align-items:center; gap:8px;}
.int-scroll-cue .dot{width:5px; height:5px; border-radius:50%; background:var(--wine); display:inline-block; animation:intBob 1.6s ease-in-out infinite;}
@keyframes intBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);}}

@media (max-width:900px){
  .int-hero{min-height:auto; padding-top:24px;}
  .int-stage{
    min-height:auto; padding:36px 5vw; gap:16px;
    display:flex; flex-wrap:wrap; justify-content:center;
  }
  .int-title{
    font-size:clamp(32px,11vw,56px); white-space:normal;
    flex:0 0 100%; order:1; margin-bottom:8px;
  }
  .int-photo{
    position:static!important; left:auto!important; top:auto!important;
    width:calc(50% - 8px)!important; aspect-ratio:1/1!important;
    order:2;
  }
}

/* ===================================================================
   INTERIOR — page 3, three-way split chooser (bottom of interior.html)
=================================================================== */
.int-split{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,3vw,56px);
  background:var(--paper);
}
.int-split .label-row{margin-bottom:0;}

.split-shell{
  flex:1 1 auto;
  display:flex;
  min-height:0;
  gap:clamp(20px,3vw,48px);
  padding-top:clamp(20px,3vh,40px);
}
.split-left{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  padding-bottom:6px;
}
.split-vert{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:clamp(17px,1.8vw,23px);
  line-height:1.3;
  color:var(--ink);
  max-width:100%;
}
.split-vert em{font-style:italic; color:var(--wine);}

.split-cols{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  min-height:0;
  border-top:1px solid var(--line);
}
.split-col{
  border-left:1px solid var(--line);
  padding:24px 26px 0;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--ink);
}
.split-col:last-child{border-right:1px solid var(--line);}
.split-col-offset{padding-top:clamp(64px,9vh,128px);}
.split-num{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:clamp(32px,3.6vw,50px);
  line-height:1;
  margin-bottom:18px;
}
.split-col-1 .split-num{color:var(--seafoam);}
.split-col-2 .split-num{color:var(--wine);}
.split-col-3 .split-num{color:var(--espresso);}
.split-photo{width:100%; aspect-ratio:4/5; overflow:hidden; margin-bottom:16px;}
.split-photo img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.split-col:hover .split-photo img{transform:scale(1.045);}
.split-cap{
  font-family:'Inter', sans-serif;
  font-size:12px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.split-date{
  font-family:'Inter', sans-serif;
  font-size:10px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
@media (max-width:900px){
  .split-shell{flex-direction:column; gap:24px;}
  .split-left{align-items:flex-start;}
  .split-vert{writing-mode:horizontal-tb; transform:none;}
  .split-cols{grid-template-columns:1fr; border-top:none;}
  .split-col{border-left:none; border-top:1px solid var(--line); padding:24px 0 0;}
  .split-col:last-child{border-right:none; padding-bottom:24px;}
  .split-col-offset{padding-top:24px;}
}

/* ===================================================================
   SOF ATELIER — intro page (same dimensions as About / Interior)
=================================================================== */
.atelier-intro{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,3vw,56px);
  background:var(--paper);
}
.atelier-intro .label-row{margin-bottom:0;}
.ai-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:0;
  padding-top:clamp(28px,5vh,64px);
}
.ai-top{
  display:flex;
  gap:clamp(20px,4vw,56px);
  align-items:flex-start;
}
.ai-images{display:flex; gap:12px; flex:0 0 auto;}
.ai-images img{
  width:clamp(130px,13.5vw,225px);
  height:clamp(160px,16.5vw,275px);
  object-fit:cover;
}
.ai-text{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  padding-top:clamp(8px,2vh,24px);
}
.ai-text p{
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:clamp(14px,1.35vw,17px);
  line-height:1.85;
  max-width:440px;
  text-align:center;
  color:var(--ink-soft);
  margin:0;
}
.ai-wordmark{
  align-self:flex-end;
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:clamp(56px,10vw,152px);
  letter-spacing:0.01em;
  line-height:0.9;
  color:var(--wine);
  margin-top:auto;
}
@media (max-width:800px){
  .atelier-intro{min-height:auto;}
  .ai-body{justify-content:flex-start; gap:48px;}
  .ai-top{flex-direction:column; gap:24px;}
  .ai-text{padding-top:0;}
  .ai-wordmark{align-self:center; font-size:clamp(44px,14vw,84px); margin-top:0;}
}

/* ===================================================================
   BRANDING — opening "note" page, same dimensions as the other
   full-page sections (Interior, Sof Atelier, About).
=================================================================== */
.brand-note{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,3vw,56px);
  background:var(--paper);
}
.brand-note .label-row{margin-bottom:0;}
.bn-label{
  margin-top:clamp(28px,5vh,56px);
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.bn-label em{
  display:block;
  margin-top:4px;
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-soft);
}
.bn-body{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:0;
}
.bn-quote{
  max-width:520px;
  margin:0;
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:clamp(16px,1.7vw,20px);
  line-height:1.65;
  color:var(--espresso);
}
.bn-quote .attr{
  display:block;
  margin-top:22px;
  font-family:'Inter', sans-serif;
  font-style:normal;
  font-size:11.5px;
  letter-spacing:0.02em;
  color:var(--ink);
}
.bn-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-top:auto;
  padding-top:clamp(20px,3vh,36px);
}
.bn-meta-left{
  font-family:'Inter', sans-serif;
  font-size:10px;
  line-height:1.6;
  color:var(--ink-faint);
}
.bn-meta-right{
  display:flex;
  gap:clamp(20px,3vw,40px);
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:12.5px;
  color:var(--ink-soft);
}
.bn-meta-page{
  font-family:'Inter', sans-serif;
  font-size:10px;
  color:var(--ink-faint);
}
@media (max-width:760px){
  .bn-body{justify-content:flex-start;}
  .bn-quote{max-width:none;}
  .bn-meta{flex-direction:column; align-items:flex-start; gap:14px;}
}

/* -- branding, hand-painted mark section, same dimensions as bn -- */
.brand-mark{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,3vw,56px);
  background:var(--paper);
}
.brand-mark .label-row{margin-bottom:clamp(28px,5vh,64px);}
.brand-mark .two-col{flex:1 1 auto; align-items:center;}
.bm-study-wrap{
  position:absolute;
  right:clamp(24px,3vw,56px);
  bottom:clamp(56px,9vh,96px);
  margin:0;
  width:clamp(110px,11vw,150px);
}
.bm-study{
  width:100%;
  border:1px solid var(--line);
}
.bm-study-cap{
  margin:8px 0 0;
  font-family:'Inter', sans-serif;
  font-size:9px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
@media (max-width:760px){
  .bm-study-wrap{position:static; width:140px; margin-top:24px;}
}
.sketch-pair{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:0.7fr 1.3fr;
  gap:20px;
  min-height:0;
  margin-top:28px;
}
.sketch-pair figure{margin:0; display:flex; flex-direction:column; min-height:0;}
.sketch-pair img{
  width:100%;
  height:100%;
  min-height:0;
  flex:1 1 auto;
  object-fit:cover;
  aspect-ratio:4/3;
}
.sketch-pair figcaption{
  margin-top:10px;
  font-family:'Inter', sans-serif;
  font-size:10px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
@media (max-width:760px){
  .sketch-pair{grid-template-columns:1fr;}
}

.sketch-real-wrap{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  margin-top:28px;
}
.sketch-real-wrap img{
  width:auto;
  max-width:420px;
  height:auto;
  max-height:60%;
  margin:0 auto;
}

/* -- branding, quote page: small centered quote + link box to PDF, same dimensions -- */
.brand-quote-page{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,3vw,56px);
  background:var(--paper);
}
.brand-quote-page .label-row{margin-bottom:0;}
.bq-mid{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:32px;
}
.bq-quote{
  margin:0;
  max-width:560px;
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(20px,2.6vw,30px);
  line-height:1.5;
  color:var(--espresso);
}
.bq-quote .attr{
  display:block;
  margin-top:18px;
  font-family:'Inter', sans-serif;
  font-style:normal;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--wine);
}
.bq-box{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  border:1px solid var(--line);
  padding:16px 30px;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .2s ease, transform .2s ease;
}
.bq-box:hover{border-color:var(--wine); transform:translateY(-2px);}
.bq-box span:first-child{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:11.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.bq-box-sub{
  font-family:'Inter', sans-serif;
  font-size:10px;
  color:var(--ink-faint);
}

/* -- branding, press page: single image, a bit transparent, same dimensions -- */
/* -- branding, closing page: 04.jpg background, a bit transparent, same dimensions -- */
.brand-close{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,3vw,56px);
  overflow:hidden;
  background:var(--paper);
}
.brand-close .label-row{margin-bottom:0;}
.bc-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.55;
  z-index:0;
  pointer-events:none;
}
.brand-close > .label-row,
.brand-close > .footer-copy{
  position:relative;
  z-index:1;
}

/* -- branding, fourth page: two images filling the section as a diptych background -- */
.form-diptych{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,3vw,56px);
  overflow:hidden;
  background:#0d0c08;
}
.fd-images{
  position:absolute;
  inset:0;
  display:flex;
  z-index:0;
}
.fd-images img{
  flex:1 1 50%;
  width:50%;
  height:100%;
  object-fit:cover;
  display:block;
}
.form-diptych > .label-row,
.form-diptych > .fd-caption,
.form-diptych > .footer-copy{
  position:relative;
  z-index:1;
}
.form-diptych .label-row{color:rgba(245,240,230,0.85); margin-bottom:0;}
.form-diptych .wordmark{color:#f5f0e6;}
.form-diptych .nav a{color:rgba(245,240,230,0.7);}
.form-diptych .nav a:hover, .form-diptych .nav a.active{color:#fff;}
.fd-caption{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:8px;
  padding-bottom:8px;
}
.fd-caption span{
  font-family:'Instrument Serif', serif;
  font-style:italic;
  font-size:clamp(20px,2.6vw,30px);
  color:#f5f0e6;
  text-shadow:0 1px 10px rgba(0,0,0,0.4);
}
.fd-caption .fd-note{
  font-family:'Inter', sans-serif;
  font-style:normal;
  font-size:10.5px;
  letter-spacing:0.03em;
  color:rgba(245,240,230,0.65);
}
.form-diptych .footer-copy{color:rgba(245,240,230,0.6); border-top-color:rgba(245,240,230,0.25);}
@media (max-width:700px){
  .fd-images{flex-direction:column;}
  .fd-images img{width:100%; height:50%;}
}

/* ===================================================================
   DETAIL PAGES — Furniture / Jessie's Studio / Hardware
   Same type as the rest of the site (Instrument Serif + Inter).
   Fixed pixel-width layout so all three pages line up identically.
   Full page width — same dimensions as the Interior starting page
   (no boxed card, no dark frame margin).
=================================================================== */
.detail-page{
  min-height:100vh;
  min-height:100dvh;
  padding:clamp(24px,3vw,56px);
  background:var(--paper);
}
.detail-page .label-row{margin-bottom:56px;}
.detail-inner{width:1052px; max-width:100%; margin:0 auto;}
.detail-back{
  display:inline-block;
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--accent, var(--wine));
  text-decoration:none;
  margin-bottom:18px;
}
.detail-back:hover{opacity:0.7;}
.detail-title{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:clamp(30px,3.6vw,42px);
  letter-spacing:-0.005em;
  margin:0 0 40px;
}
.detail-title span{font-style:italic; color:var(--accent, var(--wine));}

/* fixed pixel widths — identical across all three detail pages */
.detail-layout{
  display:grid;
  grid-template-columns:620px 380px;
  gap:52px;
  align-items:start;
  width:1052px;
  max-width:100%;
  margin:0 auto;
}
.detail-hero-img{
  width:620px;
  height:465px;
  object-fit:cover;
  margin-bottom:16px;
}
.detail-caption{
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  line-height:1.8;
  color:var(--ink-soft);
  width:440px;
  max-width:100%;
  margin:0;
}
.detail-caption + .detail-caption{margin-top:16px;}
.detail-side{display:flex; flex-direction:column; width:380px;}
.detail-side-img{width:380px; object-fit:cover; margin-bottom:14px;}
.detail-side-img.offset-1{height:280px; margin-top:64px;}
.detail-side-img.offset-2{height:280px; margin-top:8px;}
.detail-side .detail-caption{margin-bottom:32px; width:auto;}

@media (max-width:1060px){
  .detail-layout{grid-template-columns:1fr; gap:32px;}
  .detail-hero-img{width:100%; height:auto; aspect-ratio:4/3;}
  .detail-side{width:100%;}
  .detail-side-img{width:100%;}
  .detail-side-img.offset-1{margin-top:0; height:auto; aspect-ratio:3/4;}
  .detail-side-img.offset-2{height:auto; aspect-ratio:1/1;}
}

/* ===================================================================
   INTERIOR — page 2, bright red "About Emilio Halperin" section
=================================================================== */
.int-red{
  background:var(--wine);
  color:#fdf1ec;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,3vw,56px);
}
.int-red .label-row{margin-bottom:0; color:rgba(253,241,236,0.75);}
.int-red .wordmark{color:#fdf1ec;}
.int-red .nav a{color:rgba(253,241,236,0.75);}
.int-red .nav a:hover, .int-red .nav a.active{color:#fdf1ec; text-decoration:underline; text-underline-offset:4px;}
.int-red .nav-toggle{color:#fdf1ec; border-color:rgba(253,241,236,0.4);}

.ir-marquee{
  overflow:hidden;
  width:100%;
  margin:clamp(24px,5vh,64px) 0;
}
.ir-marquee-track{
  display:flex;
  width:max-content;
  animation:marqueeLTR 34s linear infinite;
}
.ir-marquee:hover .ir-marquee-track{animation-play-state:paused;}
.ir-marquee-group{display:flex; align-items:baseline; white-space:nowrap;}
.ir-word{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:clamp(40px,8vw,130px);
  line-height:1;
  letter-spacing:-0.01em;
  color:#ffffff;
  padding:0 0.32em;
  white-space:nowrap;
}
.ir-word em{font-style:italic; opacity:0.8;}

.ir-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.ir-marquee-wrap{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
}
.ir-content{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,80px);
  align-items:center;
  min-height:0;
}
.ir-text p{
  font-family:'Inter', sans-serif;
  font-size:clamp(13px,1.1vw,15.5px);
  line-height:1.85;
  color:#ffffff;
  max-width:480px;
  margin:0 0 20px;
}
.ir-photo{
  height:100%;
  max-height:46vh;
  aspect-ratio:1056/1254;
  overflow:hidden;
  margin:0 auto;
}
.ir-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.03);
  display:block;
}

.int-red .footer-copy{
  border-top-color:rgba(253,241,236,0.3);
  color:rgba(253,241,236,0.65);
}

@media (max-width:900px){
  .int-red{min-height:auto;}
  .ir-content{grid-template-columns:1fr; gap:32px;}
  .ir-photo{max-height:50vh;}
  .ir-photo img{max-height:50vh;}
}

/* ===================================================================
   MOBILE — let every full-viewport "desktop target" section size to
   its own content instead of forcing 100dvh, so short content never
   leaves a big empty gap before the footer row.
=================================================================== */
@media (max-width:900px){
  .atelier-catalogue,
  .atelier-grid-section,
  .brand-mark,
  .brand-quote-page,
  .detail-page{
    min-height:auto;
    padding-top:32px;
    padding-bottom:32px;
  }
  .sketch-real-wrap{margin-top:20px;}
  .sketch-real-wrap img{max-height:none;}
  .bq-mid{gap:24px; padding:24px 0;}
}

/* full-bleed background moments keep real height on mobile, just shorter than a full desktop viewport */
@media (max-width:900px){
  .atelier-video, .atelier-pampa, .brand-close, .brand-press, .form-diptych{
    min-height:70vh;
  }
}