/*
  Christopher Nottle: portfolio styles. DESIGN.md (kept on this PC) explains each choice.
  A letter: one column of text in Source Sans 3, with the invoice check and screenshots as wider figures.
  White page, no mono, one colour (canary yellow, only on invoice lines that do not match).
  Nothing moves until the visitor drags or presses a button. Contrast is checked by tests/site.test.js.
  Fonts are saved in assets/fonts (OFL licence), so nothing loads from other sites.
*/
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f4f5;
  --stage: #f3f4f5;
  --text: #17191c;
  --muted: #555b63;
  --line-strong: #868c94;
  --accent: #6b5200;
  --accent-ink: #ffffff;
  --btn: #17191c;
  --btn-ink: #ffffff;
  --canary: #fff0a3;
  --check: #8a4b00;
  --check-bg: #fbecd2;
  --note: #254f9c;
  --note-bg: #e4ecfb;
  --ok: #1f6b3a;
  --ok-bg: #e0f1e5;
  --line: rgba(23, 25, 28, .12);
  --doc-shadow: 0 1px 2px rgba(17, 20, 30, .06), 0 18px 30px -12px rgba(17, 20, 30, .10);
  --lift-shadow: 0 2px 4px rgba(17, 20, 30, .08), 0 30px 50px -16px rgba(17, 20, 30, .22);
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --page: 64rem;
  --letter: 38rem;
  --gutter: 1.5rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121315;
  --surface: #1b1c1f;
  --surface-2: #1f2124;
  --stage: #1f2124;
  --text: #eceef0;
  --muted: #a2a8b0;
  --line-strong: #6e747c;
  --accent: #f2d35b;
  --accent-ink: #121315;
  --btn: #eceef0;
  --btn-ink: #121315;
  --canary: #3a3110;
  --check: #f2b65c;
  --check-bg: #2c2312;
  --note: #a3c4ff;
  --note-bg: #152036;
  --ok: #86d8a0;
  --ok-bg: #12271a;
  --line: rgba(236, 238, 240, .12);
  --doc-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 30px -12px rgba(0, 0, 0, .5);
  --lift-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 30px 50px -16px rgba(0, 0, 0, .65);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.1875rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
img, video, iframe { max-width: 100%; display: block; }
img, video { height: auto; }
code { font: inherit; font-weight: 600; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem 1rem; background: var(--btn); color: var(--btn-ink); border-radius: 4px; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- the page: a letter, left-aligned, with wider figures ---------- */
.page { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.letter { max-width: var(--letter); }
.letterhead { padding: clamp(2.5rem, 7vw, 4.5rem) 0 2.25rem; }
.letterhead h1 { font-size: 1.75rem; line-height: 1.2; }
.contact { margin: .2rem 0 0; color: var(--muted); }
.reach { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1rem; }
.email { font-size: 1.0625rem; user-select: all; }

.section { margin-top: clamp(3.5rem, 8vw, 5rem); }
.section > h2, .section.letter > h2 { font-size: 1.25rem; padding-bottom: .5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); max-width: var(--letter); }
.project { padding: 0 0 3rem; }
.project + .project { padding-top: 3rem; border-top: 1px solid var(--line); }
.project h3 { font-size: 1.1875rem; margin-bottom: .6rem; }
.when { font-weight: 400; color: var(--muted); margin-left: .35rem; }
.links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 1.25rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .4rem .95rem;
  border-radius: 4px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 600 1rem/1.2 var(--sans); cursor: pointer; transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.btn:hover { border-color: var(--text); }
.btn-primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--btn) 85%, var(--bg)); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-quiet { padding: 0; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .18em; }
.btn-quiet:hover { text-decoration-color: currentColor; }
.needs-js { display: none; }
.js .needs-js { display: inline-flex; }
.js .btn-quiet.needs-js { display: inline; }

/* ---------- figures ---------- */
.shot { margin: 1.5rem 0 0; }
.shot img, .shot .frame { border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--doc-shadow); overflow: hidden; background: var(--surface-2); }
.shot .frame img { border: 0; border-radius: 0; box-shadow: none; }
.shot .frame iframe { width: 100%; height: min(70vh, 34rem); border: 0; background: #fff; }
.shot .frame video { width: 100%; }
.shot-actions { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: .75rem; }
.brief { margin: 1.25rem 0 0; padding: .25rem 0 .25rem 1.25rem; border-left: 1px solid var(--line-strong); color: var(--muted); }
.brief p { margin: 0 0 .5rem; }

/* ---------- the invoice check: order on the left, invoice in the tray ---------- */
.match { margin-top: 1.75rem; }
.bills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.bill { display: grid; gap: .05rem; padding: .45rem .75rem; text-align: left; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); font: 400 .9375rem/1.35 var(--sans); cursor: pointer; }
.bill span { color: var(--muted); }
.bill:hover { border-color: var(--line-strong); }
.bill[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.desk { display: grid; gap: 1.5rem; margin-top: 1rem; padding: clamp(1rem, 3vw, 1.75rem); background: var(--surface-2); border-radius: 6px; perspective: 1600px; }
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--doc-shadow); font-size: .9375rem; min-width: 0; }
.doc-head { padding: .8rem 1rem .55rem; border-bottom: 1px solid var(--line); }
.doc-head h4 { font-size: 1rem; }
.doc-head p { margin: .2rem 0 0; color: var(--muted); line-height: 1.45; }
.doc table { width: 100%; border-collapse: collapse; }
.doc th, .doc td { padding: .4rem 1rem; text-align: left; vertical-align: baseline; }
.doc thead th { font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.doc thead th.num { text-align: right; }
.doc tbody th { font-weight: 400; }
.doc tbody th code { display: block; }
.doc tbody th span { color: var(--muted); }
.doc tbody tr + tr th, .doc tbody tr + tr td { border-top: 1px solid var(--line); }
.doc tfoot th, .doc tfoot td { font-weight: 400; padding-top: .3rem; padding-bottom: .3rem; }
.doc tfoot tr:first-child th, .doc tfoot tr:first-child td { border-top: 1px solid var(--line); padding-top: .55rem; }
.doc tfoot .grand th, .doc tfoot .grand td { font-weight: 600; border-top: 2px solid var(--text); }
.po { transition: box-shadow .15s var(--ease); }
.po.is-target { box-shadow: 0 0 0 3px var(--accent), var(--doc-shadow); }
.tray { min-width: 0; }
.inv { cursor: grab; touch-action: none; user-select: none; transform-origin: 50% 0;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotateX(10deg) rotateZ(2.5deg);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.inv.is-dragging { cursor: grabbing; position: relative; z-index: 5; box-shadow: var(--lift-shadow);
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotateX(4deg) rotateZ(1deg) scale(1.02); transition: none; }
.inv.is-placed { cursor: default; transform: none; user-select: text; }
.inv .mark { width: 3.5rem; text-align: right; color: var(--muted); white-space: nowrap; }
.inv tr.is-check th, .inv tr.is-check td { background: var(--canary); }
.inv tr.is-check .mark { color: var(--accent); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.result { margin-top: 1.25rem; max-width: var(--letter); }
.result h4 { font-size: 1.125rem; }
.result .raise { margin: .2rem 0 0; font-weight: 600; }
.findings { margin: .9rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.findings li { display: grid; gap: .1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.findings strong { font-weight: 600; }
.findings span { color: var(--muted); }
.findings .is-check strong::before { content: "Check"; display: inline-block; margin-right: .5rem; padding: 0 .35rem; border-radius: 2px; background: var(--canary); color: var(--accent); font-size: .875rem; }
.findings .is-note strong::before { content: "Note"; display: inline-block; margin-right: .5rem; color: var(--muted); font-size: .875rem; }

/* ---------- working with AI, experience ---------- */
.log { list-style: none; margin: 1.25rem 0 1.5rem; }
.log li { padding: .75rem 0; border-top: 1px solid var(--line); }
.log li:last-child { border-bottom: 1px solid var(--line); }
.log time { display: block; color: var(--muted); font-size: 1rem; }
.jobs { list-style: none; }
.jobs > li { padding: 0 0 1.5rem; }
.jobs h3 { font-size: 1.125rem; margin-bottom: .35rem; }
.jobs ul { padding-left: 1.15rem; }
.jobs ul li { margin-top: .25rem; }
.jobs ul li::marker { color: var(--line-strong); }
.edu { list-style: none; margin: 0 0 1rem; color: var(--muted); }
.edu li { padding: .15rem 0; }

.site-foot { margin: clamp(4rem, 8vw, 6rem) 0 0; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 1rem; max-width: var(--letter); }

/* ---------- screens ---------- */
@media (min-width: 60rem) {
  .desk { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.25rem; align-items: start; }
}
@media (max-width: 35rem) {
  :root { --gutter: 1rem; }
  body { font-size: 1.125rem; }
  .doc th, .doc td { padding-left: .6rem; padding-right: .6rem; }
  .inv { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotateX(6deg) rotateZ(1.5deg); }
  .when { display: block; margin-left: 0; }
  .bills { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (pointer: coarse) {
  .btn, .bill { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .po, .inv { transition: none; animation: none; }
  .inv { transform: none; }
}
@media print {
  .needs-js, .skip, .match { display: none !important; }
}