/* ---------------------------------------------------------------------------
   Hancock Park Location — property microsite
   Single committed dark treatment. The photographs carry all the colour;
   everything else stays close to monochrome.
   --------------------------------------------------------------------------- */

:root {
  /* Ground and surfaces — warm near-black, taken from the dark stained timber */
  --ink-0: #0F0E0D;
  --ink-1: #161513;
  --ink-2: #1F1D1A;
  --rule:  #2B2825;
  --rule-2:#565049;

  /* Text. Contrast against --ink-0, checked in tests/site.test.mjs:
     --text 15.4:1, --text-2 10.5:1, --text-3 7.3:1. The small mono labels use
     --text-3, so it carries the tightest requirement. */
  --text:   #EAE5DC;
  --text-2: #C6BEB2;
  --text-3: #A79E92;

  /* The one accent: dusty brick, from the house itself. Used sparingly, and
     bright enough to mark a link at 6.9:1. */
  --clay:     #D08A70;
  --clay-dim: #96604B;

  /* Link furniture — an underline you can actually see. */
  --link-rule:       #7E6A5F;
  --link-rule-hover: var(--clay);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(20px, 4.5vw, 64px);
  --measure: 62ch;
  --gap: clamp(8px, 1.1vw, 14px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--body);
  font-optical-sizing: auto;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  background: var(--ink-2);
  color: var(--text);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 13px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --- shared type roles ---------------------------------------------------- */

.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}

.rule-label {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rule-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--clay-dim);
  flex: none;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* --- header --------------------------------------------------------------- */

.topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  padding-block: clamp(20px, 3vw, 34px);
}
.topbar .shell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.wordmark {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: color .2s ease;
}
.wordmark:hover, .wordmark:focus-visible { color: var(--clay); }
.topbar nav {
  display: flex;
  gap: clamp(14px, 2.5vw, 30px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Navigation links carry a standing underline, not one that appears on hover —
   a link nobody can identify as a link is not a link. */
.topbar nav a {
  color: var(--text);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--link-rule);
  transition: color .2s ease, border-color .2s ease;
}
.topbar nav a:hover,
.topbar nav a:focus-visible { color: var(--clay); border-bottom-color: var(--link-rule-hover); }

/* Inquire is the one action on the page, so it gets the accent outright. */
.topbar nav .nav-inquire {
  color: var(--clay);
  border: 1px solid var(--clay);
  border-radius: 2px;
  padding: 6px 12px 5px;
  margin-top: -7px;
  transition: color .2s ease, background-color .2s ease;
}
.topbar nav .nav-inquire:hover,
.topbar nav .nav-inquire:focus-visible {
  color: var(--ink-0);
  background: var(--clay);
  border-color: var(--clay);
}

/* Below tablet the section links are dropped — the page is short enough to
   scroll and only the inquiry link earns its place. */
@media (max-width: 719px) {
  .topbar nav a:not(.nav-inquire) { display: none; }
  .wordmark { letter-spacing: .14em; }
}

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(540px, 88vh, 900px);
  display: grid;
  align-items: end;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(15,14,13,.66) 0%, rgba(15,14,13,.14) 22%, rgba(15,14,13,0) 40%),
    linear-gradient(to top,    rgba(15,14,13,1) 0%, rgba(15,14,13,.97) 9%, rgba(15,14,13,.82) 24%, rgba(15,14,13,.34) 52%, rgba(15,14,13,0) 74%);
}
.hero-body {
  position: relative;
  z-index: 2;
  padding-block: clamp(40px, 7vw, 84px);
}
/* Over photography the quiet label colour loses the contrast fight — the hero
   gets the full-strength text colour and a brighter rule. */
.hero .label { color: var(--text); }
.hero .rule-label::before { background: var(--clay); width: 34px; }

.hero h1 {
  font-size: clamp(38px, 7.2vw, 82px);
  line-height: .98;
  letter-spacing: -.035em;
  font-stretch: 100%;
  max-width: 15ch;
  margin: 22px 0 26px;
}
.hero-sub {
  font-family: var(--mono);
  font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

/* A compact production credential, not an advertisement. Sized and weighted to
   sit under the headline rather than compete with it, on its own dark plate so
   it stays legible wherever the photograph is bright. */
.credential {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 24px 0 0;
  padding: 11px 16px 10px;
  background: rgba(15, 14, 13, .72);
  border: 1px solid rgba(208, 138, 112, .5);
  border-left: 2px solid var(--clay);
  border-radius: 2px;
  max-width: 100%;
}
.credential-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clay);
  white-space: nowrap;
}
.credential-line {
  font-family: var(--body);
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.35;
  color: var(--text);
}

/* --- scroll prompt -------------------------------------------------------- */

.hero-shell {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.hero-text { min-width: 0; }

.scroll-prompt {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 6px 4px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease;
}
.scroll-prompt:hover,
.scroll-prompt:focus-visible { color: var(--clay); }

.scroll-prompt svg {
  display: block;
  overflow: visible;
  animation: nudge 2.6s cubic-bezier(.4, 0, .3, 1) infinite;
}
.scroll-prompt:hover svg { animation-play-state: paused; transform: translateY(5px); }

@keyframes nudge {
  0%, 62%, 100% { transform: translateY(0); opacity: .85; }
  30%           { transform: translateY(7px); opacity: 1; }
}

/* Motion is decoration here — the label already says what the control does. */
@media (prefers-reduced-motion: reduce) {
  .scroll-prompt svg { animation: none; opacity: 1; }
}

/* On a phone the prompt sits below the subtitle, laid out along the line
   rather than stacked, so it never crowds the headline or the house. */
@media (max-width: 759px) {
  .hero-shell { flex-direction: column; align-items: flex-start; gap: 0; }
  .scroll-prompt {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding-left: 0;
    letter-spacing: .16em;
  }
}

/* --- sections ------------------------------------------------------------- */

.section { padding-block: clamp(64px, 9vw, 130px); }
.section + .section { padding-top: 0; }
.section--ruled { border-top: 1px solid var(--rule); padding-top: clamp(56px, 8vw, 110px); }

/* The photographs now open the page. A hairline directly under the hero would
   read as a seam, so the first section after it carries none. */
.hero + .section--ruled { border-top: none; }

.split {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split > .split-aside { position: sticky; top: 48px; align-self: start; }
}

.section-title {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.06;
  margin: 18px 0 0;
}

.prose { max-width: var(--measure); color: var(--text); }
.prose p + p { margin-top: 1.1em; }
.prose p:first-of-type {
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.5;
  color: var(--text);
}
.prose p:not(:first-of-type) { color: var(--text-2); }

/* --- spaces --------------------------------------------------------------- */

.spaces {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  grid-template-columns: 1fr;
  margin-top: clamp(36px, 5vw, 60px);
}
@media (min-width: 640px) { .spaces { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .spaces { grid-template-columns: repeat(3, 1fr); } }

.spaces ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.spaces li {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 17px;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.spaces li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  background: var(--clay-dim);
  transform: translateY(-3px);
}

.spaces-note {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 14px 0 0;
}

/* --- galleries ------------------------------------------------------------ */

.gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.gallery-head h2 { font-size: clamp(22px, 2.6vw, 30px); }
.gallery-head .kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-2);
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.grid > figure { grid-column: span 12; margin: 0; }
@media (min-width: 760px) {
  .grid > figure[data-span="6"] { grid-column: span 6; }
  .grid > figure[data-span="4"] { grid-column: span 4; }
  .grid > figure[data-span="8"] { grid-column: span 8; }
}

.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink-2);
  aspect-ratio: 39 / 25;
  overflow: hidden;
  cursor: zoom-in;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1), opacity .4s ease;
}
.shot:hover img { transform: scale(1.022); }

/* A standing "Enlarge" chip, so it is obvious the photographs open. Visible at
   rest, not only on hover — a hover-only affordance does not exist on a phone. */
.shot::after {
  content: "Enlarge";
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(15, 14, 13, .78);
  border: 1px solid rgba(234, 229, 220, .34);
  border-radius: 2px;
  padding: 5px 9px 4px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.shot:hover::after,
.shot:focus-visible::after {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--ink-0);
}
.shot--pending::after { content: none; }

/* A photograph that hasn't arrived yet. Deliberately a designed panel — a drawn
   mark, the room name, a short note — so it reads as pending, not broken. */
.shot--pending {
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 24px;
  border: 1px solid var(--rule-2);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      rgba(234, 229, 220, .022) 11px 22px
    ),
    var(--ink-1);
}
.shot--pending .pending-mark { color: var(--clay); opacity: .8; margin-bottom: 14px; }
.shot--pending .pending-mark svg { display: block; }
.shot--pending .pending-title {
  font-family: var(--display);
  font-stretch: 106%;
  font-weight: 600;
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--text);
  margin: 0;
}
.shot--pending .pending-note {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 8px 0 0;
}

figcaption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-2);
  margin-top: 9px;
}

/* --- video tour ------------------------------------------------------------ */

.video-lede {
  color: var(--text-2);
  max-width: 52ch;
  margin: 18px 0 clamp(26px, 3.5vw, 40px);
  font-size: 19px;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--ink-1);
  border: 1px solid var(--rule-2);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The facade. No YouTube request of any kind is made until this is pressed —
   not the player, not the script, not even the thumbnail. */
.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  border: 0;
  cursor: pointer;
  color: var(--text);
  background:
    radial-gradient(ellipse at 50% 45%, rgba(208, 138, 112, .12) 0%, transparent 62%),
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(234, 229, 220, .022) 11px 22px),
    var(--ink-1);
  transition: background-color .3s ease;
}
.video-play-mark { color: var(--clay); transition: transform .3s ease, opacity .3s ease; }
.video-play-mark svg { display: block; }
.video-play:hover .video-play-mark { transform: scale(1.05); }
.video-play-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
}
.video-play:hover .video-play-label { color: var(--clay); }

.video-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  margin: 12px 0 0;
}

/* Nothing to press yet — a designed panel, not a dead player. */
.video-frame--pending { border-style: solid; }
.video-pending {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(208, 138, 112, .07) 0%, transparent 62%),
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(234, 229, 220, .022) 11px 22px),
    var(--ink-1);
}
.video-play-mark--quiet { color: var(--clay); opacity: .75; margin-bottom: 12px; }
.video-pending-title {
  font-family: var(--display);
  font-stretch: 106%;
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 24px);
  color: var(--text);
  margin: 0;
}
.video-pending-line {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-2);
  margin: 10px 0 0;
  max-width: 40ch;
}

/* --- inquiry -------------------------------------------------------------- */

.inquiry { border-top: 1px solid var(--rule); }
.inquiry h2 {
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.02;
  margin-top: 18px;
}
.inquiry .lede {
  color: var(--text-2);
  max-width: 46ch;
  margin-top: 18px;
  font-size: 19px;
}
.card {
  border-top: 1px solid var(--rule);
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 36px);
}
.card .who { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 4px; }
.card .name { font-family: var(--display); font-stretch: 106%; font-weight: 600; font-size: 22px; margin: 0 0 22px; }
.contact-links { display: grid; gap: 10px; }
.contact-links a {
  font-family: var(--display);
  font-stretch: 100%;
  font-weight: 500;
  font-size: clamp(19px, 2.6vw, 30px);
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--text);
  border-bottom: 2px solid var(--clay);
  padding-bottom: 6px;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: color .2s ease, border-color .2s ease;
}
.contact-links a:hover,
.contact-links a:focus-visible { color: var(--clay); }
.contact-note {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-2);
  margin-top: 22px;
  line-height: 1.7;
  max-width: 52ch;
}

/* --- footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: clamp(60px, 8vw, 110px);
  padding-block: 34px 46px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--text-2);
  line-height: 1.8;
}
.site-footer .shell { display: flex; }
.site-footer p { margin: 0; }
.representation {
  font-family: var(--display);
  font-stretch: 106%;
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--text);
}

/* --- lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(9, 8, 8, .96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 48px);
}
.lightbox[open], .lightbox.is-open { display: flex; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; }
.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox figcaption { margin-top: 12px; text-align: center; }
.lightbox-close {
  position: absolute;
  top: clamp(12px, 2.4vw, 28px);
  right: clamp(12px, 2.4vw, 28px);
  background: rgba(15, 14, 13, .6);
  border: 1px solid var(--clay);
  color: var(--clay);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 15px 9px;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.lightbox-close:hover,
.lightbox-close:focus-visible { color: var(--ink-0); background: var(--clay); }