/* North / Living - concept design tokens (Shapeshifter, 2026-10-30, EST-20261030-S1)
   CONCEPT ONLY. 'North / Living' is a working label, not a property identity claim.
   Calm cream + ink, teal glass accents, and amber reserved for required DECISIONS only
   (book a tour / apply / now leasing). Mobile-first, strong contrast, reduced motion.
   No real rent, phone, address, amenities or photography is encoded here. */

:root {
  /* grounds: warm cream paper */
  --paper-0:#f5f0e4; --paper-1:#efe7d6; --paper-2:#e6dcc6;

  /* ink: warm near-black + softer greys for hierarchy */
  --ink:#232019; --ink-soft:#6a6454; --ink-faint:#9c947f;

  /* teal: the calm accent + the glass */
  --teal:#2f6f68; --teal-deep:#234f4a; --teal-tint:rgba(47,111,104,0.10);
  --glass:rgba(255,255,255,0.40); --glass-2:rgba(255,255,255,0.16);
  --glass-stroke:rgba(35,32,25,0.12); --glass-lit:rgba(255,255,255,0.72);

  /* amber: DECISIONS ONLY. If it is warm, it is asking the visitor to act. */
  --amber:#d98c2a; --amber-deep:#b9731d; --amber-ink:#7d4e12;

  --line:rgba(35,32,25,0.14);
  --radius:16px; --radius-sm:10px; --pad:20px;
  --shadow:inset 0 1px 0 var(--glass-lit), 0 10px 26px rgba(35,32,25,0.10);

  /* type: character comes from here, not from photos */
  --font-display:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --maxw:460px;            /* mobile-first reading column */
  --tap:48px;              /* minimum touch target */
}

/* ---- utilities the landing/tour + sign share ---- */
.nl-paper{ background:
  radial-gradient(120% 60% at 50% -10%, #fbf7ee, transparent 60%),
  linear-gradient(180deg, var(--paper-0), var(--paper-1) 70%);
  color:var(--ink); font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased; }

.nl-display{ font-family:var(--font-display); font-weight:500; letter-spacing:.2px; line-height:1.08; }
.nl-kicker{ font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.18em;
  font-size:.72rem; font-weight:600; color:var(--teal); }

.nl-glass{ background:linear-gradient(160deg, var(--glass), var(--glass-2)), var(--teal-tint);
  border:1px solid var(--glass-stroke); border-radius:var(--radius);
  box-shadow:var(--shadow); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

/* the ONE warm element: a decision */
.nl-decide{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); padding:0 22px; border-radius:999px;
  background:linear-gradient(180deg, var(--amber), var(--amber-deep)); color:#fff8ec;
  font-family:var(--font-ui); font-weight:700; letter-spacing:.02em; border:none;
  box-shadow:0 6px 16px rgba(185,115,29,.28); }

/* the asset seam, made visible: where exterior media will drop in */
.nl-photo-pending{ position:relative; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--teal-deep); background:
  repeating-linear-gradient(135deg, transparent 0 14px, rgba(47,111,104,.05) 14px 28px),
  var(--paper-2);
  border:1.5px dashed var(--teal); border-radius:var(--radius); padding:18px;
  font-family:var(--font-ui); font-size:.8rem; font-weight:600; letter-spacing:.02em; }
.nl-photo-pending small{ display:block; color:var(--ink-soft); font-weight:500; letter-spacing:0; margin-top:4px; }

.nl-label-demo{ font-family:var(--font-ui); font-size:.64rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber-ink); background:#f6e4c6; border:1px solid #e4c488;
  padding:3px 8px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }