/* Navy and ice do the work; pink is reserved for the things you can act on. */
:root {
  --navy: #0b1a33;
  --navy-deep: #081428;
  --ice: #eef3f7;
  --ice-deep: #e2e9ef;
  --pink: #f2398f;
  --ink: #0b1a33;
  --ink-soft: #4b5a70;
  --line: #c9d3dc;
  --mist: #a9b8cc;
  --charcoal: #16181b;
  --fg: var(--ink);
  --fg-soft: #3f4f66;
  --rule: rgba(11,26,51,0.16);

  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-plate: "Michroma", "Eurostile", sans-serif;
  --max: 1240px;
  --gutter: clamp(20px, 4vw, 56px);

  /* fine film grain; fixed seed so it never shimmers between page loads */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("fonts/michroma.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy); }
body { margin: 0; background: var(--ice); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1; text-wrap: balance; }
p { margin: 0; }
.wrap { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.skip { position: absolute; left: -9999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; z-index: 20; }
.skip:focus { left: 8px; }

/* light sections: grain plus faint flutes, so the paper echoes the glass */
.paper { position: relative; isolation: isolate; }
.paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain), repeating-linear-gradient(90deg, rgba(11,26,51,0.035) 0 1px, transparent 1px 34px);
  opacity: 0.55; mix-blend-mode: multiply;
}

/* ---------- glass panels ---------- */
.glass { position: relative; isolation: isolate; overflow: hidden; --fg: #fff; --fg-soft: #c9d7e6; --rule: rgba(255,255,255,0.2); color: var(--fg); background: var(--navy); }
.glass.frost { --fg: var(--ink); --fg-soft: #3f4f66; --rule: rgba(11,26,51,0.16); background: var(--ice); }
.glass.charcoal { --fg-soft: #b9bfc7; --rule: rgba(255,255,255,0.16); background: var(--charcoal); }
/* charcoal carries photos and long text, so the brightest metal is knocked back */
.glass.charcoal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(16,18,21,0.55), rgba(16,18,21,0.3)); pointer-events: none; }
.glass.frost::after { opacity: 0.5; mix-blend-mode: multiply; }
.glass canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.glass::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: 0.35; mix-blend-mode: overlay; pointer-events: none; }

/* ---------- header ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; color: #fff; }
.site-header.solid { position: relative; background-color: var(--navy); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 34px); isolation: isolate; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 20px; }
.brand span { font-family: var(--font-plate); font-size: 0.75rem; letter-spacing: 0.22em; white-space: nowrap; }
.site-nav { display: flex; gap: clamp(14px, 2.6vw, 30px); font-size: 0.9rem; }
.site-nav a { text-decoration: none; opacity: 0.8; }
.site-nav a:hover { opacity: 1; }
@media (max-width: 720px) { .site-nav .wide { display: none; } }
@media (max-width: 420px) { .brand span { font-size: 0.6875rem; letter-spacing: 0.14em; } }

/* ---------- hero ---------- */
.hero { min-height: min(92vh, 860px); display: flex; align-items: flex-end; }
.hero .wrap { width: 100%; padding-top: 140px; padding-bottom: clamp(48px, 7vw, 88px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: end; }
.hero h1 { font-size: clamp(2.9rem, 7.2vw, 6.4rem); font-stretch: 76%; letter-spacing: -0.025em; line-height: 0.93; text-shadow: 0 2px 30px rgba(8,20,40,0.35); }
.hero-side { display: flex; flex-direction: column; gap: 24px; padding-bottom: 6px; }
.hero-side p { font-size: 1.125rem; line-height: 1.5; color: #dbe6f2; max-width: 36ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.9375rem; transition: transform 0.15s, box-shadow 0.15s; }
.btn-pink { background: var(--pink); color: #fff; box-shadow: 0 10px 30px -8px rgba(242,57,143,0.7); }
.btn-pink:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -8px rgba(242,57,143,0.85); }
.btn-arrow::after { content: "→"; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero { min-height: 0; } }

/* ---------- company ---------- */
.company { padding: clamp(80px, 11vw, 150px) 0; }
.company > .wrap + .wrap { display: block; }
.company .wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 96px); }
.company h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-stretch: 76%; letter-spacing: -0.02em; }
.company h2 em { font-style: normal; color: var(--pink); }
.company-body { display: flex; flex-direction: column; gap: 20px; }
.company-body p { color: var(--fg-soft); max-width: 58ch; }
.company-body p.lead { color: var(--fg); font-size: 1.25rem; line-height: 1.45; }
.facts { margin: 12px 0 0; display: grid; grid-template-columns: max-content 1fr; border-top: 2px solid var(--fg); font-family: var(--font-mono); font-size: 0.8125rem; }
.facts dt, .facts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--fg-soft); padding-right: 32px; }
@media (max-width: 860px) { .company .wrap { grid-template-columns: 1fr; } }

/* ---------- products index ---------- */
.products { padding-top: clamp(64px, 8vw, 104px); }
.products h2 { font-size: 1rem; font-weight: 600; margin-bottom: 18px; }
.index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.index a {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto; gap: 16px 32px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
}
.index .name { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-stretch: 76%; font-weight: 650; letter-spacing: -0.015em; line-height: 1; }
.index .what { color: var(--fg-soft); }
.index .where { font-family: var(--font-mono); font-size: 0.8125rem; white-space: nowrap; }
.index .where::after { content: " ↗"; color: var(--pink); }
.index a:hover .name { color: var(--pink); }
.products .note { margin-top: 16px; color: var(--fg-soft); font-size: 0.9375rem; }
@media (max-width: 720px) { .index a { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- lab ---------- */
.lab { padding: clamp(80px, 11vw, 150px) 0; }
.lab-head { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.lab-head h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-stretch: 76%; letter-spacing: -0.02em; }
.lab-head p { color: var(--fg-soft); max-width: 52ch; }
.project { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px 40px; padding: 30px 0; border-top: 1px solid var(--rule); }
.project:last-child { border-bottom: 1px solid var(--rule); }
.status { font-family: var(--font-mono); font-size: 0.8125rem; display: flex; align-items: baseline; gap: 10px; padding-top: 6px; }
.status::before { content: ""; width: 9px; height: 9px; flex: none; border: 1.5px solid var(--fg); border-radius: 50%; transform: translateY(1px); }
.status.active::before { background: var(--pink); border-color: var(--pink); }
.project h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-stretch: 80%; letter-spacing: -0.01em; margin-bottom: 10px; }
.project p { color: var(--fg-soft); max-width: 62ch; }
.project .tech { margin-top: 12px; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg); }
.project-photos { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-top: 24px; align-items: start; }
.project-photos img { border-radius: 6px; width: 100%; object-fit: cover; }
.project-photos figure { margin: 0; }
.project-photos figcaption { margin-top: 8px; font-size: 0.8125rem; color: var(--fg-soft); }
@media (max-width: 720px) { .lab-head { grid-template-columns: 1fr; } .project { grid-template-columns: 1fr; } .project-photos { grid-template-columns: 1fr; } }

/* ---------- work with us ---------- */
.work { padding: clamp(96px, 12vw, 170px) 0 clamp(56px, 8vw, 96px); }
.work .wrap { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.work-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.work h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); font-stretch: 76%; letter-spacing: -0.025em; line-height: 0.95; text-shadow: 0 2px 30px rgba(8,20,40,0.35); }
.work-intro { display: flex; flex-direction: column; gap: 18px; color: #dbe6f2; }
.standing { margin: 0; display: grid; grid-template-columns: max-content 1fr; font-family: var(--font-mono); font-size: 0.8125rem; border-top: 1px solid rgba(255,255,255,0.4); }
.standing dt, .standing dd { margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
.standing dt { color: var(--mist); padding-right: 28px; }
.topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,0.4); }
.topics li { padding: 20px 24px 22px 0; }
.topics li + li { padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.18); }
.topics h3 { font-size: 1.1875rem; font-weight: 600; margin-bottom: 8px; line-height: 1.2; }
.topics p { color: #c9d7e6; font-size: 0.9375rem; }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding-top: 8px; }
.mail a.big { font-size: clamp(1.9rem, 5.6vw, 4.6rem); font-stretch: 76%; font-weight: 650; letter-spacing: -0.02em; text-decoration: none; line-height: 1; overflow-wrap: anywhere; }
.mail a.big:hover { color: #ffd2e6; }
@media (max-width: 960px) {
  .work-top { grid-template-columns: 1fr; }
  .topics { grid-template-columns: 1fr 1fr; }
  .topics li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) { .topics { grid-template-columns: 1fr; } .topics li, .topics li + li { padding-left: 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,0.18); } }

/* ---------- footer ---------- */
.site-footer { position: relative; isolation: isolate; background-color: var(--charcoal); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 34px); color: var(--mist); padding: 34px 0 42px; font-size: 0.8125rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.site-footer .fine { display: flex; flex-direction: column; gap: 4px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; }

/* ---------- legal + 404 ---------- */
.legal { padding: clamp(56px, 8vw, 104px) 0; }
.legal article { max-width: 68ch; display: flex; flex-direction: column; gap: 16px; }
.legal h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); font-stretch: 76%; letter-spacing: -0.025em; margin-bottom: 4px; }
.legal h2 { font-size: 1.25rem; font-weight: 600; margin-top: 22px; }
.legal p, .legal li { color: var(--fg-soft); }
.legal ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.legal .meta { font-family: var(--font-mono); font-size: 0.8125rem; }
.lost { min-height: 70vh; display: flex; align-items: flex-end; }
.lost .wrap { width: 100%; padding-top: 140px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.lost h1 { font-size: clamp(3rem, 8vw, 6rem); font-stretch: 75%; letter-spacing: -0.03em; }
.lost p { color: var(--fg-soft); max-width: 40ch; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* the work section carries dense text, so the glass is dimmed behind it */
.work::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8,20,40,0.2) 0%, rgba(8,20,40,0.62) 55%, rgba(8,20,40,0.5) 100%); pointer-events: none; }

/* grain as an overlay layer: painted directly, the noise lifts dark fills to grey */
.site-header.solid::after, .site-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: 0.3; mix-blend-mode: overlay; pointer-events: none; }

@media (max-width: 720px) {
  /* a veil between glass and text keeps paragraphs off the stripes on small screens */
  .glass.frost::before, .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .glass.frost::before { background: rgba(238,243,247,0.32); }
  .hero::before { background: linear-gradient(180deg, rgba(11,26,51,0.15), rgba(11,26,51,0.45)); }
  .glass.charcoal::before { background: rgba(16,18,21,0.4); }
  .work::before { background: rgba(8,20,40,0.5); }
  .glass::after { opacity: 0.2; }
  .glass.frost::after { opacity: 0.3; }
}