/* ============================================================================
   The Guide Library
   Chrome cloned from sandeesellsvegas.com, measured 2026-08-05. See SITE-CHROME.md.
   Palette and type are the live public site. Navy and charcoal are deliberately
   absent: they are the internal Hub tool-app look and appear nowhere on the
   public site.
   ========================================================================== */

:root {
  /* Measured off the live site */
  --brown:      #36231C;   /* header scrolled state, footer */
  --brown-deep: #241611;   /* deeper brown, matches the new cover set */
  --gold:       #CA963F;   /* buttons, rules, accents */
  --cream:      #FDFBF5;   /* library ground: the one deliberate divergence */
  --ink:        #1B1B1B;
  --ink-soft:   #5A524E;
  --hairline:   rgba(54, 35, 28, 0.16);

  /* ---------------------------------------------------------------------
     WOOD PALETTE — the shelf planes.

     >>> THESE ARE NOT DERIVED FROM THE BANNER, AND MUST NOT BE RE-SAMPLED
         FROM IT. <<<

     An earlier version of this comment said they were photo-derived and had to
     be re-sampled whenever the banner changed. THAT RULE WAS WITHDRAWN by Cara
     on 2026-08-05, and following it now would break the page.

     Why: the banner is an evening-lit scene. Sampling it yields #563E2D /
     #322822 / #23201B, which are dark because the whole photograph sits in
     shadow. That is the LIGHTING, not the material. Painting the shelves with
     it would give near-black planes on a cream page in daylight, which reads
     as broken rather than as wood.

     THE BANNER IS A MOOD IMAGE, NOT A COLOUR SOURCE. The two are decoupled.
     These golden values are approved and stay put when the banner changes.
     --------------------------------------------------------------------- */
  --wood-light: #B49269;
  --wood-mid:   #7B6A4A;
  --wood-deep:  #614C33;

  /* Banner focal point. The replacement photo will frame differently, so the
     crop is NEVER baked into markup or into the image file: the banner is
     resized only, and framed here. Keep FOCAL_Y in tools/banner.js in step
     with the vertical value, or the contrast check measures the wrong pixels. */
  --banner-focal: 50% 70%;

  /* Focus ring: TWO-TONE, dark outer line + light inner line. A single-colour
     ring is only visible on some backgrounds, and it fails silently and only
     for keyboard users. Gold measured 2.55:1 on the cream ground against the
     3:1 WCAG 2.2 asks for; this construction measures 4.52:1 at WORST across
     cream, wood, dark and cream covers, the gold pill, the footer and the
     banner. See the audit in SITE-CHROME.md for the full table.
     DELIBERATE DIVERGENCE: the live site uses a 5px red outline, which is an
     artefact of the pojo-a11y plugin we do not clone. Do not "correct" to red. */
  --focus-dark:  #1E1A17;
  --focus-light: #FDFBF5;

  --font-head: Cormorant, Georgia, 'Times New Roman', serif;
  --font-body: Roboto, Arial, Helvetica, sans-serif;

  --header-h-top: 150px;
  --header-h-fixed: 62px;
  --container: 1560px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@font-face {
  font-family: 'Cormorant';
  src: url('/assets/fonts/cormorant-var-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/assets/fonts/roboto-var-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  /* AUDIT FIX 1. The live site inherits Roboto 300 site-wide. This was 400,
     which made every piece of body text, the page title and the footer
     headings a full weight heavier than the original through every visual
     review. Heavier text still looks like text, which is why a side-by-side
     never caught it. */
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
}

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

a { color: inherit; }

.site-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 30px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--brown);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--font-body);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------- HEADER --
   Two states, measured:
   top      transparent, 150px, padding 36px 30px, logo 200x78
   scrolled #36231C,     62px,  padding 10px 30px, logo 108x42
   transition 0.4s ease-in-out
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1001;
  padding: 36px 30px;
  background: transparent;
  transition: background-color 0.4s ease-in-out, padding 0.4s ease-in-out;
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.header__logo img {
  width: 200px;
  height: auto;
  transition: width 0.4s ease-in-out;
}

.header--fixed { background-color: var(--brown); padding: 10px 30px; }
.header--fixed .header__logo img { width: 108px; }

.header__nav { display: flex; align-items: center; }
.header__nav--photo { display: none; }

.site-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu > li { position: relative; }

.site-menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

/* AUDIT FIX 13. The live top-level nav has NO hover feedback at all: colour
   stays white, background stays transparent, no underline. Measured with the
   element in :hover. This had turned it gold, which was invented — the third
   instance of reaching for gold where the live site specifies nothing. */
/* Nav sits on the banner, so it needs the same two-tone treatment. */
.site-menu > li > a:focus-visible { outline: 2px solid var(--focus-dark); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-light); }

/* The live site keeps the CURRENT item white, like every other item — verified
   on /contact/, where Contact is current and still rgb(255,255,255). An earlier
   pass here coloured it gold, which was never part of the clone and made the
   current item nearly invisible over the banner (5th percentile 1.82:1). The
   nav is white, full stop. */

.site-menu .navArrowDest { flex: none; }

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  /* AUDIT FIX 9. Measured off the live DOM, not from a screenshot. The PANEL is
     transparent with flat edges — no border, no shadow — and the LINKS carry the
     background. This clone had it close to inverted: brown panel, white text. */
  min-width: 200px;
  margin: 0;
  padding: 11px 0 0;
  list-style: none;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.sub-menu a {
  display: block;
  /* Resting: black on the site ground token #F3F2F9, which measures 18.88:1.
     Cara read ~#5E6061 off a screenshot; the computed value is pure black and
     the difference was subpixel antialiasing. */
  background: #F3F2F9;
  color: #000;
  line-height: 21px;
  transition: all 0.4s;
  padding: 8px 14px;
  /* AUDIT FIX 8. Live submenu links are uppercase at 0.7px tracking. This had
     text-transform: none at 0.3px, which was my choice, not the live site.
     NOTE: the panel background, text colour and width are AUDIT ITEM 9 and are
     deliberately NOT changed here — Cara is reading the live dropdown. */
  text-transform: uppercase;
  letter-spacing: 0.7px;
  white-space: normal;
}

/* KNOWN INHERITED DEFECT — cloned deliberately, NOT approved as good.
   Live hover is brand gold #CA963F with WHITE text, measured off the live DOM
   with the element genuinely in :hover. That is 2.64:1, which fails 4.5:1 for
   normal text AND the 3:1 large-text threshold. There is no reading that passes.
   Cloned on Cara.s decision (2026-08-05) because matching the site is the whole
   premise of this build, and fixing it only here would leave every other page
   broken. She is raising it with Agent Image.
   >>> IF A FUTURE AUDIT FLAGS THIS AS A DIVERGENCE, THAT MEANS THE LIVE SITE
       HAS BEEN FIXED. Update this to match rather than re-cloning the defect.
       The fix they are being handed is #36231C text on the same gold = 5.62:1. */
.sub-menu a:hover,
.sub-menu a:focus-visible { background: var(--gold); color: #fff; }
.site-menu > li:hover > .sub-menu,
.site-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.header__nav--contactInfo { display: none; }

.header__info { display: flex; align-items: center; gap: 26px; }

.tel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  /* AUDIT FIX 7. Live phone link tracks at 1.96px, not 0.7px. */
  letter-spacing: 1.96px;
}
.tel-link:hover, .tel-link:focus-visible { color: var(--gold); }

.header__brokerage img { width: 125px; height: auto; }
.header--fixed .header__brokerage img { width: 100px; }

.header__burgerMenu { display: none; }
.header__burgerMenu button {
  width: 40px; height: 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 5px 0;
  background: none; border: 0; cursor: pointer;
}
.header__burgerMenu span {
  display: block; height: 2px; width: 100%;
  background: #fff;
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}
.header__burgerMenu button[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header__burgerMenu button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burgerMenu button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------------------------------------------------------------- BANNER -- */

.banner {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--brown-deep);
}

.banner picture, .banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.banner img { object-fit: cover; object-position: var(--banner-focal); }

/* SCRIM. The nav is white text sitting on this. If you change the top stop,
   change SCRIM in tools/banner.js in the same commit and re-run the check,
   or the check silently starts measuring something the page does not do.
   TOP STOP CAME FROM THE CHECK, NOT FROM TASTE. The live site uses 0.55; this
   uses 0.62, a small margin over it, because this photo is lighter in the nav
   strip than the Strip photo the live site carries. White nav text measures
   5.90:1 at the 5th percentile with 0% of the strip below 4.5:1.
   Re-run tools/banner.js after ANY banner or scrim change. */
.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(36, 22, 17, 0.55) 0%, rgba(36, 22, 17, 0.16) 46%, rgba(36, 22, 17, 0.45) 100%);
}

.banner__inner {
  position: relative;
  z-index: 1;
  padding-top: 150px;
  padding-bottom: 26px;
}

.banner__title {
  margin: 0;
  font-family: var(--font-head);
  /* AUDIT FIX 2 + 4. Live h1 is Cormorant 300 and inherits the 1.7 line
     height, giving an 82px box at 48px. This was 400 at 1.15 (a 55px box). */
  font-weight: 300;
  font-size: 48px;
  line-height: 1.7;
  color: #fff;
}

.banner__crumbs ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  /* AUDIT FIX 5 + 12. Live breadcrumb is 14px at 1.96px tracking, spaced with
     padding-top 4px. This was 13px at 1.2px with a 10px top margin. */
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
  font-size: 14px;
  letter-spacing: 1.96px;
  text-transform: uppercase;
  color: #fff;
}
.banner__crumbs a { color: #fff; text-decoration: none; }
/* The live site keeps the WHOLE breadcrumb white, current item included —
   verified on /contact/, where the Contact crumb computes to rgb(255,255,255).
   An earlier pass here made the current crumb gold. That was never part of the
   clone, and over the banner it measured 2.54:1 against a required 4.5:1, with
   up to 83% of the crumb zone below threshold. Second instance of the same
   mistake as the gold nav item. Hover is an underline, not a colour change,
   so no transient state drops below contrast either. */
.banner__crumbs a:hover, .banner__crumbs a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.banner__crumbs .sep { opacity: 0.6; }

/* ------------------------------------------------------------------ MAIN -- */

main { background: var(--cream); }

.library {
  padding-block: 72px 96px;
}

.library__lede {
  max-width: 720px;
  margin: 0 0 8px;
}

.library__lede h2 {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--brown);
}

.library__lede p {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 62ch;
}

.rule-gold {
  height: 1px;
  border: 0;
  margin: 40px 0 0;
  background: linear-gradient(to right, var(--gold), rgba(202, 150, 63, 0.15) 60%, transparent);
}

/* ------------------------------------------------------------- FRESHNESS --
   Sits above the flipbook or the tool. Quiet and on brand: a gold rule, not a
   red warning banner and not an apology. Driven purely by the published date,
   with no per-item override anywhere in the system.
   -------------------------------------------------------------------------- */

.freshness {
  max-width: 780px;
  margin: 0 0 34px;
  padding: 22px 26px 24px;
  background: #fff;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--hairline);
}

.freshness p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 62ch;
}

.freshness__cta {
  display: inline-block;
  padding: 13px 26px;
  background: var(--gold);
  color: #fff;
  font-size: 13px;
  letter-spacing: 2.72px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 16px;
  transition: background-color 0.2s var(--ease);
}
.freshness__cta:hover,
.freshness__cta:focus-visible { background: var(--brown); color: #fff; }

@media (max-width: 575px) {
  .freshness { padding: 18px 18px 20px; }
  .freshness__cta { display: block; text-align: center; letter-spacing: 2px; }
}

/* ---------------------------------------------------------------- FOOTER -- */

.footer {
  background: var(--brown);
  color: #fff;
  font-family: var(--font-body);
  /* AUDIT FIX 6. Live footer base is 16px; everything inside inherits it. */
  font-size: 16px;
}

.footer__container { padding-block: 64px 30px; }

.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 34px;
}

.footer h2 {
  font-family: var(--font-head);
  font-size: 24px;
  /* AUDIT FIX 3 + 11. Live footer h2 is 300, spaced with padding-bottom 16px. */
  font-weight: 300;
  letter-spacing: 0.95px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  padding: 0 0 16px;
}

.footer ul { margin: 0; padding: 0; list-style: none; }
/* AUDIT FIX 6b. The footer BASE is 16px, but every text item inside it is 14px
   on the live site, spaced with padding on the li rather than a margin. Raising
   the base to 16px without this made the footer links a size too large — caught
   by re-running the audit after the first round of fixes. */
.footer__nav li { padding: 8px 0; }
.footer__nav a { font-size: 14px; }
.footer__contactInfo li { padding: 8px 0; font-size: 14px; }
.footer a { color: #fff; text-decoration: none; }
/* AUDIT FIX 14. Live footer links hover to #D6BBB0, a warm pale taupe. This had
   them going gold, invented the same way as 13. */
.footer a:hover, .footer a:focus-visible { color: #D6BBB0; }

.footer__icons { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.footer__icons--logo img { width: 172px; }
.footer__icons--brokerage { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

/* The live site paints these two lockups white with `filter: invert(1)` on black
   artwork. We ship REAL WHITE ASSETS instead and use no filter at all, because a
   runtime filter is fragile in three ways: it is dropped or mishandled by some
   print stylesheets, it fights forced-colors / high-contrast mode, and it breaks
   silently the day the artwork stops being pure black. Same appearance, no filter.
   The site logo is full colour and was never inverted. */
.footer__icons--brokerage img { width: 119px; }

.footer__icons--socials ul { display: flex; gap: 10px; flex-wrap: wrap; }
.agt-icon { font-style: normal; font-family: var(--font-head); font-size: 20px; line-height: 1; }
.footer__icons--socials a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  font-size: 18px;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.footer__icons--socials a:hover,
.footer__icons--socials a:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 26px; }
.footer__bottom--disclaimer { display: flex; gap: 30px; align-items: flex-start; justify-content: space-between; }
.footer__bottom--disclaimer p { margin: 0; max-width: 900px; font-size: 14px; line-height: 1.7; }
.footer__bottom--logos { display: flex; gap: 12px; font-size: 26px; flex: none; }
.footer__bottom--copyright ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.footer__bottom--copyright li { font-size: 14px; padding: 3px 0; }
.footer__bottom--copyright a { text-decoration: underline; }

/* -------------------------------------------------------------- FOCUS A11Y -- */

:focus-visible {
  outline: 2px solid var(--focus-dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-light);
}

/* ------------------------------------------------------------- BREAKPOINTS -- */

@media (max-width: 1199px) {
  .site-menu { gap: 18px; }
  .site-menu a { font-size: 13px; }
}

@media (max-width: 991px) {
  .header { padding: 18px 20px; }
  .header--fixed { padding: 10px 20px; }
  .header__logo img { width: 150px; }
  .header--fixed .header__logo img { width: 108px; }

  .header__burgerMenu { display: block; }
  .header__contactInfo { display: none; }
  .header__brokerage { display: none; }

  .header__nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 100%);
    background: var(--brown);
    flex-direction: column;
    align-items: stretch;
    padding: 96px 28px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    visibility: hidden;
  }
  .header__nav[data-open="true"] { transform: none; visibility: visible; }

  .header__nav--photo { display: block; margin-bottom: 24px; }
  .header__nav--photo img { width: 100%; height: 180px; object-fit: cover; object-position: top center; }

  .site-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .site-menu > li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .site-menu a { display: flex; justify-content: space-between; padding: 15px 0; font-size: 15px; }

  .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    padding: 0 0 12px 14px;
    background: transparent;
  }
  .site-menu > li[data-open="true"] > .sub-menu { display: block; }
  .sub-menu a { padding: 9px 0; font-size: 14px; opacity: 0.86; }

  .header__nav--contactInfo { display: block; margin-top: 26px; }

  .banner { min-height: 210px; }
  .banner__inner { padding-top: 96px; padding-bottom: 20px; }
  .banner__title { font-size: 34px; }

  .site-container { padding-inline: 20px; }

  .footer__top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer__icons { grid-column: 1 / -1; align-items: flex-start; }
  .footer__icons--brokerage { align-items: flex-start; }
  .footer__bottom--disclaimer { flex-direction: column; gap: 18px; }
}

@media (max-width: 575px) {
  .library { padding-block: 48px 64px; }
  .library__lede h2 { font-size: 28px; }
  .banner__title { font-size: 28px; }
  .gate1 { padding: 24px 22px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__container { padding-block: 46px 26px; }
}

/* ------------------------------------------------------- REDUCED MOTION -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}