:root { --bg:#050505; --panel:#151515; --line:#2b2d35; --text:#f4f4f5; --muted:#a5a5b1; --accent:#ff3b43; --max:1840px; font-family:Arial, "Microsoft YaHei", sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:20; padding:.75rem 1rem; background:var(--accent); color:#000; }.skip-link:focus { top:1rem; }
.site-header { position:fixed; inset:0 0 auto; z-index:10; display:flex; justify-content:space-between; align-items:center; height:72px; padding:0 4.2vw; background:linear-gradient(#050505dd, transparent); pointer-events:none; }.site-header a { pointer-events:auto; }.wordmark { font-size:12px; font-weight:700; letter-spacing:.04em; }.wordmark span { color:var(--muted); font-weight:400; }.site-header nav { display:flex; gap:clamp(16px,2vw,34px); font-size:11px; letter-spacing:.1em; }.site-header nav a { color:var(--muted); }.site-header nav a:hover,.site-header nav [aria-current="page"] { color:var(--text); }
.home-hero { position:relative; display:grid; min-height:100svh; overflow:hidden; }.artwork { position:relative; display:block; overflow:hidden; background:#0d0d0d; }.artwork.asset-missing::after { content:"Artwork asset needed"; position:absolute; inset:0; display:grid; place-items:center; color:#777; font-size:11px; letter-spacing:.08em; background:linear-gradient(135deg,#141414,#090909); }.home-hero-image { position:absolute; inset:0; }.home-hero-image img { object-position:center; }.hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg,#050505 0%,#050505eb 22%,#05050594 43%,transparent 68%),linear-gradient(0deg,#0505059c,transparent 45%); }.hero-content { position:relative; width:min(540px,calc(100% - 8vw)); margin:clamp(84px,8vh,120px) 0 54px 4.2vw; align-self:center; }.identity,.eyebrow { margin:0; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.04em; }.identity i { display:inline-block; width:12px; height:12px; margin-right:8px; background:var(--accent); border-radius:2px; vertical-align:-1px; }.hero-content h1 { max-width:530px; margin:30px 0 26px; font-size:clamp(42px,4.2vw,72px); line-height:.98; letter-spacing:-.07em; }.hero-copy,.lede { margin:0; color:var(--muted); font-size:15px; line-height:1.7; }.text-link { display:inline-flex; gap:.65rem; align-items:center; margin-top:28px; padding-bottom:7px; border-bottom:2px solid var(--accent); font-size:15px; font-weight:700; }.text-link span { color:var(--accent); }.project-index { display:grid; gap:10px; margin:22px 0 9px; padding:0; list-style:none; }.project-index a,.art-foundation-link { display:grid; grid-template-columns:36px 1fr 20px; align-items:center; min-height:47px; padding:0 16px; border:1px solid var(--line); background:#101010d9; color:#e8e8ec; transition:border-color .18s, background .18s; }.project-index a:hover,.art-foundation-link:hover { border-color:var(--accent); background:#151515; }.project-index b { color:var(--muted); font-size:13px; }.project-index span,.art-foundation-link span { font-size:14px; font-weight:700; }.project-index em,.art-foundation-link em { color:var(--accent); font-style:normal; text-align:right; }.art-foundation-link { margin-top:10px; }.contact-block { margin-top:30px; padding:24px; border:1px solid var(--line); background:#121212e8; }.contact-block ul { display:grid; gap:13px; margin:20px 0 0; padding:0; list-style:none; }.contact-block li { display:grid; grid-template-columns:76px 1fr; gap:12px; color:var(--muted); font-size:14px; }.contact-block li span { color:var(--accent); }.contact-block li a:hover { color:var(--text); }
.page,.project-page { width:min(var(--max),calc(100% - 8.4vw)); margin:0 auto; padding:150px 0 100px; }.section-intro { max-width:810px; }.section-intro h1 { margin:17px 0; font-size:clamp(44px,6vw,86px); line-height:.95; letter-spacing:-.07em; }.about-statement { max-width:700px; margin:70px 0 0; font-size:clamp(22px,2.4vw,34px); line-height:1.45; }.projects-page .section-intro { margin-bottom:56px; }.project-list { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }.project-card { min-height:430px; background:#111; }.project-card a { position:relative; display:block; height:100%; }.project-card .artwork { height:100%; min-height:430px; }.project-card-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; background:linear-gradient(transparent 30%,#050505d9); }.project-card-overlay p { margin:0 0 10px; color:var(--accent); font-size:13px; font-weight:bold; }.project-card-overlay h2 { max-width:420px; margin:0; font-size:clamp(22px,2.4vw,38px); line-height:1.05; letter-spacing:-.045em; }.project-card-overlay span { margin-top:20px; color:var(--muted); font-size:13px; }.project-card:hover img { transform:scale(1.018); }.project-card img { transition:transform .35s ease; }
.project-topline { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }.project-topline a:hover { color:var(--accent); }.project-lead { display:grid; grid-template-columns:minmax(310px,.62fr) 1.38fr; gap:clamp(32px,5vw,100px); align-items:end; padding:44px 0 54px; border-bottom:1px solid var(--line); }.project-lead h1 { margin:18px 0 0; max-width:660px; font-size:clamp(42px,5.1vw,84px); line-height:.95; letter-spacing:-.075em; }.tech-list { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; padding:0; list-style:none; }.tech-list li { padding:7px 11px; border:1px solid var(--line); color:var(--muted); font-size:12px; }.project-hero-image { aspect-ratio:16/9; }.project-overview { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(35px,8vw,150px); padding:70px 0; }.project-details { display:grid; gap:26px; }.project-details section { border-left:3px solid var(--accent); padding-left:16px; }.project-details h2 { margin:0 0 9px; color:var(--accent); font-size:13px; }.project-details ul { display:grid; gap:7px; margin:0; padding:0; list-style:none; color:var(--muted); font-size:14px; line-height:1.6; }.project-details li::before { content:'•'; margin-right:7px; color:var(--text); }.project-hero-copy { font-size:clamp(19px,2vw,28px); line-height:1.55; }.project-hero-copy p { margin:0 0 1em; }.source-notes { margin-top:40px; color:var(--muted); font-size:13px; line-height:1.55; }.source-notes p:not(.eyebrow) { margin:.7rem 0 0; }.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.gallery-grid figure,.breakdown-grid figure { min-width:0; margin:0; }.gallery-grid .artwork { aspect-ratio:1.46; }.gallery-grid figure:nth-child(5n+1) .artwork { aspect-ratio:1.2; }.gallery-grid figcaption,.breakdown-grid figcaption { padding:8px 0; color:var(--muted); font-size:12px; }.breakdown { margin-top:84px; padding-top:27px; border-top:1px solid var(--line); }.breakdown-title { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; }.breakdown-title h2 { margin:0; font-size:clamp(28px,3.5vw,50px); letter-spacing:-.06em; }.breakdown-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.breakdown-grid .artwork { aspect-ratio:1.4; }.project-pager { display:grid; grid-template-columns:1fr auto 1fr 1fr; gap:20px; align-items:center; margin-top:100px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }.project-pager a:hover { color:var(--accent); }.project-pager a:nth-last-child(1) { text-align:right; }
.references { margin-top:84px; padding-top:27px; border-top:1px solid var(--line); }.references-title { margin-bottom:24px; }.references-title h2 { margin:10px 0 0; font-size:clamp(28px,3.5vw,50px); letter-spacing:-.06em; }.reference-notes { max-width:620px; margin-top:20px; color:var(--muted); font-size:13px; line-height:1.55; }.reference-notes p { margin:.5rem 0 0; }.reference-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.reference-grid figure { min-width:0; margin:0; }.reference-grid .artwork { aspect-ratio:1.4; }.reference-grid figcaption { padding:8px 0; color:var(--muted); font-size:12px; }.art-foundation-layout { display:grid; grid-template-columns:1.5fr .6fr; gap:clamp(30px,6vw,120px); align-items:end; margin:70px 0; }.art-foundation-layout .artwork { aspect-ratio:1.16; }.art-foundation-layout > div { color:var(--muted); line-height:1.7; }.art-foundation-layout > div > p:not(.eyebrow) { font-size:18px; }.contact-page .contact-block { max-width:620px; margin-top:60px; }.contact-page .contact-block li { font-size:16px; }footer { padding:30px 4.2vw; border-top:1px solid var(--line); color:#666; font-size:12px; }
.references-title .eyebrow { font-size:16px; }

/* Keep red metadata legible without changing the surrounding body hierarchy. */
.identity,.eyebrow { font-size:16px; }
.project-card-overlay p,.project-index em,.art-foundation-link em { font-size:16px; }
.project-details h2 { font-size:16px; }
.contact-block li span { font-size:16px; }
.text-link span { font-size:16px; }

/* Art foundation: three independent personal-project sections. */
.art-page .section-intro { margin-bottom:clamp(64px,8vw,128px); }
.art-projects { display:grid; gap:clamp(86px,11vw,176px); }
.art-project { padding-top:30px; border-top:1px solid var(--line); }
.art-project-header { display:grid; grid-template-columns:minmax(180px,.42fr) minmax(0,1.3fr); column-gap:clamp(36px,7vw,128px); align-items:start; }
.art-project-description { max-width:780px; margin:0; color:var(--muted); font-size:16px; line-height:1.7; }
.art-project-tool-line { margin:1.7em 0 0; color:var(--muted); font-size:16px; line-height:1.7; }
.art-project-header .tech-list { grid-column:2; margin:24px 0 0; }
.art-project-feature { width:calc((100% - 14px) / 2); margin-top:clamp(32px,4vw,64px); }
.art-project-feature .artwork,.art-project-feature .artwork img { height:auto; object-fit:contain; }
.art-project-gallery { margin-top:clamp(20px,2.5vw,40px); }
.art-project-process { margin-top:clamp(40px,5vw,80px); }
@media (max-width: 800px) {
  .art-page .section-intro { margin-bottom:56px; }
  .art-projects { gap:82px; }
  .art-project { padding-top:24px; }
  .art-project-header { grid-template-columns:1fr; gap:18px; }
  .art-project-header .tech-list { grid-column:auto; margin-top:0; }
  .art-project-feature { width:calc((100% - 8px) / 2); }
}
@media (max-width: 480px) {
  .gallery-grid--two-up { grid-template-columns:1fr; }
  .art-project-feature { width:100%; }
}
@media (min-width: 801px) {
  /* Project 01: matched 70% scale for the opening image and its paired final image. */
  .art-project--01 .art-project-feature { width:calc((100% - 14px) * .35); }
  .art-project--01 .art-project-gallery figure:nth-child(7) { width:70%; }

  /* Project 01: retain the portrait pair at a quieter 50% display scale. */
  .art-project--01 .art-project-gallery figure:nth-child(5),
  .art-project--01 .art-project-gallery figure:nth-child(6) { width:50%; justify-self:center; }

  /* Project 01: project context sits left of its opening artwork. */
  .art-project--01 { display:grid; grid-template-columns:minmax(0,.72fr) minmax(420px,1.28fr); column-gap:clamp(36px,7vw,128px); align-items:start; }
  .art-project--01 .art-project-header { display:block; grid-column:1; grid-row:1; }
  .art-project--01 .art-project-header .art-project-description { margin-top:24px; }
  .art-project--01 .art-project-feature { grid-column:2; grid-row:1; width:52.5%; margin-top:0; justify-self:end; }
  .art-project--01 .art-project-gallery { grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(6,minmax(0,1fr)); }
  .art-project--01 .art-project-gallery figure:nth-child(-n+4) { grid-column:span 3; }
  .art-project--01 .art-project-gallery figure:nth-child(5),
  .art-project--01 .art-project-gallery figure:nth-child(6) { grid-column:span 2; width:90%; }
  .art-project--01 .art-project-gallery figure:nth-child(7) { grid-column:span 2; width:100%; align-self:end; }

  /* Project 02: its companion image sits to the right of the matched-height cover pair. */
  .art-project--02 .art-project-covers { grid-template-columns:1fr .417fr .7fr; gap:0; align-items:start; }
  .art-project--02 .art-project-covers figure:nth-child(2) { width:100%; justify-self:start; align-self:start; }
  .art-project--02 .art-project-covers figure:nth-child(3) { width:70%; margin-left:clamp(32px,4vw,64px); justify-self:start; align-self:end; }

  /* Project 02: present the first three process images as one desktop row. */
  .art-project--02 .art-project-process { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .art-project--02 .art-project-process figure:nth-child(-n+3) { width:70%; justify-self:center; }
}

/* The two personal-project 02 cover images meet edge-to-edge. */
.art-project--02 .art-project-covers { gap:0; }
@media (max-width: 800px) { .site-header { height:58px; padding:0 5vw; }.site-header nav { gap:13px; font-size:9px; }.wordmark span { display:none; }.home-hero { min-height:auto; }.home-hero-image { position:absolute; height:58svh; }.home-hero-image img { object-position:62% center; }.hero-scrim { background:linear-gradient(180deg,#05050565, #050505e8 50%,#050505 68%); }.hero-content { width:90%; margin:46svh auto 32px; }.hero-content h1 { margin:22px 0 19px; font-size:48px; }.hero-copy { font-size:14px; }.project-index a { min-height:45px; }.page,.project-page { width:90%; padding:105px 0 70px; }.project-list { grid-template-columns:1fr; }.project-card,.project-card .artwork { min-height:300px; }.project-lead,.project-overview,.art-foundation-layout { grid-template-columns:1fr; }.project-lead { gap:32px; padding:32px 0 42px; }.project-hero-image { order:-1; }.project-overview { padding:46px 0; }.gallery-grid,.breakdown-grid,.reference-grid { grid-template-columns:repeat(2,1fr); gap:8px; }.project-pager { grid-template-columns:1fr 1fr; gap:20px 12px; margin-top:65px; }.project-pager span { display:none; }.project-pager a:nth-last-child(1) { text-align:right; }.project-pager a:nth-child(2) { text-align:right; }.section-intro h1 { font-size:54px; }.contact-block { padding:20px; } }
@media (max-width: 480px) { .site-header nav a:nth-child(3) { display:none; }.gallery-grid,.breakdown-grid,.reference-grid { grid-template-columns:1fr; }.gallery-grid .artwork,.gallery-grid figure:nth-child(5n+1) .artwork { aspect-ratio:1.45; }.project-pager { font-size:12px; } }

/* Artwork source frames are intentionally kept intact: no generic gallery crop. */
.gallery-grid .artwork,.gallery-grid figure:nth-child(5n+1) .artwork,.breakdown-grid .artwork,.reference-grid .artwork { aspect-ratio:auto; }
.gallery-grid .artwork img,.breakdown-grid .artwork img,.reference-grid .artwork img { height:auto; object-fit:contain; }
.project-overview--details-only { grid-template-columns:minmax(0, 720px); }
.project-lead .project-hero-copy { max-width:560px; margin-top:22px; color:var(--muted); font-size:14px; line-height:1.65; }.project-lead .project-hero-copy p { margin:0 0 .8em; }
.project-lead--dual-cover { grid-template-columns:minmax(330px, .78fr) minmax(480px, 1.22fr); align-items:start; }.project-lead--dual-cover .project-summary h1 { max-width:580px; }.lead-details { margin-top:48px; }.lead-cover-stack { display:grid; gap:14px; }.lead-cover-stack .artwork { aspect-ratio:auto; }.lead-cover-stack .artwork img { height:auto; object-fit:contain; }
.gallery-groups { display:grid; gap:clamp(48px, 6vw, 96px); }
.gallery-grid--stacked { grid-template-columns:1fr; gap:clamp(38px, 5vw, 72px); }.gallery-grid--stacked figure { width:100%; }.gallery-grid--stacked figcaption { padding-top:12px; font-size:14px; }
.gallery-grid--two-up { grid-template-columns:repeat(2,minmax(0,1fr)); }
.breakdown-grid--full-width { grid-template-columns:minmax(0,1fr); }
.references--images-before-notes .reference-notes { margin-top:20px; }
.project-pager { grid-template-columns:1fr auto 1fr; grid-template-rows:auto auto; row-gap:18px; }.pager-back { grid-column:1; grid-row:2; justify-self:start; }.pager-home { grid-column:2; grid-row:1; justify-self:center; }.pager-next { grid-column:3; grid-row:1; justify-self:end; text-align:right; }.pager-previous { grid-column:1; grid-row:1; justify-self:start; }.project-pager--no-previous .pager-back { grid-row:1; }
@media (max-width: 800px) { .project-lead--dual-cover { grid-template-columns:1fr; }.lead-details { margin-top:32px; }.lead-cover-stack { order:-1; } }

/* Desktop scale: calibrated to match the former 110% browser-view density at 100%. */
@media (min-width: 801px) {
  :root { --max:1920px; }
  .site-header { height:80px; padding:0 4.6vw; }
  .wordmark { font-size:13px; }
  .site-header nav { gap:clamp(18px,2.2vw,37px); font-size:12px; }
  .home-hero-image img { object-position:center; }
  .hero-content { width:min(594px,calc(100% - 9.2vw)); margin:clamp(92px,8.8vh,132px) 0 60px 4.6vw; }
  .identity,.eyebrow { font-size:13px; }
  .hero-content h1 { max-width:583px; margin:33px 0 29px; font-size:clamp(46px,4.62vw,79px); }
  .hero-copy,.lede { font-size:16px; }
  .text-link { margin-top:31px; font-size:16px; }
  .project-index { gap:11px; margin-top:24px; }
  .project-index a,.art-foundation-link { min-height:52px; padding:0 18px; }
  .project-index b { font-size:14px; }
  .project-index span,.art-foundation-link span { font-size:15px; }
  .contact-block { margin-top:33px; padding:26px; }
  .contact-block li { grid-template-columns:84px 1fr; font-size:15px; }
  .page,.project-page { width:min(var(--max),calc(100% - 7.6vw)); padding:165px 0 110px; }
  .section-intro h1 { margin:19px 0; font-size:clamp(48px,6.6vw,94px); }
  .about-statement { max-width:770px; margin-top:77px; font-size:clamp(24px,2.64vw,37px); }
  .projects-page .section-intro { margin-bottom:62px; }
  .project-list { gap:20px; }
  .project-card,.project-card .artwork { min-height:473px; }
  .project-card-overlay { padding:31px; }
  .project-card-overlay p { font-size:14px; }
  .project-card-overlay h2 { font-size:clamp(24px,2.64vw,42px); }
  .project-card-overlay span { margin-top:22px; font-size:14px; }
  .project-topline { font-size:14px; }
  .project-lead { gap:clamp(35px,5.5vw,110px); padding:48px 0 59px; }
  .project-lead h1 { margin-top:20px; max-width:725px; font-size:clamp(46px,5.6vw,92px); }
  .tech-list { gap:9px; margin-top:29px; }
  .tech-list li { padding:8px 12px; font-size:13px; }
  .project-overview { gap:clamp(38px,8.8vw,165px); padding:77px 0; }
  .project-details { gap:29px; }
  .project-details section { padding-left:18px; }
  .project-details h2 { margin-bottom:10px; font-size:14px; }
  .project-details ul { gap:8px; font-size:15px; }
  .project-lead .project-hero-copy { max-width:616px; margin-top:24px; font-size:15px; }
  .gallery-grid,.breakdown-grid,.reference-grid { gap:14px; }
  .gallery-groups { gap:clamp(53px,6.6vw,106px); }
  .gallery-grid--stacked { gap:clamp(42px,5.5vw,79px); }
  .gallery-grid--stacked figcaption { padding-top:13px; font-size:15px; }
  .breakdown,.references { margin-top:92px; padding-top:30px; }
  .breakdown-title,.references-title { margin-bottom:26px; }
  .breakdown-title h2,.references-title h2 { font-size:clamp(31px,3.85vw,55px); }
  .reference-notes { max-width:682px; margin-top:22px; font-size:14px; }
  .project-pager { margin-top:110px; padding-top:24px; row-gap:20px; font-size:14px; }
  .project-lead--dual-cover { grid-template-columns:minmax(360px,.78fr) minmax(528px,1.22fr); }
  .lead-details { margin-top:53px; }
  .lead-cover-stack { gap:15px; }
}

/* Final red metadata scale: declared after desktop rules so every viewport uses 16px. */
.identity,.eyebrow,
.project-details h2,
.project-card-overlay p,
.project-index em,
.art-foundation-link em,
.contact-block li span,
.text-link span { font-size:16px; }

/* Home cover — translated from Figma node 441:2; intentionally scoped to the homepage. */
.home-main { min-height:100svh; background:#000; overflow:hidden; }
.home-cover { position:relative; min-height:max(100svh,860px); overflow:hidden; background:#000; }
.home-intro { position:absolute; z-index:2; top:clamp(102px,12vh,154px); left:clamp(48px,4.7vw,90px); width:min(470px,32vw); }
.home-name { margin:0 0 16px; color:#fff; font-size:clamp(22px,2.1vw,40px); font-weight:700; line-height:1; letter-spacing:-.05em; }
.home-intro h1 { margin:0; color:#eeeef0; font-size:clamp(32px,2.82vw,54px); font-weight:300; line-height:1.15; letter-spacing:-.055em; }
.home-intro h1 span,.home-intro h1 strong { display:block; }
.home-intro h1 strong { font-weight:800; }
.home-intro > p:last-child { max-width:470px; margin:20px 0 0; color:#8e8e9f; font-size:clamp(12px,.84vw,16px); line-height:1.5; }
.home-directory { position:absolute; z-index:3; top:clamp(255px,27.8vh,360px); left:clamp(39px,3.55vw,68px); width:335px; height:570px; }
.home-directory-link { position:absolute; display:flex; align-items:center; gap:8px; color:#fff; font-size:clamp(12px,.84vw,16px); font-weight:700; line-height:1; transform-origin:left center; white-space:nowrap; transition:color .18s ease; }
.home-directory-link:hover,.home-directory-link:focus-visible { color:var(--accent); }
.home-directory-link b { font-size:.95em; }
.home-directory-link--1 { top:0; left:7px; transform:rotate(-37deg); }
.home-directory-link--2 { top:91px; left:7px; transform:rotate(-36deg); }
.home-directory-link--3 { top:181px; left:6px; transform:rotate(-35deg); }
.home-directory-link--4 { top:271px; left:6px; transform:rotate(-35deg); }
.home-directory-link--5 { top:352px; left:8px; transform:rotate(-35deg); }
.home-directory-link--6 { top:433px; left:8px; transform:rotate(-35deg); }
.home-orbits { position:absolute; inset:0 0 0 24vw; min-width:760px; }
.home-orb { position:absolute; display:block; overflow:hidden; border-radius:50%; background:#101010; transition:transform .24s ease; }
.home-orb:hover,.home-orb:focus-visible { transform:scale(1.035); }
.home-orb img { width:100%; height:100%; object-fit:cover; }
.home-orb--1 { top:2.2%; left:17%; width:clamp(130px,10.7vw,209px); aspect-ratio:1; }
.home-orb--2 { top:13%; left:32%; width:clamp(190px,17vw,328px); aspect-ratio:1; }
.home-orb--3 { top:10%; right:1.3%; width:clamp(220px,19.8vw,380px); aspect-ratio:1; }
.home-orb--4 { top:52.5%; left:49.5%; width:clamp(180px,17.5vw,336px); aspect-ratio:1; }
.home-orb--5 { top:59.2%; left:24%; width:clamp(220px,20.7vw,398px); aspect-ratio:1; }
.home-orb--6 { top:19%; left:66%; width:clamp(225px,21vw,404px); aspect-ratio:1; }
.home-orb--7 { top:31%; left:12%; width:clamp(155px,13.4vw,257px); aspect-ratio:1; }
@media (max-width: 900px) {
  .home-cover { min-height:auto; padding:112px 6vw 72px; }
  .home-intro { position:relative; top:auto; left:auto; width:min(520px,100%); }
  .home-intro h1 { font-size:clamp(34px,7vw,50px); }
  .home-intro > p:last-child { margin-top:16px; font-size:14px; }
  .home-directory { position:relative; top:auto; left:auto; width:100%; height:auto; display:grid; gap:13px; margin:42px 0 40px; }
  .home-directory-link { position:relative; top:auto!important; left:auto!important; width:max-content; transform:none!important; font-size:14px; }
  .home-orbits { position:relative; inset:auto; min-width:0; width:100%; height:min(102vw,680px); }
  .home-orb--1 { top:0; left:20%; width:20%; }.home-orb--2 { top:14%; left:43%; width:30%; }.home-orb--3 { top:5%; right:0; width:31%; }.home-orb--4 { top:55%; left:48%; width:31%; }.home-orb--5 { top:58%; left:12%; width:34%; }.home-orb--6 { top:27%; left:65%; width:34%; }.home-orb--7 { top:34%; left:4%; width:25%; }
}
@media (max-width: 480px) { .home-cover { padding-top:92px; }.home-name { font-size:23px; }.home-orbits { height:112vw; } }
/* Keep the curved Home directory clear of the introductory copy. */
@media (min-width: 901px) {
  .home-directory { top:clamp(510px,46vh,590px); }
  .home-directory-link--1 { transform:rotate(-15deg); }
  .home-directory-link--2 { transform:rotate(-14deg); }
  .home-directory-link--3 { transform:rotate(-13deg); }
  .home-directory-link--4 { transform:rotate(-13deg); }
  .home-directory-link--5 { transform:rotate(-13deg); }
  .home-directory-link--6 { transform:rotate(-13deg); }
}
/* Home text alignment and a single-line title at every responsive width. */
@media (min-width: 901px) { .home-directory { left:clamp(48px,4.7vw,90px); } }
.home-intro h1 span { white-space:nowrap; }
@media (max-width: 900px) { .home-intro h1 span { font-size:clamp(19px,5.9vw,50px); letter-spacing:-.065em; } }
/* Home Project 06 links and cover scale adjustment. */
.home-orb--7 { width:clamp(207px,17.87vw,342px); }
@media (max-width: 900px) { .home-orb--7 { width:33.33%; } }
/* Place the sixth Home artwork at the lower-right of the desktop composition. */
@media (min-width: 901px) { .home-orb--6 { top:auto; left:auto; right:5%; bottom:5%; } }
/* Proportional scale adjustments for the selected Home artworks. */
.home-orb--3 { width:clamp(293px,26.4vw,507px); }
.home-orb--4 { width:clamp(120px,11.67vw,224px); }
@media (max-width: 900px) { .home-orb--3 { width:41.33%; } .home-orb--4 { width:20.67%; } }

/* Consistent project-detail title scale. */
.project-lead h1 { font-size:64px; }

/* About resume */
.about-resume { max-width: 1100px; margin-top: clamp(42px, 6vw, 84px); display: grid; gap: clamp(38px, 5vw, 72px); }
.about-resume-section { padding-top: 22px; border-top: 1px solid var(--line); }
.about-resume-section h2 { margin: 0 0 20px; color: var(--accent); font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.about-resume-section h3 { margin: 0; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.25; letter-spacing: -.035em; }
.about-resume-section h3 span { color: var(--muted); font-size: .65em; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.about-resume-section p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.about-date { margin-bottom: 8px !important; color: var(--text) !important; font-size: 12px !important; font-weight: 700; letter-spacing: .05em; }
.about-degree { margin: 8px 0 !important; color: var(--text) !important; }
.about-education-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 6vw, 100px); }
.about-skills dl { display: grid; gap: 12px; margin: 0; }
.about-skills dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; }
.about-skills dt { color: var(--text); font-size: 14px; font-weight: 700; }
.about-skills dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.about-objective > p { color: var(--text); font-size: 15px; line-height: 1.7; }
.about-summary { max-width: 880px; }
.about-summary p + p { margin-top: 13px; }
.about-experience { display: grid; gap: 20px; }
.about-experience > h2 { grid-column: 1 / -1; margin-bottom: 0; }
.about-experience article { display: grid; grid-template-columns: minmax(210px, .55fr) 1.45fr; gap: clamp(24px, 5vw, 80px); padding-top: 20px; border-top: 1px solid var(--line); }
.about-experience ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; line-height: 1.7; }
.about-experience li::before { content: '•'; color: var(--accent); margin-right: 8px; }
@media (max-width: 800px) { .about-education-grid { grid-template-columns: 1fr; } .about-skills dl > div, .about-experience article { grid-template-columns: 1fr; gap: 8px; } }



.about-resume-section h3 .about-role { color: var(--text); font-size: 15px; font-weight: 700; letter-spacing: 0; }

.about-summary ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; line-height: 1.7; }
.about-summary li::before { content: '•'; color: var(--accent); margin-right: 8px; }

/* About heading portrait */
.about-hero { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 390px); gap: clamp(32px, 7vw, 130px); align-items: end; }
.about-hero .section-intro { max-width: none; }
.about-portrait { width: 100%; aspect-ratio: 1 / 1; }
.about-portrait img { object-position: center; }
@media (max-width: 800px) { .about-hero { grid-template-columns: 1fr; gap: 28px; } .about-portrait { width: min(76vw, 330px); } }

/* About summary and closing link spacing */
.about-summary { max-width: none; }
.about-page > .text-link { margin-top: 60px; }
@media (min-width: 801px) { .about-summary li:nth-child(4) { white-space: nowrap; } }

/* Native MP4 players for selected project galleries */
.project-videos { margin-top: clamp(42px, 5vw, 80px); }
.project-video { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: #0d0d0d; }
@media (max-width: 800px) { .project-videos { margin-top: 38px; } }