/* ————————————————————————————————
   popescu lombardi — personal hub
   typographic wall: Archivo poster grotesk
   every name scaled to fill the full width
   paper / ink / IKB blue
   ———————————————————————————————— */

:root {
  --paper: #ffffff;
  --ink: #111114;
  --faint: #6f6f68;
  --pencil: #c9c9c1;
  --hairline: #ebebe6;
  --blue: #002fa7; /* International Klein Blue — hover only */
  --orange: #ffaa01; /* the Modulor logo orange — masthead hover */
  --wall: "Archivo", sans-serif;
  --mono: "Fragment Mono", monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 3.5vw, 44px) clamp(16px, 4vw, 56px) 40px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

/* ——— the wall type ———
   .fit elements get their exact font-size from script.js
   so each line spans the full width of its .row-name */

.row-name { display: block; width: 100%; }

.fit {
  display: inline-block;
  font-family: var(--wall);
  font-weight: 840;
  font-stretch: 115%;
  font-size: clamp(40px, 9vw, 110px); /* fallback before JS runs */
  line-height: 0.93;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.fit:hover, a.fit:focus-visible { color: var(--blue); }

/* every other project condenses: alternating wide/tall silhouettes
   so neighbouring rows read as distinct objects */
.list .proj:nth-child(even) .fit {
  font-stretch: 66%;
  letter-spacing: 0;
}

/* names that keep their own casing (BoMB) */
.fit--case { text-transform: none; }

/* the odd-three category: outline-only letters, blue outline on hover */
.is-ghost .fit {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--ink);
}

.is-ghost .fit:hover, .is-ghost a.fit:focus-visible {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--blue);
}

@supports not (-webkit-text-stroke: 1px black) {
  .is-ghost .fit { color: var(--faint); }
}

/* ——— apps: quiet, fixed-size rows at the end ——— */

.app-name {
  font-family: var(--wall);
  font-weight: 640;
  font-stretch: 100%;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
}

a.app-name:hover, a.app-name:focus-visible { color: var(--blue); }

.proj--app {
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.proj--app .meta { margin-top: 4px; }

/* ——— topbar ——— */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: clamp(20px, 4vh, 40px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--faint);
}

.mark { width: 26px; height: 26px; display: block; }

.tabs { display: flex; gap: 22px; }

.tab {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: none;
  border: 0;
  color: var(--faint);
  cursor: pointer;
  padding: 2px 0;
}

.tab:hover { color: var(--blue); }

.tab.is-active {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ——— masthead name ——— */

.masthead { margin-bottom: clamp(36px, 7vh, 72px); }

.name .row-name { margin-bottom: 0.04em; }

/* the name hovers in logo orange; every other hover stays blue */
.name .fit:hover { color: var(--orange); }

/* ——— panels ——— */

.panel-title {
  font-size: 12px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 8px;
  margin-bottom: clamp(18px, 3vh, 28px);
}

.panel-title--section {
  margin-top: clamp(48px, 9vh, 88px);
}

/* ——— table column headers ——— */

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px 52px;
  gap: 0 28px;
  padding-bottom: 6px;
  margin-bottom: clamp(14px, 2.4vh, 24px);
  border-bottom: 1px solid var(--ink);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pencil);
}

.c-year { text-align: right; }

/* ——— project wall, table rows underneath ——— */

.list { list-style: none; }

.proj {
  padding-bottom: clamp(12px, 2vh, 18px);
  margin-bottom: clamp(14px, 2.6vh, 26px);
  border-bottom: 1px solid var(--hairline);
}

.meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px 52px;
  gap: 0 28px;
  align-items: baseline;
  font-size: 12px;
  color: var(--faint);
  margin-top: 8px;
}

.m-who { color: var(--ink); }

.m-year {
  text-align: right;
  color: var(--ink);
}

.num {
  display: inline-block;
  min-width: 34px;
  color: var(--pencil);
}

/* ——— boxed categories: hand-drawn rectangles ———
   generous inner padding so the drawn line never touches the type */

.group {
  position: relative;
  --boxpad: clamp(26px, 3.6vw, 44px);
  margin-bottom: clamp(26px, 4.6vh, 48px);
}

.group--box .list {
  padding: var(--boxpad) var(--boxpad) clamp(18px, 2.6vw, 30px);
}

/* project logos: small, sitting across the drawn border,
   alternating right/left, at each project's level */
.group--box .proj { position: relative; }

.plogo {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--boxpad) - 21px);
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--paper);
  padding: 4px;
  transform: translateY(-50%) rotate(-4deg);
}

.group--box .proj:nth-child(even) .plogo {
  right: auto;
  left: calc(-1 * var(--boxpad) - 21px);
  transform: translateY(-50%) rotate(3deg);
}

.group--box .proj:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 6px;
}

.box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.box path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* category name sits on the drawn border, interrupting it */
.box-label {
  position: absolute;
  top: -9px;
  left: 24px;
  z-index: 1;
  background: var(--paper);
  padding: 0 9px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transform: rotate(-1.5deg);
}

/* ——— cv ——— */

.cv-block { margin-bottom: clamp(28px, 5vh, 44px); max-width: 68ch; }

.cv-lede {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 60ch;
}

.cv-about {
  margin-top: 12px;
  color: var(--faint);
  max-width: 56ch;
}

.cv-list a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--pencil);
}

.cv-list a:hover { color: var(--blue); }

.cv-head {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}

.cv-list div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
}

.cv-list dt { color: var(--ink); }
.cv-list dd { color: var(--faint); }
.todo { font-style: italic; color: var(--pencil); }

/* ——— faces ——— */

.frames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(16px, 3vw, 28px);
}

.frame {
  border: 1.4px solid var(--ink);
  border-radius: 2px;
  padding: 10px 10px 8px;
}

.frame .scribble {
  display: block;
  aspect-ratio: 4 / 5;
  margin-bottom: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='100' viewBox='0 0 80 100'%3E%3Cpath d='M12 88 C 30 55, 45 30, 68 12 M14 60 C 28 44, 40 30, 60 14 M20 90 C 40 68, 58 48, 70 34' fill='none' stroke='%23c9c9c1' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / cover,
    #fafaf7;
}

.frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 8px;
  filter: grayscale(1) contrast(1.05);
}

.frame figcaption {
  font-family: var(--wall);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ——— footer ——— */

.foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(56px, 10vh, 110px);
  border-top: 1px solid var(--ink);
  padding-top: 12px;
  font-size: 11px;
  color: var(--faint);
}

/* ——— responsive ——— */

@media (max-width: 720px) {
  body { font-size: 13px; }

  .topbar {
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
  }

  /* comfortable thumb targets */
  .tabs { gap: 26px; }
  .tab { padding: 8px 2px; font-size: 13px; }

  .masthead { margin-bottom: 34px; }

  .cols { display: none; }

  .proj {
    padding-bottom: 12px;
    margin-bottom: 14px;
  }

  /* description on its own line; partner + year share the second row */
  .meta {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 14px;
    margin-top: 6px;
  }

  .m-desc { grid-column: 1 / -1; }

  .m-who:empty, .m-year:empty { display: none; }

  .m-who { grid-column: 1; }

  .m-year {
    grid-column: 2;
    text-align: right;
  }

  .m-year::before {
    content: "since ";
    color: var(--pencil);
  }

  .num { min-width: 26px; }

  /* boxes: tighter but still clear of the drawn line */
  .group {
    --boxpad: 18px;
    margin-bottom: 26px;
  }

  .group--box .list { padding: 22px var(--boxpad) 14px; }

  .plogo {
    width: 32px;
    height: 32px;
    padding: 3px;
    right: calc(-1 * var(--boxpad) - 15px);
  }

  .group--box .proj:nth-child(even) .plogo {
    left: calc(-1 * var(--boxpad) - 15px);
  }

  .box-label { left: 14px; }

  .panel-title--section { margin-top: 44px; }

  /* cv: single column rows, roomy separators */
  .cv-list div {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 9px 0;
  }

  .cv-block { margin-bottom: 30px; }

  /* faces: firm two-column grid */
  .frames { grid-template-columns: 1fr 1fr; gap: 14px; }

  .foot {
    flex-direction: column;
    gap: 4px;
    margin-top: 56px;
  }
}

@media (max-width: 400px) {
  .meta { font-size: 11.5px; }
  .group--box .list { padding: 20px 14px 12px; }
  .box-label { font-size: 10px; left: 12px; }
  .tabs { gap: 20px; }
}