/* ==========================================================================
   Abhijna Lekha R Portfolio
   Ported from the Claude Design project "Minimalist Investor Portfolio Design"
   (Abhijna Lekha R - Portfolio.dc.html). Editorial layout, three typefaces,
   one page per section.

   Palette: oxblood, warm cream and tan. #632024 is the page, cream carries
   display headings, tan carries labels, and white carries body copy. Surfaces
   are darker and lighter tints of the same oxblood. Headings are set in
   uppercase at a lighter weight with positive tracking, following the supplied
   "Caput Mortuum" reference card. Every pairing below meets WCAG AA.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Dark oxblood page - native controls and scrollbars should be dark too. */
  color-scheme: dark;

  /* Palette */
  --bg:            #632024;   /* oxblood page */
  --ink:           #FFFFFF;   /* body copy - 11.9:1 on --bg */
  --prose:         #FFFFFF;
  --muted:         #F7EDE7;   /* warm white for secondary copy */
  --accent:        #E1C7A9;   /* warm cream - 7.3:1 on --bg */
  --tan:           #DCC3A3;   /* tan labels - 7.0:1 on --bg, 5.8:1 on a panel */
  --surface:       #4C171D;   /* darker oxblood: nav and footer */
  --panel:         #752A32;   /* lighter oxblood: cards and stats */
  --panel-border:  rgba(225, 199, 169, 0.20);
  --tint:          #521A20;
  --hatch-a:       rgba(225, 199, 169, 0.06);
  --hatch-b:       rgba(225, 199, 169, 0.13);
  --row-hover:     rgba(225, 199, 169, 0.07);

  --rule:          rgba(225, 199, 169, 0.22);
  --rule-strong:   rgba(225, 199, 169, 0.36);
  --rule-soft:     rgba(225, 199, 169, 0.14);
  --border-ghost:  rgba(225, 199, 169, 0.50);

  --on-dark:       #FFFFFF;   /* on --surface */
  --on-dark-dim:   #F7EDE7;   /* on --surface */
  --rule-on-dark:  rgba(225, 199, 169, 0.30);

  /* Type */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
  --mono:  'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The reference is classical, so drop the quirkier alternates and keep the
     terminals straight. */
  --wonk:  'SOFT' 0, 'WONK' 0;

  /* Motion */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --maxw:  1180px;
  --pad-x: clamp(20px, 5vw, 72px);
  --nav-h: 62px;
}

/* --- Reset ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Also paint the canvas oxblood so overscroll and load flashes match the page. */
  background-color: var(--bg);
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink); }

/* Cream highlight with oxblood text: 7.3:1. */
::selection {
  background: var(--accent);
  color: var(--bg);
  -webkit-text-fill-color: var(--bg);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  cursor: pointer;
}

/* Cream clears 3:1 on the page, cards and footer, so one indicator works
   everywhere. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip:focus { left: 0; color: var(--bg); }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* --- Shared type helpers -------------------------------------------------- */

/* Labels echo the tan HEX/RGB captions on the reference card. */
.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0;
}
.label--sm { letter-spacing: 0.18em; }
.label--on-dark { color: var(--tan); margin-bottom: 20px; }

.display {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: var(--wonk);
  color: var(--accent);
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0;
  text-wrap: pretty;
}
.display--events { font-size: clamp(38px, 6.4vw, 82px); }

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: 34ch;
  text-wrap: pretty;
}
.lede--narrow { max-width: 32ch; }

.prose {
  margin: 0 0 18px;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--prose);
  max-width: 58ch;
  text-wrap: pretty;
}
.prose:last-child { margin-bottom: 0; }

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 24px;
  border: 1px solid transparent;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Cream is the card's display colour, so it becomes the primary button fill;
   oxblood copy on it is 7.3:1. */
/* Cream is the card's display colour, so it becomes the primary button fill;
   oxblood copy on it is 7.3:1. */
.btn--solid {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}
.btn--solid:hover {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--bg);
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.55);
}
.btn--ghost {
  border-color: var(--border-ghost);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Nav ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px var(--pad-x);
  /* Darker oxblood bar: the cream mark and white links keep their contrast
     while the nav reads as a distinct surface above the page. */
  background: rgba(76, 23, 29, 0.95);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-bottom: 1px solid var(--rule-on-dark);
}

.nav__mark {
  display: block;
  line-height: 0;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav__mark:hover { opacity: 0.72; }
.nav__mark img {
  display: block;
  height: 46px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  flex-wrap: wrap;
}

.nav__link {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  transition: color 0.2s ease;
}
.nav__link:hover { color: var(--accent); }
.nav__link[aria-current="page"] { color: var(--accent); }


/* --- Screens -------------------------------------------------------------- */

.screen {
  padding: clamp(36px, 6vw, 86px) var(--pad-x) 0;
}
#home { padding-top: clamp(36px, 6vw, 80px); }

.screen__eyebrow { margin-bottom: clamp(18px, 3vw, 34px); }

/* Page mode: only the active screen renders. Enabled by app.js once it has
   taken over routing, so a no-JS visitor still gets every section. */
body[data-nav="pages"].is-routed .screen { display: none; }
body[data-nav="pages"].is-routed .screen.is-active { display: block; }

/* --- Landing -------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 64px);
  /* The design bottom-aligned these, which worked when the text column was
     nearly as tall as the portrait. It is three short lines now, so centre it
     instead of stranding it under a column of empty space. */
  align-items: center;
  padding-bottom: clamp(40px, 6vw, 80px);
}


.hero__name {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: var(--wonk);
  color: var(--accent);
  font-size: clamp(42px, 7.8vw, 98px);
  line-height: 1;
  letter-spacing: 0.015em;
  margin: 0 0 22px;
  text-wrap: pretty;
}

.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 clamp(30px, 4vw, 40px);
  max-width: 22ch;
  text-wrap: pretty;
}
/* The three words are the point of the sentence, so let them sit upright and
   in the heading colour. */
.hero__three {
  font-style: normal;
  font-weight: 500;
  font-variation-settings: var(--wonk);
  color: var(--accent);
  letter-spacing: 0.02em;
}

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

/* Portrait ----------------------------------------------------------------- */

.portrait {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--tint);
  /* A cream frame gives the photograph an edge against the oxblood.
     It is a real border, not an inset shadow, so the image cannot cover it. */
  border: 2px solid var(--accent);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

.portrait--hero {
  aspect-ratio: 4 / 4.6;
  border-radius: 280px 280px 8px 8px;
}
.portrait--hero img { object-position: 52% 16%; }

/* portraitShape = "rect" (app.js sets the attribute on <body>) */
body[data-portrait="rect"] .portrait--hero { border-radius: 4px; }

.portrait--about {
  aspect-ratio: 4 / 4.4;
  border-radius: 4px;
}
.portrait--about img { object-position: 52% 14%; }

/* Shown only when the image file is missing or fails to load. */
.portrait__fallback { display: none; }
.portrait.is-missing img { display: none; }
.portrait.is-missing {
  background: repeating-linear-gradient(135deg, var(--hatch-a) 0 9px, var(--hatch-b) 9px 18px);
  border: 2px solid var(--accent);
}
.portrait.is-missing .portrait__fallback {
  display: inline-block;
  position: absolute;
  left: 18px;
  bottom: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 7px 11px;
}

/* What I do ---------------------------------------------------------------- */

.work {
  padding-top: clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--rule);
}
.work__label { margin-bottom: clamp(18px, 3vw, 32px); }

.work-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 34px;
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
  width: 100%;
  text-align: left;
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.18s ease;
}
.work-row:hover { background: var(--row-hover); }

.work-row__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--tan);
  padding-top: 6px;
}

.work-row__title {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: var(--wonk);
  color: var(--accent);
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.work-row__desc {
  display: block;
  font-size: clamp(14px, 1.3vw, 17px);
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

.work-row__arrow {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--accent);
  text-align: right;
  padding-top: 4px;
}

/* --- Section head --------------------------------------------------------- */

.head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
  padding-bottom: clamp(32px, 5vw, 60px);
}

/* --- Placeholder media ---------------------------------------------------- */

.media {
  display: flex;
  align-items: flex-end;
  padding: 18px;
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(135deg, var(--hatch-a) 0 9px, var(--hatch-b) 9px 18px);
}
.media--wide {
  aspect-ratio: 16 / 6.5;
  margin-bottom: clamp(36px, 5vw, 66px);
}
.media--tight { margin-bottom: clamp(28px, 4vw, 48px); }

/* Real photography drops the hatch and the inset tag. */
.media--photo {
  display: block;
  padding: 0;
  border: 2px solid var(--accent);
  overflow: hidden;
  border-radius: 4px;
  background: var(--tint);
}
.media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Keep faces in frame: these crops are much wider than their source. */
.media--face img  { object-position: 50% 20%; }
.media--group img { object-position: 50% 42%; }

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(22px, 3vw, 44px);
  padding-bottom: clamp(40px, 6vw, 78px);
}

.card {
  /* A lighter oxblood panel with the reference card's thin tan frame. */
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--panel-border);
  border-top: 3px solid var(--tan);
  border-radius: 4px;
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 18px 40px -36px rgba(0, 0, 0, 0.55);
}
.card__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--tan);
  margin: 0 0 12px;
}
.card__title {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--accent);
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.card__desc {
  margin: 0;
  font-size: clamp(14px, 1.25vw, 16px);
  color: var(--muted);
  text-wrap: pretty;
}

/* --- Closing note --------------------------------------------------------- */

.note {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 4vw, 60px);
  padding: clamp(30px, 4vw, 54px) 0;
}
.note--ruled { border-top: 1px solid var(--rule); }

.note__body {
  grid-column: span 2;
  margin: 0;
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.65;
  max-width: 62ch;
  text-wrap: pretty;
}
.note__body > p {
  margin: 0 0 18px;
}
.note__body > p:last-child { margin-bottom: 0; }

.quoted {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15em;
}

/* --- Stats ---------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  /* The numbers band uses the same lighter oxblood as the cards. */
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-top: 3px solid var(--tan);
  border-radius: 4px;
  padding: clamp(26px, 4vw, 44px) clamp(20px, 2.4vw, 28px);
}
/* showStats = false */
body[data-stats="off"] .stats { display: none; }

.stat__value {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: var(--wonk);
  color: var(--accent);
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0;
}
.stat__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 10px 0 0;
}

/* --- Call to action ------------------------------------------------------- */

.cta {
  padding-bottom: clamp(34px, 5vw, 58px);
}
/* The button is inline-block, so text-align is all this needs. */
.cta--center { text-align: center; }

/* --- Connect band --------------------------------------------------------- */

.connect {
  padding: clamp(30px, 4vw, 50px) 0;
  border-top: 1px solid var(--rule);
}
.connect .label { margin-bottom: 22px; }

.connect__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 52px);
}
.connect__link {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: var(--wonk);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--accent);
  transition: color 0.2s var(--ease);
}
.connect__link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.connect__arrow {
  display: inline-block;
  color: var(--accent);
  transition: transform 0.28s var(--ease);
}
.connect__link:hover .connect__arrow { transform: translateX(6px); }
/* Placeholder until a destination exists: looks the same, but does not invite a click. */
.connect__link--inactive { cursor: default; }
.connect__link--inactive:hover { color: var(--accent); text-decoration: none; }
.connect__link--inactive:hover .connect__arrow { transform: none; }

/* --- Articles ------------------------------------------------------------- */

.articles__label { margin-bottom: 14px; }

.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  transition: color 0.18s ease;
}
.article:hover { color: var(--ink); }
.article:hover .article__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.article__title {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: var(--wonk);
  color: var(--accent);
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin: 0;
  text-wrap: pretty;
}
.article__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
  white-space: nowrap;
}

/* --- About ---------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(40px, 6vw, 76px);
}

.about__title {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: var(--wonk);
  color: var(--accent);
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin: 0 0 26px;
  text-wrap: pretty;
}

.building {
  padding: clamp(34px, 5vw, 62px) 0;
  border-top: 1px solid var(--rule);
}
.building .label { margin-bottom: 22px; }

.building__statement {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: var(--wonk);
  color: var(--accent);
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 0 0 clamp(26px, 4vw, 44px);
  max-width: 24ch;
  text-wrap: pretty;
}

.building__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
.building__cols .prose { margin: 0; max-width: none; }

/* --- Contact -------------------------------------------------------------- */

.contact {
  margin-top: clamp(40px, 6vw, 80px);
  /* The page closes on the darker oxblood, separated by the reference's thin
     tan rule. The title is cream and all remaining copy is white. */
  background-color: var(--surface);
  background-image: none;
  color: var(--ink);
  padding: clamp(46px, 7vw, 96px) var(--pad-x);
  border-top: 1px solid var(--tan);
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}

.contact__title {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: var(--wonk);
  color: var(--accent);
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0;
  text-wrap: pretty;
}
.contact__title em {
  font-style: italic;
  color: var(--accent);
}

.contact__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.contact__email {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
  padding-bottom: 4px;
  transition: color 0.18s ease;
}
.contact__email:hover { color: var(--accent); }

.contact__social {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.contact__social a {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  transition: color 0.18s ease;
}
.contact__social a:hover { color: var(--accent); }

.contact__foot {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 20px;
  border-top: 1px solid var(--rule-on-dark);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}

/* --- Narrow viewports ----------------------------------------------------- */

@media (max-width: 560px) {
  .work-row {
    grid-template-columns: 40px minmax(0, 1fr) 24px;
    gap: 14px;
  }
  .media--wide { aspect-ratio: 16 / 9; }

  /* The mark and the links each take a full row; tighten the tracking so the
     four links stay on one line instead of spilling onto a third row. */
  .nav {
    gap: 10px;
    padding-top: 13px;
    padding-bottom: 13px;
    justify-content: center;
  }
  .nav__links { flex: 1 0 100%; }
  .nav__links { justify-content: space-between; gap: 10px; }
  .nav__link {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

/* "Business Development" is a long label; below ~380px the three links miss
   fitting on one row by a pixel or two, so tighten rather than wrap. */
@media (max-width: 380px) {
  .nav__links { gap: 8px; }
  .nav__link {
    font-size: 9.5px;
    letter-spacing: 0.05em;
  }
}

/* --- Motion ---------------------------------------------------------------
   Everything here is deliberately small: a short rise on entry, a nudge on
   hover. The section-enter stagger re-runs on every route change for free,
   because switching a screen from display:none to block restarts its
   descendants' animations. */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Typewriter cursor, appended to a heading by app.js while it types and
   removed once the full heading is back in place. */
@keyframes type-blink {
  50% { opacity: 0; }
}

.type-cursor {
  display: inline-block;
  width: 0.06em;
  min-width: 2px;
  height: 0.82em;
  margin-left: 0.06em;
  /* Matches the heading it sits in: black on red, off-white on the footer. */
  background: currentColor;
  vertical-align: -0.08em;
  animation: type-blink 0.85s steps(1) infinite;
}

/* Stagger the direct children of the active screen. */
.screen.is-active > .wrap > * {
  animation: rise 0.62s var(--ease) both;
}
.screen.is-active > .wrap > *:nth-child(1) { animation-delay: 0.02s; }
.screen.is-active > .wrap > *:nth-child(2) { animation-delay: 0.09s; }
.screen.is-active > .wrap > *:nth-child(3) { animation-delay: 0.16s; }
.screen.is-active > .wrap > *:nth-child(4) { animation-delay: 0.23s; }
.screen.is-active > .wrap > *:nth-child(5) { animation-delay: 0.30s; }
.screen.is-active > .wrap > *:nth-child(n + 6) { animation-delay: 0.36s; }

/* The landing is the first thing anyone sees, so give it a touch more room. */
#home.is-active .hero__text > * { animation: rise 0.7s var(--ease) both; }
#home.is-active .hero__name     { animation-delay: 0.06s; }
#home.is-active .hero__tagline  { animation-delay: 0.14s; }
#home.is-active .hero__actions  { animation-delay: 0.22s; }
#home.is-active .hero__portrait { animation: fade 0.9s var(--ease) both 0.12s; }

/* Nav underline grows from the left rather than snapping in. */
.nav__link::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Rows and cards lean toward the cursor. */
.work-row__arrow { transition: transform 0.28s var(--ease); }
.work-row:hover .work-row__arrow { transform: translateX(6px); }
.work-row:hover .work-row__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.card { transition: transform 0.28s var(--ease); }
.card:hover { transform: translateY(-3px); }

.article__meta { transition: transform 0.28s var(--ease); }
.article:hover .article__meta { transform: translateX(4px); }

/* Photographs breathe a little on hover. */
.media img,
.portrait img { transition: transform 0.7s var(--ease); }
.media:hover img,
.portrait:hover img { transform: scale(1.03); }

.contact__social a,
.contact__email { transition: color 0.2s var(--ease), transform 0.2s var(--ease); }
.contact__social a:hover,
.contact__email:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* Without this the stagger's delay still holds content at opacity 0 for
       up to a third of a second before it snaps in. */
    animation-delay: 0.01ms !important;
    transition-delay: 0.01ms !important;
  }
}