/* Static project and document pages. Each one is a leaf of the same notebook as the
   landing: the app's parchment tokens, Fraunces for headings, Schibsted Grotesk for
   reading, a cream folio leaf with paper grain on the worked-parchment ground. Light
   only, by decision D-37: there is no dark theme on these pages. */

@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/schibsted-grotesk-var.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 400; font-display: swap; src: url('/fonts/fraunces-regular.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-semibold.woff2') format('woff2'); }

:root {
  --font-body: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* the same light tokens as src/styles/app.css */
  --paper: #F3ECDE;
  --cream: #FBF7EE;
  --ink: #1F2B26;
  --quiet: #46534C;
  --rule: #D9CDB4;
  --rim: #7D7566;
  --accent: #8A3A1E;
  --accent-ink: #FFFFFF;
  --hairline: rgba(140, 106, 42, .34);
  --shadow: 0 1px 2px rgba(31, 43, 38, .08), 0 8px 28px rgba(31, 43, 38, .10);
  --sketch-opacity: .13;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* iOS: the toolbar collapses, the ground still fills the screen */
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* the notebook wall behind the leaf: the worked parchment at full strength, printed
     down to the sphere wall's deeper tan (median near 172,157,130) and darker toward the
     edges, so the page belongs to the same room as the landing */
  background-color: #ad9d82;
  background-image:
    radial-gradient(ellipse 80% 75% at 50% 40%, rgba(120, 92, 56, 0) 55%, rgba(92, 68, 38, .38) 100%),
    linear-gradient(rgb(198, 198, 196), rgb(198, 198, 196)),
    url('/art/library/m2-worked-parchment.webp');
  background-size: auto, auto, 100% auto;
  background-position: center, center, center top;
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-blend-mode: multiply, multiply, normal;
  background-attachment: scroll;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.005em; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 650; }

.wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(72rem, 100% - 4rem); } }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 20; padding: .6rem 1rem; background: var(--ink); color: var(--cream); font: 600 1rem var(--font-body); }
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
main:focus { outline: none; }

/* Header: the same straight-edged bar as the landing's top bar */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rim);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.monogram { font: 600 1.35rem/1 var(--font-display); letter-spacing: .01em; text-decoration: none; padding: .5rem 0; min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); }
.ink-period { color: var(--accent); }
.site-nav { display: flex; gap: .15rem; margin-left: auto; }
.button-small { min-height: 44px; padding: 7px 12px; font-size: 14px; }
.resume-link { flex: none; margin-left: .25rem; }
.site-nav a {
  font: 500 .95rem/1 var(--font-body); text-decoration: none;
  padding: 0 .7rem; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap;
  border-radius: 4px; color: var(--ink);
}
.site-nav a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.site-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 4px 4px 0 0; }

@media (max-width: 820px) {
  /* the bar wraps to a monogram row and a nav row; the top padding keeps the Resume button
     off the screen edge (and under a notch on iOS) */
  .header-inner { flex-wrap: wrap; gap: 0 .5rem; padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); }
  .site-nav { order: 3; width: 100%; margin: 0 -.55rem; padding-bottom: .25rem; flex-wrap: wrap; gap: 0; }
  .site-nav a { padding: 0 .55rem; }
  .resume-link { margin-left: auto; min-height: 44px; }
  .site-header { position: static; }
}

/* Shared text */
.eyebrow { font: 600 .8rem/1.4 var(--font-body); letter-spacing: .02em; color: var(--quiet); margin-bottom: .6rem; }
.lede { font-size: 1.2rem; line-height: 1.55; }
.narrow { max-width: 42rem; }
.small-note { font-size: .9rem; line-height: 1.5; color: var(--quiet); }

.badge {
  display: inline-block; padding: .25rem .6rem; border: 1px solid var(--quiet); border-radius: 3px;
  font: 600 .8rem/1.3 var(--font-body); color: var(--quiet);
}

.text-link { font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; display: inline-flex; align-items: center; min-height: 44px; gap: .3em; }
.text-link:hover { text-decoration-thickness: 2px; }

.button {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: .55rem 1.1rem;
  font: 600 .95rem/1.2 var(--font-body); text-decoration: none;
  background: var(--accent); color: var(--accent-ink); border: 1.5px solid var(--accent); border-radius: 4px;
  transition: filter .15s;
}
.button:hover { filter: brightness(1.08); }
.button-quiet { background: transparent; color: var(--ink); border-color: var(--quiet); }
.button-quiet:hover { border-color: var(--ink); filter: none; }

.reading-list { padding-left: 1.2rem; margin: 0 0 1em; }
.reading-list li { margin-bottom: .45em; padding-left: .15em; }
.reading-list li::marker { color: var(--accent); }

.links { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.links-row { gap: .75rem; margin-top: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.5rem; }

/* The page as a folio leaf: cream stock with paper grain, an inner hairline like the
   reader's, and a soft shadow on the parchment ground. */
.section { position: relative; isolation: isolate; margin: clamp(1.25rem, 4vw, 3rem) auto clamp(2rem, 5vw, 4rem); padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.1rem, 4vw, 4rem) clamp(2.5rem, 5vw, 4rem); width: min(72rem, 100% - 1.25rem); overflow: hidden; }
@media (min-width: 700px) { .section { width: min(72rem, 100% - 4rem); } }
.section .wrap { width: 100%; }
.section::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('/paper.svg') center / 180px 180px, var(--cream);
  box-shadow: var(--shadow);
}
.section::after { content: ''; position: absolute; inset: 5px; z-index: -1; border: 1px solid var(--hairline); pointer-events: none; }

/* Faint ink sketches from the approved cutouts, as marginalia on the leaf */
.sketch {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  width: clamp(14rem, 24vw, 24rem); height: auto;
  right: clamp(.5rem, 3vw, 3rem); top: 1.25rem;
  opacity: var(--sketch-opacity);
}
@media (max-width: 860px) { .sketch { width: 14rem; right: -3rem; opacity: calc(var(--sketch-opacity) * .7); } }

/* Projects, one page each */
.project-list { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.project { padding: 2rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: .5rem 2.5rem; }
@media (min-width: 860px) { .project { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.project-kind { font: 600 .85rem/1.4 var(--font-body); color: var(--quiet); margin-bottom: .35rem; }
.project h3 { font-size: 1.55rem; margin: 0; }
.project-date { font-size: .9rem; line-height: 1.5; color: var(--quiet); margin-bottom: .75rem; }
.project-date strong { color: var(--ink); font-weight: 600; }
.project-name { font-size: 1.6rem; margin: 0; }
.project h3 a, .project-name a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.project h3 a:hover, .project-name a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }

.section .subhead { margin-top: 3.5rem; font-size: 1.5rem; }
.prep-grid { display: grid; gap: 1.25rem; margin-top: 1rem; }
@media (min-width: 760px) { .prep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.project-prep { padding: 1.75rem 1.75rem .75rem; border: 1px dashed var(--quiet); border-radius: 2px; }
.project-prep h4 { font-size: 1.3rem; }

/* Project evidence image */
.evidence { margin: 1.25rem 0 1rem; }
.evidence img { width: 100%; border: 1px solid var(--rule); border-radius: 3px; background: #fff; }
.evidence figcaption { margin-top: .5rem; font-size: .9rem; color: var(--quiet); }
.evidence figcaption a { font-weight: 600; color: var(--accent); text-decoration-color: var(--accent); text-underline-offset: .2em; display: inline-flex; align-items: center; gap: .3em; min-height: 44px; margin: -.5rem 0; }

/* Project pages */
.project-page { min-height: 60vh; }
.breadcrumb { font-size: .9rem; color: var(--quiet); margin-bottom: 1rem; }
.breadcrumb a { color: var(--quiet); text-decoration-color: var(--rule); text-underline-offset: .2em; display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a:hover { color: var(--ink); text-decoration-color: var(--accent); }
.page-title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.01em; max-width: 22ch; margin-bottom: .45em; }
.page-body { max-width: 46rem; margin-top: 2rem; }
.page-body h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.page-body > p, .page-body .reading-list { max-width: 62ch; }
.more-projects { list-style: none; padding: 0; margin: 1rem 0 0; border-top: 1px solid var(--rule); max-width: 46rem; }
.more-projects li { padding: .25rem 0; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: center; justify-content: space-between; }
.more-projects a { font: 600 1.05rem/1.35 var(--font-display); color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.more-projects a:hover { text-decoration: underline; text-underline-offset: .18em; }
.more-projects span { color: var(--quiet); font-size: .9rem; }

/* Footer */
.site-footer { padding: 0 0 2rem; font-size: .9rem; color: var(--quiet); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding: .35rem 1.25rem; background: url('/paper.svg') center / 140px 140px, var(--cream); box-shadow: var(--shadow); }
.footer-inner p { margin: 0; }
.site-footer .text-link { font-size: .9rem; color: var(--ink); text-decoration-color: var(--accent); }

@media print {
  .site-header, .sketch, .actions, .site-footer .text-link { display: none; }
  body { background: #fff; color: #000; }
  .section::before, .section::after { display: none; }
}

/* The Runner project page carries two gameplay captures */
.shots { display: grid; gap: 1rem; margin: 2rem 0 0; max-width: 60rem; }
@media (min-width: 760px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shots .evidence { margin: 0; }
.shots .evidence img { background: #0b0f1a; image-rendering: pixelated; }

/* The full piece comes first: its buttons sit under the date, the summary below them. */
.project-page .links-row + .lede { margin-top: 1.75rem; }