/* ============================================================
   Brittany Innes — Portfolio
   Tokens (shadcn-neutral base + tweakable accent) · type · components · sections
   ============================================================ */

:root {
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ── TYPOGRAPHY SYSTEM ──────────────────────────────────────
     Two families, strict roles (overridden live by the Tweaks panel):
       --font-display  Instrument Serif → ALL headers/headlines only
       --font-ui       DM Sans          → body, UI, buttons, labels
       --font-mono     DM Sans          → eyebrows, meta & numeric labels
     Headers = serif. Everything else = DM Sans. Keep it consistent. */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Sans', system-ui, sans-serif;

  /* type scale (fluid) */
  --t-hero: clamp(44px, 6.6vw, 84px);   /* h1 display */
  --t-h2: clamp(34px, 5vw, 56px);       /* section titles */
  --t-h3: clamp(21px, 2.2vw, 27px);     /* item / case titles */
  --t-lead: clamp(24px, 3vw, 34px);     /* lead statements */
  --t-body: 17px;                       /* base body */
  --t-small: 14.5px;                    /* secondary text */
  --t-label: 12px;                      /* eyebrows / meta labels */

  /* accent — overridden live by the Tweaks panel (default: cobalt) */
  --accent-fill: oklch(0.55 0.17 264);           /* filled surfaces (solid or gradient) */
  --accent-solid: oklch(0.55 0.17 264);          /* always a flat color (underlines, rings) */
  --accent-fg: oklch(0.99 0 0);
  --accent-text-light: oklch(0.5 0.17 264);
  --accent-text-dark: oklch(0.75 0.14 264);
}

[data-theme="light"] {
  --background: oklch(0.992 0.003 95);
  --surface: oklch(0.977 0.004 95);
  --band: oklch(0.963 0.008 84);
  --foreground: oklch(0.22 0.012 65);
  --muted: oklch(0.962 0.005 95);
  --muted-foreground: oklch(0.53 0.013 70);
  --faint: oklch(0.7 0.01 80);
  --border: oklch(0.9 0.006 95);
  --border-strong: oklch(0.82 0.008 95);
  --card: oklch(1 0 0);
  --accent-text: var(--accent-text-light);
  color-scheme: light;
}

[data-theme="dark"] {
  --background: oklch(0.165 0.006 285);
  --surface: oklch(0.195 0.006 285);
  --band: oklch(0.207 0.008 285);
  --foreground: oklch(0.965 0.003 90);
  --muted: oklch(0.235 0.006 285);
  --muted-foreground: oklch(0.66 0.009 285);
  --faint: oklch(0.5 0.008 285);
  --border: oklch(0.275 0.006 285);
  --border-strong: oklch(0.34 0.007 285);
  --card: oklch(0.205 0.007 285);
  --accent-text: var(--accent-text-dark);
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .4s ease, color .4s ease;
}
::selection { background: color-mix(in oklch, var(--accent-solid) 28%, transparent); }

h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- TYPOGRAPHY — role classes (see token block above) ----------
   .display = serif headers · body/labels = DM Sans. One system, used everywhere. */
.display { font-family: var(--font-display); font-weight: 400; line-height: 0.98; letter-spacing: -0.012em; }
.ital { font-style: italic; }
.mono {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.04em;
  font-weight: 400;
}
.eyebrow {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.muted { color: var(--muted-foreground); }
.accent-text { color: var(--accent-text); }

/* cobalt blue gradient text fill — used on "change culture" in the hero headline */
.grad-text {
  background-image: linear-gradient(105deg, oklch(0.52 0.18 266) 0%, oklch(0.64 0.155 246) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* keep the italic descenders from clipping */
  padding-right: 0.04em;
}
[data-theme="dark"] .grad-text {
  background-image: linear-gradient(105deg, oklch(0.62 0.17 266) 0%, oklch(0.74 0.14 244) 100%);
}

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
section { scroll-margin-top: 90px; }
.section-pad { padding-block: clamp(72px, 11vw, 150px); }
.section-band { background: var(--band); border-block: 1px solid var(--border); }
.divider { border: none; border-top: 1px solid var(--border); margin: 0; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { font-family: var(--font-display); font-size: var(--t-h2); line-height: 1.0; letter-spacing: -0.015em; max-width: 16ch; }
.section-num { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.16em; color: var(--accent-text); text-transform: uppercase; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 500;
  padding: 11px 20px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; line-height: 1; transition: transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  background: none;
}
.btn:hover { transform: translateY(-1px); }
.btn.sm { padding: 8px 14px; font-size: 13.5px; }
.btn-primary { background: var(--accent-fill); color: var(--accent-fg); }
.btn-primary:hover { opacity: 0.92; }
.btn-outline { background: transparent; color: var(--foreground); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--foreground); }
.btn-ghost { background: transparent; color: var(--muted-foreground); }
.btn-ghost:hover { color: var(--foreground); }

/* ---------- badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; font-family: var(--font-ui);
  font-size: 13px; font-weight: 500; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--foreground); white-space: nowrap;
}
.badge-accent { background: var(--accent-fill); color: var(--accent-fg); border-color: transparent; }
.badge-soft { background: var(--muted); color: var(--muted-foreground); border-color: transparent; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- card ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* ---------- accent dot ---------- */
.accent-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--accent-fill); flex: none; }

/* ---------- monogram ---------- */
.monogram {
  display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 9px;
  font-family: var(--font-mono); font-weight: 500; width: 34px; height: 34px; font-size: 13px;
  flex: none;
}

/* ---------- logomark (serif BI + accent period, theme-aware) ---------- */
.logo { display: inline-flex; flex: none; }
.logo svg { width: 34px; height: 34px; display: block; border-radius: 10px; transition: transform .25s ease; }
.brand:hover .logo svg { transform: rotate(-4deg) scale(1.04); }
.logo-tile { fill: var(--foreground); }
.logo-letters { fill: var(--background); font-family: var(--font-display); font-size: 18px; letter-spacing: -0.5px; text-anchor: middle; }
.logo-dot { fill: var(--accent-solid); }

/* ---------- placeholder imagery ---------- */
.placeholder {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(135deg, color-mix(in oklch, var(--muted-foreground) 12%, transparent) 0 1px, transparent 1px 13px),
    var(--surface);
  display: grid; place-items: center; overflow: hidden;
}
.placeholder .ph-cap {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em;
  color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 999px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.4) blur(14px);
  background: color-mix(in oklch, var(--background) 78%, transparent);
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-name { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: 14px; color: var(--muted-foreground); padding: 7px 12px; border-radius: 8px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--foreground); background: var(--muted); }
.nav-links a.active { color: var(--foreground); }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px; margin-left: 6px;
  border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; background: transparent;
  color: var(--muted-foreground);
}
.theme-toggle:hover { color: var(--foreground); border-color: var(--foreground); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .ico-sun { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(56px, 9vw, 104px); padding-bottom: clamp(40px, 6vw, 72px); }
.hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.hero-lead { display: flex; flex-direction: column; align-items: flex-start; }
.hero-lead .eyebrow { display: block; margin-bottom: 22px; }
.hero h1 { font-family: var(--font-display); font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.018em; margin-bottom: 0.44em; }
.hero h1 .ital { color: var(--foreground); }
.hero-copy { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; max-width: 52ch; color: var(--muted-foreground); margin-bottom: 18px; }
.hero-copy strong { color: var(--foreground); font-weight: 500; }
.hero-now { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--foreground); margin-bottom: 30px; }
.hero-now strong { font-weight: 500; }
.hero-now .now-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-fill); flex: none; box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent-solid) 18%, transparent); }
.ltk-logo {
  display: inline-block; width: 2.55em; height: 0.92em; vertical-align: -0.06em; margin-left: 0.12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%22401%22%20height%3D%22152%22%20viewBox%3D%220%200%20401%20152%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M244.901%2047.4375C244.16%2047.4375%20243.198%2046.2116%20243.198%2045.294V32.106C243.198%2031.1884%20244.172%2029.9588%20244.901%2029.9588H316.979C317.72%2029.9588%20318.683%2031.1884%20318.683%2032.106V45.294C318.683%2046.2116%20317.709%2047.4375%20316.979%2047.4375H290.194V120.116C290.194%20121.034%20289.453%20121.974%20288.731%20121.974H273.635C272.894%20121.974%20272.175%20121.053%20272.175%20120.116V47.4375H244.901Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M351.875%2066.1236H353.145L378.701%2031.1439C378.979%2030.6903%20379.375%2030.3217%20379.847%2030.0781C380.32%2029.8344%20380.849%2029.7251%20381.379%2029.7619H398.912C399.058%2029.7465%20399.205%2029.7632%20399.344%2029.8108C399.483%2029.8585%20399.61%2029.936%20399.715%2030.0379C399.821%2030.1398%20399.904%2030.2636%20399.957%2030.4007C400.01%2030.5379%20400.033%2030.685%20400.023%2030.8318C400.023%2031.4448%20399.901%2031.7531%20399.416%2032.3661L367.779%2075.9793L399.405%20119.158C399.893%20119.771%20400.016%20120.076%20400.016%20120.692C400.025%20120.839%20400.002%20120.986%20399.949%20121.123C399.896%20121.26%20399.814%20121.384%20399.708%20121.486C399.602%20121.588%20399.475%20121.666%20399.337%20121.713C399.198%20121.761%20399.05%20121.778%20398.905%20121.762H381.371C380.842%20121.8%20380.312%20121.691%20379.84%20121.448C379.368%20121.205%20378.972%20120.837%20378.693%20120.384L353.138%2085.4264H351.886V119.808C351.886%20120.729%20351.145%20121.955%20350.423%20121.955H335.316C334.575%20121.955%20333.856%20121.034%20333.856%20120.098V31.8014C333.856%2030.8801%20334.597%2029.944%20335.316%2029.944H350.412C351.153%2029.944%20351.875%2030.8653%20351.875%2031.8014V66.1236Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M205.453%20104.477H241.483C242.223%20104.477%20243.186%20105.703%20243.186%20106.624V119.808C243.186%20120.729%20242.212%20121.955%20241.483%20121.955H188.89C188.149%20121.955%20187.427%20121.034%20187.427%20120.098V31.8014C187.427%2030.8801%20188.168%2029.944%20188.89%2029.944H203.986C204.727%2029.944%20205.446%2030.8653%20205.446%2031.8014L205.453%20104.477Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M75.8639%20151.998C67.4544%20151.989%2059.1039%20150.589%2051.1491%20147.852C51.0125%20147.805%2050.8901%20147.724%2050.7934%20147.616C50.6966%20147.508%2050.6288%20147.378%2050.5962%20147.237C50.5636%20147.096%2050.5673%20146.948%2050.607%20146.809C50.6468%20146.67%2050.7211%20146.543%2050.8232%20146.44L70.7417%20126.413C70.8285%20126.324%2070.934%20126.255%2071.0506%20126.212C71.1673%20126.169%2071.292%20126.153%2071.4158%20126.164C84.588%20127.273%2097.6709%20123.176%20107.875%20114.748C107.985%20114.657%20108.116%20114.595%20108.257%20114.567C108.397%20114.54%20108.542%20114.549%20108.678%20114.592C108.814%20114.636%20108.937%20114.713%20109.036%20114.817C109.134%20114.921%20109.205%20115.048%20109.242%20115.187L115.745%20139.865C115.793%20140.042%20115.783%20140.229%20115.716%20140.4C115.649%20140.571%20115.53%20140.715%20115.375%20140.812C103.487%20148.129%2089.8114%20152%2075.8639%20151.998V151.998Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M149.153%2061.3574C149.084%2061.3579%20149.016%2061.3491%20148.949%2061.3314L121.653%2054.6073C121.529%2054.5758%20121.414%2054.5171%20121.315%2054.4355C121.217%2054.3539%20121.137%2054.2515%20121.083%2054.1356C115.827%2042.7716%20105.209%2033.0608%2093.3752%2028.7403C93.2408%2028.6914%2093.1209%2028.6094%2093.0265%2028.5018C92.932%2028.3942%2092.8661%2028.2645%2092.8347%2028.1246C92.8034%2027.9847%2092.8076%2027.8392%2092.847%2027.7014C92.8865%2027.5636%2092.9598%2027.438%2093.0604%2027.3361L110.931%209.24807C111.059%209.11773%20111.225%209.03217%20111.405%209.00407C111.585%208.97596%20111.769%209.00681%20111.931%209.09205C131.009%2019.0889%20145.949%2039.209%20149.99%2060.3581C150.013%2060.4816%20150.009%2060.6088%20149.978%2060.7306C149.947%2060.8524%20149.889%2060.9658%20149.809%2061.0627C149.729%2061.1595%20149.629%2061.2375%20149.516%2061.291C149.402%2061.3445%20149.278%2061.3723%20149.153%2061.3722V61.3574Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M124.39%20134.066C124.303%20134.066%20124.217%20134.054%20124.134%20134.029C123.997%20133.985%20123.874%20133.907%20123.775%20133.803C123.676%20133.698%20123.604%20133.57%20123.568%20133.431L116.39%20106.189C116.357%20106.066%20116.352%20105.938%20116.376%20105.813C116.4%20105.688%20116.451%20105.57%20116.527%20105.468C124.634%2094.3237%20127.834%2079.6497%20125.09%2066.2017C125.061%2066.0604%20125.068%2065.914%20125.11%2065.7762C125.153%2065.6384%20125.229%2065.5136%20125.333%2065.4134C125.436%2065.3133%20125.563%2065.2411%20125.702%2065.2035C125.841%2065.166%20125.987%2065.1643%20126.127%2065.1987L150.834%2071.3023C151.009%2071.3444%20151.167%2071.4412%20151.283%2071.5788C151.4%2071.7163%20151.469%2071.8875%20151.483%2072.0676C152.812%2095.2896%20142.642%20118.965%20124.942%20133.854C124.789%20133.989%20124.593%20134.064%20124.39%20134.066V134.066Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M42.9863%2037.5187C42.901%2037.5189%2042.8161%2037.5064%2042.7345%2037.4816C42.5985%2037.4393%2042.4753%2037.3634%2042.3763%2037.2608C42.2772%2037.1582%2042.2055%2037.0323%2042.1678%2036.8946L35.3159%2012.3761C35.2665%2012.1982%2035.2759%2012.009%2035.3426%2011.8369C35.4094%2011.6647%2035.53%2011.5189%2035.6863%2011.4213C55.053%20-0.689328%2079.5271%20-3.3455%20101.153%204.29982C101.289%204.34763%20101.41%204.42909%20101.506%204.53661C101.602%204.64413%20101.669%204.77422%20101.701%204.91476C101.733%205.0553%20101.729%205.20172%20101.69%205.34038C101.65%205.47904%20101.576%205.60543%20101.475%205.70778L81.853%2025.5901C81.7631%2025.6804%2081.6544%2025.7496%2081.5346%2025.7926C81.4148%2025.8357%2081.287%2025.8515%2081.1604%2025.839C74.4457%2025.1343%2067.6583%2025.7864%2061.1991%2027.7568C54.7398%2029.7271%2048.7397%2032.9757%2043.553%2037.3107C43.3957%2037.447%2043.1942%2037.521%2042.9863%2037.5187V37.5187Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M40.6675%20143.238C40.5385%20143.236%2040.4119%20143.204%2040.2971%20143.145C20.7415%20133.163%205.08968%20111.914%201.37116%2090.2707C1.34809%2090.1297%201.36048%2089.9852%201.4072%2089.8502C1.45392%2089.7153%201.53349%2089.5941%201.6387%2089.4978C1.74391%2089.4015%201.87143%2089.3331%202.00968%2089.2987C2.14794%2089.2644%202.29255%2089.2652%202.43042%2089.3011L29.6304%2096.5861C29.7535%2096.6187%2029.8677%2096.6787%2029.9645%2096.7617C30.0614%2096.8447%2030.1383%2096.9484%2030.1897%2097.0653C35.4934%20109.039%2046.5304%20119.147%2058.9934%20123.441C59.13%20123.488%2059.2524%20123.57%2059.3492%20123.677C59.4459%20123.785%2059.5137%20123.915%2059.5463%20124.057C59.5789%20124.198%2059.5752%20124.345%2059.5355%20124.484C59.4958%20124.624%2059.4214%20124.75%2059.3193%20124.853L41.2897%20142.986C41.2084%20143.068%2041.1114%20143.132%2041.0044%20143.176C40.8975%20143.219%2040.7828%20143.24%2040.6675%20143.238Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M25.5196%2085.9056C25.4457%2085.9067%2025.372%2085.8967%2025.3011%2085.8759L0.68998%2079.2819C0.513679%2079.2357%200.356885%2079.1339%200.242817%2078.9913C0.128748%2078.8488%200.0634692%2078.6732%200.0566461%2078.4906C-0.83965%2055.6475%208.94554%2033.2019%2026.2048%2018.4462C26.3132%2018.3528%2026.4435%2018.2884%2026.5834%2018.259C26.7233%2018.2296%2026.8684%2018.2361%2027.0051%2018.278C27.1418%2018.3199%2027.2658%2018.3958%2027.3655%2018.4986C27.4651%2018.6014%2027.5373%2018.7278%2027.5752%2018.866L35.1159%2045.8364C35.1525%2045.9622%2035.1595%2046.0947%2035.1363%2046.2236C35.1132%2046.3525%2035.0606%2046.4743%2034.9826%2046.5794C27.1233%2057.4344%2023.8974%2071.7592%2026.3566%2084.9063C26.3827%2085.0483%2026.3725%2085.1945%2026.3272%2085.3316C26.2819%2085.4686%2026.2028%2085.5919%2026.0974%2085.6901C25.9386%2085.8321%2025.7323%2085.909%2025.5196%2085.9056V85.9056Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M75.8753%20107.177C75.6658%20107.177%2075.4638%20107.099%2075.3086%20106.958L46.0938%2080.6119C46.0039%2080.5325%2045.9319%2080.4348%2045.8827%2080.3252C45.8335%2080.2157%2045.8083%2080.0968%2045.8086%2079.9767V62.7246C45.809%2062.6045%2045.8346%2062.4859%2045.8837%2062.3764C45.9328%2062.267%2046.0044%2062.1692%2046.0938%2062.0893L59.1975%2050.2758C59.353%2050.1338%2059.5557%2050.0551%2059.766%2050.0551C59.9763%2050.0551%2060.179%2050.1338%2060.3345%2050.2758L75.8901%2064.2923L91.4456%2050.2758C91.6011%2050.1338%2091.8039%2050.0551%2092.0141%2050.0551C92.2244%2050.0551%2092.4272%2050.1338%2092.5827%2050.2758L105.69%2062.0893C105.778%2062.1699%20105.849%2062.268%20105.897%2062.3773C105.946%2062.4867%20105.971%2062.6049%20105.972%2062.7246V79.9767C105.971%2080.097%20105.946%2080.2159%20105.898%2080.3259C105.849%2080.4359%20105.779%2080.5346%20105.69%2080.6156L76.4456%20106.958C76.2891%20107.099%2076.0859%20107.178%2075.8753%20107.177V107.177Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20width%3D%22401%22%20height%3D%22152%22%20viewBox%3D%220%200%20401%20152%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M244.901%2047.4375C244.16%2047.4375%20243.198%2046.2116%20243.198%2045.294V32.106C243.198%2031.1884%20244.172%2029.9588%20244.901%2029.9588H316.979C317.72%2029.9588%20318.683%2031.1884%20318.683%2032.106V45.294C318.683%2046.2116%20317.709%2047.4375%20316.979%2047.4375H290.194V120.116C290.194%20121.034%20289.453%20121.974%20288.731%20121.974H273.635C272.894%20121.974%20272.175%20121.053%20272.175%20120.116V47.4375H244.901Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M351.875%2066.1236H353.145L378.701%2031.1439C378.979%2030.6903%20379.375%2030.3217%20379.847%2030.0781C380.32%2029.8344%20380.849%2029.7251%20381.379%2029.7619H398.912C399.058%2029.7465%20399.205%2029.7632%20399.344%2029.8108C399.483%2029.8585%20399.61%2029.936%20399.715%2030.0379C399.821%2030.1398%20399.904%2030.2636%20399.957%2030.4007C400.01%2030.5379%20400.033%2030.685%20400.023%2030.8318C400.023%2031.4448%20399.901%2031.7531%20399.416%2032.3661L367.779%2075.9793L399.405%20119.158C399.893%20119.771%20400.016%20120.076%20400.016%20120.692C400.025%20120.839%20400.002%20120.986%20399.949%20121.123C399.896%20121.26%20399.814%20121.384%20399.708%20121.486C399.602%20121.588%20399.475%20121.666%20399.337%20121.713C399.198%20121.761%20399.05%20121.778%20398.905%20121.762H381.371C380.842%20121.8%20380.312%20121.691%20379.84%20121.448C379.368%20121.205%20378.972%20120.837%20378.693%20120.384L353.138%2085.4264H351.886V119.808C351.886%20120.729%20351.145%20121.955%20350.423%20121.955H335.316C334.575%20121.955%20333.856%20121.034%20333.856%20120.098V31.8014C333.856%2030.8801%20334.597%2029.944%20335.316%2029.944H350.412C351.153%2029.944%20351.875%2030.8653%20351.875%2031.8014V66.1236Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M205.453%20104.477H241.483C242.223%20104.477%20243.186%20105.703%20243.186%20106.624V119.808C243.186%20120.729%20242.212%20121.955%20241.483%20121.955H188.89C188.149%20121.955%20187.427%20121.034%20187.427%20120.098V31.8014C187.427%2030.8801%20188.168%2029.944%20188.89%2029.944H203.986C204.727%2029.944%20205.446%2030.8653%20205.446%2031.8014L205.453%20104.477Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M75.8639%20151.998C67.4544%20151.989%2059.1039%20150.589%2051.1491%20147.852C51.0125%20147.805%2050.8901%20147.724%2050.7934%20147.616C50.6966%20147.508%2050.6288%20147.378%2050.5962%20147.237C50.5636%20147.096%2050.5673%20146.948%2050.607%20146.809C50.6468%20146.67%2050.7211%20146.543%2050.8232%20146.44L70.7417%20126.413C70.8285%20126.324%2070.934%20126.255%2071.0506%20126.212C71.1673%20126.169%2071.292%20126.153%2071.4158%20126.164C84.588%20127.273%2097.6709%20123.176%20107.875%20114.748C107.985%20114.657%20108.116%20114.595%20108.257%20114.567C108.397%20114.54%20108.542%20114.549%20108.678%20114.592C108.814%20114.636%20108.937%20114.713%20109.036%20114.817C109.134%20114.921%20109.205%20115.048%20109.242%20115.187L115.745%20139.865C115.793%20140.042%20115.783%20140.229%20115.716%20140.4C115.649%20140.571%20115.53%20140.715%20115.375%20140.812C103.487%20148.129%2089.8114%20152%2075.8639%20151.998V151.998Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M149.153%2061.3574C149.084%2061.3579%20149.016%2061.3491%20148.949%2061.3314L121.653%2054.6073C121.529%2054.5758%20121.414%2054.5171%20121.315%2054.4355C121.217%2054.3539%20121.137%2054.2515%20121.083%2054.1356C115.827%2042.7716%20105.209%2033.0608%2093.3752%2028.7403C93.2408%2028.6914%2093.1209%2028.6094%2093.0265%2028.5018C92.932%2028.3942%2092.8661%2028.2645%2092.8347%2028.1246C92.8034%2027.9847%2092.8076%2027.8392%2092.847%2027.7014C92.8865%2027.5636%2092.9598%2027.438%2093.0604%2027.3361L110.931%209.24807C111.059%209.11773%20111.225%209.03217%20111.405%209.00407C111.585%208.97596%20111.769%209.00681%20111.931%209.09205C131.009%2019.0889%20145.949%2039.209%20149.99%2060.3581C150.013%2060.4816%20150.009%2060.6088%20149.978%2060.7306C149.947%2060.8524%20149.889%2060.9658%20149.809%2061.0627C149.729%2061.1595%20149.629%2061.2375%20149.516%2061.291C149.402%2061.3445%20149.278%2061.3723%20149.153%2061.3722V61.3574Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M124.39%20134.066C124.303%20134.066%20124.217%20134.054%20124.134%20134.029C123.997%20133.985%20123.874%20133.907%20123.775%20133.803C123.676%20133.698%20123.604%20133.57%20123.568%20133.431L116.39%20106.189C116.357%20106.066%20116.352%20105.938%20116.376%20105.813C116.4%20105.688%20116.451%20105.57%20116.527%20105.468C124.634%2094.3237%20127.834%2079.6497%20125.09%2066.2017C125.061%2066.0604%20125.068%2065.914%20125.11%2065.7762C125.153%2065.6384%20125.229%2065.5136%20125.333%2065.4134C125.436%2065.3133%20125.563%2065.2411%20125.702%2065.2035C125.841%2065.166%20125.987%2065.1643%20126.127%2065.1987L150.834%2071.3023C151.009%2071.3444%20151.167%2071.4412%20151.283%2071.5788C151.4%2071.7163%20151.469%2071.8875%20151.483%2072.0676C152.812%2095.2896%20142.642%20118.965%20124.942%20133.854C124.789%20133.989%20124.593%20134.064%20124.39%20134.066V134.066Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M42.9863%2037.5187C42.901%2037.5189%2042.8161%2037.5064%2042.7345%2037.4816C42.5985%2037.4393%2042.4753%2037.3634%2042.3763%2037.2608C42.2772%2037.1582%2042.2055%2037.0323%2042.1678%2036.8946L35.3159%2012.3761C35.2665%2012.1982%2035.2759%2012.009%2035.3426%2011.8369C35.4094%2011.6647%2035.53%2011.5189%2035.6863%2011.4213C55.053%20-0.689328%2079.5271%20-3.3455%20101.153%204.29982C101.289%204.34763%20101.41%204.42909%20101.506%204.53661C101.602%204.64413%20101.669%204.77422%20101.701%204.91476C101.733%205.0553%20101.729%205.20172%20101.69%205.34038C101.65%205.47904%20101.576%205.60543%20101.475%205.70778L81.853%2025.5901C81.7631%2025.6804%2081.6544%2025.7496%2081.5346%2025.7926C81.4148%2025.8357%2081.287%2025.8515%2081.1604%2025.839C74.4457%2025.1343%2067.6583%2025.7864%2061.1991%2027.7568C54.7398%2029.7271%2048.7397%2032.9757%2043.553%2037.3107C43.3957%2037.447%2043.1942%2037.521%2042.9863%2037.5187V37.5187Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M40.6675%20143.238C40.5385%20143.236%2040.4119%20143.204%2040.2971%20143.145C20.7415%20133.163%205.08968%20111.914%201.37116%2090.2707C1.34809%2090.1297%201.36048%2089.9852%201.4072%2089.8502C1.45392%2089.7153%201.53349%2089.5941%201.6387%2089.4978C1.74391%2089.4015%201.87143%2089.3331%202.00968%2089.2987C2.14794%2089.2644%202.29255%2089.2652%202.43042%2089.3011L29.6304%2096.5861C29.7535%2096.6187%2029.8677%2096.6787%2029.9645%2096.7617C30.0614%2096.8447%2030.1383%2096.9484%2030.1897%2097.0653C35.4934%20109.039%2046.5304%20119.147%2058.9934%20123.441C59.13%20123.488%2059.2524%20123.57%2059.3492%20123.677C59.4459%20123.785%2059.5137%20123.915%2059.5463%20124.057C59.5789%20124.198%2059.5752%20124.345%2059.5355%20124.484C59.4958%20124.624%2059.4214%20124.75%2059.3193%20124.853L41.2897%20142.986C41.2084%20143.068%2041.1114%20143.132%2041.0044%20143.176C40.8975%20143.219%2040.7828%20143.24%2040.6675%20143.238Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M25.5196%2085.9056C25.4457%2085.9067%2025.372%2085.8967%2025.3011%2085.8759L0.68998%2079.2819C0.513679%2079.2357%200.356885%2079.1339%200.242817%2078.9913C0.128748%2078.8488%200.0634692%2078.6732%200.0566461%2078.4906C-0.83965%2055.6475%208.94554%2033.2019%2026.2048%2018.4462C26.3132%2018.3528%2026.4435%2018.2884%2026.5834%2018.259C26.7233%2018.2296%2026.8684%2018.2361%2027.0051%2018.278C27.1418%2018.3199%2027.2658%2018.3958%2027.3655%2018.4986C27.4651%2018.6014%2027.5373%2018.7278%2027.5752%2018.866L35.1159%2045.8364C35.1525%2045.9622%2035.1595%2046.0947%2035.1363%2046.2236C35.1132%2046.3525%2035.0606%2046.4743%2034.9826%2046.5794C27.1233%2057.4344%2023.8974%2071.7592%2026.3566%2084.9063C26.3827%2085.0483%2026.3725%2085.1945%2026.3272%2085.3316C26.2819%2085.4686%2026.2028%2085.5919%2026.0974%2085.6901C25.9386%2085.8321%2025.7323%2085.909%2025.5196%2085.9056V85.9056Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M75.8753%20107.177C75.6658%20107.177%2075.4638%20107.099%2075.3086%20106.958L46.0938%2080.6119C46.0039%2080.5325%2045.9319%2080.4348%2045.8827%2080.3252C45.8335%2080.2157%2045.8083%2080.0968%2045.8086%2079.9767V62.7246C45.809%2062.6045%2045.8346%2062.4859%2045.8837%2062.3764C45.9328%2062.267%2046.0044%2062.1692%2046.0938%2062.0893L59.1975%2050.2758C59.353%2050.1338%2059.5557%2050.0551%2059.766%2050.0551C59.9763%2050.0551%2060.179%2050.1338%2060.3345%2050.2758L75.8901%2064.2923L91.4456%2050.2758C91.6011%2050.1338%2091.8039%2050.0551%2092.0141%2050.0551C92.2244%2050.0551%2092.4272%2050.1338%2092.5827%2050.2758L105.69%2062.0893C105.778%2062.1699%20105.849%2062.268%20105.897%2062.3773C105.946%2062.4867%20105.971%2062.6049%20105.972%2062.7246V79.9767C105.971%2080.097%20105.946%2080.2159%20105.898%2080.3259C105.849%2080.4359%20105.779%2080.5346%20105.69%2080.6156L76.4456%20106.958C76.2891%20107.099%2076.0859%20107.178%2075.8753%20107.177V107.177Z%22%20fill%3D%22black%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.spec-meta { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: 8px; }
.meta-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--border); }
.meta-row .mono { color: var(--muted-foreground); white-space: nowrap; }
.meta-val { font-size: 15px; font-weight: 500; text-align: right; }
.meta-val .sub { display: block; font-weight: 400; font-size: 13px; color: var(--muted-foreground); }

.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); margin-top: clamp(48px, 6vw, 76px); }
.proof-card { padding: 28px 30px; }
.proof-card:first-child { padding-left: 0; }
.proof-card:not(:last-child) { border-right: 1px solid var(--border); }
.proof-idx { font-family: var(--font-mono); font-size: 12px; color: var(--accent-text); letter-spacing: 0.1em; }
.proof-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin: 14px 0 9px; letter-spacing: -0.01em; line-height: 1.1; }
.proof-desc { font-size: 14.5px; line-height: 1.55; color: var(--muted-foreground); }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-card { padding: 22px 0; border-right: none !important; border-bottom: 1px solid var(--border); }
  .proof-card:last-child { border-bottom: none; }
  .meta-val { text-align: left; }
}

/* ============================================================
   WORK
   ============================================================ */
.work-list { display: flex; flex-direction: column; }
.case {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center;
  padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--border);
}
.case:last-of-type { border-bottom: 1px solid var(--border); }
.case-media { order: 2; }
.case-body { order: 1; }
.case.flip .case-media { order: 1; }
.case.flip .case-body { order: 2; }
.case-media .placeholder { aspect-ratio: 4 / 3; }
.case-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.case-kicker .num { font-family: var(--font-mono); font-size: 12px; color: var(--accent-text); letter-spacing: 0.1em; }
.case-kicker .meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-foreground); letter-spacing: 0.05em; text-transform: uppercase; }
.case h3 { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.02; letter-spacing: -0.015em; margin-bottom: 16px; }
.case-summary { font-size: 16.5px; line-height: 1.6; color: var(--muted-foreground); margin-bottom: 22px; max-width: 46ch; }
.case-summary b { color: var(--foreground); font-weight: 500; }
.case-tags { margin-bottom: 24px; }
.case-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--accent-text); }
.case-link .arr { transition: transform .2s ease; }
.case-link:hover .arr { transform: translate(3px, -3px); }
@media (max-width: 800px) {
  .case { grid-template-columns: 1fr; gap: 28px; }
  .case-media, .case.flip .case-media { order: 2; }
  .case-body, .case.flip .case-body { order: 1; }
}

/* ---- compact bento "tease" grid ---- */
.work-intro { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted-foreground); max-width: 56ch; margin-bottom: clamp(28px, 4vw, 40px); }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.work-card {
  position: relative; overflow: hidden; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 28px; display: flex; flex-direction: column; gap: 14px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.work-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 16px 34px -20px color-mix(in oklch, var(--foreground) 40%, transparent); }
.work-card.featured { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: clamp(28px, 4vw, 52px); }
.work-card.featured .work-idx { display: none; }
.work-card.featured .wc-main { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.work-idx {
  position: absolute; top: 6px; right: 20px; font-family: var(--font-display);
  font-size: 86px; line-height: 1; color: var(--foreground); opacity: 0.05; pointer-events: none; user-select: none;
}
.wc-kicker { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.wc-kicker .mono { color: var(--muted-foreground); white-space: nowrap; }
.status {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.status-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-fill); flex: none; }
@media (prefers-reduced-motion: no-preference) { .status-dot { animation: statusPulse 2.2s ease-in-out infinite; } }
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.work-card h3 { font-family: var(--font-display); font-size: clamp(23px, 2.3vw, 29px); line-height: 1.05; letter-spacing: -0.012em; position: relative; z-index: 1; }
.work-card.featured h3 { font-size: clamp(30px, 3.4vw, 42px); }
.wc-desc { font-size: 14.5px; line-height: 1.55; color: var(--muted-foreground); max-width: 52ch; }
.work-card .chip-row { margin-top: auto; }
.wc-visual {
  width: clamp(180px, 22vw, 248px); flex: none; align-self: stretch;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.tok-row { display: flex; align-items: center; gap: 10px; }
.tok-chip { width: 18px; height: 18px; border-radius: 5px; flex: none; border: 1px solid color-mix(in oklch, var(--foreground) 8%, transparent); }
.tok-bar { height: 8px; border-radius: 999px; background: var(--muted); }
.wc-media { padding: 0; overflow: hidden; width: clamp(240px, 34vw, 392px); background: oklch(0.17 0.006 285); }
.wc-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 820px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card.featured { flex-direction: column; align-items: stretch; gap: 22px; }
  .wc-visual { width: 100%; flex-direction: row; }
  .wc-visual .tok-row { flex-direction: column; flex: 1; gap: 8px; }
  .wc-visual .tok-bar { width: 100% !important; }
  .wc-media { width: 100%; }
  .wc-media img { height: auto; aspect-ratio: 768 / 440; }
}

/* ============================================================
   SYSTEM SHOWCASE
   ============================================================ */
.sys-intro { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; max-width: 60ch; color: var(--muted-foreground); margin-bottom: clamp(40px, 5vw, 60px); }
.sys-intro b { color: var(--foreground); font-weight: 500; }
.sys-panel { overflow: hidden; }
.sys-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.sys-panel-head .mono { color: var(--muted-foreground); }
.dot-row { display: flex; gap: 6px; }
.dot-row span { width: 10px; height: 10px; border-radius: 999px; background: var(--border-strong); }
.sys-body { display: grid; grid-template-columns: repeat(2, 1fr); }
.sys-cell { padding: clamp(22px, 3vw, 32px); border-bottom: 1px solid var(--border); }
.sys-cell:nth-child(odd) { border-right: 1px solid var(--border); }
.sys-body .sys-cell:nth-last-child(-n+2) { border-bottom: none; }
.sys-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 20px; }
@media (max-width: 760px) {
  .sys-body { grid-template-columns: 1fr; }
  .sys-cell:nth-child(odd) { border-right: none; }
  .sys-body .sys-cell:nth-last-child(2) { border-bottom: 1px solid var(--border); }
}

.ramp { display: flex; height: 44px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.ramp span { flex: 1; }
.semantic-swatches { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.sw-row { display: flex; align-items: center; gap: 12px; }
.sw-chip { width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border); flex: none; }
.sw-row .name { font-family: var(--font-ui); font-size: 14px; }
.sw-row .val { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); }

.type-specimen { display: flex; flex-direction: column; gap: 16px; }
.ts-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.ts-row:last-child { border-bottom: none; }
.ts-sample { line-height: 1; }
.ts-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }

.comp-stack { display: flex; flex-direction: column; gap: 22px; }
.comp-stack .field { display: flex; flex-direction: column; gap: 7px; }
.input {
  font-family: var(--font-ui); font-size: 14.5px; padding: 10px 13px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--background); color: var(--foreground); width: 100%;
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: var(--accent-solid); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-solid) 20%, transparent); }
.field-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }

.space-scale { display: flex; align-items: flex-end; gap: 14px; }
.space-tick { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.space-tick span { background: var(--accent-fill); border-radius: 3px; display: block; }
.space-tick em { font-family: var(--font-mono); font-style: normal; font-size: 10.5px; color: var(--muted-foreground); }
.radius-demo { display: flex; gap: 14px; align-items: center; }
.radius-box { width: 56px; height: 56px; background: var(--muted); border: 1px solid var(--border-strong); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.about-copy p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; margin-bottom: 22px; }
.about-copy p.lead { font-family: var(--font-display); font-size: var(--t-lead); line-height: 1.28; letter-spacing: -0.01em; color: var(--foreground); }
.about-copy strong { font-weight: 500; }
.facts { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); }
.fact { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.fact .fnum { font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); padding-top: 3px; }
.fact .ftext { font-size: 15px; line-height: 1.45; }
.fact .ftext b { font-weight: 500; }
.skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: clamp(44px, 6vw, 64px); }
.skill-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 16px; font-weight: 400; }
.skill-col ul { list-style: none; margin: 0; padding: 0; }
.skill-col li { font-size: 14.5px; padding: 7px 0; border-bottom: 1px solid var(--border); break-inside: avoid; }
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .skills { grid-template-columns: 1fr; gap: 28px; }
  .skill-col ul { columns: 2; column-gap: 24px; }
}

/* ============================================================
   EXPERIENCE
   ============================================================ */
.timeline { display: flex; flex-direction: column; }
.role { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 4vw, 56px); padding-block: clamp(30px, 4vw, 44px); border-top: 1px solid var(--border); }
.role-when { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-foreground); letter-spacing: 0.02em; }
.role-when .now { color: var(--accent-text); }
.role-org { font-size: 14px; color: var(--muted-foreground); margin-top: 6px; }
.role h3 { font-size: var(--t-h3); font-weight: 400; letter-spacing: -0.012em; line-height: 1.14; font-family: var(--font-display); margin-bottom: 6px; }
.role-sub { font-size: 14.5px; color: var(--muted-foreground); margin-bottom: 16px; }
.role ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.role li { font-size: 15.5px; line-height: 1.55; padding-left: 20px; position: relative; color: var(--foreground); }
.role li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 999px; background: var(--accent-fill); }
.role li b { font-weight: 500; }
.role li .hl { color: var(--accent-text); font-weight: 500; }

.prior { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 4vw, 56px); padding-block: 34px; border-top: 1px solid var(--border); }
.prior-list { display: flex; flex-direction: column; gap: 14px; }
.prior-item { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.prior-item:last-child { border-bottom: none; }
.prior-item .pi-role { font-size: 15.5px; }
.prior-item .pi-role .pi-org { color: var(--muted-foreground); }
.prior-item .pi-when { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.edu { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 4vw, 56px); padding-block: 34px; border-top: 1px solid var(--border); }
.edu-list { display: flex; flex-direction: column; gap: 18px; }
.edu-item .ei-deg { font-family: var(--font-display); font-size: 19px; font-weight: 400; letter-spacing: -0.01em; }
.edu-item .ei-school { font-size: 14px; color: var(--muted-foreground); margin-top: 3px; }
@media (max-width: 720px) {
  .role, .prior, .edu { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact { padding-block: clamp(80px, 12vw, 160px); }
.contact-head { font-family: var(--font-display); font-size: clamp(44px, 8vw, 104px); line-height: 0.96; letter-spacing: -0.02em; margin-bottom: 36px; }
.contact-head .ital { color: var(--accent-text); }
.contact-links { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-bottom: clamp(56px, 8vw, 90px); }
.contact-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); font-size: 15px; font-weight: 500; transition: border-color .2s, transform .15s, background .2s;
}
.contact-pill:hover { border-color: var(--foreground); transform: translateY(-1px); }
.contact-pill .lbl { font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); letter-spacing: 0.06em; text-transform: uppercase; }
.footer-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--border); }
.footer-bar .mono { color: var(--muted-foreground); }

/* ---------- entrance (visibility never depends on animation playing) ----------
   Base state is fully visible. The slide-up is layered on top via a transition
   that only fires if JS adds .ready — so if animations/observers are paused or
   unavailable, content still shows. */
.reveal { opacity: 1; }
.js-anim .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.js-anim .reveal.ready { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-anim .reveal { opacity: 1; transform: none; transition: none; } }