/* AI usage note (Claude, Anthropic): layout, the color system below, and
   most of this stylesheet were built with Claude as a coding partner --
   see PROMPT_LOG.md in the repo root for the conversation, and script.js
   for a more detailed note on the interactive mechanics specifically. */
:root{
  color-scheme: light;
  --paper: #eef1f2;
  --paper-raised: #ffffff;
  --ink: #16232b;
  --ink-muted: #55707d;
  --line: rgba(22,35,43,0.12);
  --line-strong: rgba(22,35,43,0.30);
  --blueprint: #2b5c8a;
  --blueprint-soft: rgba(43,92,138,0.10);
  --hema: #4a3f7a;
  --hema-soft: rgba(74,63,122,0.10);
  --eosin: #b5395f;
  --eosin-soft: rgba(181,57,95,0.10);
  --shadow: rgba(22,35,43,0.16);
  --cat-materials: #2a78d6;
  --cat-hybrid: #eb6834;
  --cat-bme: #1baf7a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper: #0e161d;
    --paper-raised: #16212a;
    --ink: #dfe8ea;
    --ink-muted: #93aab3;
    --line: rgba(223,232,234,0.16);
    --line-strong: rgba(223,232,234,0.32);
    --blueprint: #6fb2e0;
    --blueprint-soft: rgba(111,178,224,0.14);
    --hema: #a394e8;
    --hema-soft: rgba(163,148,232,0.14);
    --eosin: #ef85a6;
    --eosin-soft: rgba(239,133,166,0.14);
    --shadow: rgba(0,0,0,0.45);
    --cat-materials: #3987e5;
    --cat-hybrid: #d95926;
    --cat-bme: #199e70;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper: #0e161d;
  --paper-raised: #16212a;
  --ink: #dfe8ea;
  --ink-muted: #93aab3;
  --line: rgba(223,232,234,0.16);
  --line-strong: rgba(223,232,234,0.32);
  --blueprint: #6fb2e0;
  --blueprint-soft: rgba(111,178,224,0.14);
  --hema: #a394e8;
  --hema-soft: rgba(163,148,232,0.14);
  --eosin: #ef85a6;
  --eosin-soft: rgba(239,133,166,0.14);
  --shadow: rgba(0,0,0,0.45);
  --cat-materials: #3987e5;
  --cat-hybrid: #d95926;
  --cat-bme: #199e70;
}

*{ box-sizing: border-box; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
}
h1,h2,h3{ font-family: "Fraunces", Georgia, serif; text-wrap: balance; margin: 0; }
em{ font-style: italic; color: var(--eosin); }
.mono{ font-family: "IBM Plex Mono", ui-monospace, monospace; }
a{ color: var(--blueprint); }
::selection{ background: var(--eosin-soft); color: var(--ink); }
:focus-visible{ outline: 2px solid var(--eosin); outline-offset: 3px; }

.wrap{ max-width: 1040px; margin: 0 auto; padding: 0 32px; }
.eyebrow{
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow .tag{
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
main > section{ padding: 140px 0 96px; }

/* ---------- BACK LINK (About / Projects / Contact pages) ----------
   Just a way back to the interactive pull-to-navigate home page --
   that page is the one hub, so subpages don't cross-link each other.
   Fixed in the corner, away from the page header, so it's never confused
   for part of the content and never lost when scrolling. */
.back-link{
  /* max(...) keeps this clear of a phone's notch/status-bar area (the
     env() part), while never sitting closer than 20px on a device with no
     notch at all */
  position: fixed; top: max(20px, env(safe-area-inset-top) + 12px); left: max(20px, env(safe-area-inset-left) + 12px); z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; letter-spacing: .05em;
  color: var(--ink); text-decoration: none;
  background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 9px 18px 9px 14px;
  box-shadow: 0 0 0 1px var(--eosin-soft), 0 0 18px 3px var(--eosin-soft), 0 3px 10px var(--shadow);
  transition: box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.back-link:hover, .back-link:focus-visible{
  color: var(--eosin); border-color: var(--eosin);
  box-shadow: 0 0 0 1px var(--eosin), 0 0 26px 6px var(--eosin-soft), 0 3px 10px var(--shadow);
}
@media (max-width: 640px){
  .back-link{
    top: max(14px, env(safe-area-inset-top) + 8px);
    left: max(14px, env(safe-area-inset-left) + 8px);
    padding: 8px 14px 8px 12px; font-size: 12px;
  }
}

/* ---------- HOME: name only, drag-to-navigate ---------- */
#intro{
  min-height: 100vh;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 48px;
  padding: 48px 32px;
}
.hero-name{ flex: 1 1 320px; min-width: 280px; }
.hero-graph{
  flex: 0 1 500px;
  width: min(100%, 500px);
  aspect-ratio: 3 / 2;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}
.hero-graph svg{ width: 100%; height: 100%; display: block; }
@keyframes graphHint{
  0%{ transform: scale(1); filter: none; }
  40%{ transform: scale(1.025); filter: drop-shadow(0 0 12px var(--eosin)); }
  100%{ transform: scale(1); filter: none; }
}
.hero-graph.hint{ animation: graphHint 1.5s ease-in-out; }
@media (max-width: 760px){
  #intro{ flex-direction: column; align-items: flex-start; justify-content: center; gap: 40px; }
  .hero-graph{ width: 100%; max-width: 420px; align-self: center; }
}

.grip-zone{
  -webkit-user-select:none; user-select:none;
  cursor: grab;
  display: block;
  touch-action: none;
}
.grip-zone:active{ cursor: grabbing; }
#gripText{
  font-family: "Fraunces", Georgia, serif;
  font-weight: 430;
  /* the name shares the row with the graph panel above 760px, so it gets a
     smaller share of viewport width there than it does full-width on mobile */
  font-size: clamp(3.8rem, 15vw, 8rem);
  line-height: 0.88;
  letter-spacing: -0.01em;
  transform-origin: left center;
  will-change: transform, letter-spacing;
}
@media (min-width: 761px){
  #gripText{ font-size: clamp(4.6rem, 8.5vw, 11rem); }
}
#gripText .first, #gripText .last{ display: block; }
#gripText .last{ font-style: italic; color: var(--hema); }

.pull-status{
  margin-top: 26px;
  min-height: 1.4em;
  display: inline-block;
  transform-origin: left center;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .05em;
  color: var(--ink-muted);
}
@keyframes pullHint{
  0%{ transform: scaleX(1); text-shadow: none; color: var(--ink-muted); }
  45%{ transform: scaleX(1.06); text-shadow: 0 0 10px var(--eosin); color: var(--eosin); }
  100%{ transform: scaleX(1); text-shadow: none; color: var(--ink-muted); }
}
.pull-status.hint{ animation: pullHint 1.5s ease-in-out; }

/* the stress-strain graph is a standalone nav panel now, not background art
   hiding behind the text, so it can stay clearly visible on its own */
.hero-curve{ pointer-events: none; overflow: visible; }
.hero-curve path{ fill: none; stroke: var(--eosin); stroke-width: 6; stroke-opacity: .55; }
.hero-curve .curve-axis-line{ stroke: var(--eosin); stroke-width: 2.5; stroke-opacity: .5; fill: none; }
.hero-curve .curve-axis-arrow{ fill: var(--eosin); fill-opacity: .5; }
.hero-curve .curve-guide-line{ stroke: var(--eosin); stroke-width: 2; stroke-dasharray: 5 6; stroke-opacity: .35; fill: none; }
.hero-curve .curve-axis-label{
  font-family: "IBM Plex Mono", monospace; font-size: 16px; letter-spacing: .14em;
  fill: var(--eosin); opacity: .55;
}
.hero-curve .tick circle{ fill: var(--eosin); opacity: .55; transition: opacity .2s ease, r .2s ease; }
.hero-curve .tick text{
  font-family: "IBM Plex Mono", monospace; font-size: 24px; letter-spacing: .08em;
  fill: var(--eosin); opacity: .55; transition: opacity .2s ease;
}
.hero-curve .tick.armed circle{ opacity: 1; r: 13; }
.hero-curve .tick.armed text{ opacity: 1; font-weight: 600; }
@media (max-width: 520px){
  .hero-curve .tick text{ font-size: 19px; }
  .hero-curve .curve-axis-label{ font-size: 13px; }
}

/* keyboard/assistive-tech route to the same three pages, hidden until focused */
.quiet-nav{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; margin-top: 20px;
}
.quiet-nav:focus-within{
  position: fixed; top: 16px; left: 16px; width: auto; height: auto; overflow: visible;
  clip: auto; white-space: normal;
  background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 10px 14px; display: flex; gap: 14px; z-index: 200;
}
.quiet-nav a{ font-family:"IBM Plex Mono", monospace; font-size: 12px; color: var(--ink); text-decoration: none; }
.quiet-nav a:hover, .quiet-nav a:focus{ color: var(--eosin); }

/* ---------- SECTION / PAGE HEADERS ---------- */
.phase-head{ margin-bottom: 36px; max-width: 640px; }
.phase-head h2{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: 8px; font-weight: 460; }
.phase-head .kicker{ color: var(--ink-muted); }

/* ---------- ABOUT ---------- */
.about-top{ display:flex; align-items:center; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.photo{
  width:132px; height:132px; border-radius:50%; flex:none;
  object-fit:cover; border:1px solid var(--line);
}
.about-top h3{ font-size:1.5rem; font-weight:520; }
.about-subtitle{ margin-top:6px; color: var(--ink-muted); font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.03em; }
.about-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items:start; }
.about-grid p{ margin: 0 0 16px; max-width: 60ch; }
.discipline-list{ display:flex; flex-direction:column; gap:14px; }
.discipline-row{
  background: var(--paper-raised);
  border:1px solid var(--line);
  border-left: 3px solid var(--blueprint);
  border-radius: 3px;
  padding: 14px 16px;
}
.discipline-row.alt{ border-left-color: var(--eosin); }
.discipline-row h4{ margin:0 0 4px; font-size: .95rem; font-weight:600; }
.discipline-row p{ margin:0; font-size: .88rem; color: var(--ink-muted); max-width: none; }

/* ---------- PROJECTS / CHART ---------- */
.chart-layout{ display:grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items:start; }
.chart-card{ background: var(--paper-raised); border:1px solid var(--line); border-radius: 6px; padding: 20px 20px 14px; }
.chart-card svg{ width:100%; height:auto; display:block; overflow: visible; }
.axis-label{ font-family:"IBM Plex Mono",monospace; font-size: 10.5px; letter-spacing:.07em; fill: var(--ink-muted); text-transform: uppercase; }
.quad-label{ font-family:"IBM Plex Mono",monospace; font-size: 9.5px; letter-spacing:.06em; fill: var(--ink-muted); opacity:.55; text-transform: uppercase; }
.grid-line{ stroke: var(--line); stroke-width:1; }
.axis-line{ stroke: var(--line-strong); stroke-width:1; stroke-dasharray: 2 4; }
.pt{ cursor: pointer; }
.pt circle.halo{ fill: none; stroke-width: 2; opacity:0; transition: opacity .15s ease, r .15s ease; }
.pt:hover circle.halo, .pt.active circle.halo{ opacity: 1; }
.pt circle.core{ stroke: var(--paper-raised); stroke-width:2; transition: r .15s ease; }
.pt:hover circle.core, .pt.active circle.core{ r: 8; }
.pt text{
  font-family:"IBM Plex Mono",monospace; font-size: 10px; fill: var(--ink); pointer-events:none;
  opacity: 0; transition: opacity .15s ease;
}
.pt.active text, .pt:hover text, .pt:focus-visible text{ opacity: 1; font-weight: 600; }
.chart-hint{
  margin: 0 0 12px; font-family:"IBM Plex Mono",monospace; font-size: 11.5px; letter-spacing:.03em;
  color: var(--ink-muted);
}

.legend{ display:flex; flex-wrap:wrap; gap: 14px 20px; margin-top: 16px; padding-top:14px; border-top: 1px solid var(--line); }
.legend button{
  display:flex; align-items:center; gap:7px;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size: 11.5px; letter-spacing:.03em;
  color: var(--ink-muted);
}
.legend button.off{ opacity:.35; }
.legend .swatch{ width:10px; height:10px; border-radius:50%; flex:none; }

.detail-card{
  background: var(--paper-raised); border:1px solid var(--line); border-radius: 6px;
  padding: 24px; min-height: 100%;
}
.detail-card .tagrow{ display:flex; gap:8px; margin-bottom: 12px; flex-wrap:wrap; }
.pill{
  font-family:"IBM Plex Mono",monospace; font-size: 10.5px; letter-spacing:.05em; text-transform:uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-muted);
}
.pill.featured{ background: var(--eosin-soft); color: var(--eosin); border-color: var(--eosin); }
.detail-card h3{ font-size: 1.3rem; font-weight:520; margin-bottom: 10px; }
.detail-card p{ margin: 0 0 12px; color: var(--ink-muted); }
.detail-card .stat-row{ display:flex; gap: 18px; margin-top: 16px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap;}
.detail-card .stat{ font-family:"IBM Plex Mono",monospace; }
.detail-card .stat b{ display:block; font-size: 1.05rem; color: var(--ink); }
.detail-card .stat span{ font-size: 10.5px; color: var(--ink-muted); text-transform:uppercase; letter-spacing:.06em; }
.shot-slot{
  margin: 12px 0 16px; height: 140px; border-radius: 4px;
  border: 1.5px dashed var(--line-strong); background: var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color: var(--ink-muted);
}
.shot-slot svg{ width: 26px; height: 26px; }
.shot-slot span{ font-family:"IBM Plex Mono",monospace; font-size: 10.5px; letter-spacing:.07em; text-transform:uppercase; }
/* one photo at a time, swipe (or drag) to see the next -- native scroll-snap,
   so it works as a real swipe gesture on touch with no JS required */
.photo-strip{
  display:flex; gap:0; margin: 12px 0 4px;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  border-radius:6px; scrollbar-width:none;
}
.photo-strip::-webkit-scrollbar{ display:none; }
.photo-strip figure{ margin:0; flex:0 0 100%; scroll-snap-align:start; }
.photo-strip img{
  width:100%; height:220px; object-fit:cover; border-radius:6px; border:1px solid var(--line);
  display:block; background: var(--paper);
}
.photo-strip figcaption{
  margin-top:6px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color: var(--ink-muted); line-height:1.35;
}
.photo-hint{
  margin: 0 0 16px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color: var(--ink-muted);
}
@media (max-width: 520px){
  .photo-strip img{ height:190px; }
}
.meta-project{ margin-top:40px; max-width:none; border-left:3px solid var(--eosin); min-height:0; }
.photo-credit{
  display:inline-block; margin: 0 0 16px; font-family:"IBM Plex Mono",monospace; font-size: 10.5px;
  color: var(--ink-muted); text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:1px;
}
.photo-credit:hover{ color: var(--eosin); border-color: var(--eosin); }
.code-link{
  display:inline-block; margin-top: 4px;
  font-family:"IBM Plex Mono",monospace; font-size: 12.5px;
  color: var(--blueprint); text-decoration:none; border-bottom: 1px solid currentColor; padding-bottom:2px;
}
.code-link:hover{ color: var(--eosin); }

/* ---------- CONTACT ---------- */
#contact{ padding-bottom: 120px; }
.contact-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items:start; }
.contact-links{ display:flex; flex-direction:column; gap:10px; font-family:"IBM Plex Mono",monospace; }
.contact-links a{ color: var(--ink); text-decoration:none; border-bottom: 1px solid var(--line-strong); padding-bottom:2px; width: fit-content; }
.contact-links a:hover{ color: var(--eosin); border-color: var(--eosin); }
.contact-form{ display:flex; flex-direction:column; gap: 14px; }
.contact-form label{
  display:flex; flex-direction:column; gap:6px;
  font-family:"IBM Plex Mono",monospace; font-size: 11px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-muted);
}
.contact-form input, .contact-form textarea{
  font: 14px/1.5 "Public Sans", sans-serif; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 9px 11px; resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus{ outline: 2px solid var(--eosin); outline-offset: 1px; border-color: var(--eosin); }
.contact-form button{
  align-self:flex-start; font-family:"IBM Plex Mono",monospace; font-size: 12px; letter-spacing:.08em; text-transform:uppercase;
  background: var(--ink); color: var(--paper); border:none; border-radius:4px; padding: 10px 20px; cursor:pointer;
}
.contact-form button:hover{ background: var(--eosin); }
.contact-form button:disabled{ opacity:.6; cursor:default; }
.form-status{
  margin-top:14px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; color: var(--ink-muted); min-height:1.2em;
}
.footnote{ margin-top: 60px; font-family:"IBM Plex Mono",monospace; font-size: 11.5px; color: var(--ink-muted); line-height:1.7; }

.site-credit{
  font-family:"IBM Plex Mono",monospace; font-size: 10.5px; color: var(--ink-muted);
  text-align:center; line-height:1.6; padding: 28px 20px;
}
.site-credit a{ color: inherit; text-decoration: underline; }
.site-credit a:hover{ color: var(--eosin); }

@media (max-width: 860px){
  .about-grid, .chart-layout, .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .chart-card{ padding: 16px 14px 12px; }
  main > section{ padding: 128px 0 64px; }
  .wrap{ padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* Screenshot strips (Strikeout Lab card): full screenshots, not cropped like the project photos above */
.shots .photo-strip img{ height:440px; object-fit:cover; object-position:top; background:var(--paper); }
@media (max-width: 520px){ .shots .photo-strip img{ height:250px; } }