/* Static resume and portfolio site. One type family, Schibsted Grotesk, set
   for reading. The Renaissance feel comes from the parchment palette and faint
   ink sketches behind each section, not from display type. */

@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/classic/fonts/schibsted-grotesk-var.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/classic/fonts/schibsted-grotesk-italic-var.woff2') format('woff2'); }

:root {
  --font-body: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);

  --paper: #f3ecde;
  --paper-deep: #e9e0cd;
  --cream: #faf7ee;
  --ink: #263d35;
  --quiet: #4b6059;
  --rule: #c9bea6;
  --accent: #963d36;
  --accent-ink: #faf7ee;
  --sage: #dce2d3;
  --sage-ink: #3d6b5f;
  --sketch-opacity: .13;
  --sketch-filter: none;
  --paper-texture: url('/classic/paper.svg');

  color-scheme: light;
}

:root[data-theme='dark'] {
  --paper: #141c19;
  --paper-deep: #1b2521;
  --cream: #202b27;
  --ink: #ece4d3;
  --quiet: #b8c2b9;
  --rule: #3c4a44;
  --accent: #e0a45c;
  --accent-ink: #141c19;
  --sage: #24322d;
  --sage-ink: #9fcbbd;
  --sketch-opacity: .1;
  --sketch-filter: invert(1) sepia(.3);
  --paper-texture: none;

  color-scheme: dark;
}

*, *::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;
  background: var(--paper) var(--paper-texture);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 .55em; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 3.8vw, 2.75rem); }
h3 { font-size: 1.3rem; letter-spacing: -.01em; }
h4 { font-size: 1.15rem; letter-spacing: -.01em; }
h2 em, .brand-position em, .folio-lede em { font-style: normal; font-weight: 400; color: var(--sage-ink); }
p { margin: 0 0 1em; }
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(--paper); font: 600 1rem var(--font-body); }
.skip-link:focus { top: 1rem; }

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

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.monogram { font: 800 1.35rem/1 var(--font-display); letter-spacing: -.02em; text-decoration: none; padding: .5rem 0; min-height: 44px; display: inline-flex; align-items: center; }
.ink-period { color: var(--accent); }
.site-nav { display: flex; gap: .25rem; margin-left: auto; }
.site-nav a {
  font: 500 .9rem/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(--quiet);
}
.site-nav a:hover { color: var(--ink); background: var(--sage); }
.theme-toggle {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.theme-toggle:hover { background: var(--sage); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun { display: block; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }

@media (max-width: 820px) {
  .header-inner { flex-wrap: wrap; gap: 0 .5rem; }
  .site-nav { order: 3; width: 100%; margin: 0 -.55rem; padding-bottom: .25rem; flex-wrap: wrap; gap: 0; }
  .site-nav a { padding: 0 .55rem; }
  .theme-toggle { margin-left: auto; }
  .site-header { position: static; }
}

/* Shared text */
.eyebrow { font: 600 .75rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--quiet); margin-bottom: .9rem; }
.lede { font-size: 1.25rem; line-height: 1.55; }
.narrow { max-width: 42rem; }
.small-note { font-size: .875rem; line-height: 1.5; color: var(--quiet); }

.badge {
  display: inline-block; padding: .3rem .7rem; border: 1px solid var(--sage-ink); border-radius: 999px;
  font: 600 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-ink);
}

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

.button {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: .5rem 1.15rem;
  font: 600 .9rem/1.2 var(--font-body); text-decoration: none;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 3px;
}
.button:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button-quiet { background: transparent; color: var(--ink); padding-inline: .85rem; }
.button-quiet:hover { background: var(--sage); color: var(--ink); border-color: var(--ink); }

.reading-list { padding-left: 1.2rem; margin: 0 0 1em; }
.reading-list li { margin-bottom: .45em; }
.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.5rem; }

/* Hero */
.hero { padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--rule); }
.hero-copy { max-width: 44rem; }
.signature { font: 800 clamp(2.8rem, 7vw, 4.75rem)/1 var(--font-display); letter-spacing: -.035em; margin: 0 0 .3em; }
.brand-position { font: 600 clamp(1.3rem, 2.3vw, 1.65rem)/1.3 var(--font-display); letter-spacing: -.01em; margin-bottom: 1.1rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.5rem; }

.glance {
  display: grid; gap: 0; margin: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 700px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.glance > div { padding: 1.1rem 1.25rem 0 0; }
.glance dt { font: 600 .72rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); margin-bottom: .35rem; }
.glance dd { margin: 0; font-weight: 550; line-height: 1.45; }
.glance dd span { font-weight: 400; color: var(--quiet); }

/* Hero parchment: the worked parchment sheet with pencil formulas in its
   corners, and a drawn ink network in the style of the September sketchbook */
.hero {
  background:
    linear-gradient(90deg, rgb(243 236 222 / .94) 0%, rgb(243 236 222 / .88) 50%, rgb(243 236 222 / .5) 100%),
    url('/classic/art/parchment-worked.webp') center / cover no-repeat,
    var(--paper);
}
:root[data-theme='dark'] .hero { background: var(--paper); }
.ink-network {
  position: absolute; z-index: -1; right: 0; top: 0; height: 100%; width: min(62%, 60rem);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
          mask-image: linear-gradient(to right, transparent, #000 35%);
  opacity: .55; pointer-events: none;
}
.ink-edges path { stroke: var(--ink); stroke-width: .7; stroke-opacity: .35; }
.ink-edges .hub-edge { stroke-width: 1.1; stroke-opacity: .5; }
.ink-orbits circle { stroke: var(--ink); stroke-width: .6; stroke-opacity: .3; }
.ink-nodes .node { fill: var(--sage-ink); fill-opacity: .7; }
.ink-nodes .node-hub { fill: var(--cream); stroke: var(--ink); stroke-width: 1.4; }
.ink-nodes .node-ring { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.ink-nodes .node-core { fill: var(--accent); }
:root[data-theme='dark'] .ink-network { opacity: .4; }
@media (max-width: 960px) {
  .ink-network { width: 100%; opacity: .22; -webkit-mask-image: none; mask-image: none; }
}
.sec-no { color: var(--accent); margin-right: .6em; }

/* Faint ink sketches from the approved cutouts, used as parchment marginalia */
.hero, .section { position: relative; overflow: hidden; isolation: isolate; }
.sketch {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  width: clamp(18rem, 34vw, 30rem); height: auto;
  right: max(-4rem, calc((100vw - 72rem) / 2 - 8rem)); top: 3rem;
  opacity: var(--sketch-opacity); filter: var(--sketch-filter);
}
#experience .sketch, #writing .sketch { top: auto; bottom: 2rem; }
#work .sketch, #capabilities .sketch { right: auto; left: max(-6rem, calc((100vw - 72rem) / 2 - 12rem)); top: auto; bottom: 1rem; }
@media (max-width: 700px) { .sketch { width: 15rem; right: -4rem; opacity: calc(var(--sketch-opacity) * .7); } }

/* Sections */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-tinted { background: var(--paper-deep); border-block: 1px solid var(--rule); }
.section h3 { margin-top: 0; }
#writing h3, #approach h3 { margin-top: 1.5rem; }
#writing .wrap > *, #approach .wrap > * { max-width: 46rem; }

/* Capability folios */
.folio-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 760px) { .folio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.folio { position: relative; background: var(--cream); border: 1px solid var(--rule); border-top: 3px solid var(--sage-ink); padding: 1.75rem 1.75rem 1rem; border-radius: 2px; }
.folio-art {
  position: absolute; top: 1rem; right: 1rem; width: clamp(5.5rem, 9vw, 7.5rem); height: auto;
  opacity: .55; pointer-events: none; filter: var(--sketch-filter);
}
.folio h3, .folio .folio-lede { padding-right: clamp(5rem, 8vw, 7rem); }
.folio-no { font: 600 .8rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; }
.folio-lede { font: 500 1.1rem/1.5 var(--font-body); }

/* Projects */
.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 .72rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); margin-bottom: .5rem; }
.project h3 { font-size: 1.55rem; margin: 0; }
.project-date { font-size: .875rem; line-height: 1.5; color: var(--quiet); margin-bottom: .75rem; }
.project-date strong { color: var(--ink); font-weight: 600; }

.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; }

/* Experience */
.timeline { list-style: none; padding: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--rule); }
.timeline > li { display: grid; gap: .25rem 2.5rem; padding: 2rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .timeline > li { grid-template-columns: 13rem minmax(0, 1fr); } }
.when { font: 600 .8rem/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); padding-top: .45rem; }
.timeline h3 { margin-bottom: .15rem; font-size: 1.5rem; }
.where { font-weight: 500; color: var(--quiet); }
.resume-foot { display: grid; gap: 2rem 3rem; margin-top: 2.5rem; }
@media (min-width: 760px) { .resume-foot { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* Skills */
.skills { display: grid; gap: 0; margin: 1rem 0 0; border-top: 1px solid var(--rule); }
.skills > div { display: grid; gap: .15rem 2.5rem; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .skills > div { grid-template-columns: 13rem minmax(0, 1fr); } }
.skills dt { font: 600 .8rem/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); padding-top: .15rem; }
.skills dd { margin: 0; }
#experience .timeline .reading-list { margin-top: .5rem; }

/* Contact: the alchemy marginalia paper, washed on the left where the text sits */
.section-contact {
  border-top: 1px solid var(--rule);
  background:
    linear-gradient(90deg, rgb(243 236 222 / .93) 0%, rgb(243 236 222 / .85) 55%, rgb(243 236 222 / .35) 100%),
    url('/classic/art/parchment-alchemy.webp') center / cover no-repeat,
    var(--paper);
}
:root[data-theme='dark'] .section-contact { background: var(--sage); }

/* 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: .875rem; color: var(--quiet); }
.evidence figcaption a { font-weight: 600; text-decoration-color: var(--accent); text-underline-offset: .2em; }
:root[data-theme='dark'] .evidence img { filter: brightness(.9); }

/* Contact: roles and location */
.seeking { display: grid; gap: 1.5rem 3rem; margin-top: 1.5rem; }
@media (min-width: 760px) { .seeking { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.seeking h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); margin: 0 0 .75rem; }
.role-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.role-list li { padding: .4rem .85rem; border: 1px solid var(--sage-ink); border-radius: 999px; background: color-mix(in srgb, var(--paper) 70%, transparent); font-weight: 500; font-size: .95rem; }

/* Project pages */
.project-page { min-height: 60vh; }
.breadcrumb { font-size: .875rem; color: var(--quiet); margin-bottom: 1.75rem; }
.breadcrumb a { color: var(--quiet); text-decoration-color: var(--rule); text-underline-offset: .2em; }
.breadcrumb a:hover { color: var(--ink); }
.page-title { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.03em; max-width: 22ch; margin-bottom: .4em; }
.page-body { max-width: 46rem; margin-top: 2.25rem; }
.page-body h2 { font-size: 1.4rem; margin-top: 2rem; }
.more-projects { list-style: none; padding: 0; margin: 1rem 0 0; border-top: 1px solid var(--rule); max-width: 46rem; }
.more-projects li { padding: .8rem 0; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between; }
.more-projects a { font-weight: 600; text-decoration-color: var(--accent); text-underline-offset: .22em; }
.more-projects span { color: var(--quiet); font-size: .9rem; }
.project-name { font-size: 1.55rem; margin: 0; }
.project h3 a, .project-name a { text-decoration: none; }
.project h3 a:hover, .project-name a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: 1.5rem 0; font-size: .875rem; color: var(--quiet); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.footer-inner p { margin: 0; }
.site-footer .text-link { font-size: .875rem; color: var(--ink); }

/* 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; }
:root[data-theme='dark'] .shots .evidence img { filter: none; }

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

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