/* =====================================================================
   About page (6 Oct). Uses the case-study header (.cs-head) and the
   shared footer; tokens in site.css. Paper artboard "About — Desktop".
   ===================================================================== */
.ab-intro { display: flex; flex-direction: column; gap: calc(48 * var(--u)); padding: max(24px, calc(40 * var(--u))) var(--gutter) 0; }
.ab-intro h1, .ab-intro .ab-title {
  margin: 0; color: var(--cobalt);
  font: 400 max(48px, calc(128 * var(--u))) / .914 var(--f-display); letter-spacing: -.01em; text-transform: uppercase;
}
.ab-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; border-top: 1px solid var(--ink); padding-top: 24px; }
.ab-story { width: calc(625 * var(--u)); min-width: 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.ab-story p { margin: 0; color: var(--graphite); font: 400 max(16px, calc(17 * var(--u))) / 1.53 var(--f-body); }
.ab-story .lede { color: var(--ink); font: 500 max(21px, calc(30 * var(--u))) / 1.23 var(--f-body); letter-spacing: -.01em; }
.ab-facts { margin: 0; display: flex; gap: 24px; border-top: 1px solid var(--rule); padding-top: 20px; }
.ab-facts > div { width: calc(190 * var(--u)); min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ab-facts dt { font: 400 12px/16px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.ab-facts dd { margin: 0; font: 500 max(15px, calc(17 * var(--u))) / 1.3 var(--f-body); color: var(--ink); }

/* taped polaroid, nudged up over the rule (paste-up) */
.ab-photo { width: calc(560 * var(--u)); flex-shrink: 0; display: flex; justify-content: center; padding-top: calc(16 * var(--u)); transform: translateY(calc(-150 * var(--u))); }
.polaroid {
  position: relative; margin: 0; width: calc(400 * var(--u)); min-width: 240px;
  display: flex; flex-direction: column; gap: calc(18 * var(--u));
  padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u));
  background: var(--paper-hi); transform: rotate(3deg);
  box-shadow: 0 1px 2px rgba(18,18,18,.18), 0 18px 34px -12px rgba(18,18,18,.30);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.polaroid:hover { transform: rotate(1deg) translateY(-4px); }
.polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 368 / 491; object-fit: cover; }
.polaroid figcaption { display: flex; justify-content: space-between; gap: 12px; font: 400 12px/16px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.polaroid figcaption span + span { color: var(--graphite); }
.polaroid .tape { position: absolute; left: 22.25%; top: calc(-26 * var(--u)); width: 55.5%; height: auto; aspect-ratio: 480 / 110; object-fit: fill; transform: rotate(-4deg); filter: drop-shadow(0 1px 1.5px rgba(18,18,18,.22)); pointer-events: none; }

/* sections */
.ab-sec { display: flex; flex-direction: column; gap: calc(32 * var(--u)); padding: max(64px, calc(120 * var(--u))) var(--gutter) 0; }
.ab-sec .sec-head h2 { font-size: max(32px, calc(64 * var(--u))); line-height: .97; }
.ab-sec .sec-head .label { padding-bottom: 2px; }
.ab-bring { padding-top: max(48px, calc(96 * var(--u))); }

.ab-strengths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ab-strengths > div { display: flex; flex-direction: column; gap: 16px; }
.ab-strengths .num { color: var(--cobalt); font: 500 13px/16px var(--f-mono); letter-spacing: .06em; }
.ab-strengths h3 { margin: 0; font: 400 max(24px, calc(30 * var(--u))) / 1.03 var(--f-display); text-transform: uppercase; }
.ab-strengths p { margin: 0; color: var(--graphite); font: 400 max(16px, calc(17 * var(--u))) / 1.53 var(--f-body); }

/* experience: fixed lanes so every row lines up */
.ab-exp { gap: 0; }
.jobs { list-style: none; margin: 0; padding: 0; }
.jobs li { display: flex; align-items: center; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.jobs .d { width: calc(180 * var(--u)); min-width: 110px; flex-shrink: 0; font: 400 13px/16px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--graphite); }
.jobs b { flex: 1; min-width: 0; font: 400 max(26px, calc(40 * var(--u))) / 1 var(--f-display); text-transform: uppercase; }
.jobs .r { width: calc(260 * var(--u)); flex-shrink: 0; font: 500 max(15px, calc(17 * var(--u))) / 1.3 var(--f-body); }
.jobs .c { width: calc(340 * var(--u)); flex-shrink: 0; text-align: right; color: var(--graphite); font: 400 max(15px, calc(17 * var(--u))) / 1.3 var(--f-body); }

/* awards: four slightly wonky stickers */
.ab-awards { gap: calc(40 * var(--u)); }
.awards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 8px 0 16px; }
.aw {
  aspect-ratio: 318 / 260; display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px 22px 24px; transform: rotate(var(--r)); transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.aw:hover { transform: rotate(0deg) translateY(-6px); }
.aw .t { display: flex; justify-content: space-between; }
.aw > div:last-child { display: flex; flex-direction: column; gap: 12px; }
.aw h3 { margin: 0; font: 400 max(24px, calc(32 * var(--u))) / 1 var(--f-display); text-transform: uppercase; }
.aw p { margin: 0; font-size: 13px; line-height: 18px; letter-spacing: .04em; }
.aw--ink    { --r: -2deg;  background: var(--ink); color: var(--paper); }
.aw--ink p  { color: var(--chrome); }
.aw--chrome { --r: 1.5deg; background: var(--chrome); color: var(--ink); }
.aw--paper  { --r: -1deg;  background: var(--paper-hi); color: var(--ink); outline: 1px solid var(--ink); outline-offset: -1px; }
.aw--paper p { color: var(--cobalt); }
.aw--cobalt { --r: 2deg;   background: var(--cobalt); color: var(--paper); }
.aw--cobalt p { color: var(--chrome); }

/* press: ruled grid of black logos (sizes balanced by area, set per logo via --w) */
.ab-press { display: flex; flex-direction: column; gap: 20px; padding: max(56px, calc(96 * var(--u))) var(--gutter) max(80px, calc(140 * var(--u))); }
.ab-press .cs-label { font-size: 12px; }
.press-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ink); }
.press-grid li { height: max(88px, calc(129 * var(--u))); display: grid; place-items: center; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.press-grid li:nth-child(5n) { border-right: 0; }
.press-grid img { display: block; width: max(calc(var(--w) * .55px), calc(var(--w) * var(--u))); height: auto; }

/* ---------- About as a tab on the homepage (6 Oct) ----------
   The panel sits inside main.work (which already has the side gutter and the 40px gap under the pills). */
.work [hidden] { display: none !important; }
.about-panel > section { padding-left: 0; padding-right: 0; }
.about-panel > .ab-intro { padding-top: 0; }
.about-panel .ab-summary { height: calc(482 * var(--u)); }   /* Dan fixed this in Paper: the polaroid hangs over the next gap */
.about-panel .ab-exp { padding-top: 0; }     /* 7 Oct: "What I bring" removed — Where I've been sits straight under the summary row */
.about-panel .ab-press { padding-bottom: 0; } /* 7 Oct: logo grid runs straight into the footer's torn edge (as Paper) */
.about-panel .cs-label { display: flex; justify-content: space-between; gap: 16px; }
.about-panel .cs-label span:first-child { font-weight: 500; }
.panel-in { animation: panel-in .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel-in { animation: none; } }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .ab-summary { flex-direction: column-reverse; align-items: stretch; }
  .ab-story, .ab-photo { width: 100%; }
  .ab-photo { transform: none; padding: 8px 0 16px; }
  .about-panel .ab-summary { height: auto; }
  .ab-strengths { grid-template-columns: 1fr; gap: 36px; }
  .awards { grid-template-columns: 1fr 1fr; }
  .jobs .c { display: none; }
  .press-grid { grid-template-columns: repeat(3, 1fr); }
  .press-grid li:nth-child(5n) { border-right: 1px solid var(--rule); }
  .press-grid li:nth-child(3n) { border-right: 0; }
}
@media (max-width: 640px) {
  .ab-facts { flex-direction: column; gap: 14px; }
  .ab-facts > div { width: 100%; }
  .jobs li { flex-wrap: wrap; gap: 6px 16px; padding: 18px 0; }
  .jobs .d { width: 100%; }
  .jobs b { flex-basis: 100%; }
  .jobs .r { width: auto; color: var(--graphite); }
  .polaroid { width: 80%; max-width: 340px; }
  .polaroid figcaption { font-size: 10px; letter-spacing: .04em; }
}
@media (max-width: 480px) {
  .press-grid { grid-template-columns: repeat(2, 1fr); }
  .press-grid li:nth-child(3n) { border-right: 1px solid var(--rule); }
  .press-grid li:nth-child(2n) { border-right: 0; }
}
@media (max-width: 480px) { .awards { grid-template-columns: 1fr; } .aw { aspect-ratio: auto; min-height: 180px; } }
@media (prefers-reduced-motion: reduce) { .polaroid, .aw { transition: none; } }