/* ==========================================================================
   Samantha Fu — site styles
   A single page. Sections flow into each other with a wavy edge:
   paper (intro, with bio) → periwinkle (What I'm Working On) → indigo (Say hello).
   Desktop layout above 800px, phone layout below.
   ========================================================================== */

:root {
  /* Palette: Ink Navy & Indigo (bright) */
  --paper: #f7f8fc;        /* page background, intro panel */
  --paper-text: #f7f4ef;   /* text on the indigo panel */
  --sand: #d9e2ff;         /* What I'm Working On panel: soft bright periwinkle */
  --ink: #0a0e1f;          /* body text, rules on paper */
  --deep: #101c6e;         /* chip text, hover accents */
  --name: #3f55f0;         /* "Samantha" in the name */
  --muted: #5a5f6b;        /* secondary text on paper */
  --accent: #4a5cff;       /* bright indigo: links, hovers, Say hello panel */
  --accent-light: #c4ccff; /* research tag background */
  --placeholder: #d9e2ff;  /* photo placeholder */
  --placeholder-ink: #4a5cff;
  --rule-on-paper: color-mix(in srgb, var(--ink) 20%, transparent);
  --rule-on-deep: color-mix(in srgb, var(--paper-text) 30%, transparent);
  --rule-on-accent: color-mix(in srgb, var(--paper-text) 50%, transparent);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --gutter: clamp(40px, 6vw, 96px);
  --max: 1200px; /* content column is this minus the gutters, ~1000px */
}

@media (max-width: 800px) {
  :root { --gutter: 20px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--accent); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.panel--accent :focus-visible { outline-color: var(--paper-text); }

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

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Header ---------- */

.site-header { padding-top: 36px; }
.site-header__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 48px;
  padding-bottom: 12px;
  position: relative;
}
/* Wavy blue line under the nav — a single continuous vector stretched to fit,
   not a tiled repeat, so there are no seams between bumps at any zoom level. */
.site-header__inner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 12px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%206%20Q6%200%2012%206%20T24%206%20Q30%200%2036%206%20T48%206%20Q54%200%2060%206%20T72%206%20Q78%200%2084%206%20T96%206%20Q102%200%20108%206%20T120%206%20Q126%200%20132%206%20T144%206%20Q150%200%20156%206%20T168%206%20Q174%200%20180%206%20T192%206%20Q198%200%20204%206%20T216%206%20Q222%200%20228%206%20T240%206%20Q246%200%20252%206%20T264%206%20Q270%200%20276%206%20T288%206%20Q294%200%20300%206%20T312%206%20Q318%200%20324%206%20T336%206%20Q342%200%20348%206%20T360%206%20Q366%200%20372%206%20T384%206%20Q390%200%20396%206%20T408%206%20Q414%200%20420%206%20T432%206%20Q438%200%20444%206%20T456%206%20Q462%200%20468%206%20T480%206%20Q486%200%20492%206%20T504%206%20Q510%200%20516%206%20T528%206%20Q534%200%20540%206%20T552%206%20Q558%200%20564%206%20T576%206%20Q582%200%20588%206%20T600%206%20Q606%200%20612%206%20T624%206%20Q630%200%20636%206%20T648%206%20Q654%200%20660%206%20T672%206%20Q678%200%20684%206%20T696%206%20Q702%200%20708%206%20T720%206%20Q726%200%20732%206%20T744%206%20Q750%200%20756%206%20T768%206%20Q774%200%20780%206%20T792%206%20Q798%200%20804%206%20T816%206%20Q822%200%20828%206%20T840%206%20Q846%200%20852%206%20T864%206%20Q870%200%20876%206%20T888%206%20Q894%200%20900%206%20T912%206%20Q918%200%20924%206%20T936%206%20Q942%200%20948%206%20T960%206%20Q966%200%20972%206%20T984%206%20Q990%200%20996%206%20T1008%206%20Q1014%200%201020%206%20T1032%206%20Q1038%200%201044%206%20T1056%206%20Q1062%200%201068%206%20T1080%206%20Q1086%200%201092%206%20T1104%206%20Q1110%200%201116%206%20T1128%206%20Q1134%200%201140%206%20T1152%206%20Q1158%200%201164%206%20T1176%206%20Q1182%200%201188%206%20T1200%206%20Q1206%200%201212%206%20T1224%206%20Q1230%200%201236%206%20T1248%206%20Q1254%200%201260%206%20T1272%206%20Q1278%200%201284%206%20T1296%206%20Q1302%200%201308%206%20T1320%206%20Q1326%200%201332%206%20T1344%206%20Q1350%200%201356%206%20T1368%206%20Q1374%200%201380%206%20T1392%206%20Q1398%200%201404%206%20T1416%206%20Q1422%200%201428%206%20T1440%206%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%206%20Q6%200%2012%206%20T24%206%20Q30%200%2036%206%20T48%206%20Q54%200%2060%206%20T72%206%20Q78%200%2084%206%20T96%206%20Q102%200%20108%206%20T120%206%20Q126%200%20132%206%20T144%206%20Q150%200%20156%206%20T168%206%20Q174%200%20180%206%20T192%206%20Q198%200%20204%206%20T216%206%20Q222%200%20228%206%20T240%206%20Q246%200%20252%206%20T264%206%20Q270%200%20276%206%20T288%206%20Q294%200%20300%206%20T312%206%20Q318%200%20324%206%20T336%206%20Q342%200%20348%206%20T360%206%20Q366%200%20372%206%20T384%206%20Q390%200%20396%206%20T408%206%20Q414%200%20420%206%20T432%206%20Q438%200%20444%206%20T456%206%20Q462%200%20468%206%20T480%206%20Q486%200%20492%206%20T504%206%20Q510%200%20516%206%20T528%206%20Q534%200%20540%206%20T552%206%20Q558%200%20564%206%20T576%206%20Q582%200%20588%206%20T600%206%20Q606%200%20612%206%20T624%206%20Q630%200%20636%206%20T648%206%20Q654%200%20660%206%20T672%206%20Q678%200%20684%206%20T696%206%20Q702%200%20708%206%20T720%206%20Q726%200%20732%206%20T744%206%20Q750%200%20756%206%20T768%206%20Q774%200%20780%206%20T792%206%20Q798%200%20804%206%20T816%206%20Q822%200%20828%206%20T840%206%20Q846%200%20852%206%20T864%206%20Q870%200%20876%206%20T888%206%20Q894%200%20900%206%20T912%206%20Q918%200%20924%206%20T936%206%20Q942%200%20948%206%20T960%206%20Q966%200%20972%206%20T984%206%20Q990%200%20996%206%20T1008%206%20Q1014%200%201020%206%20T1032%206%20Q1038%200%201044%206%20T1056%206%20Q1062%200%201068%206%20T1080%206%20Q1086%200%201092%206%20T1104%206%20Q1110%200%201116%206%20T1128%206%20Q1134%200%201140%206%20T1152%206%20Q1158%200%201164%206%20T1176%206%20Q1182%200%201188%206%20T1200%206%20Q1206%200%201212%206%20T1224%206%20Q1230%200%201236%206%20T1248%206%20Q1254%200%201260%206%20T1272%206%20Q1278%200%201284%206%20T1296%206%20Q1302%200%201308%206%20T1320%206%20Q1326%200%201332%206%20T1344%206%20Q1350%200%201356%206%20T1368%206%20Q1374%200%201380%206%20T1392%206%20Q1398%200%201404%206%20T1416%206%20Q1422%200%201428%206%20T1440%206%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%;
}
@media (max-width: 800px) {
  .site-header__inner::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%206%20Q6%200%2012%206%20T24%206%20Q30%200%2036%206%20T48%206%20Q54%200%2060%206%20T72%206%20Q78%200%2084%206%20T96%206%20Q102%200%20108%206%20T120%206%20Q126%200%20132%206%20T144%206%20Q150%200%20156%206%20T168%206%20Q174%200%20180%206%20T192%206%20Q198%200%20204%206%20T216%206%20Q222%200%20228%206%20T240%206%20Q246%200%20252%206%20T264%206%20Q270%200%20276%206%20T288%206%20Q294%200%20300%206%20T312%206%20Q318%200%20324%206%20T336%206%20Q342%200%20348%206%20T360%206%20Q366%200%20372%206%20T384%206%20Q390%200%20396%206%20T408%206%20Q414%200%20420%206%20T432%206%20Q438%200%20444%206%20T456%206%20Q462%200%20468%206%20T480%206%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%206%20Q6%200%2012%206%20T24%206%20Q30%200%2036%206%20T48%206%20Q54%200%2060%206%20T72%206%20Q78%200%2084%206%20T96%206%20Q102%200%20108%206%20T120%206%20Q126%200%20132%206%20T144%206%20Q150%200%20156%206%20T168%206%20Q174%200%20180%206%20T192%206%20Q198%200%20204%206%20T216%206%20Q222%200%20228%206%20T240%206%20Q246%200%20252%206%20T264%206%20Q270%200%20276%206%20T288%206%20Q294%200%20300%206%20T312%206%20Q318%200%20324%206%20T336%206%20Q342%200%20348%206%20T360%206%20Q366%200%20372%206%20T384%206%20Q390%200%20396%206%20T408%206%20Q414%200%20420%206%20T432%206%20Q438%200%20444%206%20T456%206%20Q462%200%20468%206%20T480%206%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%2F%3E%3C%2Fsvg%3E");
  }
}

.nav { display: flex; align-items: center; gap: 36px; }
.nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--accent); border-bottom-color: var(--accent); transform: rotate(-1.5deg); display: inline-block; }

@media (max-width: 800px) {
  .site-header { padding-top: 14px; }
  .site-header__inner { padding-bottom: 6px; }
  .nav { width: 100%; justify-content: space-between; gap: 8px; }
  .nav a { font-size: 11.5px; letter-spacing: 0.07em; }
}

/* ---------- Panels ---------- */

.panel { position: relative; padding-block: 88px 96px; scroll-margin-top: 0; }
.panel--sand { background: var(--sand); }
.panel--accent { background: var(--accent); color: var(--paper-text); }

/* Wavy top edge on each coloured panel, so sections flow into each other.
   Single continuous vector stretched to fit — no tiled repeat, no seams. */
.panel--sand::before, .panel--accent::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  height: 12px;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%206%20Q6%200%2012%206%20T24%206%20Q30%200%2036%206%20T48%206%20Q54%200%2060%206%20T72%206%20Q78%200%2084%206%20T96%206%20Q102%200%20108%206%20T120%206%20Q126%200%20132%206%20T144%206%20Q150%200%20156%206%20T168%206%20Q174%200%20180%206%20T192%206%20Q198%200%20204%206%20T216%206%20Q222%200%20228%206%20T240%206%20Q246%200%20252%206%20T264%206%20Q270%200%20276%206%20T288%206%20Q294%200%20300%206%20T312%206%20Q318%200%20324%206%20T336%206%20Q342%200%20348%206%20T360%206%20Q366%200%20372%206%20T384%206%20Q390%200%20396%206%20T408%206%20Q414%200%20420%206%20T432%206%20Q438%200%20444%206%20T456%206%20Q462%200%20468%206%20T480%206%20Q486%200%20492%206%20T504%206%20Q510%200%20516%206%20T528%206%20Q534%200%20540%206%20T552%206%20Q558%200%20564%206%20T576%206%20Q582%200%20588%206%20T600%206%20Q606%200%20612%206%20T624%206%20Q630%200%20636%206%20T648%206%20Q654%200%20660%206%20T672%206%20Q678%200%20684%206%20T696%206%20Q702%200%20708%206%20T720%206%20Q726%200%20732%206%20T744%206%20Q750%200%20756%206%20T768%206%20Q774%200%20780%206%20T792%206%20Q798%200%20804%206%20T816%206%20Q822%200%20828%206%20T840%206%20Q846%200%20852%206%20T864%206%20Q870%200%20876%206%20T888%206%20Q894%200%20900%206%20T912%206%20Q918%200%20924%206%20T936%206%20Q942%200%20948%206%20T960%206%20Q966%200%20972%206%20T984%206%20Q990%200%20996%206%20T1008%206%20Q1014%200%201020%206%20T1032%206%20Q1038%200%201044%206%20T1056%206%20Q1062%200%201068%206%20T1080%206%20Q1086%200%201092%206%20T1104%206%20Q1110%200%201116%206%20T1128%206%20Q1134%200%201140%206%20T1152%206%20Q1158%200%201164%206%20T1176%206%20Q1182%200%201188%206%20T1200%206%20Q1206%200%201212%206%20T1224%206%20Q1230%200%201236%206%20T1248%206%20Q1254%200%201260%206%20T1272%206%20Q1278%200%201284%206%20T1296%206%20Q1302%200%201308%206%20T1320%206%20Q1326%200%201332%206%20T1344%206%20Q1350%200%201356%206%20T1368%206%20Q1374%200%201380%206%20T1392%206%20Q1398%200%201404%206%20T1416%206%20Q1422%200%201428%206%20T1440%206%20V12%20H0%20Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") no-repeat 0 100% / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%206%20Q6%200%2012%206%20T24%206%20Q30%200%2036%206%20T48%206%20Q54%200%2060%206%20T72%206%20Q78%200%2084%206%20T96%206%20Q102%200%20108%206%20T120%206%20Q126%200%20132%206%20T144%206%20Q150%200%20156%206%20T168%206%20Q174%200%20180%206%20T192%206%20Q198%200%20204%206%20T216%206%20Q222%200%20228%206%20T240%206%20Q246%200%20252%206%20T264%206%20Q270%200%20276%206%20T288%206%20Q294%200%20300%206%20T312%206%20Q318%200%20324%206%20T336%206%20Q342%200%20348%206%20T360%206%20Q366%200%20372%206%20T384%206%20Q390%200%20396%206%20T408%206%20Q414%200%20420%206%20T432%206%20Q438%200%20444%206%20T456%206%20Q462%200%20468%206%20T480%206%20Q486%200%20492%206%20T504%206%20Q510%200%20516%206%20T528%206%20Q534%200%20540%206%20T552%206%20Q558%200%20564%206%20T576%206%20Q582%200%20588%206%20T600%206%20Q606%200%20612%206%20T624%206%20Q630%200%20636%206%20T648%206%20Q654%200%20660%206%20T672%206%20Q678%200%20684%206%20T696%206%20Q702%200%20708%206%20T720%206%20Q726%200%20732%206%20T744%206%20Q750%200%20756%206%20T768%206%20Q774%200%20780%206%20T792%206%20Q798%200%20804%206%20T816%206%20Q822%200%20828%206%20T840%206%20Q846%200%20852%206%20T864%206%20Q870%200%20876%206%20T888%206%20Q894%200%20900%206%20T912%206%20Q918%200%20924%206%20T936%206%20Q942%200%20948%206%20T960%206%20Q966%200%20972%206%20T984%206%20Q990%200%20996%206%20T1008%206%20Q1014%200%201020%206%20T1032%206%20Q1038%200%201044%206%20T1056%206%20Q1062%200%201068%206%20T1080%206%20Q1086%200%201092%206%20T1104%206%20Q1110%200%201116%206%20T1128%206%20Q1134%200%201140%206%20T1152%206%20Q1158%200%201164%206%20T1176%206%20Q1182%200%201188%206%20T1200%206%20Q1206%200%201212%206%20T1224%206%20Q1230%200%201236%206%20T1248%206%20Q1254%200%201260%206%20T1272%206%20Q1278%200%201284%206%20T1296%206%20Q1302%200%201308%206%20T1320%206%20Q1326%200%201332%206%20T1344%206%20Q1350%200%201356%206%20T1368%206%20Q1374%200%201380%206%20T1392%206%20Q1398%200%201404%206%20T1416%206%20Q1422%200%201428%206%20T1440%206%20V12%20H0%20Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") no-repeat 0 100% / 100% 100%;
}
.panel--sand::before { background: var(--sand); }
.panel--accent::before { background: var(--accent); }
@media (max-width: 800px) {
  .panel--sand::before, .panel--accent::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%206%20Q6%200%2012%206%20T24%206%20Q30%200%2036%206%20T48%206%20Q54%200%2060%206%20T72%206%20Q78%200%2084%206%20T96%206%20Q102%200%20108%206%20T120%206%20Q126%200%20132%206%20T144%206%20Q150%200%20156%206%20T168%206%20Q174%200%20180%206%20T192%206%20Q198%200%20204%206%20T216%206%20Q222%200%20228%206%20T240%206%20Q246%200%20252%206%20T264%206%20Q270%200%20276%206%20T288%206%20Q294%200%20300%206%20T312%206%20Q318%200%20324%206%20T336%206%20Q342%200%20348%206%20T360%206%20Q366%200%20372%206%20T384%206%20Q390%200%20396%206%20T408%206%20Q414%200%20420%206%20T432%206%20Q438%200%20444%206%20T456%206%20Q462%200%20468%206%20T480%206%20V12%20H0%20Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20480%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%206%20Q6%200%2012%206%20T24%206%20Q30%200%2036%206%20T48%206%20Q54%200%2060%206%20T72%206%20Q78%200%2084%206%20T96%206%20Q102%200%20108%206%20T120%206%20Q126%200%20132%206%20T144%206%20Q150%200%20156%206%20T168%206%20Q174%200%20180%206%20T192%206%20Q198%200%20204%206%20T216%206%20Q222%200%20228%206%20T240%206%20Q246%200%20252%206%20T264%206%20Q270%200%20276%206%20T288%206%20Q294%200%20300%206%20T312%206%20Q318%200%20324%206%20T336%206%20Q342%200%20348%206%20T360%206%20Q366%200%20372%206%20T384%206%20Q390%200%20396%206%20T408%206%20Q414%200%20420%206%20T432%206%20Q438%200%20444%206%20T456%206%20Q462%200%20468%206%20T480%206%20V12%20H0%20Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E");
  }
}

/* Big section heading, used for "What I'm Working On" / "Say hello." */
.section-title {
  margin: 0;
  font-weight: 400;
  font-size: min(4vw, 50px);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.025em;
  /* Trim the font's built-in leading so the cap-height sits flush with the
     top of the box, instead of floating a bit below it — this is what lets
     the heading sit level with a hard edge next to it (a rule, a photo). */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

@media (max-width: 800px) {
  .panel { padding-block: 56px 64px; }
  .section-title { font-size: clamp(26px, 8.1vw, 38px); }
}

/* ---------- Intro (top of page) ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  padding-block: 56px 96px;
}
.hero__text {
  grid-column: 1 / span 7;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.hero__photo-wrap {
  grid-column: 8 / span 5;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__photo { position: relative; height: 75%; aspect-ratio: 6 / 7; }

.photo {
  background: var(--placeholder);
  color: var(--placeholder-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2.4px solid var(--placeholder-ink);
  border-radius: 14px;
  transform: rotate(3deg);
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: 12px; }

.name {
  margin: 0;
  font-weight: 400;
  font-size: min(8.2vw, 112px);
  line-height: 0.84;
  letter-spacing: -0.04em;
}
.name em { color: var(--name); }

.intro { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.lede { margin: 0; font-size: 24px; line-height: 1.3; }
.bio { margin: 0; font-size: 18px; line-height: 1.55; }
.aside { margin: 0; font-style: italic; font-size: 17px; line-height: 1.45; color: var(--muted); }

@media (max-width: 800px) {
  .hero { display: flex; flex-direction: column; padding-block: 44px 56px; }
  .hero__text { gap: 28px; }
  .name { font-size: clamp(64px, 19vw, 96px); }
  .intro { gap: 14px; }
  .lede { font-size: 25px; line-height: 1.28; }
  .aside { font-size: 18px; }
  .hero__photo-wrap { margin-top: 28px; }
  .hero__photo { height: auto; width: 68%; }
}

/* ---------- What I'm Working On (periwinkle) ---------- */

.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.section-head .section-title { grid-column: span 6; }
.section-intro { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 12px; }
.section-intro p {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.section-intro .aside { font-size: 16px; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1.5px solid var(--ink);
}
.filters[hidden] { display: none; }
.filters.filters--sub { margin-top: 14px; padding-top: 0; border-top: 0; }
.filter.filter--sub { min-height: 36px; padding: 0 16px; font-size: 11px; }
.filter {
  min-height: 44px;
  padding: 0 22px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.filter:hover { border-color: var(--accent); color: var(--accent); transform: rotate(-1.5deg) translateY(-1px); }
.filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper-text); transform: rotate(-1deg); box-shadow: 3px 3px 0 var(--ink); }

/* Rows run the full width of the window so the hover fill reaches both edges */
.work-list { list-style: none; margin: 28px 0 0; padding: 0; border-bottom: 1.5px solid var(--rule-on-paper); }
.work-list > li { border-top: 1.5px solid var(--rule-on-paper); }
.work-list > li[hidden] { display: none; }

.row-grid {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 32px;
  align-items: baseline;
}
.work {
  display: block;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}
.work:hover, .work:focus-visible { background: var(--accent); color: var(--paper-text); outline-offset: -3px; }
.work .row-grid { padding-block: 22px 26px; }
.work__main { display: flex; flex-direction: column; gap: 8px; padding-right: 40px; }
.work__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px 4px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.tag--research { background: var(--accent-light); color: var(--deep); }
.tag--blog { background: transparent; border-color: currentColor; }
.tag--data { background: var(--ink); color: var(--paper-text); }
.work__title { font-size: 25px; line-height: 1.1; letter-spacing: -0.01em; }
.work__desc { font-style: italic; font-size: 16px; line-height: 1.45; max-width: 620px; opacity: 0.8; }
.work__desc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Row with two links: the title link stretches over the row, the inline link sits above it */
.work--multi { position: relative; }
.work--multi .work__link { color: inherit; text-decoration: none; }
.work--multi .work__link::after { content: ''; position: absolute; inset: 0; }
.work--multi .work__desc a { position: relative; z-index: 1; }
.work--multi:focus-within { background: var(--accent); color: var(--paper-text); }
.work--multi:focus-within .work__arrow { transform: translateX(6px); }
.work--multi .work__link:focus-visible { outline: none; }
.work__meta { font-size: 14px; line-height: 1.4; }
.work__arrow { font-size: 20px; text-align: right; display: inline-block; transition: transform 0.2s ease; }
.work:hover .work__arrow, .work:focus-visible .work__arrow { transform: translateX(6px); }

@media (max-width: 800px) {
  .section-head { display: block; }
  .section-intro { margin-top: 20px; }
  .section-intro p { font-size: 19px; }
  .filters { margin-top: 32px; padding-top: 18px; gap: 8px; }
  .filter { padding: 0 16px; }
  .work .row-grid { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding-block: 22px 24px; }
  .work__main { grid-column: 1 / -1; padding-right: 0; }
  .work__title { font-size: 25px; }
  .work__desc { font-size: 17px; }
  .work__meta { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
}

/* ---------- Say hello (indigo) ---------- */

.contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.contact__intro { grid-column: span 6; display: flex; flex-direction: column; gap: 32px; }
.contact .ledger { grid-column: 8 / span 5; margin-top: 0; }

.ledger { margin: 0; border-bottom: 1.5px solid var(--rule-on-accent); }
.ledger__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: 20px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1.5px solid var(--rule-on-accent);
}
.ledger dt { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ledger dt::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  vertical-align: middle;
}
.ledger dd { margin: 0; font-size: 18px; line-height: 1.35; }
.on-accent { color: var(--paper-text); }
.on-accent:hover { color: var(--deep); }

@media (max-width: 800px) {
  .contact { display: block; }
  .contact__intro { gap: 24px; }
  .contact .ledger { margin-top: 36px; }
  .ledger__row { display: flex; flex-direction: column; gap: 6px; }
  .ledger dt { font-size: 12px; }
  .ledger dd { font-size: 20px; }
}

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}