/* Quiet typography and image-led project pages. */
#contact-view{display:flex;flex-direction:column;align-items:center;gap:28px;padding:64px 5%;max-width:1120px}
.contact-notice{width:100%;background:var(--yellow);border:2px solid var(--ink);box-shadow:7px 8px 0 var(--ink);transform:rotate(-.6deg)}
.notice-copy{padding:44px 46px 34px}.notice-copy h1{font:400 clamp(2.4rem,7vw,5.8rem)/1.08 var(--display);letter-spacing:-.04em;margin:22px 0}.notice-copy p{font:400 1.125rem/1.6 var(--body);margin:12px 0}.notice-copy .notice-name{font-size:.875rem;margin-top:24px}
.tear-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:2px dashed var(--ink);background:var(--paper)}
.tear-tab{height:282px;display:flex;align-items:center;gap:16px;padding:22px 12px;writing-mode:vertical-rl;border-right:1px dashed var(--ink);background:var(--paper);transform-origin:top center;transition:transform .22s,background .22s;position:relative}
.tear-tab:last-child{border-right:0}.tear-tab span{font:500 .75rem/1.3 var(--body);letter-spacing:.07em;color:var(--green)}.tear-tab strong{font:700 .875rem/1.4 var(--body);white-space:nowrap}.tear-tab:hover,.tear-tab:focus-visible{transform:translateY(10px) rotate(3deg);background:var(--pink);z-index:1}.tear-tab:nth-child(even):hover{transform:translateY(10px) rotate(-3deg)}
.save-contact{font:700 1rem/1.5 var(--body);padding:14px 20px;border:1px solid var(--ink);background:white}.save-contact:hover{background:var(--yellow)}
@media(max-width:650px){header nav{grid-template-columns:repeat(3,minmax(0,1fr))}header nav #sound{grid-column:1/-1;justify-self:start}#contact-view{padding:36px 5%}.notice-copy{padding:28px 22px}.contact-notice{box-shadow:4px 5px 0 var(--ink)}.tear-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.repeat-tab{display:none}.tear-tab:nth-child(3){border-right:0}.tear-tab{padding:20px 8px;gap:11px}}
@media(prefers-reduced-motion:reduce){.tear-tab:hover,.tear-tab:focus-visible,.tear-tab:nth-child(even):hover{transform:none}}
header nav a{font-weight:500}#about-link{font-weight:700}
#map-view .landmark strong{font:700 clamp(1.25rem,2.8vw,2.35rem)/1.15 var(--body);letter-spacing:-.025em}
#about-view .about-heading h1{font:700 clamp(2rem,4.5vw,3.7rem)/1.08 var(--body);letter-spacing:-.04em}
.toolkit-copy h2{font:700 clamp(1.8rem,3.3vw,2.9rem)/1.12 var(--body);letter-spacing:-.04em}
#project-title{font:700 clamp(1.8rem,4vw,3.4rem)/1.12 var(--body);letter-spacing:-.04em}
.skills-section{margin-top:35px;padding-top:24px}.skills-heading{margin-bottom:14px}.skills-heading h2{font:500 .875rem/1.5 var(--body);letter-spacing:.06em;margin:0}.skill-list{display:flex;flex-wrap:wrap;gap:10px 28px}.skill-entry{display:block;border:0;padding:0}.skill-entry>span{display:none}.skill-entry h3{font:500 1.125rem/1.6 var(--body);margin:0}.skill-entry p:empty{display:none}.skill-entry p{max-width:30ch}.about-end{margin-top:30px}.about-end p{display:none}
#project-media.phone-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 34px;align-items:start}
.phone-gallery .brand-heading{grid-column:1/-1;margin:20px 0 0;padding:22px 0 0;border-top:1px solid #16171355;font:700 1.4rem/1.3 var(--body);letter-spacing:-.02em}
#project-media.phone-gallery .phone-figure{margin:0;min-width:0}#project-media.phone-gallery>figure:not(.phone-figure){grid-column:1/-1}
.phone-preview{display:block;width:100%;padding:0;background:none;border:0;text-align:inherit;min-height:0}
.phone-stage{position:relative;aspect-ratio:876/1794;width:100%;max-width:290px;margin:auto}
.phone-stage .device-frame{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none!important;pointer-events:none}
.phone-screen{position:absolute;left:8.22%;top:3.62%;width:83.68%;height:92.92%;overflow:hidden;border-radius:10%/5%;display:flex;flex-direction:column;justify-content:center;background:#f5f2f8;color:#35145c}
.phone-screen[data-brand=jawwy]{background:#fff6e6;color:#a63b00}
.phone-brand{display:block;padding:14% 8% 10%;font:700 clamp(.875rem,1.8vw,1.1rem)/1.3 var(--body);letter-spacing:-.015em}
.phone-label{display:block;padding:10% 8% 14%;font:500 .65rem/1.4 var(--body);letter-spacing:.09em}
.artwork-crop{position:relative;width:100%;overflow:hidden;flex-shrink:0;background:transparent}
.artwork-crop>img.cropped-source{position:absolute;display:block;max-width:none;max-height:none;margin:0;height:auto}
.artwork-crop>img:not(.cropped-source){display:block;width:100%;height:auto;max-height:none!important}
#project-media .artwork-crop>img.cropped-source,#preview-media .artwork-crop>img.cropped-source,#artwork-dialog .artwork-crop>img.cropped-source{position:absolute;display:block;max-width:none;max-height:none;margin:0;height:auto}
.phone-figure figcaption{font:400 .875rem/1.45 var(--body);text-align:center;margin:12px 0 0!important;color:#53564b}
.phone-preview:hover .phone-stage{transform:translateY(-4px)}.phone-stage{transition:transform .2s ease}
#artwork-dialog{width:min(780px,94vw);padding:22px;max-height:94dvh}.artwork-close{display:block;margin:0 0 18px auto;background:none;border:0;border-bottom:1px solid var(--ink);font:500 1rem/1.4 var(--body);padding:8px 0}#artwork-dialog>p{font-size:.875rem;margin:16px 0 0}
.phone-options{border-top:1px solid #ddd;padding-top:12px}.phone-options input[type=checkbox]{display:inline;width:auto;margin:0 8px 0 0}.phone-options>label{font-size:.875rem}.phone-options .mockup-brand{font-size:.875rem}
#preview-media .phone-figure{max-width:260px;margin:25px auto}
@media(max-width:750px){#project-media.phone-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}.phone-label{font-size:.6rem}.phone-brand{font-size:.875rem}.phone-figure figcaption{font-size:.8125rem}}
@media(max-width:500px){#project-media.phone-gallery{grid-template-columns:1fr;gap:28px}.phone-stage{max-width:265px}.phone-label{font-size:.6875rem}.phone-brand{font-size:1rem}.phone-figure figcaption{font-size:.875rem}.skills-section{margin-top:24px}.skill-list{gap:6px 18px}.skill-entry h3{font-size:1rem}.toolkit-copy h2{font-size:2rem}.toolkit-intro{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.phone-preview:hover .phone-stage{transform:none}}
@media(max-width:650px){#map-view .landmark strong{display:block;font:500 clamp(.75rem,3.1vw,1rem)/1.2 var(--body)}#map-view .landmark .number{font:500 .625rem/1.2 var(--body);margin-bottom:3px}.portrait-cover{margin-top:0}}

/* Clear entrances, editorial wayfinding, and arrival feedback. */
.cover-navigation{gap:18px}
#enter,.cover-about{display:flex;flex-direction:column;justify-content:center;min-height:94px;min-width:220px;padding:18px 24px;border:2px solid var(--ink);border-radius:5px;box-shadow:3px 3px 0 var(--ink);transition:transform .18s,box-shadow .18s;text-decoration:none}
#enter{background:var(--green);color:var(--paper)}#enter small{color:var(--paper)}.cover-about{background:var(--yellow);color:var(--ink)}.cover-about small{color:var(--ink)}
#enter:hover,.cover-about:hover{transform:translateY(-3px);box-shadow:5px 6px 0 var(--ink);border-color:var(--ink)}#enter:hover{color:var(--paper)}.cover-about:hover{color:var(--ink)}#enter:active,.cover-about:active{transform:translate(2px,2px);box-shadow:1px 1px var(--ink)}
#map-view .board{container-type:inline-size}#map-view .map-copy{left:8%;top:15%;width:33%;height:32%;display:flex;align-items:center;text-align:left}#map-view .map-copy h1{font:400 8cqw/1.1 var(--display);letter-spacing:-.045em;transform:none;margin:0;width:100%}#map-view .map-copy h1 span{display:block;color:var(--ink)}#map-view .index-prefix{font:700 2.4cqw/1.3 var(--body);letter-spacing:.08em;margin-bottom:1cqw}#map-view .index-title{font:inherit}
#map-view .landmark .number,#map-view .landmark .open-label{font-family:var(--body);font-weight:500;letter-spacing:0}
#map-view .hint{font:500 clamp(.75rem,1.8cqw,1.1rem)/1.3 var(--body);letter-spacing:0;transform:none}
#map-view .landmark::before,#map-view .landmark::after{content:none}
.arrival-marks{position:absolute;inset:-27%;pointer-events:none;opacity:0;transform:scale(.72);transition:opacity .16s,transform .22s}.arrival-marks i{position:absolute;height:5px;border-radius:65% 30% 55% 35%;background:var(--red);box-shadow:inset 0 1px #fff6;transform-origin:center}
.arrival-marks i:nth-child(1){width:23px;left:5%;top:10%;transform:rotate(42deg)}.arrival-marks i:nth-child(2){width:31px;left:-9%;top:48%;transform:rotate(1deg)}.arrival-marks i:nth-child(3){width:19px;left:7%;bottom:9%;transform:rotate(-39deg)}.arrival-marks i:nth-child(4){width:20px;right:6%;top:9%;transform:rotate(-43deg)}.arrival-marks i:nth-child(5){width:30px;right:-9%;top:46%;transform:rotate(-2deg)}.arrival-marks i:nth-child(6){width:25px;right:4%;bottom:8%;transform:rotate(37deg)}
#map-view .landmark.hit .arrival-marks,#map-view .landmark:hover .arrival-marks,#map-view .landmark:focus-visible .arrival-marks{opacity:1;transform:scale(1);animation:arrival-burst .72s ease-in-out infinite alternate}
#map-view .landmark.hit strong{animation:arrival-name .72s ease-in-out infinite alternate}
@keyframes arrival-burst{to{transform:scale(1.08) rotate(1deg)}}@keyframes arrival-name{to{transform:translateY(-3px) rotate(-1deg)}}
.about-portrait{aspect-ratio:4/3;width:100%;overflow:visible}.about-portrait img{position:static;width:100%;height:auto;max-width:100%;left:auto;top:auto;mix-blend-mode:multiply}
#project-credit{font:500 1rem/1.6 var(--body);color:var(--green);padding-bottom:20px;border-bottom:1px solid #16171333;margin:10px 0 24px}#project-credit:empty{display:none}
#project-dialog:has(.phone-gallery){width:min(1260px,96vw)}#project-media.phone-gallery{display:block}
.brand-story{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,3fr);gap:30px;padding:28px 0 40px;border-bottom:1px solid #16171333}.brand-story:last-child{border-bottom:0}.brand-intro{padding-top:20px}.brand-intro h3{font:700 1.6rem/1.2 var(--body);letter-spacing:-.035em;margin:0 0 16px}.brand-intro p{font:400 1rem/1.7 var(--body);margin:0;max-width:28ch}.brand-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.phone-screen,.phone-screen[data-brand=jawwy]{background:#080808;color:#f7f9f9;justify-content:flex-start;container-type:inline-size;padding-top:8%}
.social-top{font:700 7cqw/1 Arial,sans-serif;text-align:center;padding:3% 0 5%}.social-tabs{display:flex;justify-content:space-around;border-bottom:1px solid #303030;padding:4% 3% 0;font:700 4.6cqw/1.3 Arial,sans-serif;color:#858585}.social-tabs span{padding-bottom:9%}.social-tabs .selected{border-bottom:3px solid #1d9bf0;color:#f7f9f9}.social-post{padding:7% 5% 4%;border-bottom:1px solid #303030}.social-author{display:flex;align-items:center;gap:5%;margin-bottom:5%}.social-avatar{width:20%;aspect-ratio:1;border-radius:50%;background:#fff;color:#601e96;display:grid;place-items:center;font:700 3.7cqw/1 Arial,sans-serif}.phone-screen[data-brand=jawwy] .social-avatar{background:#ff7900;color:white}.social-identity{display:flex;flex-direction:column;gap:3px;min-width:0}.social-identity strong{font:700 4.7cqw/1.2 Arial,sans-serif}.social-identity>span{font:400 4cqw/1.2 Arial,sans-serif;color:#83878b}.phone-screen .social-copy{font:400 5.4cqw/1.55 Arial,sans-serif;color:#eee;white-space:pre-line;margin:0 0 7%;min-height:4.65em}.social-artwork{border-radius:5%;border:1px solid #303030}.social-actions{display:flex;justify-content:space-between;padding:7% 1% 2%;color:#787e82}.social-actions svg{width:8%;height:auto}.social-bottom{width:34%;height:3px;border-radius:5px;background:#ddd;margin:auto auto 5%}
@media(max-width:950px){.brand-story{grid-template-columns:1fr;gap:24px}.brand-intro{padding-top:0}.brand-intro p{max-width:60ch}.brand-phones{gap:22px}.cover-navigation{justify-content:start}}
@media(max-width:650px){#enter,.cover-about{min-width:0;flex:1;padding:16px;min-height:96px;font-size:1rem}.cover-navigation{gap:14px}.cover-navigation small{font-size:.75rem}.about-portrait{aspect-ratio:4/3}#map-view .landmark strong{font:700 3.3cqw/1.2 var(--body);letter-spacing:-.02em}#map-view .landmark .number,#map-view .landmark .open-label{font-family:var(--body);font-weight:500}.arrival-marks i{height:3px;max-width:15px}.brand-phones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding:3px 9vw 18px 2px;scrollbar-width:thin}.brand-phones .phone-figure{flex:0 0 min(74vw,285px);scroll-snap-align:start}.brand-intro h3{font-size:1.5rem}.phone-stage{max-width:290px}}
@media(max-width:500px){.brand-phones .phone-stage{max-width:280px}.phone-figure figcaption{font-size:1rem}.cover-navigation{width:100%}.cover-navigation small{display:none}#enter,.cover-about{min-height:65px;padding:14px 12px}}
@media(prefers-reduced-motion:reduce){.arrival-marks,#map-view .landmark.hit strong{animation:none!important}#enter:hover,.cover-about:hover{transform:none}}

/* The three steps read as one compact instruction strip. */
.how-to{grid-template-columns:1fr 1fr 1fr;gap:0;border-block:1px solid #16171355;margin-bottom:26px}.how-to>li{display:grid;grid-template-columns:1.25rem minmax(0,1fr);grid-template-rows:repeat(3,max-content);align-content:start;align-items:baseline;column-gap:13px;padding:16px 24px;border-right:1px solid #16171355}.how-to>li:last-child{border-right:0}.how-to .step-number{grid-column:1;grid-row:1;position:static;display:block;width:auto;height:auto;padding:0;border:0;font:700 1rem/1.3 var(--body);align-self:baseline}.how-to h2{grid-column:2;grid-row:1;margin:0;font:700 1rem/1.3 var(--body)}.how-to p{grid-column:2;grid-row:2;margin:4px 0 0;font-size:.875rem}.how-to .palette{grid-column:2;grid-row:3;margin-top:10px}
@media(max-width:650px){.how-to{display:block}.how-to>li{border-right:0;padding:14px 6px}.how-to>li+li{border-top:1px solid #16171333}.how-to .step-number{position:static}}

/* Fit the editorial title to the map's white opening. */
#map-view .map-copy{left:10%;top:18%;width:27%;height:auto;display:block}
#map-view .map-copy h1{font-size:7.2cqw;line-height:1.08;white-space:nowrap;letter-spacing:-.025em}
#map-view .index-prefix{font-size:2.8cqw;line-height:1.2;margin-bottom:.5cqw}

/* A white page, with the illustration centered between the title and bio. */
body:has(#about-view:not([hidden])){background:#fff}
#about-view{background:#fff}
#about-view .about-intro{display:flex;flex-direction:column;align-items:stretch;gap:0}
#about-view .about-heading{width:100%}
#about-view .about-portrait,#about-view .about-portrait.custom{width:min(100%,720px);max-width:720px;height:auto;aspect-ratio:4/3;margin:0 auto 42px;overflow:hidden;transform:none}
#about-view .about-portrait img,#about-view .about-portrait.custom img{display:block;position:static;width:100%;max-width:100%;height:auto;object-fit:contain;mix-blend-mode:normal}
#about-view .about-bio{width:min(100%,720px);margin:0 auto}
@media(max-width:650px){#about-view .about-portrait,#about-view .about-portrait.custom{margin:0 auto 26px}#map-view .map-copy h1{font-size:7.2cqw}}