/* dreeko.space — landing page + live status board.
   Palette and type lifted from dreeko.me so the two sites read as siblings:
   forest ink on warm paper, lime and coral accents, Playfair / Manrope / DM Mono.
   dreeko.me is light-only; this one adds a dark scheme because a status board gets
   opened at 2am more often than a CV does. */

@font-face{font-family:'Manrope';src:url('fonts/manrope-variable-latin.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url('fonts/manrope-variable-latin-ext.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';src:url('fonts/playfair-500-italic-latin.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';src:url('fonts/playfair-500-normal-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';src:url('fonts/dm-mono-400-normal-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';src:url('fonts/dm-mono-500-normal-latin.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#10221f; --ink-soft:#53635f; --paper:#f5f4ee; --panel:#ebece3;
  --lime:#d8ff4d; --coral:#fe6347; --coral-ink:#b14531;
  --line:rgba(16,34,31,.16); --line-soft:rgba(16,34,31,.08);
  --up:#2c6e49; --down:#b14531; --unknown:#8a938f;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Manrope',system-ui,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#eceee9; --ink-soft:#9aa5a1; --paper:#0d1a18; --panel:#142523;
    --line:rgba(236,238,233,.16); --line-soft:rgba(236,238,233,.08);
    --up:#7fd4a3; --down:#ff8a72; --coral-ink:#ff8a72; --unknown:#7d8783;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:clamp(1rem,1.25vw,1.1rem); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:58rem;margin:0 auto;padding:clamp(2.5rem,7vw,5rem) clamp(1.25rem,5vw,2.5rem) 3rem}
a{color:inherit}

/* ── masthead ─────────────────────────────────────────────── */
.mast{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 1.5rem;margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
h1{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(2.1rem,5vw,3.2rem); line-height:1; letter-spacing:-.02em; margin:0;
}

/* ── summary bar ──────────────────────────────────────────── */
.bar{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .75rem;
  padding:.6rem .9rem;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:.6rem;
  font-family:var(--mono);font-size:.8rem;
}
.bar .headline{font-weight:500;letter-spacing:-.01em}
.bar .meta{color:var(--ink-soft);font-size:.74rem}
.bar[data-state="down"]{border-color:var(--down);background:color-mix(in srgb,var(--down) 9%,var(--panel))}
.bar[data-state="unknown"]{border-style:dashed;border-color:var(--line)}

/* ── service grid ─────────────────────────────────────────── */
/* auto-fit keeps the cards honest at any width: 3 up on a desktop, 2 on a tablet,
   1 on a phone, without a media query per breakpoint. */
ul.services{
  list-style:none;margin:0 0 2.5rem;padding:0;
  display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
li.svc{display:flex}
li.svc>a{
  flex:1;display:flex;flex-direction:column;gap:.3rem;
  padding:1rem 1.05rem;text-decoration:none;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:.6rem;
  transition:border-color .15s ease,transform .15s ease;
}
li.svc>a:hover,li.svc>a:focus-visible{border-color:var(--line);transform:translateY(-2px)}
li.svc>a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* A down card should be findable by shape, not just hue. */
li.svc[data-status="down"]>a{border-color:var(--down);background:color-mix(in srgb,var(--down) 8%,var(--panel))}

.row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

.dot{
  width:.55rem;height:.55rem;border-radius:50%;flex:none;
  background:var(--unknown);box-shadow:0 0 0 3px color-mix(in srgb,var(--unknown) 22%,transparent);
  transition:background .2s ease,box-shadow .2s ease;
}
[data-status="up"] .dot{background:var(--up);box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 22%,transparent)}
[data-status="down"] .dot{background:var(--down);box-shadow:0 0 0 3px color-mix(in srgb,var(--down) 25%,transparent)}

.name{font-weight:600;font-size:1rem;letter-spacing:-.01em}
.host{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);overflow-wrap:anywhere}
.pill{font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);margin-top:auto;padding-top:.35rem}
[data-status="down"] .pill{color:var(--down);font-weight:500}

/* Origin-level posture, surfaced on the card: these carry X-Robots-Tag: noindex,
   and their links here are rel="nofollow" so the front door doesn't undo that. */
.tag{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:.3rem;
  padding:.05rem .3rem;white-space:nowrap;
}

/* ── footer ───────────────────────────────────────────────── */
footer{
  display:flex;flex-wrap:wrap;gap:.35rem 1rem;justify-content:space-between;
  border-top:1px solid var(--line-soft);padding-top:1rem;
  color:var(--ink-soft);font-family:var(--mono);font-size:.72rem;
}
footer a{color:var(--ink-soft);text-decoration-color:var(--line);text-underline-offset:.2em}
footer a:hover{color:var(--ink);text-decoration-color:currentColor}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}