:root {
  --bg: #F5F2EC;
  --text: #1A1A1A;
  --accent: #C97A8A;
  --border: #1A1A1A;
  --muted: rgba(26, 26, 26, 0.55);
  --invert: #F5F2EC;

  /* fonts — overridden at runtime from config.js `fonts:` block */
  --font-body: "Iowan Old Style", "Hoefler Text", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Courier New", ui-monospace, monospace;
}
html[data-theme="dark"] {
  --bg: #141414;
  --text: #E8E0D8;
  --accent: #C97A8A;
  --border: #E8E0D8;
  --muted: rgba(232, 224, 216, 0.55);
  --invert: #141414;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.005em;
}
h1 { font-family: var(--font-heading); }
.mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
}
a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
hr { border: none; border-top: 1px solid var(--border); margin: 26px 0; }
.hidden { display: none !important; }

/* top bar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.topbar .theme-btn {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  background: none; border: none; color: var(--text);
  font: inherit; cursor: pointer; padding: 0;
}
.topbar .theme-btn:hover { color: var(--accent); }

/* multi-column masonry-style layout */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 28px 28px;
  columns: 2;
  column-gap: 36px;
}
main > section, main > footer {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 32px;
  display: block;
}
/* normalize: every section starts flush at top and ends flush at bottom
   so the only gap between sections is the section's own 20px margin */
main > section > :first-child { margin-top: 0 !important; }
main > section > :last-child  { margin-bottom: 0 !important; }
main > .full, main > hr.full, main > footer {
  column-span: all;
  -webkit-column-span: all;
}
/* column-span items break CSS column flow — give them extra top space so
   they don't visually collide with whatever column they cut beneath */
main > section.full { margin-top: 16px; }
hr.full { border: none; border-top: 1px solid var(--border); margin: 28px 0 18px; }
main > footer { margin-top: 0; }

@media (max-width: 760px) {
  main { columns: 1; padding: 70px 18px 24px; }
}

.hero { text-align: center; }
h1 {
  font-family: var(--font-heading);
  font-weight: normal;
  font-size: 38px;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
  line-height: 1.05;
}
.tagline {
  margin: 0;
  color: var(--accent);
  text-transform: lowercase;
}
.hero .status { justify-content: center; }
.cursor {
  display: inline-block;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { to { opacity: 0; } }

/* status strip */
.status {
  margin-top: 14px;
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
.status .item { display: inline-flex; gap: 6px; align-items: center; }
.status .item + .item::before { content: "·"; margin-right: 6px; }
.status .item.subtle { opacity: 0.55; font-size: 11.5px; }
/* alive counter: short form by default, full d/h/m/s on hover */
.status .alive-item { cursor: default; transition: color 0.15s; }
.status .alive-item:hover { color: var(--accent); }
.status .alive-item .alive-detailed { display: none; }
.status .alive-item:hover .alive-short    { display: none; }
.status .alive-item:hover .alive-detailed { display: inline; }
/* language tags never get the "·" separator — they have visual borders instead */
.status .lang-tag::before { content: "" !important; margin-right: 0 !important; }
.status .item:not(.lang-tag) + .lang-tag { margin-left: 10px; }
.status .lang-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: content-box;
  font-family: var(--font-mono);
  border: 1px solid var(--accent);
  height: 18px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  color: var(--accent);
  opacity: 0.9;
  cursor: default;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.status .lang-tag:hover { opacity: 1; background: var(--accent); color: var(--invert); }
.status .lang-tag + .lang-tag { margin-left: 5px; }
.pulse { color: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
.pulse.idle    { color: #c9a85a; }
.pulse.dnd     { color: #b35a5a; }
.pulse.offline { opacity: 0.4; animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* sections */
.label {
  text-transform: lowercase;
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
}
.label::before { content: "— "; color: var(--accent); opacity: 0.7; }

.now p {
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.now .k { color: var(--muted); display: inline-block; width: 90px; }

/* link row */
.links { display: flex; flex-wrap: wrap; gap: 6px; }
.lbox {
  border: 1px solid var(--border);
  padding: 4px 10px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  background: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  display: inline-block;
}
.lbox:hover { background: var(--border); color: var(--invert); }
.lbox.flash { background: var(--accent); color: var(--invert); border-color: var(--accent); }

.interests { margin: 0; font-family: var(--font-mono); font-size: 13px; }

/* projects */
.projects { display: flex; flex-direction: column; }
.prow {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-bottom: none;
  color: var(--text); text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.prow:last-child { border-bottom: 1px solid var(--border); }
.prow:hover { background: var(--border); color: var(--invert); }
.prow .desc { color: var(--muted); }
.prow:hover .desc { color: var(--invert); opacity: 0.75; }

/* images */
.imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.icell {
  border: 1px solid var(--border);
  padding: 4px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
}
.icell img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  background: var(--muted);
}
.icell .cap {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 100; cursor: pointer; padding: 24px;
}
.lightbox img { max-width: 90vw; max-height: 75vh; border: 1px solid #fff; }
.lightbox .cap {
  color: #fff;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.lightbox .details {
  color: #ccc;
  margin-top: 8px;
  max-width: min(560px, 88vw);
  text-align: center;
  white-space: pre-wrap;
  font-size: 12px;
  border-top: 1px solid #555;
  padding-top: 8px;
}

/* spotify / discord */
.sp-card, .dc-card {
  display: flex; gap: 12px; align-items: center;
  border: 1px solid var(--border);
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.sp-card img, .dc-card img {
  width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--border);
  flex-shrink: 0;
}
.sp-card .meta, .dc-card .meta { flex: 1; min-width: 0; }
.sp-card .meta .song { font-size: 13.5px; }
.sp-card .meta .sub, .dc-card .meta .sub { color: var(--muted); margin-top: 2px; }
.sp-bar {
  margin-top: 8px; height: 1px; background: var(--muted); position: relative;
}
.sp-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); width: 0; }
.sp-times { display: flex; justify-content: space-between; color: var(--muted); margin-top: 4px; font-size: 11px; }

/* footer */
footer {
  margin-top: 36px;
  color: var(--muted);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.device-line {
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  cursor: default;
}
.device-trigger {
  opacity: 0.45;
  cursor: pointer;
  user-select: none;
}
.device-trigger:hover { opacity: 0.8; }
.device-info {
  display: none;
  opacity: 0.6;
  max-width: 720px;
  margin: 0 auto;
}
.device-line:hover .device-trigger,
.device-line.expanded .device-trigger { display: none; }
.device-line:hover .device-info,
.device-line.expanded .device-info { display: inline-block; }

/* topbar right buttons */
.topbar-right { display: inline-flex; gap: 10px; align-items: center; }
.topbar-center { position: absolute; left: 50%; transform: translateX(-50%); }

/* music player */
.player {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  height: 22px;
  font-size: 12px;
}
.player .p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.85;
  vertical-align: middle;
}
.player .p-btn:hover { opacity: 1; color: var(--accent); }
/* per-glyph optical adjustments — unicode icons have wildly different
   intrinsic baselines so we nudge each one individually */
.player #p-prev,
.player #p-next    { font-size: 13px; transform: translateY(-1px); }
.player #p-play    { font-size: 14px; transform: translateY(-1px); }
.player #p-vol     { font-size: 13px; }
.player #p-listbtn { font-size: 14px; transform: translateY(0); letter-spacing: -0.5px; }
/* progress bar — visible line is 2px, but the clickable hitbox is 18px tall */
.player .p-bar {
  width: 90px;
  height: 18px;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.player .p-bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(50% + 1px);
  transform: translateY(-50%);
  height: 2px;
  background: var(--muted);
  opacity: 0.55;
}
.player .p-fill {
  position: absolute;
  left: 0;
  top: calc(50% + 1px);
  transform: translateY(-50%);
  height: 2px;
  width: 0%;
  background: var(--accent);
}
.player.muted .p-vol { opacity: 0.35; }

/* playlist dropdown */
.p-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-width: 320px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  z-index: 60;
  font-family: var(--font-mono);
  font-size: 12px;
}
.p-list-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-list-row:last-child { border-bottom: none; }
.p-list-row:hover { background: var(--border); color: var(--invert); }
.p-list-row .p-num { color: var(--muted); width: 18px; flex-shrink: 0; }
.p-list-row .p-ttl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.p-list-row.active { color: var(--accent); }
.p-list-row.active:hover { background: var(--accent); color: var(--invert); }
.p-list-row.active:hover .p-num { color: var(--invert); }
.p-list-row.active .p-num { color: var(--accent); }
.p-list-row.active .p-num::before { content: "▶"; }
.p-list-row.active .p-num span { display: none; }

/* entrance overlay */
.entrance {
  position: fixed;
  inset: 0;
  z-index: 200;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}
.entrance-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--bg);
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
}
.entrance-half.top    { top: 0;    border-bottom: 1px solid var(--accent); }
.entrance-half.bottom { bottom: 0; }
.entrance-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--text);
  text-transform: lowercase;
  letter-spacing: 0.18em;
  text-align: center;
  transition: opacity 0.35s ease-out, transform 0.6s ease-out;
  pointer-events: none;
}
.entrance::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.04) 100%);
  pointer-events: none;
  z-index: 1;
}
.entrance.opening .top    { transform: translateY(-100%); }
.entrance.opening .bottom { transform: translateY(100%); }
.entrance.opening .entrance-text {
  opacity: 0;
  transform: scale(0.92);
}
/* once the user has clicked, stop the overlay from blocking the cursor
   and clicks — the animation underneath is purely cosmetic from here. */
.entrance.opening {
  pointer-events: none;
  cursor: default;
}

@media (max-width: 760px) {
  .player .p-bar { width: 52px; }
  .topbar-center { display: none; }
}

/* goals */
.goals { list-style: none; padding: 0; margin: 0; }
.goals li {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-bottom: none;
  display: flex; justify-content: space-between; gap: 10px;
}
.goals li:last-child { border-bottom: 1px solid var(--border); }
.goals li .note { color: var(--muted); }

/* stamps */
.stamps { display: flex; flex-wrap: wrap; gap: 4px; }
.stamp {
  border: 1px solid var(--border);
  padding: 6px 8px 5px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  cursor: default;
  position: relative;
  min-width: 38px;
  text-align: center;
  user-select: none;
}
.stamp:hover { background: var(--border); color: var(--invert); }
.stamp[data-note]::after {
  content: attr(data-title) " · " attr(data-note);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 4px 8px;
  font-size: 10.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 30;
}
.stamp:hover::after { opacity: 1; }

/* easter egg */
.egg {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--bg); border: 1px solid var(--border); padding: 8px 14px;
  color: var(--accent);
  font-family: var(--font-mono); font-size: 12px;
  z-index: 50;
}

@media (max-width: 540px) {
  main { padding: 70px 16px 50px; }
  h1 { font-size: 30px; }
  .imgs { grid-template-columns: repeat(2, 1fr); }
  .now .k { width: 80px; }
}