/* dian bronz: one stylesheet, five pages, four moods.
   Each page sets a theme on <body>: night (home, art), linen (interiors), cream (about), teal (contact).
   Motion lives in main.js and is switched off for anyone who asks their device for less of it. */

@view-transition { navigation: auto; }

:root {
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --coral: #E0644A; --ochre: #C9A15B; --teal: #2F5E62;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pad: clamp(20px, 4vw, 56px);
}
body.night { --bg: #0F0D0C; --bg2: #171412; --ink: #F3ECE4; --soft: #C9BEB3; --muted: #8F857B; --line: rgba(243,236,228,.12); --accent: var(--coral); }
body.linen { --bg: #EFE7DC; --bg2: #E6DCCF; --ink: #221C17; --soft: #4A4038; --muted: #7D7166; --line: rgba(34,28,23,.14); --accent: #B5532F; }
body.cream { --bg: #F6F1EA; --bg2: #EDE5DA; --ink: #1B1714; --soft: #463D36; --muted: #857A70; --line: rgba(27,23,20,.13); --accent: #9C6B2F; }
body.teal  { --bg: #173A3D; --bg2: #1E474B; --ink: #F1EDE6; --soft: #CBD8D5; --muted: #93ADA9; --line: rgba(241,237,230,.16); --accent: #E8A15A; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: var(--pad); }
.serif { font-family: var(--serif); }
.eyebrow { font: 600 11.5px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; }
.muted { color: var(--muted); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -.012em; margin: 0; }
h2 { font-size: clamp(40px, 6vw, 86px); }
h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; }
em { font-style: italic; color: var(--accent); }
p { margin: 0 0 1em; }

/* ── film grain over everything, very faint ── */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
body.linen::after, body.cream::after { opacity: .05; }
@keyframes grain { 0%,100% { transform: translate(0,0) } 20% { transform: translate(-3%,2%) } 40% { transform: translate(2%,-3%) } 60% { transform: translate(-2%,-1%) } 80% { transform: translate(3%,3%) } }

/* ── header ── */
.site-head { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .5s var(--ease), transform .5s var(--ease); }
.site-head.solid { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head.away { transform: translateY(-100%); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.logo { font: 500 27px/1 var(--serif); text-decoration: none; letter-spacing: .01em; }
.logo b { font-weight: 500; color: var(--ochre); }
.nav { display: flex; gap: 34px; }
.nav a { position: relative; font: 600 11.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--soft); padding: 6px 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current] { color: var(--ink); }
.menu-btn { display: none; background: none; border: 0; color: var(--ink); font: 600 11.5px var(--sans); letter-spacing: .26em; text-transform: uppercase; cursor: pointer; padding: 10px 0; }
@media (max-width: 820px) {
  .nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 6px; padding: var(--pad); background: var(--bg); clip-path: circle(0 at calc(100% - 40px) 40px); transition: clip-path .8s var(--ease); }
  .nav.open { clip-path: circle(150% at calc(100% - 40px) 40px); }
  .nav a { font: 400 clamp(44px, 12vw, 64px)/1.15 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .nav.open a { opacity: 1; transform: none; }
  .nav.open a:nth-child(2) { transition-delay: .06s } .nav.open a:nth-child(3) { transition-delay: .12s } .nav.open a:nth-child(4) { transition-delay: .18s } .nav.open a:nth-child(5) { transition-delay: .24s }
  .nav a::after { display: none; }
  .menu-btn { display: block; position: relative; z-index: 2; }
}

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 17px 30px; border: 1px solid currentColor; border-radius: 999px; font: 600 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s; will-change: transform; }
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.solid:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── cursor (fine pointers only; main.js adds it) ── */
.cursor { position: fixed; top: 0; left: 0; z-index: 100; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); mix-blend-mode: difference; pointer-events: none; display: grid; place-items: center; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .4s; }
.cursor span { font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .3s; }
.cursor.big { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: #fff; }
.cursor.big span { opacity: 1; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ── reveals ── */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease); }
[data-reveal="clip"].in { clip-path: inset(0 0 0 0); }
[data-reveal="clip"] img { transform: scale(1.25); transition: transform 2.2s var(--ease); }
[data-reveal="clip"].in img { transform: scale(1); }
.split .ch { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease); }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .02em .16em; margin: -.12em -.02em -.16em; }
.split.in .ch { transform: none; }

/* ── marquee ── */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 26px 0; white-space: nowrap; }
.marquee .track { display: inline-flex; gap: 60px; animation: marquee 38s linear infinite; }
.marquee span { font: italic 400 clamp(34px, 5vw, 66px)/1 var(--serif); }
.marquee span i { font-style: normal; color: var(--accent); margin-left: 60px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── sections ── */
section { position: relative; }
.pad { padding-block: clamp(90px, 13vw, 180px); }
.section-head { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 40px; align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.section-head p { color: var(--soft); margin: 0; }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; gap: 18px; } }

/* ═══════════ HOME ═══════════ */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; display: grid; align-items: end; }
.kb { position: absolute; inset: 0; }
.kb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.18); transition: opacity 2.4s ease; }
.kb img.on { opacity: 1; animation: kb 9s linear forwards; }
@keyframes kb { from { transform: scale(1.18) translate(1.5%, 1%); } to { transform: scale(1.02) translate(-1.5%, -1%); } }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 30% 60%, rgba(15,13,12,.15), rgba(15,13,12,.75) 75%), linear-gradient(to top, rgba(15,13,12,.95), rgba(15,13,12,0) 55%); }
.hero::after { content: ''; position: absolute; inset: 0 0 auto; height: 9vh; z-index: 1; background: linear-gradient(#0F0D0C, transparent); }
.hero-in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(40px, 8vh, 90px); }
.hero h1 { font-size: clamp(76px, 15vw, 230px); line-height: .84; letter-spacing: -.035em; }
.hero h1 .b { color: var(--ochre); font-style: italic; }
.hero-row { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 34px; flex-wrap: wrap; }
.hero-row p { max-width: 34ch; color: var(--soft); font-size: 18px; margin: 0; }
.hero-caption { position: absolute; z-index: 2; right: var(--pad); top: 110px; font: italic 400 17px var(--serif); color: var(--soft); writing-mode: vertical-rl; transform: rotate(180deg); }
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 22px; width: 1px; height: 54px; background: linear-gradient(var(--ink), transparent); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } 51% { transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

.intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); align-items: center; }
.intro .big { font: 400 clamp(34px, 4.2vw, 60px)/1.14 var(--serif); margin: 0; }
.intro .pic { position: relative; }
.intro .pic img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.intro .pic .tag { position: absolute; left: -28px; bottom: 34px; background: var(--bg); padding: 16px 22px; font: italic 400 19px var(--serif); }
@media (max-width: 820px) { .intro { grid-template-columns: 1fr; } .intro .pic .tag { left: 0; } }

.worlds { display: flex; height: 88vh; min-height: 560px; gap: 6px; }
.world { position: relative; flex: 1; overflow: hidden; text-decoration: none; transition: flex 1.1s var(--ease); }
.world:hover { flex: 1.55; }
.world img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease), filter 1s; filter: brightness(.62) saturate(.9); }
.world:hover img { transform: scale(1); filter: brightness(.8) saturate(1.05); }
.world .label { position: absolute; left: clamp(22px, 3vw, 44px); right: 22px; bottom: clamp(26px, 4vw, 52px); }
.world .num { font: 600 11.5px var(--sans); letter-spacing: .3em; color: var(--ochre); }
.world h3 { font-size: clamp(46px, 6vw, 96px); margin: 10px 0 12px; }
.world p { max-width: 32ch; color: var(--soft); margin: 0; opacity: .0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.world:hover p { opacity: 1; transform: none; }
@media (max-width: 760px) { .worlds { flex-direction: column; height: auto; } .world { height: 72vh; } .world p { opacity: 1; transform: none; } }

/* horizontal pinned gallery (home + art) */
.hscroll { position: relative; }
.hscroll .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.hscroll .track { display: flex; gap: clamp(24px, 4vw, 70px); padding-inline: var(--pad); will-change: transform; align-items: center; }
.hscroll .lead { flex: 0 0 min(420px, 80vw); }
.plate { flex: 0 0 auto; margin: 0; }
.plate img { height: min(68vh, 760px); width: auto; box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.plate figcaption { display: flex; justify-content: space-between; gap: 20px; margin-top: 16px; font: 400 23px var(--serif); }
.plate figcaption small { font: 600 11px var(--sans); letter-spacing: .26em; color: var(--muted); padding-top: 8px; }
.progress { position: absolute; left: var(--pad); right: var(--pad); bottom: 40px; height: 1px; background: var(--line); }
.progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
@media (max-width: 760px) {
  .hscroll { height: auto !important; } .hscroll .sticky { position: static; height: auto; display: block; padding-block: 40px; }
  .hscroll .track { flex-direction: column; transform: none !important; align-items: stretch; } .plate img { width: 100%; height: auto; } .progress { display: none; }
}

.quote { text-align: center; }
.quote blockquote { margin: 0 auto; max-width: 18ch; font: italic 400 clamp(44px, 7vw, 108px)/1.02 var(--serif); }
.quote cite { display: block; margin-top: 30px; font: 600 11.5px var(--sans); font-style: normal; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); }

.offer { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.offer a { padding: 34px 26px 40px 0; border-right: 1px solid var(--line); text-decoration: none; min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; transition: padding .6s var(--ease); }
.offer a:last-child { border-right: 0; }
.offer a + a { padding-left: 26px; }
.offer a:hover { padding-top: 22px; }
.offer .n { font: 600 11.5px var(--sans); letter-spacing: .3em; color: var(--accent); }
.offer h3 { margin-top: 60px; }
.offer p { color: var(--soft); font-size: 15px; margin: 12px 0 0; }
@media (max-width: 900px) { .offer { grid-template-columns: 1fr 1fr; } .offer a { border-bottom: 1px solid var(--line); } .offer a:nth-child(2n) { border-right: 0; } .offer a:nth-child(2n+1) { padding-left: 0; } }
@media (max-width: 520px) { .offer { grid-template-columns: 1fr; } .offer a { border-right: 0; padding-left: 0 !important; min-height: 0; } .offer h3 { margin-top: 24px; } }

.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band .bgimg { position: absolute; inset: -15% 0; }
.cta-band .bgimg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.35); }
.cta-band .in { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 30px; }
.cta-band .btns { justify-content: center; }

/* ═══════════ ART ═══════════ */
.page-hero { padding-top: clamp(140px, 20vh, 220px); padding-bottom: clamp(50px, 8vw, 100px); }
.page-hero h1 { font-size: clamp(64px, 11vw, 170px); line-height: .9; letter-spacing: -.03em; }
.page-hero .sub { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-top: 30px; border-top: 1px solid var(--line); padding-top: 22px; color: var(--soft); }
.page-hero .sub p { max-width: 46ch; margin: 0; }

.museum { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2.4vw, 36px); align-items: start; }
.museum figure { margin: 0; cursor: zoom-in; }
.museum img { width: 100%; }
.museum figcaption { margin-top: 14px; font: 400 21px var(--serif); display: flex; justify-content: space-between; }
.museum figcaption small { font: 600 11px var(--sans); letter-spacing: .26em; color: var(--muted); padding-top: 6px; }
.m1 { grid-column: 1 / span 6; } .m2 { grid-column: 8 / span 5; margin-top: 18vh !important; }
.m3 { grid-column: 2 / span 4; } .m4 { grid-column: 7 / span 6; margin-top: 10vh !important; }
@media (max-width: 760px) { .museum { grid-template-columns: 1fr; } .museum figure { grid-column: auto !important; margin-top: 0 !important; } }

.detail { position: relative; height: 120vh; overflow: hidden; }
.detail img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
.detail .over { position: absolute; inset: auto var(--pad) 10vh; z-index: 1; max-width: 640px; }
.detail .over p { font: italic 400 clamp(28px, 3.4vw, 46px)/1.2 var(--serif); margin: 0; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.detail::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,13,12,.8), transparent 50%); }

.paper { background: #EDE6DD; color: #1E1A17; --ink: #1E1A17; --soft: #4F463F; --muted: #7D7166; --line: rgba(30,26,23,.14); --accent: #B5532F; }
.rooms { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.rooms figure { margin: 0; overflow: hidden; cursor: zoom-in; }
.rooms img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.rooms figure:hover img { transform: scale(1.04); }
.rooms .tall { grid-row: span 2; }
@media (max-width: 760px) { .rooms { grid-template-columns: 1fr 1fr; } .rooms .tall { grid-column: 1 / -1; } }

/* lightbox */
.lb { border: 0; padding: 0; background: transparent; width: 100vw; height: 100vh; max-width: none; max-height: none; }
.lb::backdrop { background: rgba(10, 8, 7, .95); }
.lb .stage { height: 100%; display: grid; place-items: center; padding: 60px 70px 90px; }
.lb img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; animation: lbin .6s var(--ease); }
@keyframes lbin { from { opacity: 0; transform: scale(.96); } }
.lb p { position: fixed; left: 0; right: 0; bottom: 30px; text-align: center; font: italic 400 22px var(--serif); color: #F3ECE4; margin: 0; }
.lb button { position: fixed; background: none; border: 0; color: #F3ECE4; font: 300 40px/1 var(--sans); cursor: pointer; padding: 14px; }
.lb .x { top: 14px; right: 18px; } .lb .prev { left: 10px; top: 50%; transform: translateY(-50%); } .lb .next { right: 10px; top: 50%; transform: translateY(-50%); }

/* ═══════════ INTERIORS ═══════════ */
.int-hero { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 100svh; }
.int-hero .copy { display: flex; flex-direction: column; justify-content: end; padding: 140px var(--pad) clamp(40px, 8vh, 90px); }
.int-hero h1 { font-size: clamp(58px, 8vw, 128px); line-height: .92; letter-spacing: -.03em; margin-bottom: 28px; }
.int-hero .copy p { max-width: 40ch; color: var(--soft); font-size: 18px; }
.int-hero .pics { position: relative; }
.int-hero .pics .main { position: absolute; inset: 0; overflow: hidden; }
.int-hero .pics .main img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.int-hero .pics .float { z-index: 2; }
.int-hero .pics .float { position: absolute; inset: auto auto 8% -12%; width: 46%; height: auto; aspect-ratio: 4/5; object-fit: cover; box-shadow: 0 30px 70px rgba(34,28,23,.35); border: 10px solid var(--bg); }
@media (max-width: 900px) { .int-hero { grid-template-columns: 1fr; } .int-hero .pics { height: 78vh; order: -1; } .int-hero .pics .float { left: auto; right: 6%; width: 42%; } .int-hero .copy { padding-top: 50px; } }

.services { counter-reset: s; }
.service { position: sticky; top: 90px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); background: var(--bg); border-top: 1px solid var(--line); padding: clamp(36px, 5vw, 60px) 0; min-height: 70vh; }
.service:nth-child(2) { top: 110px; } .service:nth-child(3) { top: 130px; } .service:nth-child(4) { top: 150px; }
.service .n { font: italic 400 22px var(--serif); color: var(--accent); }
.service h3 { font-size: clamp(38px, 4.6vw, 70px); line-height: 1; margin: 14px 0 24px; }
.service p { color: var(--soft); max-width: 44ch; }
.service ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.service li { display: flex; gap: 14px; align-items: baseline; font-size: 15.5px; }
.service li::before { content: ''; width: 18px; height: 1px; background: var(--accent); flex: 0 0 auto; transform: translateY(-4px); }
.service .img { overflow: hidden; border-radius: 4px; }
.service .img img { width: 100%; height: 100%; max-height: 62vh; object-fit: cover; }
@media (max-width: 820px) { .service { position: static; grid-template-columns: 1fr; min-height: 0; } .service .img img { max-height: 60vh; } }

.make { background: #221C17; color: #EFE7DC; --ink: #EFE7DC; --soft: #CDBFB1; --muted: #9A8D80; --line: rgba(239,231,220,.14); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step figure { margin: 0 0 18px; overflow: hidden; }
.step img { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform 1.4s var(--ease); }
.step:hover img { transform: scale(1.05); }
.step b { font: italic 400 20px var(--serif); color: var(--ochre); }
.step p { color: var(--soft); font-size: 15px; margin-top: 8px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }

.reel { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--pad) 30px; scrollbar-width: thin; cursor: grab; }
.reel::-webkit-scrollbar { height: 4px; } .reel::-webkit-scrollbar-thumb { background: var(--accent); }
.reel figure { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.reel img { height: min(60vh, 560px); width: auto; pointer-events: none; }
.reel figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.project { padding-block: clamp(60px, 8vw, 110px); border-top: 1px solid var(--line); }
.project .wrap { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 34px; flex-wrap: wrap; }
.project h3 { font-size: clamp(40px, 5vw, 76px); }
.project .wrap p { max-width: 40ch; color: var(--soft); margin: 0; }

.ba { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ba figure { margin: 0; cursor: zoom-in; overflow: hidden; }
.ba img { width: 100%; transition: transform 1.2s var(--ease); }
.ba figure:hover img { transform: scale(1.03); }
@media (max-width: 760px) { .ba { grid-template-columns: 1fr; } }

.shop { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 14vw, 210px); grid-auto-flow: dense; gap: 14px; }
.shop figure { margin: 0; overflow: hidden; }
.shop img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.shop figure:hover img { transform: scale(1.06) rotate(.5deg); }
.shop .w2 { grid-column: span 2; grid-row: span 2; }
@media (max-width: 820px) { .shop { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; } }

/* ═══════════ ABOUT ═══════════ */
.about-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: end; padding-top: clamp(130px, 18vh, 200px); }
.about-hero h1 { font-size: clamp(70px, 12vw, 190px); line-height: .82; letter-spacing: -.04em; }
.about-hero h1 .acc { display: block; font-style: italic; color: var(--accent); padding-left: .6em; }
.about-hero .portrait img { width: 100%; filter: grayscale(1) contrast(1.05); }
@media (max-width: 820px) { .about-hero { grid-template-columns: 1fr; } }
.manifesto { columns: 2; column-gap: clamp(30px, 5vw, 80px); font-size: 18px; color: var(--soft); }
.manifesto p:first-child::first-letter { float: left; font: 400 96px/.8 var(--serif); color: var(--accent); padding: 8px 12px 0 0; }
@media (max-width: 760px) { .manifesto { columns: 1; } }
.words { display: flex; flex-wrap: wrap; gap: 4px 34px; justify-content: center; }
.words span { font: 400 clamp(40px, 6vw, 90px)/1.1 var(--serif); color: var(--ink); transition: color .4s, font-style .4s; }
.words span:hover { color: var(--accent); font-style: italic; }
.timeline { border-top: 1px solid var(--line); }
.timeline li { list-style: none; display: grid; grid-template-columns: 200px 1fr auto; gap: 30px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.timeline ol { padding: 0; margin: 0; }
.timeline time { font: 600 11.5px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.timeline h3 { font-size: clamp(28px, 3vw, 42px); }
.timeline .where { color: var(--muted); }
@media (max-width: 760px) { .timeline li { grid-template-columns: 1fr; gap: 6px; } }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.duo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* ═══════════ CONTACT ═══════════ */
.contact-hero { min-height: 100svh; display: grid; grid-template-columns: 1.1fr .9fr; }
.contact-hero .copy { padding: 150px var(--pad) 70px; display: flex; flex-direction: column; justify-content: center; }
.contact-hero h1 { font-size: clamp(60px, 9vw, 150px); line-height: .9; letter-spacing: -.035em; margin-bottom: 30px; }
.contact-hero .pic { position: relative; overflow: hidden; }
.contact-hero .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ways { margin-top: 50px; border-top: 1px solid var(--line); }
.ways a { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 400 clamp(30px, 3.4vw, 48px)/1 var(--serif); transition: padding .6s var(--ease), color .4s; }
.ways a:hover { padding-left: 18px; color: var(--accent); }
@media (max-width: 520px) { .ways a { flex-direction: column; align-items: flex-start; gap: 8px; } }
.ways a small { font: 600 11px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.ask { margin-top: 44px; color: var(--soft); }
.ask ul { padding-left: 18px; margin: 10px 0 0; }
@media (max-width: 900px) { .contact-hero { grid-template-columns: 1fr; } .contact-hero .pic { height: 60vh; order: -1; } .contact-hero .copy { padding-top: 50px; } }

/* ── footer ── */
.site-foot { border-top: 1px solid var(--line); padding: 70px 0 40px; }
.site-foot .big { font: 400 clamp(64px, 14vw, 220px)/.8 var(--serif); letter-spacing: -.04em; margin: 0 0 40px; }
.site-foot .big b { font-weight: 400; font-style: italic; color: var(--ochre); }
.site-foot .row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.site-foot .row a { text-decoration: none; margin-right: 22px; }
.site-foot .row a:hover { color: var(--ink); }

/* ── less motion, on request ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], [data-reveal="clip"], .split .ch { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .kb img.on { transform: none; }
  body::after { display: none; }
}