/* ehoang. homepage options - shared base */
:root{
  --eh-ink:#000;--eh-paper:#fff;
  --eh-gray-100:#f2f2f3;--eh-gray-200:#e4e4e7;--eh-gray-400:#a1a1aa;
  --eh-gray-600:#52525b;--eh-gray-700:#3f3f46;--eh-gray-800:#27272a;--eh-gray-900:#18181b;
  --eh-display:'Inter Tight','Inter',-apple-system,'Segoe UI',Helvetica,sans-serif;
  --eh-sans:'Inter',-apple-system,'Segoe UI',Helvetica,sans-serif;
  --eh-mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --eh-ease:150ms ease-out;
  --fg:var(--eh-ink);--bg:var(--eh-paper);--line:var(--eh-gray-200);--muted:var(--eh-gray-400);--sec:var(--eh-gray-600);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--eh-sans);background:var(--bg);color:var(--fg);font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 64px}
@media(max-width:800px){.wrap{padding:0 24px}}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.nav .in{max-width:1280px;margin:0 auto;padding:20px 64px;display:flex;align-items:center}
@media(max-width:800px){.nav .in{padding:16px 24px}}
.wm{font-family:var(--eh-display);font-weight:700;font-size:20px;letter-spacing:-.04em;line-height:1}
.nav .links{margin-left:auto;display:flex;gap:32px;font-size:14px;font-weight:500}
.nav .links a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--eh-ease);padding-bottom:2px}
.nav .links a:hover{background-size:100% 1px}

/* type */
.statement{font-family:var(--eh-display);font-weight:700;letter-spacing:-.04em;line-height:.95}
.lede{font-size:21px;line-height:1.5;color:var(--sec)}
.eyebrow{font-family:var(--eh-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--eh-mono);font-size:13px;font-variant-numeric:tabular-nums}

/* status */
.status{display:inline-flex;align-items:center;gap:10px;font-family:var(--eh-mono);font-size:13px}
.status i{display:inline-block;width:10px;height:10px;border:1px solid currentColor;flex-shrink:0}
.status.live i{background:currentColor}
.status.building i{background:linear-gradient(135deg,currentColor 50%,transparent 50%)}
.status.sold i{background:transparent}
.status.sunset i{height:3px;border:0;background:currentColor}

/* index */
.index{border-top:1px solid var(--fg)}
.index .hdr,.index .row{display:grid;grid-template-columns:72px 1fr 160px 96px 140px;gap:24px;align-items:center;padding:22px 16px}
.index .hdr{border-bottom:1px solid var(--line)}
.index .row{border-bottom:1px solid var(--line);transition:background var(--eh-ease),color var(--eh-ease)}
.index .row:hover{background:var(--fg);color:var(--bg)}
.index .no{color:var(--muted)}
.index .nm{font-family:var(--eh-display);font-weight:600;font-size:26px;letter-spacing:-.02em;line-height:1.1}
@media(max-width:800px){.index .hdr{display:none}.index .row{grid-template-columns:44px 1fr;gap:4px 12px;padding:18px 8px}.index .ty,.index .yr{display:none}.index .st{grid-column:2}.index .nm{font-size:22px}}

/* button */
.btn{display:inline-flex;align-items:center;font-weight:600;font-size:14px;letter-spacing:.01em;padding:14px 24px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);transition:background var(--eh-ease),color var(--eh-ease)}
.btn:hover{background:var(--bg);color:var(--fg)}
.btn.ghost{background:var(--bg);color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}

/* anchors land below the sticky nav */
[id]{scroll-margin-top:96px}
html{scroll-behavior:smooth}

/* form */
.form{max-width:560px}
.form .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.form .f{margin-bottom:24px}
.form label{display:block;font-family:var(--eh-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.form input,.form textarea{display:block;width:100%;font-family:var(--eh-sans);font-size:16px;line-height:1.5;padding:12px 14px;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:0;outline:0;transition:border-color var(--eh-ease)}
.form input:focus,.form textarea:focus{border:2px solid var(--fg);padding:11px 13px}
.form input::placeholder,.form textarea::placeholder{color:var(--muted)}
.form textarea{min-height:140px;resize:vertical}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .msg{margin-top:16px;font-family:var(--eh-mono);font-size:13px;color:var(--sec);min-height:20px}
.form .msg.err{color:var(--fg)}
.form button[disabled]{opacity:.5;cursor:default}

/* modal */
.modal{border:0;padding:0;background:transparent;color:var(--eh-paper);max-width:none;max-height:none;width:100%;height:100%}
.modal::backdrop{background:rgba(0,0,0,.85)}
.modal .box{position:relative;background:var(--eh-ink);color:var(--eh-paper);border:1px solid var(--eh-paper);padding:40px;width:min(640px,calc(100% - 48px));margin:10vh auto 0;--fg:var(--eh-paper);--bg:var(--eh-ink);--line:var(--eh-gray-700);--muted:var(--eh-gray-400);--sec:var(--eh-gray-400)}
.modal .box h2{font-family:var(--eh-display);font-weight:600;font-size:clamp(28px,3vw,40px);letter-spacing:-.025em;line-height:1.1;margin-bottom:28px}
.modal .close{position:absolute;top:16px;right:20px;background:none;border:0;color:var(--eh-gray-400);font-family:var(--eh-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:8px}
.modal .close:hover{color:var(--eh-paper)}
.modal .form{max-width:none}
.modal .form input:focus,.modal .form textarea:focus{border-color:var(--eh-paper)}
@media(max-width:600px){.modal .box{padding:24px;margin-top:24px}}

/* footer */
.foot{background:var(--eh-ink);color:var(--eh-paper);padding:96px 0 40px}
.foot .big{font-family:var(--eh-display);font-weight:700;font-size:clamp(72px,14vw,200px);letter-spacing:-.04em;line-height:.9}
.foot .meta{margin-top:48px;display:flex;flex-wrap:wrap;gap:32px;font-family:var(--eh-mono);font-size:12px;color:var(--eh-gray-400)}
.foot .meta a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--eh-ease);padding-bottom:2px}
.foot .meta a:hover{background-size:100% 1px}

/* dark page */
body.dark{--fg:var(--eh-paper);--bg:var(--eh-ink);--line:var(--eh-gray-800);--muted:var(--eh-gray-700);--sec:var(--eh-gray-400)}
body.dark .foot{border-top:1px solid var(--eh-gray-800)}