/* =========================================================================
   Ilya Galendukhin — personal site
   Brutalist editorial DARK portfolio. Staged as the engineer's machine:
   a full-bleed Carbon void, flat #1a1a1a terminal "plates" carrying real
   system output as the photo substitute, Anton as the shout, Azeret Mono as
   the system voice, and ONE cyan "sticker" card as the single detonation.
   Ruthlessly flat — no shadows, no gradients, zero border-radius.
   ========================================================================= */

:root {
  /* palette (fixed by the brief) ---------------------------------------- */
  --carbon:  #0a0a0a;   /* page void                       */
  --plate:   #1a1a1a;   /* terminal image-plate, one notch off the void    */
  --bone:    #ffffff;   /* the only voice for the page      */
  --cyan:    #1ef0e4;   /* the rare detonation              */
  --magenta: #e91e8c;   /* ink-on-cyan only                 */
  --ember:   #ff3a1a;   /* tiny script flourishes only      */

  /* white at controlled opacities (body copy stays at 90%; never below the ~80% brief floor) */
  --text:     rgba(255,255,255,0.90);
  --bone-65:  rgba(255,255,255,0.65);
  --bone-55:  rgba(255,255,255,0.55);
  --bone-35:  rgba(255,255,255,0.35);
  --bone-30:  rgba(255,255,255,0.30);
  --bone-28:  rgba(255,255,255,0.28);
  --bone-12:  rgba(255,255,255,0.12);
  --ink-70:   rgba(10,10,10,0.72);   /* dark copy on the cyan card (true carbon) */
  --ink-45:   rgba(10,10,10,0.45);

  /* type ----------------------------------------------------------------- */
  --display: 'Anton', 'Arial Narrow', 'Helvetica Neue Condensed', Impact, sans-serif;
  --mono:    'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --script:  'Pinyon Script', 'Snell Roundhand', 'Brush Script MT', cursive;

  /* fluid display scale — readable (<=20px) jumps straight to poster ----- */
  --fs-hero:      clamp(52px, 11vw, 116px);
  --fs-section:   clamp(42px, 7.5vw, 78px);
  --fs-proj:      clamp(36px, 5.6vw, 70px);
  --fs-cyan:      clamp(42px, 7vw, 88px);
  --fs-statement: clamp(27px, 4.4vw, 54px);
  --fs-contact:   clamp(64px, 13vw, 150px);

  /* layout --------------------------------------------------------------- */
  --maxw:   1400px;
  --gutter: clamp(20px, 5vw, 80px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
section[id] { scroll-margin-top: 28px; }

html, body {
  margin: 0;
  background: var(--carbon);
  color: var(--text);
  overflow-x: clip;               /* contain the bleeds + the card tilt */
}

body {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

::selection { background: var(--cyan); color: var(--carbon); }

/* the page is a centered max-width column; full-bleed = negative gutter
   margins, which kiss the viewport edge up to --maxw and cap there beyond it */
.page {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  display: flex;
  flex-direction: column;
  gap: clamp(76px, 12vh, 132px);
  padding-block: clamp(40px, 7vh, 84px) clamp(80px, 12vh, 128px);
}

/* full-bleed hairline rule (escapes the gutter to the viewport edge / maxw) -- */
.rule        { border: 0; }
.rule--full  { height: 1px; background: var(--bone-12); margin-inline: calc(-1 * var(--gutter)); }

/* =========================================================================
   Masthead / nav  (not sticky — it scrolls away, like a magazine masthead)
   ========================================================================= */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 24px 0 18px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
}
.nav__mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--bone);
  color: var(--carbon);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__links a {
  color: var(--bone-65);
  text-decoration: none;
  transition: color 0.18s ease;
}
.nav__links a:hover { color: var(--cyan); }

/* right cluster: nav links + the language switcher */
.nav__right {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 26px;
}
.lang { display: inline-flex; align-items: baseline; }
.lang__btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 2px 3px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-55);
  transition: color 0.18s ease;
}
.lang__btn + .lang__btn {        /* hairline dividers → an "EN | RU | NL" segmented control */
  margin-left: 9px;
  padding-left: 12px;
  border-left: 1px solid var(--bone-12);
}
.lang__btn:hover { color: var(--bone); }
.lang__btn.is-active { color: var(--cyan); }

/* =========================================================================
   Hero — typographic poster: oversized Anton stair-steps right, a mono meta
   block annotates the right column, PLATE_01 bleeds off the right edge below.
   ========================================================================= */
.hero { padding-block: clamp(32px, 7vh, 80px) 0; }

.hero__eyebrow {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-65);
}
.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--bone);
}
.hero__title span { display: block; }
.hero__title span:nth-child(2) { margin-left: clamp(0px, 6vw, 96px); }
.hero__title span:nth-child(3) { margin-left: clamp(0px, 12vw, 196px); }

.hero__meta {
  margin: clamp(28px, 4vw, 44px) 0 0;
  font-family: var(--mono);
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.75;
  color: var(--text);
  max-width: 42ch;
}
.hero__status {
  display: inline-block;
  margin-top: 0.7em;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-55);
}

.plate--hero {
  width: min(720px, 100%);
  margin-top: clamp(30px, 5vh, 60px);
}

@media (min-width: 880px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 31%);
    column-gap: clamp(24px, 4vw, 64px);
    align-items: start;
  }
  .hero__eyebrow { grid-column: 1 / -1; }
  .hero__title   { grid-column: 1; }
  .hero__meta    { grid-column: 2; align-self: end; margin: 0; padding-bottom: 0.5em; }
  .plate--hero {
    grid-column: 1 / -1;
    justify-self: end;                         /* right-aligned in the row */
    width: min(760px, 86%);
    margin-top: clamp(40px, 6vh, 76px);
    margin-right: calc(-1 * var(--gutter));    /* bleed off the right edge */
  }
}

/* =========================================================================
   Intro statement — a single oversized pull-quote, offset right, one cyan word
   ========================================================================= */
.statement__lede {
  margin: 0;
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-statement);
  line-height: 1.05;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: var(--bone);
}
.statement__lede .hi { color: var(--cyan); font-style: normal; }
@media (min-width: 880px) {
  .statement__lede { max-width: 20ch; margin-left: clamp(0px, 16vw, 260px); }
}

/* =========================================================================
   Terminal plates — the photo substitute. Flat #1a1a1a, no border, no shadow.
   ========================================================================= */
.plate {
  margin: 0;
  background: var(--plate);
  padding: clamp(18px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
}
.plate__pre {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(11px, 1.05vw, 13.5px);
  line-height: 1.85;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}
.plate__cap {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);   /* ~5.3:1 on carbon — readable caption */
}

/* terminal syntax tokens — cyan kept to ONE meaningful glyph per plate */
.t-prompt { color: var(--bone-55); }
.t-out    { color: var(--text); }
.t-dim    { color: var(--bone-30); }
.t-cyan   { color: var(--cyan); }
.t-ghost  { color: var(--bone-28); }

/* the single blinking cyan cursor — the only saturated pixel above the fold */
.caret { color: var(--cyan); }
@media (prefers-reduced-motion: no-preference) {
  .caret { animation: blink 1.06s steps(1, end) infinite; }
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* =========================================================================
   Selected work
   ========================================================================= */
.work { display: flex; flex-direction: column; gap: clamp(64px, 9vh, 116px); }

.kicker {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-55);
}
.work__title {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--bone);
}
.work__title .script-flourish {
  position: absolute;
  left: clamp(36px, 8vw, 120px);
  top: -0.62em;
  font-size: 0.46em;
  transform: rotate(-8deg);
  white-space: nowrap;
}

/* the script flourish (Pinyon, ember) — decorative, appears exactly twice */
.script-flourish {
  font-family: var(--script);
  font-weight: 400;
  color: var(--ember);
  line-height: 1;
}

/* shared project chrome --------------------------------------------------- */
.proj { position: relative; }
.proj__eyebrow {
  margin: 0 0 clamp(16px, 2vw, 22px);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-55);
}
.proj__title {
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-proj);
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--bone);
}
.proj__body {
  margin: 0 0 clamp(20px, 2.6vw, 28px);
  max-width: 60ch;
  font-family: var(--mono);
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.72;
  color: var(--text);
}
.proj__body strong { color: var(--bone); font-weight: 700; }

.proj__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.proj__tags li { color: var(--bone-55); white-space: nowrap; }
.proj__tags li:not(:last-child)::after {
  content: "/";
  margin: 0 0.62em;
  color: var(--bone-30);
}

/* 01 — the cyan detonation: a sticker pasted on the void, tilted 1.4deg ---- */
.proj--cyan {
  max-width: 860px;
  padding: clamp(28px, 4.4vw, 60px) clamp(26px, 4vw, 56px) clamp(104px, 12vw, 150px);
  background: var(--cyan);
  color: var(--carbon);
  overflow: hidden;                  /* torn shape is clipped to the card — magenta never reaches carbon */
  transform: rotate(-1.4deg);
  transform-origin: 30% 50%;
}
.proj--cyan .proj__eyebrow { color: var(--ink-70); }
.proj--cyan .proj__title   { color: var(--magenta); font-size: var(--fs-cyan); }
.proj--cyan .proj__body    { color: var(--ink-70); max-width: 56ch; }
.proj--cyan .proj__body strong { color: var(--carbon); }
.proj--cyan .proj__tags li { color: var(--ink-70); }
.proj--cyan .proj__tags li:not(:last-child)::after { color: var(--ink-45); }

/* torn-paper magenta shape ripped onto the bottom edge */
.proj__torn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                         /* solid edge meets the card edge — magenta stays ON cyan */
  width: 100%;
  height: clamp(64px, 8vw, 104px);
  display: block;
}
.proj__torn path { fill: var(--magenta); }

/* 02 & 04 — split: head one side, terminal plate the other, bleeding to edge */
.proj--split { display: flex; flex-direction: column; gap: clamp(26px, 4vw, 46px); }
@media (min-width: 880px) {
  .proj--split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.12fr);
    align-items: center;
    column-gap: clamp(32px, 4vw, 64px);
  }
  .proj--split .plate { margin-right: calc(-1 * var(--gutter)); }   /* bleed right */

  .proj--rev { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.85fr); }
  .proj--rev .plate { margin-right: 0; margin-left: calc(-1 * var(--gutter)); } /* bleed left */
  .proj--rev .proj__head  { text-align: right; }
  .proj--rev .proj__body  { margin-left: auto; }
  .proj--rev .proj__tags  { justify-content: flex-end; }
}

/* 03 — full-bleed pipeline plate; the title straddles its top edge ---------- */
.proj--overlap .plate--wide { margin-inline: calc(-1 * var(--gutter)); }
.proj--overlap .proj__title { position: relative; z-index: 2; margin-bottom: 0; }
.proj--overlap .plate--wide {
  position: relative;
  z-index: 1;
  margin-top: clamp(-26px, -2.2vw, -14px);   /* the title sinks into the plate's top edge */
  padding-top: clamp(40px, 5vw, 62px);
}
.proj--overlap .proj__foot { margin-top: clamp(22px, 3vw, 32px); }

/* =========================================================================
   Daily routine — labeled production "threads" in a two-column editorial grid
   (no plate, no cyan — keeps those devices reserved; just type + hairlines)
   ========================================================================= */
.routine__head { margin-bottom: clamp(10px, 2vw, 20px); }
.routine__intro {
  margin: clamp(18px, 2.4vw, 28px) 0 clamp(32px, 4.5vw, 56px);
  max-width: 62ch;
  font-family: var(--mono);
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.72;
  color: var(--text);
}
.threads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(28px, 3.4vw, 46px) clamp(32px, 4vw, 64px);
}
@media (min-width: 760px) {
  .threads { grid-template-columns: 1fr 1fr; }
}
.thread {
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--bone-12);
}
.thread__label {
  margin: 0 0 clamp(10px, 1.4vw, 14px);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-55);
}
.thread__body {
  margin: 0;
  max-width: 52ch;
  font-family: var(--mono);
  font-size: clamp(14px, 1.3vw, 15.5px);
  line-height: 1.7;
  color: var(--text);
}
.thread__body strong { color: var(--bone); font-weight: 700; }

/* =========================================================================
   Stack — a fixed-width manifest ledger, hairline-ruled, no chips
   ========================================================================= */
.stack__head { margin-bottom: clamp(10px, 2vw, 22px); }
.stack__title,
.routine__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--bone);
}
.ledger {
  margin: clamp(22px, 3vw, 36px) 0 0;
  border-top: 1px solid var(--bone-12);
}
.ledger__row {
  display: grid;
  grid-template-columns: minmax(110px, 22%) 1fr;
  gap: 12px 32px;
  align-items: baseline;
  padding: clamp(14px, 1.8vw, 22px) 0;
  border-bottom: 1px solid var(--bone-12);
}
.ledger dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-55);
}
.ledger dd {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.01em;
  color: var(--text);
}
@media (max-width: 560px) {
  .ledger__row { grid-template-columns: 1fr; gap: 5px; }
}

/* =========================================================================
   Contact
   ========================================================================= */
.contact { position: relative; }
.script-flourish--contact {
  display: block;
  margin: 0 0 0.12em;
  font-size: clamp(23px, 3.4vw, 40px);
  transform: rotate(-6deg);
  transform-origin: left center;
}
.contact__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-contact);
  line-height: 0.85;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bone);
}
.contact__links {
  list-style: none;
  margin: clamp(22px, 3.4vw, 40px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact__links a {
  width: max-content;
  max-width: 100%;
  font-family: var(--mono);
  font-size: clamp(18px, 2.4vw, 30px);
  color: var(--bone);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bone-12);
  transition: color 0.18s ease, border-color 0.18s ease;
  word-break: break-word;
}
.contact__links a:hover { color: var(--cyan); border-color: var(--cyan); }

/* =========================================================================
   Footer
   ========================================================================= */
.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  padding: 22px 0 42px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bone-55);
}

/* =========================================================================
   Accessibility
   ========================================================================= */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 15px;
  background: var(--cyan);
  color: var(--carbon);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.16s ease;
}
.skip-link:focus { transform: none; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}