/* Arsenal FC easter egg. Deliberately another brand's palette, so it cannot come
   from the SumWill tokens. Named here so the exception is explicit rather than a
   stray hex buried in the rules below. */
:root {
  --arsenal-red: #EF0107;
  --arsenal-ink: #0F0F0F;
}

/* =============================================================
   About page — Philosophy / Story / Experience / Skills / Tech
   Lives on its own page so the homepage stays a clean reel.
   ============================================================= */

body.about {
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;

  /* Vertical rhythm between sections. Spent almost entirely ABOVE each heading:
     the pause is what separates one chapter from the next, so the section's own
     content stays gathered under its title instead of floating between two
     equal gaps. Scales with viewport height, not width — the gap is a fraction
     of what the reader can see at once. */
  --about-rhythm: clamp(112px, 22vh, 264px);
}
body.about .sw-chrome { mix-blend-mode: normal; }
body.about .sw-mark,
body.about .sw-chrome-right a { color: var(--ink); }

.about-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 120px var(--pad-x) 96px;
}

/* Hero block */
.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: end;
  padding-bottom: clamp(48px, 8vh, 96px);
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.12);
}
.about-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.about-hero h1 em { font-style: italic; }
.about-hero-meta {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.55);
  text-wrap: pretty;
}
.about-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
}
.about-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.about-portrait .tag {
  position: absolute;
  top: 16px; left: 16px;
  background: rgb(var(--ink-rgb) / 0.78);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.about-portrait .tag .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--c-qumba);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-qumba) 25%, transparent);
}

/* Section base */
.about-section {
  /* No divider rule here on purpose: at this rhythm the whitespace separates the
     sections, and a hairline under every one of them made the page read as a
     stacked list. The only rule left on the page is under the hero. */
  padding-top: var(--about-rhythm);
  padding-bottom: clamp(12px, 1.6vh, 24px);
}
/* The hero already ends in a rule and its own bottom padding, so the first
   section starts from a shorter pause. Selected by adjacency, NOT :first-of-type
   — the hero is a <section> too, so :first-of-type here matches nothing. */
.about-hero + .about-section { padding-top: clamp(72px, 12vh, 144px); }
.about-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 24ch;
  margin-bottom: 32px;
}
.about-section h2 em { font-style: italic; }

/* Story (bio prose) */
.story-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
}
.story-intro p {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.32;
  color: var(--ink);
  max-width: 28ch;
  text-wrap: pretty;
  hyphens: none;
}
.story-prose p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: rgb(var(--ink-rgb) / 0.78);
  margin-bottom: 20px;
  max-width: 56ch;
}
.story-prose strong { color: var(--ink); font-weight: 600; }
.story-prose em { font-style: italic; color: var(--ink); }

/* Philosophy 3-up */
.phil-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.phil-card {
  padding: 32px;
  border: 1px solid rgb(var(--ink-rgb) / 0.12);
  border-radius: 6px;
  background: rgb(var(--paper-rgb) / 0.4);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.phil-card h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.phil-card p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: rgb(var(--ink-rgb) / 0.72);
}

/* Experience timeline */
.exp-list { display: flex; flex-direction: column; gap: 48px; }
.exp-item {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding-top: 32px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.12);
}
.exp-item:first-child { border-top: 0; padding-top: 0; }
.exp-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.exp-meta .exp-dates {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.5);
}
.exp-meta .exp-company {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
}
.exp-meta .exp-loc {
  font-family: var(--sans);
  font-size: 13px;
  color: rgb(var(--ink-rgb) / 0.55);
}
.exp-roles { display: flex; flex-direction: column; gap: 24px; }
.exp-role {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.exp-role .role-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.exp-role .role-dates {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.5);
}
.exp-role .role-desc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgb(var(--ink-rgb) / 0.72);
  max-width: 64ch;
}

/* Skills grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.skill-item {
  padding: 20px 0;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skill-item:nth-child(odd) { padding-right: 24px; }
.skill-item:nth-child(even) { padding-left: 24px; border-left: 1px solid rgb(var(--ink-rgb) / 0.1); }
.skill-item .skill-title {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
}
.skill-item .skill-desc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: rgb(var(--ink-rgb) / 0.7);
}

/* Tech stack */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.tech-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px;
  border: 1px solid rgb(var(--ink-rgb) / 0.1);
  border-radius: 6px;
  background: rgb(var(--paper-rgb) / 0.4);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  text-align: center;
}
.tech-tile img {
  width: 40px; height: 40px;
  object-fit: contain;
}
.tech-extra-toggle {
  margin-top: 32px;
  background: transparent;
  border: 1px solid rgb(var(--ink-rgb) / 0.18);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tech-extra-toggle:hover {
  background: var(--ink); color: var(--paper);
}
.tech-extra { display: none; margin-top: 32px; }
.tech-extra.open { display: block; }
.tech-extra .tech-category {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.55);
  margin: 32px 0 16px;
}
.tech-extra .tech-category:first-child { margin-top: 0; }

/* CTA footer */
.about-cta {
  margin-top: var(--about-rhythm);
  padding: 64px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
/* Three brand-color pools drifting down the right side, carried on ONE layer over the
   ink so they overlap and mix instead of sitting apart. Two things do that work: the
   pools are wide enough (72-82%) that neighbours overlap well before either has faded
   out, and each has a mid stop (~0.55 alpha at ~43%) so the falloff is gradual rather
   than a hard shoulder. Isolated pools with bare ink between them read as three
   separate blobs, which is what this replaced.
   The rgb() literals are the --c-* accents: a transparent end-stop has to name the
   same hue or the fade runs through gray.
   The mask dissolves the whole layer toward the copy, so there is no straight edge
   anywhere and the left side stays near-black behind the text. One layer, one mask —
   stacking two masked layers does NOT work, since each mask is opaque outside its own
   hole and the union covers everything. */
.about-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(72% 78% at 90% 4%,  rgb(199 91 48 / 0.95) 0%, rgb(199 91 48 / 0.55) 42%, rgb(199 91 48 / 0) 100%),
    radial-gradient(70% 76% at 82% 50%, rgb(168 74 124 / 0.9)  0%, rgb(168 74 124 / 0.5)  44%, rgb(168 74 124 / 0) 100%),
    radial-gradient(76% 82% at 98% 98%, rgb(26 122 138 / 0.95) 0%, rgb(26 122 138 / 0.55) 44%, rgb(26 122 138 / 0) 100%);
  -webkit-mask-image: radial-gradient(120% 140% at 108% 50%, #000 0%, rgb(0 0 0 / 0.8) 40%, rgb(0 0 0 / 0) 84%);
          mask-image: radial-gradient(120% 140% at 108% 50%, #000 0%, rgb(0 0 0 / 0.8) 40%, rgb(0 0 0 / 0) 84%);
}
.about-cta > * { position: relative; z-index: 1; }
.about-cta h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.04;
  max-width: 21ch;
}
.about-cta h3 em { font-style: italic; opacity: 0.62; }
.about-cta p {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--paper);
  max-width: 48ch;
}

/* Arsenal easter egg — hover the word "arsenal" in the tech heading */
.arsenal-word { position: relative; cursor: default; display: inline-block; font-style: italic; }
.arsenal-word::after {
  content: '';
  position: absolute;
  bottom: 0.06em; left: 0; right: 0;
  height: 0.05em;
  background: var(--arsenal-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.arsenal-word:hover::after { transform: scaleX(1); }
.arsenal-tooltip {
  position: absolute;
  bottom: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 200;
  width: 240px;
  font-style: normal;
}
.arsenal-word:hover .arsenal-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
.arsenal-card {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: normal;
  background: var(--arsenal-ink);
  border: 1px solid color-mix(in srgb, var(--arsenal-red) 40%, transparent);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}
.arsenal-name {
  display: block;
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.1;
  color: var(--arsenal-red);
  margin-bottom: 6px;
  font-weight: 400;
}
.arsenal-motto {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.5);
  margin-bottom: 10px;
  white-space: nowrap;
}
.arsenal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--arsenal-red) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--arsenal-red) 30%, transparent);
  border-radius: 30px;
  padding: 5px 11px;
}
.arsenal-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--arsenal-red);
  animation: arsenal-pulse 1.5s ease-in-out infinite;
}
@keyframes arsenal-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.arsenal-badge-text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.7);
}

/* Full-bleed project grid at the bottom of the page */
.about-grid-full {
  width: 100vw;
  margin: clamp(56px, 9vh, 104px) calc(50% - 50vw) 0;
}
.about-grid-full img { display: block; width: 100%; height: auto; }

/* Footer — matches the homepage footer */
.about-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(56px, 9vh, 104px);
  padding-top: 24px;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.12);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.55);
}

@media (max-width: 960px) {
  .about-footer { flex-direction: column; gap: 8px; }
  .about-hero { grid-template-columns: minmax(0, 1fr); }
  .story-body { grid-template-columns: minmax(0, 1fr); }
  .phil-grid { grid-template-columns: minmax(0, 1fr); }
  .exp-item { grid-template-columns: minmax(0, 1fr); }
  .skills-grid { grid-template-columns: minmax(0, 1fr); }
  .skill-item:nth-child(even) { padding-left: 0; border-left: 0; }
  .skill-item:nth-child(odd) { padding-right: 0; }
  .tech-grid { grid-template-columns: repeat(3, 1fr); }
  .about-cta { padding: 40px 28px; }
  /* The card is much narrower and taller here, so the same pools sat behind the copy.
     Push their centers past the right edge and keep them tall but narrow: the three
     hues still overlap each other vertically, so there is no seam, while the layer
     reads as a glow hugging the edge instead of a wash under the paragraph. */
  .about-cta::before {
    background:
      radial-gradient(62% 52% at 112% 4%,  rgb(199 91 48 / 0.95) 0%, rgb(199 91 48 / 0.55) 44%, rgb(199 91 48 / 0) 100%),
      radial-gradient(58% 48% at 106% 50%, rgb(168 74 124 / 0.9)  0%, rgb(168 74 124 / 0.5)  46%, rgb(168 74 124 / 0) 100%),
      radial-gradient(66% 54% at 116% 98%, rgb(26 122 138 / 0.95) 0%, rgb(26 122 138 / 0.55) 46%, rgb(26 122 138 / 0) 100%);
    -webkit-mask-image: radial-gradient(105% 130% at 116% 50%, #000 0%, rgb(0 0 0 / 0.8) 38%, rgb(0 0 0 / 0) 86%);
            mask-image: radial-gradient(105% 130% at 116% 50%, #000 0%, rgb(0 0 0 / 0.8) 38%, rgb(0 0 0 / 0) 86%);
  }
}

/* Staggered reveals are decoration. Off entirely when the reader has asked for
   less motion — this also neutralizes the inline transition-delay about.js sets. */
@media (prefers-reduced-motion: reduce) {
  body.about .fade-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Fluid layout: reading sections center on wide screens ---------- */
.about-hero,
.about-section,
.about-cta { max-width: var(--prose-w); margin-inline: auto; }

/* "Currently" line, tucked under the hero meta. Component lives in shared.css. */
/* Wider than the 18px it started at: the meta line above is mono uppercase too,
   and at close range the two read as one stacked block instead of two beats. */
.about-hero .sw-now { margin-top: 28px; }