/* Kimberlee Knecht Real Estate & Design — first look
   Direction one, warm and classic: white pages, her rooms large, Libre Caslon, sage / cornflower / gilt.
   Rules: page ground is pure white. No tracked caps, no pills, no mono, no italics, no frames.
   Colour comes from the rooms and from two flat panels (cornflower for design, sage for sales). Gilt is only ever a 1px rule. */

:root {
  --ink: #1E1E1C;
  --mute: #686A64;
  --line: rgba(30, 30, 28, .16);
  --sage: #A9B8A3;
  --sage-t: #DCE4D7;
  --corn-t: #D6E0EC;
  --gilt: #C9A24A;
  --ph: #E4E6E4;
  --m: clamp(20px, 2.8vw, 40px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --text: "Libre Caslon Text", Georgia, serif;
  --sans: "Switzer", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: #fff; color: var(--ink); font-family: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: inherit; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--sage-t); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
[id] { scroll-margin-top: 28px; }

.w { max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: var(--m); padding-right: var(--m); }

h1, h2 { font: 400 clamp(38px, 3.7vw, 54px)/1.04 var(--display); letter-spacing: -.004em; }

/* quiet link: plain Caslon on a gilt rule that draws itself again on hover */
.go { display: inline-block; padding-bottom: 5px; font: 400 17px/1.3 var(--text); text-decoration: none; white-space: nowrap; background: linear-gradient(var(--gilt), var(--gilt)) 0 100% / 100% 1px no-repeat; }
.go:hover, a:hover > .go { animation: redraw .7s var(--ease); }
@keyframes redraw { 0% { background-size: 100% 1px; background-position: 100% 100%; } 45% { background-size: 0 1px; background-position: 100% 100%; } 46% { background-size: 0 1px; background-position: 0 100%; } 100% { background-size: 100% 1px; background-position: 0 100%; } }

/* picture holders: blurred preview, soft shimmer while loading, fade in when ready */
.ph { position: relative; overflow: hidden; background-color: var(--ph); background-image: var(--lq, none); background-size: cover; background-position: var(--pos, 50% 50%); }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.js .ph img { opacity: 0; transition: opacity .9s ease, transform 1.9s var(--ease); }
.js .ph.ok img { opacity: 1; }
.js .ph.ld::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 70%); background-size: 220% 100%; animation: shimmer 1.7s linear infinite; }
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }

/* reveals: pictures unroll from the top, words rise a little */
.js .rv { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); }
.js .rv.in { clip-path: inset(0 0 0 0); }
.js .rv img { transform: scale(1.07); }
.js .rv.in img { transform: none; }
.js .rt { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform 1s var(--ease); }
.js .rt.in { opacity: 1; transform: none; }

/* header: small centred name, quiet menu either side */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 30px var(--m) 28px; }
.nav { display: flex; gap: clamp(20px, 2.4vw, 36px); font: 400 15px/1 var(--sans); }
.nav-r { justify-content: flex-end; }
.nav a { position: relative; padding: 7px 0; text-decoration: none; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gilt); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.name { display: block; text-align: center; text-decoration: none; }
.name span { display: block; font: 400 31px/1 var(--display); letter-spacing: .004em; }
.name small { display: block; margin-top: 9px; font: 400 14px/1 var(--text); color: var(--mute); }
.menu-b { display: none; }
.ov { position: fixed; inset: 0; z-index: 60; background: #fff; padding: 22px 20px 26px; display: flex; flex-direction: column; overflow: auto; }
.ov[hidden] { display: none; }
.ov-x { align-self: flex-start; font: 400 15px/1 var(--sans); padding: 8px 0; }
.ov nav { margin-top: 11vh; display: flex; flex-direction: column; }
.ov nav a { font: 400 37px/1.32 var(--display); text-decoration: none; }
.ov p { margin-top: auto; padding-top: 30px; font: 400 14px/1.4 var(--sans); color: var(--mute); }

/* opening plate: the room fills the screen under the name, its caption waits just below */
.hero-ph { height: calc(100vh - 112px); height: calc(100svh - 112px); min-height: 420px; }
.js .hero-ph img { transform: scale(1.045); }
.js .hero-ph.ok img { transform: none; }
.plate, .dcap, .fl-i figcaption, .dvi figcaption { font: 400 15.5px/1.45 var(--text); color: var(--mute); }
.plate { display: flex; justify-content: space-between; gap: 4px 28px; padding: 15px var(--m) 0; }
.plate span:first-child, .dcap-n { color: var(--ink); }

/* about: her portrait and three sentences in her own voice */
.about { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; margin-top: clamp(88px, 10vw, 148px); }
.about-ph { grid-column: 2 / 6; aspect-ratio: 4 / 5; }
.about-t { grid-column: 7 / 13; max-width: 17.5em; padding-bottom: 2px; font: 400 clamp(25px, 2.5vw, 36px)/1.3 var(--display); }

/* design portfolio: one project, room by room. Names down the side, the room beside them */
.design { display: grid; grid-template-columns: minmax(380px, 35%) 1fr; column-gap: 16px; margin-top: clamp(100px, 12vw, 176px); }
.dp { display: flex; flex-direction: column; background: var(--corn-t); padding: clamp(34px, 3.5vw, 50px) clamp(28px, 3.2vw, 46px) clamp(30px, 3vw, 42px); }
.dp h2 { font-size: clamp(34px, 3.1vw, 46px); }
.dp h3 { margin-top: clamp(26px, 2.8vw, 40px); font: 400 clamp(20px, 1.6vw, 23px)/1.25 var(--text); }
.dp-s { margin-top: 12px; max-width: 26em; font: 400 16.5px/1.6 var(--text); }
.dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin: clamp(22px, 2.4vw, 34px) 0; }
.dl button { position: relative; display: block; width: 100%; text-align: left; padding: 8px 0; font: 400 clamp(18px, 1.45vw, 21px)/1.2 var(--text); transition: transform .55s var(--ease); }
.dl button::before { content: ""; position: absolute; left: -28px; top: 50%; width: 18px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease); }
.dl button.on { transform: translateX(28px); }
.dl button.on::before { transform: scaleX(1); }
.dp-next { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(30, 30, 28, .22); font: 400 15.5px/1.5 var(--text); }
.dv { position: relative; overflow: hidden; min-width: 0; background: var(--ph); }
.dv::before { content: ""; display: block; padding-top: 66.667%; }
.dvi { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.dvi.on { opacity: 1; }
.dvi .ph { position: absolute; inset: 0; }
.dvi figcaption { display: none; }
.dcap { grid-column: 2; margin-top: 13px; }

/* the flowers: details cut from her own listing photographs */
.fl { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: clamp(96px, 11vw, 160px); }
.fl-t { grid-column: 1 / 9; max-width: 19em; font: 400 clamp(25px, 2.5vw, 36px)/1.24 var(--display); }
.fl-row { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 20px; margin-top: clamp(30px, 3.4vw, 48px); }
.fl-i .ph { aspect-ratio: 4 / 5; }
.fl-i figcaption { margin-top: 11px; }
.fl-i:nth-child(2) { transition-delay: .09s; } .fl-i:nth-child(3) { transition-delay: .18s; } .fl-i:nth-child(4) { transition-delay: .27s; } .fl-i:nth-child(5) { transition-delay: .36s; }

/* selected sales */
.sales { margin-top: clamp(100px, 12vw, 176px); }
.sh { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 30px; flex-wrap: wrap; margin-bottom: 40px; }
.story { display: grid; grid-template-columns: 1.4fr 1fr; color: inherit; text-decoration: none; }
.story-ph { aspect-ratio: 5 / 4; }
.story-p { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--sage); padding: 40px clamp(26px, 3.6vw, 56px); }
.story-in { width: min(44%, 244px); aspect-ratio: 3 / 4; margin-bottom: 34px; }
.story-p h3 { font: 400 clamp(32px, 3vw, 44px)/1.06 var(--display); }
.story-p p { margin-top: 15px; max-width: 21em; font: 400 17px/1.55 var(--text); }
.story:hover .story-ph.in img { transform: scale(1.025); }

/* a calm picture index: equal columns, name left, price right, one line of facts */
.tiles, .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: clamp(48px, 5vw, 72px); }
.tiles { margin-top: clamp(56px, 6vw, 88px); }
.tile { display: block; color: inherit; text-decoration: none; }
.tile .ph { aspect-ratio: 3 / 2; }
.tc { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0 18px; margin-top: 16px; }
.tc h3, .tc span { font: 400 clamp(18px, 1.45vw, 21px)/1.3 var(--text); }
.tc span { white-space: nowrap; }
.tile p, .lst span { font: 400 14px/1.5 var(--sans); color: var(--mute); }
.tile p { margin-top: 5px; max-width: 34em; }
/* each sale carries the two photographs she chose: the second shows on hover, or by swiping on a phone */
.two .alt { position: absolute; inset: 0; }
.js .ph.ok img.alt { opacity: 0; }
@media (hover: hover) { .tile:hover .two.ok img.alt { opacity: 1; } }
@media (hover: none) {
  .two { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .two::-webkit-scrollbar { display: none; }
  .two img { flex: 0 0 86%; width: 86%; scroll-snap-align: start; }
  .two img.alt { position: static; border-left: 8px solid #fff; }
  .js .two.ok img.alt { opacity: 1; }
}

/* residences: the name, her title, and nothing that will need updating */
.res { margin-top: clamp(100px, 12vw, 176px); padding: clamp(64px, 7vw, 100px) 0 clamp(70px, 7.4vw, 106px); background: var(--sage-t); }
.res-g { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.res-h, .res article { padding-top: 26px; border-top: 1px solid rgba(30, 30, 28, .34); }
.res-h { grid-column: 1 / 4; }
.res-h p { margin-top: 22px; max-width: 15em; font: 400 19px/1.5 var(--text); }
.res-h .go { margin-top: 20px; }
.res article { grid-column: span 4; }
.res article h3 { margin-top: 6px; font: 400 clamp(26px, 2.5vw, 36px)/1.14 var(--display); }
.res article .res-pl { margin-top: 8px; font: 400 19px/1.4 var(--text); color: var(--ink); }
.res article p { margin-top: 22px; font: 400 15px/1.5 var(--sans); color: rgba(30, 30, 28, .76); }
/* Ritz-Carlton has its one cleared image; Rosewood stays text until hers is approved. Both names sit on one line. */
.res article.has-ph, .res article.no-ph { padding-top: 0; border-top: 0; }
.res article.has-ph { grid-column: 4 / 9; }
.res article.no-ph { grid-column: 9 / 13; align-self: end; }
.res article .ph { aspect-ratio: 3 / 2; }
.res article .res-cap { margin-top: 8px; font: 400 12px/1.4 var(--sans); color: rgba(30, 30, 28, .6); }
.res article .res-t { margin-top: 22px; padding-top: 26px; border-top: 1px solid rgba(30, 30, 28, .34); }
.res article.no-ph .res-t { margin-top: 0; }

/* contact */
.contact { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; margin-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(90px, 10vw, 150px); }
.ct { grid-column: 2 / 8; padding-bottom: 2px; }
.ct-ph { grid-column: 8 / 12; aspect-ratio: 2 / 3; }
.ct-l { display: flex; flex-direction: column; align-items: flex-start; margin-top: 30px; }
.ct-l a { font: 400 clamp(25px, 2.7vw, 39px)/1.34 var(--text); text-decoration: none; background: linear-gradient(var(--gilt), var(--gilt)) 0 96% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.ct-l a:hover { background-size: 100% 1px; }
.ct-n { margin-top: 34px; font: 400 18px/1.62 var(--text); }
.ct-n span { display: block; }

.foot { display: flex; justify-content: space-between; gap: 14px 30px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 38px; font: 400 13.5px/1.4 var(--sans); color: var(--mute); }
.foot::before { content: ""; flex: 0 0 100%; height: 1px; margin-bottom: 8px; background: var(--line); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* sales page */
.page-h { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 18px 40px; margin-top: clamp(20px, 3vw, 44px); padding-top: clamp(34px, 4vw, 56px); border-top: 1px solid var(--line); }
.page-h nav { display: flex; gap: 30px; }
.place { margin-top: clamp(64px, 7vw, 100px); }
.place > h2 { margin-bottom: clamp(24px, 2.6vw, 36px); font-size: clamp(30px, 2.7vw, 40px); }
.place:last-child { padding-bottom: clamp(90px, 10vw, 150px); }
.lst-w { grid-column: span 2; }
.lst { border-top: 1px solid var(--line); }
.lst li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 8.5em; column-gap: 24px; align-items: baseline; padding: 15px 0 14px; border-bottom: 1px solid var(--line); }
.lst b, .lst i { font: 400 clamp(18px, 1.45vw, 21px)/1.3 var(--text); }
.lst i { text-align: right; white-space: nowrap; }
.lst-s li { display: block; }
.lst-s span { display: block; margin-top: 2px; }
.lists { margin-top: clamp(70px, 8vw, 116px); }
.lists h3 { padding-bottom: 16px; font: 400 clamp(22px, 1.9vw, 27px)/1.2 var(--display); }
.lists h3:not(:first-child) { margin-top: 52px; }

@media (max-width: 1080px) {
  .nav { gap: 18px; font-size: 14px; }
  .name span { font-size: 27px; }
  .dl { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .top { padding: 18px 20px 16px; }
  .nav { display: none; }
  .menu-b { display: block; justify-self: start; font: 400 15px/1 var(--sans); padding: 8px 0; }
  .name span { font-size: 24px; }
  .name small { margin-top: 7px; font-size: 12.5px; }

  .hero-ph { height: min(68vh, 128vw); height: min(68svh, 128vw); min-height: 360px; --pos: 61% 64% !important; }
  .plate { flex-direction: column; padding-top: 12px; }
  .plate, .dcap, .fl-i figcaption, .dvi figcaption { font-size: 15px; }

  .about { display: block; margin-top: 76px; }
  .about-ph { width: 74%; }
  .about-t { margin-top: 34px; padding: 0; font-size: 27px; }

  /* on a phone the rooms become a row to swipe, each with its name under it */
  .design { display: flex; flex-direction: column; margin-top: 96px; }
  .dp { display: contents; }
  .dp h2 { order: 1; font-size: 38px; }
  .dp h3 { order: 2; margin-top: 22px; font-size: 21px; }
  .dp-s { order: 3; }
  .dl, .dcap { display: none; }
  .dv { order: 4; display: flex; column-gap: 10px; margin: 26px calc(var(--m) * -1) 0; padding: 0 var(--m); overflow-x: auto; background: none; scroll-snap-type: x mandatory; scroll-padding-left: var(--m); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dv::-webkit-scrollbar { display: none; }
  .dv::before { display: none; }
  .dvi { position: static; flex: 0 0 86%; opacity: 1; scroll-snap-align: start; }
  .dvi .ph { position: relative; inset: auto; aspect-ratio: 3 / 2; }
  .dvi figcaption { display: block; margin-top: 10px; }
  .dp-next { order: 5; margin-top: 30px; }

  .fl { display: block; margin-top: 92px; }
  .fl-t { font-size: 27px; }
  .fl-row { display: flex; column-gap: 10px; margin: 26px calc(var(--m) * -1) 0; padding: 0 var(--m); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--m); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fl-row::-webkit-scrollbar { display: none; }
  .fl-i { flex: 0 0 58%; scroll-snap-align: start; transition-delay: 0s !important; }

  .sales { margin-top: 96px; }
  .sh { margin-bottom: 26px; }
  .story { display: block; margin: 0 calc(var(--m) * -1); }
  .story-ph { aspect-ratio: 4 / 3; }
  .story-p { padding: 38px 26px 42px; }
  .story-in { width: 46%; margin-bottom: 26px; }
  .story-p h3 { font-size: 34px; }
  .tiles, .grid3 { grid-template-columns: 1fr; row-gap: 44px; }
  .tiles { margin-top: 56px; }
  .tc { margin-top: 13px; }
  .tc h3, .tc span { font-size: 20px; }

  .res { margin-top: 96px; padding: 56px 0 62px; }
  .res-g { display: block; }
  .res-h { padding-top: 22px; }
  .res article { margin-top: 40px; padding-top: 20px; }
  .res article.has-ph, .res article.no-ph { padding-top: 0; }
  .res article .res-t { margin-top: 18px; padding-top: 20px; }
  .res article.no-ph .res-t { margin-top: 0; }
  .res article h3 { font-size: 29px; }
  .res article .res-pl { font-size: 18px; }
  .res article p { margin-top: 16px; }

  .contact { display: flex; flex-direction: column; margin-top: 84px; padding-bottom: 84px; align-items: stretch; }
  .ct-ph { order: -1; width: 74%; margin-bottom: 40px; }
  .ct-l { margin-top: 20px; }
  .ct-l a { font-size: 25px; }
  .ct-n { margin-top: 26px; font-size: 17px; }
  .ct-n span { display: inline; }

  .foot { flex-direction: column; padding-bottom: 34px; }

  .page-h { margin-top: 4px; padding-top: 30px; }
  .place { margin-top: 56px; }
  .place > h2 { font-size: 30px; }
  .lst-w { grid-column: auto; }
  .lst li { grid-template-columns: 1fr auto; row-gap: 3px; }
  .lst li span { grid-column: 1 / -1; grid-row: 2; }
  .lst-s li { display: block; }
  .lists { margin-top: 64px; }
  .lists > div + div { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .rt { clip-path: none; opacity: 1; transform: none; transition: none; }
  .js .rv img, .js .hero-ph img { transform: none; }
  .js .ph img { transition: opacity .3s ease; }
  .js .ph.ld::after { animation: none; }
  .dl button, .dl button::before, .dvi { transition: none; }
  .go:hover, a:hover > .go { animation: none; }
}

/* preloader: her name, one gilt line that follows the real loading, then the page unrolls like its pictures do */
.loader { display: none; }
.pre, .pre body { overflow: hidden; }
.pre .loader { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: #fff; clip-path: inset(0 0 0 0); transition: clip-path 1.15s cubic-bezier(.76, 0, .18, 1); }
.loader-in { display: flex; flex-direction: column; align-items: center; text-align: center; transition: opacity .5s ease, transform 1s var(--ease); }
.loader-n { font: 400 clamp(30px, 3.4vw, 46px)/1 var(--display); letter-spacing: .004em; }
.loader-s { margin-top: 12px; font: 400 clamp(14px, 1.2vw, 16px)/1 var(--text); color: var(--mute); }
.loader-n, .loader-s { opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .9s var(--ease); }
.loader-s { transition-delay: .1s; }
.pre-f .loader-n, .pre-f .loader-s { opacity: 1; transform: none; }
.loader-l { display: block; width: clamp(96px, 9vw, 132px); height: 1px; margin-top: 26px; background: rgba(30, 30, 28, .14); overflow: hidden; }
.loader-l b { display: block; height: 100%; background: var(--gilt); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease); }
.pre-out .loader { clip-path: inset(0 0 100% 0); }
.pre-out .loader-in { opacity: 0; transform: translateY(-18px); }
/* the page keeps its own entrance until the curtain lifts */
.hold .rv { clip-path: inset(0 0 100% 0) !important; }
.hold .rt { opacity: 0 !important; transform: translateY(16px) !important; }
.hold .hero-ph img { transform: scale(1.045) !important; }
@media (prefers-reduced-motion: reduce) {
  .pre .loader { transition: opacity .3s ease; }
  .pre-out .loader { clip-path: none; opacity: 0; }
  .loader-n, .loader-s, .pre-out .loader-in { transform: none; }
  .hold .rv { clip-path: none !important; }
  .hold .rt { opacity: 1 !important; transform: none !important; }
  .hold .hero-ph img { transform: none !important; }
}