/* Recreation of www.yeagyeong.com (Wix) — tokens measured from the live site at 1280px. */
:root {
  /* Original uses uploaded SF Pro Display files (Apple licence: not web-redistributable).
     On Apple devices -apple-system resolves to the same SF Pro; elsewhere Inter is the closest match. */
  --font: -apple-system, "SF Pro Display", BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --w-medium: 500;   /* wfont 5499e3_723f… = SF Pro Display Medium (headings, nav) */
  --w-regular: 400;  /* wfont 7f6a53_9f07… = SF Pro Display Regular (body) */
  --w-bold: 700;     /* wfont 5499e3_8190… = SF Pro Display Bold */
  --w-black: 800;    /* wfont 7af145_87e5… = SF Pro Display Black (stat numerals) */

  --bg: #333333;          /* page / section */
  --bg-deep: #111111;     /* home hero panel */
  --bg-raised: #444444;   /* About alt sections */
  --footer: #575757;      /* Wix: rgba(68,68,68,.9) over the white page background */
  --text: #ffffff;
  --text-soft: #f9f9fc;
  --text-body: #cccccc;
  --text-muted: #888888;  /* active nav item */
  --text-footer: #ececec;
  --ink: #111111;         /* text on white cards */
  --btn-ink: #2a2a2a;
  --accent: #f8e3cc;      /* "Based in LA." / stat labels */
  --card: #ffffff;

  --wrap: 1030px;
  --header-h: 95px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--w-medium); }
ul { margin: 0; padding-left: 1.2em; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }

/* ---------- type scale (Wix theme) ---------- */
.eyebrow { font-size: 12px; line-height: 14.4px; letter-spacing: 1.2px; color: var(--text-soft); }
/* left edge of the Wix grid at desktop: 121px @1280 (= 50vw - 519px) */
:root { --edge: max(16px, calc(50vw - 519px)); }
.display { font-size: 56px; line-height: 1; letter-spacing: -0.56px; font-weight: var(--w-medium); }
.h-card { font-size: 44px; line-height: 1.1; font-weight: var(--w-medium); }
.h-section { font-size: 32px; line-height: 1.2; font-weight: var(--w-medium); }
.h-sub { font-size: 24px; line-height: 1.2; font-weight: var(--w-medium); }
.lead { font-size: 18px; line-height: 1.2; letter-spacing: 1.8px; color: var(--text-soft); }
.body { font-size: 16px; line-height: 1.6; color: var(--text-body); }
.body + .body { margin-top: 6px; }
.intro .body + .body, .perspective .body + .body:not(.gap) { margin-top: 0; }
.link-u { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--bg);
}
.site-header .bar {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  width: min(1007px, 100% - 32px); margin-left: var(--edge);
}
.logo { text-decoration: none; display: block; }
.logo .name { display: block; font-size: 24px; letter-spacing: 3.6px; font-weight: var(--w-medium); line-height: 29px; }
.logo .tag { display: block; font-size: 12px; letter-spacing: 1.2px; line-height: 15px; color: var(--text-soft); margin-top: 1px; padding-left: 1px; }
.nav { display: flex; align-items: center; gap: 29px; margin-left: auto; margin-right: 102px; }
.nav a { text-decoration: none; font-size: 16px; line-height: 24px; font-weight: var(--w-medium); transition: color .2s; }
.nav a:hover { color: var(--text-muted); }
.nav a[aria-current="page"] { color: var(--text-muted); }
/* Portfolio dropdown (live site: #333 panel, 252px, 31px rows, centred under the item) */
.has-sub { position: relative; }
.has-sub .sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 252px; padding-top: 13px;
  visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; z-index: 60;
}
.has-sub .sub::before { content: ""; position: absolute; inset: 13px 0 0; background: var(--bg); z-index: -1; }
.has-sub:hover .sub, .has-sub:focus-within .sub { visibility: visible; opacity: 1; transition-delay: 0s; }
.has-sub .sub a { display: block; height: 31px; line-height: 31px; text-align: center; color: #fff; white-space: nowrap; }
.has-sub .sub a:hover { color: var(--text-muted); }
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 144px; height: 39px; border-radius: 4px; background: #fff; color: var(--btn-ink);
  font-size: 16px; font-weight: var(--w-medium); text-decoration: none; transition: background .2s, color .2s;
}
.btn-cta:hover { background: #e6e6e6; }
.menu-btn { display: none; }
.drawer { display: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--footer); padding: 20px 16px 22px; min-height: 145px; box-sizing: border-box; text-align: center; color: var(--text-footer); } /* live: 145px desktop, 171 (x --u) mobile */
.site-footer p { font-size: 14px; line-height: 16.8px; letter-spacing: 1.4px; }
.site-footer p + p { margin-top: 8px; }
.social { display: flex; justify-content: center; gap: 17px; margin-top: 8px; }
.social a { display: block; width: 36px; height: 36px; transition: opacity .2s; }
.social a:hover { opacity: .7; }
/* Wix recolours the (dark) social icon files to the footer text colour; same colour + same circle size for all three */
.social img { filter: brightness(0) invert(1); opacity: .92; }
.social img.gh { transform: scale(1.11); }

/* ---------- reveal (Wix entrance animations) ---------- */
/* hidden only while the reveal script runs (html.js-reveal, set in <head> with a failsafe): without JS
   the content is simply visible; with reduced motion there is no movement */
.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* =========================================================
   HOME
   ========================================================= */
.hero { display: grid; grid-template-columns: 50% 50%; min-height: 607px; }
.hero-left { background: var(--bg-deep); display: flex; align-items: flex-start; padding: 158px 24px 0 var(--edge); }
.hero-left .inner { width: 460px; max-width: 100%; }
.hero-left .eyebrow { margin-bottom: 2px; }
.hero-left .display { margin-bottom: 4px; }
.hero-right { display: flex; align-items: flex-start; padding: 113px 16px 0 100px; }
.hero-right .inner { width: 430px; }
.avatar { width: 144px; height: 144px; border-radius: 50%; object-fit: cover; margin-bottom: 11px; }
.hero-right .body { color: var(--text-soft); }
.hero-right .body + .body { margin-top: 6px; color: #fafafa; }

.work { padding: 80px 0 75px; }
.case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 494px); align-items: center; gap: 40px;
  width: min(1086px, 100% - 32px); margin-left: var(--edge); min-height: 346px;
}
.case + .case { margin-top: 144px; }
.case .eyebrow { color: #fff; margin-bottom: 5px; }
.case .h-card a { text-decoration: none; }
.case .meta { font-size: 16px; line-height: 1.5; color: var(--text-body); margin-top: 9px; max-width: 470px; }
.case.c3 { margin-top: 171px; grid-template-columns: minmax(0, 1fr) minmax(0, 477px); padding-right: 8px; }
.case.c3 .shot { aspect-ratio: 477 / 337; }
.case .meta + .meta { margin-top: 12px; }
.case .cta { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: var(--w-medium); text-decoration: underline; text-underline-offset: 2px; }
.case .shot { display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 494 / 346; }
.case .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.case .shot:hover img { transform: scale(1.03); }

/* =========================================================
   ABOUT
   ========================================================= */
.intro { padding: 84px 0 104px; }
.intro .grid { display: grid; grid-template-columns: 400px 1fr; gap: 78px; width: min(980px, 100% - 32px); margin-inline: auto; }
.intro .photo { width: 400px; height: 435px; object-fit: cover; object-position: 50% 30%; }
.intro .eyebrow { margin: 0 0 8px; }
.intro .h-section { margin-bottom: 11px; }
.intro .h-sub { margin: 12px 0 10px; }
.intro .bullets { list-style: none; padding: 0; font-size: 16px; line-height: 28.8px; color: var(--text-body); }

.perspective { background: var(--bg-raised); padding: 101px 0; }
.perspective .card { background: var(--bg); width: min(980px, 100% - 32px); margin-inline: auto; display: grid; grid-template-columns: 1fr 400px; gap: 60px; padding: 64px 35px 67px 22px; align-items: start; }
.perspective .eyebrow { margin: 0 0 8px; color: #fafafa; }
.perspective .h-section { color: var(--text-soft); margin-bottom: 11px; }
.perspective .body { color: #fff; max-width: 466px; }
.perspective .body.gap { margin-top: 16px; }
.perspective .body a { color: #fff; }
.perspective .pic { width: 400px; height: 353px; object-fit: cover; }

.recognition { background: var(--bg-raised); padding: 81px 0 63px; }
.center-head { text-align: center; }
.center-head .eyebrow { color: #fff; margin-bottom: 8px; }
.recognition .cards { display: grid; grid-template-columns: repeat(2, 471px); justify-content: center; column-gap: 97px; row-gap: 123px; margin-top: 57px; }
.rcard { background: var(--card); color: var(--ink); border-radius: 4px; padding: 17px 19px 22px; min-height: 180px; }
.rcard .year { font-size: 24px; line-height: 28.8px; font-weight: var(--w-medium); margin-bottom: 11px; }
.rcard p { font-size: 16px; line-height: 25.6px; }
.rcard a { color: var(--ink); }
.rcard .small { font-size: 14px; line-height: 22.4px; }
.rcard .tight { font-size: 15px; line-height: 24px; }

.skills { padding: 82px 0 86px; }
.skills .intro-p { max-width: 507px; margin: 12px auto 0; text-align: center; color: #ececec; }
.skills .cols { display: grid; grid-template-columns: repeat(3, 1fr); width: min(1170px, 100% - 32px); margin: 57px auto 0; padding-left: 20px; }
.skills .col { padding: 16px 0 0 134px; min-height: 300px; }
.skills .col + .col { border-left: 1px solid #555; padding-left: 130px; }
.skills h3 { font-size: 24px; line-height: 28.8px; font-weight: var(--w-bold); margin-bottom: 10px; margin-left: -20px; }
.skills ul { font-size: 16px; line-height: 25.6px; color: var(--text-body); max-width: 128px; }
.skills .tools li { line-height: 25.6px; }
.skills .outro { max-width: 470px; margin: 0 auto; text-align: center; color: #ececec; }
.skills { padding-bottom: 86px; }

.origin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 621px; }
.origin .left { display: flex; align-items: flex-start; justify-content: flex-end; padding: 170px 76px 0 16px; }
.origin .left .inner { width: 100%; max-width: 440px; }
.origin .big { font-size: 32px; line-height: 40px; font-weight: var(--w-bold); }
.origin .big .acc { color: var(--accent); }
.origin .left .body:first-of-type { margin-top: 22px; }
.origin .right { padding: 81px 16px 0 70px; }
.origin .map { width: 492px; height: 291px; object-fit: cover; border-radius: 4px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; margin: 40px 0 0 22px; }
.stat { text-align: center; padding: 8px 0 12px; }
.stat + .stat { border-left: 1px solid #555; }
.stat .num { font-size: 40px; line-height: 64px; font-weight: var(--w-black); font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 16px; line-height: 25.6px; color: var(--accent); margin-top: 10px; }

.gallery { padding: 82px 0 86px; }
/* About photo slider: same as the live Wix "slider" gallery — one 1101x620 photo per view, 5px gap,
   centre-cropped, scroll-snap (swipe/trackpad), no autoplay, arrows hidden at either end */
.slider { position: relative; width: min(1101px, 100% - 32px); margin-inline: auto; aspect-ratio: 1101 / 620; }
.slides { display: flex; gap: 5px; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slides:focus-visible { outline: 2px solid #4163ed; outline-offset: 4px; }
.slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.slider button { position: absolute; top: 50%; transform: translateY(-50%); width: 23px; height: 39px; border: 0; background: none; padding: 0; cursor: pointer; fill: #fff; line-height: 0; }
.slider button[hidden] { display: none; }
.slider button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.slider .prev { left: 25px; } .slider .next { right: 25px; }
.slider .flip { display: block; transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .slides { scroll-behavior: auto; } }

/* =========================================================
   PROJECT (locked / protected shell)
   ========================================================= */
.locked { min-height: calc(100vh - var(--header-h) - 145px); display: grid; place-items: center; padding: 80px 16px; text-align: center; }
.locked .box { max-width: 520px; }
.locked .h-section { margin: 10px 0 14px; }
.locked .status { display: inline-block; margin-top: 22px; padding: 6px 12px; border: 1px dashed #777; border-radius: 4px; font-size: 13px; letter-spacing: .5px; color: var(--text-body); }
.locked form { margin-top: 28px; display: flex; gap: 8px; justify-content: center; }
.locked input { height: 39px; width: 220px; border-radius: 4px; border: 1px solid #666; background: #222; color: #fff; padding: 0 12px; font: inherit; }
.locked button { height: 39px; padding: 0 18px; border: 0; border-radius: 4px; background: #fff; color: var(--btn-ink); font: inherit; font-weight: var(--w-medium); cursor: pointer; }
.locked .err { color: #ff9b9b; margin-top: 12px; font-size: 14px; }

/* =========================================================
   PROJECT CASE STUDY (image-led body)
   ========================================================= */
.case-head { width: min(1080px, 100% - 32px); margin: 0 auto; padding: 96px 0 56px; }
.case-head .eyebrow { margin-bottom: 10px; }
.draft-note { display: inline-block; margin-top: 20px; padding: 6px 12px; border: 1px dashed #888; border-radius: 4px; font-size: 13px; color: var(--text-body); }
.case-body { width: min(1080px, 100% - 32px); margin: 0 auto; padding-bottom: 96px; display: grid; gap: 40px; }
.case-body figure { margin: 0; }
.case-body img { width: 100%; height: auto; border-radius: 4px; background: #fff; }
@media (max-width: 767px) {
  .case-head { padding: calc(32 * var(--u)) 0 calc(24 * var(--u)); width: calc(280 * var(--u)); }
  .case-body { width: 100%; gap: calc(16 * var(--u)); padding-bottom: calc(40 * var(--u)); }
  .case-body img { border-radius: 0; }
}

/* =========================================================
   GENERATED WIX-LAYOUT PAGES (scripts/render_layout.mjs)
   ========================================================= */
.wx { position: relative; min-height: var(--sh); overflow: hidden; } /* grows with content: see fitSections() in site.js */
.wx .wi { position: absolute; left: calc(50% + var(--x)); top: var(--y); width: var(--w); height: var(--h); }
.wx .wi.full { left: 0; width: 100%; }
.wx .d-hide, .wx.d-hide { display: none; }
.wx .wbg { position: absolute; inset: 0; background-size: cover; }
.wx .wt { height: auto; }
.wx .wt > * { margin: 0; font-size: var(--fs); line-height: var(--lh, normal); letter-spacing: var(--ls, 0); text-align: var(--ta, left); font-weight: 400; }
.wx .wt h1, .wx .wt h2, .wx .wt h3, .wx .wt h4, .wx .wt h5, .wx .wt h6 { font-weight: 400; }
.wx .wt ul, .wx .wt ol { padding-left: 1.3em; }
.wx .wt a { color: inherit; text-decoration: none; } /* underline, when present, is on an inner span */
.wx .wt li::marker { color: var(--marker, currentColor); }
.wx .wpic a { display: block; height: 100%; }
.wx .wsvg svg { display: block; width: 100%; height: 100%; overflow: visible; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* thumbnail-controlled gallery with a fixed description (render_layout thumbGallery) */
.wx.wx-tg { height: auto; min-height: 0; padding: 65px 0 96px; }
.tg { width: min(980px, 100% - 48px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.tg .wt > * { margin: 0; font-size: var(--fs); line-height: var(--lh, normal); letter-spacing: var(--ls, 0); text-align: var(--ta, left); font-weight: 400; }
.tg .wt + .wt { margin-top: 12px; }
.tg-frame { position: relative; aspect-ratio: 5 / 4; background: inherit; }
.tg-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.tg-frame > img[hidden] { display: none; }
.tg-prev, .tg-next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); color: #111; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); }
.tg-prev { left: 12px; } .tg-next { right: 12px; }
.tg-prev[hidden], .tg-next[hidden] { display: none; }
.tg-prev:hover, .tg-next:hover { background: #fff; }
.tg-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 90px)); gap: 18px; margin-top: 20px; }
.tg-thumb { aspect-ratio: 1; padding: 0; border: 0; background: #fff; cursor: pointer; opacity: 0.55; transition: opacity .2s; outline-offset: 3px; }
.tg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-thumb:hover { opacity: 0.85; }
.tg-thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #111; }
.tg-prev:focus-visible, .tg-next:focus-visible, .tg-thumb:focus-visible { outline: 3px solid #1a5fd0; outline-offset: 3px; }
.tg-media > .wt { margin-top: 20px; }
@media (max-width: 767px) {
  .wx.wx-tg { padding: calc(36 * var(--u)) 0 calc(40 * var(--u)); }
  .tg { width: calc(280 * var(--u)); grid-template-columns: minmax(0, 1fr); row-gap: calc(24 * var(--u)); }
  .tg .wt > * { font-size: calc(var(--fsm, 16) * var(--u)); line-height: calc(var(--lhm) * var(--u)); letter-spacing: calc(var(--lsm, 0) * var(--u)); text-align: var(--tam, left); }
  .tg-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
  .tg-prev, .tg-next { width: 44px; height: 44px; }
}
.wx .wv-d, .wx .wv-m { width: 100%; height: 100%; }
.wx .wv-m { display: none; }
@media (max-width: 767px) { .wx .wv-d { display: none; } .wx .wv-m { display: block; } }
.wx .wvideo { overflow: hidden; }
.wx .wvideo video { display: block; width: 100%; height: 100%; }
.wx .wembed iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
:is(.wx, .cs-gal) .wgal-track { position: relative; width: 100%; height: 100%; }
:is(.wx, .cs-gal) .wgal-track img { position: absolute; inset: 0; width: 100%; height: 100%; }
:is(.wx, .cs-gal) .wgal-track img[hidden] { display: none; }
/* slides sharing a left panel: every slide aligned on the panel edge, slide 1's panel kept on top */
:is(.wx, .cs-gal) .wgal-fixed { overflow: hidden; }
:is(.wx, .cs-gal) .wgal-fixed > img { inset: 0 auto 0 auto; left: var(--gl); width: var(--gw); height: 100%; max-width: none; object-fit: fill; }
:is(.wx, .cs-gal) .wgal-panel { position: absolute; top: 0; bottom: 0; left: var(--pl); width: var(--pw); background-repeat: no-repeat; background-position: 0 0; background-size: var(--bs) 100%; pointer-events: none; }
:is(.wx, .cs-gal) .wgal-fixed .wgal-prev, :is(.wx, .cs-gal) .wgal-fixed .wgal-next, :is(.wx, .cs-gal) .wgal-fixed .wgal-count { z-index: 1; }
@media (max-width: 767px) {
  :is(.wx, .cs-gal) .wgal-fixed > img { left: var(--glm, var(--gl)); width: var(--gwm, var(--gw)); }
  :is(.wx, .cs-gal) .wgal-panel { left: var(--plm, var(--pl)); width: var(--pwm, var(--pw)); }
}
:is(.wx, .cs-gal) .wgal-prev, :is(.wx, .cs-gal) .wgal-next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
:is(.wx, .cs-gal) .wgal-prev { left: 8px; } :is(.wx, .cs-gal) .wgal-next { right: 8px; }
:is(.wx, .cs-gal) .wgal-count { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; }
.wx .wimg { position: relative; width: 100%; height: 100%; overflow: hidden; }
.wx .wbtn { display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: var(--fs); transition: opacity .2s; }
.wx .wbtn:hover { opacity: .85; }
.wx .wmissing { width: 100%; height: 100%; display: grid; place-items: center; border: 1px dashed #f99; color: #f99; font-size: 12px; }
@media (max-width: 767px) {
  .wx { min-height: calc(var(--shm) * var(--u)); }
  .wx .wi { left: calc(var(--xm) * var(--u)); top: calc(var(--ym) * var(--u)); width: calc(var(--wm) * var(--u)); height: calc(var(--hm) * var(--u)); }
  .wx .wi.full { left: calc(var(--xm) * var(--u)); width: calc(var(--wm) * var(--u)); }
  .wx .wi.d-hide { display: block; }
  .wx .wi.m-hide, .wx.m-hide { display: none; }
  .wx.d-hide { display: block; }
  .wx .wt { height: auto; }
  .wx .wt > * { font-size: calc(var(--fsm, 16) * var(--u)); line-height: calc(var(--lhm) * var(--u)); letter-spacing: calc(var(--lsm, 0) * var(--u)); text-align: var(--tam, left); }
  .wx .wbtn { font-size: calc(var(--fsm, 16) * var(--u)); }
}

/* About desktop: section heights measured on the live page at 1280px */
@media (min-width: 768px) {
  .intro { box-sizing: border-box; min-height: 623px; padding-top: 84px; padding-bottom: 0; }
  .perspective { box-sizing: border-box; min-height: 690px; padding: 101px 0 0; }
  .perspective .card { box-sizing: border-box; min-height: 488px; padding-top: 64px; padding-bottom: 0; }
  .recognition { box-sizing: border-box; min-height: 1057px; padding-top: 81px; }
  .skills { position: relative; box-sizing: border-box; min-height: 645px; padding-top: 82px; }
  .skills .cols { margin-top: 30px; }
  .skills ul { max-width: 140px; }
  .skills .col { min-height: 300px; }
  .skills .outro { position: absolute; left: 0; right: 0; top: 548px; }
  .origin { min-height: 621px; }
  /* live gallery keeps 1101x620 at every desktop width and is clipped by the viewport */
  .gallery { overflow: hidden; }
  .slider { width: 1086px; height: 620px; aspect-ratio: auto; max-width: none; margin-left: calc(50% - 543px); }
}

/* inline font switches recorded by the extractor (data-wf = Wix font id); commercial faces -> fallbacks */
.wx [data-wf^="5499e3_723fcf"] { font-family: var(--font); font-weight: 500; font-style: normal; }
.wx [data-wf^="5499e3_819021"] { font-family: var(--font); font-weight: 700; font-style: normal; }
.wx [data-wf^="7f6a53_9f075c"] { font-family: var(--font); font-weight: 400; font-style: normal; }
.wx [data-wf^="7af145_87e5fe"] { font-family: var(--font); font-weight: 800; }
.wx [data-wf^="4914c9_450128"] { font-family: var(--font); font-weight: 100; font-style: italic; }
.wx [data-wf^="64df1d_3d9e81"] { font-family: "Publico", Georgia, "Times New Roman", serif; font-weight: 300; }
.wx [data-wf^="64df1d_9afa88"] { font-family: "Publico", Georgia, "Times New Roman", serif; font-weight: 500; }
.wx [data-wf^="64df1d_556359"] { font-family: "Publico Text", Georgia, "Times New Roman", serif; font-weight: 700; }
.wx [data-wf^="64df1d_ed9910"] { font-family: "Publico", Georgia, "Times New Roman", serif; font-style: italic; }
.wx [data-wf^="64df1d_af8484"], .wx [data-wf^="64df1d_ed414d"] { font-family: var(--font); font-weight: 400; font-style: normal; } /* ArsType sans faces */
.wx [data-wf^="64df1d_328426"] { font-family: var(--font); font-weight: 700; font-style: normal; } /* ArsType heavy */

/* desktop-only layouts on phones: stacked flow */
@media (max-width: 767px) {
  .wx.flow { min-height: 0; height: auto; display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding: calc(24 * var(--u)) calc(20 * var(--u)); }
  .wx.flow .wi { position: static; width: 100%; height: auto; }
  .wx.flow .wi.full { margin: 0 calc(-20 * var(--u)); width: calc(100% + 40 * var(--u)); }
  .wx.flow .wpic { aspect-ratio: var(--ar); }
  .wx.flow .wbtn { align-self: center; width: auto; padding: calc(10 * var(--u)) calc(22 * var(--u)); }
}

/* =========================================================
   RESPONSIVE — original serves a separate 320px Wix mobile layout:
   single column, centred text, image above copy, hamburger menu.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1100px) {
  .recognition .cards { grid-template-columns: repeat(2, minmax(0, 471px)); column-gap: clamp(24px, 100% - 942px, 97px); padding-inline: 16px; }
  .origin .map { width: 100%; max-width: 492px; height: auto; aspect-ratio: 492 / 291; }
  .origin .right { padding-left: 40px; }
}
@media (max-width: 1000px) {
  .nav { margin-right: 32px; gap: 22px; }
  .case { grid-template-columns: 1fr 1fr; }
  .recognition .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(980px, 100% - 32px); margin-inline: auto; column-gap: 32px; row-gap: 40px; }
  .skills .col, .skills .col + .col { padding-left: 48px; }
}

@media (max-width: 767px) {
  /* The original serves a separate Wix mobile layout authored at 320px (meta viewport width=320) and
     zoomed to the device width. --u = 1 "Wix mobile px", so every value below is the measured 320px value. */
  :root { --u: calc(100vw / 320); --header-h: calc(92 * var(--u)); }
  .wrap { width: calc(280 * var(--u)); }
  .site-header .bar { width: 100%; margin: 0; padding: 0 calc(14 * var(--u)); align-items: flex-start; padding-top: calc(19 * var(--u)); }
  .logo .name { font-size: calc(19 * var(--u)); letter-spacing: calc(2.85 * var(--u)); line-height: calc(23 * var(--u)); }
  .logo .tag { font-size: calc(11 * var(--u)); letter-spacing: calc(1.1 * var(--u)); line-height: calc(13.2 * var(--u)); width: calc(152 * var(--u)); margin: 0 0 0 calc(15 * var(--u)); }
  .nav, .site-header .btn-cta { display: none; }
  .menu-btn { display: block; width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin-top: calc(2 * var(--u)); border: 0; background: none; color: #fff; padding: calc(8 * var(--u)); cursor: pointer; }
  .menu-btn span { display: block; height: 2px; background: currentColor; margin: calc(5 * var(--u)) 0; transition: transform .3s, opacity .3s; }
  .menu-btn span:nth-child(2) { width: 70%; margin-left: auto; }
  .menu-open .menu-btn span:nth-child(1) { transform: translateY(calc(7 * var(--u))) rotate(45deg); }
  .menu-open .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-open .menu-btn span:nth-child(3) { transform: translateY(calc(-7 * var(--u))) rotate(-45deg); }
  .drawer { display: flex; position: fixed; inset: var(--header-h) 0 0 0; background: var(--bg); flex-direction: column; align-items: center; gap: calc(22 * var(--u)); padding-top: calc(40 * var(--u)); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .menu-open .drawer { opacity: 1; pointer-events: auto; }
  .drawer a:not(.btn-cta) { font-size: calc(20 * var(--u)); text-decoration: none; font-weight: var(--w-medium); }
  .drawer a[aria-current="page"] { color: var(--text-muted); }
  .drawer-sub { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(-8 * var(--u)); }
  .drawer .drawer-sub a { font-size: calc(15 * var(--u)); color: var(--text-body); font-weight: var(--w-regular); }

  .eyebrow { font-size: calc(14 * var(--u)); line-height: calc(16.8 * var(--u)); letter-spacing: calc(1.4 * var(--u)); }
  .body { font-size: calc(16 * var(--u)); line-height: calc(25.6 * var(--u)); }
  .h-section { font-size: calc(21 * var(--u)); line-height: calc(25.2 * var(--u)); }
  .h-sub { font-size: calc(19 * var(--u)); line-height: calc(22.8 * var(--u)); }

  /* ----- home ----- */
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-left { justify-content: center; text-align: center; padding: calc(18 * var(--u)) calc(16 * var(--u)) calc(30 * var(--u)); }
  .hero-left .inner { padding: 0; width: 100%; }
  .display { font-size: calc(36 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: calc(-0.36 * var(--u)); }
  .hero-left .eyebrow { margin-bottom: calc(10 * var(--u)); }
  .hero-left .display { margin-bottom: calc(14 * var(--u)); }
  .lead { font-size: calc(17 * var(--u)); line-height: calc(20.4 * var(--u)); letter-spacing: calc(1.7 * var(--u)); }
  .hero-right { padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u)); }
  .hero-right .inner { width: 100%; }
  .avatar { width: calc(113 * var(--u)); height: calc(113 * var(--u)); margin: 0 auto calc(8 * var(--u)); }
  .hero-right .body + .body { margin-top: calc(7 * var(--u)); }
  .work { padding: 0 0 calc(36 * var(--u)); }
  .case, .case.c3 { grid-template-columns: 1fr; gap: 0; width: 100%; margin: 0; padding: 0; text-align: center; min-height: 0; }
  .case + .case { margin-top: calc(27 * var(--u)); }
  .case .shot { order: -1; margin: 0 calc(4 * var(--u)); border-radius: calc(4 * var(--u)); aspect-ratio: 316 / 237; }
  .case:nth-child(2) .shot { margin: 0 1px; aspect-ratio: 318 / 198; }
  .case.c3 .shot { margin: 0; aspect-ratio: 320 / 229; }
  .case .text { padding: calc(25 * var(--u)) calc(24 * var(--u)) 0; }
  .case .eyebrow { margin-bottom: calc(10 * var(--u)); }
  .case .h-card { font-size: calc(24 * var(--u)); line-height: calc(26.4 * var(--u)); max-width: none !important; }
  .case:first-child .h-card { font-size: calc(23 * var(--u)); line-height: calc(25.3 * var(--u)); }
  .case .meta { font-size: calc(16 * var(--u)); line-height: calc(25.6 * var(--u)); margin: calc(10 * var(--u)) auto 0; }
  .case:first-child .meta { font-size: calc(15 * var(--u)); line-height: calc(22.5 * var(--u)); }
  .case .cta { font-size: calc(16 * var(--u)); margin-top: calc(14 * var(--u)); }

  /* ----- about ----- */
  .intro { padding: calc(20 * var(--u)) 0 calc(40 * var(--u)); }
  .intro .grid { grid-template-columns: 1fr; gap: calc(17 * var(--u)); width: calc(280 * var(--u)); }
  .intro .photo { width: 100%; height: auto; aspect-ratio: 280 / 305; }
  .intro .eyebrow, .perspective .eyebrow { font-size: calc(12 * var(--u)); line-height: calc(14.4 * var(--u)); letter-spacing: calc(1.2 * var(--u)); margin-bottom: calc(10 * var(--u)); }
  .intro .h-section { margin-bottom: calc(14 * var(--u)); }
  .intro .h-sub { margin: calc(13 * var(--u)) 0 calc(13 * var(--u)); }
  .intro .bullets { font-size: calc(16 * var(--u)); line-height: calc(28.8 * var(--u)); }
  .perspective { padding: calc(29 * var(--u)) 0 calc(32 * var(--u)); }
  .perspective .card { grid-template-columns: 1fr; gap: calc(18 * var(--u)); width: calc(280 * var(--u)); padding: calc(10 * var(--u)) 0 0; }
  .perspective .card > div { padding: 0 calc(10 * var(--u)); }
  .perspective .body.gap:last-child { text-align: center; margin-top: calc(14 * var(--u)); }
  .perspective .pic { width: 100%; height: auto; aspect-ratio: 280 / 247; }
  .recognition { padding: calc(16 * var(--u)) 0 calc(40 * var(--u)); }
  .recognition .center-head { position: relative; }
  .recognition .center-head .eyebrow { position: absolute; left: calc(17 * var(--u)); top: calc(8 * var(--u)); font-size: calc(10 * var(--u)); letter-spacing: calc(1 * var(--u)); }
  .recognition .h-section { font-size: calc(23 * var(--u)); line-height: calc(27.6 * var(--u)); }
  .recognition .cards { grid-template-columns: 1fr; row-gap: calc(18 * var(--u)); margin: calc(17 * var(--u)) auto 0; width: calc(280 * var(--u)); }
  .recognition .cards > :nth-child(3) { order: -2; }
  .recognition .cards > :nth-child(2) { order: -1; }
  .rcard { min-height: 0; padding: calc(17 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)); }
  .rcard .year { text-align: center; margin-bottom: calc(12 * var(--u)); }
  .rcard p { font-size: calc(14 * var(--u)); line-height: calc(22.4 * var(--u)); }
  .rcard .tight, .rcard .small { font-size: calc(13 * var(--u)); line-height: calc(20.8 * var(--u)); }
  .skills { display: none; } /* hidden on the original mobile site */
  .origin { grid-template-columns: 1fr; min-height: 0; }
  .origin .left { padding: calc(32 * var(--u)) calc(20 * var(--u)) 0; justify-content: flex-start; }
  .origin .big { font-size: calc(21 * var(--u)); line-height: calc(26.25 * var(--u)); }
  .origin .body { font-size: calc(14 * var(--u)); line-height: calc(22.4 * var(--u)); }
  .origin .left .body:first-of-type { margin-top: calc(24 * var(--u)); }
  .origin .right { padding: calc(23 * var(--u)) calc(8 * var(--u)) calc(30 * var(--u)) calc(7 * var(--u)); }
  .origin .map { width: 100%; height: auto; aspect-ratio: 305 / 166; border-radius: 0; }
  .stats { grid-template-columns: 1fr; width: 100%; margin: calc(18 * var(--u)) 0 0; }
  .stat + .stat { border-left: 0; }
  .stat { padding: 0 0 calc(6 * var(--u)); }
  .stat .num { font-size: calc(34 * var(--u)); line-height: calc(54.4 * var(--u)); }
  .stat .lbl { font-size: calc(16 * var(--u)); line-height: calc(25.6 * var(--u)); margin-top: calc(6 * var(--u)); }
  .gallery { padding: calc(28 * var(--u)) 0 calc(32 * var(--u)); }
  .slider { width: 100%; aspect-ratio: auto; height: calc(119 * var(--u)); }
  .slides { gap: calc(4.27 * var(--u)); padding-inline: calc(18 * var(--u)) calc(17 * var(--u)); scroll-padding-inline: calc(18 * var(--u)); }
  .slide { flex: 0 0 calc(208 * var(--u)); }
  .slider .prev { left: calc(43 * var(--u)); } .slider .next { right: calc(42 * var(--u)); }

  .site-footer { padding: calc(20 * var(--u)) calc(55 * var(--u)) calc(14 * var(--u)); min-height: calc(171 * var(--u)); }
  .site-footer p { font-size: calc(12 * var(--u)); line-height: calc(14.4 * var(--u)); letter-spacing: calc(1.2 * var(--u)); }
  .site-footer p + p { margin-top: calc(14 * var(--u)); }
  .social { gap: calc(17 * var(--u)); margin-top: calc(14 * var(--u)); }
  .social a, .social img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  .locked form { flex-direction: column; align-items: center; }
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 6px; background: #111; color: #fff; font-size: 14px; text-decoration: none; transition: top .15s; } .skip-link:focus { top: 12px; }