/* Lungarno Collection — the family. Shared by every house page of "The Collection" proposal.
   Constants of the family: Cormorant (light) + Figtree, the three-petal mark, BOOK NOW top right,
   the cinematic hero with film grain, captions like museum labels with roman numerals, the room
   catalogue, the contact block. Each house only changes its palette and one signature section
   (see the --accent / --paper / --ink variables set on <body class="house-…">). */
:root {
  --paper: #f8f6f2; --paper-2: #efebe4; --ink: #1d1c1a; --text: #2f2f2f; --soft: rgba(47,47,47,.6);
  --rule: rgba(29,28,26,.16); --accent: #9a0b0e; --on-accent: #fff; --night: #141311;
  --display: "Cormorant", Garamond, serif; --text-f: "Figtree", system-ui, sans-serif;
  --ease: cubic-bezier(.22,.8,.24,1); --g: clamp(16px, 4vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--text-f); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.caps { font-family: var(--text-f); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.soft { color: var(--soft); }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--g); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h2.title { font-family: var(--display); font-weight: 300; font-size: clamp(42px, 5.4vw, 92px); line-height: .98; color: var(--ink); margin: 14px 0 0; letter-spacing: -.005em; }

/* Header */
header.top { position: fixed; z-index: 50; inset: 0 0 auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px var(--g); color: #fff; transition: background .5s var(--ease), color .5s var(--ease); }
header.top.solid { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule); }
header.top .back { text-decoration: none; display: flex; align-items: center; gap: 12px; }
header.top .back img { width: 28px; filter: brightness(0) invert(1); transition: filter .5s; }
header.top.solid .back img { filter: none; }
header.top .name { font-family: var(--display); font-size: 22px; opacity: 0; transition: opacity .5s; }
header.top.solid .name { opacity: 1; }
.book { justify-self: end; text-decoration: none; padding: 12px 22px; background: var(--accent); color: var(--on-accent); }
.subnav { position: sticky; top: 71px; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--rule); }
.subnav ul { list-style: none; margin: 0 auto; padding: 14px var(--g); display: flex; gap: 32px; max-width: 1440px; overflow-x: auto; scrollbar-width: none; }
.subnav a { text-decoration: none; white-space: nowrap; }
@media (max-width: 760px) { header.top .name { display: none; } }

/* Cinematic hero: film (or photograph with a slow push), grain, a gentle grade. */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: #fff; background: var(--night); }
.hero .media, .hero .media video, .hero .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .media { filter: contrast(1.06) saturate(.9); }
.hero .media.push img { animation: push 24s ease-out both; }
@keyframes push { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 46% 30% at 50% 50%, rgba(0,0,0,.34), transparent 72%), radial-gradient(ellipse 70% 60% at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%), linear-gradient(180deg, rgba(0,0,0,.38), transparent 24%, transparent 68%, rgba(0,0,0,.55)); }
.grain { position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .14; mix-blend-mode: overlay; background-size: 220px 220px; }
.hero .inner { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 var(--g); }
.hero .logo { width: clamp(220px, 26vw, 380px); margin: 0 auto; }
.hero .wordmark { text-shadow: 0 2px 40px rgba(0,0,0,.4); font-family: var(--display); font-weight: 300; font-size: clamp(56px, 8.6vw, 148px); line-height: .9; margin: 0; letter-spacing: -.01em; }
.hero .city { font-family: var(--display); font-weight: 300; font-style: italic; font-size: clamp(30px, 3.6vw, 56px); margin: 12px 0 0; line-height: 1; }
.hero .cap { position: absolute; z-index: 3; left: var(--g); right: var(--g); bottom: 20px; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: rgba(255,255,255,.78); }
.hero .film-toggle { background: none; border: 0; color: #fff; font: inherit; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.45); padding: 2px 0; }
@media (max-width: 760px) { .hero .cap { flex-direction: column; } }

/* Intro and facts */
.intro { padding: clamp(100px, 12vw, 190px) 0 clamp(60px, 7vw, 110px); }
.intro .grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 90px); align-items: end; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); margin-top: clamp(56px, 6vw, 96px); }
.facts div { padding: 22px 18px 0 0; }
.facts b { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(36px, 4vw, 64px); line-height: 1; color: var(--ink); }
.facts span { display: block; margin-top: 8px; font-size: 14px; color: var(--soft); }
@media (max-width: 860px) { .intro .grid { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr 1fr; row-gap: 24px; } }

.recognition { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.recognition ul { list-style: none; margin: 0; padding: 26px 0; display: flex; flex-wrap: wrap; gap: 14px 46px; justify-content: space-between; }
.recognition li { font-size: 14px; color: var(--soft); }
.recognition li b { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.15; }

/* The catalogue: rooms read like captions in a gallery. */
.rooms { padding: clamp(100px, 12vw, 180px) 0; }
.rooms-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; margin-bottom: clamp(40px, 5vw, 70px); }
.catalogue { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.index li { border-bottom: 1px solid var(--rule); }
.index button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 3.4ch 1fr auto; gap: 14px; align-items: baseline; width: 100%; padding: 14px 0; }
.index button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.index .n { font-family: var(--display); font-size: 18px; color: var(--soft); }
.index .nm { font-family: var(--display); font-size: clamp(21px, 1.8vw, 29px); line-height: 1.12; color: var(--ink); transition: color .3s, transform .5s var(--ease); }
.index .tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); text-align: right; }
.index button[aria-current="true"] .nm { color: var(--accent); transform: translateX(8px); }
.viewer { position: sticky; top: 140px; margin: 0; }
.viewer .pic { background: var(--paper-2); aspect-ratio: 4 / 3; overflow: hidden; }
.viewer img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease); }
.viewer img.fade { opacity: 0; }
.viewer figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; }
.viewer figcaption b { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 28px; color: var(--ink); }
.viewer figcaption a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--accent); align-self: end; padding-bottom: 2px; white-space: nowrap; }
@media (max-width: 860px) { .rooms-head, .catalogue { grid-template-columns: 1fr; } .viewer { position: static; order: -1; } }

/* An exhibition hang of photographs, with labels */
.hang { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 28px); margin-top: clamp(40px, 5vw, 70px); align-items: start; }
.hang figure { margin: 0; }
.hang img { width: 100%; object-fit: cover; }
.hang figcaption { font-size: 13px; color: var(--soft); margin-top: 10px; }
.h1 { grid-column: 1 / span 6; } .h1 img { aspect-ratio: 4 / 3; }
.h2 { grid-column: 8 / span 5; margin-top: 10vw; } .h2 img { aspect-ratio: 4 / 5; }
.h3 { grid-column: 3 / span 5; margin-top: 4vw; } .h3 img { aspect-ratio: 3 / 2; }
@media (max-width: 860px) { .hang { grid-template-columns: 1fr; row-gap: 32px; } .hang figure { grid-column: 1 !important; margin-top: 0 !important; } }

/* Split: picture + text */
.split { padding: clamp(90px, 11vw, 170px) 0; }
.split .grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.split.flip .grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split.flip .grid > :first-child { order: 2; }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split .line { font-size: 14px; color: var(--soft); margin-top: 20px; }
@media (max-width: 860px) { .split .grid, .split.flip .grid { grid-template-columns: 1fr; } .split.flip .grid > :first-child { order: 0; } }

/* Dining list */
.dining { padding: clamp(90px, 11vw, 160px) 0; }
.dining ul { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.dining li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.dining .nm { font-family: var(--display); font-size: clamp(30px, 3.2vw, 50px); line-height: 1; color: var(--ink); }
.dining p { margin: 0; color: var(--text); max-width: 58ch; }
@media (max-width: 760px) { .dining li { grid-template-columns: 1fr; gap: 6px; } }

/* Contacts */
.contact { padding: clamp(90px, 11vw, 160px) 0; border-top: 1px solid var(--rule); }
.contact .grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.contact dl { margin: 0; border-top: 1px solid var(--rule); }
.contact dl div { display: grid; grid-template-columns: 12ch 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.contact dt { color: var(--soft); font-size: 14px; }
.contact dd { margin: 0; }
.contact .row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.contact .row a { text-decoration: none; padding: 14px 26px; border: 1px solid var(--ink); }
.contact .row a.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (max-width: 860px) { .contact .grid { grid-template-columns: 1fr; } }

/* Walk the collection: previous / next house */
.walk { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.walk a { text-decoration: none; padding: 34px var(--g); display: block; }
.walk a + a { text-align: right; border-left: 1px solid var(--rule); }
.walk .no { font-family: var(--display); color: var(--soft); font-size: 18px; }
.walk .nm { display: block; font-family: var(--display); font-style: italic; font-size: clamp(26px, 2.6vw, 40px); color: var(--ink); line-height: 1.1; }
footer { padding: 30px 0 70px; font-size: 13px; color: var(--soft); border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}
/* Long e-mail addresses must wrap on phones instead of widening the page. */
.contact .grid > * { min-width: 0; }
.contact dl div { grid-template-columns: 12ch minmax(0, 1fr); }
.contact dd { overflow-wrap: anywhere; }