/* Cross-document view transitions: opts every page sharing this stylesheet
   into a native cross-fade when navigating between them. Chrome/Edge 126+
   only; other browsers ignore the unknown at-rule and just navigate normally. */
@view-transition {
  navigation: auto;
}

/* palette: İznik çini on white — THY red, cobalt, turquoise, leaf green,
   one color per project. thy-globe.html overrides tokens to stay dark red. */
:root {
  --bg: #faf7f2;
  --bg-alt: #f1ece4;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-strong: rgba(255, 255, 255, 0.92);
  --text: #2b2732;
  --muted: #6f6878;
  --line: rgba(43, 39, 50, 0.12);
  --accent: #e81932;
  --accent-2: #c0122a;
  --cobalt: #24439b;
  --turquoise: #1f9e93;
  --leaf: #3e8e4e;
  --plum: #7a3e9e;
  --gold: #c98a1a;
  --rust: #b5502e;
  --shadow: 0 24px 60px rgba(58, 40, 28, 0.12);
  --radius: 24px;
  /* the text rail: every panel is a card with 28px padding inside a 1px
     border, so its TEXT starts 29px in from the shared container edge. The
     header and footer have no card, so they pad by hand to sit on the same
     line — otherwise the brand hangs 29px left of every heading below it. */
  --rail: 29px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(232, 25, 50, 0.05), transparent 30%),
    radial-gradient(circle at top right, rgba(232, 25, 50, 0.035), transparent 26%),
    linear-gradient(180deg, #fdfbf7 0%, #f7f2ea 55%, #f2ece1 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* çini wallpaper: upright tulips on a rhombic lattice (tall diamonds tile the
     plane, tulip at every vertex + faint construction lines — per Ahmet's sketch) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='180'%3E%3Cdefs%3E%3Cg id='t'%3E%3Cpath fill='%23e81932' d='M32 52C26 51 23 47.5 22.5 43C19.5 38 18 32 18.5 25C18.8 19 16 12 9 6.5C14 13.5 19 21 23.5 25.5C25 18 27.5 10 32 4.5C36.5 10 39 18 40.5 25.5C45 21 50 13.5 55 6.5C48 12 45.2 19 45.5 25C46 32 44.5 38 41.5 43C41 47.5 38 51 32 52Z'/%3E%3Cg fill='%233e8e4e'%3E%3Cpath d='M31 64.5C21 62.5 12.5 55 10.5 42.5C11.2 42 12 42 13 42.4C19 45.2 27 52 31 64.5Z'/%3E%3Cpath d='M33 76C43 74 51.5 66.5 53.5 54C52.8 53.5 52 53.5 51 53.9C45 56.7 37 63.5 33 76Z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%233e8e4e' stroke-width='2.6' stroke-linecap='round' d='M32 52C31 62 33 78 32 94'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M0 0L110 180M110 0L0 180' stroke='%23b89d6f' stroke-opacity='.7' fill='none'/%3E%3Cg fill-opacity='.5' stroke-opacity='.5'%3E%3Cuse href='%23t' transform='translate(-9.6 -14.4) scale(.3)'/%3E%3Cuse href='%23t' transform='translate(100.4 -14.4) scale(.3)'/%3E%3Cuse href='%23t' transform='translate(-9.6 165.6) scale(.3)'/%3E%3Cuse href='%23t' transform='translate(100.4 165.6) scale(.3)'/%3E%3Cuse href='%23t' transform='translate(45.4 75.6) scale(.3)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 110px 180px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 100%);
  opacity: 0.2;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
}

.site-header,
.hero,
.section,
.footer {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--rail) 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #c0122a, #e81932);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
}

.brand strong,
.section-heading h1,
.section-heading h2,
.hero h1,
.card h3,
.timeline-item h3,
.contact h2 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.03em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.tile:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 4px;
}

.brand small,
.site-nav a,
.eyebrow,
.card-tag,
.footer,
.timeline-item span,
.skill-list span,
.hero-text,
.about-grid p,
.card p,
.timeline-item p,
.contact p {
  color: var(--muted);
}

.site-nav {
  display: flex;
  align-items: center;
  /* without this the row defaults to stretch: the 34px language pill sets the
     line height, the text links stretch to match it, and their text renders at
     the TOP of that box — ~6px above the pill's centre. */
  gap: 20px;
  flex-wrap: wrap;
}

.site-nav a {
  text-decoration: none;
  font-size: 0.95rem;
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  padding: 44px 0 18px;
  align-items: stretch; /* panel matches the copy's height */
}

.hero-copy,
.hero-panel,
.section,
.card,
.timeline,
.contact {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

.hero-copy,
.hero-panel,
.section,
.contact {
  padding: 28px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  margin: 0 0 12px;
  color: var(--cobalt);
}

/* the tulip: national symbol, our own drawing (the THY livery tulip is trade dress).
   Drawn at 64x96 for organic curves, scaled down everywhere it's used. */
.tulip {
  display: inline-block;
  width: 13px;
  height: 20px;
  vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 96'%3E%3Cpath fill='%23e81932' d='M32 52C26 51 23 47.5 22.5 43C19.5 38 18 32 18.5 25C18.8 19 16 12 9 6.5C14 13.5 19 21 23.5 25.5C25 18 27.5 10 32 4.5C36.5 10 39 18 40.5 25.5C45 21 50 13.5 55 6.5C48 12 45.2 19 45.5 25C46 32 44.5 38 41.5 43C41 47.5 38 51 32 52Z'/%3E%3Cg fill='%233e8e4e'%3E%3Cpath d='M31 64.5C21 62.5 12.5 55 10.5 42.5C11.2 42 12 42 13 42.4C19 45.2 27 52 31 64.5Z'/%3E%3Cpath d='M33 76C43 74 51.5 66.5 53.5 54C52.8 53.5 52 53.5 51 53.9C45 56.7 37 63.5 33 76Z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%233e8e4e' stroke-width='2.6' stroke-linecap='round' d='M32 52C31 62 33 78 32 94'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* tulip divider under section headings, drawn from the çini motif */
.section-heading h1::after,
.section-heading h2::after,
.contact h2::after {
  content: "";
  display: block;
  width: 132px;
  height: 18px;
  margin-top: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 18'%3E%3Cpath d='M0 9h48M84 9h48' stroke='%232b2732' stroke-opacity='.25' stroke-width='1'/%3E%3Cg transform='translate(60.6 .9) scale(.17)'%3E%3Cpath fill='%23e81932' d='M32 52C26 51 23 47.5 22.5 43C19.5 38 18 32 18.5 25C18.8 19 16 12 9 6.5C14 13.5 19 21 23.5 25.5C25 18 27.5 10 32 4.5C36.5 10 39 18 40.5 25.5C45 21 50 13.5 55 6.5C48 12 45.2 19 45.5 25C46 32 44.5 38 41.5 43C41 47.5 38 51 32 52Z'/%3E%3Cg fill='%233e8e4e'%3E%3Cpath d='M31 64.5C21 62.5 12.5 55 10.5 42.5C11.2 42 12 42 13 42.4C19 45.2 27 52 31 64.5Z'/%3E%3Cpath d='M33 76C43 74 51.5 66.5 53.5 54C52.8 53.5 52 53.5 51 53.9C45 56.7 37 63.5 33 76Z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%233e8e4e' stroke-width='2.6' stroke-linecap='round' d='M32 52C31 62 33 78 32 94'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

.hero h1 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 5.4rem);
  line-height: 0.93;
  max-width: 10ch;
}

.hero-text {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 60ch;
  margin: 18px 0 0;
}

.hero-actions,
.contact-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button.primary {
  color: #fff;
  background: linear-gradient(135deg, #c0122a, var(--accent));
}

.button.secondary {
  color: var(--text);
  border: 1px solid rgba(43, 39, 50, 0.18);
  background: rgba(255, 255, 255, 0.6);
}

.contact-form {
  display: grid;
  gap: 12px;
  width: min(100%, 380px);
}

.contact-form label {
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}

.contact-form input,
.contact-form textarea {
  font: inherit;
  color: var(--text);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.contact-form button {
  margin-top: 4px;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.88rem;
}

.form-status.ok {
  color: var(--leaf);
}

.form-status.err {
  color: var(--accent);
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hero-metrics {
  margin-top: 28px;
}

.hero-metrics article {
  padding: 14px;
  border-radius: 18px;
  background: rgba(43, 39, 50, 0.035);
  border: 1px solid rgba(43, 39, 50, 0.08);
}

.hero-metrics strong {
  display: block;
  font-size: 1.25rem;
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
}

.hero-metrics span {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--muted);
}

.hero-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 240, 231, 0.82));
}

.panel-shell {
  display: grid;
  grid-template-rows: auto 1fr; /* treemap absorbs whatever height the copy sets */
  gap: 18px;
  height: 100%;
}

.panel-top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.95rem;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(232, 25, 50, 0.55);
}

/* treemap: tile area and tint scale with project scope; uneven ROW heights
   keep the seams from lining up symmetrically.
   Two columns, not three: the hero panel is only ~435px wide at a 1120px
   desktop, so a third track left ~67px of text and broke "prediction" onto
   its own line. Two columns give every tile ~170px+ at every width, which is
   what lets all the labels share one type size. */
.treemap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1.9fr 1fr 0.9fr 0.9fr;
  gap: 10px;
  min-height: 320px; /* floor for when the hero stacks to one column */
}

.treemap .tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(43, 39, 50, 0.08);
  text-decoration: none;
  transition: filter 200ms ease, transform 200ms ease;
}

.treemap .tile:hover {
  filter: brightness(0.96);
  transform: translateY(-2px);
}

.treemap .tile strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem; /* one size across every tile — the grid gives them room */
  line-height: 1.18;
  text-wrap: balance; /* spread the wrap evenly instead of one orphan word */
  overflow-wrap: break-word; /* safety net on a 320px phone, never reached above */
  color: var(--text);
}

.treemap .tile-tag,
.treemap .tile-note {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--muted);
}

/* the strongest project keeps the full-width top row — Universal bearing RUL,
   not the flight globe, so the tile sizes actually match project hierarchy */
.t-xds {
  grid-area: 1 / 1 / 2 / 3;
  background: rgba(122, 62, 158, 0.16);
}

.t-xds strong {
  font-size: 1.4rem;
}

/* "prediction" is the longest word on the board, so this one takes the wider
   1.15fr column — that alone keeps it on one line down to a 320px phone */
.t-ml {
  grid-area: 2 / 1 / 3 / 2;
  background: rgba(36, 67, 155, 0.13);
}

.t-globe {
  grid-area: 2 / 2 / 3 / 3;
  background: rgba(232, 25, 50, 0.14);
}

.t-reducer {
  grid-area: 3 / 1 / 4 / 2;
  background: rgba(181, 80, 46, 0.15);
}

.t-rig {
  grid-area: 3 / 2 / 4 / 3;
  background: rgba(62, 142, 78, 0.13);
}

.t-phase2 {
  grid-area: 4 / 1 / 5 / 2;
  background: rgba(192, 18, 42, 0.14);
}

.t-hubs {
  grid-area: 4 / 2 / 5 / 3;
  background: rgba(201, 138, 26, 0.15);
}

.section {
  margin-top: 18px;
}

.section-heading h1,
.section-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
  max-width: 14ch;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 12px;
}

.about-grid p,
.card p,
.timeline-item p,
.contact p {
  line-height: 1.75;
  margin: 0;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.card {
  padding: 24px;
  background: var(--panel-strong);
}

.card-tag {
  display: inline-flex;
  margin-bottom: 12px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* one çini color per project, assigned by identity (not grid position) so
   cards can be regrouped by hierarchy without their color jumping around. */
.project-grid .card {
  border-top: 3px solid var(--line);
}

.card-teal { border-top-color: var(--turquoise); }
.card-cobalt { border-top-color: var(--cobalt); }
.card-plum { border-top-color: var(--plum); }
.card-red { border-top-color: var(--accent); }
.card-leaf { border-top-color: var(--leaf); }
.card-gold { border-top-color: var(--gold); }
.card-rust { border-top-color: var(--rust); }

.card-teal .card-tag { color: var(--turquoise); }
.card-cobalt .card-tag { color: var(--cobalt); }
.card-plum .card-tag { color: var(--plum); }
.card-red .card-tag { color: var(--accent); }
.card-leaf .card-tag { color: var(--leaf); }
.card-gold .card-tag { color: var(--gold); }
.card-rust .card-tag { color: var(--rust); }

/* project-group sub-headings inside the Projects section (Flagship / Aviation
   Data / University project) */
.group-heading {
  grid-column: 1 / -1;
  margin: 30px 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.group-note {
  grid-column: 1 / -1;
  margin: 2px 0 4px;
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 62ch;
}

/* compact numeric metrics inside a card — used only where the number is real */
.card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 18px 0 0;
}

.card-metrics div {
  display: flex;
  flex-direction: column;
}

.card-metrics strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.card-metrics span {
  margin-top: 2px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

/* BiggerBrother card: on hover it recolors into the app's own dark/scanner-green
   palette (pulled from its repo logo) instead of the site's çini set, with a
   momentary glitch — fits a security tool, and it's the only project whose
   card intentionally breaks the site's light theme. */
.card-bb {
  --bb-bg: #0a0d13;
  --bb-line: #232c3d;
  --bb-accent: #4ade80; /* logo's scanner green — only readable on the dark hover bg */
  --bb-accent-light: #15803d; /* same hue, darkened for contrast on the light card */
  border-top-color: var(--bb-accent-light);
  transition: background-color 380ms ease, border-color 380ms ease, box-shadow 380ms ease;
}
.card-bb .card-tag { color: var(--bb-accent-light); transition: color 380ms ease; }
.card-bb h3 { transition: color 380ms ease, text-shadow 150ms steps(3, end); }
.card-bb p,
.card-bb ul,
.card-bb .card-link { transition: color 380ms ease; }

.card-bb:hover {
  background: var(--bb-bg);
  border-color: var(--bb-line);
  box-shadow: 0 24px 60px rgba(10, 13, 19, 0.5);
  animation: bb-glitch 320ms steps(2, end) 1;
}
.card-bb:hover .card-tag,
.card-bb:hover .card-link { color: var(--bb-accent); }
.card-bb:hover h3 { color: #f2f6f3; animation: bb-glitch-text 320ms steps(2, end) 1; }
.card-bb:hover p,
.card-bb:hover ul { color: #92a09c; }

/* higher specificity than .offclock-card's own border-top shorthand, so BB
   keeps its green identity when placed among the gold-bordered experiments */
.offclock-card.card-bb { border-top-color: var(--bb-accent-light); }

@keyframes bb-glitch {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 1px); }
  100% { transform: translate(0, 0); }
}

@keyframes bb-glitch-text {
  0%, 100% { text-shadow: none; }
  25% { text-shadow: -2px 0 #ff2965, 2px 0 var(--bb-accent); }
  50% { text-shadow: 2px 0 #ff2965, -2px 0 var(--bb-accent); }
  75% { text-shadow: -1px 0 #ff2965, 1px 0 var(--bb-accent); }
}

.card h3,
.timeline-item h3 {
  margin: 0 0 10px;
  font-size: 1.4rem;
}

/* the one "sized by scope" card that gets the full-width, larger treatment —
   reserved for the strongest project (Universal Bearing RUL) */
.card-hero {
  grid-column: 1 / -1;
  padding: 32px;
}

.card-hero h3 {
  font-size: 2rem;
}

.card-hero > p {
  max-width: 65ch;
  font-size: 1.05rem;
}

.card-hero .card-metrics strong {
  font-size: 1.4rem;
}

.card ul {
  margin: 20px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
}

.card ul + p {
  margin-top: 14px;
}

.card-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--accent-2);
  font-weight: 700;
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 18px;
  align-items: start;
}

/* "Off the clock" — a passion project, kept apart from the engineering grid */
.offclock-card {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  margin-top: 18px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  background: var(--panel-strong);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  transition: transform 200ms ease;
}
.offclock-card:hover { transform: translateY(-3px); }
.offclock-media { position: relative; min-height: 260px; background: #23262c; }
.offclock-media img,
.offclock-media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offclock-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(255, 255, 255, 0.14));
}
.offclock-body { padding: 30px; }
.offclock-body .card-tag { color: var(--gold); }
.offclock-body h3 {
  margin: 0 0 10px;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.02em;
  font-size: 1.5rem;
}
.offclock-body ul { margin: 18px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.7; }
.offclock-body .card-link { color: var(--accent-2); }

@media (max-width: 720px) {
  .offclock-card { grid-template-columns: 1fr; }
  .offclock-media { min-height: 200px; }
}

/* lets an offclock-style photo card sit inside the 2-col project grid
   (e.g. the IST history story, grouped visually with the aviation-data cards) */
.project-grid .offclock-card {
  grid-column: 1 / -1;
  margin-top: 0;
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cert {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 10px 20px 10px 12px;
  border-radius: 20px;
  border: 1px solid rgba(43, 39, 50, 0.12);
  background: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  color: var(--text);
  transition: transform 180ms ease, border-color 180ms ease;
}

.cert:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 25, 50, 0.35);
}

.cert img {
  width: 72px;
  height: 72px;
}

.cert strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem;
}

.cert small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.skill-list span:nth-child(4n + 1) {
  border-color: rgba(232, 25, 50, 0.35);
  background: rgba(232, 25, 50, 0.05);
}

.skill-list span:nth-child(4n + 2) {
  border-color: rgba(36, 67, 155, 0.35);
  background: rgba(36, 67, 155, 0.05);
}

.skill-list span:nth-child(4n + 3) {
  border-color: rgba(31, 158, 147, 0.35);
  background: rgba(31, 158, 147, 0.05);
}

.skill-list span:nth-child(4n) {
  border-color: rgba(62, 142, 78, 0.35);
  background: rgba(62, 142, 78, 0.05);
}

.skill-list span {
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(43, 39, 50, 0.12);
  background: rgba(255, 255, 255, 0.55);
}

.timeline-section {
  padding-bottom: 32px;
}

.timeline {
  margin-top: 18px;
  padding: 8px;
  display: grid;
  gap: 8px;
  background: rgba(43, 39, 50, 0.05);
}

.timeline-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(43, 39, 50, 0.08);
}

.timeline-item span {
  font-weight: 700;
  color: var(--cobalt);
}

.contact {
  margin: 18px auto 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.contact h2 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 var(--rail) 36px;
  font-size: 0.92rem;
}

.footer-links {
  display: flex;
  gap: 16px;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}

[data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .hero,
  .project-grid,
  .about-grid,
  .split,
  .contact {
    grid-template-columns: 1fr;
  }

  .hero,
  .split,
  .contact {
    display: grid;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    grid-template-columns: 1fr;
  }

  .contact {
    justify-content: start;
  }
}

@media (max-width: 720px) {
  :root {
    --rail: 23px; /* cards drop to 22px padding here, +1px border */
  }

  .site-header,
  .hero,
  .section,
  .footer {
    width: min(100% - 24px, 1120px);
  }

  .site-header {
    align-items: start;
    flex-direction: column;
    gap: 14px;
  }

  .hero-copy,
  .hero-panel,
  .section,
  .contact {
    padding: 22px;
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .treemap {
    min-height: 260px;
  }

  .treemap .tile {
    padding: 11px;
  }

  .footer {
    flex-direction: column;
    align-items: start;
  }
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}

.lang-toggle:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}

/* easter egg: typing "concorde" anywhere flies a plane across the screen, see script.js */
.easter-plane {
  position: fixed;
  top: 16vh;
  left: -14vw;
  width: 120px;
  height: 36px;
  color: var(--accent, #e81932);
  z-index: 9999;
  pointer-events: none;
  transform: rotate(-6deg);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
  animation: easter-fly 2.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes easter-fly {
  0% { left: -14vw; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 108vw; opacity: 0; }
}

.easter-boom {
  position: fixed;
  top: calc(16vh + 18px);
  left: 50vw;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid var(--accent, #e81932);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  animation: easter-boom 0.7s ease-out forwards;
  animation-delay: 1.3s;
}

@keyframes easter-boom {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(14); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .easter-plane, .easter-boom { animation: none; display: none; }
  .card-bb:hover, .card-bb:hover h3 { animation: none; }
}

/* Per-page custom cursors (DIN 912 screw / bearing / plane): see script.js */
@media (pointer: fine) {
  [data-cursor], [data-cursor] * { cursor: none !important; }
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.15s ease, color 200ms ease;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.custom-cursor.active { opacity: 1; }
.custom-cursor svg { width: 100%; height: 100%; display: block; }
.custom-cursor[data-mode="din"],
.custom-cursor[data-mode="bearing"] { color: var(--text); }
.custom-cursor[data-mode="plane"] { color: var(--turquoise); }
.custom-cursor[data-mode="concorde"] {
  width: 32px;
  height: 50px;
  color: var(--accent);
}
.custom-cursor[data-mode="concorde"] svg { shape-rendering: crispEdges; }

/* card-bb's hover flips its background near-black — keep the cursor visible on it */
body:has(.card-bb:hover) .custom-cursor { color: #fff; }