/* Ca' Moderna. Palette and type are taken from the floor plan; see DESIGN_NOTES.md. */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}

:root{
  --cream:#f7f2e8;      /* floor plan background */
  --paper:#fffdf8;      /* floor plan room fill */
  --ink:#2f2b27;        /* floor plan Italian labels */
  --body:#5a5249;
  --wall:#3b3631;       /* floor plan walls */
  --muted:#8a7f70;      /* floor plan English labels */
  --line:#d9cfbf;
  --sage:#7d8b6a;       /* floor plan entrance arrow; kitchen, throws */
  --sage-deep:#5d6b4d;
  --rust:#b0532f;       /* bedroom two cushion */
  --red:#9b2a2c;        /* bedroom one cushions */
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:Inter,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:68px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--cream);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:50}
.skip:focus{left:8px}
.eyebrow{font:500 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.005em}
h2{font-size:clamp(34px,5vw,52px);margin:14px 0 18px}
h3{font-size:26px}
.lead{font-size:18px;max-width:58ch;color:#4a443d}
section{padding:96px 0}

/* header */
.site-head{position:sticky;top:0;z-index:10;background:rgba(247,242,232,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:28px;height:68px}
.logo{font:500 26px/1 var(--serif);text-decoration:none;white-space:nowrap}
.logo i{color:var(--sage-deep)}
.site-nav{display:flex;gap:24px;margin-left:auto}
.site-nav a{white-space:nowrap;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--body)}
.site-nav a:hover{color:var(--ink)}
.lang{white-space:nowrap;font:500 12px/1 var(--sans);letter-spacing:.12em;color:var(--muted)}
.lang a{text-decoration:none;padding:6px 2px}
.lang a:hover{color:var(--ink)}
.lang [aria-current]{color:var(--ink)}
.btn{display:inline-block;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:14px 22px;border-radius:2px;background:var(--sage-deep);color:#fff;white-space:nowrap;transition:background .2s,color .2s}
.btn:hover{background:var(--wall)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--cream)}

/* hero */
.hero{position:relative;height:min(88vh,820px);min-height:520px;overflow:hidden;background:var(--wall)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,26,22,0) 40%,rgba(30,26,22,.62) 100%)}
.hero .copy{position:absolute;left:0;right:0;bottom:56px;z-index:2;color:#fff}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.hero h1{font-size:clamp(54px,9vw,112px);margin:12px 0 10px;font-weight:400}
.hero h1 i{color:#e9dfc9}
.hero p{font-size:19px;max-width:46ch;opacity:.95}

/* facts band, speckled like terrazzo */
.facts{background:
    radial-gradient(circle at 12% 30%,#c9b9a0 0 2px,transparent 2.5px),
    radial-gradient(circle at 63% 72%,#9b2a2c55 0 2.5px,transparent 3px),
    radial-gradient(circle at 38% 58%,#7d8b6a66 0 2px,transparent 2.5px),
    radial-gradient(circle at 85% 20%,#b0532f55 0 1.6px,transparent 2px),
    radial-gradient(circle at 25% 85%,#a89c8b 0 1.4px,transparent 1.8px),
    #efe6d6;background-size:46px 46px,71px 71px,53px 53px,89px 89px,37px 37px,auto;border-block:1px solid var(--line)}
.facts ul{list-style:none;padding-top:34px;padding-bottom:34px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.facts li{text-align:center}
.facts strong{display:block;font:500 34px/1.1 var(--serif)}
.facts span{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#6d6357}

/* intro */
.intro{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.intro .more{margin-top:18px;color:var(--body)}
.intro figure{position:relative}
.intro figure img{aspect-ratio:4/5;object-fit:cover;width:100%}
.intro figure img.inset{position:absolute;width:46%;aspect-ratio:1;left:-22%;bottom:-36px;border:8px solid var(--cream)}

/* rooms */
#rooms{background:var(--paper)}
.room{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:64px}
.room .text{grid-column:span 4;align-self:end;padding-bottom:8px}
.room .text p{color:var(--body);margin-top:10px}
.room .sub{font:italic 400 18px/1 var(--serif);color:var(--muted);margin-bottom:6px}
.room .big{grid-column:span 5}
.room .small{grid-column:span 3}
.room img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.room.flip .text{order:3}
.swatch{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:1px}

/* floor plan */
.plan{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.plan dl{display:grid;grid-template-columns:auto 1fr;gap:14px 24px;margin-top:28px;border-top:1px solid var(--line);padding-top:24px}
.plan dt{font:500 22px/1.2 var(--serif)}
.plan dd{color:var(--body);align-self:center}

/* location */
#location{background:var(--wall);color:#efe7d8}
#location .eyebrow{color:#b9ad9b}
#location .lead{color:#d9cfbf}
.loc{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.loc img{aspect-ratio:4/3;object-fit:cover;width:100%}
.loc img.second{margin-top:16px}
.addr{font:400 28px/1.3 var(--serif);font-style:normal;margin:26px 0}
.map{margin-top:22px;width:100%;aspect-ratio:16/9;border:0;filter:sepia(.25) saturate(.8);background:#4a443d}
.maplink{margin-top:10px;font-size:13px}

/* info */
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}
.info > div{border-top:2px solid var(--ink);padding-top:20px}
.info ul{padding-left:1.1em;margin-top:12px;color:var(--body)}
.info li{margin:6px 0}

/* book */
#book{background:var(--sage-deep);color:#fff;text-align:center}
#book .eyebrow{color:#dfe5d3}
#book p{max-width:52ch;margin:0 auto 34px;color:#eef1e7}
#book .btn{background:#fff;color:var(--sage-deep);font-size:14px;padding:18px 30px}
#book .btn:hover{background:var(--cream)}
.contact{display:flex;justify-content:center;gap:40px;margin-top:40px;flex-wrap:wrap;font-size:15px}
.contact a{color:#fff}

/* footer */
.site-foot{background:#2a2622;color:#b9ad9b;padding:48px 0 40px;font-size:13.5px}
.site-foot .cols{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.site-foot .logo{color:#efe7d8;font-size:24px}
.site-foot address{font-style:normal;margin-top:8px}
.legal{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:#d9cfbf;letter-spacing:.03em}
.legal small{display:block;font-family:var(--sans);color:#8f8473;font-size:12.5px;margin-top:4px}

@media (max-width:1080px){
  .site-nav{display:none}
  .bar{gap:14px}
  .lang{margin-left:auto}
}
@media (max-width:900px){
  .bar .btn{padding:11px 14px;font-size:11px}
  .hero img{object-position:30% 60%}
  section{padding:64px 0}
  .facts ul{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .facts li:last-child{grid-column:span 2}
  .intro,.plan,.loc{grid-template-columns:1fr;gap:40px}
  .intro figure img.inset{display:none}
  .room{grid-template-columns:1fr 1fr;margin-top:48px}
  .room .text{grid-column:1/-1;order:-1 !important}
  .room .big,.room .small{grid-column:span 1}
  .info{grid-template-columns:1fr;gap:28px}
}
@media (max-width:380px){
  .logo{font-size:22px}
  .bar .btn{padding:10px 10px;letter-spacing:.06em}
}