/* P&P Property Prestige — homepage */
@font-face { font-family: "Cormorant Garamond"; src: url(fonts/cormorant.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Jost"; src: url(fonts/jost.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  /* brand palette */
  --ink: #1C1410;
  --soft: #5E4A3C;
  --walnut: #8B5E3C;
  --walnut-deep: #6F4A2F;
  --oak: #C49A6C;
  --cream: #E8DCCB;
  --bg: #F8F6F3;
  --paper: #EFEAE3;    /* surface step */
  --on-dark: #FFFCF7;  /* text on walnut, ink and photographs */

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --text: "Jost", "Gill Sans", Helvetica, Arial, sans-serif;

  /* five size steps */
  --s1: 14px;
  --s2: 17px;
  --s3: clamp(26px, 2.5vw, 36px);
  --s4: clamp(40px, 4.6vw, 68px);
  --s5: clamp(64px, 14.5vw, 240px);

  --m: 5vw;            /* page margin */
  --gap: 2vw;          /* column gap */
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--s2)/1.55 var(--text);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin: 0; }
p { margin: 0; }
::selection { background: var(--walnut); color: var(--on-dark); }
:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }
input, textarea, select { caret-color: var(--walnut); accent-color: var(--walnut); }
html { scrollbar-color: var(--oak) var(--bg); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: 0 var(--m); }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--walnut); color: var(--on-dark); text-decoration: none;
  font: 500 var(--s1)/1 var(--text); letter-spacing: 0.01em;
  padding: 13px 20px; border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .25s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--walnut-deep); }
.btn:active { transform: scale(.97); }
.btn-lg { font-size: var(--s2); padding: 17px 24px; width: 100%; }
.link {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--oak);
  text-underline-offset: 5px; text-decoration-thickness: 2px;
  transition: text-decoration-color .25s var(--ease), color .25s var(--ease);
}
.link:hover { text-decoration-color: var(--walnut); color: var(--walnut-deep); }
.soft { color: var(--soft); font-size: var(--s1); }

/* ---------- bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px var(--m); font-size: var(--s2);
}
.wordmark { font: 500 var(--s3)/1 var(--display); text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; }
.wordmark span { font-weight: 400; color: var(--soft); }
.bar-links { display: flex; gap: 32px; }
.bar-links a { text-decoration: none; position: relative; padding: 6px 0; }
.bar-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--walnut);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.bar-links a:hover::after { transform: scaleX(1); }
.bar-end { display: flex; align-items: center; gap: 18px; }
.lang { display: flex; gap: 2px; }
.lang button {
  background: none; border: 0; cursor: pointer; font: 500 var(--s1)/1 var(--text);
  color: var(--soft); padding: 8px 6px; transition: color .2s;
}
.lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--walnut); }
.lang button:hover { color: var(--walnut); }

/* ---------- hero: three prints on a rail ---------- */
.hero {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  padding: 7vh 0 0 var(--m); align-items: start;
  grid-template-rows: auto 1fr;
}
.print figcaption { font-size: var(--s1); color: var(--soft); margin-top: 12px; }
.print-sq { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 1; }
.print-sq img { width: 100%; height: 100%; object-fit: cover; }
.print-tall { grid-column: 4 / 10; grid-row: 1 / 3; }
.print-tall .shutter { aspect-ratio: 4 / 5; max-height: calc(100svh - 150px); width: 100%; overflow: hidden; }
.print-tall img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.print-wide { grid-column: 10 / 13; grid-row: 1 / 3; margin-top: 120px; }
.print-wide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hero-text { grid-column: 1 / 4; grid-row: 2; margin-top: 32px; }
.hero h1 { font-size: var(--s3); line-height: 1.04; font-weight: 400; }
.hero-text p { margin-top: 14px; color: var(--ink); max-width: 30ch; }
.search {
  grid-column: 1 / 4; grid-row: 3; align-self: start; margin-top: 28px;
  display: grid; grid-template-columns: 1fr; gap: 12px;
  background: var(--paper); padding: 20px;
}
.search label { min-width: 0; }
.search label, .search .guests { display: flex; flex-direction: column; gap: 6px; font-size: var(--s1); color: var(--soft); }
.search .guests { flex-direction: row; align-items: center; justify-content: space-between; }
.search input {
  font: 400 16px/1.2 var(--text); color: var(--ink); background: var(--bg);
  border: 1px solid var(--cream); border-radius: 0; padding: 11px 10px; width: 100%; min-width: 0; min-height: 46px; -webkit-appearance: none; appearance: none;
}
.search input:focus { border-color: var(--walnut); outline: none; }
.search .btn { grid-column: 1 / -1; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
  width: 44px; height: 44px; border: 0; background: var(--bg); color: var(--ink);
  font: 400 22px/1 var(--text); cursor: pointer; transition: background-color .2s, transform .15s;
}
.stepper button:hover { background: var(--cream); }
.stepper button:active { transform: scale(.92); }
.stepper output { min-width: 36px; text-align: center; font: 500 var(--s2)/1 var(--text); color: var(--ink); }

/* ---------- showcase: band of unequal panels ---------- */
.showcase { padding-top: 180px; }
.showcase h2 { font-size: var(--s4); padding-left: calc(var(--m) + (100vw - 2 * var(--m) + var(--gap)) / 12 * 2); margin-bottom: 64px; }
.band { display: flex; height: 68svh; min-height: 420px; }
.panel { position: relative; flex: var(--g) 1 0; overflow: hidden; transition: flex-grow .5s var(--ease); }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.panel:hover img { transform: scale(1.04); }
@media (hover: hover) { .band:hover .panel:hover { flex-grow: 6; } }
.panel-title {
  position: absolute; left: 0; top: 0; padding: 24px 64px 64px 24px;
  font: 400 var(--s3)/1.08 var(--display); color: var(--on-dark);
  background: radial-gradient(120% 120% at 0 0 /* taste-skill-ignore: scrim over photo */, rgba(20, 14, 10, .82), rgba(20, 14, 10, .45) 45%, rgba(20, 14, 10, 0) 75%);
}
.band-cap { margin: 18px var(--m) 0; max-width: 60ch; }

/* ---------- register ---------- */
.register { padding: 200px var(--m) 0; }
.register h2 { font-size: var(--s4); line-height: .98; text-indent: 3vw; max-width: 14ch; }
.reg-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); margin-top: 96px; align-items: end; }
.reg-photo { grid-column: 1 / 5; align-self: end; }
.reg-photo img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: 30% 50%; }
.reg-body { grid-column: 6 / 13; }
.reg-status { color: var(--soft); font-size: var(--s1); margin-bottom: 28px; min-height: 1.5em; }
.reg-status b { color: var(--ink); font-weight: 500; }
.rows { list-style: none; margin: 0; padding: 0; }
.row a {
  display: grid; grid-template-columns: 34% 1fr auto; gap: 16px; align-items: baseline;
  text-decoration: none; padding: 13px 12px; margin: 0 -12px;
  transition: background-color .25s var(--ease);
}
.row a:hover { background: var(--paper); }
.row.gap { margin-top: 32px; }
.row[hidden] { display: none; }
.r-addr { color: var(--soft); }
.r-addr b { color: var(--ink); font-weight: 500; }
.r-mid { display: flex; flex-direction: column; }
.r-name { font: 500 var(--s3)/1.05 var(--display); font-size: min(var(--s3), 28px); }
.r-meta { font-size: var(--s1); color: var(--soft); margin-top: 3px; }
.r-price { text-align: right; white-space: nowrap; }
.r-price em { display: block; font-style: normal; font-size: var(--s1); color: var(--soft); }
.r-price i { font-style: normal; display: inline-block; margin-left: 10px; color: var(--walnut); transition: transform .3s var(--ease); }
.row a:hover i { transform: translateX(5px); }
.row.too-small { opacity: .38; }

/* ---------- the stay: diagonal ---------- */
.stay { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: 220px var(--m) 0; }
.stay h2 { grid-column: 7 / 13; grid-row: 1; font-size: var(--s4); font-weight: 300; align-self: start; }
.stage { display: contents; }
.stage p { max-width: 36ch; }
.stage b { font-weight: 500; }
.s1 img { grid-column: 1 / 5; grid-row: 1 / 3; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.s1 p { grid-column: 5 / 8; grid-row: 2; align-self: start; padding-top: 140px; }
.s2 img { grid-column: 6 / 9; grid-row: 3; aspect-ratio: 1; object-fit: cover; width: 100%; margin-top: 120px; }
.s2 p { grid-column: 9 / 12; grid-row: 3; margin-top: 120px; }
.s3 img { grid-column: 8 / 13; grid-row: 4; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; margin-top: 140px; }
.s3 p { grid-column: 4 / 8; grid-row: 4; margin-top: 140px; justify-self: end; }

/* ---------- owners ---------- */
.owners { padding: 220px var(--m) 0; }
.owners h2 { font-size: var(--s4); }
.own-lead { font: 400 var(--s3)/1.18 var(--display); max-width: 34ch; margin-top: 24px; }
.own-tiles { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; margin-top: 72px; align-items: start; }
.own-photo { grid-column: 1 / 9; position: relative; }
.own-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.own-note { position: absolute; top: 0; right: 0; width: 340px; background: var(--bg); padding: 22px 22px 24px; }
.own-note p { margin-bottom: 14px; }
.own-side { grid-column: 9 / 13; }
.map { background: var(--walnut); aspect-ratio: 4 / 3; }
.map svg { width: 100%; height: 100%; display: block; }
.map .arno { fill: none; stroke: var(--oak); stroke-width: 12; stroke-linecap: round; }
.map .pins circle { fill: var(--on-dark); }
.map .duomo { fill: var(--cream); }
.map text { font: 500 14px var(--text); fill: var(--on-dark); }
.map .river { fill: var(--cream); font-style: italic; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin: 26px 0 0; padding: 0; list-style: none; }
.facts li { color: var(--soft); }
.facts b { display: block; font: 400 var(--s3)/1 var(--display); color: var(--ink); margin-bottom: 4px; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); padding: 200px var(--m) 140px; align-items: start; }
.contact-line { grid-column: 1 / 6; font: 400 var(--s3)/1.14 var(--display); }
.contact-photo { grid-column: 8 / 10; width: 160px; aspect-ratio: 1; object-fit: cover; }
.contact-links { grid-column: 10 / 13; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.contact-q { font-weight: 500; margin-bottom: 8px; }
.contact-links .soft { margin-top: 8px; }

/* ---------- footer: name across the last photograph ---------- */
.foot { position: relative; height: 100svh; min-height: 560px; color: var(--on-dark); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.foot-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); z-index: -1; }
.foot { isolation: isolate; }
.foot-top { display: flex; justify-content: space-between; gap: 32px; padding: 32px var(--m) 0; }
.foot-top nav, .foot-top address { display: flex; flex-direction: column; gap: 8px; font-style: normal; }
.foot-top address { text-align: right; align-items: flex-end; }
.foot-top a { text-decoration: none; transition: color .2s; }
.foot-top a:hover { color: var(--oak); }
.foot-name { font: 400 var(--s5)/.8 var(--display); letter-spacing: -0.04em; padding: 0 var(--m); white-space: nowrap; margin-top: auto; }
.foot-legal { font-size: var(--s1); padding: 22px var(--m) 32px; opacity: .85; }

/* ---------- motion ---------- */
.js .rise { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .rise.in { opacity: 1; transform: none; }
.js .shutter { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease) .15s; }
.js .shutter img { transform: scale(1.12); transition: transform 1.6s var(--ease) .15s; }
.js .shutter.in { clip-path: inset(0 0 0 0); }
.js .shutter.in img { transform: none; }
.foot-photo { animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
.row { transition: opacity .35s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise, .js .shutter, .js .shutter img { transition: opacity .3s linear; transform: none; clip-path: none; }
  .foot-photo { animation: none; }
  .panel, .panel img { transition: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .hero-text, .search { grid-column: 1 / 4; }
  .own-note { position: static; width: auto; padding: 18px 0 0; }
  .contact-line { grid-column: 1 / 8; }
  .contact-photo { grid-column: 1 / 3; grid-row: 2; margin-top: 40px; }
  .contact-links { grid-column: 4 / 13; grid-row: 2; margin-top: 40px; }
}
@media (max-width: 900px) {
  .bar-links { display: none; }
  .hero { grid-template-columns: repeat(12, 1fr); padding-right: var(--m); }
  .print-tall { grid-column: 1 / 9; grid-row: 1; }
  .print-tall .shutter { aspect-ratio: 3 / 4; max-height: none; }
  .print-sq { grid-column: 8 / 13; grid-row: 1; align-self: end; margin-bottom: 72px; position: relative; z-index: 1; }
  .print-wide { grid-column: 1 / 13; grid-row: 4; margin: 40px calc(-1 * var(--m)) 0; }
  .print-wide figcaption { padding: 0 var(--m); }
  .hero-text { grid-column: 1 / 13; grid-row: 2; }
  .search { grid-column: 1 / 13; grid-row: 3; margin: 24px 0 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .search .guests, .search .btn { grid-column: 1 / -1; }
  .reg-photo { grid-column: 5 / 13; grid-row: 2; margin-top: 48px; }
  .reg-body { grid-column: 1 / 13; }
  .own-photo, .own-side { grid-column: 1 / 13; }
  .own-side { margin-top: 32px; }
}

/* ---------- phone ---------- */
@media (max-width: 700px) {
  :root { --m: 16px; --gap: 12px; --s2: 16px; --s3: 26px; --s4: 9.4vw; }
  .wordmark span { display: none; }
  .hero { padding-top: 20px; }
  .print-tall { grid-column: 1 / 10; }
  .print-sq { grid-column: 8 / 13; margin-bottom: 48px; }

  .hero-text { margin-top: 24px; }
  .showcase { padding-top: 120px; }
  .showcase h2 { padding-left: var(--m); margin-bottom: 32px; }
  .band { flex-wrap: wrap; height: 84svh; }
  .panel { height: 50%; flex: 0 0 auto; }
  .panel-title { padding: 16px 16px 48px 16px; font-size: 22px; }
  .panel:nth-child(1) { width: 64%; } .panel:nth-child(2) { width: 36%; }
  .panel:nth-child(3) { width: 36%; } .panel:nth-child(4) { width: 64%; }
  .register { padding-top: 120px; }
  .register h2 { text-indent: 0; }
  .reg-grid { margin-top: 40px; }
  .reg-photo { grid-column: 4 / 13; }
  .row a { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .r-addr { grid-column: 1; grid-row: 1; }
  .r-price { grid-column: 2; grid-row: 1; }
  .r-name { grid-column: 1 / -1; grid-row: 2; }
  .stay { padding-top: 120px; display: flex; flex-direction: column; gap: 0; }
  .stay h2 { margin-bottom: 32px; }
  .stage { display: flex; flex-direction: column; margin-bottom: 56px; }
  .stage img, .s2 img, .s3 img { margin-top: 0; }
  .s1 img { width: 100%; }
  .s2 { align-items: flex-end; } .s2 img { width: 62%; } .s2 p { width: 62%; }
  .s3 img { width: 78%; } .s3 p { width: 78%; }
  .stage p, .s1 p, .s2 p, .s3 p { padding-top: 0; margin-top: 16px; max-width: none; }
  .owners { padding-top: 64px; }

  .own-tiles { margin-top: 40px; }
  .own-photo img { aspect-ratio: 4 / 3; }
  .map { aspect-ratio: 3 / 2; }
  .contact { padding: 120px var(--m) 96px; }
  .contact-line { grid-column: 1 / 13; font-size: 22px; }
  .own-lead { font-size: 22px; }
  .contact-photo { grid-column: 1 / 5; width: 96px; }
  .contact-links { grid-column: 5 / 13; }
  .foot { height: 88svh; }
  .foot-top { flex-direction: column; }
  .foot-top address { text-align: left; align-items: flex-start; }
  .foot-name { font-size: 17vw; }
}