/* Fork & Floor holding page: standalone styles for index.html and 404.html (nothing shared with the main site) */
:root{
  color-scheme:light;
  --bg:#EEF0EC; --panel:#FFFFFF; --panel-2:#F6F7F4; --ink:#1C2320; --muted:#5C6962; --line:#D8DDD8;
  --accent:#1F6B55; --accent-2:#E3EFEA; --accent-ink:#FFFFFF;
  --floor:#FBFBF8; --grid:#ECEEE9; --wall:#2A312E;
  --table:#E6D4B8; --table-stroke:#8C6E4A; --chair:#6B7872; --chair-fill:#F2F3F0;
  --plant:#B8D1A8; --plant-stroke:#5E8750; --tape:#F0C069;
  --shadow:0 1px 2px rgba(20,30,25,.06),0 8px 28px rgba(20,30,25,.08);
  --f-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --f-body:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#0F1311; --panel:#171C1A; --panel-2:#1C2220; --ink:#E4EAE6; --muted:#93A19A; --line:#2B3430;
    --accent:#62C3A0; --accent-2:#1D3129; --accent-ink:#0F1311;
    --floor:#1A201D; --grid:#212824; --wall:#C9D2CD;
    --table:#6B5A43; --table-stroke:#C4A57E; --chair:#9AA8A1; --chair-fill:#2A322E;
    --plant:#3E5A35; --plant-stroke:#8DB57D; --tape:#B8892A;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);
  font:16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{font-family:var(--f-display);font-size:clamp(34px,6vw,56px);letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0}

/* Header */
.top{padding:22px 16px}
.top .inner{max-width:1040px;margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand img{display:block;height:32px;width:auto}
.brand b{font:700 23px/1 var(--f-display);letter-spacing:-.01em;white-space:nowrap}
@media (prefers-color-scheme:dark){.brand img{filter:invert(1)}}

/* Main card */
main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
.card{
  width:100%;max-width:1040px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  padding:clamp(28px,5vw,56px);
}
.copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
  background:var(--accent-2);padding:6px 10px;border-radius:999px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.lede{font-size:18px;color:var(--muted);max-width:52ch;text-wrap:pretty}
.points{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:8px;color:var(--ink)}
.points li{display:flex;gap:10px;align-items:baseline}
.points li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--accent);transform:translateY(-1px)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;
  border-radius:10px;border:1px solid var(--line);background:var(--panel);
  font-weight:600;text-decoration:none;white-space:nowrap;
}
.btn:hover{background:var(--panel-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.note{font-size:14px;color:var(--muted)}

/* The little floorplan drawing */
.plan{width:100%;height:auto;display:block}
.plan .floor{fill:var(--floor)}
.plan .grid{stroke:var(--grid);stroke-width:1}
.plan .wall{fill:none;stroke:var(--wall);stroke-width:6;stroke-linejoin:round}
.plan .door{fill:none;stroke:var(--wall);stroke-width:1.5;stroke-dasharray:3 3}
.plan .table{fill:var(--table);stroke:var(--table-stroke);stroke-width:2}
.plan .chair{fill:var(--chair-fill);stroke:var(--chair);stroke-width:2}
.plan .plant{fill:var(--plant);stroke:var(--plant-stroke);stroke-width:2}
.plan .num{font:600 13px var(--f-mono);fill:var(--table-stroke);text-anchor:middle;dominant-baseline:central}
.plan .ghost{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 5}
.plan .tape{fill:var(--tape);opacity:.85}
.plan .tape-text{font:600 11px var(--f-mono);fill:#1C2320;letter-spacing:.12em;text-anchor:middle;dominant-baseline:central}
.plan .sliding{animation:slide 5s ease-in-out infinite}
@keyframes slide{0%,15%{transform:translate(0,0)}45%,70%{transform:translate(-70px,0)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.plan .sliding,.eyebrow .dot{animation:none}}

/* 404 */
.big{font:700 clamp(64px,12vw,120px)/1 var(--f-display);letter-spacing:-.04em;color:var(--accent)}

/* Footer */
footer{padding:22px 16px;font-size:14px;color:var(--muted);text-align:center}

@media (max-width:780px){
  .card{grid-template-columns:1fr;gap:28px}
  .art{order:-1;max-width:420px;width:100%;margin:0 auto}
  .lede{font-size:17px}
  .actions .btn{flex:1 1 auto}
}