/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:      #ffffff;
  --ink:     #0a0a0a;
  --ink-70:  rgba(10,10,10,0.7);
  --ink-45:  rgba(10,10,10,0.45);
  --accent:  #ff5a1f;
  --on-accent: #170a04;
  --line:    #0a0a0a;
  --line-15: rgba(10,10,10,0.15);
  --focus:   #0a0a0a;

  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --nav-h: 64px;
}

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #0a0a0a;
    --ink:     #f2f0ea;
    --ink-70:  rgba(242,240,234,0.72);
    --ink-45:  rgba(242,240,234,0.45);
    --accent:  #ff7a42;
    --line:    #f2f0ea;
    --line-15: rgba(242,240,234,0.18);
    --focus:   #ff7a42;
  }
}
:root[data-theme="dark"] {
  --bg:      #0a0a0a;
  --ink:     #f2f0ea;
  --ink-70:  rgba(242,240,234,0.72);
  --ink-45:  rgba(242,240,234,0.45);
  --accent:  #ff7a42;
  --line:    #f2f0ea;
  --line-15: rgba(242,240,234,0.18);
  --focus:   #ff7a42;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1; letter-spacing: -0.01em; font-family: var(--mono); font-weight: 600; text-transform: uppercase; }
ul { list-style: none; padding: 0; }
::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.mono { font-family: var(--mono); }
.container { max-width: 1400px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 40px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.kicker {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-70);
  display: flex;
  align-items: baseline;
  gap: .5em;
}
.kicker .kicker-num { color: var(--accent); }

/* =============================================================
   4. Grid system (the signature device)
   ============================================================= */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-15);
  border-top: 1px solid var(--line-15);
  border-left: 1px solid var(--line-15);
}
.grid-12 > * {
  background: var(--bg);
  padding: clamp(20px, 3vw, 40px);
}
@media (min-width: 720px) { .grid-12 { grid-template-columns: repeat(12, 1fr); } }

.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 4; }
.col-span-6  { grid-column: span 4; }
.col-span-7  { grid-column: span 4; }
.col-span-8  { grid-column: span 4; }
.col-span-12 { grid-column: span 4; }
@media (min-width: 720px) {
  .col-span-4  { grid-column: span 4; }
  .col-span-5  { grid-column: span 5; }
  .col-span-6  { grid-column: span 6; }
  .col-span-7  { grid-column: span 7; }
  .col-span-8  { grid-column: span 8; }
  .col-span-12 { grid-column: span 12; }
}

/* =============================================================
   5. Header
   ============================================================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-mark {
  font-family: var(--mono); font-weight: 600; font-size: .95rem;
  display: flex; align-items: center; gap: .6em;
  text-transform: uppercase;
}
.nav-mark .box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--ink);
  font-size: .68rem;
}
.nav-links { display: flex; gap: clamp(8px, 2vw, 28px); }
.nav-link {
  font-family: var(--mono); font-size: clamp(.66rem, 1.6vw, .78rem); letter-spacing: .03em; text-transform: uppercase;
  padding: .4em .5em;
  transition: background-color .12s linear, color .12s linear;
  white-space: nowrap;
}
@media (min-width: 640px) { .nav-link { padding: .4em .7em; } }
@media (hover: hover) {
  .nav-link:hover { background: var(--ink); color: var(--bg); }
}
.nav-mark .full { display: none; }
@media (min-width: 480px) { .nav-mark .full { display: inline; } }

/* =============================================================
   6. Hero
   ============================================================= */
.hero .kicker { margin-bottom: 1.1rem; }
.hero-name {
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  letter-spacing: -0.02em;
}
.hero-role {
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.hero-aside { display: flex; flex-direction: column; gap: 1.6rem; justify-content: center; }
.hero-pitch { font-size: 1.02rem; color: var(--ink-70); max-width: 44ch; }

.spec {
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: .82rem;
}
.spec-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line-15);
}
.spec-row:last-child { border-bottom: none; }
.spec-row .k { color: var(--ink-45); text-transform: uppercase; letter-spacing: .05em; }
.spec-row .v { text-align: right; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .85em 1.3em;
  border: 1px solid var(--ink);
  transition: background-color .12s linear, color .12s linear;
}
.btn-solid { background: var(--ink); color: var(--bg); }
@media (hover: hover) {
  .btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn-ghost:hover { background: var(--ink); color: var(--bg); }
}

/* =============================================================
   7. Sections
   ============================================================= */
section { border-bottom: 1px solid var(--line); }
.section-head { padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 3vw, 40px); }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: .6rem; }

.about-text p { color: var(--ink-70); max-width: 58ch; }
.about-text p + p { margin-top: 1rem; }

/* Services */
.service-num { font-family: var(--mono); font-size: .78rem; color: var(--accent); }
.service h3 { font-size: 1.15rem; margin-top: .6rem; }
.service p.summary { margin-top: .8rem; color: var(--ink-70); font-size: .94rem; }
.service ul { margin-top: .9rem; font-family: var(--mono); font-size: .78rem; color: var(--ink-70); display: flex; flex-direction: column; gap: .4rem; }
.service li::before { content: "— "; color: var(--accent); }
.service {
  transition: background-color .15s linear, color .15s linear;
}
@media (hover: hover) {
  .service:hover { background: var(--ink); color: var(--bg); }
  .service:hover .service-num { color: var(--accent); }
  .service:hover p.summary,
  .service:hover ul { color: inherit; opacity: .82; }
}

/* Portfolio */
.project {
  display: grid;
  gap: 1.6rem;
}
@media (min-width: 860px) {
  .project { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}
.project + .project { border-top: 1px solid var(--line-15); }
.project-sub { margin-top: .5rem; font-family: var(--mono); font-size: .78rem; color: var(--ink-45); }
.project h3 { font-size: 1.3rem; margin-top: .6rem; }
.project p.summary { margin-top: .9rem; color: var(--ink-70); font-size: .94rem; max-width: 48ch; }
.project-tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.project-tags li {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--line); padding: .3em .6em;
}
.project-figure { border: 1px solid var(--line); }
.project-figure img { width: 100%; height: auto; }
.project-figure-pair { display: flex; flex-direction: column; }
.project-figure-pair img + img { border-top: 1px solid var(--line); }
.project-figure figcaption {
  font-family: var(--mono); font-size: .7rem; color: var(--ink-45);
  padding: .7rem .9rem; border-top: 1px solid var(--line);
}

.credential-note {
  padding-block: 1.4rem;
  font-family: var(--mono); font-size: .74rem; color: var(--ink-45);
}

/* Ticker / marquee */
.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  color: var(--bg);
}
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-block: .9rem;
  will-change: transform;
}
.ticker-track span { padding-inline: 1.2rem; }
.ticker-track .dot { color: var(--accent); }

/* Process */
.process-item .num {
  font-family: var(--mono);
  font-size: 2.2rem;
  color: var(--line-15);
  -webkit-text-stroke: 1px var(--ink);
  line-height: 1;
}
.process-item h3 { font-size: 1.05rem; margin-top: .7rem; }
.process-item p { margin-top: .5rem; color: var(--ink-70); font-size: .9rem; }

/* Contact */
.contact-lead h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); }
.contact-lead p { margin-top: 1rem; color: var(--ink-70); max-width: 42ch; }
.contact-links { display: flex; flex-direction: column; }
.contact-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-15);
  transition: background-color .12s linear, color .12s linear, padding-left .12s linear;
}
.contact-link:first-child { border-top: 1px solid var(--line-15); }
.contact-link .k { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; color: var(--ink-45); letter-spacing: .06em; }
.contact-link .v { font-family: var(--mono); font-size: clamp(1.05rem, 2vw, 1.3rem); }
@media (hover: hover) {
  .contact-link:hover { background: var(--ink); color: var(--bg); padding-left: .6rem; }
  .contact-link:hover .k { color: var(--accent); }
}

/* Footer */
footer {
  padding: 1.6rem clamp(16px, 3vw, 40px);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .03em; color: var(--ink-45);
}

/* =============================================================
   8. Reveal on scroll (universal, functional — never gated)
   ============================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
/* Defensive: split-text elements must never stay invisible */
.reveal[data-split] { opacity: 1; transform: none; }

/* =============================================================
   9. Cursor coordinates (desktop, fine pointer only)
   ============================================================= */
.cursor-coord {
  position: fixed; z-index: 9999; pointer-events: none;
  font-family: var(--mono); font-size: 11px;
  color: var(--bg); background: var(--ink);
  padding: 3px 7px;
  transform: translate(16px, 16px);
  opacity: 0; transition: opacity .2s;
  display: none;
}
@media (hover: hover) and (pointer: fine) { .cursor-coord { display: block; } }

/* =============================================================
   10. Responsive
   ============================================================= */
@media (min-width: 540px) { }
@media (min-width: 720px) { }
@media (min-width: 960px) { }
@media (min-width: 1280px) { }

/* =============================================================
   11. Reduced motion — only genuinely intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none !important; }
  /* Reveals, hover invert, cursor coords keep working — they are functional, not intrusive */
}