/* Mirrors the Cargo site (kimjasmine.cargo.site): its site stylesheet,
   per-page layout settings, and Cargo's base layout rules.
   Cargo scales the whole site with the window: 1rem ≈ 10px at 1440px wide. */

/* ===== TOKENS ===== */
:root {
  --bg: #F2F2F0;                 /* page background: soft neutral */
  --surface: #E7E7E4;            /* cards, design-tile frames */
  --ink: #111111;                /* headings, nav */
  --body: #2B2B2B;               /* body copy */
  --muted: #666666;              /* labels, secondary text (5.2:1) */
  --rule: #CFCFCB;               /* hairlines */
  --ph: #DCDCD8;                 /* image placeholder */
  --radius: 8px;                 /* soft card corners */
  --accent: #111111;             /* monochrome accent: period, nav underline */
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --caption-font: "Monument Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
  --max-w: 1200px;

  /* Type scale: the only sizes used anywhere, each with its own line height */
  --s-12: 1.2rem;  --lh-12: 1.4;   /* captions, small notes */
  --s-16: 1.6rem;  --lh-16: 1.5;   /* body, nav */
  --s-20: 2rem;    --lh-20: 1.35;  /* card subtitles, card captions */
  --s-24: 2.4rem;  --lh-24: 1.25;  /* section headings, page subtitles */
  --s-32: 3.2rem;  --lh-32: 1.2;   /* card titles, intro lines */
  --s-48: 4.8rem;  --lh-48: 1.1;   /* page titles */
  --s-72: clamp(3.6rem, 5.4vw, 7.2rem);  --lh-72: 1.05;  /* fluid */  /* homepage hero */
  --tag: 1.3rem;   --lh-tag: 1.8;  /* monospace tag lines */
}

/* ===== BASE ===== */
* { box-sizing: border-box; }
html { font-size: clamp(9.5px, calc(100vw / 144), 13px); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
a:active, .media-link:active { opacity: .7; }
u { text-decoration: underline; text-underline-offset: .12em; }
img, video { display: block; }
[hidden] { display: none !important; }

/* ===== TOP NAV: name left, links centered, one button right ===== */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--bg); }
.topbar-in { display: flex; align-items: center; gap: 2rem; max-width: var(--max-w); margin: 0 auto; padding: 1.6rem 5rem; font-size: 1.5rem; }
.brand { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); transition: opacity .2s; }
.brand:hover { opacity: .6; }
.topbar nav { display: flex; flex: 1; align-items: center; gap: 3.2rem; }
.topbar nav a:first-child { margin-left: auto; }
.topbar nav a { position: relative; padding: .3rem 0; color: var(--ink); }
.topbar nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: right; transition: transform .3s ease;
}
.topbar nav a:not(.nav-cta):hover::after, .topbar nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.topbar .nav-cta { margin-left: auto; padding: .7rem 1.4rem; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 1.3rem; transition: background .2s; }
.topbar .nav-cta:hover { background: var(--accent); }
.menu-toggle { display: none; margin-left: auto; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; }

/* ===== SUBPAGES: same title style, chips and accents as the homepage ===== */
.crumb { margin: 1rem 0 3.2rem; font-size: 1.2rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.crumb a { color: var(--ink); }
.crumb a:hover { color: var(--accent); }
.cs-head { margin-bottom: 4rem; }
.page-content .cs-title, .page-content .s-48 {
  margin: 0; font-size: clamp(4.8rem, 7vw, 9rem); line-height: .95; font-weight: 400; letter-spacing: -0.05em; color: var(--ink);
}
.dot { color: var(--accent); }
.cs-sub { margin: 2.4rem 0 0; font-size: 2rem; line-height: 1.35; color: var(--muted); }
.cs-head .chips { margin-top: 1.6rem; }
.wcard .chips li { background: var(--bg); }
.cs-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.4rem;
  margin: 0 0 5.6rem; padding: 2rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.cs-meta dt { margin-bottom: .6rem; font-size: 1.2rem; font-weight: 500; letter-spacing: .08em; color: var(--muted); }
.cs-meta dd { margin: 0; color: var(--ink); }
.cs-meta dd a { color: var(--accent); }
.glance { margin-bottom: 5.6rem; }
.label { margin: 0 0 1.6rem; font-size: 1.2rem; font-weight: 500; letter-spacing: .08em; color: var(--muted); }
.label .icon { color: var(--accent); }
.sublabel { margin: 3.2rem 0 1.2rem; font-size: 1.2rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stats, .page-content .process, .features { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.page-content .process { grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); gap: 1.2rem; }
.stat, .process li, .feature { padding-top: 1.2rem; border-top: 1px solid var(--ink); }
.process li, .feature { border-top-width: 1px; border-top-color: var(--rule); }
.stat-n { display: block; font-size: 4.4rem; line-height: 1; font-weight: 400; letter-spacing: -0.05em; color: var(--ink); }
.stat-l { display: block; margin-top: .6rem; color: var(--muted); }
.step-n, .feat-n { display: block; font-size: 1.2rem; color: var(--muted); }
.step-t { display: block; margin-top: .4rem; font-weight: 500; color: var(--ink); }
.step-d { display: block; margin-top: .2rem; font-size: 1.4rem; line-height: 1.4; color: var(--muted); }
.page-content .feature h3 { margin: .4rem 0; font-size: 1.6rem; font-weight: 500; color: var(--ink); }
.feature p { margin: 0; }
.cs-hero { margin-bottom: 4rem; }
.cs-intro { max-width: 64ch; font-size: 1.8rem; line-height: 1.55; color: var(--ink); }
.page-content .icon { color: var(--accent); }

.site-foot { margin-top: 7.2rem; padding-top: 2.4rem; border-top: 1px solid var(--rule); }
.next { display: inline-flex; flex-direction: column; gap: .6rem; margin-bottom: 4rem; }
.next-l { font-size: 1.2rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.next-t { font-size: 4rem; line-height: 1; font-weight: 400; letter-spacing: -0.045em; color: var(--ink); transition: color .2s; }
.next:hover .next-t { color: var(--accent); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem 2.4rem; color: var(--muted); }
.foot-links { display: flex; gap: 2.4rem; }
.foot-links a { color: var(--ink); }
.foot-links a:hover { color: var(--accent); }

/* ===== NOW INSTITUTE CASE STUDY ===== */
/* browser-window mockup; tall screenshots scroll inside */
.bw { margin: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 10px; background: #fff; box-shadow: 0 18px 40px -24px rgba(17,17,17,.35); }
.bw-bar { display: flex; align-items: center; gap: 1.2rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--rule); background: #f7f7f5; }
.bw-dots { display: flex; gap: .5rem; }
.bw-dots i { width: .9rem; height: .9rem; border-radius: 50%; background: #d4d4d0; }
.bw-url { flex: 1; max-width: 32rem; margin: 0 auto; padding: .3rem 1rem; border-radius: 99px; background: var(--bg); font-size: 1.1rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-screen { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ph); }
.bw-screen img { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; }
.bw-scroll { overflow-y: auto; scrollbar-width: thin; }
.bw-fit { overflow: hidden; }
.bw-fit img { min-height: 0; height: 100%; object-fit: contain; }
.bw { margin-inline: auto; }
.bw-scroll:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.bw-lg .bw-screen { aspect-ratio: 16 / 9; }
.bw-sm .bw-bar { padding: .6rem .8rem; gap: .6rem; }
.bw-sm .bw-dots i { width: .6rem; height: .6rem; }
.bw-sm .bw-url { font-size: .95rem; padding: .2rem .6rem; }
.bw-sm .bw-screen { aspect-ratio: 3 / 4; }

.ni-lede { max-width: 42ch; margin: 0 0 4rem; font-size: 2.4rem; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
.ni-lede b { font-weight: 600; }
/* Now Institute: cover, client explainer, the two sites */
.ni-cover { margin: 0 0 6.4rem; }
.ni-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: var(--radius); background: var(--ph); }
.who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; margin-bottom: 6.4rem; padding-top: 4rem; border-top: 1px solid var(--rule); }
.page-content .who-h { margin: 0 0 1.6rem; font-size: 3.2rem; line-height: 1.1; font-weight: 400; letter-spacing: -0.03em; color: var(--ink); }
.who-txt p { margin: 0 0 1.6rem; font-size: 1.7rem; line-height: 1.5; color: var(--ink); }
.who-txt .who-note { font-size: 1.5rem; color: var(--muted); }
.who-sites { display: grid; gap: 1.2rem; align-content: start; }
.site-card { display: grid; grid-template-columns: auto 1fr; column-gap: 1.6rem; padding: 2.4rem; border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; transition: background .2s; }
.site-card:hover { background: var(--rule); }
.site-card .site-n { grid-row: span 3; }
.site-card-t { font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; }
.site-card-u { font-size: 1.3rem; color: var(--muted); }
.site-card-d { margin-top: .8rem; font-size: 1.4rem; line-height: 1.45; color: var(--body); }
.site-n { display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 1.4rem; font-weight: 500; }
.site { margin: 0 0 4rem; padding-top: 4.8rem; border-top: 2px solid var(--ink); scroll-margin-top: 8rem; }
.site-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.4rem; margin-bottom: 4.8rem; }
.site-head .site-n { width: 5.6rem; height: 5.6rem; font-size: 1.8rem; }
.site-k { margin: 0 0 .8rem; font-size: 1.2rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.site-k a { color: var(--ink); }
.page-content .site-t { margin: 0 0 1.6rem; font-size: 5.6rem; line-height: 1; font-weight: 400; letter-spacing: -0.04em; color: var(--ink); }
.site-d { max-width: 60ch; margin: 0; font-size: 1.7rem; line-height: 1.5; color: var(--body); }
.page-content .ni-h.ni-h--sm { font-size: 2.8rem; }
.ba-fig { margin: 0; }
.ba-img { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ph); }
.ba-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pg { margin: 0; min-width: 0; }
.pg-screen { aspect-ratio: 3 / 4; overflow-y: auto; scrollbar-width: thin; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ph); }
.pg-screen img { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; }
.pg-screen:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 3.2rem; }
.why > div, .tk > div { padding: 2.4rem; border-radius: var(--radius); background: var(--surface); }
.page-content .why h4, .page-content .tk h3 { margin: 0 0 .8rem; font-size: 1.7rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.why p, .tk p { margin: 0; font-size: 1.5rem; line-height: 1.5; color: var(--body); }
.takeaways { padding-top: 4.8rem; border-top: 2px solid var(--ink); }
.takeaways .csr-k { margin-bottom: 1.6rem; }
.tk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.tk .step-n { display: block; margin-bottom: 1.6rem; }
.page-content .proj-chips { margin: 3.2rem 0 0; }
.sm-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3.2rem; align-items: center; margin-bottom: 3.2rem; }
.sm-cs .shot-cap { margin-top: .8rem; }
.sm-lead { margin: 0; font-size: 2rem; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.sm-lead b { font-weight: 600; }
.sitemap { margin: 4rem 0 6.4rem; padding: 3.2rem; border-radius: var(--radius); background: var(--surface); }
.page-content .sitemap ul { margin: 0; padding: 0; list-style: none; }
.sm-root { width: fit-content; margin: 0 auto 2.4rem; padding: .8rem 2rem; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 1.4rem; font-weight: 500; }
.sm-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; padding-top: 2.4rem; border-top: 1px solid var(--ink); }
.sm-node { margin: 0 0 1.2rem; padding: 1rem 1.2rem; border-radius: 6px; background: var(--bg); border: 1px solid var(--ink); font-size: 1.4rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.page-content .sm-col > ul > li { margin-bottom: .8rem; padding: .8rem 1.2rem; border-radius: 6px; background: var(--bg); font-size: 1.3rem; line-height: 1.35; color: var(--body); }
.page-content .sm-col li ul { margin-top: .6rem; padding-left: 1rem; border-left: 1px solid var(--rule); }
.page-content .sm-col li li { padding: .2rem 0; font-size: 1.2rem; color: var(--muted); }
.sitemap .shot-cap { margin-top: 2rem; }
.tk--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-content .ni-sec .stats { margin-top: 3.2rem; padding: 0; }
.csr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 8rem; }
.csr > div { padding: 2.4rem; border-radius: var(--radius); background: var(--surface); }
.csr-k { display: inline-block; margin-bottom: 1.2rem; padding: .3rem 1rem; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 1.2rem; }
.csr p { margin: 0; font-size: 1.7rem; line-height: 1.45; color: var(--ink); }
.ni-sec { margin-bottom: 9.6rem; }
.page-content .ni-h { margin: 0 0 2.4rem; font-size: 4rem; line-height: 1.05; font-weight: 400; letter-spacing: -0.04em; color: var(--ink); }
.ni-note { margin: -1.2rem 0 2.8rem; max-width: 56ch; color: var(--muted); }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.ba-tag { display: inline-block; margin-bottom: 1.2rem; padding: .3rem 1rem; border: 1px solid var(--ink); border-radius: 99px; font-size: 1.2rem; color: var(--ink); }
.ba-tag--after { background: var(--ink); color: var(--bg); }
.ds { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.ds-card { padding: 3.2rem; border-radius: var(--radius); background: var(--surface); }
.ds-aa { display: block; font-size: 9.6rem; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.ds-aa--serif { font-family: Georgia, "Times New Roman", serif; letter-spacing: -0.02em; }
.page-content .ds-card h3 { margin: 2.4rem 0 .2rem; font-size: 2.2rem; font-weight: 500; color: var(--ink); }
.ds-type { margin: 0 0 1.6rem; color: var(--muted); }
.sw { display: flex; gap: .6rem; margin-bottom: 1.6rem; }
.sw span { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--rule); }
.ds-jp { margin: 0 0 1.6rem; font-family: Georgia, serif; font-size: 2.8rem; line-height: 1.2; color: var(--ink); }
.ds-jp span { font-size: 1.6rem; color: var(--muted); }
.page-content .ds-keys { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ds-keys li { padding: .35rem 1rem; border-radius: 99px; background: var(--bg); font-size: 1.2rem; color: var(--body); }
.ia { margin-bottom: 3.2rem; }
.ia-box { aspect-ratio: 7040 / 4224; overflow: hidden; border-radius: var(--radius); background: var(--ph); }
.ia-box img { display: block; width: 100%; height: 100%; object-fit: contain; }
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 2.4rem; }
.shot-cap { margin: 1rem 0 0; font-size: 1.3rem; color: var(--muted); }
.more { margin-top: 3.2rem; }
.more summary { display: inline-block; padding: .7rem 1.6rem; border: 1px solid var(--ink); border-radius: 99px; cursor: pointer; list-style: none; font-size: 1.4rem; color: var(--ink); }
.more summary::-webkit-details-marker { display: none; }
.more[open] summary { background: var(--ink); color: var(--bg); }
.shots--more, .shots--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.page-content .more-h { margin: 4rem 0 0; font-size: 1.4rem; font-weight: 500; color: var(--ink); }
.more-h + .shots { margin-top: 1.2rem; }
@media (max-width: 768px) {
  .csr, .ba, .ds, .who, .why, .tk { grid-template-columns: 1fr; }
  .sm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-intro { grid-template-columns: 1fr; gap: 1.6rem; }
  .sitemap { padding: 2rem; }
  .page-content .site-t { font-size: 4rem; }
  .site-head { gap: 1.6rem; }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots--more, .shots--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ni-lede { font-size: 2rem; }
}
@media (max-width: 600px) { .shots--more, .shots--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== HFES STG CASE STUDY ===== */
.hf-hero { margin-bottom: 6.4rem; }
.hmw { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.2rem; margin-bottom: 8rem; }
.hmw > div { padding: 2.4rem; border-radius: var(--radius); background: var(--surface); }
.hmw p { margin: 0; font-size: 1.7rem; line-height: 1.45; color: var(--ink); }
.hmw .hmw-q { background: var(--ink); }
.hmw .hmw-q p { font-size: 2.4rem; line-height: 1.25; letter-spacing: -0.02em; color: var(--bg); }
.hmw .hmw-q .csr-k { background: var(--bg); color: var(--ink); }
/* research funnel */
.funnel { display: flex; flex-direction: column; gap: .8rem; }
.fn { width: var(--w); display: grid; grid-template-columns: 11rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1.6rem; padding: 1.8rem 2.4rem; border-radius: var(--radius); background: var(--surface); }
.fn:nth-child(2) { background: #dedcd6; }
.fn:nth-child(3) { background: var(--ink); color: var(--bg); }
.fn-n { grid-row: 1 / 3; align-self: center; white-space: nowrap; font-size: 4.4rem; line-height: 1; letter-spacing: -0.04em; color: inherit; }
.fn-t { font-weight: 500; color: inherit; }
.fn-d { font-size: 1.4rem; opacity: .7; }
.fn:nth-child(-n+2) .fn-n, .fn:nth-child(-n+2) .fn-t { color: var(--ink); }
/* figures */
.fg { margin: 0; }
.fg-box { overflow: hidden; border-radius: var(--radius); background: var(--ph); }
.fg-box img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.pair .fg-box { max-height: 40rem; }   /* tall artwork is shown whole (contain), not stretched */
.hf-hero .fg-box { max-height: 60rem; }
/* what we heard */
.heard2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; margin-top: 3.2rem; }
.heard-k { margin: 0 0 .8rem; font-size: 1.2rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.page-content .heard2 ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.heard2 li { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); font-size: 1.8rem; line-height: 1.35; color: var(--ink); }
.issues { margin-top: 3.2rem; }
.page-content .issues ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.iss { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); gap: 1.6rem; align-items: baseline; padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
.sev { justify-self: start; padding: .2rem .9rem; border: 1px solid var(--ink); border-radius: 99px; font-size: 1.1rem; font-weight: 500; color: var(--ink); }
.iss--high .sev { background: var(--ink); color: var(--bg); }
.iss--low .sev { border-color: var(--rule); color: var(--muted); }
.iss p { margin: 0; }
.iss-t { font-size: 1.7rem; line-height: 1.35; color: var(--ink); }
.iss-d { margin-top: .4rem !important; font-size: 1.4rem; color: var(--muted); }
.hf-persona { margin: 4.8rem 0 0; }
/* Migrant Compass */
.ta { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 3.2rem; align-items: start; }
.ta-note { margin: 2.4rem 0 0; }
.ta-img .fg-box { background: #fff; }
.mb { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3.2rem; align-items: start; }
.page-content .mb-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.mb-list li { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); font-size: 1.4rem; line-height: 1.45; color: var(--body); }
.mb-list b { display: block; margin-bottom: .2rem; font-size: 1.6rem; font-weight: 500; color: var(--ink); }
.logo-row { margin-top: 3.2rem; }
.logo-fig { max-width: 48rem; }
.logo-box { padding: 4rem; border-radius: var(--radius); background: #fff; }
.logo-box img { display: block; width: 100%; height: auto; }
.mc-phones .phone { aspect-ratio: auto; }
.csr--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Trendy */
.tr-ins { margin-top: 3.2rem; }
.page-content .tr-sub { margin-top: 4.8rem; }
.tr-board { max-width: 72rem; margin-top: 2.4rem; }
/* Travel Mate key screens */
.tm-keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; }
.tm-key { margin: 0; }
.tm-key-box { aspect-ratio: 3 / 5; overflow: hidden; border-radius: var(--radius); background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.tm-key img { display: block; max-width: 100%; border-radius: 6px; box-shadow: 0 8px 24px -12px rgba(17,17,17,.35); }
.tm-key--full .tm-key-box { align-items: flex-start; padding-bottom: 0; }
.tm-key--full img { width: 100%; border-radius: 6px 6px 0 0; }
.pair--even { align-items: stretch; }
.pair--even .fg-box { aspect-ratio: 4 / 3 !important; max-width: none !important; max-height: none; padding: 1.6rem; background: #fff; border: 1px solid var(--rule); }
.page-content .tm-flow-h { margin-top: 6.4rem; }
.tm-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2rem 2rem; margin-bottom: 3.2rem; }
.tm-step { margin: 0; }
.tm-step-img { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 1.2rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--rule); }
.tm-step-img img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.tm-step figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin-top: 1.2rem; font-size: 1.4rem; line-height: 1.4; color: var(--muted); }
.tm-step figcaption .step-n { grid-row: span 2; }
.tm-step figcaption b { font-weight: 500; color: var(--ink); }
@media (max-width: 768px) { .km-tiles { grid-template-columns: 1fr; } .gproj-list--stack .gproj-txt { display: block; } }
@media (max-width: 600px) { .pc-hero { padding: 1.2rem; } .pc-hero .jrow { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 768px) { .tm-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tm-flow { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .ta, .mb, .csr--2 { grid-template-columns: 1fr; }
  .ta-img { max-width: 24rem; }
  .logo-box { padding: 2.4rem; }
}
.mc-phones .phone-screen { height: auto; aspect-ratio: 400 / 849; padding-top: 16%; border-radius: 2rem; background: var(--sb, #fff); }
.mc-phones .phone::before { top: 1.4rem; width: 26%; height: 1.3rem; }
.pz { padding: 3.2rem; border-radius: var(--radius); background: var(--surface); }
.pz-who { display: flex; align-items: center; gap: 1.6rem; }
.pz-av { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 6.4rem; height: 6.4rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 2rem; font-weight: 500; }
.pz-who p { margin: 0; }
.pz-name { font-size: 2.4rem; letter-spacing: -0.02em; color: var(--ink); }
.pz-role { font-size: 1.4rem; color: var(--muted); }
.pz-quote { margin: 2.4rem 0 0; padding-left: 1.6rem; border-left: 2px solid var(--ink); font-size: 2rem; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.pz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem 4rem; margin-top: 3.2rem; padding-top: 3.2rem; border-top: 1px solid var(--rule); }
.pz-k { margin: 0 0 1.2rem; font-size: 1.2rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pz-dl { margin: 0; }
.pz-dl div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.2rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.pz-dl dt { font-size: 1.3rem; color: var(--muted); }
.pz-dl dd { margin: 0; font-size: 1.5rem; line-height: 1.4; color: var(--ink); }
.page-content .pz .chips { margin: 0; }
.pz .chips li { background: var(--bg); font-size: 1.3rem; }
.decs { border-top: 1px solid var(--rule); }
.dec { display: grid; grid-template-columns: 1fr 4rem 1fr; align-items: center; gap: 1.6rem; padding: 2rem 0; border-bottom: 1px solid var(--rule); }
.dec p { margin: 0; }
.dec-i { color: var(--body); }
.dec-d { font-size: 1.8rem; font-weight: 500; color: var(--ink); }
.dec-arrow { font-size: 2rem; text-align: center; color: var(--ink); }
.dec--head { padding: 1.2rem 0; }
.dec--head p { font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.reflect { margin: 2.4rem 0 0; padding: 2.4rem; border-left: 3px solid var(--ink); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.reflect p { margin: 0; font-size: 1.8rem; line-height: 1.45; color: var(--ink); }
@media (max-width: 768px) {
  .hmw, .pair { grid-template-columns: 1fr; }
  .heard2 { grid-template-columns: 1fr; gap: 2.4rem; }
  .iss { grid-template-columns: 1fr; gap: .8rem; }
  .pz-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .pz { padding: 2rem; }
  .pz-dl div { grid-template-columns: 8.4rem minmax(0, 1fr); }
  .fn { width: 100%; grid-template-columns: 6rem minmax(0, 1fr); }
  .fn-n { font-size: 3.2rem; }
  .dec { grid-template-columns: 1fr; gap: .4rem; }
  .dec-arrow { text-align: left; transform: rotate(90deg); width: 2rem; }
  .dec--head { display: none; }
}

/* design-tool canvas for large wireframe sheets: fixed frame, zoomed art you can pan */
.canvas { margin: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 10px; background: #e9e9e6; box-shadow: 0 18px 40px -24px rgba(17,17,17,.35); }
.canvas-bar { display: flex; align-items: center; gap: 1.2rem; padding: .9rem 1.2rem; background: #1e1e1e; color: #e6e6e6; font-size: 1.2rem; }
.canvas-bar .bw-dots i { background: #555; }
.canvas-file { flex: 1; text-align: center; }
.canvas-zoom { opacity: .6; }
.canvas-view { height: clamp(32rem, 42vw, 56rem); overflow: auto; cursor: grab; background-image: radial-gradient(#cfcfca 1px, transparent 1px); background-size: 16px 16px; }
.canvas-view:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.canvas-art { width: 170%; margin: 4rem; background: var(--ph); box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.canvas-art img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ===== SHARED CASE-STUDY PIECES: phones, screen strip, persona ===== */
.phone-wrap { margin: 0; }
.phone { position: relative; width: 100%; aspect-ratio: 9 / 19; padding: .9rem; border-radius: 3.4rem; background: #111; box-shadow: 0 18px 40px -24px rgba(17,17,17,.5); }
.phone::before { content: ""; position: absolute; top: 1.5rem; left: 50%; z-index: 1; width: 30%; height: 1.8rem; border-radius: 99px; background: #111; transform: translateX(-50%); }
.phone-screen { height: 100%; overflow-y: auto; border-radius: 2.6rem; background: var(--ph); scrollbar-width: none; }
.phone-screen::-webkit-scrollbar { display: none; }
.phone-screen img { display: block; width: 100%; height: auto; }
.hstrip { display: flex; gap: 2rem; overflow-x: auto; padding: .4rem .2rem 2rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.hstrip > * { flex: 0 0 auto; scroll-snap-align: start; }
.hstrip .phone-wrap { width: 20rem; }
.hstrip .hs-item { width: 34rem; }
.strip-hint { margin: 0; font-size: 1.2rem; color: var(--muted); }
.persona { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 4rem; padding: 3.2rem; border-radius: var(--radius); background: var(--surface); }
.p-id { display: flex; align-items: center; gap: 1.6rem; }
.p-avatar { display: grid; place-items: center; width: 6.4rem; height: 6.4rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 2.4rem; }
.page-content .p-name { margin: 0; font-size: 2.6rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.p-role { margin: .2rem 0 0; color: var(--muted); }
.p-quote { grid-row: span 2; margin: 0; align-self: center; font-size: 2.6rem; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.p-facts { display: grid; gap: 1rem; margin: 0; }
.p-facts dt { font-size: 1.2rem; color: var(--muted); }
.p-facts dd { margin: 0; color: var(--ink); }
.p-cols { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.page-content .p-cols h4 { margin: 0 0 .8rem; font-size: 1.4rem; font-weight: 600; color: var(--ink); }
.page-content .p-cols ul { margin: 0; padding-left: 1.8rem; color: var(--body); }
.p-cols li { margin-bottom: .4rem; }
@media (max-width: 768px) {
  .persona, .p-cols { grid-template-columns: 1fr; }
  .p-quote { grid-row: auto; font-size: 2rem; }
  .hstrip .phone-wrap { width: 16rem; }
  .hstrip .hs-item { width: 26rem; }
}

/* ===== DESIGNS PAGE: editorial grid ===== */
.bn-count { margin: 1.6rem 0 0; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5.6rem 2rem; margin-top: 2.4rem; }
.bn { grid-column: span var(--span); display: block; color: inherit; }
.bn-img { overflow: hidden; background: var(--ph); }
.bn .bn-cover { height: auto !important; }
.bn-duo { grid-column: 1 / -1; display: grid; gap: 2rem; align-items: start; }
.bn-duo .bn-cover { background: #fff; }
@media (max-width: 600px) { .bn-duo { grid-template-columns: 1fr !important; } }
.bn-cover img { object-fit: cover !important; }
.bn--xl .bn-img { height: clamp(32rem, 40vw, 56rem); }
.bn--lg .bn-img { height: clamp(28rem, 32vw, 44rem); }
.bn--md .bn-img { height: clamp(24rem, 26vw, 36rem); }
.bn-set { display: flex; gap: 1.2rem; }
.bn-set figure { flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--r); margin: 0; overflow: hidden; background: var(--ph); }
.bn-set img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .6s ease; }
.bn:hover .bn-set img { transform: scale(1.02); }
.page-content .bn--hero .bn-title { font-size: 4rem; }
.bn-img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .6s ease; }
.bn:hover .bn-img img { transform: scale(1.02); }
.bn-cap { display: grid; grid-template-columns: auto 1fr; column-gap: 1.2rem; align-items: baseline; margin-top: 1.4rem; }
.bn-n { grid-row: span 2; font-size: 1.3rem; color: var(--muted); }
.page-content .bn-title { margin: 0; font-size: 2.4rem; line-height: 1.15; font-weight: 500; letter-spacing: -0.025em; color: var(--ink); }
.bn--xl .page-content .bn-title, .page-content .bn--xl .bn-title { font-size: 3.2rem; }
.bn:hover .bn-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.bn-sub { color: var(--muted); }
@media (max-width: 768px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 1.6rem; }
  .bn { grid-column: span 1; }
  .bn--xl, .bn--lg, .bn--hero, .bn--pair { grid-column: 1 / -1; }
  .bn--md .bn-img { height: 26rem; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bn, .bn--xl, .bn--lg, .bn--hero, .bn--pair { grid-column: auto; }
  .bn-set { gap: .6rem; }
  .page-content .bn--hero .bn-title { font-size: 2.8rem; }
  .bn .bn-img { height: auto; aspect-ratio: 4 / 3; }
}

/* ===== GRAPHIC & ART DETAIL PAGES ===== */
.dz-hero { margin-bottom: 5.6rem; }
.pc-hero { padding: 3.2rem; border-radius: var(--radius); background: var(--surface); }
.pc-hero .jr-fig img { object-fit: contain; background: #fff; box-shadow: 0 12px 28px -18px rgba(17,17,17,.45); }
.dz-hero .shot-cap { margin-top: 1rem; }
.km-sw { display: flex; height: 4.8rem; margin-top: 2.4rem; border-radius: var(--radius); overflow: hidden; }
.km-sw span { flex: 1; }
.jr-fig.km-cap { aspect-ratio: auto; }
.km-cap img { aspect-ratio: var(--r); height: auto !important; }
.km-cap .shot-cap { margin-top: .8rem; }
.km-hero { margin-bottom: 6.4rem; display: flex; justify-content: center; }
.km-hero img { display: block; height: min(80vh, 70rem); width: auto; max-width: 100%; object-fit: contain; border-radius: var(--radius); }
.km-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 2rem; }
.km-tile { margin: 0; }
.km-tile-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 2rem; border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.km-tile-img img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 24px -16px rgba(17,17,17,.5); }
.km-tile .shot-cap { margin-top: .8rem; }
.gproj-list--stack .gproj { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; }
.gproj-list--stack .gproj-cover { grid-column: 1 / -1; }
.gproj-list--stack .gproj-txt { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; }
.gproj-list--stack .gproj-txt > * { grid-column: 1; }
.gproj-list--stack .gproj-txt > .gproj-meta, .gproj-list--stack .gproj-txt > .gproj-strip { grid-column: 2; }
.gproj-list--stack .gproj-meta { grid-row: 1 / span 3; margin-top: 2.4rem; }
.gproj-list--stack .gproj-strip { grid-row: 4 / span 2; align-self: end; margin-top: 1.2rem; }
.gproj-list--stack .gproj-go { grid-row: 5; }
.dz-k { margin: 0 0 .8rem; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dz-k .icon { color: var(--ink); }
.gal { display: grid; grid-template-columns: repeat(var(--gcols, 3), minmax(0, 1fr)); gap: 1.2rem; }
.gal--1 { display: block; }
.gal--1 .gz-box { aspect-ratio: auto !important; height: clamp(32rem, 44vw, 60rem); }
.gz { margin: 0; }
.more .gal { margin-top: 1.6rem; }
.cs-meta dd a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.gz-box { overflow: hidden; background: var(--ph); }
.gz-box img, .gz-box video { display: block; width: 100%; height: 100%; object-fit: contain; }
.jgal { display: grid; gap: 1.2rem; }
.more .jgal { margin-top: 1.2rem; }
.jrow { display: grid; gap: 1.2rem; }
.jr-fig, .jr-pad { min-width: 0; aspect-ratio: var(--r); margin: 0; }
.jr-fig:only-child { justify-self: center; width: min(100%, 52rem); }
.jrow:has(> .jr-fig:only-child) { grid-template-columns: 1fr !important; }
.jr-fig img, .jr-fig video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ph); }
.concept { margin-top: 3.2rem; }
.concept + .concept { padding-top: 3.2rem; border-top: 1px solid var(--rule); }
.concept-k { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 .4rem; font-size: 2rem; letter-spacing: -0.02em; color: var(--ink); }
.concept-d { margin: 0 0 2rem; color: var(--muted); }
.concept .heard-k { margin-bottom: 1rem; }
.page-content .concept-sub { margin-top: 2.4rem; }
.concept .more { margin-top: 2rem; }
.set-more { margin-top: 2.4rem; }
.mail-hint { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; margin: 0 0 1.6rem; font-size: 1.3rem; color: var(--ink); }
.mail-hint span { padding: .4rem 1.2rem; border-radius: 99px; background: var(--surface); }
.mail-wrap { position: relative; }
.mail-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 3.6rem; width: 8rem; background: linear-gradient(to right, rgba(242,242,240,0), var(--bg)); pointer-events: none; transition: opacity .3s; }
.mail-wrap.at-end::after { opacity: 0; }
.dz-chan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 0 0 6.4rem; }
.dz-chgroup { margin-bottom: 4rem; padding-top: 4.8rem; border-top: 2px solid var(--ink); }
.dz-group { gap: 1.4rem; align-items: center; margin-bottom: 3.2rem; scroll-margin-top: 8rem; }
.dz-group .site-n { width: 3.6rem; height: 3.6rem; font-size: 1.3rem; }
.page-content .dz-group .site-t { margin: 0 0 .4rem; font-size: 2.8rem; letter-spacing: -0.03em; }
.dz-group .site-d { font-size: 1.5rem; color: var(--muted); }
.dz-chgroup { border-top-width: 1px; padding-top: 4rem; }
.dz-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4rem; align-items: center; }
.dz-split-img { margin: 0; }
.dz-split-img img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.dz-split-txt .ni-note { margin-bottom: 0; }
.mail-strip { display: flex; gap: 1.6rem; overflow-x: auto; padding-bottom: 1.2rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.mail-item { position: relative; flex: 0 0 auto; width: 32rem; margin: 0; scroll-snap-align: start; }
.mail { height: 72rem; overflow-y: auto; scrollbar-width: thin; border-radius: var(--radius); background: var(--ph); }
.mail img { display: block; width: 100%; height: auto; }
.mail-item::after { content: ""; position: absolute; left: 0; right: 0; top: calc(72rem - 10rem); height: 10rem; border-radius: 0 0 var(--radius) var(--radius); background: linear-gradient(rgba(17,17,17,0), rgba(17,17,17,.55)); pointer-events: none; transition: opacity .3s; }
.mail-cue { position: absolute; left: 50%; top: calc(72rem - 4.8rem); transform: translateX(-50%); padding: .5rem 1.2rem; border-radius: 99px; background: var(--bg); color: var(--ink); font-size: 1.2rem; font-weight: 500; pointer-events: none; box-shadow: 0 4px 14px -6px rgba(17,17,17,.4); transition: opacity .3s; animation: mail-bob 1.8s ease-in-out infinite; }
.mail-item.read::after, .mail-item.read .mail-cue { opacity: 0; }
@keyframes mail-bob { 50% { transform: translate(-50%, .4rem); } }
.mail-nav { position: absolute; top: 34rem; z-index: 2; width: 4.4rem; height: 4.4rem; border: 1px solid var(--ink); border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 1.8rem; cursor: pointer; transition: opacity .2s; }
.mail-prev { left: -2.2rem; } .mail-next { right: -2.2rem; }
.mail-nav:disabled { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mail-cue { animation: none; } }
@media (max-width: 768px) { .mail-prev { left: .4rem; } .mail-next { right: .4rem; } .dz-chan, .dz-split { grid-template-columns: 1fr; } .dz-split { gap: 2rem; } }
@media (max-width: 600px) { .jgal, .jrow { gap: .6rem; } .mail-item { width: 22rem; } .mail { height: 48rem; } .mail-item::after { top: calc(48rem - 10rem); } .mail-cue { top: calc(48rem - 4.8rem); } .mail-nav { top: 22rem; } }
@media (max-width: 768px) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== HOMEPAGE (after the references) ===== */
.rhero { padding: 6rem 0 4.8rem; }
.page-content .rhero-name {
  margin: 0; font-size: clamp(5.6rem, 9.4vw, 13.6rem); line-height: .9; font-weight: 400; letter-spacing: -0.055em; color: var(--ink);
}
.rhero-desc { margin: 2rem 0 0; max-width: 60ch; font-size: 1.8rem; line-height: 1.45; color: var(--muted); }

/* editorial label + text row */
.rrow { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; padding: 2.4rem 0 5.6rem; border-top: 1px solid var(--rule); }
.rlabel { margin: 0; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.rrow-body p { margin: 0; max-width: 46ch; color: var(--body); }
.rlink { display: inline-block; margin-top: 1.6rem; font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.rlink:hover { color: var(--accent); }

.rsec { padding-top: 2.4rem; border-top: 1px solid var(--rule); }
.rsec + .rsec { margin-top: 7.2rem; }
#work, #designs { scroll-margin-top: 7rem; }
.rsec-head { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 2.4rem; }
.page-content .rsec-title { margin: 0; font-size: 3.2rem; line-height: 1.1; font-weight: 400; letter-spacing: -0.035em; color: var(--ink); }
.pill { padding: .5rem 1.2rem; border: 1px solid var(--ink); border-radius: 99px; font-size: 1.3rem; color: var(--ink); transition: background .2s, color .2s; }
.pill:hover { background: var(--ink); color: var(--bg); }

/* project cards: soft panels, text on top, image below */
/* 3 columns, first project spans two: five projects fill two rows */
.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.wcard--wide { grid-column: span 2; }
.wcard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--surface); color: inherit; }
.wcard-top { display: flex; justify-content: space-between; gap: 1.2rem; padding: 1.8rem 1.8rem 1.4rem; }
.page-content .wcard-title { margin: 0; font-size: 1.8rem; line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); transition: color .2s; }
.wcard:hover .wcard-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.wcard-sub { margin: .2rem 0 0; font-size: 1.4rem; color: var(--body); }
.arrow {
  flex: none; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border: 1px solid var(--rule); border-radius: 50%;
  color: var(--ink); transition: transform .35s ease, background .2s, color .2s, border-color .2s;
}
.wcard:hover .arrow { transform: rotate(-45deg); background: var(--ink); border-color: var(--ink); color: var(--bg); }
.wcard-img { margin: auto 1.8rem 0; height: clamp(13rem, 14vw, 19rem); overflow: hidden; border-radius: 4px 4px 0 0; background: var(--ph); }
.wcard-img img, .ntile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.wcard:hover .wcard-img img, .ntile:hover .ntile-img img { transform: scale(1.03); }

/* pill tags (shared with project pages) */
.page-content .chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.chips li { padding: .35rem 1rem; border-radius: 99px; background: var(--surface); font-size: 1.1rem; line-height: 1.3; color: var(--body); }

/* large statement line */
.statement { max-width: 28ch; margin: 0; padding: 8rem 0; font-size: clamp(2.6rem, 3.4vw, 4rem); line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); }

/* work cards: no casing, image at its own proportions, text below */
.wkgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4.8rem 2rem; }
/* hero project: first card spans two columns, same image height as its row neighbour */
.wkgrid > .wk:first-child { grid-column: span 2; }
.wkgrid > .wk:first-child .wk-img { aspect-ratio: 8.2 / 3 !important; }
.page-content .wkgrid > .wk:first-child .wk-title { font-size: 3.4rem; }
.wkgrid--feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wkgrid--feat .wk-img { aspect-ratio: 2 / 1 !important; background: none; }
.wkgrid--feat > .wk:first-child .wk-img { aspect-ratio: 2000 / 1060 !important; }
.wkgrid--feat .wk-img img { object-fit: cover; }   /* covers are ~2:1, so this trims at most a sliver */
.page-content .wkgrid--feat > .wk:not(:first-child) .wk-title { font-size: 2.6rem; }
/* graphic & art: each piece at its own shape, one shared height, no empty frame */
.gart { display: flex; flex-wrap: wrap; gap: 3.2rem 2.4rem; align-items: flex-start; }
.ga { display: block; color: inherit; }
.ga-img { height: 40rem; overflow: hidden; background: var(--ph); }
.ga-img img { display: block; height: 100%; width: auto; transition: transform .6s ease; }
.ga:hover .ga-img img { transform: scale(1.02); }
.ga:hover .wk-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.page-content .gart .wk-title { margin-top: 1.2rem; font-size: 2rem; }
.gart .wk-sub { margin-top: .2rem; font-size: 1.4rem; }
@media (max-width: 1024px) {   /* share one row: widths follow each piece's shape */
  .gart { flex-wrap: nowrap; gap: 1.2rem; }
  .ga { flex: var(--r) 1 0; min-width: 0; }
  .ga-img { height: auto; }
  .ga-img img { width: 100%; height: auto; }
}
@media (max-width: 600px) {
  .page-content .gart .wk-title { font-size: 1.5rem; }
  .gart .wk-sub { display: none; }
}
.wkgrid4.wkgrid4--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wkgrid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2rem 2rem; align-items: start; }
.masonry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4rem 2rem; }
.wk { display: block; color: inherit; }
.wk-img { aspect-ratio: 4 / 3 !important; overflow: hidden; background: var(--ph); }   /* one size for every card */
.wk-img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .6s ease; }   /* whole image, never cropped */
.wk:hover .wk-img img { transform: scale(1.02); }
.page-content .wk-title { margin: 1.6rem 0 0; font-size: 2.6rem; line-height: 1.15; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.wk:hover .wk-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.wk-sub { margin: .4rem 0 0; font-size: 1.5rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* always one line */
.page-content .wkgrid4 .wk-title, .page-content .masonry .wk-title { font-size: 2rem; }
/* design cards: title + one quiet line only */
.wkgrid4 .chips, .masonry .chips { display: none !important; }
.wkgrid4 .wk-sub, .masonry .wk-sub { margin-top: .2rem; font-size: 1.4rem; }
.page-content .wkgrid4 .wk-title, .page-content .masonry .wk-title { margin-top: 1.2rem; }

/* design cards: same panel as projects, smaller */
.dgrid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
/* Designs page: varied sizes, rows of 3 · 4 · 3 (first and last cards span two columns) */
.dgrid3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.dgrid3 > .dcard:first-child, .dgrid3 > .dcard:last-child { grid-column: span 2; }
.dgrid3 > .dcard:first-child .wcard-img, .dgrid3 > .dcard:last-child .wcard-img { aspect-ratio: auto; height: 100%; min-height: 18rem; }
.dcard .wcard-img { height: auto; aspect-ratio: 4 / 3; }
.dcard .page-content .wcard-title, .page-content .dcard .wcard-title { font-size: 1.6rem; }
.dcard .chips li { font-size: 1rem; }

/* About page */
.about-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; padding-bottom: 2rem; }
.about-photo { aspect-ratio: 4 / 5; max-height: 72vh; overflow: hidden; border-radius: var(--radius); background: var(--ph); }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.about-bio p { margin: 0 0 1.6rem; max-width: 40ch; font-size: 2.4rem; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
.about-bio .about-seek { font-size: 1.6rem; color: var(--muted); }
.about-bio .about-links { display: flex; flex-wrap: wrap; gap: .8rem; font-size: inherit; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.way { padding: 2rem; border-radius: var(--radius); background: var(--surface); }
.way-n { font-size: 1.2rem; color: var(--muted); }
.page-content .way-t { margin: .6rem 0 .8rem; font-size: 2rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.way p { margin: 0; color: var(--body); }
.about-intro + .rsec, .rsec + .rsec { margin-top: 6.4rem; }
.page-content .xlist { margin: 0; padding: 0; list-style: none; }
.xlist > li { border-bottom: 1px solid var(--rule); }
.xlist > li:first-child { border-top: 1px solid var(--rule); }
.xlist .xrow, .xlist > li > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 21rem; gap: 1.6rem; padding: 1.6rem 0; color: inherit; }
.xlist > li > a:hover .x-role { text-decoration: underline; text-underline-offset: .2em; }
.x-role { color: var(--ink); font-weight: 500; }
.x-org { color: var(--body); }
.x-date { color: var(--muted); white-space: nowrap; text-align: right; }
.x-line { grid-column: 2 / -1; margin: -.8rem 0 0; color: var(--muted); font-size: 1.5rem; }
.x-line b { color: var(--ink); font-weight: 500; }
a.x-role:hover { text-decoration: underline; text-underline-offset: .2em; }
.about-two { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem; }
.page-content .skills-t { margin: 0; font-size: 1.4rem; font-weight: 500; color: var(--muted); }
.page-content .skills-v { margin: .6rem 0 0; color: var(--body); }
.edu { display: flex; flex-direction: column; gap: .2rem; margin: 0; }

/* designs: numbered tiles */
.ngrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
.ntile { display: block; color: inherit; }
.ntile-img { aspect-ratio: 4 / 4.4; overflow: hidden; border-radius: var(--radius); background: var(--ph); }
.ntile-cap { margin: 1rem 0 0; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.ntile:hover .ntile-cap { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ===== PAGE (Cargo .page / .page-layout / .page-content) ===== */
main.page { display: block; }
.page-content {
  max-width: var(--max-w); margin: 0 auto; padding: 5rem;
  font-size: var(--s-16); line-height: var(--lh-16); color: var(--body);
  overflow-wrap: break-word;
}

/* ===== TEXT STYLES (site stylesheet) ===== */
.page-content h1 { margin: 0; font-size: var(--s-24); line-height: var(--lh-24); font-weight: 400; color: var(--ink); }
.page-content h2 { margin: 0; font-size: var(--s-24); line-height: var(--lh-24); font-weight: 600; color: var(--muted); }
.page-content h3 { margin: 0; font-size: var(--s-16); line-height: var(--lh-16); font-weight: 700; }
.page-content b { font-weight: 700; }
.page-content hr { border: 0; height: 1px; background: var(--rule); margin: 1rem 0; }
.page-content ul { margin: 0; padding: 0 0 0 2em; }
.page-content ol { margin: 0; padding: 0 0 0 2.5em; }
.mono {   /* Cargo text style "style-4": tag lines */
  display: block; font-family: var(--mono); font-size: var(--tag); font-weight: 400;
  line-height: var(--lh-tag); letter-spacing: .02em; color: var(--body);
}
.nowrap { white-space: nowrap; }
.icon { display: inline-block; font-size: .7em; line-height: 1; vertical-align: .12em; margin-right: .25em; }

/* Size classes (converted from Cargo's per-element --font-scale, snapped to the scale) */
.page-content .s-16 { font-size: var(--s-16); line-height: var(--lh-16); }
.page-content .s-20 { font-size: var(--s-20); line-height: var(--lh-20); }
.page-content .s-24 { font-size: var(--s-24); line-height: var(--lh-24); }
.page-content .s-32 { font-size: var(--s-32); line-height: var(--lh-32); }
.page-content .s-48 { font-size: var(--s-48); line-height: var(--lh-48); }
.page-content .s-72 { font-size: var(--s-72); line-height: var(--lh-72); }
.page-content .muted { color: var(--muted); }
/* headings are always ink and regular weight unless explicitly gray; text in columns
   inside Cargo's gray section wrappers reads as body text */
.page-content :is(h1, .s-24, .s-32, .s-48, .s-72):not(.muted) { color: var(--ink); }
.page-content :is(.s-24, .s-32, .s-48, .s-72):not(h2),
.page-content :is(.s-24, .s-32, .s-48, .s-72):not(h2) b { font-weight: 400; }
.page-content .muted .col { color: var(--body); }
#homepage .cols { margin-bottom: 4rem; }
/* project cards: identical width and shape regardless of each image's own size */
#homepage .cols .media { width: 100% !important; }
#homepage .cols .media .ph { aspect-ratio: 2 / 1 !important; }
.media .ph { border-radius: 0 !important; }
/* design tiles: four equal columns, one shape */
#homepage .g-justify { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#homepage .g-justify > .media { width: 100%; }
#homepage .g-justify .ph { aspect-ratio: 2 / 3 !important; }
@media (max-width: 768px) { #homepage .g-justify { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== COLUMNS ===== */
.cols { display: flex; gap: var(--gap, 1rem); align-items: flex-start; }
.col { flex: var(--span, 1) 1 0; min-width: 0; }

/* ===== MEDIA ===== */
.media { margin: 0; width: 100%; display: inline-block; vertical-align: top; }
.media .ph { display: block; width: 100%; background: var(--ph); overflow: hidden; background-clip: padding-box; }
.media .ph img, .media .ph video { width: 100%; height: 100%; object-fit: cover; }
.media figcaption {
  margin-top: .5em; font-family: var(--caption-font); font-size: var(--s-12); font-weight: 500;
  line-height: var(--lh-12); color: var(--ink);
}
/* card captions (tag line + title), e.g. the Designs tiles */
.media figcaption:has(.mono) { margin-top: .8em; font-size: var(--s-20); line-height: var(--lh-20); font-weight: 400; }
.media figcaption .mono { margin-bottom: .2em; }
.media figcaption a { text-decoration: underline; }
[style*="text-align: center"] > .media { margin-inline: auto; }
.embed { aspect-ratio: 16 / 9; background: var(--ph); }
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== GALLERIES ===== */
.g-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1rem; align-items: start; }
.g-columnized { columns: var(--cols, 3); column-gap: 1rem; }
.g-columnized > .media { break-inside: avoid; margin-bottom: 1rem; }
.g-justify { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.g-justify > .media { flex: var(--ar) 1 calc(var(--ar) * 20rem); width: auto; }
.g-freeform { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 2rem; }
.g-grid figcaption, .g-columnized figcaption, .g-justify figcaption { margin-bottom: 2em; }

/* ===== SLIDESHOW (Cargo slideshow-nav buttons) ===== */
.slideshow { position: relative; }
.ss-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ss-track::-webkit-scrollbar { display: none; }
.ss-track > .media { flex: 0 0 100%; scroll-snap-align: start; }
.ss-prev, .ss-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 30px; height: 30px; padding: 0; border: 0; cursor: pointer;
  background: rgba(87, 87, 87, .35); color: rgba(255, 255, 255, .9); font: 16px/1 var(--font);
}
.ss-prev { left: 15px; }
.ss-next { right: 15px; }

/* ===== RESPONSIVE ===== */
/* tablet: menu moves to the top, content goes full width */
@media (max-width: 768px) {
  .topbar-in { padding: 1.4rem 2.4rem; }
  .topbar nav { gap: 2.4rem; }
  .ngrid, .dgrid4, .dgrid3, .ways, .wkgrid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wkgrid, .masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wkgrid > .wk:first-child .wk-img { aspect-ratio: 8.4 / 3 !important; }
  .wkgrid--feat > .wk:first-child .wk-img { aspect-ratio: 2000 / 1060 !important; }
  .wkgrid--feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dgrid3 > .dcard:last-child { grid-column: span 2; }
  .dgrid3 > .dcard:first-child { grid-column: span 2; }
  .about-intro, .about-two, .skills { grid-template-columns: 1fr; }
  .about-photo { max-width: 40rem; }
  .skills { gap: 2.4rem; }
  .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rrow { grid-template-columns: 1fr; }
  .stats, .features, .page-content .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  main.page { min-height: 0; }
  .page-content, #migrant-compass .page-content, #information .page-content {
    width: 100%; padding: 2.4rem 2.4rem 5rem; border: 0;
  }
  :root { --s-72: clamp(4.2rem, 7vw, 5.6rem); --s-48: 4rem; --s-32: 2.8rem; }
  .g-grid:not([style*="--cols:1"]):not([style*="--cols:2"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-columnized { columns: 2; }
  .g-justify > .media { flex-basis: calc(var(--ar) * 14rem); }
  .nowrap { white-space: normal; }
}
/* phone: columns stack, short info columns (TIME / TOOLS / ROLE) sit two per row */
@media (max-width: 600px) {
  .page-content { padding-left: 1.6rem; padding-right: 1.6rem; }
  .topbar-in { flex-wrap: wrap; padding: 1.4rem 1.6rem; }
  .menu-toggle { display: block; }
  .topbar nav { display: none; flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .topbar nav a:first-child, .topbar .nav-cta { margin-left: 0; }
  .topbar .nav-cta { margin-top: 1rem; text-align: center; }
  .topbar nav.open { display: flex; }
  .topbar nav a { padding: 1.2rem 0; border-top: 1px solid var(--rule); }
  .topbar nav a::after { display: none; }
  .topbar nav a[aria-current="page"] { color: var(--accent); }
  .wgrid, .dgrid3, .ways, .wkgrid { grid-template-columns: 1fr; }
  .wkgrid > .wk:first-child { grid-column: auto; }
  .wkgrid > .wk:first-child .wk-img { aspect-ratio: 4 / 3 !important; }
  .wkgrid--feat > .wk:first-child .wk-img, .wkgrid--feat .wk-img { aspect-ratio: 2 / 1 !important; }
  .masonry { grid-template-columns: 1fr; }
  .wkgrid4 .wk-sub { font-size: 1.3rem; }
  .page-content .wkgrid4 .wk-title { font-size: 1.9rem; }
  .xlist > li > a, .xlist .xrow { grid-template-columns: 1fr; gap: .2rem; }
  .x-date { text-align: left; }
  .x-line { grid-column: auto; margin: .4rem 0 0; }
  .wcard--wide { grid-column: auto; }
  .wcard-img { height: auto; aspect-ratio: 16 / 10; }
  .statement { padding: 5.6rem 0; }
  :root { --s-72: 4.2rem; --lh-72: 1.1; --s-48: 3.4rem; --lh-48: 1.15; --s-32: 2.6rem; --s-24: 2.2rem; }
  .cols { flex-direction: column; gap: 1.6rem; }
  .col { width: 100%; }
  .cols:has(> .col:nth-child(3)):not(:has(> .col[style])) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media { width: 100% !important; }
  .g-grid:not([style*="--cols:1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Graphic & Art cards: home and Graphic & Art page */
.gfeat { display: grid; grid-template-columns: 1.91fr .75fr .75fr; gap: 2rem; margin-top: 2.4rem; }
.gfeat--tall { grid-template-columns: 1.91fr .667fr .667fr; }
.gfeat--tall .gcard:not(.gcard--feat) .gcard-img { aspect-ratio: 2 / 3; }
.gcard { display: block; min-width: 0; color: inherit; }
.gcard--feat .gcard-img { aspect-ratio: 2000 / 1047 !important; }
.gcard-img { aspect-ratio: 3 / 4; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 1.2rem; border-radius: var(--radius); background: var(--surface); }
.gcard-img > img, .gset img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 8px 20px -12px rgba(17,17,17,.4); transition: transform .6s ease; }
.gset { display: flex; gap: 1.2rem; height: 100%; align-items: center; justify-content: center; }
.gset img { height: 88%; min-width: 0; }
.gcard:hover .gcard-img img { transform: scale(1.02); }
.gcard .bn-cap { display: block; margin-top: 1.2rem; }
.gcard .bn-n { display: block; margin-bottom: .2rem; }
.page-content .gcard .wk-title { margin: 0; font-size: 1.8rem; }
.page-content .gcard--feat .wk-title { font-size: 2.4rem; }
.gcard .wk-sub { margin: .2rem 0 0; font-size: 1.4rem; color: var(--muted); }
.gcard:hover .wk-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.more-link { font-size: 1.4rem; color: var(--ink); text-decoration: none; }
.more-link span { display: inline-block; margin-left: .4rem; transition: transform .2s; }
.more-link:hover span { transform: translateX(.4rem); }
@media (max-width: 600px) {
  .gfeat, .gfeat--tall { grid-template-columns: 1fr 1fr; gap: 2.4rem 1.2rem; }
  .gcard--feat { grid-column: 1 / -1; }
  .gcard-img { padding: .8rem; }
  .page-content .gcard .wk-title { font-size: 1.6rem; } .page-content .gcard--feat .wk-title { font-size: 2rem; }
}

/* Graphic & Art page: project rows */
.gproj-list { margin-top: 4rem; border-top: 1px solid var(--ink); }
.gproj { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 4rem; padding: 4.8rem 0; border-bottom: 1px solid var(--rule); color: inherit; }
.gproj-cover { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 2.4rem; border-radius: var(--radius); background: var(--surface); }
.gproj-cover--bleed { padding: 0; background: none; overflow: hidden; }
.gproj-cover--bleed img { width: 100%; height: 100%; object-fit: cover; box-shadow: none; }
.gproj-cover img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 24px -14px rgba(17,17,17,.45); transition: transform .6s ease; }
.gproj:hover .gproj-cover img { transform: scale(1.015); }
.gproj-txt { display: flex; flex-direction: column; }
.gproj-n { font-size: 1.3rem; color: var(--muted); }
.page-content .gproj-t { margin: .4rem 0 .8rem; font-size: 3.2rem; line-height: 1.1; font-weight: 400; letter-spacing: -0.03em; color: var(--ink); }
.gproj-sub { margin: 0 0 1.6rem; font-size: 1.6rem; color: var(--muted); }
.gproj-d { margin: 0 0 2rem; font-size: 1.6rem; line-height: 1.5; color: var(--body); }
.gproj-meta { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.6rem; margin: 0 0 2rem; font-size: 1.4rem; }
.gproj-meta dt { color: var(--muted); } .gproj-meta dd { margin: 0; color: var(--ink); }
.gproj-strip { display: grid; gap: .8rem; margin-top: auto; align-items: start; }
.gproj-strip img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--surface); }
.gproj-go { margin-top: 2rem; font-size: 1.4rem; color: var(--ink); }
.gproj:hover .gproj-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (max-width: 768px) { .gproj { grid-template-columns: 1fr; gap: 2.4rem; padding: 3.2rem 0; } .page-content .gproj-t { font-size: 2.6rem; } }
@media (max-width: 768px) {
  .gproj-list--stack .gproj { grid-template-columns: 1fr; }
  .gproj-list--stack .gproj-txt { display: block; }
  .gproj-list--stack .gproj-meta { margin-top: 0; }
  .gproj-list--stack .gproj-strip { margin-top: 1.6rem; }
}
/* Home UX cards: same rounded corners as the rest of the site */
.wk .wk-img { border-radius: var(--radius); }