/* =========================================================
   Tingo Portfolio — Design System tokens + components
   Source: wallet_interops.html + css/style.css + w3.css v4.
   Values are the RENDERED result, not the declared intent:
   the page declares "Tisa Pro" / "ff-tisa-web-pro" / "Goldman"
   but never loads them, so every text role falls back to the
   system sans (Helvetica Neue on macOS). Only Baskerville (.amp)
   and Verdana (tags) are real system fonts that render.
   Light theme only.
   ========================================================= */

:root {
  /* ---------- Color ---------- */
  --ink:          #000000;   /* headings, title, ROLE, BACK, icons (h1–h6 #000) */
  --ink-bio:      rgba(1,1,1,.9); /* sign-off name + statement */
  --ink-body:     #828282;   /* body, lists, eyebrow, captions, role items (body / .fh5co-heading p) */
  --ink-subtle:   #9e9e9e;   /* scroll cue */
  --paper:        #ffffff;
  --paper-soft:   #f9f9ff;
  --line:         #e6e6e6;

  --accent:       #c1ff14;   /* lime — selection, hover overlay, hero underline */
  --accent-ink:   #000000;
  --taupe:        #cabcab;   /* link hover / quiet brand */

  --tag-primary-bg:  #2196f3; /* w3-blue */
  --tag-primary-ink: #ffffff;
  --tag-bg:          #ddffff; /* w3-pale-blue */
  --tag-ink:         #000000;

  /* ---------- Type families (as rendered) ---------- */
  /* Generic sans-serif resolves to Helvetica (not Helvetica Neue) on macOS.
     Helvetica has no thin face, so authored weight 100 renders as 400 — keep it that way. */
  --font-sans: Helvetica, Arial, sans-serif;  /* every text role */
  --font-tag:  Verdana, Geneva, sans-serif;                     /* w3.css body font → tags */
  --font-amp:  Baskerville, "Goudy Old Style", Garamond, Palatino, serif; /* italic & and / */

  /* ---------- Type scale (px from the page's inline styles) ---------- */
  --fs-hero:     clamp(44px, 7vw, 80px);  /* bio statement, lh 80px */
  --fs-name:     clamp(40px, 6vw, 69px);  /* "Yuting O." */
  --fs-section:  clamp(32px, 5vw, 47px);  /* DISCOVERY / SOLUTION */
  --fs-title:    26px;                    /* case title */
  --fs-platform: 24px;                    /* RESPONSIVE WEB */
  --fs-tag:      18px;                    /* w3-large */
  --fs-sub:      16px;                    /* THE PROBLEM SPACE */
  --fs-body:     16px;
  --fs-role-h:   16px;                    /* ROLE */
  --fs-nav:      14px;                    /* BACK */
  --fs-role-li:  14px;
  --fs-caption:  12px;
  --fs-eyebrow:  12px;

  /* Rendered weights: Helvetica only has regular + bold.
     Authored 100/300 → 400, authored 800/900 → 700. */
  --fw-thin:  400;
  --fw-light: 400;
  --fw-bold:  700;
  --fw-black: 700;

  --lh-body: 35px;

  /* Tracking in px, as authored */
  --track-title:     2px;   /* .fh5co-heading span */
  --track-nav:       2px;   /* nav links, ROLE */
  --track-eyebrow:   5px;
  --track-section:   10px;  /* DISCOVERY uses 15px — normalized to 10 */
  --track-sub:       6px;   /* sub-heads + platform */
  --track-caption:   1px;
  --track-bio:       2px;

  /* ---------- Space (8pt) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 112px; /* 7em section gap */

  /* ---------- Shape & motion ---------- */
  --radius-media: 8px;
  --radius-tag:   10px;
  --radius-hover: 20px;
  --measure:      555px;          /* Bootstrap col-md-6 in a 1170 container (585 − 30 gutter) */
  --container:    1170px;         /* Bootstrap 3 container */
  --ease:         cubic-bezier(.2,.7,.2,1);
  --dur-fast:     .3s;
  --dur-slow:     .5s;
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font: var(--fw-thin) var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; transition: color var(--dur-slow); }
a:hover { color: var(--taupe); }
img { max-width: 100%; display: block; }

/* =========================================================
   Layout
   ========================================================= */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-3); }
.column    { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.section   { padding-bottom: var(--s-8); }
.grid      { display: grid; gap: var(--s-4); }
.grid-2    { grid-template-columns: repeat(2, 1fr); }
.grid-3    { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* =========================================================
   Typography roles
   ========================================================= */
.t-title    { font: var(--fw-thin) var(--fs-title)/1.3 var(--font-sans); letter-spacing: var(--track-title); text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s-2); }
.t-eyebrow  { font: var(--fw-thin) var(--fs-eyebrow)/1.5 var(--font-sans); letter-spacing: var(--track-eyebrow); color: var(--ink-body); margin: 0 0 var(--s-4); }
.t-section  { font: var(--fw-bold) var(--fs-section)/1.1 var(--font-sans); letter-spacing: var(--track-section); text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s-5); }
.t-sub      { font: var(--fw-bold) var(--fs-sub)/1.4 var(--font-sans); letter-spacing: var(--track-sub); text-transform: uppercase; color: var(--ink); margin: var(--s-5) 0 var(--s-2); }
.t-platform { font: var(--fw-light) var(--fs-platform)/1.3 var(--font-sans); letter-spacing: var(--track-sub); text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); }
.t-body     { margin: 0 0 var(--s-3); }
.t-caption  { font: var(--fw-thin) var(--fs-caption)/1.5 var(--font-sans); letter-spacing: var(--track-caption); color: var(--ink-body); margin: var(--s-2) 0 0; }
.t-caption.center { text-align: center; }

/* Emphasis = plain underline, same gray as the text */
.em      { text-decoration: underline; text-underline-offset: .15em; }
.em-lime { text-decoration: underline .15em var(--accent); text-underline-offset: .2em; }
.amp     { font-family: var(--font-amp); font-style: italic; }

/* Lists — verb-led, underlined verb */
.list    { padding-left: 1.2em; margin: 0 0 var(--s-3); }
.list li { padding-bottom: 7px; }
.list b  { font-weight: 700; }

/* =========================================================
   Components
   ========================================================= */

/* Nav — pixel-cube logo · BACK · Dribbble + Telegram */
.nav        { position: sticky; top: 0; z-index: 10; background: var(--paper); padding: var(--s-4) 0; }
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.nav-logo img { width: 60px; height: auto; padding-top: .5em; }
.nav-social .fa-dribbble { font-size: 33px; }
.nav-social .fa-telegram { font-size: 30px; }
.nav-back   { font: var(--fw-black) var(--fs-nav)/1 var(--font-sans); letter-spacing: var(--track-nav); text-transform: uppercase; color: var(--ink); text-decoration: none; display: inline-flex; gap: 2px; align-items: center; }
.nav-social { display: flex; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.nav-social a { display: grid; place-items: center; color: var(--ink); text-decoration: none; }

/* Tags — w3-tag w3-large, rendered in Verdana */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s-6); }
.tag  { font: 400 var(--fs-tag)/1.5 var(--font-tag); padding: 2px 10px; border-radius: var(--radius-tag); background: var(--tag-bg); color: var(--tag-ink); }
.tag.primary { background: var(--tag-primary-bg); color: var(--tag-primary-ink); }

/* Role block */
.role    { margin: 2.5em 0; }
.role h4 { font: var(--fw-thin) var(--fs-role-h)/1.4 var(--font-sans); letter-spacing: var(--track-nav); text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s-4); }
.role ul { margin: 0; padding: 0; list-style: none; }
.role li { font: var(--fw-thin) var(--fs-role-li)/1.5 var(--font-sans); color: var(--ink-body); margin: 0 0 5px; }

/* Media / work tile */
.work { position: relative; margin: 0; }
a.work { display: block; color: inherit; text-decoration: none; }
.work-media {
  aspect-ratio: 4 / 3; border-radius: var(--radius-media);
  background: var(--paper-soft) center / cover no-repeat;
  overflow: hidden; position: relative;
}
.work-media.tall { aspect-ratio: 1 / 1; }
.work-media.wide { aspect-ratio: 16 / 9; }
.work-overlay {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: var(--s-5);
  background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-hover);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.work-overlay h3 { font: 700 14px/24px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; margin: 0 0 var(--s-1); color: var(--ink); }
.work-overlay span { font: 400 11px/1.4 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; }
a.work:hover .work-overlay, a.work:focus-visible .work-overlay { opacity: 1; }

/* Metric list */
.metrics { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: var(--s-2); }
.metrics li { display: grid; grid-template-columns: 180px 1fr; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-2); }
.metrics .v { color: var(--ink); font-weight: var(--fw-light); }
@media (max-width: 560px) { .metrics li { grid-template-columns: 1fr; gap: 0; } }

/* Bio sign-off — upright thin sans (the "Thin Italic" face never loads) */
.bio-name { font: var(--fw-thin) var(--fs-name)/1.2 var(--font-sans); letter-spacing: var(--track-bio); color: var(--ink-bio); margin: 0; }
.bio-name b { font-weight: 700; }
.bio-hero { font: var(--fw-thin) var(--fs-hero)/1 var(--font-sans); letter-spacing: var(--track-bio); color: var(--ink-bio); margin: var(--s-3) 0 var(--s-5); }
.bio-hero .display { font-family: var(--font-sans); }

/* Scroll cue */
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-2); color: var(--ink-subtle); font: var(--fw-thin) 15px/1 var(--font-sans); text-decoration: none; }
.scroll-cue i { width: 30px; height: 50px; border: 1px solid var(--line); border-radius: 50px; position: relative; }
.scroll-cue i::before { content: ""; position: absolute; top: 10px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ink); animation: cue 2s infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; } 80% { transform: translateY(20px); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue i::before { animation: none; } }

/* Button (from the commented-out "Visit Website": #333 fill, thin text) */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 20px; border-radius: 2px;
  font: var(--fw-thin) 16px/1.5 var(--font-sans); text-decoration: none; background: #333; color: #fff; border: 2px solid #333; transition: background var(--dur-slow); }
.btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.outline { background: transparent; color: var(--ink); border-color: var(--ink); }