/* ========================================================
   Whitmore Residences — styles.css
   Layout width 1512. Section backgrounds are flat colours,
   not a ramp: cream, sage, orange, cream.
   ======================================================== */

:root {
  --cream:  #EBE8DB;
  --sage:   #E1E9C9;
  --orange: #F75000;
  --lime:   #F2FF73;

  /* The nav is pure black, body copy a warm near-black, and the type on the
     sage panel lighter again. */
  --ink:      #444136;
  --ink-deep: #000000;
  --ink-sage: #504D42;
  --arrow:    #968C6E;
  --ink-field: #3D3D3D;
  --field:    #F4F1EC;
  --pill:     #F1EEE1;
  --line:     rgba(41, 40, 38, 0.10);
  --white:    #FFFFFF;

  --font-display: "Questrial", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-poster:  "Notable", "Arial Black", sans-serif;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --frame: 1512;
  /* The page gutter as a proportion (40/1512), so the full-bleed bands and the
     blocks set in px stay in line. */
  --gutter: 2.6455%;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============ HERO ============ */
/* The photo is full-bleed, so the title scales with it: cqi units against
   the stage, not vw, which would keep growing past the photo. */
.hero__stage {
  position: relative;
  /* Explicit: with aspect-ratio alone the width is derived from the height. */
  width: 100%;
  aspect-ratio: 1512 / 700;
  container-type: inline-size;
  overflow: hidden;
  background: #B7AFA4;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__title {
  position: absolute;
  left: 2.6455cqi;
  top: 3.1415cqi;
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 6.6138cqi;   /* 100px at 1512 */
  line-height: 0.89;      /* 89px baseline-to-baseline */
  text-transform: uppercase;
}
.hero__title span { display: block; }

/* ---------- Phone menu button ---------- */
/* Hidden by default: from 769px up the bar below is the navigation. */
.nav__toggle {
  display: none;
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 6;
  width: 34px;
  padding: 8px;
  box-sizing: content-box;
}
.nav__toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--lime);
  transition: transform .3s ease, opacity .3s ease;
}
.nav__toggle[aria-expanded="true"] span { background: var(--ink-deep); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Bottom nav bar ---------- */
.nav {
  background: var(--cream);
  padding: 0 var(--gutter);
  /* The links reveal from the right with translateX(48px). Without clipping,
     that offset widens the document for as long as the animation runs and the
     page scrolls sideways on load. */
  overflow: hidden;
}
.nav__menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 65px;
  /* 74, not 70: centring puts the line box in the middle, and Poppins' uneven
     ascender/descender then sits the capitals 2px high of the mockup. */
  height: 74px;
}
.nav__menu a {
  display: inline-block;
  font-size: 15px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-deep);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.nav__menu a:hover,
.nav__menu a:focus-visible { border-bottom-color: var(--ink-deep); }

/* ============ PAIR OF INTERIORS ============ */
.pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: 19px;
  padding: 122px var(--gutter) 0;
}

/* The heading comes first in the markup so a phone reads it before the
   photographs; here order sends it back under them, on a line of its own. */
.pair__head {
  order: 2;
  flex: 0 0 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: 78px;
}

.pair__title {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 200px;
  line-height: 160px;
  text-transform: uppercase;
}
.pair__title span { display: block; }

/* Narrow window: 480 pulls "the" up into the fourth line, 470 pushes "style,"
   out of the third. The measured advance of the widest line is ~471. */
.pair__lead {
  flex: 0 1 474px;
  margin: 168px 0 0;
  font-size: 20px;
  line-height: 28px;
  text-align: right;
}

/* Both photos are 900×1200 exports shown whole at 450×600, hung on the right
   gutter with a 19px gap — the left half of that line stays empty. */
.pair__fig {
  order: 1;
  flex: 0 1 450px;
  margin: 0;
}
.pair__fig img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ============ MOVE-IN READY ============ */
/* The heading moved up into the band above, so the specifications carry the
   whole section and their own top margin sets the distance from the photos. */
.ready {
  padding: 0 var(--gutter) 129px;
}

.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 545px));
  column-gap: 92px;
  margin-top: 110px;
}
.specs__list li {
  font-size: 20px;
  line-height: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.specs__list li + li { padding-top: 21px; }

/* ============ URBAN MINIMALIST ============ */
.urban {
  background: var(--sage);
  /* The carousel runs off the right edge, so it is clipped here rather than
     allowed to widen the document. */
  overflow: hidden;
  padding: 137px 0 343px;
  color: var(--ink-sage);
}

.urban__head { padding: 0 var(--gutter); }

.eyebrow {
  margin: 0;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.urban__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 50px;
  line-height: 52px;
  text-transform: uppercase;
}
.urban__title span { display: block; }

.track {
  display: flex;
  /* 19.33: the measured pitch is 469.33px for a 450px photo, so a round 19
     drifts a pixel per slide across the row. */
  gap: 19.33px;
  margin-top: 55px;
  padding-left: var(--gutter);
  /* The arrows slide the whole row by one photo. The photo that leaves rejoins
     the row at the other end while the offset is reset, so the arrows keep
     working in either direction and the right-hand photo can be brought into
     full view. */
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.track__slide {
  flex: 0 0 450px;
}
.track__slide img {
  width: 450px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.track__nav {
  display: flex;
  justify-content: flex-end;
  gap: 50px;
  /* 8px inside the gutter: the arrowheads stop short of the column edge. */
  padding: 0 calc(var(--gutter) + 8px) 0 0;
  margin-top: 39px;
}
.track__arrow {
  display: block;
  width: 46px;
  padding: 0;
  color: var(--arrow);
  transition: transform .3s ease, color .3s ease;
}
.track__arrow svg { width: 46px; height: 26px; display: block; }
.track__arrow:hover,
.track__arrow:focus-visible { color: var(--ink-sage); }
.track__arrow--prev:hover { transform: translateX(-4px); }
.track__arrow--next:hover { transform: translateX(4px); }

.urban__lead {
  max-width: 650px;
  margin: 73px var(--gutter) 0 auto;
  font-size: 20px;
  line-height: 28px;
  text-align: right;
}

/* ============ HOME IS WHERE THE ART IS ============ */
.art {
  position: relative;
  /* Above its neighbours so the two overhanging photos are not painted over by
     the sections that follow. */
  z-index: 1;
  height: 1337px;
  background: var(--orange);
  color: var(--white);
}

.art__fig {
  position: absolute;
  margin: 0;
}
.art__fig img { object-fit: cover; }

/* Overhangs the sage panel above by 135px. */
.art__fig--table {
  left: var(--gutter);
  top: -135px;
}
.art__fig--table img { width: 485px; aspect-ratio: 485 / 646; }

/* Overhangs the cream panel below by 90px. */
.art__fig--sofa {
  right: calc(var(--gutter) + 429px);   /* 45 + 411 + 13 */
  top: 880px;
}
.art__fig--prints {
  right: calc(var(--gutter) + 5px);     /* the pair stops 45px off the edge */
  top: 712px;
}
.art__fig--sofa img,
.art__fig--prints img { width: 411px; aspect-ratio: 411 / 547; }

.art__title {
  position: absolute;
  left: 178px;
  top: 240px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 200px;
  line-height: 160px;
  text-transform: uppercase;
}
.art__title span { display: block; }
.art__title em {
  font-family: var(--font-poster);
  font-style: normal;
  color: var(--lime);
  /* Notable's ascent is taller than Questrial's, and on a fixed line-height it
     would drag this line's baseline 37px down. Zero keeps the strut in charge. */
  line-height: 0;
}

.art__body {
  position: absolute;
  left: 178px;
  top: 886px;
  z-index: 2;
  width: 400px;
}
.art__lead {
  margin: 49px 0 0;
  font-size: 20px;
  line-height: 28px;
}

/* ============ BOOK A VIEWING ============ */
.book {
  padding: 206px var(--gutter) 0;
  text-align: center;
}
.book__eyebrow { margin-top: 1px; }
.book__title {
  margin-top: 15px;
  font-family: var(--font-display);
  font-size: 50px;
  line-height: 1;
  text-transform: uppercase;
}

/* The column is 624px wide and centred: 444px of cream either side. */
.book__form {
  width: 624px;
  max-width: 100%;
  margin: 47px auto 0;
  text-align: left;
}
.book__row {
  display: flex;
  gap: 24px;
}
.book__row .field { flex: 1 1 300px; }

.field {
  display: block;
  width: 100%;
  height: 60px;
  margin-bottom: 10px;
  padding: 0 25px;
  border: 0;
  border-radius: 0;
  background: var(--field);
  color: var(--ink-field);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 60px;
}
.field::placeholder {
  color: var(--ink-field);
  text-transform: uppercase;
  opacity: 1;
}
.field:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* The chevron is drawn here rather than left to the platform's own arrow. */
.book__select { position: relative; }
.book__select select {
  appearance: none;
  text-transform: uppercase;
  cursor: pointer;
}
.book__select::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 26px;
  width: 14px;
  height: 8px;
  /* Drawn, not two rotated borders: a 14×8 chevron is not a rotated square,
     and skewing one into shape reads as a tick. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%233D3D3D' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center / 14px 8px no-repeat;
  pointer-events: none;
}

.btn-pill {
  display: block;
  margin: 49px 0 0 auto;
  width: 197px;
  height: 70px;
  border-radius: 35px;
  background: var(--lime);
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  transition: filter .3s ease, transform .3s ease;
}
.btn-pill:hover,
.btn-pill:focus-visible { filter: brightness(0.95); }

.book__success {
  margin: 24px 0 0;
  font-size: 16px;
  text-align: right;
}

/* ============ FOOTER ============ */
/* Explicit columns rather than space-between: the five blocks are not evenly
   spread, each starting on its own x. Proportional, not px, for the same reason
   the page gutter is: in pixels the four fixed tracks add up to 1307 and the row
   overflows any window narrower than ~1387, and the footer stops lining up with
   the sections above it once the window grows past the design width. */
.foot {
  display: grid;
  grid-template-columns: 37.78% 18.16% 16.76% 18.58% auto;
  align-items: start;
  padding: 200px var(--gutter) 75px;
}

.logo {
  display: block;
  /* max-content, or centring the lines would centre the whole lockup in its
     column instead of leaving it on the gutter. */
  width: max-content;
  margin-top: -3px;
  line-height: 1;
}
.logo__name {
  display: block;
  font-family: var(--font-display);
  font-size: 50px;
  text-transform: uppercase;
}
.logo__sub {
  display: block;
  /* Negative: the wordmark's line box is taller than its capitals, and the
     mockup sets the two baselines 41px apart. */
  margin-top: -5px;
  font-size: 14px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.foot__social {
  display: flex;
  gap: 20px;
  margin-top: 1px;
}
.foot__social a {
  display: block;
  width: 25px;
  transition: opacity .3s ease;
}
.foot__social svg {
  width: 25px;
  height: 25px;
  display: block;
  fill: currentColor;
}
.foot__social a:hover,
.foot__social a:focus-visible { opacity: 0.6; }

.foot__address {
  font-size: 16px;
  line-height: 20.5px;
  font-style: normal;
}
.foot__address strong {
  display: block;
  font-weight: 600;
}

.btn-outline {
  /* Fixed 145×45 and justify-self: a grid item would otherwise stretch to the
     whole column and run under the phone number. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 145px;
  height: 45px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 22px;
  background: var(--pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .3s ease;
}
.btn-outline:hover,
.btn-outline:focus-visible { background: var(--field); }

.foot__phone {
  /* 6px inside the gutter: this block stops short of the column edge the logo
     sits on. */
  margin: 0 6px 0 0;
  font-size: 16px;
  line-height: 20.5px;
  text-align: right;
}

/* ============ Reveal ============ */
@media (prefers-reduced-motion: no-preference) {
  .anim [data-reveal] {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
  }
  .anim [data-reveal="left"]  { transform: translateX(-48px); }
  .anim [data-reveal="right"] { transform: translateX(48px); }
  .anim [data-reveal="up"],
  .anim [data-reveal=""]      { transform: translateY(32px); }
  .anim [data-reveal].is-visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .track { transition: none; }
}

/* ============ Breakpoints ============ */
@media (max-width: 1199.98px) {
  .pair__head { gap: var(--space-5); }

  /* The five fixed footer columns add up to 1307px, so below this they wrap. */
  .foot {
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: space-between;
    gap: 48px 40px;
    padding-top: 140px;
  }
}

@media (max-width: 991.98px) {
  .nav__menu { gap: 40px; }

  /* Below this the composition cannot hold: the 200px title alone is 1115px
     wide. Everything drops into flow, keeping only the top overhang. */
  .art {
    height: auto;
    padding: 0 var(--gutter) 72px;
  }
  .art__fig,
  .art__title,
  .art__body { position: static; }
  .art__fig--table {position: relative;left:0; }
  .art__title {
    
    font-size: 96px;
    line-height: 84px;
  }
  .art__body {
    width: auto;
    max-width: 400px;
    margin-top: 56px;
  }
  .art__fig--sofa,
  .art__fig--prints { margin-top: 32px; }
  .art__fig img { width: 100%; max-width: 485px; height: auto; }

  .pair__head { display: block; }
  .pair__lead {
    margin: 48px 0 0 auto;
    max-width: 474px;
  }
  .specs { margin-top: 72px; }
}

@media (max-width: 767.98px) {
  :root { --gutter: 20px; }

  /* ---- Phone navigation ----
     The bar becomes a panel that drops from the top of the hero; the four
     links are unchanged, only their container moves. */
  .hero { position: relative; }
  .nav__toggle { display: block; }
  .nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    /* A veil over the blurred photograph rather than the solid bar it is at the
       foot of the hero. The tint is light, not dark, because these labels are
       black: it stays low enough for the picture to read through, and the heavy
       blur is what keeps them legible. */
    background: rgba(235, 232, 219, 0.42);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
            backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid rgba(68, 65, 54, 0.14);
  }
  /* With no backdrop-filter there is nothing to blur, and the veil alone would
     leave the labels sitting on bare photograph. */
  @supports not (backdrop-filter: blur(1px)) {
    .nav { background: rgba(235, 232, 219, 0.95); }
  }
  .nav.is-open { max-height: 320px; }
  .nav__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    height: auto;
    padding: 60px 0 20px;
  }
  .nav__menu li { width: 100%; }
  .nav__menu a {
    display: block;
    /* 44px of touch height, the minimum recommended target size. */
    padding: 13px 0;
    font-size: 15px;
    border-bottom: 0;
  }

  /* ---- Sections ----
     Two 450px photos side by side leave ~165px each on a phone. */
  .pair {
    flex-direction: column;
    gap: 12px;
    padding-top: 72px;
  }
  /* The heading leads the band here, ahead of the photographs. A percentage
     basis would be read as a height once the band turns into a column, so it
     goes back to sizing on its content. */
  .pair__head {
    order: 0;
    flex: 0 0 auto;
    margin: 0 0 40px;
  }
  .pair__fig { flex: 0 0 auto; }

  .pair__lead { text-align: left; }

  /* The wide rule leans this paragraph on the right gutter with an auto left
     margin. Once the column no longer fits, auto collapses to zero and the text
     lands on the screen edge, so the left gutter has to be stated. */
  .urban__lead {
    text-align: left;
    margin-left: var(--gutter);
  }

  /* One photo per screen, dragged with a finger or stepped with the arrows,
     which drive the scroller here rather than an offset. */
  .track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-right: var(--gutter);
    scrollbar-width: none;
  }
  .track::-webkit-scrollbar { display: none; }
  .track__slide {
    flex: 0 0 calc(100% - 40px);
    scroll-snap-align: start;
  }
  .track__slide img { width: 100%; }
  .track__nav {
    gap: 36px;
    margin-top: 24px;
  }
  /* The arrows are the only pointer control for the row here, so the pseudo
     element lifts the target to 66×46 without moving the arrowhead. */
  .track__arrow { position: relative; }
  .track__arrow::after {
    content: "";
    position: absolute;
    inset: -10px;
  }

  .foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-top: 96px;
  }
  .foot__phone { text-align: left; margin: 0; }
  .book { padding-top: 120px; }

  /* The 200px title is 790px wide on its own, so it has to come down. */
  .pair__title { font-size: 130px; line-height: 104px; }
  .ready { padding-top: 56px; padding-bottom: 80px; }
  .specs {
    grid-template-columns: 1fr;
    /* Stacked, the two lists run together without this: the reader cannot tell
       the flat's own features from the shared ones. */
    row-gap: 34px;
    max-width: 545px;
  }

  .nav__menu {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px 28px;
    height: auto;
    padding: 20px 0;
  }
  .nav__menu a { font-size: 13px; }
}

@media (max-width: 575.98px) {
  .art__title { font-size: 64px; line-height: 56px; }
  .art__lead { font-size: 17px; line-height: 25px; }

  .hero__stage { aspect-ratio: 3 / 4; }
  .hero__title {
    left: 5%;
    /* Clear of the menu button, which sits at the top right on a phone. */
    top: 16%;
    /* At 12cqi the longest word is 380px wide on a 390px screen and clips;
       10.4cqi keeps it inside the gutter. */
    font-size: 10.4cqi;
  }

  /* Side by side these fields are 165px wide, too narrow for a name. The basis
     must be reset: in a column, a 300px flex-basis becomes the field's height. */
  .book__row { flex-direction: column; gap: 10px; }
  .book__row .field { flex: 0 0 auto; }
  .btn-pill { width: 100%; }

  /* The pseudo element extends the touch target to 44px; the icon itself does
     not move. */
  .foot__social a,
  .foot__phone a {
    position: relative;
  }
  .foot__social a::after,
  .foot__phone a::after {
    content: "";
    position: absolute;
    inset: -10px;
  }

  .pair { padding-top: 64px; }
  .pair__title { font-size: 88px; line-height: 72px; }
  .pair__lead { font-size: 17px; line-height: 25px; }
  .specs__list li { font-size: 17px; }
}