/* erikgaren.com pages outside the home: case studies, experience, blog, write-ups. Tokens and fonts match home.css. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/home/fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(/home/fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/home/fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/home/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #0a0b0e; --surface: #131519; --surface-2: #1b1e24; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.18);
  --ink: #eef0f3; --muted: #9aa1ad; --accent: #a81d36; --accent-ink: #ffffff; --accent-text-dark: #f2788b; --accent-text-light: #8c1c2e; --accent-2: #ff4d6d;
  --sonic: #1B4FBB; --ryu: #6E1423; --rgg: #6A00FF; --auto: #107C10; --os: #0F6CBD; --world: #C42B1C; --ask: #0E5A9C;
  --dock: 68px; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --metro: cubic-bezier(0, .5, .1, 1);
  --accent-text: var(--accent-text-dark, var(--accent));
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg:#f3f3f0; --surface:#fff; --surface-2:#e9e8e3; --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.2); --ink:#15171c; --muted:#5b626e; --accent:#8c1c2e; --accent-ink:#fff; --accent-text: var(--accent-text-light, var(--accent)); color-scheme: light; } }
:root[data-theme="light"] { --bg:#f3f3f0; --surface:#fff; --surface-2:#e9e8e3; --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.2); --ink:#15171c; --muted:#5b626e; --accent:#8c1c2e; --accent-ink:#fff; --accent-text: var(--accent-text-light, var(--accent)); color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 "Archivo", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: radial-gradient(55rem 38rem at 92% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%); }
a { color: var(--accent-text); }
code { font-family: var(--mono); font-size: .9em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.skip { position:absolute; z-index:100; left:1rem; top:-4rem; padding:.6rem 1rem; background: var(--accent); color: var(--accent-ink); font-weight:700; text-decoration:none; }
.skip:focus { top: 1rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- header: the same destinations as the home's dock, in words ---------- */
.sh { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:1rem; height:64px; padding: 0 max(1.25rem, calc((100% - 1240px) / 2)); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom:1px solid var(--line); }
.sh-home { display:flex; align-items:center; gap:.7rem; min-width:0; color: var(--ink); text-decoration:none; font-weight:800; }
.sh-mark { width:36px; height:36px; flex:none; display:grid; place-items:center; background: var(--accent); color: var(--accent-ink); font-weight:900; font-size:.9rem; font-variation-settings:"wdth" 75; }
.sh-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-nav { display:flex; align-items:center; gap:.2rem; min-width:0; }
.sh-nav a { padding:.5rem .7rem; color: var(--muted); text-decoration:none; font-weight:600; font-size:.95rem; white-space:nowrap; }
.sh-nav a:hover, .sh-nav a:focus-visible { color: var(--ink); }
.sh-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.sh-nav .sh-cv { margin-left:.4rem; background: var(--accent); color: var(--accent-ink); }
.sh-nav .sh-cv:hover, .sh-nav .sh-cv:focus-visible { color: var(--accent-ink); filter: brightness(1.12); }
/* on narrow screens the name stays as the link's text for screen readers; the mark carries it visually */
@media (max-width: 760px) { .sh-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path: inset(50%); white-space:nowrap; } }
@media (max-width: 520px) {
  .sh { height:56px; padding: 0 .6rem; gap:.4rem; }
  .sh-mark { width:32px; height:32px; font-size:.82rem; }
  .sh-nav { gap:0; overflow-x:auto; scrollbar-width:none; }
  .sh-nav a { padding:.5rem .42rem; font-size:.86rem; }
  .sh-nav .sh-cv { margin-left:.2rem; padding:.45rem .6rem; }
}

/* ---------- reading column ---------- */
.page { width: min(46rem, 100% - 2.5rem); margin: 0 auto; padding-top: 2rem; }
.page.wide { width: min(1100px, 100% - 2.5rem); }
.back { display:inline-block; margin: 0 0 1.4rem; padding:.3rem 0; font: 600 13px var(--mono); color: var(--muted); text-decoration:none; }
.back:hover, .back:focus-visible { color: var(--accent-text); }
.eyebrow { margin: 0 0 .7rem; font: 600 12px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
.page h1 { margin:0; font-weight:900; font-variation-settings:"wdth" 80; font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height:1.02; letter-spacing:-.01em; }
.hero-role { margin:1rem 0 0; font-size: 1.2rem; line-height:1.45; }
.tagline { margin:.5rem 0 0; color: var(--muted); font-size: 1.02rem; line-height:1.5; }
.muted { margin:.6rem 0 0; color: var(--muted); font: 13px/1.5 var(--mono); }
.lede { margin: 1rem 0 0; color: var(--muted); font-size: 1.08rem; max-width: 42rem; }
.project-page h2, .section-title { margin: 2.6rem 0 .7rem; font-size: 1.4rem; font-weight: 800; line-height:1.25; }
.project-page p { margin: 0 0 1rem; }
.project-page ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.project-page li { margin-bottom: .5rem; }

.tldr { margin: 1.8rem 0 .5rem; padding: 1.2rem 1.4rem; background: var(--surface); border:1px solid var(--line); border-left: 4px solid var(--stage, var(--accent)); }
.tldr .tldr-title { margin:0 0 .8rem; font: 600 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
.tldr dl { display:grid; grid-template-columns: max-content 1fr; gap:.6rem 1.2rem; margin:0; }
.tldr dt { font-weight:800; }
.tldr dd { margin:0; }
@media (max-width: 560px) { .tldr dl { grid-template-columns: 1fr; gap:.1rem; } .tldr dd { margin-bottom:.7rem; } }

.chips { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0 !important; margin:.4rem 0 0; }
.chips li { margin:0; padding:.15rem .6rem; border:1px solid var(--line-2); font: 600 12px/1.6 var(--mono); }

.btn, .button { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.1rem; border:1px solid var(--line-2); color: var(--ink); text-decoration:none; font-weight:700; transition: transform .15s; }
.btn.primary, .button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn:hover, .button:hover, .btn:focus-visible, .button:focus-visible { transform: translateY(-2px); }
.project-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top: 2rem; }

/* ---------- evidence: before/after wipes, screenshots, lightbox ---------- */
.ppc-list { margin: 1.6rem 0 .5rem; display:grid; gap:1.6rem; }
.ppc { margin:0; }
.ppc-frame { position:relative; width:100%; aspect-ratio: 16 / 9; overflow:hidden; border:1px solid var(--line-2); background:#000; cursor: ew-resize; touch-action:none; user-select:none; }
.ppc-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ppc-after { clip-path: inset(0 0 0 50%); }
.ppc-handle { position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:#fff; box-shadow: 0 0 8px rgba(0,0,0,.8); pointer-events:none; }
.ppc-handle span { position:absolute; top:50%; left:50%; width:28px; height:28px; margin:-14px 0 0 -14px; border:2px solid #fff; border-radius:50%; background: rgba(0,0,0,.45); }
.ppc-label { position:absolute; bottom:10px; padding:3px 9px; background: rgba(0,0,0,.7); color:#fff; font: 11px var(--mono); pointer-events:none; }
.ppc-label.left { left:10px; } .ppc-label.right { right:10px; }
.ppc input[type="range"] { width:100%; margin:.6rem 0 .2rem; accent-color: var(--accent); }
.ppc figcaption, .shot-row figcaption, .project-media figcaption, .concept-diagram figcaption { margin-top:.4rem; color: var(--muted); font-size:.85rem; line-height:1.45; }
.shot-row { display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap:.9rem; margin: 1.6rem 0 .5rem; }
.shot-row figure { margin:0; }
.shot-row img { display:block; width:100%; aspect-ratio: 16 / 9; object-fit:cover; border:1px solid var(--line-2); }
.project-media { margin: 1.6rem 0 1.8rem; }
.project-media img, .project-media video { display:block; width:100%; aspect-ratio: 16 / 9; object-fit:contain; border:1px solid var(--line-2); background:#000; }
.concept-diagram { --dossier-burgundy: var(--accent-text); margin: 1.8rem 0 0; }
.concept-diagram svg { display:block; width:100%; height:auto; color: var(--ink); }
.concept-diagram text { font-family: var(--mono); text-transform: uppercase; }

.plb { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; gap:8px; padding:24px; background: rgba(4,5,8,.95); }
.plb figure { margin:0; max-width: min(1400px, 88vw); text-align:center; }
.plb-stage { position:relative; overflow:hidden; display:inline-block; touch-action:none; }
.plb img { display:block; max-width:100%; max-height:82vh; object-fit:contain; border:1px solid rgba(255,255,255,.2); cursor:crosshair; transition: transform .15s ease-out; }
.plb-lens { display:none; position:absolute; width:240px; height:240px; border-radius:50%; border:2px solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 6px 24px rgba(0,0,0,.55); background-repeat:no-repeat; pointer-events:none; }
.plb figcaption { margin-top:10px; font-size:.85rem; color: rgba(255,255,255,.78); }
.plb-num { display:block; margin-top:4px; font: 12px var(--mono); color: rgba(255,255,255,.6); }
.plb-x, .plb-nav { flex:none; width:44px; height:44px; background:none; border:1px solid rgba(255,255,255,.3); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
.plb-x { position:absolute; top:18px; right:18px; font-size:18px; }
.plb-x:hover, .plb-nav:hover, .plb-x:focus-visible, .plb-nav:focus-visible { border-color: var(--accent-text); color: var(--accent-text); }
@media (max-width: 620px) { .plb { padding:12px; gap:4px; } .plb-nav { width:36px; height:36px; } }

/* ---------- experience ---------- */
.job { margin: 1rem 0 0; padding: 1.3rem 1.4rem; background: var(--surface); border:1px solid var(--line); }
.job h3 { margin:0; font-size:1.2rem; line-height:1.3; }
.job-role { margin-top: 1.1rem; }
.job-role h4 { margin:0 0 .4rem; font-size:1rem; color: var(--accent-text); }
.job-role ul { margin:0; padding-left:1.2rem; }
.job-role li { margin-bottom:.4rem; }
.project-page .facts-list { list-style:none; margin:.4rem 0 0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap:8px; }
.facts-list li { margin:0; padding: .9rem 1.2rem; background: var(--surface); border:1px solid var(--line); }
.facts-list b { display:block; line-height:1.35; }
.facts-list span { color: var(--muted); font-size:.95rem; }

/* ---------- blog ---------- */
.post-grid { list-style:none; margin: 2rem 0 0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap:12px; }
.post { display:flex; flex-direction:column; height:100%; background: var(--surface); border:1px solid var(--line); color: var(--ink); text-decoration:none; transition: transform .15s, border-color .15s; }
.post:hover, .post:focus-visible { transform: translateY(-3px); border-color: var(--accent-text); outline:none; }
.post img { display:block; width:100%; height:auto; aspect-ratio: 16 / 9; object-fit:cover; object-position: 50% 35%; background:#000; }
.post-body { flex:1; display:flex; flex-direction:column; gap:.5rem; padding: 1.1rem 1.2rem 1.2rem; }
.post-meta { font: 600 11.5px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color: var(--muted); }
.post h2 { margin:0; font-size:1.3rem; line-height:1.2; }
.post p { margin:0; }
.post .tech { color: var(--muted); font-size:.92rem; }
.post .more { margin-top:auto; padding-top:.3rem; font-weight:700; color: var(--accent-text); }

/* ---------- closing contact band and footer (the home has the same band) ---------- */
.sf { width: min(1240px, 100% - 2.5rem); margin: 5rem auto 0; padding-bottom: 2rem; }
.contact { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2rem; padding: 1.8rem 2rem; background: var(--surface); border:1px solid var(--line); border-top: 4px solid var(--accent); }
.contact h2 { margin:0 0 .35rem; font-weight:900; font-variation-settings:"wdth" 80; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height:1; text-transform:uppercase; }
.contact p { margin:0; max-width: 38rem; color: var(--muted); }
.contact p a { overflow-wrap:anywhere; }
.contact-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.sf-line { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem; margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid var(--line); color: var(--muted); font-size:.85rem; }
@media (max-width: 560px) {
  .contact { padding: 1.3rem 1.1rem; }
  .contact-actions { display:grid; grid-template-columns: 1fr 1fr; width:100%; }
  .contact-actions .btn { justify-content:center; }
  .contact-actions .primary { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}