/* Jithu M A, portfolio
   Light: Seal Blue #DBF2FC, Navy #072D59, Crimson Pink #FD6E88.
   Dark:  deep teal-black, soft blue, cantaloupe. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

:root {
  --bg: #dbf2fc; --card: #ffffff; --ink: #072d59; --soft: #34557a; --line: rgba(7, 45, 89, 0.16);
  --accent: #fd6e88; --accent-ink: #b8214a; --accent-wash: rgba(253, 110, 136, 0.16);
  --ring: #072d59; --halo: transparent;
  --btn: #072d59; --btn-ink: #ffffff;
  --shadow: 0 1px 2px rgba(7, 45, 89, 0.06), 0 24px 50px -30px rgba(7, 45, 89, 0.35);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #101b23; --card: #172530; --ink: #d8e5ed; --soft: #9bafbe; --line: rgba(216, 229, 237, 0.12);
  --accent: #ec8a6b; --accent-ink: #f0a185; --accent-wash: rgba(236, 138, 107, 0.12);
  --ring: #4a95c4; --halo: rgba(2, 151, 222, 0.12);
  --btn: #d8e5ed; --btn-ink: #101b23;
  --shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, system-ui, sans-serif;
  font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--accent-ink); color: var(--btn-ink); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 20; padding: 0.7rem 1rem; border-radius: 10px; background: var(--btn); color: var(--btn-ink); }
.skip:focus { top: 1rem; }
/* skip-link target: focus moves here, but a ring around the whole page helps no one */
#main:focus { outline: none; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2.5rem); }
.soft { color: var(--soft); }
.fig strong, .jobs .when { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; min-height: 5.5rem; }
.name { white-space: nowrap; font-weight: 800; font-size: 1.2rem; text-decoration: none; letter-spacing: -0.01em; display: inline-flex; align-items: center; min-height: 2.75rem; }
.top nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: clamp(0.1rem, 1.5vw, 0.75rem); }
.top nav a { text-decoration: none; font-weight: 500; padding: 0.6rem 0.5rem; }
.top nav a:hover { text-decoration: underline; }
.mode { width: 2.75rem; height: 2.75rem; margin-left: 0.25rem; display: none; place-items: center; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; border-radius: 50%; }
.js .mode { display: grid; }
.mode:hover { background: var(--line); }
.mode svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mode .sun, :root[data-theme="dark"] .mode .moon { display: none; }
:root[data-theme="dark"] .mode .sun { display: block; }
/* light text on dark reads heavier, so headings step down a weight */
:root[data-theme="dark"] .hero h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] .panel h3, :root[data-theme="dark"] .fig strong { font-weight: 700; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); }
.copy { max-width: 36rem; }
.hello { font-size: clamp(1.15rem, 1.7vw, 1.35rem); font-weight: 600; color: var(--soft); }
.hero h1 { margin-top: 0.75rem; font-size: clamp(1.9rem, 2.75vw, 2.55rem); line-height: 1.18; font-weight: 800; letter-spacing: -0.03em; }
.hero h1 > span { display: block; }
/* Plus Jakarta's heavy comma and full stop carry wide sidebearings; kern them in by hand */
.hero h1 .k { margin-left: -0.07em; }
@media (min-width: 40.01rem) { .hero h1 > span { white-space: nowrap; } }
.where { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1.5px solid var(--line); font-size: 1.1rem; font-weight: 600; }
.where .loc { color: var(--soft); font-weight: 500; white-space: nowrap; }
.more { margin-top: 0.75rem; color: var(--soft); font-size: 1.05rem; line-height: 1.7; }
.cv { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2rem; min-height: 3.25rem; padding: 0 1.6rem; border-radius: 12px; background: var(--btn); color: var(--btn-ink); text-decoration: none; font-weight: 700; transition: transform 160ms; }
.cv:hover { transform: translateY(-2px); }
.cv svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.photo { position: relative; justify-self: end; margin-right: 0.95rem; width: min(calc(100% - 1rem), 27rem); aspect-ratio: 1; }
.photo::before { content: ""; position: absolute; inset: -9%; border-radius: 50%; background: radial-gradient(closest-side, var(--halo), transparent); }
.photo::after { content: ""; position: absolute; inset: -3.5%; border-radius: 50%; border: 1.5px solid var(--ring); opacity: 0.55; }
.photo img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--card); }

/* ---------- sections ---------- */
section { padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 1.5px solid var(--line); }
.row { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.25rem clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.body { max-width: 42rem; display: grid; gap: 1.1rem; }
.big { font-size: clamp(1.2rem, 1.9vw, 1.4rem); line-height: 1.5; font-weight: 500; }

/* award: one plain line */
.award { color: var(--soft); }
.award b { color: var(--ink); font-weight: 700; }

/* ---------- projects ---------- */
.proj-head { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.25rem clamp(2rem, 5vw, 4rem); margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.stage { border-radius: 22px; background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.tabs { display: none; }
.js .tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; padding: 1rem; border-bottom: 1.5px solid var(--line); }
.tab { text-align: left; font: inherit; color: var(--ink); cursor: pointer; padding: 0.8rem 0.95rem; border-radius: 12px; border: 1.5px solid transparent; background: transparent; transition: background-color 150ms, border-color 150ms; }
.tab:hover { background: var(--line); }
.tab[aria-selected="true"] { background: var(--accent-wash); border-color: var(--accent-ink); }
.tab b { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.tab span { display: block; font-size: 0.84rem; color: var(--soft); line-height: 1.35; margin-top: 0.15rem; }

/* Panels share one grid cell, so the box is always as tall as the tallest panel.
   Switching tabs never resizes the card, so its shadow never repaints (resizing it
   left ghost bands in some browsers). Without JS the panels simply stack. */
.panel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.75rem, 4vw, 3rem); }
.panel + .panel { border-top: 1.5px solid var(--line); }
.js .panels { display: grid; }
.js .panel { grid-area: 1 / 1; border-top: 0; }
.js .panel[hidden] { display: grid !important; visibility: hidden; }
html:not(.js) .panel[hidden] { display: grid !important; }
.panel.in { animation: fade 400ms ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel h3 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; }
.what { margin-top: 1rem; font-size: 1.1rem; line-height: 1.65; }
.before { margin-top: 1.25rem; color: var(--soft); }
.before b { color: var(--ink); font-weight: 700; }
.side { border-left: 1.5px solid var(--line); padding-left: clamp(1.5rem, 3vw, 2.5rem); display: grid; align-content: start; gap: 1.5rem; }
.fig strong { display: block; font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.fig span { display: block; margin-top: 0.5rem; color: var(--soft); }
.facts { display: grid; gap: 0.85rem; }
.facts dt { font-size: 0.85rem; font-weight: 600; color: var(--soft); }
.facts dd { margin-top: 0.1rem; }
.note { margin-top: 1rem; font-size: 0.925rem; color: var(--soft); }

/* ---------- experience, skills ---------- */
.jobs { display: grid; gap: 1.75rem; max-width: 48rem; }
.jobs li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.25rem 1.5rem; }
.jobs .when { color: var(--soft); font-weight: 500; }
.jobs h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.jobs p { color: var(--soft); margin-top: 0.25rem; }
.lines { display: grid; gap: 0.9rem; max-width: 44rem; }
.lines b { font-weight: 700; }

/* ---------- contact ---------- */
.reach { display: grid; gap: 0.6rem; }
.reach .line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.reach a.big-link .t { min-width: 0; overflow-wrap: anywhere; }
.reach a.big-link { max-width: 100%; font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; display: inline-flex; gap: 0.9rem; min-height: 2.75rem; align-items: center; text-decoration: none; }
.reach a.big-link:hover .t { text-decoration: underline; }
.reach .ic { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: var(--btn-ink); }
.reach .ic svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.copy-btn { min-height: 2.75rem; padding: 0 1rem; border-radius: 10px; border: 1.5px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 0.925rem; font-weight: 600; cursor: pointer; }
.copy-btn:hover { background: var(--line); }
.msg { font-size: 0.925rem; color: var(--soft); min-height: 1.5em; }

footer { padding: 2rem 0 3rem; border-top: 1.5px solid var(--line); color: var(--soft); font-size: 0.925rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ---------- Precision Engine screens ---------- */
/* Without JS: a plain list of links. With JS: one trigger with a stack of thumbnails. */
.shot-list { margin: 0; padding-left: 1.1rem; list-style: decimal; display: grid; gap: 0.35rem; font-size: 0.925rem; }
.shot-list a { color: var(--soft); }
.peek { display: none; }
.js .shot-list { display: none; }
.js .peek { display: flex; align-items: center; gap: 0.85rem; padding: 0.5rem 0.85rem 0.5rem 0.5rem; border: 1.5px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color 150ms, background-color 150ms; }
.js .peek:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); background: color-mix(in srgb, var(--line) 35%, transparent); }
.stack { position: relative; flex: none; width: 4.9rem; height: 2.85rem; }
.stack img { position: absolute; width: 4.1rem; height: auto; aspect-ratio: 1440 / 757; object-fit: cover; object-position: left top; border-radius: 5px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 1px 2px rgba(7, 45, 89, 0.12); transition: transform 200ms ease; }
.stack img:nth-child(1) { left: 0; top: 0; }
.stack img:nth-child(2) { left: 0.4rem; top: 0.35rem; }
.stack img:nth-child(3) { left: 0.8rem; top: 0.7rem; }
.js .peek:hover .stack img:nth-child(1) { transform: translate(-2px, -2px); }
.js .peek:hover .stack img:nth-child(3) { transform: translate(2px, 2px); }
.peek-t b { display: block; font-weight: 700; line-height: 1.3; }
.peek-t span { display: block; font-size: 0.85rem; color: var(--soft); line-height: 1.35; }

/* the viewer: a full-screen native dialog */
html.viewing { overflow: hidden; }
.viewer { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: env(safe-area-inset-top, 0px) clamp(0.75rem, 3vw, 2rem) env(safe-area-inset-bottom, 0px); border: 0; background: #06182c; color: #e6eef5; overscroll-behavior: contain; }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.viewer::backdrop { background: #06182c; }
.viewer-bar { display: flex; align-items: center; gap: 0.5rem 1.5rem; flex-wrap: wrap; padding-block: 0.9rem; }
.viewer-title { font-weight: 700; margin-right: auto; }
.viewer-title span { margin-left: 0.6rem; font-weight: 500; color: #9fb6cb; font-variant-numeric: tabular-nums; }
.viewer-note { font-size: 0.85rem; color: #9fb6cb; }
.viewer-close, .viewer-step { font: inherit; color: inherit; background: none; border: 1.5px solid rgba(230, 238, 245, 0.5); cursor: pointer; }
.viewer-close { min-height: 2.75rem; padding: 0 1.1rem; border-radius: 10px; font-weight: 600; }
.viewer-close:hover, .viewer-step:hover { border-color: #e6eef5; }
.viewer-stage { min-height: 0; margin: 0; display: grid; align-content: center; justify-items: center; gap: 0.9rem; touch-action: pan-y pinch-zoom; }
.viewer-stage img { max-width: 100%; max-height: calc(100vh - 15rem); max-height: calc(100dvh - 15rem); width: auto; height: auto; object-fit: contain; border-radius: 8px; background: #fff; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7); transition: opacity 180ms ease; }
.viewer-stage img.swap { opacity: 0; }
.viewer-stage figcaption { max-width: 42rem; text-align: center; color: #e6eef5; line-height: 1.5; }
.viewer-nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding-block: 0.9rem 1.1rem; }
.viewer-step { width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; }
.viewer-step:disabled { opacity: 0.3; cursor: default; border-color: rgba(230, 238, 245, 0.3); }
.viewer-step svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viewer-full { font-size: 0.9rem; color: #9fb6cb; }
.viewer-full:hover { color: #e6eef5; }
.viewer :focus-visible { outline-color: #ffb3c1; }

/* ---------- 404 ---------- */
.lost { min-height: 70vh; display: grid; align-content: center; gap: 1rem; justify-items: start; }
.lost .code { font-size: clamp(5rem, 18vw, 9rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--accent-ink); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .hero, .row, .proj-head, .panel { grid-template-columns: minmax(0, 1fr); }
  .photo { width: min(calc(100% - 2rem), 22rem); grid-row: 1; justify-self: center; margin-right: 0; }
  .side { border-left: 0; padding-left: 0; border-top: 1.5px solid var(--line); padding-top: 1.5rem; }
}
/* Five tabs need about 73rem to sit in one row without their labels wrapping.
   Below that they become a swipeable strip; a fade on the cut edge shows there is more. */
@media (max-width: 73rem) {
  .js .tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 3.5rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; scroll-snap-align: start; }
  .tab b { white-space: nowrap; }
  .js .tabs.fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent); }
  .js .tabs.fade-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 3.5rem); mask-image: linear-gradient(to right, transparent, #000 3.5rem); }
  .js .tabs.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent); }
}
@media (max-width: 40rem) {
  .top nav a.opt { display: none; }
  .top nav a { padding: 0.55rem 0.6rem; }
  .top { gap: 0.5rem; }
  .jobs li { grid-template-columns: minmax(0, 1fr); }
  .cv { width: 100%; justify-content: center; }
  .photo { width: min(78%, 18rem); }
  .hero h1 > span { display: inline; }
  .where .loc { display: block; margin-top: 0.15rem; }
  .where .sep { display: none; }
  /* the card sits inside the page margin, so its own padding can be lighter on phones */
  .panel { padding: 1.5rem 1.15rem; }
  .js .tabs { padding: 0.75rem; }
  .viewer-note { order: 3; flex-basis: 100%; }
  .viewer-stage figcaption { font-size: 0.95rem; }
}
/* The smallest phones (320px): keep name, two links and the toggle on one line */
@media (max-width: 22.5rem) {
  .name { font-size: 1.1rem; }
  .top nav { gap: 0; }
  .top nav a { padding: 0.55rem 0.4rem; font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel.in { animation: none !important; }
  .tab, .cv, .js .peek, .stack img, .viewer-stage img { transition: none; }
}
@media (prefers-contrast: more) {
  :root { --soft: #1f3f66; --line: rgba(7, 45, 89, 0.42); }
  :root[data-theme="dark"] { --soft: #c3d2dd; --line: rgba(216, 229, 237, 0.4); }
}
@media (forced-colors: active) {
  .tab[aria-selected="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
}
@media print {
  @page { margin: 14mm 16mm; }
  .top nav, .cv, .tabs, .skip, .photo::before, .photo::after, .copy-btn, .msg, .shots, .viewer { display: none !important; }
  html, body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.5; }
  .wrap { max-width: none; padding: 0; }
  .top { min-height: 0; padding-bottom: 4mm; }
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) 30mm; gap: 8mm; align-items: start; padding: 2mm 0 5mm; }
  .photo { grid-row: auto; justify-self: end; width: 30mm; margin: 0; }
  .hero h1 { font-size: 20pt; }
  .hero h1 > span { white-space: normal; }
  section { padding: 5mm 0; break-inside: auto; }
  .row, .proj-head { grid-template-columns: 34mm minmax(0, 1fr); gap: 3mm 8mm; }
  .proj-head { margin-bottom: 4mm; }
  h2 { font-size: 15pt; }
  .big { font-size: 11pt; }
  .js .panel[hidden], .panel[hidden] { display: grid !important; visibility: visible; }
  .js .panels { display: block; }
  .stage { box-shadow: none; border: 0; border-radius: 0; background: none; }
  .panel { grid-template-columns: minmax(0, 1fr) 52mm; gap: 6mm; padding: 4mm 0; border-top: 0.5pt solid #bbb; break-inside: avoid; }
  .panel h3 { font-size: 13pt; }
  .what { font-size: 10.5pt; margin-top: 2mm; }
  .side { border-left: 0.5pt solid #bbb; padding-left: 5mm; border-top: 0; padding-top: 0; gap: 3mm; }
  .fig strong { font-size: 18pt; }
  .jobs { gap: 3mm; }
  .jobs li { break-inside: avoid; }
  footer { padding: 4mm 0 0; }
}