/* ==========================================================================
   Reiwa Capital — Brand Identity Layer
   Sits ON TOP of editorial.css. Purely additive + a few intentional
   overrides. Three signature devices:
     1. The Frame  — fine corner-brackets on imagery (architectural viewfinder)
     2. The Index  — numbered hairline with a filled square node
     3. Warmth     — warm-beige ground + Sumire-derived lavender washes
   Removing this stylesheet returns the site to the plain editorial design.
   ========================================================================== */

:root {
  /* Sumire-derived washes — colour, used sparingly + intentionally */
  --reiwa-lavender:   #ECE6F2;   /* pale lavender — section wash */
  --reiwa-lavender-2: #E3DAEC;   /* slightly deeper lavender edge */
  --reiwa-stone:      #F4F1E8;   /* warm stone — alternate ground */
  --reiwa-mist:       #E7EEF6;   /* pale architectural blue */
  --reiwa-line:       rgba(39, 20, 48, 0.32);  /* frame / node ink */
  --reiwa-node:       #5E3D78;   /* the square node — sumire, visible brand accent */
}

/* --------------------------------------------------------------------------
   GROUND — warm the whole site off pure white. One change, big brand shift.
   -------------------------------------------------------------------------- */
html, body { background: var(--paper-warm); }

/* Nav picks up the warm ground instead of cool white */
.nav-bar { background: rgba(252, 250, 241, 0.80); }

/* Inner-page heads sit on warm beige */
.page-head { background: var(--paper-warm); }

/* =====================================================================
   DEVICE 1 — THE FRAME
   Fine purple corner-brackets that frame imagery. Drawn with two pseudo
   elements (top-left + bottom-right) so it reads as a registration /
   viewfinder mark, not a full box. Sits just outside the image edge.
   ===================================================================== */
.r-frame { position: relative; }
.r-frame::before,
.r-frame::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  z-index: 3;
  pointer-events: none;
}
.r-frame::before {
  top: -7px; left: -7px;
  border-top: 1.5px solid var(--reiwa-line);
  border-left: 1.5px solid var(--reiwa-line);
}
.r-frame::after {
  bottom: -7px; right: -7px;
  border-bottom: 1.5px solid var(--reiwa-line);
  border-right: 1.5px solid var(--reiwa-line);
}
/* On dark grounds the brackets go warm-white */
.r-frame.on-dark::before,
.r-frame.on-dark::after { border-color: rgba(252, 250, 241, 0.55); }

/* Larger, more architectural brackets for hero-scale imagery */
.r-frame-lg::before,
.r-frame-lg::after { width: 46px; height: 46px; }
.r-frame-lg::before { top: -1px; left: -1px; }
.r-frame-lg::after  { bottom: -1px; right: -1px; }

/* =====================================================================
   APPLIED — homepage hero
   Asymmetric: a thin lavender column on the left edge + index marker,
   the headline offset, the frame around the image.
   ===================================================================== */
.home-hero .scrim {
  background:
    linear-gradient(180deg, rgba(16,11,20,0.30) 0%, rgba(16,11,20,0.04) 24%, rgba(16,11,20,0) 44%),
    linear-gradient(0deg, rgba(16,11,20,0.86) 0%, rgba(16,11,20,0.36) 46%, rgba(16,11,20,0) 76%),
    linear-gradient(90deg, rgba(39,20,48,0.28) 0%, rgba(39,20,48,0) 38%);
}
/* =====================================================================
   APPLIED — Areas of focus / home area cards get the frame + node caption
   ===================================================================== */
.areas-band .area .cap .name { display: inline-flex; align-items: center; gap: 12px; }

/* =====================================================================
   FOOTER — owns its own deep-sumire treatment in editorial.css.
   ===================================================================== */

/* Inner-page header marker dot → the brand diamond atom */
.page-head .marker .dot { display: none; }

/* Reduced-motion / print: washes stay, motion already handled in editorial.css */

/* =====================================================================
   ASYMMETRY — homepage editorial rhythm. Scoped to the home page so the
   inner pages keep their calm vertical measure. Off on narrow screens.
   ===================================================================== */
@media (min-width: 900px) {
  /* Positioning — statement offset right of the margin, tail set below-left
     in a narrower measure, so the block reads as a composed column, not centred. */
  body[data-page="home"] .positioning .ed-row .body { padding-left: 16%; }
  body[data-page="home"] .positioning .ed-row .body p { margin-left: -16%; }
  body[data-page="home"] .positioning .ed-row .body p.tail { margin-left: 0; }

  /* Areas band — the three cards align on one baseline (descending step
     removed: Repositioning + Hospitality now line up with Income). */
  body[data-page="home"] .areas-band { align-items: start; }
  /* The band's bottom rule would sit flat across the cards — drop it,
     each card keeps its own frame. */
  body[data-page="home"] .areas-band { border-bottom: none; }

  /* Areas header — offset the title into the second column, eyebrow at margin */
  body[data-page="home"] .home-areas .areas-head { align-items: flex-end; }
}
@media print {
  html, body { background: #fff; }
}