/* ══════════════════════════════════════════════════════════════
   A. VOLOSZ — Portfolio ’26
   Concept: “A working document, not a billboard.”
   Paper + ink + one engineering-orange. Serif display, mono labels,
   hairline rules, numbered sections. No frameworks, no images.
   ══════════════════════════════════════════════════════════════ */

:root {
  --paper: #F3F0EA;
  --ink: #1B1917;
  --ink-soft: #45413B;
  --muted: #6B645A;
  --line: rgba(27, 25, 23, .14);
  --line-strong: rgba(27, 25, 23, .38);
  --accent: #C2410C;
  --accent-bright: #ED6A2C;

  --dark: #161412;
  --dark-soft: #B9B2A7;
  --dark-muted: #8B8478;
  --dark-line: rgba(243, 240, 234, .16);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --head-h: 60px;
  --pad: clamp(20px, 4vw, 56px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 20px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Paper grain — barely-there tactile finish */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--ink); color: var(--paper); }
.dark-zone ::selection { background: var(--paper); color: var(--ink); }

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

/* Pointer targets ≥24px (WCAG 2.5.8) — inline prose links stay exempt */
.head-nav a, .lang-toggle a { padding-block: 5px; }
.brand { display: inline-block; padding-block: 3px; }
.hero-scroll a { padding-block: 6px 5px; }
.contact-links a { padding-block: 6px 5px; }
.footer a { display: inline-block; padding-block: 5px; }
.dark-zone :focus-visible { outline-color: var(--accent-bright); }

a { color: inherit; }

.wrap {
  width: min(1480px, 100%);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 300;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 16px;
  text-decoration: none;
  transition: top .2s ease;
}
.skip:focus { top: 12px; }

/* ── Header ───────────────────────────────────────────── */
.site-head {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--head-h);
}

.head-left {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.brand {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0;
  text-decoration: none;
}
.brand:hover { font-style: italic; }
.head-sep { margin: 0 6px; color: var(--muted); }
.muted { color: var(--muted); }

.head-nav { display: flex; gap: 26px; }
.head-nav a {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  text-underline-offset: 5px;
}
.head-nav a:hover { color: var(--ink); text-decoration: underline; }
.head-nav a.is-active { color: var(--ink); text-decoration: underline; }

.head-right {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.avail { color: var(--ink-soft); }
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 9px;
  vertical-align: 1px;
}
.clock { color: var(--muted); font-variant-numeric: tabular-nums; }
.lang-toggle a { color: var(--muted); text-decoration: none; }
.lang-toggle a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ── Hero / title page ────────────────────────────────── */
.hero {
  position: relative;
  padding-top: calc(var(--head-h) + clamp(48px, 9vh, 104px));
  padding-bottom: clamp(56px, 8vw, 104px);
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  border-top: 2px solid var(--ink);
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.3rem, 9.4vw, 8.9rem);
  line-height: .98;
  letter-spacing: -.01em;
  margin: clamp(30px, 4.5vw, 58px) 0 clamp(30px, 4vw, 54px);
}
.ht-line { display: block; }
.ht-indent { margin-left: clamp(28px, 9vw, 170px); }
.hero-title em { font-style: italic; }

.fn { line-height: 0; }
.hero-title .fn { font-size: clamp(.8rem, 1.3vw, 1rem); }
.fn a {
  font-family: var(--mono);
  font-style: normal;
  color: var(--accent);
  text-decoration: none;
  margin-left: .45em;
  vertical-align: super;
}
.fn a:hover { text-decoration: underline; text-underline-offset: 3px; }

.hero-sub {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}
.hero-scroll {
  grid-column: 1 / 4;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-scroll a {
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 5px;
}
.hero-scroll a:hover { color: var(--accent); border-color: var(--accent); }
.hero-note {
  grid-column: 7 / 13;
  justify-self: end;
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.hero-side {
  position: absolute;
  top: 47%;
  right: clamp(8px, 1.4vw, 20px);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Sections ─────────────────────────────────────────── */
.section {
  padding-block: clamp(70px, 9vw, 132px);
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--head-h);
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(34px, 4.5vw, 58px);
}
.sec-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sec-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  transform: translateY(-4px);
}
.sec-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.fn-inline a { color: var(--accent); text-decoration: none; }
.fn-inline a:hover { text-decoration: underline; }

/* ── Index ────────────────────────────────────────────── */
#index { padding-block: clamp(56px, 7vw, 100px); }
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list a {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 32px;
  gap: 16px;
  align-items: baseline;
  padding: 20px 10px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: background .25s ease;
}
.index-list li:last-child a { border-bottom: 1px solid var(--line); }
.idx-n { font-family: var(--mono); font-size: 12px; color: var(--muted); transition: color .25s ease; }
.idx-t {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  line-height: 1;
}
.idx-d { font-size: .95rem; color: var(--muted); }
.idx-a { text-align: right; color: var(--ink-soft); transition: transform .25s ease, color .25s ease; }

.index-list a:hover { background: rgba(27, 25, 23, .033); }
.index-list a:hover .idx-t { font-style: italic; }
.index-list a:hover .idx-n { color: var(--accent); }
.index-list a:hover .idx-a { transform: translateX(6px); color: var(--accent); }

/* ── 01 Position ──────────────────────────────────────── */
.pos-lede {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.8vw, 3.3rem);
  line-height: 1.14;
  max-width: 34ch;
  margin: 0 0 clamp(36px, 4vw, 56px);
}
.pos-lede em { font-style: italic; }

.pos-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  max-width: 76rem;
}
.pos-cols p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }

.pos-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--ink);
}
.pos-facts dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.pos-facts dd { margin: 0; font-size: .98rem; line-height: 1.5; }

/* Smaller lede for secondary sections (Company) */
.lede-sm {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.2;
  max-width: 30ch;
  margin: 0 0 clamp(30px, 3.5vw, 48px);
}

/* ── 02 Work ──────────────────────────────────────────── */
.work {
  padding: clamp(30px, 3.5vw, 52px) clamp(8px, 1vw, 16px);
  border-top: 1px solid var(--line);
  transition: background .3s ease;
}
.work:last-child { border-bottom: 1px solid var(--line); }
.work:hover { background: rgba(27, 25, 23, .032); }

.work-kicker {
  display: flex;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.work-n { color: var(--ink-soft); transition: color .3s ease; }
.work:hover .work-n { color: var(--accent); }

.work-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.02;
  margin: 0 0 14px;
  transition: transform .3s ease;
}
.work:hover .work-title { font-style: italic; transform: translateX(8px); }
.work-desc { margin: 0 0 14px; max-width: 60ch; color: var(--ink-soft); line-height: 1.6; }
.work-tags { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.work-title .crew-link { color: inherit; text-decoration: none; }

/* ── 03 Practice ──────────────────────────────────────── */
.prac-grid {
  display: grid;
  grid-template-columns: minmax(220px, 4fr) 7fr;
  gap: clamp(32px, 6vw, 110px);
  align-items: start;
}
.prac-left { position: sticky; top: calc(var(--head-h) + 40px); }
.prac-lede {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.2;
  margin: 0;
}

.prac-list { margin: 0; }
.prac-item {
  display: grid;
  gap: 8px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.prac-item:last-child { border-bottom: 1px solid var(--line); }
.prac-item dt { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.prac-n {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .85em;
  color: var(--accent);
  margin-right: 12px;
}
.prac-item dd { margin: 0; color: var(--ink-soft); line-height: 1.6; max-width: 58ch; }

.princ { margin-top: clamp(60px, 8vw, 116px); }
.princ-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.princ-list { list-style: none; margin: 0; padding: 0; }
.princ-list li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  line-height: 1.15;
}
.princ-list li:last-child { border-bottom: 1px solid var(--line); }
.princ-n { font-family: var(--mono); font-size: 12px; color: var(--accent); }

/* ── 04 Log ───────────────────────────────────────────── */
.ledger-wrap { overflow-x: auto; }
.ledger { width: 100%; min-width: 660px; border-collapse: collapse; }
.ledger th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 20px 14px 0;
}
.ledger td {
  padding: 18px 20px 18px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
  font-size: .98rem;
  line-height: 1.5;
}
.ledger tr:last-child td { border-bottom: 1px solid var(--line); }
.ledger td:nth-child(2) { font-weight: 500; }
.l-period { font-family: var(--mono); font-size: .85rem; white-space: nowrap; color: var(--ink-soft); }
.l-dim { color: var(--muted); }

.log-note { margin: 18px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* ── Notes ────────────────────────────────────────────── */
.notes {
  padding-block: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line);
}
.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
.note {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  scroll-margin-top: calc(var(--head-h) + 30px);
}
.note-n {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--accent);
  text-decoration: none;
  margin-right: 10px;
}
.note-n:hover { text-decoration: underline; }

/* ── 05 Contact + footer (dark) ───────────────────────── */
.dark-zone {
  background: var(--dark);
  color: var(--paper);
  margin-top: clamp(40px, 6vw, 90px);
}
.contact {
  padding-top: clamp(90px, 11vw, 160px);
  padding-bottom: clamp(60px, 7vw, 100px);
  scroll-margin-top: var(--head-h);
}
.sec-head-dark .sec-rule { background: var(--dark-line); }

.contact-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.2vw, 6.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  max-width: 15ch;
  margin: 0 0 28px;
}
.contact-title em { font-style: italic; }
.contact-sub {
  max-width: 54ch;
  margin: 0;
  color: var(--dark-soft);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.65;
}

.mail {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.6vw, 3.8rem);
  line-height: 1.1;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 10px;
  text-decoration-color: rgba(243, 240, 234, .38);
  transition: text-decoration-color .25s ease;
}
.mail:hover { font-style: italic; text-decoration-color: var(--accent-bright); }

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin-top: 46px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contact-links a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--dark-line);
  padding-bottom: 5px;
}
.contact-links a:hover { border-color: var(--accent-bright); }

.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  border-top: 1px solid var(--dark-line);
  padding-top: 26px;
  padding-bottom: 44px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--dark-muted);
}
.footer p { margin: 0; }
.footer a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--dark-line);
  padding-bottom: 2px;
}
.footer a:hover { border-color: var(--accent-bright); }

/* Standalone error page (404.html links here root-absolute) */
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.error-page main { text-align: center; max-width: 34rem; width: 100%; }
.error-kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border-top: 2px solid var(--ink); padding-top: 14px;
  display: flex; justify-content: space-between;
}
.error-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: 1.02; margin: 28px 0 16px;
}
.error-title em { font-style: italic; }
.error-sub { color: var(--ink-soft); margin: 0 0 32px; }
.error-nav {
  display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.error-nav a { text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.error-nav a:hover { color: var(--accent); border-color: var(--accent); }

/* ── Reveal on scroll (JS-gated: no-JS still shows all) ── */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .6, .2, 1);
}
.js .sec-head .sec-rule { transform: scaleX(0) translateY(-4px); transform-origin: left center; transition: transform 1s cubic-bezier(.2, .6, .2, 1) .1s; }
.js .sec-head.in .sec-rule { transform: scaleX(1) translateY(-4px); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-side { display: none; }
}

@media (max-width: 900px) {
  .head-nav { display: none; }
  .hero-sub { grid-template-columns: minmax(0, 1fr); }
  .hero-scroll { grid-column: 1 / -1; order: 2; }
  .hero-note { grid-column: 1 / -1; justify-self: start; }
  .pos-cols { grid-template-columns: minmax(0, 1fr); }
  .prac-grid { grid-template-columns: minmax(0, 1fr); }
  .prac-left { position: static; }
  .pos-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .notes-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .sec-note { display: none; }
  .head-left .head-sep, .head-left .muted { display: none; }
  .head-right .avail { display: none; }
  .hero-meta { font-size: 10px; letter-spacing: .08em; gap: 8px 12px; }
  .index-list a { grid-template-columns: 40px minmax(0, 1fr) 24px; }
  .idx-d { display: none; }
  .pos-facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .princ-list li { grid-template-columns: 40px minmax(0, 1fr); }
  .work:hover .work-title { transform: none; }
}

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}

/* ── Print (it’s a document, after all) ───────────────── */
@media print {
  .site-head, .hero-side, .hero-scroll, .skip, body::after { display: none !important; }
  body { background: #fff; }
  .hero { padding-top: 0; }
  .section, .notes { padding-block: 28px; }
  .js .reveal { opacity: 1; transform: none; }
  .dark-zone { background: #fff; color: #000; margin-top: 0; }
  .contact-sub, .footer { color: #333; }
  .mail, .contact-links a, .footer a { color: #000; }
}