/* site-chrome.css - header, nav, drawer and footer styling, extracted
 * from amanda/index.html's inline <style> on 2026-08-07.
 *
 * WHY: subpages carry the chrome MARKUP but the rules only ever existed
 * inline on the homepage, so the nav rendered as unstyled links. This
 * file is the shared copy. If you restyle the homepage header or footer,
 * re-run templates/tools/extract-site-chrome-css.py and bump the ?v= on
 * every page that links this file, or subpages keep the old look.
 *
 * Generated - do not hand-edit.
 */
:root{
    --ink:#0A0A0A;
    --soft-ink:#2A2A2A;
    --cream:#F8F4ED;
    --cream-deep:#EEE7D8;
    --warm-grey:#7A6E5F;
    --rule:rgba(10,10,10,.18);
    --rule-soft:rgba(10,10,10,.08);
  }
footer{padding:80px 36px 40px;background:var(--cream);border-top:1px solid var(--rule)}
footer .inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px}
footer h4{font-family:'Inter';font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-body-sm);color:var(--soft-ink)}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--ink)}
footer .brand{font-family:'Cormorant Garamond',serif;font-size:var(--fs-h3);letter-spacing:.22em;text-transform:uppercase;font-weight:500;margin-bottom:8px}
footer .brand-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:var(--fs-body-sm);color:var(--warm-grey);margin-bottom:18px}
footer .bio{font-family:'Cormorant Garamond',serif;font-size:var(--fs-body);line-height:1.7;color:var(--soft-ink);max-width:280px}
footer .copy{margin-top:60px;padding-top:30px;border-top:1px solid var(--rule-soft);display:flex;justify-content:space-between;font-size:var(--fs-ui);color:var(--warm-grey);font-family:'Inter'}
.top-nav .dd-parent{position:relative;display:inline-flex;align-items:center}
.top-nav .dd-label{color:var(--ink);text-decoration:none;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:color .15s}
.top-nav .dd-label:hover,.top-nav .dd-parent.active .dd-label{color:var(--warm-grey)}
.top-nav .dd-arrow{font-size:.7em;opacity:.6;transition:transform .2s}
.top-nav .dd-parent:hover .dd-arrow,.top-nav .dd-parent:focus-within .dd-arrow{transform:translateY(2px);opacity:1}
.top-nav .dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:var(--cream);border:1px solid var(--rule);box-shadow:0 12px 32px rgba(10,10,10,.08);padding:10px 0;min-width:200px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,visibility .15s,transform .15s;z-index:100;margin-top:18px}
.top-nav .dd-parent:hover .dd-menu,.top-nav .dd-parent:focus-within .dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.top-nav .dd-menu a{display:block;padding:9px 22px;color:var(--ink);text-decoration:none;font-family:'Inter',sans-serif;font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;transition:background .12s,color .12s}
.top-nav .dd-menu a:hover{background:var(--cream-deep);color:var(--warm-grey)}
.top-nav .dd-menu a.active{color:var(--warm-grey)}
.top-nav .dd-parent{flex-direction:column;align-items:flex-start;gap:6px}
.top-nav .dd-menu{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;border:0;box-shadow:none;background:transparent;padding:0;margin:4px 0 0 14px;min-width:0}
.top-nav .dd-menu a{padding:3px 0;font-size:.6rem;letter-spacing:.1em;color:var(--warm-grey)}
.site-header{position:sticky;top:0;background:rgba(248,244,237,.96);backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--rule);z-index:50}
.header-inner{max-width:1400px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{flex-shrink:0;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.4rem;letter-spacing:.22em;text-transform:uppercase}
.brand-role{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:.74rem;letter-spacing:.14em;color:var(--warm-grey);margin-top:3px}
.primary-nav{display:flex;align-items:center;gap:24px;font-family:'Inter',sans-serif;font-size:var(--fs-eyebrow,.6875rem);font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin:0;padding:0;list-style:none}
.primary-nav>a,.primary-nav .dd-label{color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .15s;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;display:inline-flex;align-items:center;gap:5px}
.primary-nav>a:hover,.primary-nav .dd-label:hover{color:var(--warm-grey)}
.primary-nav>a.active,.primary-nav .dd-parent.active>.dd-label{color:var(--warm-grey)}
.primary-nav .dd-arrow{font-size:.7em;opacity:.55;transition:transform .2s,opacity .2s}
.primary-nav .dd-parent{position:relative}
.primary-nav .dd-parent:hover .dd-arrow,.primary-nav .dd-parent:focus-within .dd-arrow{opacity:1;transform:translateY(2px)}
.primary-nav .dd-menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-4px);background:var(--cream);border:1px solid var(--rule);box-shadow:0 12px 32px rgba(10,10,10,.10);padding:10px 0;min-width:200px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,visibility .15s,transform .15s;z-index:60}
.primary-nav .dd-parent:hover .dd-menu,.primary-nav .dd-parent:focus-within .dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.primary-nav .dd-menu a{display:block;padding:9px 22px;color:var(--ink);text-decoration:none;font-family:'Inter',sans-serif;font-weight:500;font-size:var(--fs-eyebrow,.6875rem);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:background .12s,color .12s}
.primary-nav .dd-menu a:hover{background:var(--cream-deep);color:var(--warm-grey)}
.primary-nav .dd-menu a.active{color:var(--warm-grey)}
.header-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:transparent;color:var(--ink);border:1px solid var(--ink);font-family:'Inter';font-weight:600;font-size:var(--fs-ui,.8125rem);letter-spacing:.06em;text-decoration:none;transition:background .15s,color .15s;border-radius:2px;white-space:nowrap}
.header-cta:hover{background:var(--ink);color:var(--cream)}
.header-cta .cta-icon{font-size:.85em}
footer .studio-footer-link{margin-top:20px;text-align:right;font-family:'Inter';font-size:var(--fs-ui,.8125rem);letter-spacing:.08em}
footer .studio-footer-link a{color:var(--warm-grey);text-decoration:none;border-bottom:1px dotted var(--warm-grey);padding-bottom:2px;transition:color .15s,border-color .15s}
footer .studio-footer-link a:hover{color:var(--ink);border-color:var(--ink)}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:transparent;border:0;cursor:pointer;padding:0;flex-shrink:0}
.hamburger span{display:block;width:24px;height:1.5px;background:var(--ink);margin:0 auto;transition:transform .25s,opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer-overlay{position:fixed;inset:0;background:rgba(10,10,10,.55);opacity:0;transition:opacity .25s;z-index:90}
.drawer-overlay[hidden]{display:none}
.drawer-overlay.open{opacity:1}
.drawer{position:fixed;top:0;right:0;width:min(360px,86vw);height:100vh;background:var(--cream);box-shadow:-20px 0 60px rgba(10,10,10,.25);transform:translateX(100%);transition:transform .3s ease;z-index:100;display:flex;flex-direction:column;overflow-y:auto}
.drawer[hidden]{display:none}
.drawer.open{transform:translateX(0)}
.drawer-header{padding:22px 28px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule)}
.drawer-brand{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.drawer-close{background:transparent;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--ink);padding:0 4px;font-family:Georgia,serif}
.drawer-nav{flex:1;padding:18px 0;display:flex;flex-direction:column}
.drawer-nav a{padding:13px 28px;color:var(--ink);text-decoration:none;font-family:'Inter';font-weight:500;font-size:var(--fs-body-sm,.9375rem);letter-spacing:.06em;border-left:3px solid transparent;transition:background .12s,border-color .12s,color .12s}
.drawer-nav a:hover,.drawer-nav a.active{background:var(--cream-deep);border-left-color:#A88A4C;color:var(--warm-grey)}
.drawer-group{padding:18px 28px 6px;font-family:'Inter';font-weight:700;font-size:var(--fs-eyebrow,.6875rem);letter-spacing:.22em;text-transform:uppercase;color:var(--warm-grey)}
.drawer-cta{margin:18px 28px 28px;padding:14px 22px;background:var(--ink);color:var(--cream);font-family:'Inter';font-weight:600;font-size:var(--fs-ui,.8125rem);letter-spacing:.06em;text-decoration:none;text-align:center;border-radius:2px;display:block}
@media (max-width: 980px) {
  .hamburger { display: flex; }
  .header-inner { padding: 14px 22px; }
  .brand-name { font-size: 1.2rem; }
  .brand-role { font-size: .7rem; }
  .primary-nav, .header-actions { display: none !important; }
}
/* Variables the chrome rules reference but that live in
 * common-manhattan.css, which subpages do NOT link. Copied here so this
 * file stands alone - otherwise every var() fell back to nothing and the
 * footer/nav rendered at browser-default sizes. */
:root{--fs-body:1.0625rem;--fs-body-sm:.9375rem;--fs-eyebrow:.6875rem;--fs-h3:clamp(1.5rem,3vw,2rem);--fs-ui:.8125rem;}

/* ------------------------------------------------------------------
   Legacy-footer overrides.

   amanda/styles.css is a stylesheet from an OLDER site design. The homepage
   does not link it at all (its chrome is inline), but the 441 pages under
   /listings/ do. That old design had a DARK sage footer with pale text:

       footer        { background: var(--sage-deep); color: rgba(247,242,232,.75) }
       footer ul a   { color: rgba(247,242,232,.75) }
       footer h4     { color: var(--copper-soft) }

   The current footer is CREAM. `footer ul a` is specificity (0,0,3) and beat
   the (0,0,2) rules above, so on every listing page the footer links rendered
   near-white on near-white - measured 1.01:1, i.e. completely invisible. That
   is what Chris saw in the screenshot.

   These rules match that specificity and, because this file loads after
   styles.css, win the cascade. Do not "simplify" them to bare `footer a`;
   that loses to `footer ul a` and the bug comes straight back.
   ------------------------------------------------------------------ */
footer{background:var(--cream);color:var(--soft-ink)}
footer h4{color:var(--ink)}
footer ul{color:var(--soft-ink)}
footer ul a{color:var(--soft-ink)}
footer ul a:hover{color:var(--ink)}
footer p{color:var(--soft-ink)}
footer .bottom{color:var(--warm-grey)}
footer .bottom .badges span{border-color:var(--rule);color:var(--warm-grey)}


/* HEADER ACTIONS (PHONE CTA + CLIENT SIGN IN BUTTONS) */
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.header-cta,
.portal-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  height: 36px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 1px 3px rgba(10,10,10,0.06) !important;
}

.header-cta {
  background: var(--cream-deep, #EEE7D8) !important;
  color: var(--ink, #0A0A0A) !important;
  border: 1px solid var(--rule, rgba(10,10,10,0.18)) !important;
}

.portal-chip {
  background: var(--ink, #0A0A0A) !important;
  color: #ffffff !important;
  border: 1px solid var(--ink, #0A0A0A) !important;
}

.header-cta:hover {
  background: var(--ink, #0A0A0A) !important;
  color: #ffffff !important;
  border-color: var(--ink, #0A0A0A) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(10,10,10,0.12) !important;
}

.portal-chip:hover {
  background: #7A6E5F !important;
  color: #ffffff !important;
  border-color: #7A6E5F !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(10,10,10,0.14) !important;
}

.header-cta .cta-icon,
.portal-chip .chip-icon {
  font-size: 0.85rem !important;
  line-height: 1 !important;
}

.portal-chip .chip-label {
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  .header-actions { display: none !important; }
}


/* COMPACT SINGLE-ROW NAV HEADER */
.site-header .header-inner {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 12px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

.primary-nav {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

.primary-nav > a,
.primary-nav .dd-label {
  white-space: nowrap !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.header-cta,
.portal-chip {
  height: 34px !important;
  padding: 6px 12px !important;
  font-size: 0.70rem !important;
  letter-spacing: 0.10em !important;
}