/* Layout: a fixed full-screen ASCII scene of the Stambol Gate at night. Scrolling lifts the portcullis and grows
   an ASCII window out of the gate; the text inside it is real HTML.
   Surfaces follow DESIGN.md: warm neutrals, hairline borders instead of shadows, tight 3–4 px radii,
   a quiet serif display, IBM Plex for narrative (sans) and technical (mono) text, amber only for small labels. */
:root{
  --bg:#060a14;
  --surface:rgba(43,38,34,.94);        /* warm charcoal card */
  --surface-open:rgba(43,38,34,.985);
  --surface-soft:#383330;              /* chips, inset blocks */
  --hairline:#4a433d;
  --hairline-strong:#6b6158;
  --ink:#f7f5f0;
  --body:#d9d1c1;
  --mute:#aea69c;
  --accent:#e2ad55;                    /* lamp amber: eyebrows, links, focus only */
  --rooster:#e0484e;
  --f-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-sm:3px;
  --r-md:4px;
  color-scheme:dark;
}
:root[data-sky="day"]{
  --bg:#cddde4;
  --surface:rgba(247,245,240,.95);
  --surface-open:rgba(247,245,240,.99);
  --surface-soft:#ece7dc;
  --hairline:#d9d1c1;
  --hairline-strong:#b9ae9a;
  --ink:#2b2622;
  --body:#4a433b;
  --mute:#6e665b;
  --accent:#86560e;
  --rooster:#b4262c;
  color-scheme:light;
}
html,body{background:var(--bg);color:var(--ink)}
html{-webkit-tap-highlight-color:transparent}
@media (pointer:fine){html{overscroll-behavior:none}}
body{font:16px/1.5 var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
#world{position:relative;z-index:1;height:300vh}
.slot{position:absolute;left:16px;top:0;box-sizing:border-box;margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:10;padding:8px 16px;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);font:500 14px/20px var(--f-body);text-decoration:none;transform:translateY(-200%)}
.skip:focus-visible{transform:none}

/* type roles */
.eyebrow,.p-num{margin:0;font:500 12px/16px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* hero: quiet, confident display at weight 400 */
.hero{position:fixed;transition:opacity .2s linear;display:flex;flex-direction:column;gap:12px;text-shadow:0 1px 18px var(--bg),0 0 2px var(--bg)}
.hero h1{font:400 clamp(3rem,7.4vw,5.25rem)/.95 var(--f-display);letter-spacing:-.02em;margin:0;text-wrap:balance}
.hero h1 em{font-style:italic}
.hero .lede{margin:4px 0 0;max-width:36em;font-size:18px;line-height:28px;color:var(--ink);text-wrap:pretty}
.hint{margin:8px 0 0;font:400 13px/18px var(--f-mono);color:var(--mute);display:flex;gap:.6em;align-items:center}
.hint-arrow{display:inline-block;color:var(--accent);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* weather pill */
.hud{position:fixed;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:5;font:400 12px/16px var(--f-mono);max-width:calc(100vw - 24px)}
.hud-pill{margin:0;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:7px 12px;color:var(--ink);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-variant-numeric:tabular-nums}
.hud-led{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.hud[data-live="ok"] .hud-led{background:#4caf6a}
.hud[data-live="loading"] .hud-led{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.hint-arrow,.hud-led{animation:none!important}}


/* the about window: the frame is drawn on the canvas, this is the text inside it */
#world{height:230vh}
.portal{position:fixed;left:16px;top:0;z-index:2;margin:0;box-sizing:border-box;overflow:auto;font:400 15px/24px var(--f-mono);color:var(--ink);opacity:0;pointer-events:none;outline:none}
.portal.open{opacity:1;pointer-events:auto}
.portal p,.portal nav{margin:0}
.portal .cmd{color:var(--body);margin-top:14px}
.portal .cmd:first-of-type{margin-top:0}
.portal .prompt{color:#7fbf7a;margin-right:.6ch}
.portal .out{color:var(--ink);text-wrap:pretty}
.portal .out+.out{margin-top:8px}
.portal .mute{color:var(--mute)}
.portal .links{display:flex;flex-wrap:wrap;gap:4px 3ch}
.portal .links a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;touch-action:manipulation}
.portal .links a::before{content:"./";color:var(--mute)}
.portal .cursor{display:inline-block;color:var(--accent);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
/* lines type in one after another once the window is open (delays are set in app.js) */
.portal .ln{opacity:0}
.portal.open .ln{animation:typein .01s linear forwards}
@keyframes typein{to{opacity:1}}
/* career as a git log */
.portal .log{list-style:none;margin:0;padding:0}
.portal .log li{padding-left:8ch;text-indent:-8ch}
.portal .hash{color:var(--accent)}
.portal .head{color:#7fbf7a}
@media (max-width:760px){.portal{font-size:13px;line-height:20px}.portal .cmd{margin-top:10px}}
@media (prefers-reduced-motion:reduce){.portal.open .ln{animation:none;opacity:1}.portal .cursor{animation:none}.hero{transition:none}}