/* ── Reset ─────────────────────────────────────── */

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

/* ── Tokens ─────────────────────────────────────── */

:root {
  --page:   #111010;   /* near-black page surface */
  --col:    #1E1D1A;   /* dark gray column */
  --stroke: #68655E;   /* light gray 2px border */
  --text:   #DDD9D2;   /* warm off-white text */
  --mid:    #888480;   /* muted: labels, meta, descriptor */
  --sub:    #555250;   /* very muted: spec note */
}

/* ── Base ───────────────────────────────────────── */

html {
  background-color: var(--page);
  height: 100%;
}

/*
  Body is the dark desk. It never scrolls.
  The column floats centered within it.
*/

body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--page);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Checkbox (CSS hamburger engine) ─────────────── */
/*
  Lives outside .wrap as a body sibling so the
  selector #nav-toggle:checked ~ .wrap [...] can
  reach inside the column via the general sibling
  combinator (~) then a descendant combinator.
*/

.nav-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Floating column ─────────────────────────────── */
/*
  Fixed dimensions. overflow: hidden so the overlay
  can sit flush to the edges. Content scrolls inside
  .wrap-inner, not here.
*/

.wrap {
  position: relative;
  width: min(520px, calc(100vw - 3rem));
  height: calc(100vh - 8rem);
  background-color: var(--col);
  border: 2px solid var(--stroke);
  overflow: hidden;
}

/* ── Hamburger button ────────────────────────────── */
/*
  Absolutely positioned inside .wrap, above the overlay
  (z-index 20 vs overlay's 10), so it stays clickable
  to toggle the nav closed without navigating away.
*/

.hamburger {
  position: absolute;
  top: 1.75rem;
  right: 2.25rem;
  z-index: 20;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  margin: -6px;
}

.h-bar {
  display: block;
  width: 16px;
  height: 1px;
  background-color: var(--mid);
  transition: background-color 0.12s;
}

.h-x {
  display: none;
  font-size: 15px;
  line-height: 1;
  color: white;
}

.hamburger:hover .h-bar {
  background-color: var(--text);
}

/* Swap bars for × when nav is open */
#nav-toggle:checked ~ .wrap .h-bar { display: none; }
#nav-toggle:checked ~ .wrap .h-x   { display: block; }

/* ── Scrollable inner content ─────────────────────── */

.wrap-inner {
  height: 100%;
  overflow-y: auto;
  padding: 2.5rem 3rem 7rem;
  /* Thin scrollbar so it doesn't compete with content */
  scrollbar-width: thin;
  scrollbar-color: var(--stroke) transparent;
}

.wrap-inner::-webkit-scrollbar       { width: 3px; }
.wrap-inner::-webkit-scrollbar-track { background: transparent; }
.wrap-inner::-webkit-scrollbar-thumb { background: var(--stroke); }

/* ── Masthead ─────────────────────────────────────── */

.masthead {
  /* Right padding clears the hamburger button */
  padding-right: 3rem;
  margin-bottom: 4.5rem;
}

.masthead-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.masthead-descriptor {
  font-size: 12px;
  font-style: italic;
  color: var(--mid);
  margin-bottom: 0.65rem;
}

.masthead-contact {
  font-size: 11px;
  color: var(--mid);
}

.masthead-contact a:hover {
  color: var(--text);
}

/* ── Nav overlay ─────────────────────────────────── */
/*
  Covers the column at 50% black. Hidden until the
  checkbox is checked. Links navigate away naturally,
  which resets the checkbox on the new page load.
*/

.nav-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 10;
  display: none;
}

#nav-toggle:checked ~ .wrap .nav-overlay {
  display: block;
}

.overlay-links {
  position: absolute;
  right: 3rem;
  top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: flex-end;
}

.overlay-links a {
  font-size: 14px;
  font-weight: 400;
  color: white;
  letter-spacing: 0.01em;
}

.overlay-links a:hover {
  opacity: 0.65;
}

/* ── Index list (About + Contact) ────────────────── */

.index-list {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 2.5rem;
  row-gap: 0.6rem;
  align-items: baseline;
  margin-top: 3.5rem;
}

.index-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
}

.index-val {
  font-size: 12px;
  color: var(--text);
}

.index-val a:hover {
  color: var(--mid);
}

/* ── About page ──────────────────────────────────── */

.about-body p {
  font-size: 13px;
  line-height: 2;
  color: var(--text);
  max-width: 400px;
  margin-bottom: 1.25rem;
}

.about-body p:last-child {
  margin-bottom: 0;
}

.about-body a:hover {
  color: var(--mid);
}

/* ── Work page ───────────────────────────────────── */

.work-note {
  font-size: 11px;
  font-style: italic;
  color: var(--sub);
  margin-bottom: 4rem;
}

.category-block {
  margin-bottom: 5.5rem;
}

.category-block:last-child {
  margin-bottom: 0;
}

.cat-header {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 2.5rem;
}

.piece {
  margin-bottom: 3.25rem;
}

.piece:last-child {
  margin-bottom: 0;
}

.piece-head {
  font-size: 13px;
  font-weight: 400;
  color: var(--mid);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.piece-head .piece-title {
  color: var(--text);
}

.piece-copy {
  font-size: 12.5px;
  line-height: 2.15;
  color: var(--text);
  white-space: pre-wrap;
  margin: 0 2rem;
}

/* ── Contact page ────────────────────────────────── */

.contact-intro {
  font-size: 13px;
  line-height: 2;
  color: var(--text);
  max-width: 400px;
}