/* Tippa Archive case study: recreations of the product's interface.
   The real archive is private (friends' photos and names), so every screen here is drawn in HTML/CSS with
   placeholder tiles and redacted names. Colours and type are the product's own: charcoal, cream, gold and
   burgundy, with Oswald and IBM Plex. Everything inside .tp is sized in em from one container-based font
   size, so each mock scales as a single piece. */
.tp { container-type: inline-size; background: #141414; color: #f5f0e8; font-family: 'IBM Plex Sans', sans-serif; line-height: 1.4; text-align: left; }
.tp-in { font-size: clamp(6px, 1.32cqw, 15px); padding: 2em 2.2em 0; background-image: linear-gradient(#c9a84c0a 1px, transparent 1px), linear-gradient(90deg, #c9a84c0a 1px, transparent 1px); background-size: 3em 3em; }
.tp-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: .72em; letter-spacing: .3em; text-transform: uppercase; color: #c9a84c; }
.tp-title { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 2.3em; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.tp-mono { font-family: 'IBM Plex Mono', monospace; font-size: .78em; color: #8a867f; letter-spacing: .08em; text-transform: uppercase; }
.tp-stamp { display: inline-block; padding: .35em .9em; border: .2em solid #b52240; color: #b52240; font-family: 'Oswald', sans-serif; font-size: 1.15em; letter-spacing: .22em; text-transform: uppercase; rotate: -5deg; }
.tp-redact { display: inline-block; height: .95em; border-radius: .12em; background: #f5f0e8; vertical-align: -.12em; }

/* ---------- Archive (desktop) ---------- */
.tp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2em; }
.tp-tabs { display: flex; gap: 2em; margin-top: 1.6em; border-bottom: 1px solid #2a2a2a; font-family: 'Oswald', sans-serif; font-size: 1em; letter-spacing: .14em; text-transform: uppercase; color: #8a867f; }
.tp-tabs span { padding-bottom: .8em; }
.tp-tabs .on { color: #c9a84c; box-shadow: inset 0 -.16em 0 #c9a84c; }
.tp-body { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 1.8em; margin-top: 1.5em; }
.tp-timeline { font-family: 'IBM Plex Mono', monospace; font-size: .8em; }
.tp-timeline b { display: block; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 1.5em; letter-spacing: .08em; color: #f5f0e8; margin: .9em 0 .5em; }
.tp-timeline b:first-of-type { margin-top: .4em; }
.tp-timeline span { display: flex; justify-content: space-between; padding: .45em .7em; border-left: 1px solid #2a2a2a; color: #8a867f; }
.tp-timeline .on { border-left-color: #c9a84c; color: #c9a84c; background: #c9a84c12; }
.tp-filter { display: flex; align-items: center; gap: .8em; padding: .9em 1.1em; border: 1px solid #2a2a2a; background: #1e1e1e; }
.tp-filter > div:first-child { margin-right: auto; }
.tp-filter h4 { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 1.1em; letter-spacing: .08em; text-transform: uppercase; }
.tp-chip { padding: .5em .9em; border: 1px solid #2a2a2a; font-size: .78em; color: #c9c4bc; white-space: nowrap; }
.tp-chip.on { border-color: #c9a84c; color: #c9a84c; }
.tp-count { margin: 1.1em 0 .8em; }
.tp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; }
.tp-tile { position: relative; aspect-ratio: 1; border: 1px solid #2a2a2a; overflow: hidden; background: #2a2a2a; }
.tp-tile::before { content: ''; position: absolute; inset: 0; background: var(--t, linear-gradient(160deg, #6a5a44, #2f2a24)); }
.tp-tile::after { content: attr(data-date); position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6em .7em .5em; background: linear-gradient(#0000, #000c); font-family: 'IBM Plex Mono', monospace; font-size: .62em; letter-spacing: .06em; color: #c9c4bc; }
.tp-tile.video i { position: absolute; top: .6em; right: .6em; z-index: 1; padding: .2em .5em; background: #141414cc; color: #c9a84c; font: normal 500 .58em 'IBM Plex Mono', monospace; letter-spacing: .1em; }
/* Placeholder "photos": abstract warm scenes, never real media. */
.tp-tile:nth-child(8n+1) { --t: radial-gradient(circle at 70% 30%, #e0b46a 0 12%, #0000 13%), linear-gradient(170deg, #b0703f 0 55%, #3b2a22 56%); }
.tp-tile:nth-child(8n+2) { --t: linear-gradient(200deg, #5d7a86, #26343a 70%); }
.tp-tile:nth-child(8n+3) { --t: radial-gradient(ellipse at 50% 120%, #3f5a3c 0 55%, #0000 56%), linear-gradient(#c7a878, #7d6a52); }
.tp-tile:nth-child(8n+4) { --t: linear-gradient(135deg, #8b1a2f, #2a1418 75%); }
.tp-tile:nth-child(8n+5) { --t: radial-gradient(circle at 30% 40%, #d9cdb6 0 18%, #0000 19%), linear-gradient(190deg, #54483a, #1f1b17); }
.tp-tile:nth-child(8n+6) { --t: linear-gradient(160deg, #c9a84c, #6b5524 60%, #2c2416); }
.tp-tile:nth-child(8n+7) { --t: radial-gradient(ellipse at 50% 110%, #2d3f52 0 50%, #0000 51%), linear-gradient(#8fa3b3, #4a5a68); }
.tp-tile:nth-child(8n+8) { --t: linear-gradient(210deg, #6e4a5a, #251c22 70%); }

/* ---------- Field Report (photo viewer) ---------- */
.tp-report { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); padding: 0; }
.tp-report .tp-in { padding: 2.2em; }
.tp-photo { position: relative; min-height: 26em; background: radial-gradient(circle at 72% 28%, #e8c078 0 9%, #0000 10%), linear-gradient(172deg, #b87a45 0 58%, #33261f 59%); }
.tp-photo span { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2.6em; height: 2.6em; border: 1px solid #f5f0e866; background: #14141499; color: #f5f0e8; font-size: clamp(6px, 1.32cqw, 15px); }
.tp-photo span:first-child { left: 1.2em; }
.tp-photo span:last-child { right: 1.2em; }
.tp-fields { display: grid; gap: 1.15em; margin-top: 1.8em; }
.tp-fields div { display: grid; gap: .3em; padding-bottom: 1.05em; border-bottom: 1px solid #2a2a2a; }
.tp-fields dt { font-family: 'IBM Plex Mono', monospace; font-size: .68em; letter-spacing: .22em; text-transform: uppercase; color: #9a7d35; }
.tp-fields dd { font-size: 1.05em; color: #f5f0e8; }

/* ---------- People: Hall of Fame ---------- */
.tp-fame { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin-top: 1.6em; }
.tp-fame div { padding: 1.4em 1.3em 1.5em; border: 1px solid #2a2a2a; background: #1e1e1e; }
.tp-fame div:first-child { border-color: #c9a84c; }
.tp-rank { font-family: 'Oswald', sans-serif; font-size: 2.6em; line-height: 1; color: #c9a84c; }
.tp-fame strong { display: block; margin: .7em 0 .25em; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 1.25em; letter-spacing: .06em; text-transform: uppercase; }
.tp-roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; margin: 1.4em 0 2.2em; }
.tp-roster span { display: flex; align-items: center; gap: .7em; padding: .8em .9em; border: 1px solid #2a2a2a; font-size: .82em; color: #c9c4bc; }
.tp-roster i { flex: 0 0 auto; width: 2em; height: 2em; border-radius: 50%; background: #2a2a2a; border: 1px solid #c9a84c55; }

/* ---------- Phones ---------- */
.tp-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: clamp(18px, 5vw, 56px); padding: clamp(22px, 5vw, 48px) clamp(14px, 3vw, 32px); border-radius: 22px; background: var(--accent); }
.tp-phone { border: 6px solid #25262b; border-radius: 30px; overflow: hidden; background: #141414; box-shadow: 10px 22px 35px #24202c22; }
.tp-phone .tp { aspect-ratio: 300 / 600; position: relative; overflow: hidden; }
.tp-phone .tp-in { font-size: clamp(7px, 3.9cqw, 12.5px); padding: 2.2em 1.5em 0; min-height: 100%; }
.tp-pills { display: flex; gap: .6em; margin-top: 1.4em; font-family: 'IBM Plex Mono', monospace; font-size: .78em; white-space: nowrap; overflow: hidden; }
.tp-pills span { padding: .5em .9em; border: 1px solid #2a2a2a; color: #8a867f; }
.tp-pills .on { border-color: #c9a84c; color: #c9a84c; }
.tp-phone .tp-grid { grid-template-columns: repeat(2, 1fr); margin-top: 1.2em; }
.tp-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6em 1.5em 2em; border-top: 1px solid #c9a84c; border-radius: 1.4em 1.4em 0 0; background: #1e1e1e; font-size: clamp(7px, 3.9cqw, 12.5px); box-shadow: 0 -2em 3em #000a; }
.tp-sheet::before { content: ''; display: block; width: 3.4em; height: .3em; margin: 0 auto 1.3em; border-radius: 1em; background: #2a2a2a; }
.tp-sheet h4 { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 1.3em; letter-spacing: .08em; text-transform: uppercase; margin: .2em 0 1em; }
.tp-sheet label { display: block; margin-top: .9em; font-family: 'IBM Plex Mono', monospace; font-size: .68em; letter-spacing: .22em; text-transform: uppercase; color: #9a7d35; }
.tp-sheet label span { display: flex; justify-content: space-between; margin-top: .5em; padding: .8em .9em; border: 1px solid #2a2a2a; font: 400 1.45em 'IBM Plex Sans', sans-serif; letter-spacing: 0; text-transform: none; color: #c9c4bc; }
.tp-sheet button { width: 100%; margin-top: 1.4em; padding: .9em; background: #c9a84c; color: #141414; font: 500 1.05em 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.tp-dim { position: absolute; inset: 0; background: #000a; }

/* ---------- WhatsApp "Manage storage" row (recreated; system font, iOS dark list style) ---------- */
.wa-storage { margin: 36px 0 0; }
.wa-screen { padding: 22px clamp(14px, 3vw, 28px) 30px; border-radius: 22px; background: #000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; color: #fff; }
.wa-head { display: flex; align-items: center; gap: 12px; padding: 0 6px 18px; font-size: 17px; }
.wa-head span { font-size: 26px; line-height: 1; color: #0a84ff; }
.wa-head b { font-weight: 600; }
.wa-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 22px; background: #1c1c1e; }
.wa-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 36%, #d8c7a8 0 22%, #0000 23%), radial-gradient(ellipse at 50% 108%, #d8c7a8 0 46%, #0000 47%), #7c6a52; }
.wa-name { flex: 1 1 auto; min-width: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-size { flex: 0 0 auto; font-size: 18px; color: #98989f; font-variant-numeric: tabular-nums; }
.wa-chev { flex: 0 0 auto; font-size: 24px; line-height: 1; color: #5a5a5f; }
.wa-storage figcaption { margin-top: 14px; font-family: var(--display); font-style: italic; font-size: 14px; color: #6e7479; }
@media (max-width: 760px) {
  .wa-row { gap: 10px; padding: 12px 14px; border-radius: 18px; }
  .wa-avatar { width: 38px; height: 38px; }
  .wa-name, .wa-size { font-size: 15px; }
}

/* ---------- The crew: painted group portrait with a handwritten "Happy Me" pointing at Ujjwal (top left) ---------- */
.tippa-crew { margin: 44px 0 0; }
.tippa-crew-frame { position: relative; padding-top: 38px; }
.tippa-crew img { display: block; width: 100%; height: auto; border-radius: 22px; }
/* The arrow's tip sits at the svg's bottom-left corner; left is his head's position across the painting. */
.tippa-me { position: absolute; z-index: 1; left: calc(18.5% - 6px); top: 2px; margin: 0; display: flex; align-items: flex-start; gap: 6px; font-family: var(--display); font-style: italic; font-size: 21px; line-height: 1.2; color: var(--ink); white-space: nowrap; rotate: -2deg; transform-origin: 0 100%; }
.tippa-me span { display: inline-flex; align-items: center; gap: 7px; margin-top: -3px; }
.tippa-me-arrow { flex: 0 0 auto; width: 58px; height: 56px; fill: none; stroke: #8b1a2f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tippa-me-heart { width: 18px; height: 18px; fill: #e0364a; }
.tippa-crew figcaption { margin-top: 14px; font-family: var(--display); font-style: italic; font-size: 14px; color: #6e7479; }
@media (max-width: 760px) {
  .tippa-crew-frame { padding-top: 34px; }
  .tippa-crew img { border-radius: 16px; }
  .tippa-me { font-size: 17px; left: calc(18.5% - 4px); }
  .tippa-me-arrow { width: 46px; height: 44px; }
  .tippa-me-heart { width: 15px; height: 15px; }
}

/* ---------- Design language: swatches and type ---------- */
.tp-tokens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tp-tokens div { padding: 64px 16px 14px; border-radius: 16px; border: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.tp-tokens b { display: block; font-weight: 600; }
.tp-type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.tp-type div { padding: 20px 20px 22px; border-radius: 16px; background: #141414; color: #f5f0e8; }
.tp-type span { display: block; margin-bottom: 14px; font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: #c9a84c; }
.tp-type p { margin: 0; }

/* ---------- Page-level tweaks to shared components ---------- */
.case-table-wrap + .case-block { margin-top: 56px; }
.case-section > .case-steps { margin-top: 32px; }
.case-list + .case-block { margin-top: 56px; }
.gallery + .case-list { margin-top: 32px; }
.tp-phones + .case-list { margin-top: 32px; }
.tp-report .tp-in, .tp-people .tp-in { font-size: clamp(7px, 1.55cqw, 16px); }
.tp-photo span { font-size: clamp(7px, 1.55cqw, 16px); }
.case-cover .device .tp-in { padding-bottom: 0; }
.compare .after::before { content: 'With the archive'; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
.case-stats .case-stat { display: block; margin-top: 0; padding: 26px 26px 24px; }
.case-stats .case-stat strong { display: block; font-size: clamp(40px, 4.4vw, 60px); margin-bottom: 12px; }
.case-stats .case-stat p { font-size: 15px; }
.case-stats .case-stat:nth-child(2) { background: var(--ice); }
.case-stats .case-stat:nth-child(2) p { color: #253c76; }
.case-stats .case-stat:nth-child(3) { background: #f1ece0; }
.case-stats .case-stat:nth-child(3) p { color: #5a4a22; }
.case-note { margin-top: 14px; font-size: 13px; color: var(--muted); }

@media (max-width: 760px) {
  .tp-report { grid-template-columns: 1fr; }
  .tp-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .tp-report .tp-in { font-size: clamp(9px, 3.2cqw, 14px); }
  .tp-photo span { font-size: clamp(9px, 3.2cqw, 14px); }
  .tp-fame, .tp-roster { grid-template-columns: repeat(2, 1fr); }
  .tp-fame div:last-child { display: none; }
  .tp-people .tp-in { font-size: clamp(8px, 2.6cqw, 14px); }
  .tp-tokens, .tp-type { grid-template-columns: repeat(2, 1fr); }
  .tp-type div:last-child { grid-column: 1 / -1; }
  .case-stats { grid-template-columns: 1fr; }
  .tp-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 12px; }
  .tp-phone { border-width: 4px; border-radius: 20px; }
}