/* ============================================================
   PULP FUNCTION — About page ("Behind the counter")
   The person who cooks: designer, nomad, photographer.
   Pairs with tokens.css + menu.css (shared header / buttons / footer)
   ============================================================ */

/* ---- generic section rhythm ---- */
.ab-sec { padding: clamp(64px,8vw,112px) 0; }
.ab-sec.band { background: var(--paper-2); }

/* =================== BREADCRUMB =================== */
.crumb { background: var(--paper); }
.crumb .wrap { padding-top: 28px; padding-bottom: 16px; }
.crumb .trail { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.crumb a, .crumb span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.crumb .path { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crumb .path .sl { color: var(--accent); }
.crumb .path .here { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb .back { display: inline-flex; align-items: center; gap: 8px; transition: color .25s; }
.crumb .back:hover { color: var(--accent); }
.crumb .back .ar { display: inline-flex; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.crumb .back:hover .ar { transform: translateX(-3px); }

/* =================== HERO =================== */
.ab-hero { padding: clamp(48px,6vw,86px) 0 clamp(40px,5vw,64px); }
.ab-hero .top { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(36px,5vw,80px); align-items: center; }
.ab-hero .kick { font-family: var(--tab); font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: block; }
.ab-hero h1 { margin: 16px 0 0; font-weight: 700; letter-spacing: -0.035em; line-height: 0.94;
  font-size: clamp(52px,8vw,108px); }
.ab-hero h1 em { font-style: italic; color: var(--accent); }
.ab-hero .lede { margin: 28px 0 0; font-size: clamp(18px,1.6vw,23px); line-height: 1.45; max-width: 40ch; color: var(--ink); }
.ab-hero .sign { margin: 20px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ab-hero .acts { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* portrait frame */
.ab-portrait { position: relative; border: 2px solid var(--ink); background: var(--paper-3, var(--paper-2));
  aspect-ratio: 4 / 5; overflow: hidden; }
.ab-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ab-portrait .tag { position: absolute; left: -2px; bottom: -2px; z-index: 3; background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px; }

/* =================== SECTION HEAD (shared local) =================== */
.ab-head { display: flex; flex-direction: column; gap: 8px; }
.ab-head .kick { font-family: var(--tab); font-size: 15px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.ab-head h2 { margin: 0; font-weight: 400; font-size: clamp(48px,7vw,80px); letter-spacing: -0.022em; line-height: 0.98; }

/* =================== FACETS (Who am I) =================== */
.facets { margin-top: clamp(48px,6vw,84px); display: flex; flex-direction: column; gap: clamp(48px,6vw,96px); }
.facet { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px,5vw,72px); align-items: center; }
/* even rows mirror the layout but keep the image in the SAME 0.92fr column
   width as the odd rows, so every facet image is the same size */
.facet:nth-child(even) { grid-template-columns: 1.08fr 0.92fr; }
.facet:nth-child(even) .facet-ph { order: 2; }
.facet-ph { position: relative; border: 2px solid var(--ink); background: var(--paper-2);
  aspect-ratio: 1 / 1; overflow: hidden; }
.facet-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.facet:hover .facet-ph img { transform: scale(1.04); }
.facet-ph .fnum { position: absolute; top: -2px; left: -2px; z-index: 3; background: var(--ink); color: #fff;
  font-family: 'Inconsolata', ui-monospace, monospace; font-weight: 700; font-size: clamp(20px,2.2vw,30px);
  line-height: 1; padding: 10px 15px 12px; }
.facet-txt .label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: block; }
.facet-txt h3 { margin: 14px 0 0; font-style: italic; font-weight: 700; letter-spacing: -0.02em; line-height: 1.02;
  font-size: clamp(32px,4vw,52px); }
.facet-txt h3 .hot { color: var(--accent); }
.facet-txt p { margin: 22px 0 0; font-size: clamp(16px,1.3vw,18.5px); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }

/* =================== VALUES =================== */
.values .ab-head { margin-bottom: clamp(44px,4.5vw,64px); }
.values .ab-head h2 { max-width: 18ch; }
.values-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(36px,4vw,58px) clamp(48px,6vw,96px); }
.value { border-top: 2px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; }
.value .vnum { font-family: 'Inconsolata', ui-monospace, monospace; font-weight: 700; font-size: 22px; color: var(--accent); }
.value h3 { margin: 20px 0 12px; font-weight: 700; font-style: italic; font-size: clamp(26px,2.4vw,34px); letter-spacing: -0.018em; line-height: 1.06; }
.value p { margin: 0; font-size: clamp(16.5px,1.3vw,19px); line-height: 1.55; color: var(--ink-2); max-width: 48ch; }

/* =================== RESUME / IDENTITY STRIP =================== */
.idstrip { background: var(--night, #212121); color: #fff; }
.idstrip ::selection { background: var(--accent); color: #fff; }
.idstrip .wrap { padding: clamp(48px,6vw,76px) var(--gut); display: grid; grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(28px,4vw,56px); align-items: center; }
.idstrip .who .nm { font-weight: 700; font-style: italic; letter-spacing: -0.025em; line-height: 0.96;
  font-size: clamp(40px,5.4vw,72px); margin: 0; }
.idstrip .who .role { margin: 16px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.idstrip .acts { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.idstrip .socials { display: flex; gap: 22px; flex-wrap: wrap; }
.idstrip .socials a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,.78); padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.3); transition: color .25s, border-color .25s; }
.idstrip .socials a:hover { color: var(--accent); border-color: var(--accent); }

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

@media (max-width: 900px) {
  .ab-hero .top { grid-template-columns: 1fr; gap: 40px; }
  .ab-portrait { max-width: 440px; }
  .facet { grid-template-columns: 1fr; gap: 24px; }
  /* override the desktop even-row 2-col rule so images stack above text */
  .facet:nth-child(even) { grid-template-columns: 1fr; }
  .facet:nth-child(even) .facet-ph { order: 0; }
  .facet-ph { max-width: 520px; margin-top: clamp(28px,7vw,44px); }
  .idstrip .wrap { grid-template-columns: 1fr; }
  .idstrip .acts { align-items: flex-start; }
}
@media (max-width: 560px) {
  .crumb .path .here { display: none; }
  .values-grid { grid-template-columns: 1fr; }
}