:root{
  --paper:#f6f0e8;
  --paper-2:#efe7dc;
  --ink:#1a1622;
  --muted:#5a5166;
  --stroke:#d6c9bb;
  --accent:#8a6bff;
  --accent-2:#f2a65a;
  --shadow:0 20px 50px rgba(0,0,0,.15);
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --serif:"Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

html[data-theme="dark"]{
  --paper:#131118;
  --paper-2:#1b1822;
  --ink:#f4efe7;
  --muted:#bdb2a6;
  --stroke:#2e2a33;
  --accent:#b18cff;
  --accent-2:#f2a65a;
  --shadow:0 24px 60px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(138,107,255,.08), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(242,166,90,.1), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  font-family:var(--serif);
  line-height:1.7;
}

body::before{
  content:none;
}

.paper{
  max-width:1100px;
  margin:32px auto 72px;
  padding:26px 26px 32px;
  background: var(--paper);
  border:1px solid var(--stroke);
  border-radius:28px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}

.paper::after{
  content:none;
}

.mast{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  border-bottom:1px dashed var(--stroke);
  padding-bottom:18px;
  margin-bottom:22px;
}

.mark{
  width:72px; height:72px;
  border-radius:18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:grid; place-items:center;
  border:1px solid rgba(0,0,0,.15);
  overflow:hidden;
}

.logo{
  width:100%;
  height:100%;
  object-fit:cover;
}

.kicker{
  margin:0;
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.25em;
  color:var(--muted);
}

h1{
  margin:.2rem 0 .3rem;
  font-size: clamp(30px, 4vw, 54px);
  letter-spacing:-.02em;
}

.sub{
  margin:0;
  font-family:var(--mono);
  color:var(--muted);
  font-size:14px;
}

.toggle{
  align-self:start;
  background: transparent;
  color:var(--ink);
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:8px 12px;
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  cursor:pointer;
}

.grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
}

.card{
  background: rgba(255,255,255,.6);
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:18px;
  position:relative;
}

html[data-theme="dark"] .card{
  background: rgba(255,255,255,.04);
}

.card h2{
  margin:0 0 12px;
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--muted);
}

.about p{margin:0 0 12px}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chips span{
  border:1px solid var(--stroke);
  padding:6px 10px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
}

.links a{
  display:grid;
  grid-template-columns:18px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--ink);
  border:1px dashed var(--stroke);
  margin-bottom:10px;
  background: rgba(255,255,255,.4);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

html[data-theme="dark"] .links a{
  background: rgba(255,255,255,.03);
}

.links a:hover{
  transform: translateY(-2px);
  border-color:var(--accent);
  background: rgba(138,107,255,.08);
}

.dot{
  width:10px; height:10px;
  border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(138,107,255,.4);
}

.path{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
}

@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
  .mast{grid-template-columns:1fr}
  .toggle{justify-self:start}
}

@media (max-width: 560px){
  .paper{margin:16px 12px 60px; padding:20px}
  .mark{width:60px; height:60px}
  h1{font-size:28px}
}