/* ==========================================================================
   awsbjorn.com — quiet, editorial, text-first.
   Paper, ink, one amber accent, a serif for the name, a sans for reading.
   The only pixels on the page are inside the Caveman preview. Tokens in STYLE.md.
   ========================================================================== */
:root {
  --paper: #faf8f3; --paper-2: #f1ede4; --ink: #141210; --ink-2: #3b3732; --dim: #6f6960; --rule: #e3ddd1;
  --amber: #e07b00; --amber-ink: #b86300;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pixel: "Press Start 2P", monospace;
  --measure: 66ch;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(20,18,16,0.3); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .12s ease, text-decoration-color .12s ease; }
a:hover { color: var(--amber-ink); text-decoration-color: var(--amber); }
::selection { background: #ffe1b8; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
h2 { font-size: 15px; font-family: var(--sans); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; }
p { margin: 0 0 16px; }
.prose, .prose p, .intro__text p { max-width: var(--measure); }
.prose .cta { margin-top: 22px; font-family: var(--serif); font-size: 23px; line-height: 1.3; }
.prose .cta a { text-decoration-color: var(--amber); text-decoration-thickness: 1.5px; }
.small { font-size: 15px; color: var(--dim); }

/* top: a mark and a few words, nothing sticky-heavy */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100% - 48px, 720px); margin: 0 auto; padding: 28px 0 0; }
.top__brand img { display: block; }
.top__nav { display: flex; gap: 2px 18px; flex-wrap: wrap; }
.top__nav a { font-size: 15px; color: var(--dim); text-decoration: none; }
.top__nav a:hover { color: var(--ink); }

.page { width: min(100% - 48px, 720px); margin: 0 auto; padding: 72px 0 96px; }

/* intro */
.intro { padding-bottom: 56px; }
.name { font-size: clamp(40px, 7vw, 60px); line-height: 1.05; font-weight: 500; margin-bottom: 28px; letter-spacing: -0.02em; }
.name .o { color: var(--amber); }
.intro__text p { font-family: var(--serif); font-size: 23px; line-height: 1.45; color: var(--ink-2); margin-bottom: 18px; }
.intro__text p:first-child { color: var(--ink); }

/* sections */
.sec { padding: 40px 0 24px; border-top: 1px solid var(--rule); }

/* record: years down the left, Karpathy-style */
.record { list-style: none; margin: 0; padding: 0; }
.record li { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 14px 0; border-top: 1px solid var(--rule); }
.record li:first-child { border-top: 0; padding-top: 0; }
.record .yr { font-family: var(--serif); font-size: 19px; color: var(--dim); font-variant-numeric: tabular-nums; padding-top: 1px; }
.record .what { font-size: 18px; }
.record .what b { font-weight: 600; }
.record .what .role { color: var(--dim); }
.record .what .note { display: block; color: var(--ink-2); font-size: 17px; margin-top: 2px; }

/* field notes: 3-column grid, row height set from JS (col * 2/3 + caption). Tiles span cells:
   .is-xl 2x2 for crowd shots, .is-tall 1x2 for portraits, .is-wide 2x1 for a scenic, default 1x1.
   Images cover their cell; --pos nudges the crop. Every edge aligns, so bigger never means messier. */
.field { --cap: 52px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 20px 12px; grid-auto-rows: 214px; /* JS measures the exact value; this keeps the sheet readable without it */ }
.field li.is-xl { grid-column: span 2; grid-row: span 2; }
.field li.is-tall { grid-row: span 2; }
.field li.is-wide { grid-column: span 2; }
.shot { position: relative; margin: 0; cursor: pointer; outline-offset: 4px; display: grid; grid-template-rows: 1fr var(--cap); height: 100%; }
.shot__frame { position: relative; background: var(--paper-2); overflow: hidden; min-height: 0; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.shot__color { opacity: 0; transition: opacity .5s ease; }
.shot:hover .shot__color, .shot:focus-visible .shot__color, .shot.is-color .shot__color { opacity: 1; }
.shot figcaption { padding-top: 8px; font-size: 13px; color: var(--dim); line-height: 1.45; overflow: hidden; }
.field li.is-xl .shot figcaption { font-size: 14px; }
.shot figcaption .yr { font-family: var(--serif); color: var(--ink-2); margin-right: 8px; }

/* lightbox */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; color: var(--paper); display: none; }
.lightbox[open] { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; }
.lightbox::backdrop { background: rgba(20, 18, 16, 0.94); backdrop-filter: blur(6px); }
.lightbox__fig { margin: 0; grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100dvh; padding: 56px 0 24px; box-sizing: border-box; min-width: 0; }
.lightbox__fig img { max-width: 100%; max-height: calc(100dvh - 56px - 24px - 44px); width: auto; height: auto; object-fit: contain; display: block; box-shadow: 0 30px 80px rgba(0,0,0,0.5); animation: lb-in .22s ease; }
@keyframes lb-in { from { opacity: 0; transform: scale(0.985); } }
.lightbox__fig figcaption { margin-top: 14px; height: 30px; font-size: 15px; color: rgba(250,248,243,0.8); text-align: center; }
.lightbox__fig figcaption .yr { font-family: var(--serif); color: var(--paper); margin-right: 8px; }
.lightbox__fig figcaption .n { margin-left: 14px; color: rgba(250,248,243,0.5); font-variant-numeric: tabular-nums; }
.lightbox__close { position: fixed; top: 16px; right: 18px; display: inline-flex; align-items: center; gap: 8px; font: 500 15px var(--sans); color: var(--paper); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 9px 14px 9px 12px; cursor: pointer; }
.lightbox__close:hover { background: rgba(255,255,255,0.16); }
.lightbox__nav { grid-row: 1; align-self: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: var(--paper); font: 400 30px/1 var(--serif); cursor: pointer; justify-self: center; }
.lightbox__nav:hover { background: rgba(255,255,255,0.16); }
.lightbox__nav--prev { grid-column: 1; } .lightbox__nav--next { grid-column: 3; }
.lightbox button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
body.has-lightbox { overflow: hidden; }
@media (max-width: 640px) {
  .lightbox[open] { grid-template-columns: 1fr; }
  .lightbox__fig { grid-column: 1; padding: 64px 12px 24px; } .lightbox__fig img { max-height: calc(100dvh - 64px - 24px - 44px); }
  .lightbox__nav { display: none; }   /* swipe instead */
  .lightbox__close span { display: none; } .lightbox__close { padding: 10px 12px; }
}

/* projects */
.project { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.project + .project { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--rule); }
.project__preview { display: block; background: #0a0710; padding: 8px; border-radius: 4px; box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 12px 30px rgba(20,18,16,0.12); transition: transform .15s ease; }
.project__preview:hover { transform: translateY(-2px); }
.project__preview canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: 2px; }
.project__preview--lab { background: var(--paper); border: 1px solid var(--rule); }
.project__preview--lab img { display: block; width: 100%; height: auto; border-radius: 2px; }
.project__title { font-size: 26px; line-height: 1.2; margin-bottom: 10px; }
.project__title a { text-decoration: none; }
.project__title a:hover { color: var(--amber-ink); }
.project__year { font-family: var(--serif); font-weight: 400; color: var(--dim); font-size: 19px; margin-left: 6px; }
.project__body p { max-width: 56ch; }
.project__links { font-size: 16px; color: var(--dim); }

/* playbook */
.playbook { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: pb; max-width: var(--measure); }
.playbook li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule); }
.playbook li:first-child { border-top: 0; padding-top: 0; }
.playbook .n { font-family: var(--serif); font-size: 19px; color: var(--dim); }
.playbook .t { font-weight: 600; }
.playbook .d { display: block; color: var(--ink-2); font-size: 17px; }
.playbook .play { font-size: 15px; color: var(--dim); white-space: nowrap; }
.playbook li.is-locked .play { color: var(--dim); text-decoration: none; opacity: 0.7; }

/* footer */
.foot { padding-top: 40px; margin-top: 32px; border-top: 1px solid var(--rule); }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .top { padding-top: 20px; } .top__nav { gap: 2px 14px; } .top__nav a { font-size: 14px; }
  .page { padding-top: 48px; }
  .name { font-size: 38px; }
  .intro__text p { font-size: 20px; }
  .record li { grid-template-columns: 64px 1fr; gap: 14px; } .record .yr { font-size: 17px; }
  .field { grid-template-columns: 1fr; grid-auto-rows: auto !important; gap: 22px; } .field li { grid-column: auto !important; grid-row: auto !important; } .shot { grid-template-rows: auto auto; } .shot__frame { aspect-ratio: 3 / 2; } .field li.is-tall .shot__frame { aspect-ratio: 4 / 3; } .shot figcaption { font-size: 14px !important; }
  .project { grid-template-columns: 1fr; } .project__preview { max-width: 320px; }
  .playbook li { grid-template-columns: 32px 1fr; } .playbook .play { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } html { scroll-behavior: auto; } }