/* ==========================================================
   Aravind Vasudevan — aravindvas.com

   Geometry, type scale and colour tokens measured directly from
   thariq.io's rendered computed styles at a 1280px viewport.
   Values here are the ones he actually ships, not guesses.
   ========================================================== */

:root {
  /* measured from thariq.io :root */
  --background: 42 45% 97%;
  --foreground: 215 28% 17%;
  --card: 40 40% 95%;
  --muted: 40 25% 88%;
  --muted-foreground: 215 15% 45%;
  --border: 40 20% 82%;
  --accent: 43 74% 52%;
  --gold: 43 74% 52%;
  --bronze: 30 45% 45%;
  --burnt-sienna: 15 60% 45%;

  /* measured geometry */
  --shell-max: 75rem;   /* 1200px */
  --nav-track: 280px;
  --nav-track-h: 48px;
  --nav-btn: 139px;
  --gap-section: 40px;  /* gap-y-10 */
  --label-w: 20%;       /* md:w-1/5 */

  --ease-spring: cubic-bezier(.68, -.55, .265, 1.55);

  /* ============================================================
     ELEVATION SCALE — a camera sits directly above the page, fully
     overhead, lit from the top. "Elevation" is how high a surface
     floats above the paper; height is read through shadows only:
       higher surface  →  deeper + wider shadow, same warm hue
     Each level is two layers: a tight *contact* shadow under the
     edge (offset grows a little with height) and a soft *ambient*
     pool the surface shadows out to. Both tinted to the card hue so
     the warmth holds in light and dark. The stamp sits at E3,
     unshadowed — a stamp lies flat, it never casts.
     ============================================================ */
  --el-0: none;
  --el-1: 0 2px 6px -1px hsl(var(--bronze) / .14), 0 4px 14px -4px hsl(var(--gold) / .10);
  --el-2: 0 4px 10px -2px hsl(var(--bronze) / .18), 0 10px 24px -6px hsl(var(--gold) / .15);
  --el-3: 0 8px 18px -4px hsl(var(--bronze) / .22), 0 18px 44px -12px hsl(var(--gold) / .20);
  --shadow-track: inset 0 2px 8px hsl(var(--bronze) / .35), inset 0 -1px 2px hsl(var(--gold) / .12);
}

:root[data-theme="dark"] {
  --background: 215 35% 12%;
  --foreground: 42 45% 95%;
  --card: 215 30% 15%;
  --muted: 215 20% 25%;
  --muted-foreground: 42 20% 65%;
  --border: 215 20% 25%;
  --accent: 43 65% 48%;
  --gold: 43 65% 48%;
  --bronze: 30 40% 38%;
  --burnt-sienna: 15 50% 40%;
  /* On a dark page the shadow hue must sit between the card and
     black or it reads as a glow, not depth. Same scale, darkened.
     (The neutral --el levels below carry the hue; the paired warm
     tokens were removed — el-1..3 are the single shadow vocabulary.) */
  --el-1: 0 2px 6px -1px hsl(0 0% 0% / .30), 0 4px 14px -4px hsl(var(--bronze) / .22);
  --el-2: 0 4px 10px -2px hsl(0 0% 0% / .38), 0 10px 24px -6px hsl(var(--bronze) / .26);
  --el-3: 0 8px 18px -4px hsl(0 0% 0% / .46), 0 18px 44px -12px hsl(var(--bronze) / .30);
  --shadow-track: inset 0 2px 8px hsl(0 0% 0% / .5), inset 0 -1px 2px hsl(var(--gold) / .15);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* thariq.io keeps the UI in the system sans and reserves the serif
   for headings and the flip card. Same split here. */
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
}

::selection { background: hsl(var(--gold) / .28); color: hsl(var(--foreground)); }

/* Content is gated on the document's data-mode. The toggle buttons use
   data-target, not data-mode, so they can never hide themselves. */
[data-mode="professional"] .stack [data-mode="personal"],
[data-mode="professional"] .foot [data-mode="personal"],
[data-mode="personal"] .stack [data-mode="professional"],
[data-mode="personal"] .foot [data-mode="professional"] { display: none; }

/* The identity block holds both avatars, so it is gated directly.
   display:none also stops the hidden photo being fetched. */
[data-mode="professional"] .identity > [data-mode="personal"],
[data-mode="personal"] .identity > [data-mode="professional"] { display: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: hsl(var(--card)); color: hsl(var(--foreground));
  padding: 10px 16px; border: 1px solid hsl(var(--border)); border-radius: 4px;
  box-shadow: var(--el-2);
}
.skip-link:focus { left: 16px; top: 16px; }

/* the gold rule that wipes in on hover */
.illuminated-link {
  position: relative;
  text-decoration: none;
  background: linear-gradient(to right, hsl(var(--gold)), hsl(var(--gold))) no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  transition: background-size .3s ease, color .3s ease;
}
.illuminated-link:hover, .illuminated-link:focus-visible {
  background-size: 100% 2px;
  color: hsl(var(--gold));
}
.illuminated-link:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; border-radius: 2px; }

/* ---------- Shell (thariq: max-w-[75rem] flex flex-col items-center px-6) ---------- */

.shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--shell-max);
  min-height: 100svh;
  margin: 0 auto;
  padding: 28px 40px 40px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  width: 100%;
}

/* ---------- Masthead (thariq: flex items-center justify-between) ---------- */

.masthead { width: 100%; padding-bottom: 12px; margin-bottom: 48px; }

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav__side { z-index: 10; display: flex; flex: 1; align-items: center; min-width: 0; }
.nav__side--left { justify-content: flex-start; padding-bottom: 32px; }
.nav__side--right { justify-content: flex-end; gap: 32px; padding-bottom: 32px; }

.nav__home {
  font-size: 15px;
  font-weight: 500;
  color: hsl(var(--foreground) / .85);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
.nav__home:hover { color: hsl(var(--gold)); }

.nav__mid { z-index: 0; display: flex; width: 100%; justify-content: center; }

/* ---------- Mode toggle (thariq: 280x48 track, 139px buttons) ---------- */

.mode-toggle { display: flex; align-items: center; gap: 16px; }

.ornament {
  display: block;
  width: 24px; height: 1px;
  background: linear-gradient(to right, transparent, hsl(var(--gold) / .55));
  flex: 0 0 auto;
}
.ornament:last-child { background: linear-gradient(to left, transparent, hsl(var(--gold) / .55)); }

.toggle-track {
  position: relative;
  width: var(--nav-track);
  height: var(--nav-track-h);
  flex: 0 0 auto;
  background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted) / .3));
  border: 1px solid hsl(var(--bronze) / .3);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-track);
}
:root[data-theme="dark"] .toggle-track {
  background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted) / .2));
  border-color: hsl(var(--gold) / .2);
}

.toggle-indicator {
  position: absolute;
  top: 2px; left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: linear-gradient(135deg, hsl(var(--gold) / .55), hsl(var(--gold) / .3));
  border-radius: 32px;
  box-shadow: 0 2px 5px hsl(var(--bronze) / .30), inset 0 1px 0 hsl(var(--gold) / .35);
  transition: transform .6s var(--ease-spring), background .4s ease, box-shadow .4s ease;
  pointer-events: none;
}
.toggle-indicator::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, #ffffff4d, #fff0, #ffffff0d);
  opacity: .5;
}
[data-mode="personal"] .toggle-indicator {
  transform: translateX(100%);
  background: linear-gradient(135deg, hsl(var(--burnt-sienna) / .5), hsl(var(--burnt-sienna) / .3));
  box-shadow: 0 2px 5px hsl(var(--bronze) / .30), inset 0 1px 0 hsl(var(--burnt-sienna) / .25);
}

.toggle-option {
  position: absolute;
  top: 0; height: 100%;
  width: var(--nav-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .5px;
  color: hsl(var(--foreground) / .4);
  transition: color .3s ease, font-weight .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.toggle-option:nth-of-type(1) { left: 0; }
.toggle-option:nth-of-type(2) { left: var(--nav-btn); }
.toggle-option:hover { color: hsl(var(--foreground) / .7); }
.toggle-option[aria-pressed="true"] { color: hsl(var(--foreground)); font-weight: 600; }
.toggle-option[aria-pressed="true"] .option-icon { opacity: 1; transform: scale(1.1); }
.toggle-option:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: -4px; border-radius: 32px; }
.option-icon { opacity: .55; transition: opacity .3s ease, transform .3s ease; font-size: 12px; }

/* ---------- Theme button ---------- */

.theme-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: none; background: transparent;
  color: hsl(var(--foreground) / .6);
  cursor: pointer;
  transition: color .25s ease, transform .3s ease;
}
.theme-btn:hover { color: hsl(var(--gold)); transform: rotate(15deg); }
.theme-btn:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; border-radius: 50%; }
.theme-btn__icon { grid-area: 1 / 1; font-size: 14px; line-height: 1; transition: opacity .3s ease; }
.theme-btn__icon--sun { display: none; }
[data-theme="dark"] .theme-btn__icon--sun { display: block; }
[data-theme="dark"] .theme-btn__icon--moon { display: none; }

/* ---------- Identity (thariq: flex flex-col items-center gap-y-4) ---------- */

.identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* The wrapper must not stretch the square button inside it, or the
   circle ends up very slightly oval. */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}

.flip {
  position: relative;
  width: 192px; height: 192px;
  flex: 0 0 auto;   /* never stretch inside the flex column */
  padding: 0;
  background: none; border: none; cursor: pointer;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease-spring);
}
/* Hover flips it on desktop; .is-flipped is the click/tap path, which
   is the only one that exists on touch. aria-pressed mirrors it. */
.flip:hover, .flip:focus-visible, .flip.is-flipped { transform: rotateY(180deg); }
.flip:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 6px; border-radius: 50%; }
.flip__face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  backface-visibility: hidden;
  box-shadow: var(--el-3);
  border: 2px solid hsl(var(--bronze) / .25);
}
.flip__face--front { background: linear-gradient(145deg, hsl(var(--card)), hsl(var(--muted))); color: hsl(var(--foreground)); }
.flip__face--back { transform: rotateY(180deg); background: linear-gradient(145deg, hsl(var(--gold) / .22), hsl(var(--bronze) / .18)); color: hsl(var(--gold)); }

/* The back face is already rotated 180deg so it faces the viewer; the
   image inside it is then mirrored so the card reads like a real coin
   turned over. scaleX is applied to the image, not the face, otherwise
   the two mirrors cancel and the back looks identical to the front. */
.flip__photo--mirror {
  transform: scaleX(-1);
}

/* The photograph fills its face exactly and is clipped by the face's
   own border-radius, so no separate crop is needed in CSS. */
.flip__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flip__face:has(.flip__photo) {
  background: hsl(var(--card));
  border-color: hsl(var(--bronze) / .35);
  overflow: hidden;
}
.monogram { font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif; font-size: 60px; font-weight: 600; letter-spacing: 1.2px; }
.sigil { font-size: 52px; line-height: 1; }

/* thariq h1: 48px / 600 / ls 1.2px / lh 48px */
.name {
  margin: 0;
  font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 48px;
  color: hsl(var(--foreground));
  text-align: center;
}

/* ---------- Rows (thariq: flex flex-col gap-y-5 md:flex-row; label md:w-1/5) ---------- */

.row { display: flex; flex-direction: column; gap: 20px; }
.row__label { width: 100%; }
.row__body { width: 100%; min-width: 0; }

@media (min-width: 768px) {
  .row { flex-direction: row; gap: 0; }
  .row__label { width: var(--label-w); flex-shrink: 0; }
  .row__body { width: 80%; }
}

/* thariq h2: 24px / 600, Cormorant */
.row__label h2 {
  margin: 0;
  font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

/* thariq lead p: EB Garamond 20px / lh 40px */
.prose { display: flex; flex-direction: column; gap: 20px; }
.prose p { margin: 0; }
.prose--lead {
  font-family: "EB Garamond Variable", "EB Garamond", Georgia, serif;
  font-size: 20px;
  line-height: 40px;
  color: hsl(var(--foreground));
}

/* ---------- Posts (thariq: ul gap-y-4; li flex items-baseline justify-between gap-4) ---------- */

.posts {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 16px;
}

.post {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
  border-bottom: 1px solid hsl(var(--border) / .55);
  padding-bottom: 8px;
  transition: border-color .3s ease;
}
.post:hover { border-bottom-color: hsl(var(--gold) / .7); }

/* thariq post link: Cormorant 18px */
.post__title {
  font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: hsl(var(--foreground));
  transition: color .25s ease;
}
.post:hover .post__title { color: hsl(var(--gold)); }
.post__title:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; }
.post__note {
  flex-shrink: 0;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

/* ---------- Cards ---------- */

.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid hsl(var(--bronze) / .2);
  border-radius: 8px;
  background: hsl(var(--card));
  box-shadow: var(--el-1);
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--el-2); border-color: hsl(var(--gold) / .45); }
a.card:active { transform: translateY(-1px); box-shadow: var(--el-1); }
a.card:focus-visible { outline: 2px solid hsl(var(--gold)); outline-offset: 3px; }

.card__art {
  display: grid; place-items: center;
  height: 148px;
  border-radius: 6px;
}
.card__glyph {
  font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif;
  font-size: 30px; font-weight: 600; letter-spacing: 1.2px;
  color: hsl(var(--foreground) / .8);
}
.card__art--a { background: linear-gradient(140deg, hsl(var(--gold) / .3), hsl(var(--bronze) / .18)); }
.card__art--b { background: linear-gradient(140deg, hsl(var(--bronze) / .24), hsl(var(--muted))); }
.card__art--c { background: linear-gradient(140deg, hsl(var(--muted)), hsl(var(--gold) / .16)); }
.card__art--d { background: linear-gradient(140deg, hsl(var(--burnt-sienna) / .2), hsl(var(--bronze) / .2)); }
/* screenshot thumbnails: same box as the glyph art, cropped from the top */
.card__art--shot { display: block; overflow: hidden; background: hsl(var(--muted)); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.card__art--shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .4s ease; }
a.card:hover .card__art--shot img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { a.card:hover .card__art--shot img { transform: none; } }

.card__body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px 6px; }
.card__title {
  font-family: "Cormorant Garamond Variable", "Cormorant Garamond", Georgia, serif;
  font-size: 18px; font-weight: 600; line-height: 1.3;
  color: hsl(var(--foreground));
}
a.card:hover .card__title { color: hsl(var(--gold)); }
.card__desc { font-size: 14px; line-height: 1.5; color: hsl(var(--foreground) / .7); }
.card__tag {
  align-self: flex-start;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 2px;
  color: hsl(var(--bronze));
  border: 1px solid hsl(var(--bronze) / .35);
}

/* ---------- Links ---------- */

.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 28px; }
.links a { font-size: 15px; }

/* ---------- Footer ---------- */

.foot { margin-top: auto; padding-top: 48px; width: 100%; }
.foot p {
  margin: 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: hsl(var(--muted-foreground));
  text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .shell { padding: 20px 24px 32px; }
  .stack { gap: 32px; }

  /* thariq keeps the toggle on its own full-width row under 640.
     The track must be sized in flex terms, not by a fixed px width:
     a fixed width plus fixed-width children collapses to nothing
     once the row is narrower than the children. */
  .nav { flex-wrap: wrap; }
  .nav__side { flex: 1 1 50%; padding-bottom: 0; }
  .nav__mid { order: 3; flex: 1 1 100%; width: 100%; margin-top: 12px; }
  .ornament { display: none; }
  .mode-toggle { width: 100%; }
  .toggle-track { width: 100%; height: 48px; }

  /* The track is absolutely-positioned on desktop so the indicator can
     sit under fixed 139px halves. Below 640 the halves are in normal
     flow instead, so the track can size itself to the row. */
  .toggle-track { display: flex; }
  .toggle-option {
    position: static;
    width: auto;
    flex: 1 1 50%;
    min-width: 0;
  }
  .option-label { white-space: nowrap; }
  .toggle-indicator { top: 1px; left: 1px; width: calc(50% - 1px); }

  .name { font-size: 34px; line-height: 40px; letter-spacing: .6px; }
  .flip { width: 140px; height: 140px; }
  /* On touch there is no hover, so the card rests on its tap state. */
  .flip:hover { transform: none; }
  .flip.is-flipped { transform: rotateY(180deg); }
  .monogram { font-size: 44px; }
  .sigil { font-size: 38px; }
  .prose--lead { font-size: 18px; line-height: 32px; }
  .row { gap: 12px; }
}

/* Very narrow phones: drop the gear/star icons so the two labels
   have room, and keep the track from ever collapsing. */
@media (max-width: 380px) {
  .option-icon { display: none; }
  .toggle-option { font-size: 13px; letter-spacing: .2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* The card still turns over, it just arrives instantly. Removing the
     transform entirely would make the mirrored back unreachable. */
  .flip:hover:not(.is-flipped) { transform: none; }
}