/* ==================================================================
   The Keystone (1332–1336 N 2nd St) — property identity.
   Loaded after styles.css. The shared framework (styles.css, main.js,
   availability.js, map.js) stays identical to 315 N 2nd St; everything
   that makes this site look like *this* building lives here.

   Theme: a Midtown corner in buff-and-grey stone. Bottle green (the Midtown Scholar awnings),
   antique brass (--brick is the accent token; it was brick red before the
   user asked for less red), linen paper; 1930s type (Bodoni + a
   Futura-style sans); arch-and-keystone motifs; sections read as chapters.
   ================================================================== */
/* Bodoni draws hyphens and dashes as hairlines that vanish ("1–2", "Brand-new",
   phone numbers). This face covers only those characters, using the Jost file
   the page already loads, and sits first in the serif stacks below. */
@font-face {
  font-family: "Bodoni Dash";
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v20/92zatBhPNqw73oTd4g.woff2) format("woff2");
  unicode-range: U+002D, U+2010-2015, U+2212;
}
:root {
  --paper: #F5EFE4;
  --paper-2: #ECE3D3;
  --paper-3: #DCCFB9;
  --ink: #1D2B25;
  --ink-2: #34423B;
  --ink-soft: #5E6A62;
  --river: #2C5140;          /* bottle green */
  --river-deep: #1D3A2D;     /* deep bottle green */
  --sage-soft: #E6D3AE;
  --brass: #A98245;          /* antique brass */
  --brass-text: #7A5A26;
  --sage-bar: #F0E4CF;       /* buff limestone */
  --line: rgba(29, 43, 37, .16);
  --line-light: rgba(245, 239, 228, .22);

  --brick: #A98245;          /* accent (antique brass) */
  --brick-hi: #BD9658;
  --brick-deep: #DCCFB9;
  --peach: #E2C58F;          /* pale brass, accent on dark green */
  --sign-blue: #17599C;      /* Harrisburg street signs */

  --serif: "Bodoni Dash", "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --period: "Bodoni Dash", "Bodoni Moda", Didot, Georgia, serif;
  --sans: "Jost", Futura, "Century Gothic", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Type ---------- */
/* Pin Bodoni to a small optical size everywhere: same Didone style, but much
   sturdier hairlines than the display cut the browser would pick at large sizes
   (user found the thin strokes too thin). Jost has no opsz axis, so it ignores this. */
body { font-optical-sizing: none; font-variation-settings: "opsz" 12; }
.title { letter-spacing: .01em; line-height: 1.02; }
.title--xl { font-size: clamp(44px, 6.8vw, 98px); }
.title--lg { font-size: clamp(36px, 5vw, 74px); }
.page-banner .title { font-size: clamp(34px, 10.4vw, 132px); } /* "AVAILABILITY" must fit a 320-375px phone */
.intro-title { font-size: clamp(24px, 4.9vw, 66px); }
.collage--text .c-copy .title--xl { font-size: clamp(46px, 6.2vw, 92px); }
h1 em, h2 em, h3 em { color: var(--brass-text); }
.on-dark h1 em, .on-dark h2 em, .on-dark h3 em, .on-dark .eyebrow, .page-banner .ornament,
.site-footer h3 { color: var(--peach); }
.dropcap::first-letter { font-weight: 500; }

/* Eyebrows: Deco caps, with an optional italic "Chapter" numeral */
.eyebrow { font-family: var(--sans); font-style: normal; font-variant: normal; font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.eyebrow::before, .eyebrow::after { width: 26px; }
.eyebrow .ch { font-family: var(--serif); font-style: italic; font-size: 19px; letter-spacing: .02em; text-transform: none; }
.eyebrow .ch::after { content: "·"; font-style: normal; margin: 0 .55em 0 .6em; opacity: .7; }

/* ---------- Header / menu ---------- */
.site-header.is-solid, body.page-light .site-header { background: rgba(240, 228, 207, .97); }
.hbtn--apply:hover .arr { background: var(--brick); }
.pill svg { color: var(--brick); }
.pill--dark svg { color: var(--peach); }

/* ---------- CTAs: antique brass with bottle-green arrow block ---------- */
.cta .t { background: var(--brick); color: var(--river-deep); }
.cta:hover .t { background: var(--brick-hi); }
.cta .a { background: var(--river-deep); }
.hero--split .cta .a, .on-dark .cta .a { background: var(--paper); color: var(--river-deep); }
.cta--dark .t { background: var(--river-deep); color: var(--paper); }
.cta--dark .a { background: var(--brick); color: var(--river-deep); }
.cta--dark:hover .t { background: var(--river); }
.av-chips button[aria-pressed="true"], .av-view button[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--brick); border-color: var(--brick); color: var(--river-deep); }
.carousel-btn { background: rgba(29, 58, 45, .45); color: var(--peach); }
.carousel-btn:hover { background: rgba(29, 58, 45, .8); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(169, 130, 69, .35); }
.scroll-cue, .steps li::before { color: var(--peach); }

/* ---------- Motifs: keystone-arch ornament, Deco fan pattern ---------- */
.ornament svg { visibility: hidden; }
.ornament { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 16' fill='none' stroke='%23A98245' stroke-width='1'%3E%3Cpath d='M15 15.5a12 12 0 0 1 24 0M19.5 15.5a7.5 7.5 0 0 1 15 0'/%3E%3Cpath d='M25 1.5h4l-.8 3.6h-2.4z' fill='%23A98245'/%3E%3Ccircle cx='9' cy='14' r='1.2' fill='%23A98245'/%3E%3Ccircle cx='45' cy='14' r='1.2' fill='%23A98245'/%3E%3C/svg%3E") center / 54px 16px no-repeat; }
.page-banner .ornament, .on-dark .ornament { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 16' fill='none' stroke='%23E2C58F' stroke-width='1'%3E%3Cpath d='M15 15.5a12 12 0 0 1 24 0M19.5 15.5a7.5 7.5 0 0 1 15 0'/%3E%3Cpath d='M25 1.5h4l-.8 3.6h-2.4z' fill='%23E2C58F'/%3E%3Ccircle cx='9' cy='14' r='1.2' fill='%23E2C58F'/%3E%3Ccircle cx='45' cy='14' r='1.2' fill='%23E2C58F'/%3E%3C/svg%3E"); }
.section--alt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28' fill='none' stroke='%23A98245' stroke-opacity='.10'%3E%3Cpath d='M0 28a28 28 0 0 1 56 0M9 28a19 19 0 0 1 38 0M18 28a10 10 0 0 1 20 0'/%3E%3C/svg%3E"); background-size: 56px 28px; }

/* Arched keystone frame */
.arch-frame::after { content: ""; position: absolute; left: 50%; top: -9px; width: 22px; height: 16px; transform: translateX(-50%); background: var(--brick); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }

/* ---------- Banners (availability / contact): scalloped hem ---------- */
.page-banner { background: var(--river-deep); }
.page-banner::after { opacity: 1; height: 12px; background: radial-gradient(circle at 12px 12px, var(--paper) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x; }

/* ---------- Home hero: color panel + arched photo window ---------- */
.hero--split { display: block; min-height: 100svh; background: var(--river-deep); color: var(--paper); }
.hero--split::before { content: ""; position: absolute; inset: 0; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28' fill='none' stroke='%23E2C58F' stroke-opacity='.08'%3E%3Cpath d='M0 28a28 28 0 0 1 56 0M9 28a19 19 0 0 1 38 0M18 28a10 10 0 0 1 20 0'/%3E%3C/svg%3E") 0 0 / 56px 28px; }
.hero-split { position: relative; display: grid; gap: var(--s5); align-items: center; min-height: 100svh; padding-top: 108px; padding-bottom: var(--s5); }
.hero-copy { max-width: 560px; }
.hero-name { font-family: var(--serif); font-weight: 400; margin: 0; line-height: .86; max-width: none; }
.hero-name .pre { display: block; margin-bottom: .12em; font-style: italic; font-size: clamp(30px, 3.4vw, 50px); line-height: 1; color: var(--peach); }
.hero-name .n { display: block; padding-bottom: .14em; font-size: clamp(76px, 10.4vw, 164px); letter-spacing: -.015em; }
.hero-name .s { display: block; margin-top: var(--s3); font-style: italic; font-size: clamp(26px, 3.1vw, 44px); line-height: 1.1; color: var(--peach); }
.hero-note { display: flex; align-items: center; gap: 14px; margin: var(--s5) 0 0; font: 500 12px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(245, 239, 228, .72); }
.hero-note::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero-window { position: relative; justify-self: center; width: 100%; max-width: 560px; padding: 14px; }
.hero-window::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--peach); border-radius: 999px 999px 0 0; opacity: .7; pointer-events: none; }
.hero-window::after { content: ""; position: absolute; left: 50%; top: -10px; width: 26px; height: 20px; transform: translateX(-50%); background: var(--brick); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
.hero-window .pane { aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--river); }
.hero-window img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; transform: scale(1.06); animation: heroSettle 2.4s var(--ease-out) forwards; }
@media (min-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 5vw, 96px); padding-top: 128px; padding-bottom: 56px; }
  .hero-window { justify-self: end; max-width: none; height: min(calc(100svh - 184px), 860px, 52vw); min-height: 440px; width: auto; aspect-ratio: 4 / 5; }
  .hero-window .pane { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 899px) { .hero-window { max-width: 420px; } }

/* ---------- Inner-page heroes: title on green, photo in an arched doorway ---------- */
.page-hero { background: var(--river-deep); }
.page-hero .hero-media::after { background: linear-gradient(180deg, rgba(20, 40, 31, .1), rgba(20, 40, 31, 0) 40%); }
.page-hero .hero-media img { object-position: 50% 30%; }
.page-hero .hero-content { text-align: left; }
.page-hero .hero-content .eyebrow { color: var(--peach) !important; }
.page-hero h1 { margin: 0 !important; }
@media (min-width: 900px) {
  .page-hero { min-height: 74svh; align-items: center; }
  .page-hero .hero-media { inset: 132px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 0 auto; width: min(40vw, 560px); border-radius: 999px 999px 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(226, 197, 143, .5), 0 0 0 14px var(--river-deep), 0 0 0 15px rgba(226, 197, 143, .35); }
  .page-hero .hero-content { padding-top: 150px; }
  .page-hero .hero-content > * { max-width: 48%; }
  .page-hero h1 { font-size: clamp(46px, 5.6vw, 92px); max-width: 11ch; }
}
@media (max-width: 899px) {
  .page-hero { flex-direction: column; align-items: stretch; min-height: 0; padding-top: 96px; }
  .page-hero .hero-media { position: relative; inset: auto; height: 46svh; margin: 0 var(--gutter); border-radius: 999px 999px 0 0; overflow: hidden; }
  .page-hero .hero-content { padding-top: var(--s5); }
}

/* ---------- Footer / map details ---------- */
.pin { border-color: var(--brick); }
.leaflet-marker-icon:hover .pin, .leaflet-marker-icon:focus .pin { background: var(--brick); color: var(--paper); }
.pin-logo { border-color: var(--brick); }
.pin-logo::after { border-color: var(--brick); }
.nbhd-map .leaflet-control-attribution { background: rgba(245, 239, 228, .85); }

/* ==================================================================
   Signature section — two options to choose between
   A) .sig--corner : street-sign pair for Second & Calder over a brick wall
   B) .sig--awning : Midtown-market striped awning over the panel
   Both reuse .wave-section + .panel markup from the framework.
   ================================================================== */
.wave-section.sig--corner::before { opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28' fill='none' stroke='%23E2C58F' stroke-opacity='.13'%3E%3Cpath d='M0 .5h56M0 14.5h56M.5 0v14M28.5 14v14'/%3E%3C/svg%3E") 0 0 / 56px 28px; }
.sig--corner { padding-top: clamp(96px, 11vw, 150px); }
.street-signs { position: absolute; left: 50%; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -58%); pointer-events: none; }
.street-signs::before { content: ""; order: -1; width: 16px; height: 16px; margin-bottom: -2px; border-radius: 50%; background: var(--brick); box-shadow: 0 0 0 3px var(--river-deep); }
.street-signs::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 10px; bottom: -12px; width: 6px; transform: translateX(-50%); background: #26302B; }
.sig--corner .panel { padding-top: calc(clamp(40px, 7vw, 110px) + 64px); }
.sign { position: relative; display: inline-flex; align-items: baseline; gap: .6em; padding: 9px 20px 8px; border-radius: 6px; background: var(--sign-blue); color: #fff; box-shadow: inset 0 0 0 2px var(--sign-blue), inset 0 0 0 3.5px #fff, 0 8px 20px rgba(0, 0, 0, .28); font: 600 clamp(15px, 1.6vw, 21px)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.sign small { font-size: .6em; font-weight: 500; letter-spacing: .08em; opacity: .9; }
.sign--cross { transform: translateX(22%) rotate(-2deg); }

.wave-section.sig--awning { background: var(--brick-deep); }
.wave-section.sig--awning::before { opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28' fill='none' stroke='%231D3A2D' stroke-opacity='.10'%3E%3Cpath d='M0 .5h56M0 14.5h56M.5 0v14M28.5 14v14'/%3E%3C/svg%3E") 0 0 / 56px 28px; }
.sig--awning .panel { padding-top: calc(70px + clamp(32px, 5vw, 80px)); }
.sig--awning .panel::before { display: none; }
.awning { position: absolute; left: 0; right: 0; top: 0; height: 70px; z-index: 1; border-top: 8px solid var(--river-deep);
  background: repeating-linear-gradient(90deg, var(--river) 0 32px, var(--paper) 32px 64px);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 54px no-repeat, radial-gradient(circle at 16px 0, #000 15.5px, transparent 16px) 0 54px / 32px 16px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% 54px no-repeat, radial-gradient(circle at 16px 0, #000 15.5px, transparent 16px) 0 54px / 32px 16px repeat-x; }

/* Residences: traced stone facade (a squarer drawing than 315's row, so keep it smaller) */
.facade-wrap { max-width: 760px; }

/* Contact: let the long leasing email wrap on phones instead of widening the page */
.contact-grid > * { min-width: 0; }
.contact-list .v { overflow-wrap: anywhere; }