/* Alan Ray - portfolio. */

:root {
  color-scheme: dark;

  --paper:      #131619;
  --paper-dim:  #1C2024;
  --ink:        #E6E8EA;
  --ink-soft:   #93999F;
  --accent:     #9DB2C6;
  --accent-lit: #BACDDE;
  --rule:       #282D32;

  --display: "IBM Plex Mono", ui-monospace, monospace;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.8rem, 1.5rem + 1.4vw, 2.8rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.8rem);

  --pad:  clamp(1.5rem, 4vw, 3.5rem);
  --gap:  clamp(1.5rem, 4vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; width: 100%; object-fit: cover; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 300 var(--step-0)/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--accent-lit); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 1;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
  font: var(--step--1) var(--mono);
}

/* layout ---------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--gap);
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--pad);
  min-height: 100vh;
}

.rail { position: sticky; top: var(--pad); align-self: start; }
.content { min-width: 0; }

/* index (nav) ----------------------------------------------- */

.wordmark {
  display: block;
  font: 600 var(--step-1)/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 2.5rem;
}

.index { font: var(--step--1) var(--mono); }

.index a {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  padding: 0.3rem 0;
  color: var(--ink-soft);
  text-decoration: none;
  border-top: 1px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}

.index a::before {
  content: attr(data-entry);
  color: var(--rule);
  font-variant-numeric: tabular-nums;
}

.index a:is(:hover, :focus-visible) { color: var(--accent); border-top-color: var(--rule); }
.index a:is(:hover, :focus-visible)::before { color: var(--accent); }
.index a[aria-current="page"] { color: var(--ink); border-top-color: var(--ink); }
.index a[aria-current="page"]::before { color: var(--ink); }

/* sub-entries sit under their parent, number in the parent's label column */
.index ul { padding-left: 2.1rem; }
.index ul a { grid-template-columns: 2.9rem 1fr; }
.index li:has(ul [aria-current="page"]) > a,
.index li:has(ul [aria-current="page"]) > a::before { color: var(--ink); }

/* type ------------------------------------------------------ */

h1 {
  font: 500 var(--step-2)/1.1 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

.epigraph {
  font: 300 var(--step-1)/1.4 var(--body);
  text-wrap: pretty;
  max-width: 46ch;
  margin-bottom: 2.5rem;
}

.lede { font-size: var(--step-1); line-height: 1.35; text-wrap: pretty; }

.label {
  display: block;
  font: var(--step--1) var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}

.prose { max-width: 60ch; }
.prose p + p { margin-top: 1.1rem; }
.prose + .prose { margin-top: clamp(2rem, 5vw, 3rem); }

/* images ---------------------------------------------------- */

.hero img { height: 100%; min-height: 60vh; }
.banner { aspect-ratio: 3 / 2; max-height: 62vh; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.portrait { aspect-ratio: 4 / 5; }
.owen { aspect-ratio: 1; margin-top: 1rem; }

.embed { aspect-ratio: 16 / 9; margin: 2rem 0; background: var(--paper-dim); }
.embed iframe { width: 100%; height: 100%; border: 0; }

/* home ------------------------------------------------------ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
  min-height: 78vh;
}

/* about ----------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.meta {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font: var(--step--1) var(--mono);
}

.meta dt {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

/* entry lists ----------------------------------------------- */

.entries { margin-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--rule); }

.entries a {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.14s, padding 0.14s;
}

.entries a:is(:hover, :focus-visible) {
  background: var(--paper-dim);
  padding-inline: 0.8rem;
}

.entries h2 { font: 500 var(--step-1)/1.15 var(--display); letter-spacing: -0.02em; }
.entries p { max-width: 52ch; margin-top: 0.35rem; }

.entries .num,
.entries .status {
  font: var(--step--1) var(--mono);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.entries .status { text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

/* footer ---------------------------------------------------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: clamp(3rem, 8vw, 6rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font: var(--step--1) var(--mono);
  color: var(--ink-soft);
}

/* responsive ------------------------------------------------ */

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; gap: 2rem; }
  .rail { position: static; }
  .wordmark { margin-bottom: 1rem; }

  .index {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.2rem;
    border-top: 1px solid var(--rule);
    padding-top: 0.8rem;
  }
  .index a { grid-template-columns: 1fr; border-top: 0; padding: 0.2rem 0; }
  .index a::before { display: none; }
  .index a[aria-current="page"] { border-top: 0; text-decoration: underline; }
  .index li, .index ul { display: contents; }
  .index ul a { grid-template-columns: 1fr; }

  .hero { display: flex; flex-direction: column-reverse; gap: 1.5rem; min-height: 0; }
  .hero img { min-height: 45vh; }

  .about { grid-template-columns: 1fr; }
  .portrait, .owen { max-width: 20rem; }

  .entries a { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .entries .status { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}