@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(/fonts/geist.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --bg:#ece5da; --surface:#f8f4ec; --ink:#231f1a; --muted:#655c52; --line:#d9cfc0;
  --accent:#1f5f55; --on-accent:#ffffff;
  --blue-bg:#d9e4e2;  --blue-fg:#25584f;
  --sand-bg:#efdfb8;  --sand-fg:#7a5a10;
  --green-bg:#d6e6d0; --green-fg:#2f6a3a;
  --peach-bg:#f6d9c4; --peach-fg:#a4491f;
  --lilac-bg:#e3d9ea; --lilac-fg:#6a3f86;
  --ease:cubic-bezier(.22,1,.36,1);
  --display:"Bricolage Grotesque","Geist",ui-sans-serif,system-ui,sans-serif;
  --text:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#14110e; --surface:#1e1a15; --ink:#f3ede3; --muted:#aaa194; --line:#312b23;
  --accent:#74c7b6; --on-accent:#0f1a17;
  --blue-bg:#1b2e2b;  --blue-fg:#8fd4c6;
  --sand-bg:#37301a;  --sand-fg:#e5cd7f;
  --green-bg:#1e3222; --green-fg:#9ad8a6;
  --peach-bg:#3b2417; --peach-fg:#f4ac84;
  --lilac-bg:#2d2336; --lilac-fg:#d0b0e6;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-padding-top:16px}
body{
  min-height:100dvh; background:var(--bg); color:var(--ink);
  font:400 1rem/1.5 var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input{font:inherit; color:inherit}
button{background:none; border:0; padding:0; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
a{color:inherit; -webkit-tap-highlight-color:transparent}
svg.i{width:1.375rem; height:1.375rem; fill:currentColor; flex:none; display:block}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right))}

/* Theme toggle */
.theme{
  position:fixed; z-index:5; top:calc(12px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right));
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.theme:hover{border-color:var(--accent)}
.theme:active{transform:scale(.94)}
.theme .moon{display:block}.theme .sun{display:none}
:root[data-theme="dark"] .theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:block}

/* Hero */
.hero{padding-top:calc(72px + env(safe-area-inset-top)); padding-bottom:8px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.9375rem; font-weight:500}
.eyebrow svg.i{width:1.125rem; height:1.125rem}
h1{
  margin-top:14px; font:700 clamp(2.4rem,9vw,4.75rem)/.98 var(--display);
  letter-spacing:-.035em; text-wrap:balance; max-width:16ch;
}
h1 em{font-style:normal; color:var(--accent)}
.lede{margin-top:18px; color:var(--muted); font-size:clamp(1.0625rem,2.4vw,1.1875rem); max-width:46ch; text-wrap:pretty}

/* Search + filters */
.tools{margin:28px 0 8px; padding:10px 0; background:var(--bg)}
@media (min-width:720px) and (min-height:640px){.tools{position:sticky; top:0; z-index:4}}
.search{
  display:flex; align-items:center; gap:10px; min-height:52px; padding:0 16px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); transition:border-color .2s var(--ease);
}
.search:focus-within{border-color:var(--accent)}
.search svg.i{color:var(--muted)}
.search input{flex:1; min-width:0; height:50px; border:0; outline:0; background:none; font-size:1rem}
.search input::placeholder{color:var(--muted)}
.search .clear{width:32px; height:32px; border-radius:50%; display:none; place-items:center; color:var(--muted)}
.search .clear.on{display:grid}
.search .clear:hover{color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent)}
.filters{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px}
.fgroup{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; max-width:100%}
.fgroup::-webkit-scrollbar{display:none}
.fbtn{
  flex:none; min-height:40px; padding:0 14px; border-radius:999px; font-size:.9375rem; font-weight:500; color:var(--muted);
  background:transparent; border:1px solid var(--line); transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.fbtn:hover{border-color:var(--accent); color:var(--ink)}
.fbtn[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.fgroup-label{align-self:center; font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* Sections */
section.sec{padding-top:40px}
.sec h2{display:flex; align-items:baseline; gap:12px; font:650 clamp(1.5rem,3.4vw,2rem)/1.1 var(--display); letter-spacing:-.02em}
.sec h2 small{font:500 .9375rem var(--text); color:var(--muted); letter-spacing:0}
.sec .note{margin-top:6px; color:var(--muted); font-size:.9375rem}
.grid{display:grid; gap:12px; margin-top:18px; grid-template-columns:repeat(auto-fill, minmax(min(100%,300px),1fr))}

.card{
  position:relative; display:flex; flex-direction:column; gap:14px; padding:16px; border-radius:24px;
  background:var(--surface); border:1px solid var(--line); transition:border-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card.link:hover{border-color:var(--accent)}
.card-top{display:flex; align-items:flex-start; gap:14px}
.chip{flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center}
.blue{background:var(--blue-bg); color:var(--blue-fg)}
.sand{background:var(--sand-bg); color:var(--sand-fg)}
.green{background:var(--green-bg); color:var(--green-fg)}
.peach{background:var(--peach-bg); color:var(--peach-fg)}
.lilac{background:var(--lilac-bg); color:var(--lilac-fg)}
.card h3{font:600 1.1875rem/1.2 var(--display); letter-spacing:-.01em}
.card h3 a{text-decoration:none}
.card h3 a::after{content:""; position:absolute; inset:0; border-radius:24px}
.host{display:block; margin-top:2px; color:var(--muted); font-size:.8125rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.blurb{color:var(--muted); font-size:.9375rem; line-height:1.45; text-wrap:pretty; flex:1}
.card-foot{display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; min-height:32px}
.badge{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; font-size:.75rem; font-weight:600; letter-spacing:.01em}
.badge.live{background:var(--green-bg); color:var(--green-fg)}
.badge.soon{background:var(--sand-bg); color:var(--sand-fg)}
.badge.paused{background:var(--peach-bg); color:var(--peach-fg)}
.badge.done{background:var(--blue-bg); color:var(--blue-fg)}
.badge.idea{background:var(--lilac-bg); color:var(--lilac-fg)}
.badge.tag{background:transparent; border:1px solid var(--line); color:var(--muted)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.5; flex:none}
.dot.up{background:var(--green-fg); opacity:1}
.dot.down{background:var(--peach-fg); opacity:1}
.repo{
  margin-left:auto; position:relative; z-index:1; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  color:var(--muted); text-decoration:none; transition:color .2s var(--ease), background-color .2s var(--ease);
}
.repo:hover{color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent)}
.repo svg.i{width:1.25rem; height:1.25rem}
.go{position:absolute; top:18px; right:18px; width:1.125rem; height:1.125rem; color:var(--muted); transition:transform .3s var(--ease), color .2s var(--ease)}
.card.soon-card{border-style:dashed}

/* Sheet lists: subdomain map and contact */
.sheet{list-style:none; padding:0; margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden}
.sheet>li+li{border-top:1px solid var(--line)}
.row{position:relative; display:flex; align-items:center; gap:14px; min-height:60px; padding:10px 16px; color:inherit; text-decoration:none; transition:background-color .2s var(--ease)}
a.row:hover{background:color-mix(in srgb, var(--accent) 7%, transparent)}
.row .text{flex:1; min-width:0}
.row .title{display:block; font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis}
.row .sub{display:block; color:var(--muted); font-size:.875rem; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .go{position:static; flex:none}
a.row:hover .go{transform:translate(2px,-2px); color:var(--ink)}
.map .row{min-height:56px}
.map .row .title{font-variant-numeric:tabular-nums}
.copy{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--muted); flex:none; margin-right:-8px; transition:color .2s var(--ease), background-color .2s var(--ease)}
.copy:hover{color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent)}
.copy .ok{display:none}
.copy.done{color:var(--green-fg)}
.copy.done .ok{display:block}.copy.done .cp{display:none}
.contact{display:grid; gap:0; grid-template-columns:1fr}
@media (min-width:720px){
  .contact-sheet{display:grid; grid-template-columns:1fr 1fr}
  .contact-sheet>li:nth-child(even){border-left:1px solid var(--line)}
  .contact-sheet>li:nth-child(2)~li{border-top:1px solid var(--line)}
  .contact-sheet>li:nth-child(2){border-top:0}
}
.empty{margin-top:48px; padding:32px 16px; text-align:center; color:var(--muted)}

footer{margin-top:56px; padding:22px 0 calc(32px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; color:var(--muted); font-size:.875rem}
footer a{display:inline-flex; align-items:center; gap:6px; text-decoration:none}
footer a:hover{color:var(--ink)}
footer svg.i{width:1rem; height:1rem}

.toast{
  position:fixed; z-index:6; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); translate:-50% 16px; opacity:0;
  padding:12px 18px; border-radius:999px; background:var(--ink); color:var(--bg); font-size:.9375rem; font-weight:500;
  pointer-events:none; transition:opacity .25s var(--ease), translate .35s var(--ease);
}
.toast.on{opacity:1; translate:-50% 0}

@media (hover:hover){
  .card.link:hover{transform:translateY(-2px); box-shadow:0 18px 34px -22px color-mix(in srgb, var(--accent) 70%, transparent)}
  .card.link:hover .go{transform:translate(2px,-2px); color:var(--ink)}
}

/* Ops tables */
.tablewrap{margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:auto}
table{width:100%; border-collapse:collapse; font-size:.9375rem; font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:12px 16px; vertical-align:top; border-top:1px solid var(--line)}
thead th{border-top:0; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
td.mono,.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:.875rem; word-break:break-all}
td.dim{color:var(--muted)}
.kv{display:grid; gap:0; grid-template-columns:1fr; margin-top:18px; background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden}
.kv>div{display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:space-between; padding:12px 16px; border-top:1px solid var(--line)}
.kv>div:first-child{border-top:0}
.kv dt{color:var(--muted)}.kv dd{font-weight:500; text-align:right}
.callout{margin-top:18px; padding:14px 16px; border-radius:18px; background:var(--sand-bg); color:var(--sand-fg); font-size:.9375rem}
.subnote{margin-top:8px; color:var(--muted); font-size:.875rem}

/* Theme change reveals from the toggle */
::view-transition-old(root),::view-transition-new(root){animation:none; mix-blend-mode:normal}
::view-transition-new(root){animation:reveal .7s var(--ease)}
@keyframes reveal{from{clip-path:circle(0 at var(--vx,100%) var(--vy,0))} to{clip-path:circle(150vmax at var(--vx,100%) var(--vy,0))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}
.has-copy .row{padding-right:64px}