/* Nkwata · The Aperture — signature visual layer */
/* ══════════════════════════════════════════════════════════════════════
   NKWATA — VISUAL SIGNATURE LAYER  ·  "THE APERTURE"
   Design only. No structure, no copy, no behaviour touched.

   The idea: the Nkwata mark is a plot marker with a doorway cut into it.
   So the whole platform is built on that one shape. Portrait media is
   cut as a doorway. Every arch gets a keystone, a threshold and jambs.
   Light falls from one direction, as it would through a real opening.
   Surfaces are limewash plaster, not flat colour.

   Nobody in this market frames a property platform this way, and here
   it means something: every card is a door you are looking through.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. MATERIAL: limewash plaster, not flat fill ──────────────────────
   Real plaster is mottled. A flat hex is the cheapest tell in the book. */
body{
  background-color:var(--plaster);
  background-image:
    radial-gradient(ellipse 900px 600px at 12% -5%, rgba(176,141,87,.055), transparent 60%),
    radial-gradient(ellipse 700px 500px at 92% 18%, rgba(184,68,42,.035), transparent 62%),
    radial-gradient(ellipse 800px 700px at 50% 108%, rgba(79,107,74,.035), transparent 60%);
  background-attachment:fixed;
}
.dark-sec,.priv,.pull,.hero,.foot,.bigcta,.tbanner{position:relative}
.dark-sec::after,.priv::after,.pull::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 700px 400px at 18% 0%, rgba(176,141,87,.07), transparent 58%),
    radial-gradient(ellipse 600px 500px at 88% 100%, rgba(184,68,42,.06), transparent 60%);
}
.dark-sec>*,.priv>*,.pull>*{position:relative;z-index:1}

/* ── 2. LIGHT: one sun, upper-left, warm. Shadows agree with each other ── */
:root{
  --sh-1:-2px 3px 3px rgba(25,19,16,.035), -4px 10px 24px -14px rgba(60,38,22,.30);
  --sh-2:-3px 5px 8px rgba(25,19,16,.05),  -8px 26px 52px -22px rgba(60,38,22,.38);
  --sh-3:-5px 9px 20px rgba(25,19,16,.07), -14px 54px 100px -36px rgba(60,38,22,.52);
  --sh-em:-6px 18px 40px -16px rgba(184,68,42,.55);
  --arch:46% 46% var(--r-m) var(--r-m) / 32% 32% var(--r-m) var(--r-m);
  --arch-soft:34% 34% var(--r-m) var(--r-m) / 20% 20% var(--r-m) var(--r-m);
}

/* ── 3. THE APERTURE — the signature. Portrait media becomes a doorway ── */
.rcard,.qcard{
  border-radius:var(--arch)!important;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
/* keystone: the ember block at the crown, echoing the block inside every icon */
.rcard::before,.qcard::before{
  content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:18px;height:4px;z-index:6;background:var(--ember);
  box-shadow:0 2px 12px rgba(184,68,42,.85);
  transition:width .45s var(--ease),background .45s var(--ease);
}
.rcard:hover::before,.qcard:hover::before{width:34px;background:var(--brass-2)}
/* threshold: brass hairline where the door meets the ground */
.rcard::after,.qcard::after{
  content:"";position:absolute;left:11%;right:11%;bottom:0;height:1px;z-index:6;
  background:linear-gradient(90deg,transparent,var(--brass-2),transparent);
  opacity:.7;transition:opacity .4s var(--ease),left .5s var(--ease),right .5s var(--ease);
}
.rcard:hover::after,.qcard:hover::after{opacity:1;left:5%;right:5%}
/* jambs: the frame draws itself in on approach — hover strengthens, never fades */
.rcard .rcard-jamb,.qcard .qcard-jamb{display:none}
.rcard,.qcard{
  box-shadow:var(--sh-2), inset 0 0 0 1px rgba(205,169,108,.16);
}
.rcard:hover,.qcard:hover{
  box-shadow:var(--sh-3), inset 0 0 0 1px rgba(205,169,108,.55);
}
/* the arch head needs the glass panel to sit lower and softer */
.rcard .rglass,.rcard .rv-g{border-radius:16px}

/* the hero opening: a wide arch, as a lintel rather than a doorway */
.hero-shot{border-radius:26% 26% var(--r-l) var(--r-l) / 15% 15% var(--r-l) var(--r-l)!important}
.hero-shot::after{
  content:"";position:absolute;left:9%;right:9%;bottom:0;height:1px;z-index:5;
  background:linear-gradient(90deg,transparent,var(--brass-2),transparent);opacity:.75;
}

/* ── 4. SECTION MARK: a double brass rule with an ember keystone ───────
   Replaces the single hairline. Reads architectural, not decorative. */
.chapter{gap:13px;align-items:center}
.chapter .num{
  position:relative;padding-left:16px;font-size:11.5px;letter-spacing:.18em;
}
.chapter .num::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;background:var(--ember);
}
.chapter .rule{
  height:5px;background:none;position:relative;
}
.chapter .rule::before,.chapter .rule::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--brass-soft),transparent 72%);
}
.chapter .rule::before{top:0}
.chapter .rule::after{top:4px;opacity:.45}

/* ── 5. TYPE: optical, editorial, tighter. Fraunces earns its axes ───── */
h1,h2,h3,h4{font-variation-settings:"SOFT" 55,"WONK" 1;font-optical-sizing:auto}
h1,.hero h1{letter-spacing:-.045em}
h2{letter-spacing:-.032em}
.sec h2,.dark-sec h2{text-wrap:balance}
.lede{text-wrap:pretty}
/* display numerals in the tallies get the full editorial treatment */
.hstat b,.hero-stats b,.fact b,.rbig,.cout .big,.plan .pa,.lane .num{
  font-variation-settings:"SOFT" 20,"WONK" 1;font-feature-settings:"ss01";
}
/* mono labels sit on a baseline rule — a small, consistent, ownable detail */
.mono,.code,.dim{font-feature-settings:"tnum","zero"}

/* ── 6. CARDS: the aperture logic carried into the record card ───────── */
.hc{
  background:
    linear-gradient(180deg,#FFFDFA,#FBF7F0),
    radial-gradient(ellipse 400px 200px at 20% 0%, rgba(176,141,87,.06), transparent 60%);
  box-shadow:var(--sh-1), inset 0 0 0 1px rgba(205,169,108,.10);
  border-color:rgba(205,169,108,.34);
}
.hc:hover{
  box-shadow:var(--sh-3), inset 0 0 0 1px rgba(205,169,108,.5);
  border-color:var(--brass);
}
/* the media head of a record card takes a soft arch — the family resemblance */
.hc-media{border-radius:var(--arch-soft) !important;overflow:hidden}
.hc-media::before{
  content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:16px;height:3px;z-index:5;background:var(--ember);opacity:.9;
  box-shadow:0 2px 10px rgba(184,68,42,.7);
  transition:width .45s var(--ease);
}
.hc:hover .hc-media::before{width:30px}

/* ── 7. THE SLOT: richer duotone so empty frames still read expensive ── */
.slot{color:#8A7A66}
.slot::after{
  background:
    radial-gradient(ellipse 70% 60% at 34% 26%, rgba(217,164,65,.16), transparent 66%),
    radial-gradient(ellipse 80% 70% at 76% 84%, rgba(184,68,42,.13), transparent 68%),
    linear-gradient(160deg, rgba(25,19,16,.10), rgba(25,19,16,.30));
}
.slot.lt::after,.slot.light::after{
  background:
    radial-gradient(ellipse 70% 60% at 34% 26%, rgba(176,141,87,.20), transparent 66%),
    radial-gradient(ellipse 80% 70% at 76% 84%, rgba(184,68,42,.10), transparent 68%),
    linear-gradient(160deg, rgba(255,255,255,.34), rgba(219,207,184,.30));
}

/* ── 8. BUTTONS: a brass edge and a light that falls from above ─────── */
.btn-em{
  background:linear-gradient(180deg,#C9502F,var(--ember) 58%,var(--ember-2));
  box-shadow:var(--sh-em), inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.10);
  letter-spacing:.005em;
}
.btn-em:hover{box-shadow:-6px 26px 54px -18px rgba(184,68,42,.75), inset 0 1px 0 rgba(255,255,255,.32)}
.btn-dark{box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.08)}
.btn-line{border-color:rgba(205,169,108,.5)}
.btn-line:hover{border-color:var(--brass);box-shadow:var(--sh-1)}

/* ── 9. FOCUS: a brass double ring. Visible, and unmistakably ours ───── */
:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(176,141,87,.30);
  border-radius:6px;
}

/* ── 10. PANELS: inner light line, so surfaces feel lifted not printed ── */
.console,.calc,.form,.feelbox,.dash,.rateus,.unlock,.plan,.rev,.qa,.note{
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.7);
}
.calc.dark,.reck.dk2{
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.07);
}
.expose{
  box-shadow:var(--sh-2), inset 0 0 0 1px rgba(221,106,69,.18);
  border-radius:var(--r-l) var(--r-l) var(--r-l) 6px;
}

/* ── 11. THE MARQUEE + rails: brass tick marks between entries ───────── */
.mq-i .d,.tick-item .dot{
  width:5px;height:5px;background:var(--brass-2);transform:rotate(45deg);
}

/* ── 12. LIST MARKS: the ember block from the icon set, reused ───────── */
.plan li svg,.tar li svg{filter:drop-shadow(0 1px 2px rgba(79,107,74,.28))}
.fgrid div svg{filter:drop-shadow(0 1px 2px rgba(79,107,74,.25))}

/* ── 13. THE PULL QUOTE: an opening cut into the dark ────────────────── */
.pull blockquote{font-variation-settings:"SOFT" 70,"WONK" 1}
.pull .qm{opacity:.42;color:var(--brass-2)}

/* ── 14. BOTTOM NAV: brass threshold, matching every aperture on the site ─ */
.bnav{box-shadow:0 -1px 0 rgba(205,169,108,.28), 0 -14px 40px rgba(0,0,0,.35)}
.bnav button.on::after{
  content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:14px;height:3px;background:var(--ember-lift);
}
.bnav button{position:relative}

/* ── 15. THE MAP PIN: our mark, not a generic teardrop ──────────────── */
.mappin .bub,.mpin .bub{
  border-radius:100px 100px 100px 4px;
  box-shadow:-2px 8px 20px rgba(0,0,0,.5);
}

/* ── 16. Reduced motion keeps every static detail, drops only movement ── */
@media(prefers-reduced-motion:reduce){
  .rcard::before,.qcard::before,.hc-media::before,
  .rcard::after,.qcard::after{transition:none}
}

/* ── 17. Small screens: the arch shallows so headlines keep their room ── */
@media(max-width:520px){
  :root{--arch:38% 38% var(--r-m) var(--r-m) / 22% 22% var(--r-m) var(--r-m);
        --arch-soft:26% 26% var(--r-m) var(--r-m) / 14% 14% var(--r-m) var(--r-m)}
}


/* ══════════════════════════════════════════════════════════════════════
   APERTURE — CORRECTION PASS
   Two faults fixed.

   1. The arch was cut as a DOME. Chrome placed in the corners fell
      outside the shape and was clipped. A dome also reads heavy — closer
      to a headstone than a doorway. Corrected to a CROWN: the shoulders
      rise high, the head still curves, the opening still reads as a door.
      Chrome now sits ON the shoulders, below where the curve resolves,
      so the architecture and the interface agree with each other.

   2. Several card classes were referenced by the markup but never had
      styles written. They are authored here.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Dome → crown ─────────────────────────────────────────────────── */
:root{
  --arch:26% 26% var(--r-m) var(--r-m) / 10% 10% var(--r-m) var(--r-m);
  --arch-soft:20% 20% var(--r-m) var(--r-m) / 8% 8% var(--r-m) var(--r-m);
}
@media(max-width:520px){
  :root{
    --arch:22% 22% var(--r-m) var(--r-m) / 8% 8% var(--r-m) var(--r-m);
    --arch-soft:16% 16% var(--r-m) var(--r-m) / 6% 6% var(--r-m) var(--r-m);
  }
}
.rcard,.qcard{border-radius:var(--arch)!important}
.hc-media{border-radius:var(--arch-soft)!important}
.hero-shot{border-radius:16% 16% var(--r-l) var(--r-l) / 9% 9% var(--r-l) var(--r-l)!important}

/* ── 2. Chrome moves onto the shoulders, clear of the curve ──────────── */
.rcard .rtop{top:22px;left:18px;right:18px}
.hc-media>.chip-status{top:15px;left:16px}
.hc-media>.chip-verif{top:15px;right:16px}
/* the keystone rides the crown, which is the one place with full height */
.rcard::before,.qcard::before{top:9px}
.hc-media::before{top:8px}

/* ── 3. Classes the markup calls for but that were never authored ────── */

/* "Just listed" — sits under the status chip, never in the curve */
.fresh{
  position:absolute;top:52px;left:16px;z-index:3;
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 11px;border-radius:100px;color:#fff;
  background:linear-gradient(180deg,#C9502F,var(--ember));
  border:1px solid rgba(255,255,255,.24);
  box-shadow:-2px 8px 18px -8px rgba(184,68,42,.9);
}
/* photograph count — bottom rail, to the left of the save mark */
.pcount{
  position:absolute;bottom:15px;right:66px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(25,19,16,.66);backdrop-filter:blur(9px);color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;
  padding:7px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.16);
}
.pcount svg{opacity:.85}
/* the specification line — this is what rendered as one run-on string */
.specs{
  display:flex;align-items:center;gap:9px;margin-top:11px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);
}
.specs i{
  width:4px;height:4px;background:var(--brass-2);transform:rotate(45deg);
  flex:0 0 auto;display:block;
}
/* the card foot — compare on the left, age on the right */
.hc-foot{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.hc-foot .cmp{margin:0}
.dom{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}

/* ── 4. The bottom rail needs room now that it carries three marks ───── */
.hc-vid{max-width:calc(100% - 130px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 5. Badges stay legible against a bright photograph ─────────────── */
.chip-status,.chip-verif,.fresh,.pcount,.hc-vid{
  text-shadow:0 1px 2px rgba(25,19,16,.35);
}
.chip-verif{text-shadow:none}