/* parahuman.net
   Black, off-white, Mars red. Syne for display, Inter for reading, JetBrains Mono for data.
   Reveal on scroll; motion off when the OS asks for it. */

:root {
  --bg: #0a0a0b;
  --bg-2: #111113;
  --bg-3: #18181b;
  --plate: #000000;
  --line: #222226;
  --line-2: #2f2f35;
  --ink: #ece9e2;
  --ink-2: #b4b1a9;
  --ink-3: #78766f;
  --red: #d2451f;
  --red-2: #ff5a2e;
  --red-dim: #6e2612;
  --red-glow: rgba(210, 69, 31, 0.16);

  --display: "Syne", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 16px;
  --max: 1120px;
  --measure: 62ch;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  counter-reset: project;
}
::selection { background: var(--red); color: #fff; }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: text-decoration-color .2s; }
a:hover { text-decoration-color: var(--red-2); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
em { font-style: italic; color: var(--ink); }

/* ---------- reveal on scroll ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
html.js [data-reveal="left"] { transform: translateX(-36px); }
html.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { transition: opacity .3s linear; transform: none; }
}

/* ---------- nav + progress ---------- */
nav.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
#progress { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--red); transition: width .12s linear; }
nav.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
nav.top .brand { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; flex: none; color: var(--ink); }
nav.top .brand::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--red); margin-right: 10px; vertical-align: 1px; }
nav.top ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
nav.top ul::-webkit-scrollbar { display: none; }
nav.top li a { display: block; padding: 6px 10px; border-radius: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; }
nav.top li a:hover { color: var(--ink); background: var(--bg-3); }

/* ---------- hero ---------- */
header.hero { position: relative; padding: 112px 0 80px; border-bottom: 1px solid var(--line); overflow: hidden; }
header.hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%; background: radial-gradient(60% 60% at 18% 20%, var(--red-glow), transparent 70%); pointer-events: none; }
header.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: end; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin: 0 0 26px; }
.kicker::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--red); margin-right: 14px; vertical-align: 4px; }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(60px, 10.5vw, 128px); line-height: 0.92; letter-spacing: -0.035em; margin: 0 0 34px; color: var(--ink); }
.tagline { font-family: var(--display); font-size: clamp(24px, 3.2vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); max-width: min(48ch, 100%); margin: 0 0 36px; }
.velocity { font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-2); margin: -14px 0 34px; }
.velocity::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--red); margin-right: 14px; vertical-align: 0; }
.meta { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 26px; }
.meta span + span::before { content: "/"; margin-right: 22px; color: var(--line-2); }
.links { display: flex; flex-wrap: wrap; gap: 10px; }
.links a { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; text-decoration: none; border: 1px solid var(--line-2); border-radius: 4px; padding: 9px 16px; color: var(--ink); background: transparent; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.links a:hover { border-color: var(--red); background: var(--bg-2); transform: translateY(-1px); }

.portrait-wrap { position: relative; }
.portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; border: 1px solid var(--line-2); background: var(--bg-2); display: block; }
.portrait-wrap::before, .portrait-wrap::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--red); pointer-events: none; }
.portrait-wrap::before { left: -8px; top: -8px; border-right: 0; border-bottom: 0; }
.portrait-wrap::after { right: -8px; bottom: -8px; border-left: 0; border-top: 0; }

/* ---------- index ---------- */
section.index { padding: 48px 0 16px; }
section.index h2 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); font-weight: 500; margin: 0 0 10px; }
ol.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
ol.index li a { display: grid; grid-template-columns: 56px 1fr 28px; gap: 16px; align-items: baseline; padding: 20px 8px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .2s, padding-left .3s var(--ease); }
ol.index li a:hover { background: var(--bg-2); padding-left: 16px; }
ol.index li a:hover .t { color: var(--red-2); }
ol.index li a:hover .arrow { opacity: 1; transform: translate(0, 0); }
ol.index .n { font-family: var(--mono); font-size: 13px; color: var(--red); }
ol.index .t { font-family: var(--display); font-size: 27px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; transition: color .2s; }
ol.index .t small { display: block; font-size: 14px; font-weight: 400; color: var(--ink-3); margin-top: 4px; letter-spacing: 0; }
ol.index .arrow { font-family: var(--mono); color: var(--red); opacity: 0; transform: translate(-6px, 6px); transition: opacity .25s, transform .3s var(--ease); }

/* ---------- project ---------- */
section.project { padding: 112px 0 88px; border-bottom: 1px solid var(--line); counter-increment: project; counter-reset: fig; position: relative; }
.p-head { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: baseline; margin: 0 0 14px; }
.p-head .n { font-family: var(--mono); font-size: 14px; color: var(--red); }
.p-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 6vw, 72px); line-height: 1.0; letter-spacing: -0.03em; margin: 0; color: var(--ink); }
.lede { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin: 0 0 44px; }
.lede .status { color: var(--ink-2); }
.lede .status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); margin-right: 9px; vertical-align: 1px; }
.lede .status.live::before { background: var(--red); box-shadow: 0 0 0 4px var(--red-glow); }

/* Text first, across the full width in three columns (What I built | What was hard |
   What I learned); the spec sheet below in two newspaper columns (rows flow down the
   left, then the right), so a long list fills the width without pairing a short row
   beside a tall one. Phones get one column. */
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin: 48px 0 0; }
.cols > * { min-width: 0; }
.cols > .prose { order: -1; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto; grid-auto-flow: column; gap: 0 48px; }
.cols > .prose:has(> h4:only-of-type) { grid-template-columns: minmax(0, 1fr); max-width: var(--measure); }
.cols > .prose p { margin: 0; }
dl.specs { columns: 2; column-gap: 48px; }
dl.specs .h { -webkit-column-span: all; column-span: all; display: block; }
dl.specs > div { -webkit-column-break-inside: avoid; break-inside: avoid; }

dl.specs { margin: 0; border-top: 2px solid var(--red); }
dl.specs .h { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
dl.specs div { display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
dl.specs dt { font-family: var(--mono); font-size: 12px; color: var(--ink-3); padding-top: 3px; }
dl.specs dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
dl.specs dd strong { font-family: var(--mono); font-weight: 500; font-size: 13.5px; color: var(--ink); }
dl.specs dd a { color: var(--ink); }

.prose { max-width: var(--measure); }
.prose h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); font-weight: 500; margin: 0 0 10px; }
.prose p { margin: 0 0 22px; font-size: 17.5px; line-height: 1.6; color: var(--ink); }
.prose p:last-child { margin-bottom: 0; }

/* ---------- figures ---------- */
.lead { margin: 0 0 8px; }
.lead .frame { aspect-ratio: auto; }
.lead .frame img { height: auto; max-height: 760px; object-fit: contain; }
.lead.photo .frame { aspect-ratio: 16 / 10; }
.lead.photo .frame img { height: 100%; max-height: none; object-fit: cover; }
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px 20px; margin: 52px 0 0; }
.gallery figure { grid-column: span 4; }
.gallery figure.half { grid-column: span 6; }
.gallery figure.wide { grid-column: 1 / -1; }
figure { margin: 0; }
figure .frame { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--plate); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; transition: border-color .3s; }
figure:hover .frame { border-color: var(--line-2); }
figure.wide .frame { aspect-ratio: 21 / 9; }
figure.tall .frame { aspect-ratio: 3 / 4; }
figure.free .frame { aspect-ratio: auto; }
figure .frame video { display: block; width: 100%; height: auto; }
figure.tall .frame video { height: 100%; object-fit: cover; }
.gallery figure.row-start { grid-column: 1 / span 4; }
.gallery figure.half.row-start { grid-column: 1 / span 6; }
figure.wide.contain .frame { aspect-ratio: auto; }
figure .frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure.contain .frame img { object-fit: contain; }
figure.contain .frame { background: var(--plate); }
figure.plate .frame { background: #f6f4ee; }
figure.plate .frame img { object-fit: contain; }
figure.photo .frame { background: var(--bg-2); }
figure.panel .frame { aspect-ratio: 4 / 5; background: #060a0e; }
figure.panel .frame img { object-fit: cover; object-position: top; }
figcaption { font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--ink-3); padding: 10px 2px 0; }
figcaption::before { counter-increment: fig; content: counter(project, decimal-leading-zero) "." counter(fig) "  "; color: var(--red); }

/* ---------- misc ---------- */
section.plain { padding: 88px 0; border-bottom: 1px solid var(--line); }
section.plain h2 { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -0.03em; margin: 0 0 28px; }
ul.list { list-style: none; margin: 0; padding: 0; max-width: 76ch; border-top: 1px solid var(--line); }
ul.list li { display: grid; grid-template-columns: 160px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
ul.list .k { font-family: var(--mono); font-size: 12px; color: var(--red); padding-top: 3px; letter-spacing: 0.04em; }

footer { padding: 64px 0 112px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
footer a { color: var(--ink-2); }

/* ---------- live-site link ---------- */
.visit-row { grid-column: 2; margin: -26px 0 40px; }
.visit { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em;
  text-decoration: none; color: var(--ink); border: 1px solid var(--red); border-radius: 4px; padding: 12px 20px;
  background: var(--red-glow); transition: background .2s, transform .2s var(--ease); }
.visit:hover { background: var(--red); color: #fff; transform: translateY(-1px); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; gap: 36px; }
  .cols > .prose { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .cols > .prose h4:not(:first-child) { margin-top: 22px; }
  dl.specs { columns: 1; }
  .gallery figure { grid-column: span 6; }
  .gallery figure.row-start { grid-column: 1 / span 6; }
}
@media (max-width: 620px) {
  nav.top .brand { font-size: 12px; }
  nav.top li a { padding: 6px 8px; }
  .lead .frame img { max-height: 520px; }
  header.hero { padding: 64px 0 52px; }
  header.hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .portrait-wrap { width: 180px; }
  h1 { font-size: clamp(56px, 17vw, 96px); }
  section.project { padding: 72px 0 60px; }
  .p-head { grid-template-columns: 40px 1fr; }
  ol.index li a { grid-template-columns: 40px 1fr 20px; }
  .lede { grid-column: 1 / -1; }
  ol.index .t { font-size: 22px; }
  .gallery { gap: 16px 12px; }
  .gallery figure, .gallery figure.half, .gallery figure.row-start { grid-column: 1 / -1; }
  dl.specs div { grid-template-columns: 96px 1fr; }
  ul.list li { grid-template-columns: 1fr; gap: 2px; }
}

/* placeholder for Dylan's own prose; the page is not published while one remains */
.slot { border: 1px dashed #c9a227; background: #fff8dc; color: #8a6d00; padding: 10px 12px; margin: 0 0 14px; font-size: 14px; }