@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root { --ink:#1d2530; --muted:#5c6670; --cream:#fffaf1; --paper:#f5ecdc; --yellow:#f6bc38; --coral:#f4725a; --teal:#217c7c; --line:#ded6c7; --focus:#074b91; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:'DM Sans',Arial,sans-serif; font-size:18px; line-height:1.55; }
a { color:inherit; text-underline-offset:4px; } a:focus-visible { outline:3px solid var(--focus); outline-offset:4px; border-radius:2px; }
.skip-link { position:absolute; left:1rem; top:-5rem; background:#fff; padding:.65rem 1rem; z-index:5; }.skip-link:focus { top:1rem; }
.site-header { max-width:1280px; min-height:92px; margin:auto; padding:18px 42px; display:flex; justify-content:space-between; align-items:center; gap:32px; }
.brand { text-decoration:none; display:flex; align-items:center; gap:12px; line-height:1.1; }.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--yellow); font-family:Fraunces,serif; font-size:22px; }.brand small { display:block; margin-top:5px; color:var(--muted); font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
nav { display:flex; flex-wrap:wrap; gap:24px; } nav a { font-size:16px; font-weight:700; text-decoration:none; } nav a:hover { text-decoration:underline; }
.hero { min-height:620px; padding:90px max(42px,calc(50vw - 598px)); display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:80px; background:var(--paper); }.eyebrow,.project-label { color:#684719; font:500 12px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3 { font-family:Fraunces,Georgia,serif; line-height:1.07; margin:0; }h1 { max-width:700px; font-size:clamp(45px,5.3vw,78px); letter-spacing:-.055em; }h2 { font-size:clamp(36px,4vw,58px); letter-spacing:-.045em; }h3 { font-size:30px; letter-spacing:-.03em; }.lede { max-width:610px; color:#39434e; font-size:21px; }.actions,.case-actions { margin-top:34px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }.button { display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:999px; background:var(--ink); color:#fff; font-weight:700; text-decoration:none; }.button:hover { background:#39434e; }.text-link,.project-content>a,.linkedin { font-weight:700; }
.hero-art { position:relative; min-height:370px; }.sun { position:absolute; width:290px; height:290px; right:15%; top:18px; border-radius:50%; background:var(--coral); }.paper { position:absolute; border-radius:6px; box-shadow:0 16px 26px rgba(94,68,49,.14); }.paper.one { width:250px; height:315px; right:9%; top:75px; background:#fffdf7; transform:rotate(7deg); }.paper.two { width:205px; height:250px; right:42%; top:108px; background:var(--teal); transform:rotate(-9deg); }.note { position:absolute; width:225px; right:0; bottom:9px; padding:22px; background:var(--yellow); font:600 21px/1.15 Fraunces,serif; transform:rotate(-3deg); box-shadow:0 10px 24px rgba(94,68,49,.14); }
.proof { max-width:1196px; padding:34px 0; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); }.proof div { border-left:1px solid var(--line); padding:0 28px; }.proof div:first-child { border-left:0; }.proof strong,.proof span { display:block; }.proof strong { font-family:Fraunces,serif; font-size:25px; }.proof span { color:var(--muted); font-size:15px; }
.section { max-width:1196px; margin:auto; padding:110px 0; }.section-heading { max-width:760px; }.section-heading>p:last-child { color:var(--muted); max-width:650px; }.project-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:48px; }.project-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:12px; }.project-card.featured { grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; }.project-content { padding:30px; }.project-content p { color:var(--muted); }.project-content>a { display:inline-block; margin-top:12px; }.tags { display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 0; padding:0; list-style:none; }.tags li { padding:5px 9px; background:#e8f1ed; border-radius:999px; color:#16534f; font-size:13px; font-weight:700; }.project-art { min-height:225px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; font-family:Fraunces,serif; }.project-art>span { position:relative; z-index:1; }.authorization { background:#dfeeea; color:var(--teal); font-size:100px; }.authorization i,.authorization b { position:absolute; display:block; background:var(--yellow); border-radius:50%; }.authorization i { height:180px; width:180px; left:12%; top:18%; }.authorization b { height:230px; width:230px; right:-13%; bottom:-35%; background:var(--coral); }.eligibility { background:#f7d6ca; gap:16px; font-size:32px; color:#8d332a; }.eligibility span:first-child { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:#fff9f1; }.conventions { background:#d5e5e9; gap:15px; color:#185e67; font-size:28px; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:80px; border-top:1px solid var(--line); }.about-copy>p { font-size:23px; }.checklist { margin:30px 0; padding:0; list-style:none; }.checklist li { padding:10px 0 10px 31px; position:relative; border-bottom:1px solid var(--line); }.checklist li::before { content:'✓'; position:absolute; left:0; color:#0f6a61; font-weight:700; }.secondary { background:var(--teal); }.secondary:hover { background:#155c5c; }.fun { max-width:1196px; margin:auto; padding:84px 8.5%; text-align:center; background:var(--yellow); border-radius:14px; }.fun>p:last-child { max-width:600px; margin:20px auto 0; }.contact { margin-top:110px; padding:102px 42px; text-align:center; background:var(--ink); color:#fff; }.contact .eyebrow { color:#f8d57e; }.contact h2 { max-width:760px; margin:auto; }.contact>p:not(.eyebrow) { color:#d5dce1; }.light { margin-top:16px; background:var(--yellow); color:var(--ink); }.light:hover { background:#ffd875; }.linkedin { display:block; margin-top:21px; color:#fff; }footer { max-width:1280px; margin:auto; padding:30px 42px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:14px; }
.resume-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;border-top:1px solid var(--line)}.resume-intro{max-width:500px;color:#39434e;font-size:22px}.resume-summary{display:grid;gap:0}.resume-summary section{padding:19px 0;border-top:1px solid var(--line)}.resume-summary section:first-child{border-top:0;padding-top:0}.resume-summary h3{font-size:1.45rem}.resume-summary p{margin:8px 0;color:var(--muted)}.resume-summary strong{color:var(--ink)}.resume-work-history{display:grid;gap:8px}.resume-work-history p{padding:10px 0;margin:0;border-bottom:1px solid var(--line)}.resume-work-history p:last-child{border-bottom:0;padding-bottom:0}.resume-work-history span{font-size:.93rem}.resume-summary .checklist{margin:8px 0}.resume-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:27px}.resume-hero{padding:88px max(42px,calc(50vw - 598px));background:var(--paper)}.resume-hero h1{max-width:880px}.resume-page{max-width:1196px;margin:auto;padding:92px 0;display:grid;grid-template-columns:1fr .38fr;gap:80px}.resume-main{display:grid;gap:72px}.resume-entry{display:grid;grid-template-columns:.72fr 1fr;gap:42px;padding:22px 0;border-top:1px solid var(--line)}.resume-entry h2{font-size:1.65rem}.resume-entry p{margin:0;color:#39434e}.resume-entry .resume-place{margin-top:7px;color:var(--muted);font:500 12px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase}.resume-sidebar{padding:26px 28px;height:max-content;border:1px solid var(--line);border-radius:12px;background:#e8f1ed}.resume-sidebar section+section{padding-top:18px;margin-top:20px;border-top:1px solid #bed2cc}.resume-sidebar .checklist{margin:10px 0}.resume-sidebar .checklist li{font-size:.95rem}
.case-intro { padding:95px max(42px,calc(50vw - 598px)); background:var(--paper); }.case-intro h1 { max-width:900px; }.case-study { display:grid; grid-template-columns:minmax(220px,.36fr) 1fr; gap:65px; padding:95px max(42px,calc(50vw - 598px)); border-bottom:1px solid var(--line); scroll-margin-top:20px; }.case-study.alternate { background:#e8f1ed; }.case-meta>p:last-child { margin:0; font:600 23px/1.2 Fraunces,serif; }.case-summary { max-width:790px; margin:15px 0 40px; color:#39434e; font-size:23px; }.case-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }.case-grid section { padding:22px; border-radius:8px; background:var(--cream); }.case-grid h3 { font-family:'DM Sans',Arial,sans-serif; font-size:18px; letter-spacing:0; }.case-grid p { margin-bottom:0; color:var(--muted); font-size:16px; }.compact { margin-top:0; }
.epa-hero { min-height:630px; padding:95px max(42px,calc(50vw - 598px)); display:grid; grid-template-columns:1.05fr .95fr; gap:75px; align-items:center; background:#e8f1ed; }.epa-hero h1 { max-width:720px; }.workflow-visual { position:relative; min-height:350px; overflow:hidden; border:1px solid #a6c9c4; border-radius:18px; background:#fcf9f1; }.visual-path { position:absolute; width:70%; height:70%; top:15%; left:15%; border-top:2px dashed var(--teal); border-right:2px dashed var(--teal); border-radius:0 100% 0 0; transform:rotate(37deg); opacity:.55; }.visual-node { position:absolute; display:grid; place-items:center; width:76px; height:76px; border:3px solid var(--ink); border-radius:50%; background:var(--yellow); font:700 36px Fraunces,serif; box-shadow:6px 7px 0 rgba(29,37,48,.23); }.node-one { left:12%; bottom:17%; }.node-two { top:18%; left:46%; background:var(--coral); }.node-three { right:9%; bottom:18%; background:#fff; }.visual-label { position:absolute; padding:7px 10px; border-radius:999px; background:var(--ink); color:#fff; font:500 12px 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }.visual-label-one { left:8%; top:13%; }.visual-label-two { left:40%; bottom:14%; }.visual-label-three { right:8%; top:13%; }.case-facts { max-width:1196px; margin:auto; padding:32px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border-bottom:1px solid var(--line); }.case-facts div { border-left:1px solid var(--line); padding-left:22px; }.case-facts div:first-child { border-left:0; padding-left:0; }.case-facts span { display:block; color:var(--muted); font:500 11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }.case-facts strong { display:block; margin-top:5px; font-size:16px; line-height:1.25; }
.narrative-section,.feature-section,.outcomes { max-width:1196px; margin:auto; padding:100px 0; }.narrative-section { display:grid; grid-template-columns:.7fr 1fr; gap:80px; }.narrative-section.soft { max-width:none; padding-left:max(42px,calc(50vw - 598px)); padding-right:max(42px,calc(50vw - 598px)); background:var(--paper); }.section-kicker h2 { font-size:clamp(38px,4.5vw,62px); }.narrative-copy { max-width:660px; }.narrative-copy p,.feature-copy p:not(.eyebrow) { color:#39434e; }.big-copy { margin-top:0; font:600 31px/1.18 Fraunces,serif; letter-spacing:-.03em; color:var(--ink)!important; }.lifecycle { grid-column:2; margin:12px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px; }.lifecycle li { display:flex; gap:14px; padding:17px; background:var(--cream); border-radius:10px; }.lifecycle li:last-child { grid-column:span 2; }.lifecycle span { color:var(--coral); font:500 13px 'DM Mono',monospace; }.lifecycle h3 { font-family:'DM Sans',Arial,sans-serif; font-size:18px; letter-spacing:0; }.lifecycle p { margin:5px 0 0; color:var(--muted); font-size:15px; line-height:1.35; }.feature-section { display:grid; grid-template-columns:1fr .9fr; gap:85px; align-items:center; }.feature-section.reverse { grid-template-columns:.9fr 1fr; }.feature-section.reverse .feature-copy { order:2; }.feature-copy h2 { margin:0 0 22px; font-size:clamp(38px,4.4vw,62px); }.ui-schematic { min-height:390px; padding:24px; border-radius:16px; border:1px solid #cdd7d2; background:#fffdf7; box-shadow:11px 12px 0 rgba(33,124,124,.14); color:var(--ink); font-size:14px; }.schematic-bar { height:23px; border-radius:4px; background:#d3ebe5; }.schematic-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:7px; margin:18px 0; }.schematic-grid span { height:56px; border:1px solid #bbc9c4; background:#f8f4eb; }.schematic-panels { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.schematic-panels div { min-height:165px; padding:11px; border:1px solid #cbd8d4; border-top:7px solid var(--teal); background:#fff; font-weight:700; }.schematic-panels b { float:right; color:var(--teal); font-size:22px; }.schematic-footer { display:flex; gap:9px; margin-top:18px; }.schematic-footer i { width:55px; height:12px; border-radius:9px; background:var(--yellow); }.worklist-ui { background:#f5fbf8; }.list-head,.list-row { display:grid; grid-template-columns:1fr .38fr 1.45fr; gap:10px; padding:10px; }.list-head { color:#4c5a61; border-bottom:2px solid #b8d6cf; font-weight:700; font-size:12px; }.list-row { min-height:53px; align-items:center; border-bottom:1px solid #dbe8e4; }.list-row:nth-child(3) { background:#dbf2e2; }.list-row i { width:75%; height:10px; background:#e8e2d8; }.list-row b { color:#198f67; font-size:25px; }.list-row em { color:#435058; font-style:normal; font-size:13px; }.icon-key { display:inline-block; margin-top:26px; padding:8px 10px; color:#176c57; background:#e1f5ec; font-size:13px; font-weight:700; }.response-ui { background:#f9fbfd; }.tab-row { display:flex; gap:6px; border-bottom:1px solid #bed2dd; }.tab-row>* { padding:8px 10px; background:#e6eef2; font-size:13px; }.tab-row b { background:var(--teal); color:#fff; }.response-top { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:20px 0; }.response-top span { min-height:63px; padding:9px 6px; background:#dcefeb; border-top:4px solid #68a69e; font-size:12px; }.response-cards { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.response-cards div { min-height:74px; padding:10px; border:1px solid #cbd8d4; background:#fff; }.response-cards div:last-child { grid-column:span 2; }.response-docs { margin-top:16px; padding:14px; text-align:center; background:#fff1cc; font-weight:700; }.response-docs small { display:block; margin-top:4px; color:#625747; font-weight:400; }.action-ui { max-width:450px; width:100%; justify-self:end; min-height:310px; padding:0; overflow:hidden; box-shadow:12px 12px 0 rgba(244,114,90,.14); }.modal-title { padding:15px 20px; background:var(--teal); color:#fff; font-weight:700; font-size:18px; }.modal-body { padding:28px 30px; }.modal-body strong { display:block; text-align:center; }.modal-body label { display:block; margin-top:24px; color:#a43422; font-weight:700; }.modal-body label small { font-weight:400; font-style:italic; }.modal-body label span { display:block; margin-top:6px; padding:9px 10px; border:2px solid var(--coral); border-radius:5px; color:#4b565d; font-weight:400; }.modal-buttons { display:flex; justify-content:center; gap:11px; padding:0 0 25px; }.modal-buttons b,.modal-buttons span { padding:9px 12px; border-radius:5px; background:var(--teal); color:#fff; font-size:13px; }.modal-buttons span { background:#e8e2d8; color:var(--ink); }.outcomes { display:grid; grid-template-columns:.9fr 1fr; gap:80px; }.outcomes h2 { font-size:clamp(38px,4.4vw,61px); }.outcome-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.outcome-grid div { padding:21px; border-radius:10px; background:#dfeeea; }.outcome-grid strong { font:600 21px/1.1 Fraunces,serif; }.outcome-grid p { margin:8px 0 0; color:#405057; font-size:15px; }.reflection { padding:105px max(42px,calc(50vw - 460px)); background:var(--coral); color:var(--ink); text-align:center; }.reflection h2 { max-width:800px; margin:auto; font-size:clamp(42px,5.2vw,73px); }.reflection>p:last-child { max-width:715px; margin:23px auto 0; font-size:20px; }
.research-section { max-width:1196px; margin:auto; padding:100px 0; }.research-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px; }.research-grid div { padding:20px; background:#fff; border:1px solid var(--line); border-radius:10px; }.research-grid h3 { font-family:'DM Sans',Arial,sans-serif; font-size:18px; letter-spacing:0; }.research-grid p { color:var(--muted); font-size:16px; }

/* Accessibility: high-visibility focus and a keyboard-only skip path. */
.skip-link { position:absolute; left:18px; top:-80px; z-index:20; padding:10px 14px; background:#fff; color:var(--ink); border:3px solid var(--focus); border-radius:4px; font-weight:700; text-decoration:none; }.skip-link:focus { top:18px; }
@media (max-width:800px) { body { font-size:17px; }.site-header { padding:18px 22px; align-items:flex-start; flex-direction:column; gap:16px; }nav { gap:16px; }.hero,.epa-hero { min-height:auto; padding:70px 22px; grid-template-columns:1fr; gap:28px; }.hero-art { min-height:285px; }.sun { width:220px; height:220px; }.paper.one { width:180px; height:225px; }.paper.two { width:150px; height:185px; }.note { font-size:17px; width:180px; }.proof,.case-facts { margin:0 22px; grid-template-columns:1fr; gap:18px; padding:28px 0; }.proof div,.proof div:first-child,.case-facts div,.case-facts div:first-child { border-left:0; border-top:1px solid var(--line); padding:16px 0 0; }.proof div:first-child,.case-facts div:first-child { border-top:0; padding-top:0; }.section { padding:75px 22px; }.project-grid,.project-card.featured,.about,.resume-section,.case-study,.case-grid,.narrative-section,.feature-section,.outcomes,.research-grid { grid-template-columns:1fr; }.project-card.featured { display:block; grid-column:span 1; }.about,.resume-section { gap:28px; }.resume-hero{padding:70px 22px}.resume-page{padding:72px 22px;grid-template-columns:1fr;gap:34px}.resume-main{gap:50px}.resume-entry{grid-template-columns:1fr;gap:13px}.fun { margin:0 22px; padding:65px 28px; }.contact { margin-top:75px; padding:80px 22px; }.case-intro,.case-study { padding:70px 22px; }.case-study { gap:25px; }.narrative-section,.feature-section,.outcomes,.research-section { padding:70px 22px; gap:32px; }.narrative-section.soft { padding:70px 22px; }.lifecycle { grid-column:auto; grid-template-columns:1fr; }.lifecycle li:last-child { grid-column:auto; }.feature-section.reverse .feature-copy { order:0; }.ui-schematic { min-height:330px; }.action-ui { justify-self:start; }.outcome-grid { grid-template-columns:1fr; }.reflection { padding:75px 22px; }footer { padding:28px 22px; flex-direction:column; } }

/* Keep the two eligibility initiatives related, while making their roles easy to tell apart. */
.project-art.eligibility-foundation{justify-content:center;text-align:center;background:#dfeeea;color:var(--teal)}
.project-art.eligibility-foundation span:first-child{width:auto;height:auto;padding:12px 18px;border:2px solid currentColor;border-radius:999px;background:var(--cream);font-size:28px;line-height:1}
.project-art.eligibility-partner{background:#f7d6ca;color:#8d332a}
.project-art.eligibility-partner span:first-child{background:var(--cream)}

.playground-intro{background:linear-gradient(145deg,#f5ecdc,#e6f0e8)}
.playground-gallery{max-width:1160px;margin:0 auto;padding:0 32px 88px;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.playground-card{overflow:hidden;background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 24px rgba(29,37,48,.06)}
.playground-cover{position:relative;overflow:hidden}.playground-card img{display:block;width:100%;height:280px;object-fit:cover;background:#f7f2e9}.playground-cover::after{position:absolute;left:14px;bottom:14px;padding:6px 9px;border:1px solid rgba(255,255,255,.55);border-radius:4px;color:#fff;font:700 10px/1 'DM Sans',Arial,sans-serif;letter-spacing:.08em;box-shadow:0 2px 8px rgba(24,15,54,.24)}.platform-axure::after{content:"◆  AXURE RP";background:#51339a}.platform-figma::after{content:"●  FIGMA";background:#353b48}.platform-xd::after{content:"XD  ADOBE XD";background:#470137}.playground-card div:not(.playground-cover){padding:22px}.playground-card h2{margin:6px 0 10px;font-size:1.35rem}.playground-card p:last-child{margin:0;color:var(--muted);line-height:1.55}.playground-card .text-link{display:inline-block;margin-top:13px}
.playground-cover.cover-contain{background:#f7f2e9}.playground-cover.cover-contain img{object-fit:contain;padding:8px}
.playground-cover.cover-showcase{height:280px;display:flex;align-items:center;justify-content:center}.playground-card .playground-cover.cover-showcase img{width:100%;height:100%;object-fit:contain;padding:0}.playground-cover.theater-showcase{background:linear-gradient(132deg,#286bd7 0%,#6e62be 50%,#e15596 100%)}.playground-cover.recipe-showcase{background:#fbede2}
@media (max-width:800px){.playground-gallery{grid-template-columns:1fr;padding:0 22px 70px}.playground-card img,.playground-cover.cover-showcase{height:230px}.playground-callout{margin:0 22px 70px}}

.prototype-embed{max-width:1160px;margin:0 auto 88px;padding:0 32px}.prototype-heading{max-width:700px;margin-bottom:24px}.prototype-heading h2{margin:.25rem 0 .6rem;font-size:clamp(2rem,4vw,3.35rem)}.prototype-heading p:last-child{color:var(--muted)}
.prototype-window{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#1d2530;box-shadow:0 16px 32px rgba(29,37,48,.14)}.prototype-window iframe{display:block;width:100%;height:720px;border:0;background:#fff}.prototype-fallback{margin:14px 0 0;color:var(--muted);font-size:.94rem}.prototype-fallback a{color:var(--teal);font-weight:700}
@media (max-width:800px){.prototype-embed{margin-bottom:70px;padding:0 22px}.prototype-window iframe{height:620px}}

/* Playground projects keep the tone lighter than the formal product case studies. */
.playground-project-hero{min-height:540px;padding:82px max(42px,calc(50vw - 598px));display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:68px;background:linear-gradient(145deg,#f5ecdc,#e6f0e8)}.playground-project-hero h1{margin:.25rem 0 .9rem}.playground-project-hero .text-link{display:inline-block;margin-top:18px}.playground-project-hero img{display:block;width:100%;max-height:430px;object-fit:contain;border:1px solid var(--line);border-radius:14px;background:#fffaf1;box-shadow:12px 12px 0 rgba(33,124,124,.1)}.playground-notes{max-width:1160px;margin:auto;padding:92px 0;display:grid;grid-template-columns:.7fr 1fr;gap:80px}.playground-notes h2{font-size:clamp(2.2rem,4vw,3.85rem)}.note-grid{display:grid;gap:12px}.note-grid section{padding:17px 0;border-top:1px solid var(--line)}.note-grid h3{font-family:'DM Sans',Arial,sans-serif;font-size:1rem;letter-spacing:0}.note-grid p{margin:5px 0 0;color:var(--muted);font-size:.96rem}
@media (max-width:800px){.playground-project-hero{min-height:auto;padding:70px 22px;grid-template-columns:1fr;gap:34px}.playground-project-hero img{max-height:300px;box-shadow:7px 7px 0 rgba(33,124,124,.1)}.playground-notes{padding:72px 22px;grid-template-columns:1fr;gap:30px}}

.recipe-project-hero img{background:#f9e9dd}.project-image-gallery{max-width:1160px;margin:auto;padding:0 0 96px}.project-image-gallery>div:first-child{max-width:720px;margin-bottom:30px}.project-image-gallery h2{margin:.25rem 0 0;font-size:clamp(2.2rem,4vw,3.85rem)}.project-image-gallery figure{margin:0}.project-image-gallery img{display:block;width:100%;border:1px solid var(--line);border-radius:14px;background:#f9e9dd;box-shadow:10px 10px 0 rgba(33,124,124,.1)}.project-image-gallery figcaption{margin:11px 2px 0;color:var(--muted);font-size:.92rem}.project-image-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:35px}.project-detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:42px}.project-detail-gallery img{background:#fff;object-fit:contain}

/* The theater project uses its own bright, cinematic visual language while keeping the Playground layout consistent. */
.theater-project-hero{background:linear-gradient(145deg,#fff0bc,#f8d9cb 48%,#d9e9df)}.theater-project-hero img{background:#fef7d4;box-shadow:12px 12px 0 rgba(178,42,35,.13)}.theater-gallery .project-image-wide img{background:#f6f0e7}.theater-gallery .project-image-pair>figure:first-child img{background:#9c1f1e}.theater-gallery .figma-board{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}.theater-gallery .figma-board img{width:min(100%,329px);justify-self:center;background:#f5f2ec;box-shadow:8px 8px 0 rgba(33,124,124,.1)}
@media (max-width:800px){.project-image-gallery{padding:0 22px 72px}.project-image-pair,.project-detail-gallery{grid-template-columns:1fr;gap:27px;margin-top:28px}.project-image-gallery img{box-shadow:6px 6px 0 rgba(33,124,124,.1)}}

/* Axure RP appears once on each relevant case-study cover, not on interior visuals. */
.axure-cover::after{content:"◆  AXURE RP";position:absolute;left:14px;bottom:14px;z-index:3;padding:6px 9px;border:1px solid rgba(255,255,255,.55);border-radius:4px;background:#51339a;color:#fff;font:700 10px/1 'DM Sans',Arial,sans-serif;letter-spacing:.08em;box-shadow:0 2px 8px rgba(24,15,54,.24)}