/* =============================================================
   Rachit Ratnam Mudaliar — site styles
   Fonts are self-hosted (SIL Open Font License), so the page
   makes no requests to other servers.
   ============================================================= */

@font-face {
  font-family: "Inter Display";
  src: url("/assets/fonts/inter-display-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("/assets/fonts/inter-display-600.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-var.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-italic-var.woff") format("woff");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}


/* =============================================================
   Tokens: deep blue, white, bubblegum pink
   ============================================================= */
:root {
  --blue: #09318d;
  --blue-deep: #061f5c;
  --blue-mid: #1d4fd6;
  --blue-soft: #e8eefc;
  --pink: #fd91cc;
  --pink-strong: #f0569f;
  --white: #ffffff;

  --paper: #f5f7fd;
  --surface: #ffffff;
  --ink: #0b1533;
  --graphite: #4b5878;
  --rule: #dfe5f3;
  --accent: #09318d;
  --accent-ink: #ffffff;
  --grid: rgba(9, 49, 141, 0.06);
  --card-shadow: 0 24px 60px -28px rgba(9, 49, 141, 0.45);

  --sans: "Inter Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Lora", ui-serif, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 76rem;
  --radius: 22px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #050c22;
  --surface: #0c1738;
  --ink: #eef2ff;
  --graphite: #a5b2d6;
  --rule: #1d2a52;
  --accent: #fd91cc;
  --accent-ink: #050c22;
  --blue-soft: #10204a;
  --grid: rgba(253, 145, 204, 0.06);
  --card-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #050c22;
    --surface: #0c1738;
    --ink: #eef2ff;
    --graphite: #a5b2d6;
    --rule: #1d2a52;
    --accent: #fd91cc;
    --accent-ink: #050c22;
    --blue-soft: #10204a;
    --grid: rgba(253, 145, 204, 0.06);
    --card-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: 0.6rem 1rem; background: var(--pink); color: var(--blue-deep); font-weight: 600; border-radius: 999px; }
.skip:focus { top: 1rem; }

/* ---------- Header: glass pill bar ---------- */
.top { position: fixed; top: 0.9rem; left: 0; right: 0; z-index: 40; padding: 0 var(--gutter); pointer-events: none; }
.top__inner {
  pointer-events: auto;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 0.45rem 0.4rem 0.9rem;
  color: var(--white);
  background: rgba(6, 31, 92, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; text-decoration: none; font-weight: 600; }
.brand__mark {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px;
  background: linear-gradient(135deg, var(--pink), var(--pink-strong));
  color: var(--blue-deep); font-size: 0.8rem; letter-spacing: -0.02em;
}
.nav { display: flex; gap: 0.2rem; margin: 0 auto; padding: 0.2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.95rem;
  border-radius: 999px; text-decoration: none; font-size: 0.92rem; color: rgba(255, 255, 255, 0.82);
}
.nav a:hover, .nav a[aria-current="true"] { background: rgba(255, 255, 255, 0.16); color: var(--white); }
.tools { display: flex; gap: 0.35rem; margin-left: auto; }
.tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 44px; min-width: 44px; padding: 0 0.9rem;
  font: 500 0.88rem/1 var(--sans); color: var(--white); text-decoration: none;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px; cursor: pointer;
}
.tool:hover { background: rgba(255, 255, 255, 0.18); }
.tool--cta { background: var(--white); color: var(--blue); border-color: var(--white); font-weight: 600; }
.tool--cta:hover { background: var(--pink); border-color: var(--pink); color: var(--blue-deep); }
.tool__icon { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
:root[data-theme="light"] .tool__icon { background: transparent; }
:root[data-theme="dark"] .tool__icon { background: currentColor; }
.tool__dot { width: 0.55rem; height: 0.55rem; border: 1.5px dashed var(--pink); border-radius: 2px; }
.tool--inspect[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: var(--blue-deep); }
.tool--inspect[aria-pressed="true"] .tool__dot { border-color: var(--blue-deep); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.75rem 1.5rem; border-radius: 999px;
  font: 600 0.98rem/1 var(--sans); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--pink { background: linear-gradient(135deg, var(--pink) 0%, var(--pink-strong) 100%); color: var(--blue-deep); box-shadow: 0 12px 30px -12px rgba(240, 86, 159, 0.8); }
.btn--glass { background: rgba(255, 255, 255, 0.12); color: var(--white); border-color: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.22); }
.btn--small { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.9rem; }

/* =============================================================
   Hero: the gradient
   ============================================================= */
.hero, .contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background:
    radial-gradient(60% 45% at 50% 108%, rgba(253, 145, 204, 0.55), transparent 70%),
    radial-gradient(50% 60% at 85% 10%, rgba(80, 140, 255, 0.55), transparent 70%),
    radial-gradient(45% 50% at 10% 30%, rgba(29, 79, 214, 0.65), transparent 70%),
    linear-gradient(180deg, var(--blue-deep) 0%, var(--blue) 45%, var(--blue-mid) 100%);
}
.hero { padding: 9rem var(--gutter) 0; border-radius: 0 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px); }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 32%; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.92));
}
:root[data-theme="dark"] .hero::after { background: linear-gradient(180deg, transparent, rgba(5, 12, 34, 0.95)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::after { background: linear-gradient(180deg, transparent, rgba(5, 12, 34, 0.95)); } }

/* Pixel-dust texture, faded towards the centre */
.hero__dots {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.4px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 40%, transparent 35%, #000 100%);
  mask-image: radial-gradient(75% 60% at 50% 40%, transparent 35%, #000 100%);
  opacity: 0.55;
}
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 46rem; height: 46rem; left: 50%; top: 28%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(130, 170, 255, 0.35), transparent 65%);
  filter: blur(10px);
}

.hero__inner { max-width: 52rem; margin: 0 auto; text-align: center; }
.hero__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); }
.hero__tags li::before { content: "→ "; color: var(--pink); }
.hero__name {
  margin-top: 1.4rem;
  font-size: clamp(2.8rem, 7.6vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, #ffffff 30%, #cfe0ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.hero__lead { margin: 1.5rem auto 0; max-width: 40rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, 0.86); font-weight: 400; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 2rem; }

/* Floating dashboard cards */
.hero__cards {
  position: relative;
  max-width: var(--max);
  margin: clamp(3rem, 7vw, 5rem) auto 0;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: end;
  transform: translateY(2.5rem);
}
.card {
  position: relative;
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem 1.5rem;
  box-shadow: var(--card-shadow);
}
.card--white { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); }
.card--pink {
  color: var(--white);
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%),
    linear-gradient(160deg, #ffb0d9 0%, var(--pink) 35%, var(--pink-strong) 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.card--blue {
  color: var(--white);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(253, 145, 204, 0.35), transparent 70%),
    linear-gradient(150deg, var(--blue-mid), var(--blue) 55%, var(--blue-deep));
}
.hero__cards .card--white { transform: rotate(-1.5deg); }
.hero__cards .card--white:last-child { transform: rotate(1.5deg); }
.card--photo { padding-bottom: 0; overflow: hidden; transform: translateY(-1.5rem); }

.card__label { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 1rem; }
.card__label--light { color: var(--white); }
.dot { width: 0.7rem; height: 0.7rem; border-radius: 4px; flex: none; }
.dot--blue { background: var(--blue-mid); }
.dot--pink { background: var(--pink-strong); }
.dot--white { background: var(--white); }

/* Language bars */
.bars li { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: 0.7rem; padding: 0.45rem 0; font-size: 0.9rem; }
.bars__name { color: var(--graphite); }
.bars__track { height: 0.6rem; border-radius: 999px; background: var(--blue-soft); overflow: hidden; }
.bars__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-mid), var(--pink-strong)); }
.bars__fill--100 { width: 100%; }
.bars__fill--90 { width: 88%; }
.bars__fill--15 { width: 18%; }
.bars__val { font-size: 0.8rem; font-weight: 600; min-width: 3.6rem; text-align: right; }

/* Photo inside a gauge arc */
.gauge {
  position: relative;
  width: min(100%, 17rem);
  aspect-ratio: 1;
  margin: 0.25rem auto -3.5rem;
  border-radius: 50%;
  padding: 0.7rem;
  background:
    repeating-conic-gradient(from -120deg, rgba(255, 255, 255, 0.85) 0 1deg, transparent 1deg 4deg);
  -webkit-mask: radial-gradient(circle, #000 69%, transparent 69.5%, transparent 70.5%, #000 71%);
}
.gauge img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.85); }

/* At a glance */
.glance > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); font-size: 0.9rem; }
.glance > div:last-child { border-bottom: 0; }
.glance dt { color: var(--graphite); }
.glance dd { font-weight: 600; text-align: right; }

/* =============================================================
   Sections
   ============================================================= */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(5rem, 9vw, 7.5rem) var(--gutter) 0; }
.hero + .section { padding-top: clamp(7rem, 12vw, 9.5rem); }
.eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--pink-strong); }
.eyebrow::before { content: ""; width: 1.4rem; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--light { color: var(--pink); }
.section__title { margin-top: 0.6rem; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.05; letter-spacing: -0.035em; max-width: 18ch; text-wrap: balance; }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; margin-top: 2rem; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.7; color: var(--graphite); }

/* Journey */
.journey { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 2.25rem; align-items: start; }
.map { padding: 1rem 1.1rem 1.3rem; position: sticky; top: 6rem; }
.map svg { width: 100%; height: auto; display: block; overflow: visible; }
.map__compact { display: none !important; }
.map .grat { stroke: var(--rule); stroke-width: 1; }
.map .grat-label { font: 500 11px var(--mono); fill: var(--graphite); }
.map .route { fill: none; stroke: var(--blue-mid); stroke-width: 2.2; stroke-dasharray: 6 5; stroke-linecap: round; }
.map .route--long { stroke: var(--pink-strong); }
.map .pt { fill: var(--surface); stroke: var(--blue-mid); stroke-width: 2.2; }
.map .pt--now { fill: var(--pink-strong); stroke: var(--pink-strong); }
.map .num { font: 600 11px var(--sans); fill: var(--blue-mid); text-anchor: middle; dominant-baseline: central; }
.map .num--now { fill: var(--white); }
.map .num--lg { font-size: 13px; }
.map .lbl { font: 600 13px var(--sans); fill: var(--ink); }
.map .lbl--lg { font-size: 17px; }
.map .sub { font: 500 10px var(--mono); fill: var(--graphite); }
.map .dist { font: 600 10.5px var(--mono); fill: var(--pink-strong); }
.map .inset { fill: var(--blue-soft); stroke: var(--rule); stroke-width: 1; }
.map .leader { stroke: var(--graphite); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.map .detail { fill: none; stroke: var(--graphite); stroke-width: 1.2; }

.chapters { display: grid; gap: 0.7rem; }
.chapters li {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.1rem 0.9rem;
  padding: 1rem 1.2rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule);
}
.chapters__n {
  grid-row: span 3; width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border-radius: 10px; background: var(--blue-soft); color: var(--blue-mid); font-size: 0.85rem; font-weight: 600;
}
.chapters__now { background: linear-gradient(150deg, var(--blue-mid), var(--blue)) !important; color: var(--white); border-color: transparent !important; }
.chapters__now .chapters__n { background: var(--pink); color: var(--blue-deep); }
.chapters__when { font-size: 0.78rem; color: var(--graphite); }
.chapters__now .chapters__when { color: var(--pink); }
.chapters h3 { font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.3; }
.chapters li > p:last-child { font-size: 0.93rem; color: var(--graphite); font-weight: 400; }
.chapters .chapters__now > p:last-child { color: rgba(255, 255, 255, 0.85); }

/* Education */
.edu { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1.25rem; margin-top: 2.25rem; align-items: stretch; }
.degree__when { font-size: 0.85rem; color: var(--pink); }
.degree h3 { margin-top: 0.4rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; }
.degree__where { margin-top: 0.3rem; color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; font-weight: 400; }
.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.4rem; }
.tags li { font-size: 0.84rem; padding: 0.45rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); }
.specs > div { padding: 0.65rem 0; border-bottom: 1px solid var(--rule); }
.specs > div:first-child { padding-top: 0; }
.specs > div:last-child { border-bottom: 0; }
.specs dt { font-size: 0.78rem; color: var(--graphite); }
.specs dd { margin-top: 0.15rem; font-weight: 600; font-size: 0.97rem; line-height: 1.4; }
.schools { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.schools th { text-align: left; font-size: 0.75rem; font-weight: 500; color: var(--graphite); padding: 0 0 0.5rem; border-bottom: 1px solid var(--rule); }
.schools td { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); font-weight: 600; }
.schools tr:last-child td { border-bottom: 0; }
.schools th:last-child, .schools td:last-child { text-align: right; white-space: nowrap; padding-left: 0.75rem; }
.schools td:last-child { color: var(--graphite); font-weight: 500; }

/* Beyond */
.beyond { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.25rem; }
.beyond--family { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.beyond__wide { grid-column: span 2; }
.beyond__icon {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; margin-bottom: 1.1rem;
  background: linear-gradient(135deg, var(--blue-mid), var(--blue)); color: var(--pink); font-size: 1rem;
}
.beyond .card:nth-child(even) .beyond__icon { background: linear-gradient(135deg, var(--pink), var(--pink-strong)); color: var(--white); }
.beyond h3 { font-size: 1.15rem; letter-spacing: -0.015em; }
.beyond p { margin-top: 0.5rem; color: var(--graphite); font-size: 0.95rem; line-height: 1.6; font-weight: 400; }

/* Contact */
.contact { margin: clamp(5rem, 9vw, 7.5rem) var(--gutter) 0; border-radius: clamp(24px, 4vw, 40px); padding: clamp(3.5rem, 8vw, 6rem) var(--gutter); text-align: center; }
.contact__inner { max-width: 48rem; margin: 0 auto; }
.contact__title { margin-top: 0.8rem; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -0.045em; }
.contact__lead { margin: 1.1rem auto 0; max-width: 34rem; color: rgba(255, 255, 255, 0.85); font-weight: 400; }
.email { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 1rem; margin-top: 2rem; }
.email__addr { font-size: clamp(1.25rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; text-decoration-color: var(--pink); text-underline-offset: 0.2em; padding: 0.35rem 0; overflow-wrap: anywhere; }
.email__status { flex-basis: 100%; font-size: 0.9rem; color: var(--pink); }
.email__status:empty { display: none; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 2.25rem; }
.links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 999px;
  text-decoration: none; font-size: 0.92rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25);
}
.links a:hover { background: var(--white); color: var(--blue); }
.qr { display: none; margin: 2.5rem auto 0; }
.qr img { width: 8.25rem; margin: 0 auto; background: #fff; padding: 0.4rem; border-radius: 14px; }
.qr figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.8); }

/* Footer */
.foot { max-width: var(--max); margin: 0 auto; padding: 2rem var(--gutter) 2.5rem; display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--graphite); }
.foot span { font-variant-numeric: tabular-nums; }

/* ---------- One page-load moment ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero__name, .hero .hero__lead, .hero .orb, .hero .hero__tags { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero .hero__lead { animation-delay: 0.08s; }
  .hero .orb { animation-delay: 0.16s; }
  .hero__cards { animation: float-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
  .inspecting [data-inspect]::after { animation: tag 0.25s ease-out both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
@keyframes float-in { from { opacity: 0; transform: translateY(6rem); } to { opacity: 1; transform: translateY(2.5rem); } }
@keyframes tag { from { opacity: 0; transform: translateY(-80%); } to { opacity: 1; transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn:hover { transform: none; } }

/* =============================================================
   v4: Midnight black, electric blue, cantaloupe orange
   Overrides the base layer above.
   ============================================================= */
:root,
:root[data-theme="dark"] {
  --black: #02070a;
  --eblue: #0297de;
  --eblue-soft: #5cc3f2;
  --orange: #fc734d;
  --orange-soft: #ffb08f;

  --blue: #0297de;
  --blue-deep: #02070a;
  --blue-mid: #0297de;
  --blue-soft: rgba(2, 151, 222, 0.14);
  --pink: #fc734d;
  --pink-strong: #fc734d;

  --paper: #02070a;
  --surface: #0a1318;
  --ink: #eef4f7;
  --graphite: #93a4ae;
  --rule: rgba(255, 255, 255, 0.09);
  --accent: #0297de;
  --accent-ink: #02070a;
  --grid: rgba(2, 151, 222, 0.06);
  --card-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --paper: #f4f2ef;
  --surface: #ffffff;
  --ink: #0b1216;
  --graphite: #56656e;
  --rule: #e2ddd7;
  --accent: #0278b2;
  --accent-ink: #ffffff;
  --blue-soft: rgba(2, 151, 222, 0.1);
  --card-shadow: 0 24px 60px -30px rgba(2, 30, 50, 0.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark), (prefers-color-scheme: light) {
  :root:not([data-theme="light"]) {
    --paper: #02070a; --surface: #0a1318; --ink: #eef4f7; --graphite: #93a4ae;
    --rule: rgba(255, 255, 255, 0.09); --accent: #0297de; --accent-ink: #02070a;
    --blue-soft: rgba(2, 151, 222, 0.14); --card-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
    color-scheme: dark;
  }
}

/* Type: serif display with an italic accent, mono details */
.hero__name, .section__title, .contact__title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.03em;
}
.hero__name em, .section__title em, .contact__title em { font-style: italic; }
.hero__tags, .hero__lead, .hero__stats dt, .card__label, .eyebrow, .chapters__when, .degree__when, .foot {
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* Header: dark glass */
.top__inner { background: rgba(2, 7, 10, 0.55); border-color: rgba(255, 255, 255, 0.12); }
.brand__mark { background: var(--white); color: var(--black); border-radius: 8px; }
.nav { background: transparent; }
.nav a:hover, .nav a[aria-current="true"] { background: rgba(255, 255, 255, 0.1); }
.tool__dot { border-color: var(--eblue); }
.tool--cta:hover { background: var(--eblue); border-color: var(--eblue); color: var(--black); }
.tool--inspect[aria-pressed="true"] { background: var(--eblue); border-color: var(--eblue); color: var(--black); }

/* Buttons */
.btn--pink { background: var(--white); color: var(--black); box-shadow: 0 12px 34px -12px rgba(2, 151, 222, 0.8); }
.btn--pink:hover { background: var(--eblue); }
.btn--glass { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); }

/* =============================================================
   Hero: the light beam
   ============================================================= */
.hero, .contact {
  color: var(--white);
  background:
    /* orange rising from the bottom */
    radial-gradient(75% 38% at 50% 92%, rgba(252, 115, 77, 0.95), rgba(252, 115, 77, 0.45) 45%, transparent 75%),
    /* blue beam in the centre */
    radial-gradient(22% 75% at 50% 42%, rgba(120, 210, 255, 0.85), rgba(2, 151, 222, 0.55) 35%, transparent 75%),
    /* wide blue haze */
    radial-gradient(60% 70% at 50% 50%, rgba(2, 151, 222, 0.45), transparent 75%),
    var(--black);
}
.hero { min-height: 100vh; min-height: 100svh; padding-top: 8.5rem; border-radius: 0; }
.hero::after {
  height: 9%;
  background: linear-gradient(180deg, transparent, var(--paper));
}
:root[data-theme="dark"] .hero::after { background: linear-gradient(180deg, transparent, var(--paper)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::after { background: linear-gradient(180deg, transparent, var(--paper)); } }

/* Vertical light streaks */
.hero__dots {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.0) 0px,
      rgba(255, 255, 255, 0.10) 1px,
      rgba(255, 255, 255, 0.0) 3px,
      rgba(255, 255, 255, 0.0) 7px);
  background-size: auto;
  -webkit-mask-image: radial-gradient(55% 80% at 50% 50%, #000 20%, transparent 85%);
  mask-image: radial-gradient(55% 80% at 50% 50%, #000 20%, transparent 85%);
  opacity: 0.9;
  mix-blend-mode: screen;
}
/* Bright core of the beam */
.hero__beam {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -10%; width: 18rem; height: 95%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(160, 225, 255, 0.0) 0%, rgba(160, 225, 255, 0.55) 45%, rgba(255, 200, 170, 0.55) 80%, rgba(252, 115, 77, 0) 100%);
  filter: blur(40px);
}
.hero__glow { background: radial-gradient(circle, rgba(2, 151, 222, 0.25), transparent 65%); }

.hero__name {
  font-size: clamp(2.9rem, 7.2vw, 6.2rem);
  line-height: 1.02;
  background: none;
  color: var(--white);
  -webkit-background-clip: border-box; background-clip: border-box;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.35);
}
.hero__tags { color: rgba(255, 255, 255, 0.7); font-size: 0.78rem; }
.hero__tags li::before { content: "• "; color: var(--orange); }
.hero__lead { font-size: 0.95rem; line-height: 1.75; max-width: 34rem; color: rgba(255, 255, 255, 0.82); }

/* Round glowing button */
.orb {
  position: relative;
  display: grid; place-items: center; align-content: center; gap: 0.35rem;
  width: 7.5rem; height: 7.5rem; margin: 2.25rem auto 0;
  border-radius: 50%;
  text-decoration: none; color: var(--white);
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06) 70%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.06), 0 0 50px rgba(255, 220, 200, 0.55), inset 0 0 30px rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.orb:hover { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.08), 0 0 70px rgba(255, 200, 170, 0.8), inset 0 0 30px rgba(255, 255, 255, 0.35); }
.orb__icon {
  width: 1.5rem; height: 1rem;
  background:
    linear-gradient(currentColor, currentColor) 0 50% / 2px 40% no-repeat,
    linear-gradient(currentColor, currentColor) 33% 50% / 2px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 66% 50% / 2px 70% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 50% / 2px 40% no-repeat;
}
.orb__text { font: 500 0.8rem/1 var(--mono); }

/* Side stats */
.hero__stats { position: absolute; top: 42%; display: grid; gap: 1.6rem; color: var(--white); }
.hero__stats--left { left: clamp(5.5rem, 9vw, 9rem); }
.hero__stats--right { right: clamp(5.5rem, 9vw, 9rem); text-align: right; }
.hero__stats > div { display: flex; flex-direction: column-reverse; }
.hero__stats dd { font: 400 clamp(1.8rem, 2.6vw, 2.4rem)/1 var(--serif); letter-spacing: -0.02em; }
.hero__stats dt { margin-top: 0.35rem; font-size: 0.68rem; color: rgba(255, 255, 255, 0.6); max-width: 10rem; }
.hero__arrow {
  position: absolute; top: 44%;
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  color: var(--white); text-decoration: none; font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero__arrow:hover { background: rgba(255, 255, 255, 0.18); }
.hero__arrow--left { left: clamp(0.75rem, 2vw, 1.5rem); }
.hero__arrow--right { right: clamp(0.75rem, 2vw, 1.5rem); }

/* Cards at the bottom: orange frames */
.hero__cards { margin-top: clamp(3rem, 6vw, 4.5rem); align-items: end; }
.card--frame {
  color: var(--ink);
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(160deg, rgba(255, 176, 143, 0.95), rgba(252, 115, 77, 0.95) 40%, rgba(252, 115, 77, 0.2)) border-box;
  border: 8px solid transparent;
  border-radius: 26px;
}
.hero__cards .card--frame:first-child { transform: rotate(-2deg); }
.hero__cards .card--frame:last-child { transform: rotate(2deg); }
.card--glow {
  color: var(--white);
  background:
    radial-gradient(80% 70% at 50% 110%, rgba(252, 115, 77, 0.9), transparent 70%),
    linear-gradient(180deg, rgba(255, 190, 165, 0.55), rgba(252, 115, 77, 0.25));
  border: 1px solid rgba(255, 210, 190, 0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.card--photo { transform: none; }
.gauge {
  background: repeating-conic-gradient(from -120deg, rgba(255, 255, 255, 0.9) 0 1deg, transparent 1deg 4deg);
}
.bars__fill { background: linear-gradient(90deg, var(--eblue), var(--orange)); }
.dot--blue { background: var(--eblue); }
.dot--pink { background: var(--orange); }

/* Sections on midnight */
.eyebrow { color: var(--orange); font-size: 0.78rem; }
.eyebrow::before { content: "•"; width: auto; height: auto; background: none; }
.section__title { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; }
.about { color: var(--graphite); }
.card--white { background: var(--surface); border-color: var(--rule); }
.map .route { stroke: var(--eblue); }
.map .route--long { stroke: var(--orange); }
.map .pt { stroke: var(--eblue); }
.map .pt--now { fill: var(--orange); stroke: var(--orange); }
.map .num { fill: var(--eblue); }
.map .num--now { fill: var(--black); }
.map .dist { fill: var(--orange); }
.map .inset { fill: rgba(2, 151, 222, 0.07); }
:root[data-theme="light"] .map .inset { fill: rgba(2, 151, 222, 0.06); }
.chapters li { background: var(--surface); }
.chapters__n { background: rgba(2, 151, 222, 0.14); color: var(--eblue); }
.chapters__now { background: linear-gradient(150deg, rgba(2, 151, 222, 0.9), rgba(1, 60, 92, 0.95) 70%, rgba(252, 115, 77, 0.6)) !important; }
.chapters__now .chapters__n { background: var(--orange); color: var(--black); }
.chapters__now .chapters__when { color: var(--white); opacity: 0.85; }
.card--blue {
  background:
    radial-gradient(70% 70% at 100% 110%, rgba(252, 115, 77, 0.75), transparent 70%),
    radial-gradient(60% 60% at 0% 0%, rgba(2, 151, 222, 0.9), transparent 70%),
    #052233;
}
.degree__when { color: var(--orange-soft); }
.beyond__icon { background: rgba(2, 151, 222, 0.16); color: var(--eblue); }
.beyond .card:nth-child(even) .beyond__icon { background: rgba(252, 115, 77, 0.16); color: var(--orange); }
.contact { border: 1px solid rgba(255, 255, 255, 0.08); }
.contact__title { font-size: clamp(2.6rem, 6.4vw, 5rem); }
.email__addr { text-decoration-color: var(--orange); }
.email__status { color: var(--orange-soft); }
.links a:hover { background: var(--white); color: var(--black); }
.skip { background: var(--eblue); color: var(--black); }
:focus-visible { outline-color: var(--eblue); }

/* Stats and arrows only where there's room */
@media (max-width: 1180px) {
  .hero__stats, .hero__arrow { display: none; }
}
@media (max-width: 640px) {
  .orb { width: 6.25rem; height: 6.25rem; }
  .hero__lead { font-size: 0.88rem; }
}
@media (max-width: 300px) {
  .orb, .hero__beam { display: none !important; }
}
/* =============================================================
   Inspect mode — the one bold thing on the page.
   Turns the page into a blueprint of itself.
   ============================================================= */
.inspecting body {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

[data-inspect] { position: relative; }

.inspecting [data-inspect] {
  outline: 1px dashed var(--accent);
  outline-offset: 6px;
}
.inspecting .top[data-inspect] { outline-offset: -4px; }

.inspecting [data-inspect]::after {
  content: attr(data-inspect);
  position: absolute;
  left: -6px;
  top: -6px;
  transform: translateY(-100%);
  z-index: 5;
  width: max-content;
  max-width: min(34rem, calc(100vw - 2.5rem));
  padding: 0.2rem 0.45rem;
  background: var(--accent);
  color: var(--accent-ink);
  font: 500 0.72rem/1.35 var(--mono);
  letter-spacing: 0;
  white-space: normal;
  border-radius: 3px 3px 3px 0;
  pointer-events: none;
}
.inspecting .top[data-inspect]::after {
  top: calc(100% + 2px);
  left: var(--gutter);
  transform: none;
  border-radius: 0 0 3px 3px;
}
.inspecting .hero__name[data-inspect]::after { letter-spacing: 0; line-height: 1.35; }

.report {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 30;
  width: min(25rem, calc(100vw - 1.5rem));
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 18px 40px -18px rgba(20, 30, 70, 0.35);
  font-family: var(--sans);
}
.report[hidden] { display: none; }

.report__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.report__head h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.report__close {
  font: 500 0.82rem/1 var(--sans);
  color: var(--graphite);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.report__close:hover { color: var(--ink); border-color: var(--graphite); }

.report__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem 0.75rem;
}
.report__grid dt {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--graphite);
}
.report__grid dd {
  font: 500 0.95rem/1.3 var(--mono);
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
}
.report__grid div:last-child { grid-column: span 2; }
.report__grid div:nth-child(5) { grid-column: span 1; }

.report__csp-label {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--graphite);
}
.report__csp {
  display: block;
  margin-top: 0.25rem;
  max-height: 6.5rem;
  overflow: auto;
  padding: 0.55rem 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: 0.72rem/1.5 var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
}


/* Inspect mode tweaks for this design */
html.inspecting, .inspecting body { overflow-x: clip; }
.inspecting .top[data-inspect]::after { top: calc(100% + 6px); left: 1.25rem; transform: none; border-radius: 6px; animation: none; }
.inspecting .hero__name { margin-top: 3rem; }
.inspecting .hero__cards { margin-top: 6rem; }
.inspecting .card--photo::after { top: 0.6rem; left: 0.6rem; transform: none; }
.report { border-radius: 18px; }

/* =============================================================
   Every screen
   ============================================================= */
@media (min-width: 1600px) { .qr { display: block; } }
@media (min-width: 1900px) {
  html { font-size: calc(100% + 0.4vw); }
  :root { --max: 88rem; }
  :focus-visible { outline-width: 4px; }
}
@media (min-width: 2800px) { html { font-size: calc(100% + 0.55vw); } }

@media (max-width: 1100px) {
  .beyond { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beyond__wide { grid-column: 1 / -1; }
  .edu { grid-template-columns: 1fr 1fr; }
  .edu .degree { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .hero__cards { grid-template-columns: 1fr 1fr; }
  .card--photo { grid-column: 1 / -1; grid-row: 1; max-width: 22rem; width: 100%; justify-self: center; transform: none; }
  .hero__cards .card--white, .hero__cards .card--white:last-child { transform: none; }
  .journey { grid-template-columns: 1fr; }
  .map { position: static; }
  .about { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .top { top: 0.6rem; }
  .brand__name { display: none; }
  .tool { padding: 0 0.75rem; }
  .hero { padding-top: 7rem; }
  .hero__tags { gap: 0.3rem 0.9rem; font-size: 0.8rem; }
  .hero__name { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero__actions .btn { width: 100%; padding-inline: 0.75rem; }
  .hero__cards { grid-template-columns: 1fr; transform: translateY(1.5rem); }
  .map__full { display: none !important; }
  .map__compact { display: block !important; max-width: 26rem; margin: 0 auto; }
  .edu { grid-template-columns: 1fr; }
  .beyond { grid-template-columns: 1fr; }
  .contact { margin-inline: 0.6rem; }
  .foot { flex-direction: column; gap: 0.25rem; }
  .report { max-height: 46vh; overflow: auto; padding: 0.9rem 1rem 1rem; }
  .report__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .report__grid div:last-child { grid-column: span 3; }
  .inspecting .card--photo::after { display: none; }
  .inspecting [data-inspect]::after { max-width: calc(100vw - 3rem); }
}
@media (max-width: 420px) {
  .tool__text { display: none; }
  .tool--cta { display: none; }
  .bars li { grid-template-columns: 4.6rem 1fr auto; }
}
@keyframes float-in-sm { from { opacity: 0; } to { opacity: 1; } }

/* Watch: photo, name, email, links */
@media (max-width: 300px) {
  :root { --gutter: 0.5rem; }
  .tool--inspect, .tool--cta, .hero__tags, .hero__lead, .hero__cards .card--frame, .hero__cards .card--white,
  #about, #journey, #education, #beyond, .contact__lead, .contact .email, .contact .hero__actions, .contact__title, .eyebrow { display: none !important; }
  .top__inner { padding: 0.25rem 0.3rem 0.25rem 0.5rem; }
  .hero { padding: 4.5rem 0.5rem 1.5rem; }
  .hero__name { font-size: 1.6rem; margin-top: 0.5rem; }
  .hero__actions { grid-template-columns: 1fr; margin-top: 1rem; }
  .hero__cards { margin-top: 1rem; transform: none; animation: none; }
  .card--photo { padding: 0.75rem; }
  .card--photo .card__label { display: none; }
  .gauge { width: 6rem; margin: 0 auto; padding: 0; -webkit-mask: none; background: none; }
  .contact { margin: 1rem 0.4rem 0; padding: 1.25rem 0.5rem; }
  .links { margin-top: 0; }
  .links li { width: 100%; }
  .links a { width: 100%; justify-content: center; }
  .foot { text-align: center; font-size: 0.7rem; }
}

@media print {
  .top, .report, .hero__actions, #copyEmail, .skip, .hero__dots, .hero__glow { display: none !important; }
  .hero, .contact { background: var(--blue) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card, .chapters li { break-inside: avoid; box-shadow: none; }
  .map__full { display: block !important; }
  .qr { display: block; }
  .links a::after { content: " " attr(href); font-size: 8pt; }
}

/* ---------- 404 page ---------- */
.hero--404 { min-height: 100vh; display: grid; align-content: center; padding-bottom: 4rem; border-radius: 0; }
.hero--404::after { display: none; }
.hero--404 .hero__name { font-size: clamp(3rem, 9vw, 7rem); }
.hero--404 .hero__name span { display: block; }
.hero--404 .hero__lede { margin: 1.5rem auto 0; font-size: 1.2rem; max-width: 36ch; color: rgba(255,255,255,.86); }
.hero--404 .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 2rem; }

/* Keep the floating cards fully inside the hero */
.hero { padding-bottom: 4.5rem; }
@media (max-width: 640px) { .hero { padding-bottom: 3rem; } .hero__cards { transform: none; } }
@media (max-width: 300px) { .hero { padding-bottom: 1.5rem; } }

/* Apps section: reuses the education grid and cards */
.apps__cta { margin-top: 1.4rem; }
.apps__link { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.edu.apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.edu.apps-grid .degree { grid-column: 1 / -1; }
@media (max-width: 1100px) { .edu.apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .edu.apps-grid { grid-template-columns: 1fr; } }
/* Cohort Hub: the project in progress, across the whole Apps grid */
.hub { grid-column: 1 / -1; border-style: dashed; }
.hub__when { font-family: var(--mono); font-size: 0.82rem; color: var(--pink-strong); }
.hub h3 { margin-top: 0.4rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; }
.hub__full { margin-top: 0.15rem; color: var(--graphite); font-size: 0.95rem; }
.hub__lead { margin-top: 0.9rem; max-width: 52rem; line-height: 1.6; }
.hub__note { margin-top: 1rem; color: var(--graphite); font-size: 0.9rem; }
.tags--ink li { background: var(--blue-soft); border-color: var(--rule); color: var(--ink); }
/* As seen in: Kauno Kolegija's Instagram campaign, loaded only on request */
.seen { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start; }
.seen__label { font-family: var(--mono); font-size: 0.82rem; color: var(--pink-strong); }
.seen h3 { margin-top: 0.35rem; font-size: 1.3rem; letter-spacing: -0.02em; }
.seen p { margin-top: 0.5rem; color: var(--graphite); line-height: 1.6; max-width: 40rem; }
.seen__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.seen__link { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.seen__note { font-size: 0.85rem; }
.seen__frame iframe { width: min(400px, 100%); height: 620px; border: 0; border-radius: 16px; background: #fff; display: block; }
@media (max-width: 860px) { .seen { grid-template-columns: 1fr; } .seen__frame iframe { width: 100%; } }