/*
Theme Name: Rae Wang — Product & UX
Description: Playful Future. An expressive portfolio with native editable WordPress pages.
Version: 0.5.0
Author: Rae Wang
Text Domain: rae-product-ux
*/
/* Playful Future is the sole visual system. */
:root{--canvas:#faf9f6;--paper:var(--canvas);--surface:#fff;--ink:#181824;--muted:#5d5c6b;--accent:#5546ff;--accent-hover:#4031d4;--accent-base:#3426b0;--blue:var(--accent);--ice:#ddd5ff;--citrus:#ddf86a;--wash:#f0edf9;--note:#e9e3ff;--line:#d9d5e3;--font-display:'Space Grotesk',Arial,sans-serif;--font-body:'Manrope','Segoe UI',sans-serif;--radius:999px;--media-radius:28px;--max:1280px;--duration:190ms;--shadow-card:0 18px 50px rgba(24,24,36,.10);color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--canvas);color:var(--ink);font:18px/1.65 var(--font-body);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}a:hover{color:var(--accent)}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.045em;line-height:1.08}h1{font-size:clamp(44px,6vw,80px)}h2{font-size:clamp(32px,3.5vw,48px)}h3{font-size:26px;letter-spacing:-.03em}p{max-width:70ch}p+p{margin-top:18px}main:focus{outline:none}
.wrap{width:min(calc(100% - 96px),var(--max));margin-inline:auto}.skip{position:absolute;left:24px;top:-100px;z-index:100;background:var(--paper);padding:12px}.skip:focus{top:12px}
/* Paper beneath a crisp, self-contained acrylic navigation. */
.site-header{position:relative;z-index:10}.nav-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:108px}
.brand{display:inline-flex;align-items:center;min-height:44px;font:700 27px/1 var(--font-display);letter-spacing:-.055em;text-decoration:none;justify-self:start}.brand span{color:var(--accent)}
.site-nav{max-width:100%;min-width:0}.nav-pill{display:flex;align-items:center;gap:4px;padding:5px;background:rgba(255,255,255,.78);border:1px solid #fff;border-radius:999px;box-shadow:0 2px 2px #fff inset,0 5px 18px #28203c0b,0 0 0 1px #e4dff0;backdrop-filter:blur(14px)}
.site-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:72px;min-height:44px;padding:9px 20px;font-size:14px;font-weight:600;text-decoration:none;border-radius:999px;transition:background var(--duration),color var(--duration)}
.site-nav a:hover{background:#e9e3ff;color:var(--ink)}.site-nav a[aria-current="page"],.site-nav a[aria-current="location"]{background:var(--accent);color:#fff;box-shadow:0 2px 5px #3528a529}
.nav-contact{justify-self:end;display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:100px;border:1px solid #c7c1d6;border-radius:999px;padding:9px 21px;font-size:14px;font-weight:600;text-decoration:none}.nav-contact:hover{background:var(--ice);color:var(--ink)}
.eyebrow,.media-label{font-size:12px;line-height:1.55;font-weight:600;letter-spacing:.055em;text-transform:uppercase;color:var(--muted)}
.text-link{display:inline-flex;align-items:center;gap:14px;min-height:46px;font-size:16px;font-weight:600}
.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:58px;padding:10px 12px 10px 24px;border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;font-size:16px;font-weight:600;box-shadow:0 5px 0 #3426b0,0 10px 22px #5546ff20;transition:background-color var(--duration),transform var(--duration),box-shadow var(--duration)}
.button:hover{background:var(--accent-hover);color:#fff;box-shadow:0 5px 0 #2d2194,0 13px 24px #5546ff2a}.button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-base)}
.button-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#ffffff26;font-size:25px;line-height:1}.button:not(:has(.button-arrow)){padding:13px 24px}
/* Type and a single collectible scene make the static first impression. */
.hero{display:grid;grid-template-columns:1.13fr 1fr;gap:46px;align-items:center;padding-block:50px 84px}.hero-copy{position:relative;z-index:1;min-width:0}.hero .eyebrow{margin-bottom:26px;color:var(--ink)}
.hero h1{font-size:clamp(82px,7.7vw,112px);line-height:.98;letter-spacing:-.057em;font-weight:600}.hero h1>span{display:block}.hero h1>span:last-child{color:var(--accent)}
.hero .intro{font-size:19px;line-height:1.6;max-width:36ch;margin-top:29px;color:var(--muted)}.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:30px}
.hero-scene{position:relative;isolation:isolate;min-width:0;height:532px;border-radius:42px;background:linear-gradient(140deg,#e8e0ff 0%,#d3c8ff 100%);box-shadow:0 1px 0 #fff inset,0 -2px 0 #c0b3ed inset}
.collection-seal{position:absolute;right:20px;top:-15px;z-index:4;padding:8px 15px;border:1px solid #18182412;border-radius:8px;transform:rotate(3deg);background:var(--citrus);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.015em;box-shadow:0 4px 8px #3b334b13}
.collectible{border:1px solid #fff;border-radius:23px;background:#ffffff66;box-shadow:0 2px 0 #fff inset,0 -3px 0 #9d90c455 inset,0 18px 35px #42337124;backdrop-filter:blur(12px);padding:10px}
.collectible-back{position:absolute;width:48%;height:387px;right:18px;top:22px;transform:rotate(5deg);overflow:hidden;background:#bbb0f599;z-index:0}
.collectible-back figcaption{position:relative;z-index:1;display:flex;flex-direction:column;font-size:13px;font-weight:600;line-height:1.35;padding:4px 6px 10px;color:#272039}.collectible-back figcaption>span{font-size:10px;font-weight:500;margin-top:4px}
.collectible-back img{width:84%;max-width:172px;margin-inline:auto;box-shadow:0 9px 20px #3023453b}
.collectible-front{display:block;position:absolute;left:0;top:126px;width:89%;transform:rotate(-1.5deg);text-decoration:none;z-index:2;transition:transform var(--duration),box-shadow var(--duration);background:#f8f6ffb8}
.collectible-front:hover{color:var(--ink);transform:rotate(-.5deg) translateY(-3px);box-shadow:0 2px 0 #fff inset,0 23px 40px #42337132}.collectible-front:focus-visible{transform:none;outline-offset:6px}
.collectible-label{display:flex;justify-content:space-between;gap:15px;padding:5px 9px 13px;font-size:11px;font-weight:600;letter-spacing:.025em;color:#454056}
.collectible-preview{aspect-ratio:1.65;overflow:hidden;border-radius:13px;background:#fff;border:1px solid #dad5e7}.collectible-preview img{width:100%;height:100%;object-fit:cover;object-position:top}
.collectible-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 9px 10px;color:var(--ink)}.collectible-caption div{min-width:0}.collectible-caption strong{display:block;font:600 23px/1.2 var(--font-display);letter-spacing:-.035em;margin-top:4px}.collectible-caption span:not(.collectible-link){font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#554d6d}.collectible-caption small{display:block;font-size:11px;color:#5d546e;margin-top:7px}
.collectible-link{display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:50%;width:38px;flex:0 0 38px;height:38px;font-size:23px}
.hero-arrow{position:absolute;left:-21px;top:-21px;z-index:3;width:152px;pointer-events:none}.hero-arrow img{width:100%;height:auto}
/* The collection: two leads, a wide website, then two complementary cases. */
.selected{padding-bottom:88px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:35px;padding-top:10px}.section-heading .eyebrow{margin-bottom:12px;color:var(--accent)}.section-heading h2{font-size:52px;line-height:1.05}.work-count{display:inline-block;vertical-align:top;font:500 13px/1.2 var(--font-body);letter-spacing:0;background:var(--citrus);color:var(--ink);border-radius:6px;padding:7px 8px;margin:4px 0 0 15px}.section-heading>p{font-size:15px;color:var(--muted);line-height:1.6}
.project-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:32px}.project{min-width:0}.project-entry{display:block;height:100%;overflow:hidden;border-radius:var(--media-radius);border:1px solid #ded8e8;background:#fff;box-shadow:0 5px 0 #e8e4ee,0 10px 22px #23203206;text-decoration:none;color:var(--ink);transition:transform 210ms,box-shadow 210ms,border-color 210ms}
.project-entry:hover{color:var(--ink);transform:translateY(-5px);border-color:#b3a5eb;box-shadow:0 5px 0 #e1daf0,0 20px 36px #2d244f19}.project-entry:focus-visible{outline:3px solid var(--accent);outline-offset:6px;transform:none;border-color:var(--accent)}.project-entry:active{transform:translateY(-1px)}
.project-art{position:relative;display:flex;align-items:center;justify-content:center;gap:34px;min-width:0;height:478px;padding:62px 34px 30px;overflow:hidden;isolation:isolate}
.collection-index{position:absolute;left:23px;top:20px;display:inline-flex;gap:8px;align-items:center;z-index:3;background:#ffffffed;color:var(--ink);padding:6px 11px;border:1px solid #fff;border-radius:8px;font-size:12px;font-weight:600;line-height:1.5}.collection-index>span{color:#65616f;font-weight:400}
.project-phone{position:relative;z-index:1;flex:0 0 188px;width:188px;padding:8px;background:#ffffff50;border:1px solid #ffffffca;border-radius:13px;box-shadow:0 19px 30px #14102f32;transform:rotate(-3deg)}.project-phone img{width:100%;height:auto}
.display-caption{position:relative;z-index:1;min-width:0;max-width:210px}.display-caption>p{font:600 33px/1.04 var(--font-display);letter-spacing:-.04em;margin:16px 0 22px}.media-source{display:block;font-size:12px;line-height:1.55;color:var(--muted)}
.pet-art{background:var(--accent);color:#fff}.pet-art::before{content:"";position:absolute;left:54px;top:80px;width:207px;height:350px;border:1px solid #cfc7ff6b;background:#8e82ff55;transform:rotate(5deg);border-radius:18px;z-index:-1}.pet-art .media-label,.pet-art .media-source{color:#eeebff}.pet-art .display-caption{max-width:175px}
.hf-home-art{flex-direction:column;gap:24px;background:#e5dff5;padding-inline:28px}.landscape-frame{width:100%;padding:8px;border:1px solid #fff;background:#ffffff7a;border-radius:16px;transform:rotate(1.5deg);box-shadow:0 16px 27px #5e4d7623}.landscape-frame img{width:100%;border-radius:8px}.hf-home-art .display-caption{display:flex;justify-content:space-between;align-items:center;gap:22px;max-width:none;width:100%}.hf-home-art .display-caption>p{font-size:28px;margin:0}.hf-home-art .media-source{max-width:23ch}
.project-text{padding:28px 31px 30px}.project-text>.eyebrow{font-size:12px;margin-bottom:16px;color:#524968}.project-text h3{font-size:36px;line-height:1.1;margin-bottom:18px;max-width:22ch}.project-text>p:not(.eyebrow){font-size:16px;line-height:1.65;color:var(--muted)}
.project-detail{margin:22px 0 18px;display:grid;gap:10px;font-size:13px;line-height:1.6}.project-detail div{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px}.project-detail dt{font-weight:600}.project-detail dd{margin:0;color:var(--muted)}
.case-entry-label{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:45px;padding-top:13px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink)}.case-entry-label>span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:50%;background:var(--wash);color:var(--accent);font-size:22px;transition:transform var(--duration)}.project-entry:hover .case-entry-label>span{transform:translate(2px,-2px)}
.project-2empoweru{margin-bottom:32px}.podcast-art{height:452px;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;padding:42px 62px;background:#dce7fa;align-items:center}.web-task-main{align-self:start;width:min(100%,415px);margin:auto;background:#fff;border:9px solid #ffffffa6;border-radius:15px;overflow:hidden;box-shadow:0 18px 30px #4b567623;max-height:368px}.web-task-main img{width:100%}.web-task-detail{min-width:0;max-width:500px}.web-task-detail>img{margin:18px 0;width:100%;box-shadow:0 10px 22px #35415c16;border-radius:6px}.web-task-detail>p{font:600 28px/1.12 var(--font-display);letter-spacing:-.04em;margin-bottom:14px}.web-task-detail .media-label{color:#4d506a}
.project-2empoweru .project-text{display:grid;grid-template-columns:1.1fr 1fr;gap:12px 70px;padding:32px 40px}.project-2empoweru .project-text>.eyebrow{grid-column:1/-1;margin:0}.project-2empoweru .project-text h3{grid-row:2/4;max-width:18ch;margin:0;font-size:43px}.project-2empoweru .project-detail{grid-column:2;margin:3px 0}.project-2empoweru .case-entry-label{grid-column:2}
.nyu-home-art{background:#e9e1ff}.nyu-home-art .project-phone{width:182px;flex-basis:182px;transform:rotate(-2deg);background:#fff;border-color:#fff;box-shadow:0 19px 25px #44396124}.nyu-home-art .display-caption>p{font-size:32px}
.research-home-art{background:#222132;color:#fff;align-items:stretch;padding:55px 32px 30px}.research-chain{width:100%}.research-chain>div{padding:19px 0;border-bottom:1px solid #635c7b}.research-chain>div>span{display:block;color:var(--citrus);font-size:12px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}.research-chain>div>p{font:500 27px/1.18 var(--font-display);letter-spacing:-.025em}.research-chain .media-source{color:#d8d3e4;margin-top:22px}
.decision-note{display:flex;align-items:flex-start;gap:12px;text-align:left}.note-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;min-height:30px;background:var(--note);border:1px solid #c8beeb;border-radius:6px;color:var(--accent-hover);font-size:12px;font-weight:600;line-height:1;letter-spacing:.04em}.decision-note p,.decision-note>span:last-child{font-size:15px;line-height:1.55;color:var(--ink);max-width:40ch}
.about-strip{padding-block:76px;background:#e9e2ff;border-block:1px solid #d4c9f3}.about-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:22px 80px}.about-grid>.eyebrow{grid-column:1/-1;color:#4c426d}.about-grid h2{font-size:48px;max-width:20ch}.about-grid p:not(.eyebrow){color:#4f4568;font-size:18px}.about-grid .text-link{margin-top:22px}
.site-footer{background:var(--ink);color:var(--canvas);padding:64px 0 24px;overflow:hidden}.footer-top{display:flex;justify-content:space-between;gap:48px}.site-footer .eyebrow{color:#c4badf}.site-footer h2{font-size:clamp(36px,4vw,56px);margin:18px 0 24px;max-width:19ch}.email{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(17px,2vw,25px);overflow-wrap:anywhere}.footer-links{display:flex;gap:24px;align-self:flex-end;flex-wrap:wrap}.footer-links a{display:flex;align-items:center;min-height:44px;font-size:14px}.footer-signature{margin-top:65px;max-width:none;line-height:.85}.footer-wordmark{font:600 clamp(80px,13.4vw,190px)/.85 var(--font-display);letter-spacing:-.07em;color:var(--ice)}.footer-small{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #5a526e;margin-top:34px;padding-top:20px;font-size:13px;color:#d4cde0}.footer-small a{display:inline-flex;align-items:center;min-height:44px}.footer-small>span{align-self:center}.site-footer a:hover{color:var(--citrus)}.site-footer a:focus-visible{outline-color:var(--citrus)}
/* Case pages keep their evidence flat, large and readable. */
.case-hero{padding:28px 0 42px}
.back-link{display:inline-flex;align-items:center;min-height:44px;margin-bottom:20px;font-size:14px}
.case-hero .eyebrow{color:var(--accent);margin-bottom:20px}
.case-hero h1{font-size:clamp(44px,5.55vw,78px);max-width:22ch;line-height:1.06}
.case-summary{max-width:66ch;font-size:20px;line-height:1.6;color:var(--muted);margin-top:25px}
.case-meta{display:grid;grid-template-columns:1fr 1fr;gap:25px 64px;margin:30px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.case-meta dt{font-size:12px;letter-spacing:.065em;text-transform:uppercase;margin-bottom:7px;color:var(--muted)}
.case-meta dd{margin:0;max-width:62ch;font-size:15px;line-height:1.65}
.task-intro{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:48px;background:var(--surface);padding:42px;border-radius:var(--media-radius);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.task-intro h2{font-size:38px;max-width:18ch;margin:16px 0 22px}.task-intro p:not(.eyebrow){font-size:17px;max-width:42ch}
.task-intro .text-link{margin-top:20px}
.task-screen{display:grid;grid-template-columns:minmax(0,286px) minmax(0,1fr);gap:25px;align-items:center;min-width:0}
.task-screen img{width:100%}
.task-screen .decision-note+.decision-note{margin-top:25px}
.task-screen .decision-note p{font-size:15px}
.task-screen small{display:block;font-size:12px;line-height:1.6;color:var(--muted);margin-top:25px}
.task-screen figcaption>span{display:block;font-size:15px;line-height:1.5;margin:16px 0}
.case-layout{display:grid;grid-template-columns:184px minmax(0,1fr);gap:64px;margin:64px 0 80px}
.case-layout.wrap{margin-inline:auto}
.case-layout>div{min-width:0}
.case-nav{position:sticky;top:25px;align-self:start;border-top:1px solid var(--ink);padding-top:17px}
.case-nav .eyebrow{margin-bottom:10px}
.case-nav a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:14px;line-height:1.45;color:var(--muted);text-decoration:none}
.case-nav a:hover{color:var(--accent);text-decoration:underline}
.case-section{margin-bottom:72px;scroll-margin-top:28px}
.case-section>.eyebrow{color:var(--accent);margin-bottom:12px}
.case-section h2{font-size:clamp(29px,3vw,39px);max-width:27ch;line-height:1.15;margin-bottom:24px}
.case-section h3{font-size:22px;line-height:1.3}
.case-section p{font-size:18px;line-height:1.65;color:#343440;max-width:65ch}
.case-section>p+.evidence-note{margin-top:27px}
.caption{font-size:14px;line-height:1.6;color:var(--muted);margin-top:14px;max-width:90ch}
.case-section>.caption{font-size:14px}
.evidence{margin:32px 0;background:var(--surface);padding:24px;border-radius:var(--media-radius)}
.evidence>a{display:flex;justify-content:center}
.evidence img{width:100%;max-height:660px;object-fit:contain}
.evidence figcaption{font-size:14px;line-height:1.6;color:var(--muted);margin-top:20px;max-width:78ch}
.evidence figcaption strong{color:var(--ink)}
.evidence figcaption a{display:inline-flex;align-items:center;min-height:44px;margin-top:3px}
.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0}
.evidence-grid .evidence{margin:0;min-width:0}
.phone-comparison .evidence img{width:auto;max-width:100%;max-height:625px}
.evidence-note,.takeaway{padding:22px 26px;border-left:3px solid var(--accent);background:var(--wash);margin:28px 0}
.evidence-note strong{font-size:15px}.evidence-note p{font-size:15px;margin-top:8px}
.takeaway p{font-size:17px}
.decision-tradeoff{border-top:1px solid var(--line);padding-top:24px;margin-top:30px}
.decision-tradeoff h3{margin-bottom:12px}
.role-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0}
.role-matrix article{padding-top:17px;border-top:1px solid var(--ink)}
.role-matrix .eyebrow{font-size:12px;margin-bottom:12px}
.role-matrix h3{font-size:20px;margin-bottom:12px}
.role-matrix p{font-size:16px}
.task-sequence{display:grid;grid-template-columns:1fr 1fr;gap:28px;list-style:none;padding:0;margin:32px 0}
.task-sequence>li{min-width:0}
.task-sequence>li>h3{display:flex;align-items:center;gap:12px;font-size:18px}
.task-sequence>li>h3 span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:30px;background:var(--note);color:var(--accent-hover);border:1px solid #ccc4ee;border-radius:3px;font-size:13px}
.task-sequence .evidence{margin-top:16px}.task-sequence .evidence img{width:auto;max-height:610px}
.detail-note{border-block:1px solid var(--line);padding:16px 0;margin:28px 0}
.detail-note summary{cursor:pointer;font-size:16px;font-weight:600;min-height:44px;padding:8px 0}
.detail-note p{font-size:16px;margin-top:16px}
.delivery-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:32px 0}
.delivery-grid>div,.delivery-grid>article{padding:25px;background:var(--surface);border-radius:var(--media-radius)}
.delivery-grid h3{font-size:22px;margin-bottom:12px}
.delivery-grid ul,.delivery-grid ol{padding-left:20px;font-size:16px;color:var(--muted);margin-bottom:0}
.delivery-grid li{margin:12px 0}
.case-cover{padding:32px;display:flex;align-items:center;justify-content:center;gap:24px;background:var(--surface);border-radius:var(--media-radius)}
.case-cover img{width:100%;max-height:650px;object-fit:contain}
.case-cover.phones img{width:auto;max-width:45%;max-height:620px}
.second-cover{background:#e9e5ff}.second-cover img{max-height:none;max-width:900px}
.hf-cover{grid-template-columns:.85fr 1.4fr;gap:34px}
.hf-cover figure{min-width:0}.hf-cover img{width:100%}
.hf-cover .caption{font-size:14px;max-width:none}
.hf-task-media{min-width:0}
.hf-operation-detail{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px;align-items:center;margin-top:28px}
.hf-panel-crop{display:block;overflow:hidden;aspect-ratio:340/395;max-width:340px;width:100%}
.hf-panel-crop img{width:252.647% !important;max-width:none !important;height:auto}
.hf-operation-detail .caption{margin-top:18px}
.second-cover{display:block}
.second-cover>a{display:block;max-width:900px;margin:auto}
.second-cover figcaption{max-width:900px;margin:26px auto 0}
.second-cover .caption{margin-top:16px}
.research-case-chain>div:first-child{padding-top:0}
.task-intro .research-case-chain>div>p{font-size:24px;max-width:none}
.research-case-chain>.decision-note{padding-block:24px;border-bottom:0}
.research-case-chain>.decision-note>.note-number{margin-bottom:0;display:flex;color:var(--accent)}
.task-intro .research-case-chain>.decision-note>p{font-size:15px;letter-spacing:0;line-height:1.55}
.task-intro .research-case-chain>.caption{font-size:13px;max-width:none}
.hf-paths{padding:28px;background:var(--wash);margin:30px 0;border-radius:var(--media-radius)}
.hf-paths .delivery-grid{margin-bottom:0}.hf-paths .delivery-grid>article{background:var(--paper)}
.hf-screen-comparison{grid-template-columns:1fr}.hf-screen-comparison .evidence img{max-height:none}
.hf-case .case-section>h3{margin:30px 0 15px}
.hf-version-table,.table-scroll{overflow-x:auto;margin:28px 0}
.hf-version-table table,.comparison{border-collapse:collapse;width:100%;font-size:15px}
.hf-version-table caption{text-align:left;font-weight:600;margin-bottom:12px}
.hf-version-table th,.hf-version-table td,.comparison th,.comparison td{padding:15px;border:1px solid var(--line);vertical-align:top;text-align:left}
.hf-version-table th,.hf-version-table td{min-width:140px}
.hf-version-table th,.comparison th{background:var(--wash)}
.listening-task{margin-top:32px}
.listening-task>article{padding:25px 0 8px;border-top:1px solid var(--line)}
.listening-task .eyebrow{font-size:12px;color:var(--accent);margin-bottom:12px}
.listening-task h3{margin-bottom:14px}.listening-task .evidence img{width:100%;max-height:none;margin:auto}
.brand-summary{background:var(--surface);padding:28px;margin:26px 0}
.brand-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.brand-swatches span{display:block;height:72px;border:1px solid #b9b5c8;margin-bottom:10px}
.brand-swatches strong,.brand-swatches code{display:block;font-size:14px}.brand-swatches code{font-size:12px}
.brand-summary p.caption{font-size:14px}
.case-section article.evidence h3{margin:12px 0}
.flow{padding:26px;background:var(--surface);margin:30px 0}
.flow h3{font-size:20px;margin-bottom:20px}
.flow ol{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.flow li{padding:12px 16px;border:1px solid var(--line);background:var(--paper);font-size:16px}
.flow li+li::before{content:'→';margin-right:12px;color:var(--accent)}
.flow .caption{font-size:14px}
.pill{display:inline-block;padding:4px 10px;border:1px solid var(--line);font-size:14px;color:var(--muted)}
.task-steps{padding-left:24px;margin:25px 0}.task-steps li{margin:16px 0;padding-left:8px}
.next-project{display:flex;justify-content:space-between;gap:28px;border-top:1px solid var(--ink);padding:26px 0 58px}
.next-project a{display:inline-flex;align-items:center;min-height:44px;font-size:18px}
.about-hero{display:grid;grid-template-columns:1.4fr .6fr;gap:90px;padding:64px 0}
.about-hero h1{margin:22px 0 26px}
.about-hero p{font-size:21px;color:var(--muted);max-width:48ch}
.portrait img{width:100%;max-height:420px;object-fit:cover;border-radius:var(--media-radius)}
.about-body{max-width:720px;padding-bottom:64px}.about-body section{margin-bottom:40px}
.about-body h2{font-size:33px;margin:36px 0 22px}
.about-body p{color:var(--muted)}.about-body .text-link{margin-top:16px}
.resume-note{background:var(--surface);padding:25px;margin:30px 0}.resume-note .button{margin-top:16px}
/* Modal media viewer; native image links remain useful with scripts unavailable. */
.image-open{overflow:hidden}
.image-dialog{width:min(96vw,1180px);max-width:none;max-height:94dvh;padding:20px 24px 24px;border:1px solid var(--line);border-radius:var(--media-radius);background:var(--paper);color:var(--ink)}
.image-dialog::backdrop{background:#181824df}
.image-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-bottom:16px}
.image-toolbar h2{font-size:20px;letter-spacing:-.02em}
.image-controls{display:flex;gap:10px}
.image-controls button{border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:9px 14px;min-height:44px;font-size:15px;cursor:pointer}
.image-controls button:disabled{color:#747180;border-color:#c9c4d6;cursor:default}
.image-controls button:not(:disabled):hover{background:var(--note)}
.image-stage{overflow:auto;max-height:65dvh;padding:20px;background:#ede9f8;overscroll-behavior:contain}
.image-stage img{width:auto;max-width:100%;max-height:none;margin:auto}
.image-stage img[hidden]{display:none}.image-stage.is-actual img{max-width:none}
.image-description{font-size:14px;color:var(--muted);margin-top:14px}
.image-original{display:inline-flex;align-items:center;min-height:44px;font-size:14px}

.case-hero>.eyebrow{display:inline-flex;border:1px solid #d3c7f2;background:#e9e3ff;color:#423364;border-radius:999px;padding:7px 13px;letter-spacing:.035em}.case-hero>.back-link{display:flex;width:max-content}
.dd-case .task-intro{background:#e8e1ff}.nyu-case .task-intro{background:#eee8ff}.hf-cover{background:#eae4f7}.task-screen>a{padding:8px;background:#ffffff8c;border:1px solid #fff;border-radius:12px;box-shadow:0 14px 24px #3f365c1b}.task-screen .decision-note p{font-size:15px}.task-screen small{font-size:13px}.evidence{border:1px solid var(--line);background:#f2eff9}.evidence img{border-radius:3px}
.task-intro .research-case-chain{padding:25px;background:#ebe4ff;border-radius:20px}.research-case-chain>div{border-color:#c6b9e5}.research-case-chain>div>span{color:#514279}.research-case-chain>div>p{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em}.research-case-chain>.decision-note{border:0}.research-case-chain>.caption{color:var(--muted)}
.about-hero{align-items:center}.about-hero h1{font-size:clamp(64px,7.5vw,104px);line-height:1}.about-eyebrow{display:flex;align-items:center;gap:15px}.about-arrow{display:inline-block;width:75px}.about-arrow img{width:100%}.portrait{padding:10px;background:var(--ice);border:1px solid #fff;border-radius:28px;transform:rotate(2deg);box-shadow:var(--shadow-card)}.portrait img{border-radius:20px}.about-body h2{font-size:36px}.resume-note{border:1px solid var(--line);border-radius:20px;background:var(--wash)}
.dd-case .task-intro a:hover{color:var(--accent-hover)}
.nav-pill{-webkit-backdrop-filter:blur(14px)}.collectible{-webkit-backdrop-filter:blur(12px)}
.collectible-caption{background:#f8f6ff;border-radius:0 0 12px 12px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav-pill{background:#f4f0ff}.collectible{background:#ebe4fc}.collectible-front{background:#f8f6ff}}
@media(max-width:1100px){
 .wrap{width:calc(100% - 64px)}.hero{gap:30px;padding-block:48px 70px}.hero h1{font-size:80px}.hero .intro{font-size:18px}.hero-scene{height:460px}.hero-arrow{width:130px;left:-18px;top:-22px}.collectible-front{top:107px;width:92%}.collectible-back{height:330px}.collectible-caption strong{font-size:20px}.collectible-label{font-size:10px}.collection-seal{font-size:11px}
 .project-pair{gap:24px}.project-art{height:435px;gap:22px;padding:62px 24px 28px}.project-phone{width:161px;flex-basis:161px}.display-caption>p{font-size:28px}.pet-art::before{left:32px;top:92px;width:172px;height:300px}.project-text{padding:26px}.project-text h3{font-size:32px}.hf-home-art{padding-inline:22px}.hf-home-art .display-caption{display:block}.hf-home-art .display-caption>p{font-size:27px}.hf-home-art .media-source{margin-top:16px;max-width:none}.nyu-home-art .project-phone{width:158px;flex-basis:158px}.nyu-home-art .display-caption>p{font-size:27px}.research-chain>div>p{font-size:25px}
 .podcast-art{height:410px;padding:38px 44px;gap:38px}.web-task-main{max-height:334px}.project-2empoweru .project-text{gap:12px 35px;padding:30px}.project-2empoweru .project-text h3{font-size:38px}.case-layout{grid-template-columns:150px minmax(0,1fr);gap:34px}.task-intro{gap:30px;padding:32px}.task-screen{grid-template-columns:minmax(0,248px) minmax(0,1fr);gap:20px}.task-intro h2{font-size:34px}.hf-cover{grid-template-columns:.8fr 1.2fr}.role-matrix{gap:18px}.role-matrix h3{font-size:20px}.about-grid{gap:24px 44px}.about-grid h2{font-size:40px}
}
@media(max-width:850px){
 .nav-wrap{gap:18px}.brand{font-size:25px}.site-nav a{padding-inline:14px;min-width:62px}.nav-contact{padding-inline:15px;min-width:90px}
 .hero{grid-template-columns:1fr;gap:52px;padding-block:35px 64px}.hero h1{font-size:88px}.hero .intro{max-width:42ch}.hero-scene{width:min(100%,530px);height:520px;margin:auto}.hero-arrow{width:150px;left:-16px;top:-23px}.collectible-front{top:127px;width:88%}.collectible-back{height:380px}.collectible-caption strong{font-size:24px}.collectible-label{font-size:12px}.collection-seal{font-size:12px}
 .section-heading h2{font-size:45px}.section-heading>p{font-size:14px}.project-pair{grid-template-columns:1fr;gap:30px}.project-art{height:470px;gap:45px}.project-phone{width:190px;flex-basis:190px}.display-caption>p{font-size:36px}.display-caption{max-width:235px}.pet-art .display-caption{max-width:215px}.pet-art::before{left:calc(50% - 220px);top:82px;width:207px;height:350px}.hf-home-art{padding-inline:35px;gap:28px}.hf-home-art .display-caption{display:flex;gap:35px}.hf-home-art .media-source{margin:0;max-width:24ch}.hf-home-art .display-caption>p{font-size:32px}.landscape-frame{max-width:570px}.project-text h3{font-size:38px;max-width:25ch}.project-text{padding:30px}.project-text>p:not(.eyebrow){font-size:17px}.project-detail{font-size:14px}.nyu-home-art .project-phone{width:180px;flex-basis:180px}.nyu-home-art .display-caption>p{font-size:33px}.research-home-art{height:auto;min-height:405px;padding:65px 34px 34px}.research-chain>div>p{font-size:30px}
 .podcast-art{grid-template-columns:1fr 1fr;height:410px;padding:55px 28px 28px;gap:25px}.web-task-detail>p{font-size:26px}.web-task-main{max-height:325px}.project-2empoweru .project-text{column-gap:28px}.project-2empoweru .project-text h3{font-size:35px}
 .task-intro{grid-template-columns:1fr;gap:30px;padding:32px}.task-intro h2{max-width:24ch}.task-intro p:not(.eyebrow){max-width:60ch}.task-screen{grid-template-columns:minmax(0,286px) minmax(0,1fr);max-width:620px;margin:auto;gap:32px}.case-layout{display:block;margin-top:40px}.case-nav{position:static;display:flex;flex-wrap:wrap;gap:0 24px;border-bottom:1px solid var(--line);padding:15px 0;margin-bottom:42px}.case-nav .eyebrow{width:100%;margin:0}.case-nav a{max-width:240px}.case-hero h1{font-size:56px}.case-meta{gap:24px 32px}.hf-cover{grid-template-columns:1fr}.hf-cover img{max-width:100%}.about-hero{gap:40px}.footer-top{display:block}.footer-links{margin-top:28px}
}
@media(max-width:600px){
 .wrap{width:calc(100% - 40px)}body{font-size:17px}.nav-wrap{grid-template-columns:1fr auto;gap:15px;padding:20px 0 12px;min-height:130px}.brand{font-size:26px}.site-nav{grid-column:1/-1;grid-row:2;justify-self:start}.nav-pill{padding:4px;gap:3px}.site-nav a{font-size:13px;padding:8px 19px;min-width:70px;min-height:44px}.nav-contact{grid-column:2;grid-row:1;font-size:13px;min-height:44px;padding:9px 15px;min-width:86px}
 .hero{gap:44px;padding-block:28px 62px}.hero .eyebrow{font-size:11px;letter-spacing:.015em;margin-bottom:23px}.hero h1{font-size:56px;line-height:.98;letter-spacing:-.055em}.hero .intro{font-size:17px;max-width:34ch;margin-top:23px}.hero-actions{gap:22px;margin-top:27px}.button{font-size:14px;min-height:54px;gap:14px;padding-left:19px}.button-arrow{width:32px;height:32px;flex-basis:32px;font-size:23px}.text-link{font-size:14px}.hero-scene{height:382px;border-radius:30px;width:100%;margin:0}.hero-arrow{width:104px;left:-7px;top:-13px}.collection-seal{top:-12px;right:13px;font-size:10px;padding:7px 10px}.collectible-back{right:10px;top:25px;width:51%;height:286px;padding:8px;border-radius:16px}.collectible-back figcaption{font-size:10px;padding:2px 3px 7px}.collectible-back figcaption>span{font-size:8px}.collectible-back img{width:88%}.collectible-front{left:0;top:95px;width:91%;padding:8px;border-radius:18px}.collectible-label{font-size:9px;padding:3px 4px 9px;gap:8px}.collectible-preview{border-radius:9px;aspect-ratio:1.6}.collectible-caption{padding:12px 5px 6px;gap:7px}.collectible-caption strong{font-size:19px}.collectible-caption span:not(.collectible-link){font-size:9px}.collectible-caption small{font-size:10px;line-height:1.4;margin-top:6px}.collectible-link{width:30px;height:30px;flex-basis:30px;font-size:21px}
 .section-heading{display:block;margin-bottom:26px}.section-heading .eyebrow{font-size:11px}.section-heading h2{font-size:39px;letter-spacing:-.055em}.work-count{font-size:11px;margin-left:10px;padding:6px}.section-heading>p{margin-top:17px;font-size:14px}.section-heading>p br{display:none}.selected{padding-bottom:52px}.project-pair{gap:25px;margin-bottom:25px}.project-2empoweru{margin-bottom:25px}.project-entry{border-radius:22px}.project-art{height:400px;padding:60px 20px 26px;gap:21px}.collection-index{left:18px;top:17px;font-size:11px;padding:5px 9px;border-radius:6px}.project-phone{width:147px;flex-basis:147px;padding:6px;border-radius:10px}.display-caption>p{font-size:26px;margin:12px 0 17px}.display-caption .media-label{font-size:9px}.media-source{font-size:11px;line-height:1.5}.pet-art .display-caption{max-width:130px}.pet-art::before{left:19px;top:93px;width:153px;height:281px}.hf-home-art{height:auto;min-height:385px;gap:28px;padding:64px 20px 28px}.landscape-frame{padding:5px;border-radius:10px}.landscape-frame img{border-radius:5px}.hf-home-art .display-caption{display:block}.hf-home-art .display-caption>p{font-size:30px}.hf-home-art .media-source{margin-top:18px;max-width:none;font-size:12px}
 .project-text{padding:24px 22px}.project-text>.eyebrow{font-size:10px;line-height:1.5;margin-bottom:14px}.project-text>.eyebrow>span{display:block;margin-top:4px}.project-text h3{font-size:32px;max-width:20ch;margin-bottom:17px}.project-text>p:not(.eyebrow){font-size:16px}.project-detail{font-size:12px;gap:10px;margin:21px 0 18px}.project-detail div{grid-template-columns:54px minmax(0,1fr);gap:10px}.case-entry-label{font-size:14px}
 .podcast-art{height:auto;display:block;padding:64px 20px 28px}.web-task-main{width:100%;max-height:340px;margin:0 auto 27px;border-width:6px;border-radius:10px}.web-task-detail>img{margin:13px 0 18px}.web-task-detail .media-label{font-size:10px}.web-task-detail>p{font-size:28px}.web-task-detail .media-source{font-size:12px}.project-2empoweru .project-text{display:block;padding:24px 22px}.project-2empoweru .project-text h3{font-size:32px;margin:16px 0 17px}.project-2empoweru .project-detail{margin:21px 0 18px}.nyu-home-art .project-phone{width:142px;flex-basis:142px}.nyu-home-art .display-caption>p{font-size:26px}.research-home-art{height:auto;min-height:0;padding:57px 24px 28px}.research-chain>div{padding-block:20px}.research-chain>div>p{font-size:26px}.research-chain .media-source{font-size:12px}
 .about-strip{padding-block:44px}.about-grid{grid-template-columns:1fr;gap:22px}.about-grid h2{font-size:36px}.about-grid p:not(.eyebrow){font-size:17px}.site-footer{padding-top:44px}.site-footer h2{font-size:37px}.footer-links{gap:12px 25px}.footer-signature{margin-top:43px}.footer-wordmark{font-size:80px}.footer-small{display:block;margin-top:27px;padding-top:17px;font-size:12px}.footer-small>span{display:block;margin-bottom:7px}
 .case-hero{padding:22px 0 30px}.back-link{margin-bottom:16px}.case-hero>.eyebrow{font-size:10px;margin-bottom:16px;border-radius:12px;max-width:100%}.case-hero h1{font-size:42px;max-width:18ch;line-height:1.06}.case-summary{font-size:18px;margin-top:22px}.case-meta{grid-template-columns:1fr;gap:22px;margin-top:26px;padding-top:22px}.case-meta dd{font-size:15px}.task-intro{padding:25px 20px;gap:28px;border-radius:22px}.task-intro h2{font-size:32px;max-width:20ch;margin-block:15px 20px}.task-intro p:not(.eyebrow){font-size:17px}.task-screen{display:block;width:100%;max-width:390px}.task-screen>a{display:block;margin-inline:auto;max-width:286px;padding:6px}.task-screen figcaption{margin-top:24px}.task-screen .decision-note+.decision-note{margin-top:18px}.task-screen small{font-size:13px;margin-top:22px}.task-screen figcaption>span{font-size:15px}.case-layout{margin:34px 0 48px}.case-nav{gap:0 18px;margin-bottom:34px}.case-nav a{font-size:13px;max-width:100%}.case-section{margin-bottom:48px}.case-section h2{font-size:32px;line-height:1.12;margin-bottom:22px}.case-section h3{font-size:22px}.case-section p{font-size:17px}.evidence{padding:18px 16px;margin-block:26px;border-radius:20px}.evidence img{max-height:none}.evidence figcaption{font-size:14px;margin-top:18px}.evidence-grid{grid-template-columns:1fr;gap:22px;margin-block:26px}.phone-comparison .evidence img{width:100%;max-width:340px;max-height:none}.evidence-note,.takeaway{padding:20px;margin-block:25px}.evidence-note p{font-size:15px}.role-matrix{grid-template-columns:1fr;gap:24px}.role-matrix h3{font-size:21px}.role-matrix p{font-size:16px}.task-sequence{grid-template-columns:1fr;gap:18px}.task-sequence .evidence img{width:100%;max-height:none;max-width:340px}.delivery-grid{grid-template-columns:1fr;gap:20px}.delivery-grid>div,.delivery-grid>article{padding:22px;border-radius:18px}.detail-note p{font-size:16px}.case-cover{padding:18px;border-radius:22px}.case-cover img{max-height:none}.hf-cover{padding:25px 20px}.hf-paths{padding:20px}.hf-paths .delivery-grid{gap:18px}.hf-operation-detail{grid-template-columns:1fr;gap:22px}.hf-panel-crop{margin:auto}.hf-version-table th,.hf-version-table td{padding:12px;min-width:126px;font-size:14px}.brand-summary{padding:20px}.brand-swatches{grid-template-columns:1fr 1fr}.flow{padding:20px}.flow ol{display:block}.flow li+li{margin-top:12px}.next-project{flex-direction:column;gap:15px;padding:24px 0 40px}.about-hero{grid-template-columns:1fr;gap:30px;padding:38px 0}.about-hero h1{font-size:64px}.about-hero p{font-size:18px}.about-arrow{width:55px}.portrait{width:280px;max-width:100%;margin:0 auto}.about-body h2{font-size:32px}.image-dialog{padding:16px;max-height:96dvh;border-radius:22px}.image-toolbar{gap:12px}.image-toolbar h2{font-size:18px}.image-controls button{font-size:14px;padding:8px 12px}.image-stage{padding:10px;max-height:58dvh}.task-intro .research-case-chain{padding:20px}.task-intro .research-case-chain>div>p{font-size:24px}
}
@media(max-width:380px){.hero h1{font-size:51px}.hero-actions{gap:18px}.button{font-size:13px;gap:12px}.hero-scene{height:357px}.collectible-front{top:94px}.collectible-caption strong{font-size:17px}.project-art{padding-inline:16px;gap:16px}.project-phone{width:138px;flex-basis:138px}.display-caption>p{font-size:24px}.nyu-home-art .project-phone{width:132px;flex-basis:132px}.nyu-home-art .display-caption>p{font-size:24px}.case-hero h1{font-size:39px}.section-heading h2{font-size:36px}.work-count{font-size:10px}.footer-wordmark{font-size:73px}}
/* Content sets the media height when text grows; the normal-size composition stays intact. */
.nav-pill{flex-wrap:wrap}.site-nav a{flex-shrink:0}
.project-art{height:auto;min-height:478px}.podcast-art{min-height:452px}
.media-source{font-size:14px}.project-detail{font-size:14px}
.collectible-caption small,.collectible-caption span:not(.collectible-link){font-size:12px}
.hero-scene{height:29.556em}.collectible-front{top:7em}
@media(max-width:1100px){.project-art{min-height:435px}.podcast-art{min-height:410px}.hero-scene{height:25.556em}.collectible-front{top:5.945em}}
@media(max-width:850px){.project-art{min-height:470px}.podcast-art{min-height:410px}.research-home-art{min-height:405px}.hero-scene{height:28.889em}.collectible-front{top:7.056em}}
@media(max-width:600px){.project-art{min-height:400px}.hf-home-art{min-height:385px}.research-home-art,.podcast-art{min-height:0}.media-source,.hf-home-art .media-source,.web-task-detail .media-source,.research-chain .media-source{font-size:13px}.project-detail{font-size:14px}.hero-scene{height:22.471em}.collectible-front{top:5.588em}.collectible-caption small,.collectible-caption span:not(.collectible-link){font-size:12px}}
@media(max-width:380px){.hero-scene{height:22.471em}.collectible-front{top:5.53em}}
@media(hover:none){.project-entry:hover{transform:none}.collectible-front:hover{transform:rotate(-1.5deg)}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .button:active,.project-entry:hover,.project-entry:active,.project-entry:hover .case-entry-label>span{transform:none}
 .collectible-front:hover{transform:rotate(-1.5deg)}
}
@media print{.site-header,.site-footer,.case-nav,.next-project,.back-link,.image-dialog{display:none}body{background:#fff}.wrap{width:100%}.case-layout{display:block}.hero{padding:24px 0}.case-section{break-inside:auto}.evidence,.task-sequence>li{break-inside:avoid}a{color:inherit}.project-entry,.task-intro{box-shadow:none}.hero-scene{display:none}}