/* ============================================================
   PORTFOLIO EXTENSIONS
   The blocks the driver site did not have, in the same language:
   near-white ground, black copy, one cyan accent, bracket corners,
   chamfered slabs. Nothing here is a CSS keyframe — every entrance
   is a spring in site.js.
   ============================================================ */

/* --- the wordmark, in place of the racing logo ---------------------------- */
.wordmark {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em;
  line-height: 0.9; font-size: 1.5rem; text-transform: uppercase;
}
.wordmark .dot { color: var(--accent); }
.wordmark small {
  font-family: var(--font-sans); font-weight: 500; font-size: 0.32em;
  letter-spacing: 0.22em; margin-left: 0.6em; color: var(--foreground-muted);
  white-space: nowrap;
}
@media (max-width: 639px) { .wordmark small { display: none; } }
.wordmark--light { color: var(--foreground-on-dark); }

/* --- the veil's mark: the initials filling from the top ------------------- */
.veil__mark {
  position: relative; font-family: var(--font-display); font-weight: 700;
  font-size: 7rem; line-height: 0.8; letter-spacing: -0.05em; text-transform: uppercase;
}
.veil__mark .ghost { display: block; color: var(--foreground); opacity: 0.12; }
.veil__mark .fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; overflow: hidden; }
.veil__mark .fill > span { display: block; color: var(--foreground); }

/* --- hero details the driver site carried as artwork --------------------- */
.metamark { font-size: 1.125rem; line-height: 1; flex: none; }
.metamark.accent { color: var(--accent); font-size: 0.9rem; }
.hero__gpa { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex: none; }
.hero__gpa b {
  font-family: var(--font-display); font-weight: 500; font-size: var(--type-heading);
  line-height: 0.72; letter-spacing: -0.08em; color: var(--accent);
}
.hero__gpa i {
  font-style: normal; font-size: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: -0.04em; line-height: 0.9; color: var(--foreground-muted);
}
@media (min-width: 768px) {
  .hero__gpa { flex-direction: row; align-items: baseline; gap: 0.5rem; margin-top: 1.5rem; justify-content: flex-end; }
}
.playmark { width: 2rem; height: 2rem; flex: none; color: var(--foreground); }
.playmark svg { width: 100%; height: 100%; }

/* the four figures in the work band's panel use a glyph, not an icon file */
.picon {
  width: calc(var(--panel-u) * 31); flex: none; text-align: center;
  font-size: calc(var(--panel-u) * 22); line-height: 1; color: var(--accent);
}

/* the journey block's bottom row: the AI tools opposite the plate */
.season__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2.2222cqw; flex-wrap: wrap;
}
.season__foot .plate { margin-left: auto; }
@media (max-width: 1023px) { .season__foot { gap: 24px; } }
/* The journey block grows to fit its content on a phone rather than
   clipping the pills and the tool cards into a 680px box. */
@media (max-width: 639px) { [data-season] { --season-h: auto; } }

/* --- skills, inside the journey block ------------------------------------ */
.skills { margin-top: max(2.0833cqw, var(--head-air, 0px)); }
.skills__label {
  font-size: max(0.8333cqw, var(--type-min, 0px)); font-weight: 500;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9;
  color: var(--accent); margin-bottom: 1.1111cqw;
}
.skills__grid { display: flex; flex-wrap: wrap; gap: 0.5556cqw; max-width: 34cqw; }
@media (max-width: 1023px) { .skills__grid { max-width: none; gap: 8px; } }
.pill {
  position: relative; display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.7em 1em; color: var(--foreground-on-dark);
  font-size: max(0.8333cqw, var(--type-min, 0px));
  text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em;
  border: 1px solid var(--border-on-dark); background: rgb(255 255 255 / 0.03);
  transition: border-color var(--duration-normal) var(--ease-entrance),
              color var(--duration-normal) var(--ease-entrance);
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill i {
  font-style: normal; font-family: var(--font-display); font-weight: 500;
  color: var(--accent); font-size: 0.95em; letter-spacing: -0.04em;
}

/* --- the AI tool strip ---------------------------------------------------- */
.aitools { display: flex; flex-wrap: wrap; gap: 1.1111cqw; margin-top: 1.9444cqw; }
.aicard { position: relative; padding: 1.1111cqw 1.3889cqw; min-width: 11.5cqw; }
.aicard .bk { position: absolute; width: 0.6944cqw; height: 0.6944cqw; color: var(--border-on-dark); }
.aicard__icon { font-size: max(1.3889cqw, 18px); line-height: 1; }
.aicard__name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; margin-top: 0.5556cqw; color: var(--foreground-on-dark);
  font-size: max(1.25cqw, var(--type-min, 0px));
}
.aicard__use {
  font-size: max(0.8333cqw, var(--type-min, 0px)); text-transform: uppercase;
  line-height: 1.15; letter-spacing: -0.02em; color: var(--foreground-on-dark-muted);
  margin-top: 0.4167cqw;
}
@media (max-width: 1023px) {
  .aitools { gap: 12px; }
  .aicard { min-width: 148px; padding: 14px 16px; }
  .aicard .bk { width: 10px; height: 10px; }
}

/* --- wider mastheads -----------------------------------------------------
   The frame sizes these columns for "from karts / to f1" and "keep pushing /
   forward". This port's words are longer, and at the frame's own 293 and 370
   they broke inside a line. Widening the column is the smallest change that
   keeps the right-aligned two-line composition intact.
   -------------------------------------------------------------------------- */
.timeline__head { width: max(30cqw, var(--head-w-min, 0px)); }
.foot__head { width: max(31cqw, var(--head-w-min, 0px)); }

/* --- the year marker -----------------------------------------------------
   The driver site laid the year over a photograph, where the middle of the
   plate is empty. Here the plate *is* the copy, so the year moves out to the
   row's open edge and keeps its own parallax.
   -------------------------------------------------------------------------- */
.trow__year {
  left: auto; right: auto; transform: translateY(-50%);
  font-size: max(3.3333cqw, var(--year-min, 0px));
}
.trow__year--left  { left: var(--gutter); }
.trow__year--right { right: var(--gutter); text-align: right; }
.trow__year--right .rv { justify-content: flex-end; }
@media (max-width: 639px) {
  .trow__year, .trow__year--left, .trow__year--right {
    left: auto; right: auto; transform: none; text-align: center;
  }
  .trow__year--right .rv { justify-content: center; }
}

/* --- the timeline plate, without a photograph ---------------------------- */
.tplate {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 2.2222cqw; color: var(--foreground-on-dark); overflow: hidden;
  background:
    radial-gradient(120% 120% at 12% 0%, rgb(2 210 227 / 0.16), transparent 58%),
    linear-gradient(150deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02));
}
.tplate--side { padding: 1.6667cqw; }
.tplate__kicker {
  font-size: max(0.8333cqw, var(--type-min, 0px)); font-weight: 500;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9; color: var(--accent);
}
.tplate__role {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; margin-top: 0.8333cqw;
  font-size: max(2.2222cqw, var(--copy-min-size, 0px));
}
.tplate--side .tplate__role { font-size: max(1.5278cqw, var(--copy-min-size, 0px)); }
.tplate__company {
  font-size: max(1.0417cqw, var(--copy-min-size, 0px)); text-transform: uppercase;
  line-height: 1.1; color: var(--foreground-on-dark-muted); margin-top: 0.5556cqw;
}
.tplate__list {
  margin-top: 1.1111cqw; display: flex; flex-direction: column; gap: 0.5556cqw;
  font-size: max(0.9722cqw, var(--copy-min-size, 0px));
  text-transform: uppercase; line-height: 1.25; max-width: 30cqw;
}
.tplate__list li { position: relative; padding-left: 1.25em; }
.tplate__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.55em; height: 1px; background: var(--accent);
}
.tplate__win {
  margin-top: auto; padding-top: 1.1111cqw;
  font-size: max(0.8333cqw, var(--type-min, 0px));
  text-transform: uppercase; line-height: 1.2; letter-spacing: -0.02em; color: var(--accent);
}
@media (max-width: 639px) {
  .tplate { position: relative; padding: 20px; }
  .tplate__list { max-width: none; }
}

/* ============================================================
   SELECTED WORK — the project grid
   ============================================================ */
.work {
  container-type: inline-size; position: relative; isolation: isolate; width: 100%;
  background: var(--background); color: var(--foreground);
  padding: 6.6667cqw 2.2222cqw;
}
@media (max-width: 1023px) {
  .work { --type-min: 13px; --copy-min-size: 16px; --head-min: 6.6667cqw; padding: 64px 24px; }
}
@media (max-width: 639px) { .work { --head-min: 40px; padding: 56px 24px; } }
.work__contours { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.work__contours canvas { width: 100%; height: 100%; }
.blockhead {
  position: relative; z-index: 2; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2.2222cqw; flex-wrap: wrap;
  margin-bottom: 3.3333cqw;
}
@media (max-width: 1023px) { .blockhead { margin-bottom: 36px; } }
.masthead {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; color: var(--foreground);
  font-size: max(3.8194cqw, var(--head-min, 0px));
}
.masthead--accent { color: var(--accent); }
.masthead .rv { justify-content: flex-start; }
.blocklede {
  max-width: 28cqw; text-transform: uppercase; line-height: 1.15;
  font-size: max(1.25cqw, var(--copy-min-size, 0px)); color: var(--foreground-muted);
}
@media (max-width: 1023px) { .blocklede { max-width: 48ch; } }
.blocklede .rv { column-gap: 0.22em; }

.work__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2222cqw;
}
@media (max-width: 1023px) { .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 639px) { .work__grid { grid-template-columns: 1fr; gap: 18px; } }

.pcard {
  position: relative; display: flex; flex-direction: column;
  padding: 1.6667cqw; min-height: 20.8333cqw; color: var(--foreground);
  transition: transform var(--duration-plate) var(--ease-plate);
}
@media (max-width: 1023px) { .pcard { padding: 20px; min-height: 0; } }
.pcard .bk { position: absolute; width: 0.6944cqw; height: 0.6944cqw; color: var(--foreground); }
@media (max-width: 1023px) { .pcard .bk { width: 10px; height: 10px; } }
@media (hover: hover) { .pcard:hover { transform: translateY(-0.4167cqw); } }
.pcard__no {
  font-family: var(--font-display); font-weight: 700; line-height: 0.72;
  letter-spacing: -0.06em; color: var(--accent);
  font-size: max(2.6389cqw, 28px);
}
.pcard__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1em;
  margin-top: 1.3889cqw;
  font-size: max(0.8333cqw, var(--type-min, 0px)); text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.9; color: var(--foreground-muted);
}
.pcard__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; margin-top: 0.8333cqw;
  font-size: max(1.9444cqw, var(--copy-min-size, 0px));
}
.pcard__desc {
  margin-top: 0.8333cqw; text-transform: uppercase; line-height: 1.25;
  font-size: max(0.9722cqw, var(--copy-min-size, 0px)); color: var(--foreground-muted);
}
.pcard__tech { display: flex; flex-wrap: wrap; gap: 0.4167cqw; margin-top: 1.1111cqw; }
@media (max-width: 1023px) { .pcard__tech { gap: 6px; } }
.tag {
  padding: 0.45em 0.7em; border: 1px solid var(--border-muted);
  font-size: max(0.7639cqw, 11px); text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.9; white-space: nowrap;
}
.pcard__links { margin-top: auto; padding-top: 1.3889cqw; display: flex; flex-wrap: wrap; gap: 0.5556cqw; }
@media (max-width: 1023px) { .pcard__links { gap: 8px; padding-top: 18px; } }

/* the small chamfered button, shared by the work and certificate cards */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 0.6em;
  height: 2.7em; padding: 0 1.05em;
  font-size: max(0.8333cqw, var(--type-min, 0px));
  text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em;
  color: var(--accent); transition: color var(--duration-normal) var(--ease-entrance);
}
.chip .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.chip .flood { transform-origin: left; transform: scaleX(0); transition: transform var(--duration-normal) var(--ease-plate); }
.chip:hover .flood { transform: scaleX(1); }
.chip:hover { color: var(--surface-black); }
.chip > span, .chip > .ico { position: relative; }
.chip .ico { width: 1.05em; height: 1.05em; flex: none; }
.chip .ico path, .chip .ico circle { stroke: currentColor; }
.chip .ico.fill path { fill: currentColor; stroke: none; }
.chip--here { color: var(--foreground-muted); pointer-events: none; }
.chip--here:hover { color: var(--foreground-muted); }

/* ============================================================
   CERTIFICATES
   ============================================================ */
.certs {
  container-type: inline-size; position: relative; isolation: isolate; width: 100%;
  background: var(--surface-black); color: var(--foreground-on-dark);
  padding: 6.6667cqw 2.2222cqw;
}
@media (max-width: 1023px) {
  .certs { --type-min: 13px; --copy-min-size: 16px; --head-min: 6.6667cqw; padding: 64px 24px; }
}
@media (max-width: 639px) { .certs { --head-min: 40px; padding: 56px 24px; } }
.certs .masthead { color: var(--accent); }
.certs .blocklede { color: var(--foreground-on-dark-muted); }
.certs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2222cqw; }
@media (max-width: 1023px) { .certs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 639px) { .certs__grid { grid-template-columns: 1fr; gap: 18px; } }
.ccard {
  position: relative; display: flex; flex-direction: column;
  padding: 1.6667cqw; min-height: 17.3611cqw; color: var(--foreground-on-dark);
  background: rgb(255 255 255 / 0.02);
  transition: background var(--duration-plate) var(--ease-plate);
}
@media (max-width: 1023px) { .ccard { padding: 20px; min-height: 0; } }
@media (hover: hover) { .ccard:hover { background: rgb(255 255 255 / 0.05); } }
.ccard .bk { position: absolute; width: 0.6944cqw; height: 0.6944cqw; color: var(--accent); }
@media (max-width: 1023px) { .ccard .bk { width: 10px; height: 10px; } }
.ccard__issuer {
  display: flex; align-items: center; gap: 0.6em;
  font-size: max(0.8333cqw, var(--type-min, 0px)); text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.9; color: var(--accent);
}
.ccard__issuer .logo { font-size: 1.5em; line-height: 1; }
.ccard__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; margin-top: 1.1111cqw;
  font-size: max(1.6667cqw, var(--copy-min-size, 0px));
}
.ccard__desc {
  margin-top: 0.8333cqw; text-transform: uppercase; line-height: 1.25;
  font-size: max(0.9722cqw, var(--copy-min-size, 0px)); color: var(--foreground-on-dark-muted);
}
.ccard__meta {
  display: flex; flex-wrap: wrap; gap: 1.1111cqw; margin-top: 1.1111cqw;
  font-size: max(0.7639cqw, 11px); text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.9; color: var(--foreground-on-dark-faint);
}
.ccard__meta span { display: inline-flex; align-items: center; gap: 0.45em; }
.ccard__links { margin-top: auto; padding-top: 1.3889cqw; display: flex; flex-wrap: wrap; gap: 0.5556cqw; }
@media (max-width: 1023px) { .ccard__links { gap: 8px; padding-top: 18px; } }

/* the certificate viewer */
.cmodal {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 2rem;
  background: rgb(9 10 11 / 0.86);
}
.cmodal.on { display: flex; }
.cmodal__panel {
  position: relative; width: min(1100px, 100%); height: min(84vh, 900px);
  background: var(--background); display: flex; flex-direction: column;
}
.cmodal__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-muted);
}
.cmodal__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; font-size: 1.25rem;
}
.cmodal__close { width: 2rem; height: 2rem; position: relative; flex: none; transition: color var(--duration-fast) var(--ease-entrance); }
.cmodal__close:hover { color: var(--accent); }
.cmodal__close span { position: absolute; left: 15%; top: 50%; width: 70%; height: 1px; background: currentColor; }
.cmodal__close span:first-child { transform: rotate(45deg); }
.cmodal__close span:last-child { transform: rotate(-45deg); }
.cmodal iframe { flex: 1; width: 100%; border: 0; background: var(--surface-muted); }
.cmodal__foot { padding: 1rem 1.25rem; display: flex; justify-content: flex-end; gap: 0.75rem; border-top: 1px solid var(--border-muted); }

/* ============================================================
   CONTACT — the lanyard and the form
   ============================================================ */
.contact {
  container-type: inline-size; position: relative; isolation: isolate; width: 100%;
  background: var(--background); color: var(--foreground); overflow: hidden;
  padding: 6.6667cqw 2.2222cqw;
}
@media (max-width: 1023px) {
  .contact { --type-min: 13px; --copy-min-size: 16px; --head-min: 6.6667cqw; padding: 64px 24px; }
}
@media (max-width: 639px) { .contact { --head-min: 40px; padding: 56px 24px; } }
.contact__contours { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.contact__contours canvas { width: 100%; height: 100%; }
.contact__inner {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 22cqw) minmax(0, 1fr); gap: 4.4444cqw; align-items: start;
}
@media (max-width: 1023px) { .contact__inner { grid-template-columns: 1fr; gap: 40px; } }

/* the lanyard — a rope simulation on a canvas, the card hangs off it */
.lanyard { position: relative; height: 34.7222cqw; min-height: 380px; }
@media (max-width: 1023px) { .lanyard { height: 420px; } }
.lanyard canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lanyard__card {
  position: absolute; left: 50%; top: 42%; width: 11.1111cqw; min-width: 160px;
  transform: translateX(-50%); cursor: grab; touch-action: none; user-select: none;
}
.lanyard__card:active { cursor: grabbing; }
.lanyard__inner {
  position: relative; padding: 0.8333cqw; padding-top: 1.6667cqw;
  background: var(--surface-black); color: var(--foreground-on-dark);
}
@media (max-width: 1023px) { .lanyard__inner { padding: 14px; padding-top: 22px; } }
.lanyard__hole {
  position: absolute; left: 50%; top: 0.5556cqw; width: 2.2222cqw; height: 0.5556cqw;
  min-width: 26px; min-height: 7px; transform: translateX(-50%);
  border-radius: 99px; background: var(--background);
}
/* height:auto is load-bearing — the <img> carries width/height attributes,
   and a presentational height hint keeps aspect-ratio from applying. */
.lanyard__photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; }
.lanyard__initials {
  width: 100%; aspect-ratio: 1; display: none; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 2.5rem;
  color: var(--accent); background: rgb(255 255 255 / 0.05);
}
.lanyard__name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; margin-top: 0.8333cqw; font-size: max(1.1111cqw, 15px);
}
.lanyard__role {
  font-size: max(0.7639cqw, 11px); text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.9; color: var(--foreground-on-dark-muted); margin-top: 0.4167cqw;
}
.lanyard__badge {
  display: inline-block; margin-top: 0.8333cqw; padding: 0.4em 0.7em;
  font-size: max(0.6944cqw, 10px); text-transform: uppercase; letter-spacing: -0.02em;
  line-height: 0.9; color: var(--surface-black); background: var(--accent);
}
.lanyard__barcode { margin-top: 0.8333cqw; }
.lanyard__lines {
  height: 1.3889cqw; min-height: 18px;
  background: repeating-linear-gradient(to right,
    var(--foreground-on-dark) 0 2px, transparent 2px 4px,
    var(--foreground-on-dark) 4px 5px, transparent 5px 9px);
}
.lanyard__url {
  font-size: max(0.6944cqw, 10px); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--foreground-on-dark-faint); margin-top: 0.4167cqw; text-align: center;
}

/* the form */
.form { display: flex; flex-direction: column; gap: 1.6667cqw; margin-top: 2.2222cqw; }
@media (max-width: 1023px) { .form { gap: 18px; margin-top: 28px; } }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6667cqw; }
@media (max-width: 639px) { .form__row { grid-template-columns: 1fr; gap: 18px; } }
.field { display: flex; flex-direction: column; gap: 0.5556cqw; }
.field label {
  font-size: max(0.7639cqw, 11px); font-weight: 500; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.9; color: var(--foreground-muted);
}
.field input, .field textarea {
  font-family: var(--font-sans); font-size: max(0.9722cqw, 15px);
  color: var(--foreground); background: transparent; border: 0;
  border-bottom: 1px solid var(--border-muted); padding: 0.75em 0;
  transition: border-color var(--duration-normal) var(--ease-entrance);
}
.field input::placeholder, .field textarea::placeholder { color: var(--foreground-muted); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field textarea { resize: vertical; min-height: 7.6389cqw; }
@media (max-width: 1023px) { .field textarea { min-height: 120px; } }
.form__note {
  font-size: max(0.7639cqw, 11px); text-transform: uppercase; line-height: 1.3;
  letter-spacing: -0.02em; color: var(--foreground-muted);
}
.form__note.is-ok { color: var(--accent); }
.form__note.is-bad { color: var(--raw-color-orange-500); }
.contact__direct { display: flex; flex-wrap: wrap; gap: 0.8333cqw; margin-top: 1.9444cqw; }
@media (max-width: 1023px) { .contact__direct { gap: 10px; margin-top: 24px; } }

/* ============================================================
   THE CHATBOT
   ============================================================ */
.bot-toggle {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 70;
  width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center;
  color: var(--surface-black); background: var(--accent);
  transition: transform var(--duration-normal) var(--ease-plate);
}
.bot-toggle:hover { transform: translateY(-3px); }
.bot-toggle .close { display: none; }
.bot-toggle.on .open { display: none; }
.bot-toggle.on .close { display: block; }
.bot-toggle__ring {
  position: absolute; inset: 0; border: 1px solid var(--accent); pointer-events: none;
}
.bot-toggle__dot {
  position: absolute; right: -3px; top: -3px; width: 10px; height: 10px;
  background: var(--raw-color-orange-500);
}
.bot-toggle__dot.hidden { display: none; }
.bot {
  position: fixed; right: 1.5rem; bottom: 5.75rem; z-index: 70;
  width: min(23rem, calc(100vw - 3rem)); height: min(32rem, calc(100lvh - 8rem));
  display: none; flex-direction: column;
  background: var(--surface-black); color: var(--foreground-on-dark);
  border: 1px solid var(--border-on-dark);
}
.bot.open { display: flex; }
@media (max-width: 480px) {
  .bot { right: 0.75rem; left: 0.75rem; width: auto; bottom: 5.25rem; }
  .bot-toggle { right: 1rem; bottom: 1rem; }
}
.bot__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.875rem 1rem; border-bottom: 1px solid var(--border-on-dark);
}
.bot__id { display: flex; align-items: center; gap: 0.625rem; }
.bot__avatar {
  position: relative; width: 2.25rem; height: 2.25rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem;
  color: var(--surface-black); background: var(--accent);
}
.bot__name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; font-size: 0.9375rem;
}
.bot__status {
  display: flex; align-items: center; gap: 0.35em; margin-top: 0.25rem;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--foreground-on-dark-muted);
}
.bot__status i { width: 6px; height: 6px; background: var(--accent); font-style: normal; }
.bot__acts { display: flex; gap: 0.25rem; }
.bot__act {
  width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center;
  color: var(--foreground-on-dark-muted); transition: color var(--duration-fast) var(--ease-entrance);
}
.bot__act:hover { color: var(--accent); }
.bot__log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.bot__welcome { text-align: center; padding: 1rem 0.5rem; }
.bot__welcome .ic { font-size: 1.5rem; }
.bot__welcome h4 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; font-size: 1rem; margin-top: 0.5rem;
}
.bot__welcome p {
  font-size: 0.75rem; text-transform: uppercase; line-height: 1.3;
  letter-spacing: -0.02em; color: var(--foreground-on-dark-muted); margin-top: 0.5rem;
}
.bot__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.bot__chip {
  padding: 0.5em 0.75em; border: 1px solid var(--border-on-dark);
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9;
  color: var(--foreground-on-dark);
  transition: border-color var(--duration-fast) var(--ease-entrance), color var(--duration-fast) var(--ease-entrance);
}
.bot__chip:hover { border-color: var(--accent); color: var(--accent); }
.bot__msg { max-width: 85%; font-size: 0.8125rem; line-height: 1.45; }
.bot__msg p + p { margin-top: 0.5em; }
.bot__msg.user {
  align-self: flex-end; background: var(--accent); color: var(--surface-black); padding: 0.625rem 0.75rem;
}
/* not ".bot": that is the panel itself, which is display:none until opened */
.bot__msg.assistant {
  align-self: flex-start; background: rgb(255 255 255 / 0.05); padding: 0.625rem 0.75rem;
  border-left: 2px solid var(--accent);
}
.bot__msg.err { align-self: flex-start; color: var(--raw-color-orange-500); font-size: 0.75rem; }
.bot__typing { align-self: flex-start; display: flex; gap: 4px; padding: 0.75rem; }
.bot__typing i { width: 6px; height: 6px; background: var(--foreground-on-dark-muted); font-style: normal; }
.bot__foot { padding: 0.75rem; border-top: 1px solid var(--border-on-dark); }
.bot__inputwrap { display: flex; align-items: flex-end; gap: 0.5rem; }
.bot__input {
  flex: 1; font-family: var(--font-sans); font-size: 0.8125rem; color: var(--foreground-on-dark);
  background: transparent; border: 1px solid var(--border-on-dark); padding: 0.625rem 0.75rem;
  resize: none; max-height: 100px; line-height: 1.35;
}
.bot__input:focus { outline: none; border-color: var(--accent); }
.bot__input::placeholder { color: var(--foreground-on-dark-faint); }
.bot__send {
  width: 2.25rem; height: 2.25rem; flex: none; display: flex; align-items: center; justify-content: center;
  color: var(--surface-black); background: var(--accent);
  transition: opacity var(--duration-fast) var(--ease-entrance);
}
.bot__send:disabled { opacity: 0.4; cursor: default; }
.bot__by {
  margin-top: 0.5rem; font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--foreground-on-dark-faint); text-align: center;
}

/* ============================================================
   TABLET (640–1023px) — two corrections to the frame's own numbers
   ============================================================ */
@media (min-width: 640px) and (max-width: 1023px) {
  /* The frame hangs the meeting column 118 in from the right and lets its
     193 box run off the edge, because its three lines are at most 98 wide.
     Ours carries an email address, so the box has to stay inside the
     gutter or the address is clipped. */
  .paddock {
    --meet-col-w: 210px;
    --meet-left: calc(100% - 2.2222cqw - 210px);
    --meet-frame-left: calc(100% - 2.2222cqw - 223px);
  }
  /* At 640 a centred 275 call to action lands on top of the copyright.
     Lift it onto its own line above the foot row. */
  .foot {
    --cta-left: 2.2222cqw;
    --cta-shift: 0;
    --cta-bottom: calc(5cqw + 62px);
  }
}

/* ============================================================
   PHONE (< 640px) — nothing is decorative here
   The driver site hides the hero's secondary rail and both of the work
   band's panels on a phone, because there they are set dressing. On a
   portfolio they are the content: availability, the CV, the socials and
   the four figures. So they come back, in the stacked arrangement the
   block's own phone variables were written for.
   ============================================================ */
@media (max-width: 639px) {
  /* --- the career rail: the plate holds copy, so it has to grow ---------
     The frame locks each plate to 710:462 because it held a photograph.
     Here it holds the entry itself, and at 390 that copy runs 250-550 tall
     against a 182 box. The whole height chain goes static so the plate is
     sized by what is in it; the stepped clip and its outline stretch
     together, so they stay in register. */
  .trow { gap: 0.5rem; }
  .trow__plate {
    position: relative; width: 100% !important; height: auto;
    aspect-ratio: auto; margin: 0 !important;
  }
  .plateshape { position: relative; height: auto !important; top: auto !important; }
  .plateshape__fill { position: relative; inset: auto; }
  .plateshape__slot { position: relative; inset: auto; top: auto !important; }
  .tplate { position: relative; }
  .plateshape__outline { position: absolute; inset: 0; }

  /* the year leads the row rather than sitting on the copy */
  .trow__year {
    position: relative; order: -1; top: auto !important; height: auto;
    width: auto; text-align: left; font-size: 30px; margin-bottom: 0.25rem;
  }
  .trow__year .rv { justify-content: flex-start; }
  /* the frame alternates the year left/right against alternating plates;
     here every plate is full width, so alternating reads as a mistake */
  .trow--odd .trow__year { margin-left: 0; }
  .trow__copy { order: 1; }

  /* The frame sets this masthead in one row because "from karts / to f1"
     fits beside itself. These words do not, and a row let each line wrap
     on its own into "FROM / STUDENT" beside "TO / SHIPPING". */
  .timeline__head { flex-direction: column; align-items: flex-start; gap: 0; }
  /* and it needs the room those two lines actually take */
  .timeline { --top-pad-extra: 23cqw; }

  /* --- the footer sign-off ---------------------------------------------
     "keep pushing / forward" fits the frame's 240 column in two lines;
     "keep building / forward" took three and ran into the nav. Widen the
     column so it is two again, and drop the nav clear of it. */
  .foot { --head-w-min: 320px; --nav-mid: 300px; }

  /* --- hero: the CV shortcut and the socials come back ------------------
     The block's own ramp only reaches three quarters opaque, and black
     copy over the suit at that point is not readable — so the row brings
     its own ground, full-bleed past the column's gutter. */
  .hero__actions {
    gap: 0.875rem;
    margin-left: -1.5rem; margin-right: -1.5rem;
    padding: 2.25rem 1.5rem 0.25rem;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--background) 0%, transparent) 0%,
      color-mix(in srgb, var(--background) 70%, transparent) 34%,
      var(--background) 62%);
  }
  .hero__trailer { display: flex; align-items: center; }
  .hero__trailer .lines { font-size: 0.8125rem; }
  .hero__social {
    display: flex; justify-content: flex-start; gap: 1.5rem;
    font-size: 0.8125rem; text-transform: uppercase; line-height: 0.9;
  }

  /* --- the work band becomes a stack: masthead, the meeting, the four
         figures two-up, the portrait, the report, then the strip --- */
  /* The band goes solid sooner than the driver site's 60px, so the ticker
     sits on black rather than on the suit it is fading over. */
  .paddock { --fig-cap: 430px; --fig-lift: 280px; --band-fade: 26px; }
  .pnl { display: block; }
  .pcol { display: flex; }
  .pstats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px; row-gap: 14px;
  }
  /* A rule between rows only reads in a single column. */
  .pstats hr { display: none; }
  .pstats .pstatrow { height: auto; gap: 12px; align-items: center; }
  .pstats .fig { font-size: 30px; letter-spacing: -0.04em; }
  .pstats .lab { font-size: 11px; }
  .pstats img, .pstats .picon { width: 24px; font-size: 18px; }
}

/* --- the band's figure is a square cut-out, not a 1.16:1 render ---------- */
.paddock__portrait {
  aspect-ratio: 1; object-fit: contain; object-position: bottom;
  /* A square cut-out is wider at the shoulders than the 1.16:1 render the
     frame was drawn around, so the figure sits a little further left to
     leave the right-hand figures their column. */
  left: var(--fig-x-override, 56%);
}

/* --- the footer figure is a photograph here, not a helmet plate ---------- */
.foot__portrait {
  position: absolute; z-index: 11; left: 50%; bottom: 0;
  height: 88%; width: auto; max-width: none; transform: translateX(-50%);
  object-fit: contain; object-position: bottom;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
}

/* ---------------------------------------------------------------------------
   The no-WebGL hero.

   .hero__fallback holds a flat cut-out for devices that never get a scene —
   an old iOS without import maps, or one that refuses a WebGL context. The
   base rule sizes it for a landscape viewport; on a phone 92% of the height
   puts the head straight through the headline, so shrink it until the crown
   lands where the scene would have put it (about 38% down).
   --------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .hero__fallback .sub { height: 66%; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hero__fallback .sub { height: 80%; }
}

/* ============================================================
   THE DRIVER — tiga potret antara timeline dan selected work.
   Mengikuti bahasa visual yang sudah ada: latar gelap, garis
   rambut aksen, label mono huruf kecil, sudut terpotong seperti
   pelat instrumen di bagian season.
   ============================================================ */
.driver {
  position: relative;
  background: var(--surface-black);
  color: var(--raw-color-ice-50);
  padding: clamp(72px, 10vw, 140px) 0 clamp(64px, 9vw, 120px);
  overflow: hidden;
}

/* butiran halus supaya bidang hitam tidak terasa mati */
.driver__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: radial-gradient(var(--raw-color-white-alpha-10) 1px, transparent 1px);
  background-size: 3px 3px;
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}

.driver__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(18px, 5vw, 56px);
}

.driver__head { max-width: 46ch; margin-bottom: clamp(36px, 5vw, 60px); }

.driver__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: var(--raw-font-size-12);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.driver__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 7vw, var(--raw-font-size-70));
  line-height: var(--raw-leading-90);
  text-transform: lowercase;
  letter-spacing: -0.01em;
}


.driver__copy {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: var(--raw-font-size-16);
  line-height: 1.65;
  color: var(--raw-color-steel-400);
}

/* Asimetris: satu bingkai utama tinggi, dua pendamping menumpuk.
   Turun ke satu kolom di layar sempit. */
.driver__grid {
  display: grid;
  gap: clamp(14px, 2.2vw, 26px);
  grid-template-columns: 1.35fr 1fr;
  align-items: start;
}

.driver__frame { margin: 0; display: flex; flex-direction: column; gap: 12px; }

.driver__frame--lead { grid-row: span 2; }

.driver__shot {
  position: relative;
  overflow: hidden;
  background: var(--surface-dark-raised);
  border: 1px solid var(--raw-color-white-alpha-10);
  /* sudut kanan bawah terpotong, seperti pelat di bagian season */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  aspect-ratio: 4 / 5;
}

.driver__frame--lead .driver__shot { aspect-ratio: 4 / 5; height: 100%; }

.driver__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
}

.driver__frame:hover .driver__shot img,
.driver__frame:focus-within .driver__shot img {
  transform: scale(1.03);
  filter: saturate(1) contrast(1.06);
}

.driver__index {
  position: absolute;
  top: 10px;
  left: 12px;
  font-family: var(--font-sans);
  font-size: var(--raw-font-size-12);
  letter-spacing: 0.18em;
  color: var(--accent);
  background: var(--raw-color-ink-alpha-35);
  padding: 3px 8px;
  backdrop-filter: blur(6px);
}

.driver__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--accent-muted);
}

.driver__label {
  font-family: var(--font-sans);
  font-size: var(--raw-font-size-12);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.driver__caption {
  font-family: var(--font-sans);
  font-size: var(--raw-font-size-14);
  line-height: 1.5;
  color: var(--raw-color-steel-400);
}

@media (max-width: 860px) {
  .driver__grid { grid-template-columns: 1fr 1fr; }
  .driver__frame--lead { grid-column: 1 / -1; grid-row: auto; }
  .driver__frame--lead .driver__shot { aspect-ratio: 3 / 2; }
}

@media (max-width: 520px) {
  .driver__grid { grid-template-columns: 1fr; }
  .driver__frame--lead .driver__shot { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .driver__shot img { transition: none; }
  .driver__frame:hover .driver__shot img { transform: none; }
}

/* Bingkai utama merentang penuh setinggi dua bingkai pendamping.
   aspect-ratio dilepas di sini karena bertabrakan dengan height:100%
   dan membuat kolom kiri jauh lebih pendek dari kolom kanan. */
@media (min-width: 861px) {
  .driver__frame--lead { height: 100%; }
  .driver__frame--lead .driver__shot {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
  }
}

/* Titik aksen menempel pada judul, tidak pernah pindah baris sendiri. */
.driver__title .rv { display: inline-flex; vertical-align: baseline; }
.driver__title::after { content: "."; color: var(--accent); }

/* ============================================================
   THE DECK — the portfolio PDF, between the work and the certificates
   ============================================================ */
.deck {
  container-type: inline-size; position: relative; isolation: isolate; width: 100%;
  background: var(--surface-muted); color: var(--foreground);
  padding: 6.6667cqw 2.2222cqw; overflow: hidden;
}
@media (max-width: 1023px) {
  .deck { --type-min: 13px; --copy-min-size: 16px; --head-min: 6.6667cqw; padding: 64px 24px; }
}
@media (max-width: 639px) { .deck { --head-min: 40px; padding: 56px 24px; } }
.deck__body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 4.4444cqw; align-items: center;
}
@media (max-width: 1023px) { .deck__body { grid-template-columns: 1fr; gap: 40px; } }

/* three slides fanned behind one another; they spread on hover */
.deck__stack { position: relative; display: block; aspect-ratio: 16 / 10.6; }
.deck__slide {
  position: absolute; width: 84%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--border-muted); background: var(--surface-black);
  box-shadow: 0 1.2cqw 3cqw rgb(9 10 11 / 0.16);
  transition: transform var(--duration-plate) var(--ease-plate);
}
.deck__slide--1 { left: 0; bottom: 0; z-index: 3; }
.deck__slide--2 { left: 8%; bottom: 7%; z-index: 2; transform: rotate(1.5deg); }
.deck__slide--3 { left: 16%; bottom: 14%; z-index: 1; transform: rotate(3deg); }
@media (hover: hover) {
  .deck__stack:hover .deck__slide--1 { transform: translateY(-1.5%); }
  .deck__stack:hover .deck__slide--2 { transform: translate(3%, -4%) rotate(2.5deg); }
  .deck__stack:hover .deck__slide--3 { transform: translate(6%, -8%) rotate(4.5deg); }
}
.deck__open {
  position: absolute; left: 1.1111cqw; bottom: 1.1111cqw; z-index: 4;
  padding: 0.7em 1em; background: var(--accent); color: var(--surface-black);
  font-size: max(0.8333cqw, 12px); text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.9;
}
@media (max-width: 1023px) { .deck__open { left: 12px; bottom: 12px; } }

.deck__info { position: relative; padding: 2.2222cqw; background: var(--background); }
@media (max-width: 1023px) { .deck__info { padding: 24px 20px; } }
.deck__info .bk { position: absolute; width: 0.6944cqw; height: 0.6944cqw; color: var(--accent); }
@media (max-width: 1023px) { .deck__info .bk { width: 10px; height: 10px; } }
.deck__meta {
  display: flex; flex-wrap: wrap; gap: 0.6em 1.4em;
  font-size: max(0.8333cqw, var(--type-min, 0px)); text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.9; color: var(--accent);
}
.deck__parts { list-style: none; margin: 1.6667cqw 0 0; padding: 0; }
@media (max-width: 1023px) { .deck__parts { margin-top: 20px; } }
.deck__parts li {
  display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 0.8333cqw;
  padding: 1.1111cqw 0; border-top: 1px solid var(--border-muted);
}
@media (max-width: 1023px) { .deck__parts li { gap: 12px; padding: 14px 0; } }
.deck__parts b {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.06em;
  line-height: 0.8; color: var(--accent); font-size: max(1.9444cqw, 24px);
}
.deck__parts span {
  text-transform: uppercase; line-height: 1.25; color: var(--foreground-muted);
  font-size: max(0.9722cqw, var(--copy-min-size, 0px));
}
.deck__parts strong {
  display: block; margin-bottom: 0.35em; color: var(--foreground);
  font-family: var(--font-display); font-weight: 700; line-height: 0.95;
  font-size: max(1.3889cqw, 18px);
}
.deck__links { margin-top: 1.6667cqw; display: flex; flex-wrap: wrap; gap: 0.5556cqw; }
@media (max-width: 1023px) { .deck__links { margin-top: 20px; gap: 8px; } }