/* ===================================================================
   Hani Qarrain — portfolio
   Warm paper, Fraunces + Georgia. One stylesheet for all pages.
   =================================================================== */

:root {
  --paper: #f4ead5;
  --paper-2: #ece0c6;
  --ink: #2a1f17;
  --ink-2: #57422f;
  --ink-3: #8b6f54;
  --line: #d6c5a4;
  /* Colour roles, applied consistently across every page:
     --accent-2  emphasis at rest — links, eyebrows, buttons, key labels
     --accent    hover / active only, never a resting state
     --gold      achievement figures only — placings, records, stats
     --wash      the translucent lift used on cards, so paper grain shows through */
  --accent: #b8471f;
  --accent-2: #8a3214;
  --gold: #b0801c;
  --wash: rgba(255, 255, 255, 0.18);
  --paper-veil: rgba(244, 234, 213, 0.85); /* --paper, translucent, for the sticky bar */
  --wrap: 1080px;
  --pad: 40px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(185, 120, 60, 0.07) 0%, transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--paper); }

.display {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

a { color: var(--accent-2); }
a:hover { color: var(--accent); }

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

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

/* ============================================================
   LANDING
   ============================================================ */

.hero {
  min-height: calc(100svh - 118px); /* leave the footer just off the fold */
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 5vh var(--pad) 3vh;
  display: grid;
  /* the frame sizes itself from viewport height; the text column takes what's left */
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: center;
}

/* Both names sit on one baseline, same size and colour, as a single left-aligned unit */
.signature {
  margin-bottom: clamp(20px, 7vh, 76px);
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--ink);
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.2;
}
.sig-en {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: -0.01em;
}
.sig-div { color: var(--line); font-size: 1em; }
.sig-ar {
  font-family: 'Amiri', serif;
  font-weight: 700;
  font-size: 1em;
}

.lede {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(21px, 2.4vw, 29px);
  color: var(--ink-3);
  margin-bottom: 10px;
}

.roles { display: block; }

.role {
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: 4px 0 10px;
  transition: color 0.25s, transform 0.25s;
}
.role-name {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
/* height is reserved so revealing the subtitle doesn't shift the stack */
.role-meta {
  display: block;
  height: 15px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
}
.role:hover,
.role:focus-visible { color: var(--accent); transform: translateX(4px); outline: none; }
.role:hover .role-meta,
.role:focus-visible .role-meta { opacity: 1; transform: translateY(0); }

.whereabouts {
  margin-top: clamp(20px, 7vh, 76px);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.whereabouts a { display: block; color: var(--ink-3); text-decoration: none; margin-top: 6px; }
.whereabouts a:hover { color: var(--accent); }

/* The preview frame that reacts to whichever role is hovered */
/* Height comes from the viewport, width follows from the ratio — so a taller
   frame can never push the footer below the fold. */
.stage {
  position: relative;
  justify-self: end;
  height: min(calc(100svh - 270px), 500px);
  aspect-ratio: 4 / 5;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
}
.stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.5s ease, transform 0.9s ease;
}
/* resting state: the first image holds the frame at full strength */
.hero:not(:has(.role:hover)):not(:has(.role:focus-visible)) .stage img[data-role="music"] {
  opacity: 1;
  transform: scale(1);
}
.hero:has(.role[data-role="music"]:hover) .stage img[data-role="music"],
.hero:has(.role[data-role="music"]:focus-visible) .stage img[data-role="music"],
.hero:has(.role[data-role="games"]:hover) .stage img[data-role="games"],
.hero:has(.role[data-role="games"]:focus-visible) .stage img[data-role="games"],
.hero:has(.role[data-role="athlete"]:hover) .stage img[data-role="athlete"],
.hero:has(.role[data-role="athlete"]:focus-visible) .stage img[data-role="athlete"],
.hero:has(.role[data-role="record"]:hover) .stage img[data-role="record"],
.hero:has(.role[data-role="record"]:focus-visible) .stage img[data-role="record"] {
  opacity: 1;
  transform: scale(1);
}

.role-thumb { display: none; }

/* ============================================================
   SUB-PAGE CHROME
   ============================================================ */

/* Sticky. Translucent rather than solid so the fixed background wash and grain
   carry through the bar instead of being covered by a flat strip. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper-veil);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px var(--pad) 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.home {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.home:hover { color: var(--accent); }
.topnav { display: flex; gap: 22px; flex-wrap: wrap; }
.topnav a {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.topnav a:hover { color: var(--accent); }
.topnav a.is-current { color: var(--ink); border-bottom: 1px solid var(--accent-2); }

.page-head {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 64px var(--pad) 0;
}
.page-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 700;
  font-size: clamp(44px, 7vw, 78px);
  line-height: 1;
  letter-spacing: -0.035em;
}
.page-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--ink-3);
  margin-top: 14px;
  max-width: 46ch;
}

section.block {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px var(--pad);
}
.block-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

/* Body prose */
.prose p { color: var(--ink-2); margin-bottom: 18px; line-height: 1.75; }
.prose p:last-child { margin-bottom: 0; }

/* Single reading column — no panels, no rules; spacing does the sectioning */
.column { max-width: 60ch; }
.column p {
  color: var(--ink-2);
  line-height: 1.75;
  margin-bottom: 16px;
}
.sec {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 46px 0 10px;
}
.sec:first-child { margin-top: 0; }

/* Film credits — poster over title over one line of detail.
   Posters are contained rather than cropped: they're artwork, and the two
   have different proportions, so the frame letterboxes instead of trimming. */
.films {
  display: grid;
  /* capped width, zero min — posters stay small here but still shrink on narrow screens */
  grid-template-columns: repeat(2, minmax(0, 168px));
  gap: 18px;
  margin-bottom: 20px;
}
.film img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--paper-2);
  border: 1px solid var(--line);
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.film a:hover img { border-color: var(--ink); }
.film strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 2px;
}
.film strong a { color: inherit; text-decoration: none; }
.film strong a:hover { color: var(--accent); }
.film span {
  display: block;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* Call to action */
.cta {
  display: inline-block;
  margin-top: 26px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent-2);
  border: 1px solid var(--accent-2);
  padding: 11px 20px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.cta:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Stat row */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.stat .num {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
  display: block;
}
.stat .lbl {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
  display: block;
}

/* Two-column split: text beside images */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
}
.gallery img.tall { aspect-ratio: 3 / 4; }
.gallery img:only-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
/* Single stack of photos. The column is narrow and the crop is wide so four
   images run to roughly the height of the text beside them, not past it. */
.gallery.one { grid-template-columns: 1fr; }
.gallery.one img { aspect-ratio: 1 / 1; }
.split.media-narrow { grid-template-columns: 1fr 0.42fr; }

/* ============================================================
   PROJECT CARDS
   ============================================================ */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cards.two { grid-template-columns: repeat(2, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  background: var(--wash);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--ink); transform: translateY(-3px); }
.card-media { overflow: hidden; background: var(--paper-2); }
.card-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex-grow: 1; }
.card-meta {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 6px;
}
.card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.15;
  margin-bottom: 6px;
}
.card:hover h3 { color: var(--accent); }
.card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  flex-grow: 1;
}
.card-foot {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   AWARDS
   ============================================================ */

.awards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.award { border-top: 2px solid var(--gold); padding-top: 14px; }
.award img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.award .place {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
/* Gold medal: ribbon tails plus a disc with the star knocked out (evenodd) */
.award .place::before {
  content: "";
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background-color: var(--gold);
  --medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.6 1h4.6L8.6 8.2 4.9 10.1z'/%3E%3Cpath d='M18.4 1h-4.6l1.6 7.2 3.7 1.9z'/%3E%3Cpath fill-rule='evenodd' d='M12 8.5a7 7 0 1 0 0 14 7 7 0 1 0 0-14z M12 11.3 l1.12 2.66 l2.87 0.24 l-2.18 1.89 l0.66 2.81 l-2.47 -1.5 l-2.47 1.5 l0.66 -2.81 l-2.18 -1.89 l2.87 -0.24 z'/%3E%3C/svg%3E");
  -webkit-mask: var(--medal) center / contain no-repeat;
  mask: var(--medal) center / contain no-repeat;
}
.award .what {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  margin-bottom: 4px;
}
.award .where { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

/* Plain record list */
.records { border-top: 1px solid var(--line); }
.record {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.record .rk {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 900;
  font-size: 22px;
  color: var(--gold);
  min-width: 92px;
  line-height: 1;
}
.record .rd { flex-grow: 1; }
.record .rd strong { font-weight: normal; font-family: 'Fraunces', Georgia, serif; font-size: 17px; }
.record .rd span { display: block; font-size: 13px; color: var(--ink-3); }

/* ============================================================
   FOOTER
   ============================================================ */

.site-foot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 36px var(--pad) 48px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.2s;
}
.foot-links a:hover { color: var(--accent); }

/* Icons live here rather than in the markup, so all five pages share one copy
   and the glyph inherits the link colour via currentColor. */
.foot-links a[class^="fl-"]:not(.fl-kolide)::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.fl-home  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); }
.fl-email { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z'/%3E%3C/svg%3E"); }
.fl-ig    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm7.846-10.405a1.441 1.441 0 01-2.88 0 1.44 1.44 0 012.88 0z'/%3E%3C/svg%3E"); }
.fl-li    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); }
.fl-sp    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z'/%3E%3C/svg%3E"); }
.fl-itch  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.13 1.338C2.08 1.96.02 4.328 0 4.95v1.03c0 1.303 1.22 2.45 2.325 2.45 1.33 0 2.436-1.102 2.436-2.41 0 1.308 1.07 2.41 2.4 2.41 1.328 0 2.362-1.102 2.362-2.41 0 1.308 1.137 2.41 2.466 2.41h.024c1.33 0 2.466-1.102 2.466-2.41 0 1.308 1.034 2.41 2.363 2.41 1.33 0 2.4-1.102 2.4-2.41 0 1.308 1.106 2.41 2.435 2.41C22.78 8.43 24 7.282 24 5.98V4.95c-.02-.62-2.082-2.99-3.13-3.612-3.253-.114-5.508-.134-8.87-.133-3.362 0-7.945.053-8.87.133zm6.376 6.477a2.74 2.74 0 01-.468.602c-.5.49-1.19.795-1.947.795a2.786 2.786 0 01-1.95-.795c-.182-.178-.32-.37-.446-.59-.127.222-.303.412-.486.59a2.788 2.788 0 01-1.95.795c-.092 0-.187-.025-.264-.052-.107 1.113-.152 2.176-.168 2.95v.005l-.006 1.167c.02 2.334-.23 7.564 1.03 8.85 1.952.454 5.545.662 9.15.663 3.605 0 7.198-.21 9.15-.664 1.26-1.284 1.01-6.514 1.03-8.848l-.006-1.167v-.004c-.016-.775-.06-1.838-.168-2.95-.077.026-.172.052-.263.052a2.788 2.788 0 01-1.95-.796c-.184-.178-.36-.368-.487-.59-.126.22-.264.412-.446.59a2.786 2.786 0 01-1.95.795c-.756 0-1.446-.303-1.945-.794a2.774 2.774 0 01-.468-.602 2.774 2.774 0 01-.463.602 2.79 2.79 0 01-1.95.794h-.16a2.79 2.79 0 01-1.95-.794 2.774 2.774 0 01-.464-.602zm-2.004 2.59v.002c.795.002 1.5 0 2.373.953.687-.072 1.406-.108 2.125-.107.72 0 1.438.035 2.125.107.873-.953 1.578-.95 2.372-.953.376 0 1.876 0 2.92 2.934l1.123 4.028c.832 2.995-.266 3.068-1.636 3.07-2.03-.075-3.156-1.55-3.156-3.025-1.124.184-2.436.276-3.748.277-1.312 0-2.624-.093-3.748-.277 0 1.475-1.125 2.95-3.156 3.026-1.37-.002-2.468-.075-1.636-3.07l1.122-4.03c1.045-2.933 2.545-2.933 2.92-2.933zM12 12.714c-.002.002-2.05 1.88-2.417 2.547l1.32-.053v1.15c0 .054.55.033 1.097.008.547.025 1.096.046 1.096-.007v-1.15l1.32.052C14.05 14.593 12 12.713 12 12.713z'/%3E%3C/svg%3E"); }
.fl-steam { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.979 0C5.678 0 .511 4.86 0 11.032l6.436 2.658c.545-.371 1.203-.59 1.912-.59.063 0 .125.004.188.006l2.861-4.142V8.91c0-2.495 2.028-4.524 4.524-4.524 2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.076 2.911c0 .052.004.105.004.159 0 1.875-1.515 3.396-3.39 3.396-1.635 0-3.016-1.173-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.627 0 11.999-5.373 11.999-12S18.605 0 11.979 0zM7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25 1.297.539 2.793-.076 3.332-1.375.263-.63.264-1.319.005-1.949s-.75-1.121-1.377-1.383c-.624-.26-1.29-.249-1.878-.03l1.523.63c.956.4 1.409 1.5 1.009 2.455-.397.957-1.497 1.41-2.454 1.012H7.54zm11.415-9.303c0-1.662-1.353-3.015-3.015-3.015-1.665 0-3.015 1.353-3.015 3.015 0 1.665 1.35 3.015 3.015 3.015 1.663 0 3.015-1.35 3.015-3.015zm-5.273-.005c0-1.252 1.013-2.266 2.265-2.266 1.249 0 2.263 1.014 2.263 2.266 0 1.251-1.014 2.265-2.263 2.265-1.252 0-2.265-1.014-2.265-2.265z'/%3E%3C/svg%3E"); }
.fl-apple { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E"); }

/* Kolide's mark is a full wordmark, so it stands in for its own label */
.fl-kolide img { height: 22px; width: auto; border-radius: 3px; opacity: 0.9; transition: opacity 0.2s; }
.fl-kolide:hover img { opacity: 1; }

.foot-note { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  :root { --pad: 22px; }
  body { font-size: 16px; }

  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding-top: 36px;
    padding-bottom: 40px;
    align-items: start;
  }
  .signature { margin-bottom: 40px; }
  .whereabouts { margin-top: 40px; }
  .stage { display: none; }

  /* Words alone don't carry a touch screen — give each one its thumbnail */
  .role {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    transform: none;
  }
  .role:hover, .role:focus-visible { transform: none; }
  .role-thumb {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--line);
    flex-shrink: 0;
  }
  .role-name { font-size: clamp(26px, 7.5vw, 37px); }
  .role-meta { display: none; }

  .split, .split.media-narrow, .cards, .cards.two { grid-template-columns: 1fr; gap: 28px; }
  .sec { margin-top: 36px; }
  .cards { gap: 16px; }
  .awards { grid-template-columns: 1fr 1fr; }
  .site-foot { flex-direction: column; align-items: flex-start; }
  section.block { padding-top: 40px; padding-bottom: 40px; }
  .page-head { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}