/* Iris / a personal collection of work, ideas, and experience. */

@font-face {
  font-family: Satoshi;
  src: url('/assets/fonts/Satoshi-Regular.2b21ac818074.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Satoshi;
  src: url('/assets/fonts/Satoshi-Medium.e414dd688465.woff2') format('woff2');
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: Satoshi;
  src: url('/assets/fonts/Satoshi-Bold.8d97ecca8973.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/InstrumentSerif-Regular.60c06664b5a9.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/InstrumentSerif-Italic.6ee678c33f38.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Neutral surfaces keep the work and accent colors in focus. */
  --bg: #ffffff;
  --paper: #f7f8fa;
  --ink: #202124;
  --muted: #60636b;
  --line: #d5d8df;
  --line-soft: #e8eaee;
  --soft: #edf0f5;
  --band: #f7f8fa;
  /* Blue leads; supporting hues are reserved for small editorial highlights. */
  --accent: #245bd6;
  --accent-ink: #f7f8fa;
  --accent-soft: #eaf0ff;
  --accent-hover: #1747b4;
  --teal: #08776e;
  --violet: #7544c5;
  --coral: #b74532;
  /* The dark plate used by the practice band, footers, players, and code. */
  --dark-band: #17181b;
  --dark-band-ink: #f5f6f8;
  --dark-band-muted: #b9bdc7;
  --dark-band-accent: #8ab4ff;
  --dark-band-line: #3b3e46;
  --panel: #f7f8fa80;
  --grid: #245bd608;
  --max: 1360px;
  --content-max: 1120px;
  /* Chrome bars share the content edge above 1284px instead of the wider nav grid. */
  --edge: max(var(--gutter),calc((100vw - var(--content-max)) / 2));
  --bar-h: 80px;
  --sticky-top: calc(var(--bar-h) + var(--s-6));
  --line-strong: #858a96;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  /* Fluid type scale. Display and h1 are for page openings; h2 opens sections. */
  --t-display: clamp(56px,6.9vw,100px);
  --t-h1: clamp(44px,5.2vw,76px);
  --t-h2: clamp(34px,3.6vw,52px);
  --t-h3: clamp(22px,1.9vw,28px);
  --t-h4: 19px;
  --t-lead: clamp(18px,1.35vw,21px);
  --t-body: 16px;
  --t-small: 14px;
  --t-caption: 13px;
  --t-label: 12px;
  --lh-tight: 1.04;
  --lh-heading: 1.12;
  --lh-body: 1.6;
  --lh-relaxed: 1.7;
  --track-label: .06em;
  --track-serif: -.015em;
  /* Spacing scale (4px base). Section rhythm uses --section-space. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --font-display: Satoshi,Arial,sans-serif;
  --font-body: Satoshi,Arial,sans-serif;
  --font-serif: 'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-mono: ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --gutter: clamp(24px,5.7vw,100px);
  --section-space: clamp(56px,6.2vw,92px);
  --section-space-sm: clamp(40px,4vw,56px);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 520ms;
  --focus-ring: var(--accent);
  --shadow: 0 24px 70px #16234214;
  --shadow-sm: 0 10px 30px #1623420d;
}

:root[data-theme=dark] {
  color-scheme: dark;
  /* Neutral charcoal surfaces, with brighter accents for readable contrast. */
  --bg: #111214;
  --paper: #1a1c20;
  --ink: #f3f4f6;
  --muted: #afb4bf;
  --line: #3b3e46;
  --line-soft: #292c32;
  --soft: #24272e;
  --band: #17191d;
  --accent: #8ab4ff;
  --accent-ink: #101e38;
  --accent-soft: #202d48;
  --accent-hover: #b2cdff;
  --teal: #68d7c6;
  --violet: #c3a4ff;
  --coral: #ffa18e;
  --dark-band: #191b20;
  --dark-band-ink: #f3f4f6;
  --dark-band-muted: #b9bdc7;
  --dark-band-accent: #8ab4ff;
  --dark-band-line: #40444d;
  --line-strong: #747b88;
  --panel: #f7f8fa08;
  --grid: #8ab4ff0a;
  --shadow: 0 24px 70px #00000055;
  --shadow-sm: 0 10px 30px #00000040;
}

/* Match the base stylesheet's theme specificity so aliases follow the active palette in both themes. */
:root,:root[data-theme] {
  --accent-dark: var(--accent);
  --accent-on-dark: var(--dark-band-accent);
  --accent-2: var(--accent);
  --grad: linear-gradient(110deg,var(--accent),var(--accent));
  --charcoal: var(--dark-band);
  --bar-bg: color-mix(in srgb,var(--bg) 92%,transparent);
  --placeholder: var(--soft);
  --footer-bg: var(--dark-band);
  --footer-ink: var(--dark-band-ink);
  --footer-muted: var(--dark-band-muted);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--sticky-top);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body)/var(--lh-body) var(--font-body);
}

h1,h2,h3,h4,p,figure,blockquote,dl,dd {
  margin: 0;
}

button,input,textarea,select {
  font: inherit;
}

button {
  cursor: pointer;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

a,button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* One transition vocabulary: colour and borders are quick, lifts and nudges ease. */
a,button,summary,.button {
  transition:
    color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease-out),
    opacity var(--t-fast) var(--ease-out);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  display: block;
  flex-shrink: 0;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:where(a,button,input,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 6px;
}

[hidden],.is-hidden {
  display: none!important;
}

.sr-only {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  padding: 0!important;
  margin: -1px!important;
  overflow: hidden!important;
  clip: rect(0,0,0,0)!important;
  white-space: nowrap!important;
  border: 0!important;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--s-5);
  z-index: 1000;
  background: var(--ink);
  color: var(--bg);
  padding: var(--s-3) var(--s-5);
}

.skip-link:focus {
  top: var(--s-4);
}

.shell {
  padding-inline: var(--gutter);
  max-width: calc(var(--max) + var(--gutter)*2);
  margin-inline: auto;
}

.iris-home main>.shell,
.practice-section>.shell,
.resume-studio.shell,
.iris-footer.shell {
  max-width: calc(var(--content-max) + var(--gutter)*2);
}

.iris-home h1,.iris-home h2,.iris-home h3 {
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: var(--lh-heading);
}

h2,h3 {
  text-wrap: balance;
}

.keep-together {
  white-space: nowrap;
}

/* Every home section opener shares the h2 tier, at every width. */
.iris-home h2 {
  font-size: var(--t-h2);
  letter-spacing: -.04em;
}

.iris-home em,.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--track-serif);
  color: var(--accent);
}

/* The shared label recipe. iris-pages.css repeats it for detail pages; the home page loads only this file. */
.eyebrow,.section-label,.iris-home .work-heading {
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.iris-home .eyebrow,.iris-home .section-label,.iris-home .work-heading {
  color: var(--muted);
}

.section-number {
  margin-right: var(--s-3);
  color: var(--accent);
}

.iris-home .site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  height: 96px;
  padding: var(--s-4) var(--edge);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bar-bg);
  backdrop-filter: blur(22px);
  z-index: 45;
  transition: height var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease-out);
}

.iris-home .site-header.is-scrolled {
  height: var(--bar-h);
  box-shadow: 0 6px 30px #11182708;
}

/* Brand and theme control are shared with the detail-page bar (.pj-bar). */
.iris-brand {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  font-size: var(--t-small);
  font-weight: 500;
}

.iris-brand small {
  display: block;
  font-size: var(--t-label);
  color: var(--muted);
  font-weight: 400;
  margin-top: 1px;
}

.iris-brand .brand-symbol,.brand-symbol {
  font: italic 400 38px/1 var(--font-serif);
  letter-spacing: var(--track-serif);
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: var(--s-6);
  align-items: center;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--t-small);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}

.nav-links a:hover {
  color: var(--accent);
}

.nav-links a:hover::after,.nav-links a.is-current::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}

.resume-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  margin-right: var(--s-2);
  font-size: var(--t-caption);
}

/* Icon buttons: one 40px control at every breakpoint, one hover recipe. */
.theme-toggle,.nav-toggle,.jump-toggle {
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink);
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  padding: 0;
}

[data-theme-toggle]:hover,.nav-toggle:hover,.jump-toggle:hover {
  color: var(--accent);
  background-color: var(--soft);
  border-color: var(--accent);
}

html:not([data-theme]) [data-theme-toggle] {
  display: none;
}

.theme-disc {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(90deg,currentColor 50%,transparent 50%);
}

.nav-toggle {
  display: none;
  width: 40px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle span {
  width: 16px;
  height: 1px;
  background: currentColor;
}

.iris-hero {
  position: relative;
  padding-top: var(--s-6);
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.location {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--muted);
  font-size: var(--t-label);
}

.status-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);
}

.hero-heading {
  position: relative;
  padding: var(--s-7) 0 var(--s-6);
}

.hello {
  font-size: var(--t-lead);
  margin-bottom: var(--s-4);
}

.iris-home .hero-heading h1 {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -.055em;
  font-weight: 400;
  text-wrap: balance;
}

.line-mask {
  display: block;
  overflow: clip;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.line-mask>span {
  display: block;
}

.hero-plus {
  position: absolute;
  right: 4%;
  top: 80px;
  color: var(--accent);
  font-size: 90px;
  line-height: 1;
  transform: rotate(12deg);
}

.hero-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  padding: 0 0 var(--s-7);
}

.hero-bottom>p {
  max-width: 560px;
  font-size: var(--t-body);
  color: var(--muted);
  text-wrap: pretty;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: 14px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: 500 14px/1.5 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

.button.small {
  padding: 10px 16px;
  font-size: 13px;
}

.button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.button.secondary {
  background: transparent;
  color: var(--ink);
}

.button.secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Text links are 14px everywhere; the arrow nudges toward where it points. */
.text-link {
  display: inline-flex;
  gap: var(--s-4);
  align-items: center;
  font-size: var(--t-small);
  line-height: var(--lh-body);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}

.text-link span[aria-hidden] {
  display: inline-block;
  transition: transform var(--t-base) var(--ease);
}

.text-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.text-link:hover span[aria-hidden] {
  transform: translate(2px,-2px);
}

.text-link[href^="#"]:hover span[aria-hidden] {
  transform: translateY(2px);
}

.motion-toggle {
  min-height: 32px;
  background: none;
  border: 0;
  color: var(--muted);
  padding: var(--s-2) 0;
  font-size: var(--t-label);
  white-space: nowrap;
}

.motion-toggle::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  margin-right: var(--s-2);
  vertical-align: 2px;
}

.motion-toggle[aria-pressed=true]::before {
  background: currentColor;
}

.experience-strip {
  display: flex;
  align-items: center;
  gap: 5%;
  border-block: 1px solid var(--line);
  background: var(--paper);
  padding: var(--s-5) var(--edge);
}

.experience-strip>span {
  max-width: 150px;
  color: var(--muted);
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.experience-strip>div {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.experience-strip>div>span {
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: -.03em;
}

.work-section {
  padding-block: var(--section-space);
}

.work-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  padding: 0 0 var(--s-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-4);
}

.pf-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pf-filter button {
  padding: 10px var(--s-4);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--t-caption);
}

.pf-filter button:not(.current):hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.pf-filter button.current {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.pf-count {
  font-size: 10px;
  margin-left: var(--s-2);
  vertical-align: super;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--s-5);
}

.work-card {
  min-width: 0;
}

.work-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-label);
  color: var(--muted);
}

.work-term {
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.iris-home .work-title {
  font-size: var(--t-h3);
  letter-spacing: -.03em;
  margin-bottom: var(--s-3);
}

.work-rest-summary {
  color: var(--muted);
  font-size: 15px;
  line-height: var(--lh-body);
}

.contact-section {
  padding-block: var(--section-space);
  border-top: 1px solid var(--line);
}

.contact-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-6);
  color: var(--muted);
  font-size: var(--t-caption);
}

.contact-invitation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-7);
  padding: var(--s-4) 0 var(--s-5);
}

.iris-home .contact-invitation h2 {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -.055em;
  font-weight: 400;
  max-width: 920px;
}

.contact-arrow {
  font-size: clamp(70px,9vw,130px);
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  transition: transform var(--t-slow) var(--ease);
}

.contact-invitation:hover .contact-arrow {
  transform: translate(12px,-12px);
}

.contact-bottom {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--s-5) 7%;
}

.contact-bottom>p {
  max-width: 430px;
  color: var(--muted);
  font-size: var(--t-body);
}

.contact-email {
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  letter-spacing: -.03em;
}

.copy-email {
  display: block;
  min-height: 40px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--t-caption);
  padding: var(--s-3) 0;
}

.copy-status {
  font-size: var(--t-caption);
}

.iris-footer {
  padding-block: var(--s-6) var(--s-5);
  border-top: 1px solid var(--line);
}

.footer-sign {
  display: inline-block;
  font: italic 400 var(--t-display)/var(--lh-heading) var(--font-serif);
  letter-spacing: var(--track-serif);
  color: var(--ink);
}

.footer-sign span {
  color: var(--accent);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-5);
  font-size: var(--t-label);
  color: var(--muted);
}

.footer-meta nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-5);
}

.footer-meta nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.footer-preferences {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* Detail pages close with the same footer at a smaller signature size. */
.iris-footer--compact {
  padding-block: var(--s-6) var(--s-5);
}

.iris-footer--compact .footer-sign {
  font-size: clamp(34px,4vw,56px);
  line-height: 1.1;
}

.reading-progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  transform-origin: left;
  background: var(--accent);
  z-index: 90;
  pointer-events: none;
}

.jump-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  font: 400 var(--t-label)/1 var(--font-mono);
}

.jump-key {
  color: var(--muted);
}

.jump-toggle:hover .jump-key {
  color: inherit;
}

.jump-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.jump-dialog {
  margin: auto;
  width: min(620px,calc(100% - 32px));
  max-height: 85dvh;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.jump-dialog[open] {
  display: flex;
  flex-direction: column;
}

.jump-dialog::backdrop {
  background: #10111480;
  backdrop-filter: blur(10px);
}

.jump-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0 0 var(--s-5);
}

.jump-heading h2 {
  font: italic 400 36px/var(--lh-heading) var(--font-serif);
  letter-spacing: var(--track-serif);
}

.jump-close {
  min-height: 40px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: var(--t-caption);
  padding: var(--s-2);
}

.jump-close span {
  font-size: 22px;
  margin-left: var(--s-2);
}

.jump-search {
  display: block;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-body);
}

.jump-search:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* Padding inside the scroll box keeps the inset focus ring from being clipped. */
.jump-results {
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: var(--s-2) calc(var(--s-2) * -1) 0;
  padding: var(--s-2);
}

.jump-results a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-3);
  border-radius: var(--radius-sm);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.jump-results a small {
  display: block;
  color: var(--muted);
  font-size: var(--t-label);
  margin-top: 2px;
}

.jump-results a>span:last-child {
  color: var(--accent);
}

.jump-results a:hover,.jump-results a:focus {
  background: var(--soft);
}

.jump-results a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.jump-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) 0 0;
  margin-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 400 var(--t-label)/1.5 var(--font-mono);
}

.jump-empty {
  padding: var(--s-5);
  font-size: 15px;
  color: var(--muted);
}

.mobile-menu {
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--s-6) var(--gutter);
  border: 0;
  background: var(--bg);
  color: var(--ink);
}

.mobile-menu:not([open]) {
  display: none;
}

.mobile-menu::backdrop {
  background: var(--bg);
}

.mobile-menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--s-6);
}

.mobile-close {
  min-height: 40px;
  border: 0;
  background: none;
  font-size: var(--t-small);
  padding: var(--s-2) var(--s-3);
}

.mobile-menu nav {
  display: grid;
}

.mobile-menu nav>a {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  border-top: 1px solid var(--line);
  padding: var(--s-5) 0;
  font-size: clamp(30px,8vw,48px);
  line-height: var(--lh-heading);
  letter-spacing: -.04em;
}

.mobile-menu nav>a:hover {
  color: var(--accent);
}

.mobile-menu nav>a>span {
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  color: var(--muted);
}

.mobile-menu nav i {
  font-style: normal;
  margin-left: auto;
  color: var(--accent);
}

.mobile-email {
  display: inline-block;
  margin-top: var(--s-6);
  font-size: 15px;
}

.story-section {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  /* The column gap never drops below the portrait stamp's overhang (46px plus its 8px ring). */
  gap: var(--s-7) max(8%,var(--s-8));
  padding-block: var(--section-space);
  border-top: 1px solid var(--line);
}

.story-copy {
  align-self: center;
}

.story-copy .eyebrow {
  margin-bottom: var(--s-4);
}

.story-copy h2 {
  margin-bottom: var(--s-5);
  overflow-wrap: anywhere;
}

.story-copy>p {
  color: var(--muted);
  margin-top: var(--s-4);
  max-width: 530px;
}

.story-copy .story-lead {
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  letter-spacing: -.01em;
  color: var(--ink);
}

.story-copy .text-link {
  margin-top: var(--s-5);
}

.story-portrait {
  position: relative;
  align-self: start;
  margin: 0;
  width: min(100%,390px);
  justify-self: end;
}

.portrait-window {
  overflow: hidden;
  border-radius: 50% 50% var(--radius-sm) var(--radius-sm);
  background: var(--soft);
  aspect-ratio: 3/4;
}

.portrait-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease);
}

.story-portrait:hover img {
  transform: scale(1.035);
}

.story-portrait figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  padding-top: var(--s-4);
}

.story-portrait figcaption span {
  white-space: nowrap;
}

.portrait-stamp {
  position: absolute;
  left: -46px;
  bottom: 62px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transform: rotate(-12deg);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 19px;
  line-height: var(--lh-heading);
  box-shadow: 0 0 0 8px var(--bg);
}

.iris-home .portrait-stamp em {
  color: inherit;
  font-size: 26px;
}

.story-numbers {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border-top: 1px solid var(--line);
  padding-top: var(--s-6);
  gap: var(--s-5);
}

.story-numbers strong {
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.055em;
}

.story-numbers strong span {
  margin-left: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--track-serif);
  color: var(--accent);
}

.story-numbers p {
  font-size: var(--t-caption);
  color: var(--muted);
  margin-top: var(--s-3);
}

.practice-section {
  --focus-ring: var(--dark-band-accent);
  padding-block: var(--section-space);
  background: var(--dark-band);
  color: var(--dark-band-ink);
}

.practice-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--s-6);
  align-items: start;
}

.practice-heading h2 {
  max-width: 660px;
}

.practice-heading .eyebrow {
  color: var(--dark-band-muted);
  padding-top: var(--s-2);
}

.iris-home .practice-section em {
  color: var(--dark-band-accent);
}

.practice-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--s-6);
  margin-top: var(--s-7);
}

.practice-grid article {
  border-top: 1px solid var(--dark-band-line);
  padding-top: var(--s-5);
}

.practice-index {
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  color: var(--dark-band-accent);
}

.iris-home .practice-grid h3 {
  font-size: var(--t-h3);
  letter-spacing: -.03em;
  margin-block: var(--s-4) var(--s-3);
  max-width: 310px;
  text-wrap: pretty;
}

.practice-grid p {
  color: var(--dark-band-muted);
  font-size: 15px;
  text-wrap: pretty;
}

.practice-tags {
  display: block;
  margin-top: var(--s-4);
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dark-band-accent);
}

.toolkit {
  margin-top: var(--s-6);
  border-block: 1px solid var(--dark-band-line);
}

.toolkit summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  cursor: pointer;
  font-size: var(--t-small);
  padding: var(--s-4) 0;
}

.toolkit summary::-webkit-details-marker {
  display: none;
}

.toolkit summary:hover>span:last-child {
  color: var(--dark-band-accent);
}

/* One disclosure glyph for both home details: a plus that turns into a close mark. */
.toolkit summary b,.contact-compose summary>span>span {
  display: inline-block;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  margin-left: var(--s-4);
  vertical-align: -2px;
  transition: transform var(--t-base) var(--ease);
}

.toolkit[open] summary b,.contact-compose[open] summary>span>span {
  transform: rotate(45deg);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--s-6);
  padding-block: var(--s-2) var(--s-6);
}

.iris-home .skill-cat {
  font-size: var(--t-h4);
  letter-spacing: -.02em;
  margin-bottom: var(--s-3);
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.skill-tag {
  border: 1px solid var(--dark-band-line);
  border-radius: var(--radius-sm);
  padding: var(--s-1) var(--s-2);
  color: var(--dark-band-muted);
  font-size: var(--t-label);
}

.skill-tag.is-expert {
  color: var(--dark-band-ink);
  border-color: color-mix(in srgb,var(--dark-band-accent) 45%,var(--dark-band-line));
  background: color-mix(in srgb,var(--dark-band-accent) 10%,transparent);
}

.experience-section {
  padding-block: var(--section-space);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  align-items: start;
}

.experience-intro {
  position: sticky;
  top: var(--sticky-top);
}

.experience-intro h2 {
  margin-top: var(--s-4);
}

.experience-intro>p:not(.eyebrow) {
  color: var(--muted);
  max-width: 370px;
  margin-block: var(--s-5);
}

.exp-two {
  display: block;
}

.exp-two-item {
  border-top: 1px solid var(--line);
  padding-block: var(--s-5) var(--s-6);
}

.exp-two-when {
  font: 500 var(--t-label)/1.5 var(--font-mono);
  letter-spacing: var(--track-label);
  color: var(--muted);
  margin-bottom: var(--s-3);
}

.iris-home .exp-two-role {
  font-size: var(--t-h3);
  letter-spacing: -.03em;
}

.exp-two-co {
  display: block;
  font-size: var(--t-small);
  color: var(--accent);
  letter-spacing: 0;
  margin-top: var(--s-2);
  line-height: var(--lh-body);
}

.exp-two-sum {
  color: var(--muted);
  font-size: 15px;
  line-height: var(--lh-body);
  margin-top: var(--s-3);
}

.testimonials-section {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,2fr);
  gap: var(--s-6) 6%;
  padding-block: var(--section-space);
  border-top: 1px solid var(--line);
}

.testimonial-heading h2 {
  margin-top: var(--s-4);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--s-6);
}

.tm-card {
  padding-top: var(--s-7);
  position: relative;
}

.tm-card::before {
  content: '“';
  position: absolute;
  top: -10px;
  left: -3px;
  font: 70px var(--font-serif);
  color: var(--accent);
}

.tm-quote {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: -.01em;
}

.tm-cap {
  display: flex;
  flex-direction: column;
  margin-top: var(--s-4);
  gap: var(--s-1);
}

.tm-name {
  font-size: var(--t-small);
}

.tm-context {
  font-size: var(--t-label);
  color: var(--muted);
}

.contact-compose {
  margin-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.contact-compose summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  cursor: pointer;
  padding: var(--s-5) 0;
  font-size: var(--t-small);
  color: var(--muted);
}

.contact-compose summary::-webkit-details-marker {
  display: none;
}

.contact-compose summary>span {
  color: var(--ink);
}

.contact-compose summary:hover>span {
  color: var(--accent);
}

.compose-note {
  color: var(--muted);
  font-size: var(--t-small);
  margin-bottom: var(--s-5);
}

.contact-form {
  max-width: 800px;
}

.cf-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--s-5);
}

.cf-field {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-size: var(--t-small);
}

.cf-field input,.cf-field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-3);
  font-size: var(--t-body);
  transition: border-color var(--t-fast) var(--ease-out);
}

.cf-field textarea {
  resize: vertical;
  min-height: 130px;
}

.cf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.cf-status {
  padding: var(--s-3) 0;
  font-size: var(--t-small);
  color: var(--muted);
}

/* Quiet links: plain text that turns accent and gains an underline on hover. */
.footer-meta nav a:hover,.footer-sign:hover,.resume-link:hover,.contact-email:hover,.mobile-email:hover,.jump-results a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.copy-email:hover,.motion-toggle:hover,.jump-close:hover,.mobile-close:hover {
  color: var(--accent);
}

.motion-toggle:disabled:hover {
  color: var(--muted);
}

@media(max-width:1100px) {
  .iris-brand small {
    display: none;
  }
  .nav-links {
    gap: var(--s-5);
  }
  .header-actions {
    gap: var(--s-2);
  }
  .hero-plus {
    font-size: 66px;
    top: 75px;
    right: 0;
  }
  .experience-strip {
    gap: var(--s-6);
  }
  .experience-strip>div {
    gap: var(--s-5);
  }
  .testimonials-section {
    grid-template-columns: minmax(0,1fr);
  }
  /* Narrower two-column story: tuck the stamp in so it clears the copy column by 20px or more. */
  .portrait-stamp {
    left: -36px;
  }
}

@media(max-width:1000px) {
  .practice-heading {
    display: block;
  }
  .practice-heading .eyebrow {
    padding-top: 0;
  }
  .practice-heading h2 {
    margin-top: var(--s-4);
  }
  .practice-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .practice-grid article:last-child {
    grid-column: 1/-1;
  }
  .practice-grid article:last-child p {
    max-width: 560px;
  }
}

@media(max-width:900px) {
  .story-section {
    grid-template-columns: minmax(0,1fr);
    gap: var(--s-6);
  }
  .story-portrait {
    margin: 0 0 0 var(--s-5);
    max-width: 360px;
    width: calc(100% - var(--s-6));
    justify-self: center;
  }
  .portrait-stamp {
    width: 110px;
    height: 110px;
    left: -28px;
  }
  .iris-home .portrait-stamp em {
    font-size: 24px;
  }
  .story-numbers {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  /* Scoped to .iris-home so the collapse holds even while showcase.css sets the two-column split. */
  .iris-home .experience-section {
    grid-template-columns: minmax(0,1fr);
    gap: var(--s-6);
  }
  .experience-intro {
    position: static;
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top: 90px;
  }
  .iris-home .site-header,.iris-home .site-header.is-scrolled {
    height: 78px;
    padding-block: var(--s-4);
    gap: var(--s-4);
  }
  .iris-brand {
    font-size: 13px;
    gap: var(--s-3);
  }
  .iris-brand .brand-symbol,.brand-symbol {
    font-size: 33px;
  }
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .resume-link,.jump-key {
    display: none;
  }
  .jump-toggle {
    width: 40px;
    padding: 0;
  }
  .iris-hero {
    padding-top: var(--s-5);
  }
  .hero-eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
  .location {
    white-space: nowrap;
  }
  .hero-heading {
    padding: var(--s-6) 0 var(--s-5);
  }
  .iris-home .hero-heading h1 {
    font-size: clamp(40px,12.4vw,56px);
  }
  .hero-plus {
    font-size: 39px;
    right: 0;
    top: 40px;
  }
  .hero-bottom {
    padding-bottom: var(--s-6);
  }
  .hero-links {
    gap: var(--s-3) var(--s-5);
  }
  .experience-strip {
    display: block;
  }
  .experience-strip>span {
    max-width: none;
    display: block;
    margin-bottom: var(--s-4);
  }
  .experience-strip>div {
    flex-wrap: wrap;
    justify-content: start;
    gap: var(--s-3) var(--s-5);
  }
  .experience-strip>div>span {
    font-size: var(--t-h4);
  }
  .portfolio-grid {
    grid-template-columns: minmax(0,1fr);
    gap: var(--s-5);
  }
  .practice-grid {
    grid-template-columns: minmax(0,1fr);
    margin-top: var(--s-6);
    gap: var(--s-5);
  }
  .skills-grid {
    grid-template-columns: minmax(0,1fr);
    gap: var(--s-5);
  }
  .testimonials-grid {
    grid-template-columns: minmax(0,1fr);
  }
  .contact-top {
    display: block;
  }
  .contact-note {
    display: none;
  }
  .contact-invitation {
    gap: var(--s-3);
  }
  .iris-home .contact-invitation h2 {
    font-size: clamp(40px,11vw,56px);
  }
  .contact-arrow {
    font-size: 64px;
  }
  .contact-bottom {
    grid-template-columns: minmax(0,1fr);
  }
  .contact-compose summary {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
  }
  .cf-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 0;
  }
  .footer-preferences {
    width: 100%;
    justify-content: space-between;
  }
  .jump-dialog {
    padding: var(--s-5);
  }
  .jump-foot>span:first-child {
    display: none;
  }
}

@media(max-width:560px) {
  .experience-strip>div {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--s-3) var(--s-4);
  }
}

@media(max-width:360px) {
  .iris-brand>span:last-child {
    display: none;
  }
  .hero-plus {
    font-size: 32px;
  }
  .pf-filter {
    gap: 6px;
  }
  .pf-filter button {
    padding-inline: 10px;
    font-size: var(--t-label);
  }
  .pf-count {
    margin-left: var(--s-1);
  }
  .contact-arrow {
    font-size: 45px;
  }
}

/* Motion enhances visible content; the document remains usable without it. */

@keyframes iris-rise {
  from {
    transform: translateY(115%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes iris-fade {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.iris-motion-on .line-mask>span {
  animation: iris-rise 1.25s var(--ease) both;
}

.iris-motion-on .line-mask:nth-child(2)>span {
  animation-delay: .12s;
}

.iris-motion-on .hero-eyebrow,.iris-motion-on .hello {
  animation: iris-fade .9s var(--ease) both;
}

.iris-motion-on .hero-bottom {
  animation: iris-fade 1.1s .25s var(--ease) both;
}

.iris-motion-on .mobile-menu[open] nav>a {
  animation: iris-fade .65s var(--ease) both;
}

.iris-motion-on .mobile-menu[open] nav>a:nth-child(2) {
  animation-delay: .05s;
}

.iris-motion-on .mobile-menu[open] nav>a:nth-child(3) {
  animation-delay: .1s;
}

.iris-motion-on .mobile-menu[open] nav>a:nth-child(4) {
  animation-delay: .15s;
}

.iris-motion-on .mobile-menu[open] nav>a:nth-child(5) {
  animation-delay: .2s;
}

.iris-motion-on .jump-dialog[open] {
  animation: iris-fade .35s var(--ease) both;
}

.iris-motion-on .hero-plus {
  rotate: var(--scroll-turn,0deg);
  transition: rotate .5s var(--ease);
}

.iris-motion-on .emb-hero-copy,.iris-motion-on .yb-headline,.iris-motion-on .oss-hero-inner,.iris-motion-on .wh-hero {
  animation: iris-fade 1.1s var(--ease) both;
}

.iris-motion-on .yb-record {
  rotate: var(--scroll-turn,0deg);
  transition: rotate .6s var(--ease);
}

.iris-motion-on .emb-display {
  translate: 0 var(--image-drift,0px);
  transition: translate .55s var(--ease),transform 1.1s var(--ease);
}

.iris-motion-on .story-portrait .portrait-window img {
  scale: 1.06;
  translate: 0 var(--image-drift,0px);
  transition: translate .6s var(--ease),transform 1.8s var(--ease);
}

.iris-motion-on.has-reveal [data-reveal],.iris-motion-on .iris-reveal {
  opacity: 0;
  transform: translateY(27px);
  transition: opacity .9s var(--ease),transform 1.1s var(--ease);
  transition-delay: var(--reveal-delay,0ms);
}

.iris-motion-on.has-reveal [data-reveal].is-visible,.iris-motion-on .iris-reveal.iris-seen,.iris-motion-on .iris-reveal:focus-within {
  opacity: 1;
  transform: translateY(0);
}

/* Both ends of a project visit share the same navigation transition opt-in. */
@view-transition {
  navigation: auto;
}

.iris-motion-off::view-transition-group(*),
.iris-motion-off::view-transition-old(*),
.iris-motion-off::view-transition-new(*) {
  animation: none!important;
}

.iris-motion-off {
  scroll-behavior: auto;
}

.iris-motion-off *,.iris-motion-off *::before,.iris-motion-off *::after {
  animation: none!important;
  transition: none!important;
}

.iris-motion-off .iris-reveal,.iris-motion-off [data-reveal] {
  opacity: 1!important;
  transform: none!important;
}

.motion-toggle:disabled {
  cursor: default;
  opacity: .7;
}

@media(prefers-reduced-motion:reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none!important;
  }
  html {
    scroll-behavior: auto;
  }
  *,*::before,*::after {
    animation: none!important;
    transition: none!important;
  }
  .iris-reveal,[data-reveal] {
    opacity: 1!important;
    transform: none!important;
  }
}

@media print {
  .iris-reveal,[data-reveal] {
    opacity: 1!important;
    transform: none!important;
  }
}

/* Small color signatures, on neutral surfaces. */
.hero-plus { color: var(--teal); }
.status-dot { background: var(--teal); }
.story-copy h2 em, .contact-invitation h2 em { color: var(--teal); }
.story-numbers>div:nth-child(2) strong { color: var(--violet); }
.story-numbers>div:nth-child(3) strong { color: var(--teal); }
.story-numbers>div:nth-child(4) strong { color: var(--coral); }
.practice-grid>article:nth-child(2) .practice-index { color: #68d7c6; }
.practice-grid>article:nth-child(3) .practice-index { color: #c3a4ff; }
.experience-strip>div>span:nth-child(3n+1)::before,
.experience-strip>div>span:nth-child(3n+2)::before,
.experience-strip>div>span:nth-child(3n)::before {
  content: ''; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; margin-right: 8px; vertical-align: middle;
  background: var(--accent);
}
.experience-strip>div>span:nth-child(3n+2)::before { background: var(--violet); }
.experience-strip>div>span:nth-child(3n)::before { background: var(--teal); }