/* Reduced to only what the pages actually use. Fonts self-hosted (Roboto:
   Apache-2.0; Sora: SIL OFL 1.1) — no runtime network requests. */

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/roboto.woff2') format('woff2');
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('assets/fonts/sora.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root {
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Roboto", ui-sans-serif, system-ui, sans-serif;

  /* Surfaces & text — dark mode */
  --bg:        #1E2021;   /* page background */
  --bg-muted:  #1E2021;   /* row pressed state */
  --surface:   #181A1B;   /* card / row surface */
  --surface-2: #232628;   /* raised surface — row hover */

  --fg:   #DFE1E5;        /* primary body text */
  --fg-1: #DFE1E5;
  --fg-3: #93999F;        /* tertiary / metadata */

  --border: #32373D;
  --accent: #2196F3;      /* Signal Blue — icon hover, focus ring */

  /* Radii */
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* Spacing scale (4-pt) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;

  /* Type scale */
  --display-2-size: 40px;  --display-2-line: 48px;
  --display-2-weight: 600; --display-2-tracking: -0.01em;

  --h1-size: 32px;      --h1-line: 40px;
  --body-l-size: 16px;  --body-l-line: 24px;
  --body-m-size: 14px;  --body-m-line: 20px;
  --body-s-size: 12px;  --body-s-line: 16px;
}

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

html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  /* svh excludes the in-app browser chrome, so the page doesn't overflow by
     the height of the toolbar in the Instagram/Facebook webviews. */
  min-height: 100vh;
  min-height: 100svh;
}

.display-2 {
  font-family: var(--font-display);
  font-size: var(--display-2-size);
  line-height: var(--display-2-line);
  font-weight: var(--display-2-weight);
  letter-spacing: var(--display-2-tracking);
}

.sprite { display: none; }

.page {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-5) var(--space-12);
}

/* ---------- Profile ---------- */

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

.avatar {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  margin-bottom: var(--space-1);
  overflow: hidden;
}

/* Fill the circle and center-crop, so a non-square source can't distort. */
.avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.name {
  margin: 0;
  color: var(--fg-1);
}

/* ---------- Link rows ---------- */

.links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Flat Material 1.0 rows: tonal surfaces only — no elevation, no borders,
   and state is communicated by background alone, never by movement. */
.link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

/* Optional decorative artwork behind a row, set per-link via --link-bg.
   Lives on ::before so the row's own hover/active background still reads
   through the faded left side. */
.link-art {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.link-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--link-bg);
  background-size: cover;
  /* Anchors the right edge, which is the region the mask leaves at full
     strength; wide viewports crop the left, narrow ones crop top/bottom. */
  background-position: center right;
  /* Even ramp across the full width — no hold at either end, so there is no
     visible edge where the artwork starts. */
  mask-image: linear-gradient(to right, transparent, #000);
  -webkit-mask-image: linear-gradient(to right, transparent, #000);
}

/* Scrim: sits above the artwork but below the text, so the left side stays
   legible while the right edge shows the artwork at full strength. */
.link-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
    var(--surface) 0%,
    color-mix(in srgb, var(--surface) 85%, transparent) 40%,
    color-mix(in srgb, var(--surface) 45%, transparent) 75%,
    transparent 100%);
  /* Darkening on hover happens here, not on .link — the row's own background
     sits below both pseudo-elements and would be hidden by the artwork. */
  box-shadow: inset 0 0 0 100vmax transparent;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.link-art:hover::after,
.link-art:focus-visible::after {
  box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 0.12);
}

.link-art:active::after {
  box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 0.2);
}

.link:hover { background: var(--surface-2); }

.link:active { background: var(--bg-muted); }

.link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* No inset plate behind the glyph — it sits flat on the row surface. */
.link-icon {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--fg-1);
  transition: color var(--dur-fast) var(--ease-out);
}

.link-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.link:hover .link-icon { color: var(--accent); }

.link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.link-title {
  font-size: var(--body-l-size);
  line-height: var(--body-l-line);
  font-weight: 500;
  letter-spacing: 0.0015em;
}

.link-meta {
  font-size: var(--body-s-size);
  line-height: var(--body-s-line);
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-arrow {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--fg-3);
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.link:hover .link-arrow { opacity: 1; }

/* The chevron sits at the right edge, where the scrim has cleared and the
   artwork shows at full strength — it needs to be brighter than --fg-3 to
   hold up against it. */
.link-art .link-arrow {
  color: #FFFFFF;
  opacity: 0.7;
}

.link-art:hover .link-arrow { opacity: 0.9; }

/* Chevron comes from the inline sprite, so it just inherits the row color. */
.link-arrow svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Separates the personal-page entry row from the social list. */
.links-secondary { margin-top: var(--space-6); }

/* ---------- Personal page ---------- */

/* Lifted out of the flow so the profile header lands at the same
   size and position as on the main page. */
.back {
  position: absolute;
  top: var(--space-6);
  left: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--fg-3);
  font-size: var(--body-m-size);
  line-height: var(--body-m-line);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.back:hover { color: var(--fg-1); }

.back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.back svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* One sentence per line via an explicit <br>; pretty (not balance) so the
   author's break is respected and only over-long lines re-wrap. */
.tagline {
  margin: 0;
  color: var(--fg-3);
  font-size: var(--body-m-size);
  line-height: var(--body-m-line);
  max-width: 46ch;
  text-wrap: pretty;
}

/* ---------- 404 ---------- */

/* Stands in for the avatar in the profile header, so the heading below it
   lands at the same rhythm as on the other pages. */
.error-code {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 88px;
  font-weight: 700;
  letter-spacing: -0.03em;
  /* Deliberately quiet — it is ornament, not the message. The <h1> below
     carries the meaning, and this line is aria-hidden. */
  color: var(--border);
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
  .page { padding: var(--space-12) var(--space-4) var(--space-10); }
  .name { font-size: var(--h1-size); line-height: var(--h1-line); }
  .error-code { font-size: 68px; line-height: 68px; }
  /* Track the page's narrower gutter so the back link stays on the keyline. */
  .back { top: var(--space-2); left: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}