/* ============================================================
HIROSHI KUBOTA — DESIGN SYSTEM (v4-derived)
Single source of truth for tokens + components. Linked by every
area-page prototype so they stay in lockstep with the v4 homepage.
Brand source: designs-site/BRAND-SPEC.md · full doc: design-system.md
Font (link in HTML ): Red Hat Display.
============================================================ */
:root{
/* — brand palette (authoritative, no gold) — */
--navy:#192E47; /* primary ink / dark sections */
--navy-deep:#14263B; /* hero base behind imagery */
--ocean:#1F5676; /* accent · links · emphasis on light */
--sky:#A4D0EB; /* light accent on dark */
--sand:#CFBDA3; /* warm accent · eyebrows/CTA on dark */
--sand-ink:#8B8576; /* muted warm label text */
--paper:#F7F4F1; /* page background (Light Sand) */
--cloud:#FDFBFA; /* card background */
--rule:#E7E0D2; /* hairline border on light */
--rule-soft:#EDE6DA;
--body:#4A5B70; /* body copy */
--muted:#8B94A3; /* secondary copy */
--star:#E8B54A; /* review stars only (functional, not brand) */
/* — fluid type scale — */
--fs-display:clamp(40px,6.4vw,84px);
--fs-h1:clamp(34px,5vw,64px);
--fs-h2:clamp(30px,4.4vw,52px);
--fs-h3:clamp(19px,2.2vw,26px);
--fs-lead:clamp(16px,1.8vw,20px);
--fs-body:clamp(15px,1.35vw,17px);
--fs-eyebrow:12px;
--fs-label:11px;
/* — layout / rhythm — */
--maxw:1280px;
--pad-x:clamp(18px,4vw,44px);
--pad-y:clamp(44px,6vw,88px);
--gap:clamp(18px,3vw,34px);
/* — radius (sharp = brochure feel) — */
--r-sm:3px; --r-md:8px; --r-lg:14px; --r-xl:24px; --r-pill:999px;
/* — elevation — */
--sh-card:0 22px 44px -26px rgba(25,46,71,.35);
--sh-float:0 30px 60px -40px rgba(25,46,71,.45);
--sh-pop:0 20px 48px -20px rgba(0,0,0,.55);
--font:'Red Hat Display',system-ui,-apple-system,Segoe UI,sans-serif;
--ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--navy);font-family:var(--font);line-height:1.5;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--ocean);text-decoration:none}
a:hover{color:var(--navy)}
::selection{background:var(--navy);color:var(--paper)}
/* ---------- layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.section{padding-top:var(--pad-y);padding-bottom:var(--pad-y)}
.section--tight{padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(30px,4vw,56px)}
/* ---------- typography ---------- */
.eyebrow{font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ocean)}
.eyebrow--sand{color:var(--sand)}
.display{font-weight:300;font-size:var(--fs-display);line-height:.98;letter-spacing:-.04em}
.h1{font-weight:300;font-size:var(--fs-h1);line-height:1.0;letter-spacing:-.035em}
.h2{font-weight:300;font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.03em}
.h2--bold{font-weight:800}
.h3{font-weight:800;font-size:var(--fs-h3);letter-spacing:-.015em}
.em{font-style:italic;font-weight:400;color:var(--ocean)} /* emphasis word inside a headline */
.em--sky{color:var(--sky)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--body);font-weight:500}
.body{font-size:var(--fs-body);line-height:1.7;color:var(--body)}
.label{font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sand-ink)}
/* ---------- buttons + links ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
padding:14px 24px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
white-space:nowrap;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{color:#fff;box-shadow:0 18px 40px -18px rgba(25,46,71,.55)}
.btn--sand{background:var(--sand);color:var(--navy)}
.btn--sand:hover{color:var(--navy)}
.btn--ghost{background:transparent;border-color:var(--rule);color:var(--navy)}
.btn--ghost:hover{border-color:var(--ocean);color:var(--navy)}
.link{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--ocean);
border-bottom:2px solid var(--ocean);padding-bottom:2px}
/* ---------- surfaces ---------- */
.card{background:var(--cloud);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.card--pad{padding:clamp(18px,2.4vw,26px)}
.card--hover{transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.card--hover:hover{transform:translateY(-3px);border-color:var(--sand);box-shadow:var(--sh-card)}
/* the "Design Element" faceted navy section */
.pattern-navy{background-color:var(--navy);
background-image:url(../designs/assets/pattern-navylight.png);
background-size:460px auto;background-repeat:repeat;background-position:center top;color:#fff}
.pattern-navy .eyebrow{color:var(--sand)}
/* stat cell (borderless, hairline divider left — the v4 impact style) */
.stat{padding:0 clamp(14px,2vw,26px)}
.stat--divide{border-left:1px solid rgba(164,208,235,.26)}
.stat__big{font-weight:300;font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.02em;color:#fff}
.stat__big .mark{color:var(--sand);font-weight:400}
.stat__label{font-size:11.5px;color:#8FA3BC;margin-top:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.45}
/* light stat variant */
.stat--light .stat__big{color:var(--navy)}
.stat--light .stat__big .mark{color:var(--ocean)}
.stat--light .stat__label{color:var(--sand-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--navy);
background:var(--cloud);border:1px solid var(--rule);border-radius:var(--r-pill);padding:7px 14px}
.chip--sand{background:rgba(207,189,163,.16);border-color:rgba(207,189,163,.5)}
/* ---------- imagery ---------- */
.media{position:relative;overflow:hidden;background:var(--rule);border-radius:var(--r-md)}
.media img{width:100%;height:100%;object-fit:cover}
.media--zoom img{transition:transform .55s var(--ease)}
.media--zoom:hover img{transform:scale(1.06)}
.scrim-b{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,38,59,.86),rgba(20,38,59,0) 60%);pointer-events:none}
.scrim-full{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,26,43,.55) 0%,rgba(11,26,43,0) 26%,rgba(11,26,43,0) 54%,rgba(11,26,43,.72) 100%);pointer-events:none}
/* sand corner-notch device (from the v4 portrait) */
.notch{position:absolute;left:-12px;bottom:-12px;width:64px;height:64px;background:var(--sand);overflow:hidden;z-index:2}
.notch span{position:absolute;left:0;right:0;bottom:0;height:28px;background:var(--navy);
clip-path:polygon(0 46%,50% 0,100% 46%,100% 100%,0 100%)}
/* ---------- nav ---------- */
.nav{position:relative;z-index:5}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(14px,2.2vw,24px) var(--pad-x);
display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav a[data-nav]{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
/* --- logo aspect ratio: do not remove ---------------------------------------
The logo is a 5.31:1 wordmark (1200x226) and it is the FIRST flex child of
.nav__inner. With the default flex-shrink:1 the flex algorithm squeezes it
whenever the nav beside it is wide; and because of `img{max-width:100%}`
near the top of this file, that squeeze caps the image's WIDTH while the
inline `height:40px` is still forced. The result is a BROKEN ASPECT RATIO
rather than an overflow -- the logo renders horizontally compressed.
Measured at 375px before this rule: 182x40 rendered = 4.56:1 against a
natural 5.31:1, an 86% squash. (The homepage was worse at 45%; it had no
mobile nav at all, so the full desktop nav was eating the row.)
flex:0 0 auto stops the squeeze.
max-width:none makes the ratio unbreakable even if something squeezes it
again later -- it would overflow visibly instead of
silently distorting, which is the failure we want.
flex-wrap lets a narrow phone drop the CTA onto its own line instead
of overflowing the row.
Reported by Hiroshi on mobile, 2026-10-05. */
.nav__inner{flex-wrap:wrap}
.nav__inner > a:first-child{flex:0 0 auto}
.nav__inner > a:first-child img{max-width:none}
/* !important: the carries an inline style="height:40px", which beats a
stylesheet selector regardless of specificity. 32px => 170px wide, so the
logo and the CTA fit one row on a 375px phone instead of wrapping. */
@media(max-width:560px){.nav__inner > a:first-child img{height:32px !important}}
.nav--onDark a{color:#DCE2EA}
.nav--onDark a:hover{color:#fff}
/* ---------- reveal (progressive-enhancement; hidden state ONLY when .js present, so no-JS = visible) ---------- */
@media (prefers-reduced-motion:no-preference){
html.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}
}
/* — nav dropdown (Neighbourhoods) — */
.navdd{position:relative;display:inline-block}
.navdd__btn{font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
background:none;border:0;padding:0;cursor:pointer;color:inherit;display:inline-flex;align-items:center;gap:7px}
.navdd__btn::after{content:"";width:5px;height:5px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease,ease)}
.navdd:hover .navdd__btn::after,.navdd:focus-within .navdd__btn::after{transform:rotate(225deg) translateY(1px)}
.navdd__menu{position:absolute;top:100%;left:50%;margin-top:10px;transform:translateX(-50%) translateY(-6px);
min-width:216px;background:#fff;border:1px solid var(--rule);border-radius:12px;
box-shadow:0 26px 52px -26px rgba(25,46,71,.55);padding:7px;z-index:60;
opacity:0;visibility:hidden;
/* closing waits .28s so a cursor that clips the edge on its way down doesn't lose the menu;
visibility trails the fade so the panel stays hit-testable while it closes and re-entering revives it */
transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.navdd:hover .navdd__menu,.navdd:focus-within .navdd__menu,.navdd.is-open .navdd__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
transition:opacity .18s ease,transform .18s ease,visibility 0s}
.navdd__menu::before{content:"";position:absolute;left:-12px;right:-12px;top:-14px;height:15px}
.navdd__menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-radius:8px;
font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--navy);white-space:nowrap}
.navdd__menu a:hover{background:var(--lightsand);color:var(--ocean)}
.navdd__menu a.is-soon{color:var(--muted);cursor:default;pointer-events:none}
.navdd__menu .soon{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sand-ink,#8B8576)}
.navdd__rule{border:0;border-top:1px solid var(--rule-soft);margin:7px 9px}
.nav--onDark .navdd__rule{border-top-color:rgba(255,255,255,.16)}
@media(max-width:900px){.navdd__menu{display:none}}
/* dark navs colour only — the dropdown trigger is a