/* A leather document file: navy leather cover, saddle-tan leather folders, cream kraft paper, brass hardware.
   The dark theme keeps the same cool-leather, warm-paper contrast: graphite and dark kraft paper on navy-black leather.
   Light values first. Dark values follow twice: once for the OS setting, once for a saved choice.
   Plain values instead of light-dark() so older browsers (Safari before 17.5) still get colours. */
:root {
  color-scheme: light;
  --field: #101c2f;
  --field-2: #26344d;
  --field-hover: #33435f;
  --field-ink: #ece6da;
  --tan: #71421e;
  --tan-ink: #f3ece0;
  --brass: #b38b4d;
  --brass-hover: #c49c5d;
  --on-brass: #18202e;
  --paper: #f1ebdd;
  --paper-2: #e6ddc9;
  --paper-3: #daccb2;
  --paper-4: #cdbea0;
  --sheet: #faf6ec;
  --ink: #18202e;
  --muted: #545b66;
  --on-ink: #f8f6f1;
  --ink-hover: #26344d;
  --stitch: rgba(236, 230, 218, 0.42);
  --photo-filter: none;
  /* Leather grain: generated noise, no image file. Light speckles in both themes, because the leather is dark in both */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .4 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --cut: 24px;
  --max: 1120px;
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --step-display: clamp(3.25rem, 1.2rem + 6vw, 6.25rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --field: #080d18; --field-2: #17223a; --field-hover: #223152; --field-ink: #ebe4d6;
    --tan: #6b4024; --tan-ink: #f0e7d8; --brass: #c9a66b; --brass-hover: #d8b77e;
    --paper: #2a2620; --paper-2: #443d33; --paper-3: #4c4134; --paper-4: #584a3b;
    --sheet: #2f2a23; --ink: #ece5d8; --muted: #b3aa9a; --on-ink: #2a2620; --ink-hover: #ffffff;
    --stitch: rgba(236, 229, 216, 0.3);
    /* The studio photo's white background would be the brightest thing on a dark page */
    --photo-filter: brightness(0.88);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --field: #080d18; --field-2: #17223a; --field-hover: #223152; --field-ink: #ebe4d6;
  --tan: #6b4024; --tan-ink: #f0e7d8; --brass: #c9a66b; --brass-hover: #d8b77e;
  --paper: #2a2620; --paper-2: #443d33; --paper-3: #4c4134; --paper-4: #584a3b;
  --sheet: #2f2a23; --ink: #ece5d8; --muted: #b3aa9a; --on-ink: #2a2620; --ink-hover: #ffffff;
  --stitch: rgba(236, 229, 216, 0.3);
  --photo-filter: brightness(0.88);
}

/* Self-hosted so no visit calls Google. Latin-ext only downloads for Turkish letters such as ğ, ş and İ */
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/schibsted-grotesk-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: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/schibsted-grotesk-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;
}
/* Book face for the cover letter only */
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-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: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-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;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-body)/1.5 "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.top :focus-visible, .check :focus-visible, .contact :focus-visible,
.tone-2 :focus-visible, .tone-4 :focus-visible { outline-color: var(--field-ink); }
.biz :focus-visible, .file .flow :focus-visible { outline-color: var(--ink); }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; }
h1, h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); letter-spacing: -0.03em; line-height: 1.15; }
p { margin: 0 0 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(16px, 3vw, 28px); }
main > section { padding: 96px 0; }
/* A paper section followed by another paper section shares one gap instead of two */
#letter, #experience { padding-bottom: 0; }

/* Leather surfaces: the cover, the back pages and two of the folders */
.top, .cs-field, .check, .contact, .tone-2 .file, .tone-2 .tab, .tone-4 .file, .tone-4 .tab { background-image: var(--grain); }

/* Header: sits on the navy leather and wraps onto two rows on very narrow screens */
.top { background-color: var(--field); color: var(--field-ink); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 72px; padding-top: 12px; padding-bottom: 12px; }
.brand { font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.04em; text-decoration: none; white-space: nowrap; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-left: auto; font-size: var(--step-small); font-weight: 600; }
.top nav a { text-decoration: none; white-space: nowrap; }
.top nav a:hover { text-decoration: underline; }
/* Only shown once theme.js has run, so it is never a dead button */
.theme-toggle {
  display: none; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border: 0; background: var(--field-2); color: var(--field-ink);
  cursor: pointer; transition: background .15s;
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover, .lang:hover { background: var(--field-hover); }
/* Language switch: a plain link, so it works without JavaScript */
.lang {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px;
  background: var(--field-2); color: var(--field-ink); font-size: var(--step-small); font-weight: 700; text-decoration: none; transition: background .15s;
}
.lang + .theme-toggle { margin-left: -8px; }
/* Phones: name and the two buttons on the first row, the menu on its own row below, so the buttons never split up.
   640px rather than 600px because the Turkish menu is wider */
@media (max-width: 640px) {
  .top nav .opt { display: none; }
  .top .wrap { row-gap: 6px; }
  .top nav { gap: 4px 16px; order: 1; flex-basis: 100%; margin-left: 0; }
  .lang, .top nav + .theme-toggle { margin-left: auto; }
}

/* Buttons: the primary one is brass, like the file's hardware */
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  background: var(--paper-2); color: var(--ink); font-weight: 600; text-decoration: none; transition: background .15s, transform .1s;
}
.btn:hover { background: var(--paper-3); }
.btn.primary { background: var(--brass); color: var(--on-brass); }
.btn.primary:hover { background: var(--brass-hover); }
.btn:active, .chips button:active, .enclosed a:active, .next a:active { transform: translateY(1px); }

/* A paper sheet on the leather: homepage cover, case study and project heads */
.cs-field { --side: 12px; --inner: clamp(20px, 5vw, 56px); background-color: var(--field); padding: 48px var(--side) 0; }
.cs-head {
  max-width: 900px; margin: 0 auto; background: var(--paper); padding: 48px var(--inner) 56px;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
}
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: var(--step-small); font-weight: 600; color: var(--muted); margin-bottom: 40px; }
.cs-head h1 { max-width: 20ch; margin-bottom: 24px; }
.cs-head .lede { font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.02em; max-width: 46ch; margin: 0; }
.cs-head .actions { margin-top: 32px; }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 20px 32px; margin: 40px 0 0; }
.meta dt { font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.meta dd { margin: 4px 0 0; }
/* Same text edge as the sheet above it */
.sheet-col { --side: 12px; --inner: clamp(20px, 5vw, 56px); max-width: calc(900px + 2 * var(--side)); margin: 0 auto; padding: 0 calc(var(--side) + var(--inner)); }

/* Case study section tabs, like dividers in a binder; they stay at the top while reading */
.sections {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin-top: 40px; padding-top: 16px; background: var(--paper); border-bottom: 4px solid var(--field);
}
.sections a {
  flex: none; padding: 10px 16px; border-radius: 10px 10px 0 0; background: var(--paper-3); color: var(--ink);
  font-size: var(--step-small); font-weight: 600; text-decoration: none; transition: background .15s, color .15s;
}
.sections a:hover { background: var(--paper-4); }
.sections a[aria-current] { background: var(--field); color: var(--field-ink); }
/* The nav scrolls sideways, so a ring outside the tab would be cut off */
.sections a:focus-visible { outline-offset: -5px; }
.sections + .prose { padding-top: 40px; }
.prose h2[id] { scroll-margin-top: 84px; }

/* Case study and project body */
.prose { max-width: 68ch; padding: 56px 0 72px; }
.prose.wide { max-width: none; }
.prose.wide > p, .prose.wide > ul, .prose.wide > h2, .prose.wide > h3 { max-width: 68ch; }
.prose.flush { padding: 0; }
.prose h2 { font-size: 1.625rem; letter-spacing: -0.03em; line-height: 1.1; margin: 48px 0 14px; }
.prose h2:first-child, .prose.flush h3:first-child { margin-top: 0; }
.prose h3 { margin: 32px 0 10px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose .actions { margin: 28px 0; }
.note { font-size: var(--step-small); background: var(--paper-2); padding: 16px 20px; margin-top: 48px; }
/* Process diagrams: paper steps on a strip of leather, brass arrows */
.flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 24px 0 32px; padding: 20px;
  background: var(--field) var(--grain); color: var(--field-ink); font-size: var(--step-small); font-weight: 600;
}
.flow span { padding: 9px 13px; background: var(--sheet); color: var(--ink); }
.flow i { font-style: normal; font-weight: 800; color: var(--brass); }
.next { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 0 0 96px; }
.next a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 12px 12px 0 0;
  background: var(--field) var(--grain); color: var(--field-ink); font-weight: 600; text-decoration: none; transition: background-color .15s, transform .1s;
}
.next a:hover { background-color: var(--field-2); }
.video { aspect-ratio: 16 / 9; margin: 28px 0; background: var(--paper-2); }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 8px; margin: 28px 0; align-items: start; }
.gallery a { display: block; background: var(--paper-2); }
/* Uniform tiles: the archive mixes landscape and tall phone screenshots */
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }

/* Sections, jobs and archive cards */
.band { background: var(--sheet); }
.section-head { margin-bottom: 48px; }
.section-head p { color: var(--muted); max-width: 60ch; margin: 16px 0 0; }
.job { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 40px 0; }
.section-head + .job { padding-top: 0; }
.job .when { font-size: var(--step-small); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 4px; }
.job h3 span { font-weight: 400; color: var(--muted); }
.job ul { margin: 16px 0 0; padding-left: 20px; }
.job li { margin-bottom: 8px; }
.group { margin: 56px 0 20px; }
.group:first-of-type { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; }
.card { display: block; padding: 20px; background: var(--sheet); text-decoration: none; transition: background .15s; }
.card:hover { background: var(--paper-2); }
.card h3 { margin-bottom: 6px; }
.card p { color: var(--muted); font-size: var(--step-small); margin: 0; }
.card .thumb { display: block; width: 100%; height: auto; aspect-ratio: 570 / 394; object-fit: cover; margin-bottom: 16px; background: var(--paper-2); }

/* Homepage cover sheet */
.cover h1 { font-size: var(--step-display); line-height: 0.88; letter-spacing: -0.05em; max-width: 9ch; margin: 0; }
.cover-id { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: start; }
.cover .name { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; margin: 24px 0 0; }
.photo { display: block; width: 132px; height: 176px; object-fit: cover; padding: 5px; background: var(--paper-2); filter: var(--photo-filter); }
.cover .actions { margin-top: 40px; }
.fields { display: grid; gap: 14px; margin: 48px 0 0; }
.fields div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
.fields dt { font-size: var(--step-small); font-weight: 600; color: var(--muted); padding-top: 3px; }
.fields dd, .skills dd { margin: 0; }
.enclosed { margin-top: 56px; }
.enclosed h2 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.2; }
.enclosed ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.enclosed a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--paper-2); font-weight: 600; text-decoration: none; transition: background .15s, transform .1s; }
.enclosed a:hover { background: var(--paper-3); }

/* Loose sheets: cover letter and skills */
.sheet {
  max-width: 900px; margin: 0 auto; background: var(--sheet); padding: clamp(28px, 6vw, 64px);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut));
}
.sheet > h2 { margin-bottom: 40px; }
.letter { max-width: 680px; }
.letter p { margin-bottom: 1.25rem; }
.letter p:not(.sign) { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); line-height: 1.6; letter-spacing: 0; }
.sign { display: grid; gap: 2px; margin: 40px 0 0; }
.sign strong { font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.03em; }
.sign span { color: var(--muted); font-size: var(--step-small); }
.skills { display: grid; gap: 16px; margin: 0; }
.skills div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
.skills dt { font-weight: 600; }

/* Case files: kraft and leather folders that stack as you scroll */
.files .section-head { margin-bottom: 40px; }
/* Folders stack as you scroll. The homepage script adds .stack and sets each folder's --top:
   just below the tab above it, or higher for a folder too tall for that, so it stops only once fully read */
.stack .folder { position: sticky; top: var(--top, 0px); }
/* The row beside a stacked tab is see-through, so the folder underneath must show only empty paper there */
.stack .file { padding-top: 56px; }
@media (max-width: 760px) { .stack .file { padding-top: 48px; } }
@media (min-width: 761px) {
  /* Each folder fills the screen below the tabs above it, so the next folder only slides over empty paper
     until the reader is past this one's text and link */
  .stack .file { min-height: calc(100vh - (var(--i, 0) + 2) * 52px); }
  .stack .folder:last-child .file { min-height: 0; }
}
.tab {
  display: inline-flex; align-items: center; height: 52px; padding: 0 34px; margin-left: var(--x, 0);
  background-color: var(--c); color: var(--t); font-weight: 600; text-decoration: none;
  clip-path: polygon(0 100%, 14px 0, calc(100% - 14px) 0, 100% 100%);
}
.tab:hover { text-decoration: underline; }
/* The tab's own clip-path would cut an outline, so the ring goes round the label instead */
.tab:focus-visible { outline: none; }
.tab:focus-visible span { outline: 3px solid currentColor; outline-offset: 4px; }
.file { background-color: var(--c); color: var(--t); padding: clamp(20px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; align-content: start; }
/* Leather folders are stitched round the edge */
.tone-2 .file, .tone-4 .file { outline: 2px dashed var(--stitch); outline-offset: -12px; } /* taste-skill-ignore */
/* Sized so the longest case title stays on two lines at every width */
.file h3 { font-size: clamp(1.125rem, 0.5rem + 3.6vw, 2.75rem); line-height: 0.95; letter-spacing: -0.045em; margin-bottom: 24px; }
.file p { max-width: 46ch; margin-bottom: 24px; }
.file a { font-weight: 600; }
/* In a folder the diagram is a paper card and its steps run top to bottom */
.file .flow { flex-direction: column; align-items: stretch; gap: 6px; margin: 0; padding: 16px; background: var(--sheet); color: var(--ink); }
.file .flow span { background: var(--paper-2); }
.file .flow i { align-self: center; color: var(--muted); line-height: 1; }
.file .flow i:not(.or) { transform: rotate(90deg); }
.tone-1 { --c: var(--paper-3); --t: var(--ink); }
.tone-2 { --c: var(--field); --t: var(--field-ink); }
.tone-3 { --c: var(--paper-4); --t: var(--ink); }
.tone-4 { --c: var(--tan); --t: var(--tan-ink); }
.tone-5 { --c: var(--paper-2); --t: var(--ink); }

/* Requirement check: a stitched leather page */
.check { background-color: var(--field); color: var(--field-ink); outline: 2px dashed var(--stitch); outline-offset: -14px; } /* taste-skill-ignore */
.check .intro { max-width: 52ch; margin: 24px 0 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  min-height: 44px; padding: 0 16px; border: 0; background: var(--field-2); color: var(--field-ink);
  font: inherit; font-size: var(--step-small); font-weight: 600; line-height: 1; cursor: pointer; transition: background .15s, color .15s, transform .1s;
}
.chips button:hover { background: var(--field-hover); }
.chips button[aria-pressed="true"] { background: var(--field-ink); color: var(--field); }
.results { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 4px; }
.results li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 14px 20px; background: var(--field-2); }
.results b { font-weight: 600; }
.check .empty { margin: 40px 0 0; }

/* Contact: a business card on the tan leather back cover */
.contact { background-color: var(--tan); color: var(--tan-ink); padding: 96px 0; outline: 2px dashed var(--stitch); outline-offset: -14px; } /* taste-skill-ignore */
.contact .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; align-items: end; }
.contact h2 { font-size: var(--step-display); line-height: 0.88; letter-spacing: -0.05em; }
.contact p { margin: 20px 0 0; max-width: 32ch; }
.biz { background: var(--sheet); color: var(--ink); padding: 32px 32px 0; display: grid; gap: 6px; }
.biz strong { font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.03em; }
.biz .role { color: var(--muted); margin-bottom: 16px; }
.biz a[href^="mailto:"] { overflow-wrap: anywhere; }
.biz .links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 24px; }
.biz .btn { margin: 0 -32px; min-height: 56px; }

/* Motion: the cover sheet slides out of the file, then each part rises in as it reaches the screen.
   Only with JavaScript and only when the visitor has not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .cs-head { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .js .reveal { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
  .js .reveal:not(.in) { opacity: 0; transform: translateY(24px); }
  .results li:not([hidden]) { animation: row-in .3s ease both; }
}
/* Movement only, no fading: if animations never run, the cover is still fully visible */
@keyframes rise { from { transform: translateY(40px); } }
@keyframes row-in { from { opacity: 0; transform: translateY(-6px); } }

/* Tablets: the case text gets the folder's full width */
@media (max-width: 1000px) {
  .file { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
  main > section, .contact { padding: 72px 0; }
  #letter, #experience { padding-bottom: 0; }
  .cs-head { padding-top: 32px; padding-bottom: 40px; }
  .sheet-head { margin-bottom: 28px; }
  .cover-id { gap: 16px; }
  .photo { width: 84px; height: 112px; padding: 4px; }
  .fields div, .skills div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .folder { margin-bottom: 12px; }
  .tab { margin-left: 0; height: 44px; padding: 0 16px; font-size: var(--step-small); }
  /* Tabs alternate sides, so two stacked folders can show their tabs side by side in one row */
  .folder:nth-child(even of .folder) .tab { display: flex; width: max-content; margin-left: auto; }
  .results li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .contact .wrap { grid-template-columns: minmax(0, 1fr); }
  .job { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  /* All four tabs fit across a 390px phone */
  .sections { gap: 4px; }
  .sections a { padding: 10px 8px; }
  /* Keep clear air between the stitching and the text on narrow screens */
  .check, .contact { outline-offset: -8px; }
  .check .wrap, .contact .wrap { padding-left: 28px; padding-right: 28px; }
  .tone-2 .file, .tone-4 .file { outline-offset: -7px; padding-left: 26px; padding-right: 26px; }
}
/* Small phones: the photo moves above the title so the title keeps the full width */
@media (max-width: 480px) {
  .cover-id { grid-template-columns: minmax(0, 1fr); }
  .photo { order: -1; }
}

/* Windows high contrast replaces background colours, so shapes get a system-colour edge */
@media (forced-colors: active) {
  .btn, .chips button, .theme-toggle, .lang, .enclosed a, .tab, .cs-head, .sheet, .file, .biz, .results li,
  .flow span, .sections a, .next a { border: 1px solid CanvasText; } /* taste-skill-ignore */
  .chips button[aria-pressed="true"], .sections a[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* Print: ink on white whatever the theme, no leather, nothing interactive, every requirement row */
@media print {
  /* :root:root outranks the dark-theme selectors above */
  :root:root {
    color-scheme: light;
    --field: #fff; --field-2: #fff; --field-hover: #fff; --field-ink: #18202e; --tan: #fff; --tan-ink: #18202e;
    --paper: #fff; --paper-2: #fff; --paper-3: #fff; --paper-4: #fff;
    --sheet: #fff; --ink: #18202e; --muted: #545b66; --on-ink: #18202e; --ink-hover: #18202e; --brass: #fff; --photo-filter: none;
  }
  * { background-image: none !important; animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .theme-toggle, .lang, .top nav, .chips, .enclosed, .check .empty, .video, .sections { display: none !important; }
  .results li[hidden] { display: grid !important; }
  .check, .contact, .file { outline: none; }
  main > section, .contact { padding: 32px 0; }
  .cs-field { padding-top: 0; }
  .cs-head, .sheet, .tab { clip-path: none; }
  .folder, .stack .folder { position: static; break-inside: avoid; }
  .job, .results li, .skills div, .fields div, .flow { break-inside: avoid; }
}