/* ==========================================================================
   davidizosimov.com portfolio home, v2
   Used by templates/template-portfolio.php and the generated preview.html.

   Look: a cinematic dark hero, then editorial white, sage and ink sections set
   in a tight bold grotesk, with small mono labels ("S.01") and one bright blue
   accent. Motion: masked line reveals, rolling hover labels, arrow swaps,
   parallax and smooth scrolling, all switched off under reduced motion.
   ========================================================================== */

/* Self-hosted fonts: no request to Google, so no visitor IPs leave the site.
   SIL Open Font License, see assets/fonts/OFL-*.txt. Inter Tight is one
   variable file per character set, covering weights 500-700. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/inter-tight-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: "Inter Tight";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/inter-tight-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-mono-400-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: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-mono-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-mono-500-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: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-mono-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink:          #151515;
  --ink-2:        #1F2121;
  --ink-3:        #262929;
  --paper:        #FFFFFF;
  --sage:         #EBF0ED;
  --sage-2:       #DDE5E0;
  --text:         #151515;
  --muted:        #5E6360;              /* 6.1:1 on white, 5.3:1 on sage */
  --line:         rgba(21, 21, 21, .12);
  --accent:       #1F5EFF;              /* bright blue; white text on it is 5.1:1 */
  --accent-ink:   #1747D1;              /* blue for small text on white */
  --accent-light: #6E9BFF;              /* blue for text and glows on ink */
  --on-ink:       #EBF0ED;
  --on-ink-muted: rgba(235, 240, 237, .64);
  --line-ink:     rgba(235, 240, 237, .16);

  --font-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1600px;
  --gutter: clamp(16px, 2.4vw, 36px);
  --radius: 10px;
  --section-pad: clamp(88px, 11vw, 176px);
  --gap: clamp(10px, 1.2vw, 16px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-cm: cubic-bezier(.5, 0, 0, 1);   /* the reference site's reveal curve */

  /* Height of the WordPress admin bar. Zero for logged-out visitors; WordPress
     puts .admin-bar on <body> when the bar is showing. */
  --admin-bar-h: 0px;
}

.admin-bar { --admin-bar-h: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar { --admin-bar-h: 46px; }   /* WP switches the bar to 46px here */
}

/* --------------------------------------------------------- reset & base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.is-menu-open { overflow: hidden; }
/* site.js animates the scroll itself; native smoothing would fight it. */
html.has-smooth-scroll { scroll-behavior: auto; }

body.izo {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;   /* clip where supported: hidden would break sticky */
}

/* Zero-specificity resets (via :where) so every component class below wins. */
.izo :where(h1, h2, h3, h4, p, figure, blockquote, ol, ul) { margin: 0; padding: 0; }
.izo :where(ol, ul) { list-style: none; }
.izo :where(h1, h2, h3, h4) { font: inherit; color: inherit; }
.izo :where(a) { color: inherit; text-decoration: none; }
.izo :where(img) { display: block; max-width: 100%; height: auto; }
.izo :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  text-transform: none;
}
.izo :where(kbd) { font: inherit; }

.izo :where(a, button, input):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Sections focused after an in-page jump shouldn't wear an outline. */
.izo [tabindex="-1"]:focus { outline: none; }

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

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

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: 4px;
  font-weight: 600;
}
.skip-link:focus { top: calc(12px + var(--admin-bar-h)); }

/* -------------------------------------------------------- shared type */

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.xxl {
  font-size: clamp(2.6rem, 5.4vw, 5.2rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
}

/* Two-part section label: boxed number over a filled name. */
.label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.label-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  padding: 4px 5px 3px;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.label-name {
  display: inline-block;
  padding: 5px 6px 4px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 3px;
  white-space: nowrap;
}

/* Big statement paragraph, indented so the label sits in its first line. */
.statement {
  position: relative;
  max-width: 1380px;
}

.statement .label {
  position: absolute;
  top: clamp(4px, .5vw, 9px);
  left: 0;
}

.statement-text {
  font-size: clamp(1.75rem, 3.7vw, 3.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-indent: 150px;
  text-wrap: pretty;
}

/* Word-by-word fill as the statement scrolls through (see site.js). */
.js-fill .statement-text .w {
  opacity: .16;
  transition: opacity .5s var(--ease);
}
.js-fill .statement-text .w.is-lit { opacity: 1; }

@media (max-width: 719px) {
  .statement .label { position: static; margin-bottom: 22px; }
  .statement-text { text-indent: 0; }
}

/* ------------------------------------------------------------- motion kit */

/* Masked line reveal: site.js wraps each word as .sl > .sl-i and numbers the
   line it sits on (--l), so a whole line rises out of its mask together. The
   padding/negative-margin pair gives descenders and tight tracking room
   inside the mask without changing the layout. */
.js .is-split .sl {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 .08em .14em 0;
  margin: 0 -.08em -.14em 0;
}
.js .is-split .sl-i {
  display: inline-block;
  transform: translate3d(0, 115%, 0);
  transition: transform 1s var(--ease-cm);
  transition-delay: calc(var(--l, 0) * 90ms + 60ms);
}
.js .is-split.is-in .sl-i { transform: none; }

/* Rolling label: the text slides up and its text-shadow copy slides in. */
.roll {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.3;
}
.roll > span {
  display: inline-block;
  text-shadow: 0 1.3em 0 currentColor;
  transition: transform .6s var(--ease-cm);
}
:is(a, button):is(:hover, :focus-visible) .roll > span { transform: translateY(-1.3em); }

/* Arrow swap: the arrow leaves up-right, its twin arrives from down-left. */
.swap {
  position: relative;
  display: inline-grid;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: hidden;
}
.swap svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  transition: transform .65s var(--ease-cm);
}
.swap svg:last-child { transform: translate(-115%, 115%); }
:is(a, button):is(:hover, :focus-visible) .swap svg:first-child { transform: translate(115%, -115%); }
:is(a, button):is(:hover, :focus-visible) .swap svg:last-child { transform: none; }

/* Line icons draw themselves: every shape has pathLength="1". */
.draw svg > * { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.js .fact:not(.is-in) .draw svg > * { stroke-dashoffset: 1; }
.js .fact.is-in .draw svg > * { transition: stroke-dashoffset 1.6s var(--ease-cm) .25s; }
@media (hover: hover) {
  :is(.module, .role, .fact):hover .draw svg > * { animation: izo-draw 1.2s var(--ease-cm); }
}
@keyframes izo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

[data-magnetic] { transition: transform .6s var(--ease-out); }

/* -------------------------------------------------------- buttons, tags */

.btn {
  display: inline-flex;
  align-items: stretch;
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.btn-label { display: flex; align-items: center; padding: 15px 18px 14px; }
.btn-icon {
  display: grid;
  place-items: center;
  width: 48px;
  background: var(--accent);
  color: #fff;
  transition: width .6s var(--ease-cm);
}
.btn-icon .swap { width: 16px; height: 16px; }
.btn:hover .btn-icon { width: 58px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 6px 8px 5px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}

/* Film grain, shared by the hero, the drive card and the contact band. */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------- header */

/* Difference blending keeps the header legible over the dark hero and the
   white sections alike, with no scroll listener. White inverts the backdrop;
   black leaves it untouched, so black-on-white reads as a knockout. */
.site-header {
  position: fixed;
  top: var(--admin-bar-h);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 2vw, 26px) var(--gutter);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.brand {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid currentColor;
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand-mark {
  display: grid;
  place-items: center;
  padding: 6px 6px 5px;
  background: #fff;
  color: #000;
  font-weight: 500;
  transition: padding .5s var(--ease-cm);
}
.brand-name { padding: 6px 8px 5px; }
a.brand:hover .brand-mark { padding-inline: 12px; }

/* Section links in the header (wide screens). Inherit the header's difference
   blend, so they read on dark and light sections alike. */
.header-nav {
  display: none;
  align-items: center;
  gap: clamp(16px, 1.8vw, 28px);
  margin: 0 clamp(20px, 2.6vw, 40px) 0 auto;
}
.header-nav a {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
.header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease-cm);
}
.header-nav a:hover::after,
.header-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
@media (min-width: 1180px) {
  .header-nav { display: flex; }
}
.header-nav { transition: opacity .3s var(--ease); }
.is-menu-open .header-nav { opacity: 0; pointer-events: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.menu-toggle-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.menu-toggle-icon {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .3s var(--ease), transform .6s var(--ease-out);
}
.menu-toggle-icon span {
  position: absolute;
  left: 15px;
  right: 15px;
  height: 1.5px;
  background: currentColor;
  transition: transform .5s var(--ease-out), top .5s var(--ease-out), left .5s var(--ease-cm), right .5s var(--ease-cm), background-color .3s;
}
.menu-toggle-icon span:nth-child(1) { top: 19px; }
.menu-toggle-icon span:nth-child(2) { top: 26px; }
.menu-toggle:hover .menu-toggle-icon { background: #fff; }
.menu-toggle:hover .menu-toggle-icon span { background: #000; }
/* The bars breathe on hover: the top one draws in, the bottom one out. */
.menu-toggle:hover .menu-toggle-icon span:nth-child(1) { right: 19px; }
.menu-toggle:hover .menu-toggle-icon span:nth-child(2) { left: 19px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span { left: 15px; right: 15px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(1) { top: 22.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2) { top: 22.5px; transform: rotate(-45deg); }

/* ------------------------------------------------------------ menu */

.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(96px + var(--admin-bar-h)) 0 clamp(20px, 3.4vw, 44px);
  background: var(--ink);
  color: var(--on-ink);
  overflow-y: auto;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease-cm), visibility 0s linear .8s;
}
.menu.is-open {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path .8s var(--ease-cm);
}

.menu-list { border-top: 1px solid var(--line-ink); }
.menu-list li { border-bottom: 1px solid var(--line-ink); overflow: hidden; }
.menu-list a {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(6px, 1.1vw, 14px) 0;
}
.menu-num { font-family: var(--font-mono); font-size: 12px; color: var(--on-ink-muted); min-width: 4.5ch; }
.menu-label {
  display: inline-block;
  font-size: clamp(2rem, min(6vw, 7.4vh), 5.2rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.045em;
  transform: translateY(110%);
  transition: transform .9s var(--ease-cm), opacity .4s var(--ease), translate .6s var(--ease-cm);
}
.menu.is-open .menu-label {
  transform: none;
  transition-delay: calc(.2s + var(--i, 0) * .05s), 0s, 0s;
}
.menu-arrow {
  margin-left: auto;
  color: var(--accent-light);
  opacity: 0;
  translate: -16px 0;
  transition: opacity .4s var(--ease), translate .6s var(--ease-cm);
}
.menu-arrow .swap { width: clamp(24px, 3vw, 44px); height: clamp(24px, 3vw, 44px); }
@media (hover: hover) {
  .menu-list:hover .menu-label { opacity: .3; }
  .menu-list a:hover .menu-label { opacity: 1; translate: 14px 0; }
  .menu-list a:hover .menu-arrow { opacity: 1; translate: 0 0; }
}

.menu-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 24px clamp(32px, 6vw, 96px);
  margin-top: clamp(24px, 4vw, 48px);
}
.menu-foot > div { display: grid; gap: 4px; align-content: start; justify-items: start; }
.menu-foot .mono { color: rgba(235, 240, 237, .82); font-size: 14px; font-weight: 500; letter-spacing: .08em; margin-bottom: 8px; }
.menu-foot a, .menu-foot span:not(.mono) { font-size: 17px; font-weight: 600; }
.menu-foot a:hover { color: var(--accent-light); }

/* ------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  background: #11161C;
  color: #fff;
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; z-index: -1; will-change: transform; }
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 72% 18%, #4B5B70 0%, #2C3848 36%, #161C25 72%, #0E1217 100%);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-glow,
.hero-flare,
.hero-fog,
.hero-shade { position: absolute; pointer-events: none; }

.hero-glow { border-radius: 50%; mix-blend-mode: screen; }
.hero-glow--cool {
  width: 62vmax;
  height: 62vmax;
  right: -14vmax;
  top: -22vmax;
  background: radial-gradient(circle, rgba(178, 204, 236, .34), rgba(178, 204, 236, 0) 62%);
  animation: izo-drift-b 34s ease-in-out infinite alternate;
}
.hero-glow--blue {
  width: 42vmax;
  height: 42vmax;
  left: 36%;
  bottom: -15vmax;
  background: radial-gradient(circle, rgba(31, 94, 255, .36), rgba(31, 94, 255, 0) 64%);
  animation: izo-drift-a 28s ease-in-out infinite alternate;
}

/* Soft lens-flare rings, a nod to the headlight bokeh in the reference. */
.hero-flare {
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(3px);
  animation: izo-flare 9s ease-in-out infinite alternate;
}
.hero-flare--a {
  width: 7vmax;
  height: 7vmax;
  left: 16%;
  top: 44%;
  background: radial-gradient(circle, rgba(150, 175, 255, .08) 0%, rgba(150, 175, 255, .06) 40%, rgba(150, 175, 255, .16) 58%, rgba(170, 140, 255, .08) 66%, transparent 72%);
}
.hero-flare--b {
  width: 11vmax;
  height: 11vmax;
  left: 26%;
  top: 40%;
  background: radial-gradient(circle, rgba(110, 155, 255, .12) 0%, rgba(110, 155, 255, .18) 45%, rgba(160, 120, 255, .10) 62%, transparent 70%);
  animation-delay: -4s;
}

.hero-fog {
  inset: -20%;
  background:
    radial-gradient(ellipse 50% 32% at 30% 62%, rgba(206, 218, 232, .13), transparent 70%),
    radial-gradient(ellipse 45% 28% at 76% 48%, rgba(206, 218, 232, .10), transparent 70%);
  filter: blur(24px);
  animation: izo-fog 46s ease-in-out infinite alternate;
}

.hero-shade {
  inset: 0;
  background:
    linear-gradient(to top, rgba(9, 11, 14, .86) 0%, rgba(9, 11, 14, .35) 38%, rgba(9, 11, 14, 0) 62%),
    linear-gradient(to bottom, rgba(9, 11, 14, .45), rgba(9, 11, 14, 0) 22%);
}

@keyframes izo-drift-a { to { transform: translate3d(-12vw, -6vh, 0) scale(1.1); } }
@keyframes izo-drift-b { to { transform: translate3d(-8vw, 8vh, 0) scale(.92); } }
@keyframes izo-fog     { to { transform: translate3d(6%, -3%, 0) scale(1.06); } }
@keyframes izo-flare   { from { opacity: .55; } to { opacity: 1; transform: translateX(1.5vw); } }
@keyframes izo-spin    { to { transform: rotate(1turn); } }

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px 48px;
  padding-top: 140px;
  padding-bottom: clamp(26px, 3.4vw, 48px);
  will-change: transform, opacity;
}

.hero-kicker { color: rgba(255, 255, 255, .74); margin-bottom: clamp(14px, 1.6vw, 24px); }

.hero-title {
  font-size: clamp(2.9rem, 7.6vw, 8.4rem);
  font-weight: 700;
  line-height: .93;
  letter-spacing: -.044em;
}
.hero-title .line {
  display: block;
  overflow: hidden;
  /* Room for descenders inside the clipping box. */
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.hero-title .line > span { display: inline-block; }

.hero-side {
  display: grid;
  justify-items: end;
  gap: 22px;
  text-align: right;
}
.hero-counter { display: grid; justify-items: end; gap: 6px; }
.hero-counter .mono { color: rgba(255, 255, 255, .72); }
.hero-counter-num {
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
}

/* Rotating "scroll to explore" badge. */
.scroll-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin-bottom: 8px;
  border-radius: 50%;
  color: #fff;
}
.scroll-badge::before {
  content: "";
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .32);
  transition: background-color .45s var(--ease), border-color .45s var(--ease), inset .6s var(--ease-cm);
}
.scroll-badge:hover::before { inset: 22%; background: var(--accent); border-color: var(--accent); }
.scroll-badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: izo-spin 24s linear infinite;
}
.scroll-badge-ring text {
  font-family: var(--font-mono);
  font-size: 8.4px;
  letter-spacing: .4px;
  fill: rgba(255, 255, 255, .82);
}
.scroll-badge-arrow {
  position: relative;
  width: 20px;
  height: 20px;
  transition: transform .6s var(--ease-cm);
}
.scroll-badge:hover .scroll-badge-arrow { transform: translateY(3px); }

/* Load sequence; only when JS is running, so the hero never starts hidden. */
.js .hero-title .line > span {
  transform: translateY(112%);
  transition: transform 1.2s var(--ease-cm);
  transition-delay: calc(180ms + var(--i, 0) * 100ms);
}
.js .hero-fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .hero.is-ready .hero-title .line > span,
.js .hero.is-ready .hero-fade { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-side, .hero-counter { justify-items: start; text-align: left; }
  .scroll-badge { display: none; }
}

/* --------------------------------------------------------- sections */

.section { position: relative; padding-block: var(--section-pad); }
.section--paper { background: var(--paper); }
.section--sage  { background: var(--sage); }
.section--ink   { background: var(--ink); color: var(--on-ink); }
.section--ink .label-name { background: var(--on-ink); color: var(--ink); }

/* Space between a section's statement and its content. */
.vision-grid,
.roles,
.values { margin-top: clamp(64px, 9vw, 140px); }

/* ------------------------------------------------------------ vision */

.vision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: stretch;
}

.drive-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: clamp(380px, 40vw, 600px);
  padding: clamp(24px, 3vw, 44px);
  border-radius: var(--radius);
  background: #0F141B;
  color: #fff;
  overflow: hidden;
}
.drive-bg {
  position: absolute;
  inset: -12% 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 18% 14%, rgba(31, 94, 255, .6), transparent 62%),
    radial-gradient(85% 70% at 92% 96%, rgba(110, 155, 255, .34), transparent 60%),
    linear-gradient(160deg, #18202D, #0B0F15);
  will-change: transform;
}
.drive-card .mono { color: rgba(255, 255, 255, .72); }
.drive-text {
  max-width: 20ch;
  font-size: clamp(1.7rem, 2.9vw, 2.8rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.035em;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  border-top: 1px solid var(--line);
}
.fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  align-content: start;
  padding: clamp(20px, 2.6vw, 36px) clamp(12px, 1.6vw, 24px) clamp(20px, 2.6vw, 36px) 0;
  border-bottom: 1px solid var(--line);
}
.fact:nth-child(odd) { border-right: 1px solid var(--line); }
.fact:nth-child(even) { padding-left: clamp(16px, 2vw, 28px); }
.fact-icon { grid-row: span 2; width: 26px; height: 26px; margin-top: 4px; color: var(--accent); }
.fact-icon svg { width: 100%; height: 100%; }
.fact-num {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.fact-label { color: var(--muted); }

.vision-foot {
  display: grid;
  justify-items: start;
  gap: 30px;
  width: min(100%, 660px);
  margin: clamp(48px, 6vw, 88px) 0 0 auto;
}
.vision-foot p {
  font-size: clamp(1.1rem, 1.45vw, 1.4rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.015em;
}

@media (max-width: 900px) {
  .vision-grid { grid-template-columns: 1fr; }
  .drive-card { min-height: 360px; }
}
@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; }
  .fact:nth-child(odd) { border-right: 0; }
  .fact:nth-child(even) { padding-left: 0; }
}

/* -------------------------------------------------------- agentic os */

/* The section opens on its label and the screenshot; the intro statement sits
   beside the principles underneath. */
/* Grows from 90% to full size as it scrolls in; site.js sets --p (0 to 1). */
.os-shot {
  margin-top: clamp(28px, 3.5vw, 56px);
  transform: scale(calc(.9 + .1 * var(--p, 1)));
  transform-origin: 50% 0;
  will-change: transform;
}
.os-window {
  border-radius: 14px;
  background: #01080A;
  overflow: hidden;
  box-shadow: 0 60px 120px -60px rgba(1, 8, 10, .75), 0 0 0 1px rgba(21, 21, 21, .1);
}
.os-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #031619;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: rgba(214, 238, 238, .5);
}
.os-bar .mono { font-size: 11px; }
.os-dots { display: flex; gap: 6px; }
.os-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.os-window img { width: 100%; height: auto; }
.os-shot figcaption { margin-top: 14px; color: var(--muted); }

.os-details {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
  margin-top: clamp(56px, 7vw, 110px);
}
.os-statement {
  font-size: clamp(1.75rem, 3.1vw, 3.1rem);
  text-indent: 0;
}
.os-rules { display: grid; gap: 26px; }

.principles { border-top: 1px solid var(--line); }
.principles li {
  display: grid;
  grid-template-columns: 3.4ch minmax(0, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.principles li > .mono { padding-top: 4px; color: var(--muted); }
.principles strong { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; }
.principles span:not(.mono) { display: block; margin-top: 2px; color: var(--muted); font-size: .96rem; line-height: 1.45; }

.os-rules .tag { background: rgba(255, 255, 255, .55); }

@media (max-width: 900px) {
  .os-details { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- how i work */

.modules-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin: clamp(72px, 9vw, 140px) 0 clamp(24px, 3vw, 40px);
}
.modules-head .mono { color: var(--on-ink-muted); max-width: 40ch; }

.modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.module {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(290px, 25vw, 350px);
  padding: clamp(20px, 2vw, 28px);
  border-radius: var(--radius);
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(235, 240, 237, .06);
  overflow: hidden;
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), translate .7s var(--ease-cm);
}
@media (hover: hover) {
  .module:hover {
    background: var(--ink-3);
    box-shadow: inset 0 0 0 1px rgba(110, 155, 255, .4);
    translate: 0 -6px;
  }
}
.module-top { display: flex; align-items: flex-start; justify-content: space-between; }
.module-icon { width: 32px; height: 32px; color: var(--accent-light); }
.module-icon svg { width: 100%; height: 100%; }
.module-num { color: var(--on-ink-muted); }
.module-body { margin-top: auto; padding-top: 40px; }
.module-title {
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.module-sub { margin-top: 8px; color: var(--on-ink-muted); font-weight: 600; }

/* The detail panel wipes up over the card, as the reference's machine cards do. */
.module-more {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) 84px;
  background: var(--accent);
  color: #fff;
  overflow-y: auto;
  visibility: hidden;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .7s var(--ease-cm), visibility 0s linear .7s;
}
.module-more .mono { color: rgba(255, 255, 255, .78); }
.module-more p { font-size: 1.05rem; font-weight: 500; line-height: 1.45; }
.module.is-open .module-more {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path .7s var(--ease-cm);
}

.module-toggle {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  background: rgba(235, 240, 237, .08);
  color: var(--on-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.module-toggle-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--on-ink);
  color: var(--ink);
  transition: transform .6s var(--ease-cm), background-color .3s, color .3s;
}
.module-toggle-icon svg { width: 10px; height: 10px; }
.module-toggle:hover { background: var(--accent); color: #fff; }
.module-toggle:hover .module-toggle-icon { transform: rotate(90deg); }
.module.is-open .module-toggle { background: #fff; color: var(--ink); }
.module.is-open .module-toggle-icon { background: var(--ink); color: #fff; transform: rotate(45deg); }

@media (max-width: 1000px) {
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .modules { grid-template-columns: 1fr; }
  .module { min-height: 260px; }
}

/* -------------------------------------------------------- experience */

.roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.role {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(380px, 34vw, 520px);
  padding: clamp(24px, 3vw, 44px);
  border-radius: var(--radius);
  background: var(--sage);
  overflow: hidden;
  transition: background-color .8s var(--ease-cm), color .8s var(--ease-cm), translate .8s var(--ease-cm);
}
.role-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.role-icon { width: 36px; height: 36px; }
.role-icon svg { width: 100%; height: 100%; }
.role-year {
  padding: 5px 7px 4px;
  border-radius: 3px;
  background: var(--paper);
  transition: background-color .8s var(--ease-cm);
}
.role-body { display: grid; gap: 14px; margin-top: auto; padding-top: 56px; }
.role-org { color: var(--muted); transition: color .8s var(--ease-cm); }
.role-title {
  font-size: clamp(2.1rem, 3.9vw, 3.7rem);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.05em;
  transition: translate .8s var(--ease-cm);
}
.role-desc { max-width: 54ch; font-size: 1.05rem; line-height: 1.48; }
.role .tags { margin-top: 4px; }
.role .tag {
  background: rgba(255, 255, 255, .6);
  transition: background-color .8s var(--ease-cm), color .8s var(--ease-cm), box-shadow .8s var(--ease-cm);
}

/* Hover floods the card with the accent, the way the reference's service cards
   fill with orange: same 0.8s curve, title lifting as the colour arrives. Text
   turns white because ink on this blue is too low in contrast to read. */
@media (hover: hover) {
  .role:hover { background: var(--accent); color: #fff; translate: 0 -6px; }
  .role:hover .role-org { color: rgba(255, 255, 255, .8); }
  .role:hover .role-year { background: rgba(255, 255, 255, .18); }
  .role:hover .role-title { translate: 0 -6px; }
  .role:hover .tag { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
}

.history { margin-top: clamp(88px, 10vw, 160px); }
.history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
}
.history-head h3 {
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.history-head .mono { color: var(--muted); }

.history-list { border-top: 1px solid var(--ink); }
.history-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 3.2fr) minmax(0, 2.8fr);
  align-items: baseline;
  gap: 8px 32px;
  padding: clamp(16px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--line);
}
.history-row > * { transition: opacity .45s var(--ease), translate .6s var(--ease-cm); }
.history-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease-cm);
}
.history-year { color: var(--muted); }
.history-role {
  font-size: clamp(1.4rem, 2.7vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
}
.history-row.is-featured .history-role::after {
  content: "";
  display: inline-block;
  width: .26em;
  height: .26em;
  margin-left: .22em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: .5em;
}
.history-org { color: var(--muted); line-height: 1.4; }

/* Hovering one row dims the rest, as the reference's partner list does. */
@media (hover: hover) {
  .history-list:hover .history-row > * { opacity: .3; }
  .history-list .history-row:hover > * { opacity: 1; }
  .history-row:hover .history-role { translate: 12px 0; }
  .history-row:hover::after { transform: scaleX(1); }
}

@media (max-width: 800px) {
  .roles { grid-template-columns: 1fr; }
  .role { min-height: 0; }
  .history-row { grid-template-columns: 1fr; gap: 6px; }
}

/* -------------------------------------------------------------- work */

.work-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(64px, 9vw, 140px) 0 clamp(14px, 1.6vw, 22px);
}
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter {
  padding: 9px 13px 8px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.filter:hover { background: var(--accent); color: #fff; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.work-count { color: var(--muted); }

/* One wide project runs the full width with its cover beside the text; the
   regular cards fill three columns under it. */
.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--gap);
}
.project {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--paper);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.project--wide { grid-column: 1 / -1; flex-direction: row; gap: 10px; }
.project.is-filtered { opacity: 0; transform: scale(.98); }
.project.is-gone { display: none; }

.project-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sage);
}
.project--wide .project-cover { flex: 1.35 1 0; min-height: clamp(320px, 32vw, 480px); aspect-ratio: auto; }
.project--wide .project-body { flex: 1 1 0; align-content: center; padding: clamp(18px, 3vw, 48px); }

/* Oversized so the parallax drift never shows an edge. */
.project-media {
  position: absolute;
  inset: -8% 0;
  display: block;
  will-change: transform;
}
.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out);
}
.project:hover .project-media img { transform: scale(1.08); }

/* The cover opens from a smaller window while the photo settles. */
.js .project[data-reveal] .project-cover {
  clip-path: inset(9% 7% 9% 7% round 6px);
  transition: clip-path 1.3s var(--ease-cm) .1s;
}
.js .project[data-reveal] .project-media img { transform: scale(1.22); }
.js .project[data-reveal].is-in .project-cover { clip-path: inset(0 round 6px); }
.js .project[data-reveal].is-in .project-media img { transform: scale(1.02); }
.js .project[data-reveal].is-in:hover .project-media img { transform: scale(1.08); }

/* Bottom corner: the generated SVG covers carry their own labels up top. */
.project-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  padding: 5px 7px 4px;
  border-radius: 3px;
  background: var(--paper);
  font-size: 11px;
}

.project-body { display: grid; gap: 10px; padding: 18px 10px 12px; }
.project-meta { color: var(--muted); }
.project-title {
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
}
.project--wide .project-title { font-size: clamp(1.6rem, 2.7vw, 2.5rem); }
.project-desc { font-size: .98rem; line-height: 1.48; color: #2C302E; }
.project .tags { margin-top: 2px; }
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--accent-ink);
}
.project-link .swap { width: 13px; height: 13px; }

/* Cover slideshow: slides crossfade; the active dot stretches into a bar that
   fills over one slide's time (site.js sets --slide-ms and .is-playing). */
.project-cover--slides .project-media img.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease-out);
}
.project-cover--slides .project-media img.slide.is-active { opacity: 1; }
/* Title cards (any image named "*-title.*") are shown whole on black rather
   than cropped, and sit above the badge and slide dots. */
.project-media img[src*="-title."] {
  object-fit: contain;
  padding: 4% 0 14%;
  background: #000;
}

.slides-ui {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(21, 21, 21, .58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.slides-dot {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 28px;
  padding: 0 3px;
}
.slides-dot > span {
  position: relative;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  overflow: hidden;
  transition: width .6s var(--ease-cm), background-color .3s var(--ease);
}
button.slides-dot:hover > span { background: #fff; }
.slides-dot.is-active > span { width: 26px; background: rgba(255, 255, 255, .3); }
.slides-dot.is-active > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  animation: izo-slide-progress var(--slide-ms, 4500ms) linear forwards;
  animation-play-state: paused;
}
.is-playing .slides-dot.is-active > span::after { animation-play-state: running; }
@keyframes izo-slide-progress { to { transform: scaleX(1); } }

.slides-pause {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  border-radius: 50%;
  color: #fff;
  transition: background-color .3s var(--ease);
}
.slides-pause:hover { background: var(--accent); }
.slides-pause svg { width: 10px; height: 10px; }
.slides-pause .icon-play,
.slides-pause[aria-pressed="true"] .icon-pause { display: none; }
.slides-pause[aria-pressed="true"] .icon-play { display: block; }

@media (max-width: 1000px) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .project--wide { flex-direction: column; gap: 0; }
  .project--wide .project-cover { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
  .project--wide .project-body { padding: 18px 10px 12px; }
}
@media (max-width: 640px) {
  .projects { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- why */

.section--why { padding-bottom: 0; }

.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
}
.value {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}
.value::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease-cm);
}
.value:hover::before { transform: scaleX(1); }
.value .label-num { justify-self: start; }
.value h3 {
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.value p { max-width: 40ch; color: var(--muted); line-height: 1.5; }

@media (max-width: 800px) {
  .values { grid-template-columns: 1fr; }
}

.marquee { margin-top: clamp(88px, 11vw, 170px); }
.marquee-viewport {
  overflow: hidden;
  border-top: 1px solid var(--ink);
  padding-block: clamp(18px, 2.2vw, 30px);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: izo-marquee 60s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; }
.marquee-item {
  display: flex;
  align-items: center;
  font-size: clamp(2rem, 4.4vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.marquee-item:hover { color: var(--accent); }
.marquee-item::after {
  content: "";
  width: .2em;
  height: .2em;
  margin-inline: .5em;
  border-radius: 50%;
  background: var(--accent);
}
@keyframes izo-marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------ contact band */

.next {
  position: relative;
  isolation: isolate;
  padding-block: clamp(72px, 9vw, 140px) clamp(40px, 5vw, 64px);
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}
.next-bg {
  position: absolute;
  inset: -25% -10%;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 86% 88%, rgba(31, 94, 255, .42), transparent 66%),
    radial-gradient(30% 40% at 8% 4%, rgba(110, 155, 255, .12), transparent 70%);
  will-change: transform;
}
.next .grain { opacity: .08; }

.next-top { display: flex; align-items: center; gap: 12px; color: var(--on-ink-muted); }

.next-link {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 56px);
  border-bottom: 1px solid var(--line-ink);
}
.next-title {
  max-width: 12ch;
  font-size: clamp(3rem, 8.6vw, 9.2rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.047em;
}
.next-title em { font-style: normal; color: var(--accent-light); }
.next-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(64px, 9vw, 136px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  transition: transform .6s var(--ease-out), background-color .45s var(--ease), color .45s var(--ease);
}
.next-arrow .swap { width: 36%; height: 36%; }
.next-link:hover .next-arrow { background: #fff; color: var(--ink); }

.next-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px 48px;
  padding-top: clamp(24px, 3vw, 40px);
}
.next-foot p { max-width: 50ch; color: var(--on-ink-muted); font-size: 1.05rem; line-height: 1.5; }

/* Contact tiles: isometric slabs that lift off the page and take on the
   brand's colour on hover. After the 3D social tiles (no. 19) in Prismic's
   CSS hover effects roundup, rebuilt in the site's type and palette. The
   left face (::before) is the darker side, the bottom face (::after) the
   lighter one; the padding leaves room for the rotated corners. */
.social-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  padding: 40px 18px 52px 34px;
}
/* The link itself holds the slanted footprint and never moves, so the hit area
   stays under the cursor; only the face inside lifts on hover. (When the whole
   link lifted, a cursor near its lower edge fell off it, the tile dropped back,
   and the click could land on nothing.) */
.tile {
  --face: var(--on-ink);
  --side: #A7AEAA;
  --base: #C9CFCB;
  position: relative;
  display: block;
  width: 172px;
  height: 60px;
  transform: rotate(-30deg) skew(25deg);
}
.tile-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: var(--face);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: -18px 18px 12px rgba(0, 0, 0, .45);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background-color .45s var(--ease), color .45s var(--ease);
}
.tile-face::before,
.tile-face::after {
  content: "";
  position: absolute;
  transition: background-color .45s var(--ease);
}
.tile-face::before {
  top: 7px;
  left: -14px;
  width: 14px;
  height: 100%;
  background: var(--side);
  transform: skewY(-45deg);
}
.tile-face::after {
  bottom: -14px;
  left: -7px;
  width: 100%;
  height: 14px;
  background: var(--base);
  transform: skewX(-45deg);
}
.tile svg { flex: none; width: 24px; height: 24px; }

.tile--email    { --brand: #1F5EFF; --brand-side: #1747D1; --brand-base: #4D7FFF; }
.tile--github   { --brand: #6E40C9; --brand-side: #5A32A8; --brand-base: #8A63D9; }
.tile--linkedin { --brand: #0A66C2; --brand-side: #084E96; --brand-base: #3B86D1; }

.tile:is(:hover, :focus-visible) .tile-face {
  background: var(--brand);
  color: #fff;
  transform: translate(15px, -11px);
  box-shadow: -44px 44px 40px rgba(0, 0, 0, .55);
}
.tile:is(:hover, :focus-visible) .tile-face::before { background: var(--brand-side); }
.tile:is(:hover, :focus-visible) .tile-face::after  { background: var(--brand-base); }

@media (max-width: 1100px) {
  .next-foot { grid-template-columns: 1fr; }
  .social-tiles { justify-content: flex-start; }
}
/* Too narrow for the slant: flat tiles that still fill with the brand colour. */
@media (max-width: 720px) {
  .social-tiles { gap: 8px; padding: 0; }
  .tile { width: auto; height: 50px; transform: none; }
  .tile-face { position: relative; height: 100%; box-shadow: none; }
  .tile-face::before, .tile-face::after { display: none; }
  .tile:is(:hover, :focus-visible) .tile-face { transform: none; box-shadow: none; }
}

/* ------------------------------------------------------------- footer */

.site-footer {
  padding-top: clamp(56px, 7vw, 100px);
  background: var(--paper);
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 36px 32px;
}
.brand--static { color: var(--ink); }
.brand--static .brand-mark { background: var(--ink); color: var(--paper); }
.footer-tagline {
  max-width: 22ch;
  margin-top: 20px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.footer-col { display: grid; gap: 6px; align-content: start; justify-items: start; }
.footer-col .mono {
  margin-bottom: 10px;
  color: #3E4340;              /* 10:1 on white; the 12px muted grey was hard to read */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
}
.footer-col a, .footer-col > span:not(.mono) { font-size: 18px; font-weight: 600; line-height: 1.35; }
.footer-col a { transition: color .3s var(--ease); }
.footer-col a:hover { color: var(--accent-ink); }

.footer-word {
  margin-top: clamp(56px, 8vw, 120px);
  /* "Izosimov" set at this weight and tracking is ~3.6em wide: fill the row. */
  font-size: min(calc((100vw - 2 * var(--gutter)) / 3.7), 26rem);
  font-weight: 700;
  line-height: .74;
  letter-spacing: -.065em;
  white-space: nowrap;
  transform: translateX(-.04em);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(16px, 2vw, 28px);
  padding: 18px 0 26px;
  border-top: 1px solid var(--line);
  color: #4A4F4C;
  font-size: 13px;
}
.footer-hint kbd {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (hover: none) {
  .footer-hint { display: none; }
}

/* ------------------------------------------------------ scroll reveals */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-cm);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Filtering re-uses opacity/transform on projects. Once someone filters, swap
   the slow reveal timing for a quick one, and let is-filtered beat is-in. */
.js .projects.is-filtering .project[data-reveal] { transition: opacity .26s var(--ease), transform .26s var(--ease); }
.js .project[data-reveal].is-in.is-filtered { opacity: 0; transform: scale(.98); }

/* ----------------------------------------------- section transition */

/* An ink panel wipes up over the page, shows the destination's label, the
   page jumps behind it, and it wipes off upwards. About 0.8s in all. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--on-ink);
  pointer-events: none;
  visibility: hidden;
  clip-path: inset(100% 0 0 0);
}
.curtain.is-covering {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path .38s var(--ease-cm);
}
.curtain.is-revealing {
  visibility: visible;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .46s var(--ease-cm);
}
.curtain-inner { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.curtain-num { color: var(--on-ink-muted); }
.curtain-name {
  font-size: clamp(2.4rem, 6vw, 5.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  transform: translateY(40%);
  opacity: 0;
  transition: transform .45s var(--ease-cm), opacity .3s var(--ease);
}
.curtain.is-covering .curtain-name { transform: none; opacity: 1; transition-delay: .12s; }
.curtain.is-revealing .curtain-name { transform: translateY(-40%); opacity: 0; }

/* CookieYes opens bottom-left, right over the hero headline. On wide screens
   move it to the empty top-right of the hero, under the menu button. */
@media (min-width: 900px) {
  .cky-consent-container.cky-box-bottom-left,
  .cky-consent-container.cky-box-bottom-right {
    top: calc(96px + var(--admin-bar-h)) !important;
    bottom: auto !important;
    left: auto !important;
    right: var(--gutter) !important;
  }
}

/* On phones and tablets CookieYes stacks a tall card (about 380px with three
   full-width buttons) over the headline. Make it a slim bar along the bottom
   edge instead: smaller type, the three buttons in one row with Reject and
   Accept equally weighted. Its "Powered by" line stays, just tighter. */
@media (max-width: 899px) {
  body .cky-consent-container.cky-box-bottom-left,
  body .cky-consent-container.cky-box-bottom-right {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
  }
  body .cky-consent-container .cky-consent-bar { border-radius: 12px 12px 0 0 !important; }
  body .cky-consent-container .cky-consent-bar .cky-notice-content-wrapper { padding: 14px 16px 6px !important; }
  body .cky-consent-container .cky-notice .cky-title,
  body .cky-consent-container .cky-notice-des,
  body .cky-consent-container .cky-notice-btn-wrapper { padding: 0 !important; }
  body .cky-consent-container .cky-notice .cky-title { font-size: 15px !important; line-height: 20px !important; margin: 0 0 4px !important; }
  body .cky-consent-container .cky-notice-des,
  body .cky-consent-container .cky-notice-des * { font-size: 12.5px !important; line-height: 1.45 !important; max-height: none !important; overflow: visible !important; }
  body .cky-consent-container .cky-notice-btn-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
  }
  body .cky-consent-container .cky-notice-btn-wrapper .cky-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    font-size: 13px !important;
    order: 0 !important;
  }
  body .cky-consent-container [data-cky-tag="powered-by"] > div { margin-top: 2px !important; }
  body .cky-consent-container .cky-consent-bar > div[style*="padding-bottom"] { padding-bottom: 6px !important; }
}

/* ------------------------------------------- easter egg: debug console */

.console {
  position: fixed;
  top: var(--admin-bar-h);
  left: 0;
  right: 0;
  z-index: 90;
  background: rgba(13, 14, 15, .95);
  color: #D8DEDA;
  font-family: var(--font-mono);
  font-size: 13px;
  border-bottom: 1px solid var(--accent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  visibility: hidden;
  transform: translateY(-105%);
  transition: transform .35s var(--ease-out), visibility 0s linear .35s;
}
.console.is-open {
  visibility: visible;
  transform: none;
  transition: transform .35s var(--ease-out);
}
.console-log {
  max-height: 34vh;
  overflow: auto;
  padding: 14px var(--gutter) 6px;
  white-space: pre-wrap;
  line-height: 1.55;
}
.console-log b { color: var(--accent-light); font-weight: 500; }
.console-log i { color: #9FD3CF; font-style: normal; }
.console-row { display: flex; align-items: center; gap: 10px; padding: 8px var(--gutter) 12px; }
.console-row span { color: var(--accent-light); }
.console-row input {
  flex: 1;
  padding: 4px 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: inherit;
  font: inherit;
}

.fps {
  position: fixed;
  right: var(--gutter);
  bottom: 16px;
  z-index: 91;
  display: none;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--accent-light);
  font-family: var(--font-mono);
  font-size: 12px;
}
.izo.is-fps .fps { display: block; }

/* "show wireframe": outline every box, drop the fills and imagery. */
.izo.is-wireframe :is(main, .site-footer) * { outline: 1px solid rgba(31, 94, 255, .55); outline-offset: -1px; }
.izo.is-wireframe :is(.section, .next, .site-footer, .project, .module, .role, .drive-card, .os-window, .hero) {
  background: transparent !important;
}
.izo.is-wireframe :is(.hero-media, .drive-bg, .next-bg, .project-media, .os-window img) { opacity: .12; }
.izo.is-wireframe :is(.hero, .section--ink, .next, .drive-card) { color: var(--ink); }

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

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .marquee-track { width: auto; }
  .marquee-group { flex-wrap: wrap; row-gap: 12px; padding-inline: var(--gutter); }
  .marquee-group[aria-hidden="true"] { display: none; }
}