/* Core Directive landing page.
   Tokens and the three self-hosted faces are lifted from the changelog site's
   cc.css so the apex and changelogs.core-directive.com read as one family.
   Nothing here is shared code: this page has no build step and no framework. */

@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}

:root{
  --display:"Fraunces",Georgia,serif;
  --ui:"Inter Tight",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --radius:4px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --sig:#f2a93b; --sig-dim:rgba(242,169,59,.32); --sig-ghost:rgba(242,169,59,.10);
  --bg:#121010; --raise:#1e1a18; --raise-2:#26211e;
  --ink:#f3ebdd; --ink-2:#b8ad9c; --ink-3:#9d9283;
  --rule:#26211e; --rule-2:#35302b;
  color-scheme:dark;
}

/* The apex follows the reader's OS rather than carrying a toggle: there is one
   screen here and nothing to remember a preference for. */
@media (prefers-color-scheme:light){
  :root{
    --sig:#8f5200; --sig-dim:rgba(143,82,0,.30); --sig-ghost:rgba(143,82,0,.09);
    --bg:#f6efe2; --raise:#e8dfcd; --raise-2:#dfd5c1;
    --ink:#1b1611; --ink-2:#4f463c; --ink-3:#5f564b;
    --rule:#ddd3c1; --rule-2:#c9bda6;
    color-scheme:light;
  }
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
}

.wrap{width:100%;max-width:640px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header */
.head{text-align:center;margin-bottom:48px}

.mark{
  width:34px;height:34px;margin:0 auto 20px;
  border:2px solid var(--sig);
  border-radius:50%;
  position:relative;
}
.mark::after{
  content:"";position:absolute;inset:8px;
  background:var(--sig);border-radius:50%;
}

.head h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(34px,7vw,50px);
  letter-spacing:-.02em;
  line-height:1.05;
}

.tag{
  margin-top:12px;
  color:var(--ink-2);
  font-size:16px;
  text-wrap:balance;
}

/* Projects */
.projects h2{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-bottom:8px;
  border-bottom:1px solid var(--rule);
  margin-bottom:16px;
}

.card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--raise);
  border:1px solid var(--rule-2);
  border-radius:var(--radius);
  padding:20px 22px;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.card + .card{margin-top:12px}
.card:hover,.card:focus-visible{
  border-color:var(--sig-dim);
  background:var(--raise-2);
  transform:translateY(-1px);
}
.card:focus-visible{outline:2px solid var(--sig);outline-offset:2px}

.card-name{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  letter-spacing:-.01em;
}
.card-desc{
  display:block;
  margin-top:6px;
  color:var(--ink-2);
  font-size:14.5px;
  text-wrap:pretty;
}
.card-host{
  display:block;
  margin-top:12px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--sig);
}

/* Footer links */
.foot{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--rule);
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--ink-2);
  font-size:14px;
  padding:8px 14px;
  border:1px solid var(--rule-2);
  border-radius:var(--radius);
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.link:hover,.link:focus-visible{
  color:var(--ink);
  border-color:var(--sig-dim);
  background:var(--sig-ghost);
}
.link:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.link svg{width:16px;height:16px;fill:currentColor;flex:none}

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

/* Plugins — the same section header, but rows rather than cards: four of them
   in card form pushed the page off one screen, and a plugin's install line is
   the thing a reader came for. */
.plugins{margin-top:32px}

.row{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:14px 2px;
  border-bottom:1px solid var(--rule);
  transition:background .18s var(--ease);
}
.row:first-of-type{border-top:0}
.row:hover,.row:focus-visible{background:var(--sig-ghost)}
.row:focus-visible{outline:2px solid var(--sig);outline-offset:2px}

.row-name{
  font-family:var(--mono);
  font-size:14px;
  font-weight:500;
  color:var(--sig);
}
.row-desc{
  display:block;
  margin-top:3px;
  color:var(--ink-2);
  font-size:14px;
  text-wrap:pretty;
}
.row-cmd{
  display:block;
  margin-top:8px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--ink-3);
  overflow-wrap:break-word;
}