/* P1 grammar prototype -- the alejandrorojas dark register. */
:root{--bg:#14110E;--panel:#1E1A15;--panel2:#241F19;--line:#312A22;--ink:#F4EFE5;
--soft:#C9C1B3;--muted:#8A8278;--gold:#C99A4A;--gold-dim:#A87E3C;--green:#5C9A6E;--red:#B5654A;
--serif:'Source Serif 4',Georgia,serif;--sans:'Inter',system-ui,sans-serif;
--mono:'JetBrains Mono',ui-monospace,Menlo,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;
line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* voice typography: the concierge SPEAKS in serif */
.voice{font-family:var(--serif);font-weight:400;letter-spacing:.002em}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;
border:1px solid var(--line);background:var(--panel2);color:var(--soft);
padding:11px 18px;border-radius:999px;font-size:14px;min-height:44px}
.pill:hover{border-color:var(--gold-dim);color:var(--ink)}
.pill.sel{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.pill.cta{background:var(--ink);color:var(--bg);font-weight:600;letter-spacing:.04em;
text-transform:uppercase;font-size:12.5px;padding:14px 26px}
.pill.cta:hover{background:#fff}
.ghost{color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);padding-bottom:2px}
.ghost:hover{color:var(--soft)}

.iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
display:inline-flex;align-items:center;justify-content:center;color:var(--soft);
font-family:var(--mono);font-size:15px;background:rgba(20,17,14,.6)}
.iconbtn:hover{border-color:var(--gold-dim);color:var(--ink)}

/* ---- shell for classic pages: sidebar >=861 / topbar+bottom tabs <=860 ---- */
.app{display:flex;min-height:100vh;align-items:flex-start}
aside{width:216px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);
padding:22px 14px;display:flex;flex-direction:column;gap:2px;
position:sticky;top:0;height:100vh}
.brand{font-family:var(--mono);font-weight:700;font-size:16px;padding:0 8px 18px}
.brand .g{color:var(--gold)}
.eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);padding:0 8px 8px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px;font-family:var(--mono);
font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
border-left:2px solid transparent;min-height:40px}
.nav a:hover{color:var(--ink);background:var(--panel2)}
.nav a.on{color:var(--ink);background:var(--panel2);border-left-color:var(--gold)}
.nav .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:0;flex-shrink:0}
.nav a.ask-item .dot{opacity:1}
.side-foot{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--line);
font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1.7}
main{flex:1;min-width:0}
.wrap{max-width:960px;margin:0 auto;padding:30px 28px 70px}
.topbar{display:none}

/* ask bar (search-is-the-same-door) */
.askbar{display:flex;align-items:center;gap:10px;background:var(--panel);
border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 20px;margin:18px 0 26px}
.askbar input{flex:1;background:none;border:0;outline:none;color:var(--ink);
font-size:15px;font-family:var(--sans)}
.askbar input::placeholder{color:var(--muted)}
.askbar .wave{width:40px;height:40px;border-radius:50%;background:var(--panel2);
border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
font-family:var(--mono);color:var(--gold);font-size:13px}

h1.hero{font-family:var(--serif);font-size:clamp(26px,4.4vw,40px);font-weight:500;
line-height:1.22;letter-spacing:-.01em;max-width:24ch}
.sub{color:var(--muted);font-size:14px;max-width:60ch;margin-top:10px}
h2.sec{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);margin:36px 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);padding:18px 18px 16px;display:block}
.card:hover{border-color:var(--gold-dim)}
.card b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.card span{display:block;margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.5}
.card .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--gold);margin-bottom:8px;display:block}
.rows .row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
padding:13px 2px;border-bottom:1px solid var(--line)}
.rows .row:last-child{border-bottom:0}
.rows .row b{font-weight:500;font-size:14.5px}
.rows .row span{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.doorline{display:flex;align-items:center;gap:12px;background:var(--panel);
border:1px solid var(--line);padding:13px 16px;margin-top:26px}
.doorline .mk{color:var(--gold);font-family:var(--mono)}
.doorline a{color:var(--gold)}
footer{margin-top:44px;padding-top:16px;border-top:1px solid var(--line);
font-family:var(--mono);font-size:10px;color:var(--muted);display:flex;
justify-content:space-between;gap:10px;flex-wrap:wrap}

@media(max-width:860px){
  .app{flex-direction:column}
  aside{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;
    flex-direction:row;align-items:stretch;padding:0 0 env(safe-area-inset-bottom);
    border-right:0;border-top:1px solid var(--line);z-index:40;
    box-shadow:0 -8px 20px -14px rgba(0,0,0,.65)}
  .brand,.eyebrow,.side-foot{display:none}
  .nav{display:flex;flex:1}
  .nav a{flex:1;flex-direction:column;justify-content:center;gap:4px;min-height:56px;
    border-left:0;border-top:2px solid transparent;font-size:10px;padding:8px 2px;text-align:center}
  .nav a.on{border-top-color:var(--gold)}
  .topbar{display:flex;align-items:center;gap:12px;padding:14px 16px 12px;
    border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5;
    padding-top:max(14px,env(safe-area-inset-top))}
  .topbar .brand{padding:0;font-size:15px}
  .topbar .tag{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
    border-radius:99px;padding:3px 9px}
  .wrap{padding:20px 16px calc(84px + env(safe-area-inset-bottom))}
}

/* ---- light register (the house cream/ink mapping) ---- */
html[data-theme="light"]{--bg:#F4EFE5;--panel:#FBF8F1;--panel2:#EFE8DA;--line:#DCD4C4;
--ink:#1A1814;--soft:#48433B;--muted:#857C70;--gold:#8F6A2F;--gold-dim:#A87E3C;
--green:#4A7C59;--red:#A8503A}
html[data-theme="light"] .iconbtn{background:rgba(244,239,229,.72)}
html[data-theme="light"] aside{box-shadow:none}
@media(max-width:860px){html[data-theme="light"] aside{box-shadow:0 -8px 20px -14px rgba(26,24,20,.25)}}
html[data-theme="light"] .pill.cta{background:var(--ink);color:var(--bg)}

/* the crossing between rooms: soften the register change */
@keyframes fadein{from{opacity:0}to{opacity:1}}
body{animation:fadein .24s ease-out}
@view-transition{navigation:auto}