:root { --ink:#0b0b0c; --paper:#f4f1ec; --red:#d72028; --line:#d8d3cb; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
a { color:inherit; }
.eyebrow { margin:0 0 9px; color:var(--red); font-size:.72rem; font-weight:800; letter-spacing:.2em; }
.login-shell { position:relative; min-height:100dvh; overflow:hidden; display:grid; place-items:center; padding:24px; color:#fff; background:#09090a; }
.login-shell::before { content:""; position:absolute; inset:0; opacity:.22; background:linear-gradient(115deg,transparent 30%,#fff 30.2%,transparent 30.4%),linear-gradient(70deg,transparent 66%,#fff 66.2%,transparent 66.4%); }
.login-glow { position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,#601116 0%,transparent 66%); transform:translate(35%,-38%); }
.login-card { position:relative; width:min(100%,430px); padding:42px 28px 30px; border:1px solid #ffffff25; background:#121214e8; box-shadow:0 30px 80px #000; }
.gem-mark { display:grid; grid-template-columns:repeat(3,7px); gap:5px; width:max-content; margin-bottom:36px; transform:rotate(45deg); }
.gem-mark span { width:7px; height:7px; background:var(--red); }
.login-card h1 { margin:0; font-size:clamp(2.4rem,12vw,4rem); line-height:.92; letter-spacing:-.065em; text-transform:uppercase; }
.login-card h1 span { color:#77777e; }
.login-copy { max-width:310px; margin:26px 0 31px; color:#c7c7cc; font-size:.96rem; line-height:1.75; }
.password-form label { display:block; margin-bottom:8px; color:#8f8f95; font-size:.68rem; font-weight:800; letter-spacing:.14em; }
.password-row { display:flex; align-items:center; gap:10px; padding:0 15px; border:1px solid #3a3a3f; background:#080809; }
.password-row:focus-within { border-color:var(--red); box-shadow:0 0 0 3px #d7202825; }
.password-row svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.password-row input { width:100%; min-height:54px; border:0; outline:0; color:white; background:transparent; font-size:1rem; }
.password-form button { width:100%; min-height:54px; margin-top:13px; border:0; color:white; background:var(--red); font-size:.86rem; font-weight:800; letter-spacing:.08em; cursor:pointer; }
.password-form button span { margin-left:10px; font-size:1.1rem; }
.form-error { margin:10px 0 0; color:#ff7c81; font-size:.85rem; }
.private-note { margin:22px 0 0; color:#68686e; text-align:center; font-size:.75rem; }
.site-shell { width:min(100%,1120px); min-height:100dvh; margin:auto; padding:26px 20px 36px; }
.site-header { display:flex; align-items:flex-end; justify-content:space-between; padding:16px 0 22px; border-bottom:2px solid var(--ink); }
.site-header h1 { margin:0; font-size:clamp(2rem,7vw,4.6rem); line-height:.9; letter-spacing:-.06em; text-transform:uppercase; }
.counter { display:flex; align-items:flex-end; gap:8px; }
.counter strong { color:var(--red); font-size:2rem; line-height:.85; }
.counter span { font-size:.6rem; font-weight:800; letter-spacing:.12em; writing-mode:vertical-rl; }
.intro { display:flex; gap:15px; align-items:center; margin:18px 0 30px; }
.intro-icon { display:grid; flex:0 0 42px; height:42px; place-items:center; color:#fff; background:var(--ink); }
.intro p { max-width:620px; margin:0; color:#67635d; font-size:.9rem; line-height:1.65; }
.location-card { overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 20px 50px #201b1512; }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px; }
.location-number { margin:0 0 4px; color:var(--red); font-size:.68rem; font-weight:900; letter-spacing:.16em; }
.card-heading h2 { margin:0; font-size:clamp(1.4rem,5vw,2.4rem); letter-spacing:-.04em; }
.member-tag { flex:none; padding:8px 12px; color:#fff; background:var(--ink); font-size:.78rem; font-weight:700; }
.comparison-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.comparison-grid figure { min-width:0; margin:0; }
.comparison-grid figure + figure { border-left:1px solid var(--line); }
.image-stage { display:flex; height:340px; align-items:center; justify-content:center; overflow:hidden; background:#0b0b0c; }
.image-stage img { display:block; width:100%; height:100%; object-fit:contain; }
.map-stage { background:#dedbd5; }
.comparison-grid figcaption { display:flex; gap:12px; align-items:center; padding:14px 16px; background:white; }
.comparison-grid figcaption > span { color:var(--red); font-size:.72rem; font-weight:900; }
.comparison-grid figcaption strong,.comparison-grid figcaption small { display:block; }
.comparison-grid figcaption strong { font-size:.72rem; letter-spacing:.12em; }
.comparison-grid figcaption small { margin-top:3px; color:#77736d; font-size:.8rem; }
.location-details { display:grid; grid-template-columns:170px 1fr auto; gap:0; align-items:stretch; }
.detail-item { display:flex; gap:11px; align-items:center; padding:20px 18px; border-right:1px solid var(--line); }
.detail-item svg { flex:none; width:19px; height:19px; color:var(--red); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.detail-item span,.detail-item strong { display:block; }
.detail-item span { margin-bottom:4px; color:#88837b; font-size:.62rem; font-weight:800; letter-spacing:.12em; }
.detail-item strong { font-size:.88rem; line-height:1.4; }
.map-button { display:flex; min-width:180px; align-items:center; justify-content:center; gap:9px; padding:20px; color:white; background:var(--red); font-size:.83rem; font-weight:800; text-decoration:none; }
footer { display:flex; justify-content:space-between; padding:22px 3px 0; color:#817c74; font-size:.65rem; font-weight:800; letter-spacing:.14em; }
@media (max-width:700px) {
  .site-shell { padding:18px 14px 28px; }
  .site-header { align-items:center; }
  .counter span { display:none; }
  .intro { margin-bottom:22px; }
  .comparison-grid { grid-template-columns:1fr; }
  .comparison-grid figure + figure { border-top:1px solid var(--line); border-left:0; }
  .image-stage { height:auto; aspect-ratio:16/9; }
  .map-stage { aspect-ratio:4/5; }
  .location-details { grid-template-columns:1fr 1fr; }
  .detail-item { border-bottom:1px solid var(--line); }
  .detail-item.address { border-right:0; }
  .map-button { grid-column:1/-1; min-height:58px; }
}
@media (max-width:390px) {
  .card-heading { align-items:flex-start; padding:18px 16px; }
  .location-details { grid-template-columns:1fr; }
  .detail-item { border-right:0; }
  .map-button { grid-column:auto; }
}