@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--ink:#000;--paper:#fff;--muted:#707070;--pill:#f0f1f3;--rule:#d4d4d4}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid #777;outline-offset:4px}#app{width:100%;overflow:hidden}.site-header{padding:22px 1.6% 0;position:relative;z-index:5}.site-header nav{display:flex;gap:10px;align-items:center}.pill{background:var(--pill);border:0;border-radius:100px;padding:10px 19px;display:inline-flex;justify-content:center;align-items:center;min-height:42px;font-size:16px;line-height:1.2;cursor:pointer;transition:background .2s,color .2s}.pill:hover,.pill.active{background:#000;color:#fff}.intro-section{padding:65px 1.6% 0;display:grid;grid-template-columns:1.08fr 1fr;gap:7%;min-height:360px;align-items:start}.intro-copy{max-width:650px;margin:0;padding-top:15px;font-size:clamp(19px,1.8vw,27px);line-height:1.22;letter-spacing:-.04em}.services-card{background:#000;color:#fff;height:300px;border-radius:9px;position:relative;overflow:hidden}.service-chip{position:absolute;background:#fff;color:#000;border-radius:100px;padding:11px 22px;white-space:nowrap;font-size:15px;box-shadow:0 2px 5px #0002}.chip-one{left:20%;top:21%;transform:rotate(-17deg)}.chip-two{left:51%;top:16%;transform:rotate(16deg)}.chip-three{left:23%;top:45%;transform:rotate(-4deg)}.chip-four{left:60%;top:52%;transform:rotate(7deg)}.chip-five{left:38%;top:68%;transform:rotate(-9deg)}.services-label{position:absolute;bottom:-10px;left:0;width:100%;text-align:center;font:54px "Instrument Serif",Georgia,serif}.name-hero{font:clamp(115px,17vw,265px)/.92 "Instrument Serif",Georgia,serif;white-space:nowrap;letter-spacing:-.055em;padding:25px 1% 70px;text-align:center}.work-section,.experience{padding:0 1.6%}.section-rule{border-top:1px solid #000;display:flex;justify-content:flex-end;margin-bottom:54px}.section-rule span{font:24px "Instrument Serif",Georgia,serif;position:relative;top:-16px;background:white;padding-left:18px}.section-rule span:before{content:"";width:9px;height:9px;background:#000;display:inline-block;vertical-align:middle;margin-right:16px}.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 22px}.project-card{display:block;min-width:0}.cover{height:auto;aspect-ratio:1.52;position:relative;overflow:hidden;background:#ccc;isolation:isolate}.cover-art{position:absolute;inset:0;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.project-card:hover .cover-art,.project-card:focus-visible .cover-art{transform:scale(1.045)}.cover-hover{position:absolute;inset:0;background:rgba(0,0,0,.62);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:35px;color:white;opacity:0;transition:opacity .28s}.cover-hover span{font-size:13px;letter-spacing:.09em}.cover-hover strong{font:clamp(40px,5vw,80px)/1 "Instrument Serif",Georgia,serif;font-weight:400}.project-card:hover .cover-hover,.project-card:focus-visible .cover-hover{opacity:1}.card-info{padding:10px 0 0}.card-info h3{font:35px/1.1 "Instrument Serif",Georgia,serif;margin:0 0 4px}.card-info p{margin:0;color:var(--muted);font-size:15px}.cover-mayo-clinic{background:#c7cacb}.cover-mayo-clinic:before{content:"";position:absolute;inset:60% -10% -5%;background:#a8b0af;transform:rotate(-12deg)}.medical-badge{position:absolute;left:8%;top:16%;background:#616969;color:#fff;padding:28px 20px;font-size:13px;width:36%;height:50%;letter-spacing:.1em}.mobile-mock{position:absolute;right:12%;top:13%;width:43%;height:70%;background:#fff;border-radius:10px;box-shadow:12px 17px 30px #0002;overflow:hidden}.mock-top{background:#000;color:#fff;font-size:11px;padding:14px 15px;display:flex;justify-content:space-between;letter-spacing:.05em}.mobile-mock h3{font:clamp(20px,3vw,38px)/1.05 "Instrument Serif";padding:8% 7% 0;margin:0}.mobile-mock small{padding:10px 7%;display:block;color:#666;font-size:12px}.score-row{display:flex;gap:5%;padding:8% 7%}.score-row b{background:#ececec;flex:1;text-align:center;padding:12px 0;border-radius:9px;font:24px "Instrument Serif"}.mock-button{background:#000;border-radius:30px;height:12%;margin:2% 7%}.cover-circle-the-city{background:#252525}.device{position:absolute;left:14%;right:14%;top:11%;bottom:16%;border:12px solid #383838;border-radius:15px;background:#fff;overflow:hidden;box-shadow:0 15px 30px #0005}.device-content{padding:5%}.device-content span{font-size:11px;letter-spacing:.07em}.device-content h3{font:clamp(27px,4vw,59px)/.95 "Instrument Serif";margin:6% 0}.device-nav{font-size:12px}.device-photo{background:linear-gradient(130deg,#d8d8d8 0 50%,#bcbcbc 50%);height:34%;margin-top:4%}.cover-city-of-mesa{background:#d5d3d0}.survey-sheet{position:absolute;background:#fff;width:46%;height:78%;left:28%;top:10%;transform:rotate(-8deg);padding:6%;box-shadow:16px 17px 0 #9998;overflow:hidden}.survey-sheet small{font-size:10px;letter-spacing:.07em}.survey-sheet h3{font:clamp(27px,3.5vw,53px)/1 "Instrument Serif";margin:8% 0}.survey-sheet p{font-size:12px}.survey-line{border-top:1px solid #bbb;display:flex;gap:12px;padding:12px 0}.survey-line span{font-size:11px}.survey-line i{height:6px;background:#ddd;width:75%;margin-top:4px}.view-all{display:block;text-align:right;font-size:16px;font-weight:600;padding:35px 0 135px}.experience{padding-bottom:130px}.experience h2{font:clamp(42px,5vw,80px)/1 "Instrument Serif";font-weight:400;margin:60px 0 55px}.experience-row{border-top:1px solid var(--rule);display:grid;grid-template-columns:60px 1fr 1fr 30px;align-items:center;gap:12px;padding:24px 0}.experience-row strong{font:30px "Instrument Serif";font-weight:400}.experience-row span{font-size:15px}.exp-num{color:#777}.contact-section{background:#000;color:#fff;padding:75px 1.6% 22px;scroll-margin-top:0}.contact-grid{display:grid;grid-template-columns:minmax(320px,390px) minmax(0,1fr);gap:56px;align-items:start;min-height:630px}.calendar-wrap{background:#fff;color:#000;padding:18px 18px 16px;min-height:0;max-width:390px;width:100%}.booking-heading{font-size:13px;letter-spacing:.08em;display:flex;justify-content:space-between;border-bottom:1px solid #ddd;padding-bottom:18px}.calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:28px 0 12px;text-align:center;font-size:11px;letter-spacing:.02em}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.calendar-days span{background:#e5e6e9;border-radius:7px;display:grid;place-items:center;aspect-ratio:1;min-height:35px;font-size:14px}.calendar-days .chosen{background:#000;color:#fff}.calendar-days .empty{background:#fff}.calendar-note{font-size:14px;color:#666;margin-top:26px;line-height:1.5}.calendar-note code{color:#000}.time-options{display:flex;gap:8px;margin-top:15px}.time-options span{border:1px solid #ccc;border-radius:9px;padding:13px 20px;flex:1;text-align:center}.calendar-embed iframe{border:0;width:100%;height:520px;display:block}.book-fallback{display:block;margin-top:12px;text-decoration:underline}.contact-right{min-width:0;max-width:860px}.contact-intro{font-size:clamp(22px,2.2vw,34px);max-width:740px;line-height:1.15;letter-spacing:-.03em;margin:0}.contact-email-label{font-size:clamp(20px,2vw,30px);margin:65px 0 5px}.contact-email{font-size:clamp(20px,2vw,30px);text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere}.socials{display:flex;gap:32px;margin-top:50px;font-size:17px}.giant-name{font:clamp(80px,10.8vw,170px)/.95 "Instrument Serif";letter-spacing:-.055em;white-space:nowrap;margin-top:70px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #555;padding-top:20px;font-size:13px}.work-page{padding:70px 1.6% 140px;min-height:900px}.work-page h1{font:clamp(110px,17vw,265px)/.94 "Instrument Serif";letter-spacing:-.06em;margin:25px 0 35px;white-space:nowrap}.work-subtitle{font-size:19px;margin-bottom:60px}.filters{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:50px}.filter{padding:12px 23px}.project-count{color:#666;margin-top:35px}.case-page{padding:70px 1.6% 150px}.back-link{font-size:15px}.case-heading{display:flex;justify-content:space-between;gap:40px;margin-top:75px;margin-bottom:50px}.case-heading h1{font:clamp(90px,13vw,190px)/.95 "Instrument Serif";letter-spacing:-.045em;margin:15px 0}.case-lead{font-size:clamp(22px,2.2vw,32px);max-width:850px;line-height:1.25}.eyebrow,.case-index{font-size:13px;letter-spacing:.07em}.case-cover .cover{aspect-ratio:2.15}.case-cover .cover-hover{display:none}.case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:35px 0;border-bottom:1px solid #ccc}.case-facts>div{display:flex;flex-direction:column;gap:10px}.case-facts span,.case-body section>span{font-size:12px;color:#666;letter-spacing:.08em}.case-facts strong{font-weight:500}.case-body{max-width:1150px;margin:70px auto}.case-body section{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;border-bottom:1px solid #ddd;padding:55px 0}.case-body section>span{grid-column:1/-1}.case-body h2{font:clamp(45px,5vw,75px)/1 "Instrument Serif";margin:0}.case-body p{font-size:clamp(19px,2vw,25px);line-height:1.4;margin:0}.case-source{border:1px solid #ddd;padding:30px;max-width:1150px;margin:auto}.case-source p{font-size:16px;color:#555;line-height:1.5}.case-source a{text-decoration:underline}.next-case{border-top:1px solid #000;margin-top:110px;padding-top:20px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}.next-case span{font-size:13px}.next-case a{font:clamp(40px,6vw,95px) "Instrument Serif"}
@media(max-width:900px){.intro-section{gap:25px}.services-card{height:250px}.service-chip{font-size:12px;padding:10px 13px}.services-label{font-size:42px}.name-hero{font-size:17vw}.contact-grid{grid-template-columns:1fr 1fr;gap:28px}.calendar-wrap{min-height:510px;max-width:none}.giant-name{font-size:10vw}.work-page h1{font-size:16vw}}
@media(max-width:650px){.site-header{padding:16px 16px 0}.pill{font-size:14px;min-height:39px;padding:9px 15px}.intro-section{padding:48px 16px 0;display:flex;flex-direction:column;gap:38px}.intro-copy{font-size:22px}.services-card{width:100%;height:270px}.name-hero{font-size:19vw;padding:65px 10px 60px;letter-spacing:-.065em}.work-section,.experience{padding:0 16px}.section-rule{margin-bottom:28px}.section-rule span{font-size:20px}.projects-grid{grid-template-columns:1fr;gap:32px}.cover{aspect-ratio:1.3}.cover-hover{opacity:1;background:linear-gradient(transparent 60%,#0007);padding:20px}.cover-hover span{display:none}.cover-hover strong{font-size:35px}.card-info h3{font-size:31px}.view-all{padding-bottom:90px}.experience h2{font-size:48px}.experience-row{grid-template-columns:32px 1fr 20px;gap:8px}.experience-row span:nth-of-type(2){grid-column:2;grid-row:2}.experience-row a{grid-column:3;grid-row:1}.experience{padding-bottom:90px}.contact-section{padding:35px 16px 20px}.contact-grid{grid-template-columns:1fr;gap:50px}.calendar-wrap{min-height:500px;padding:15px}.calendar-days span{min-height:32px}.contact-intro{font-size:25px}.contact-email-label{margin-top:40px}.giant-name{font-size:18vw;white-space:normal;margin:60px 0 40px}.footer-bottom{flex-wrap:wrap;font-size:11px}.work-page{padding:70px 16px 100px}.work-page h1{font-size:19vw}.work-subtitle{font-size:17px;margin-bottom:38px}.filters{gap:9px;margin-bottom:30px}.filter{font-size:14px;padding:9px 14px}.case-page{padding:45px 16px 90px}.case-heading{margin-top:55px}.case-heading h1{font-size:18vw}.case-lead{font-size:22px}.case-index{display:none}.case-cover .cover{aspect-ratio:1.25}.case-facts{grid-template-columns:1fr;gap:22px}.case-body section{display:block;padding:38px 0}.case-body h2{margin:15px 0 25px}.case-body p{font-size:19px}.next-case{display:block}.next-case a{display:block;margin-top:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* V3 — Framer-faithful homepage: oversized editorial wordmark, interactive services */
.site-header .pill.active { background: var(--pill); color:#000; }
.site-header .pill:hover { background:#dedfe0; color:#000; }
.intro-section {padding-top:45px; gap:5.7%; grid-template-columns:1.08fr 1fr; min-height:350px;}
.services-card {height:312px; min-height:312px; position:relative; isolation:isolate;}
.service-chips {position:absolute;inset:0;z-index:2;pointer-events:none;}
.services-card .service-chip {position:absolute;left:0;top:0;display:inline-flex;align-items:center;justify-content:center;width:max-content;max-width:50%;height:44px;min-width:95px;padding:0 22px;border:0;border-radius:50px;background:#fff;color:#000;font-family:'DM Sans',Arial,sans-serif;font-size:15px;font-weight:500;line-height:1;box-shadow:0 2px 8px #0001;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto;will-change:transform;white-space:nowrap;z-index:2;}
.services-card .service-chip.is-dragging {cursor:grabbing;z-index:10;box-shadow:0 8px 22px #0006;}
.services-card .service-chip:focus-visible {outline:3px solid #aaa;outline-offset:3px;}
.services-instruction {position:absolute;top:20px;left:24px;color:#fff9;font-size:10px;letter-spacing:.11em;z-index:1;pointer-events:none;}
.services-replay {position:absolute;right:18px;top:12px;z-index:11;background:transparent;color:#fff;border:1px solid #fff6;border-radius:50%;width:32px;height:32px;font-size:19px;line-height:28px;cursor:pointer;transition:background .2s;}
.services-replay:hover {background:#ffffff20;}
.services-label {position:absolute;z-index:1;bottom:0;left:0;width:100%;font:54px/1 'Instrument Serif',Georgia,serif;text-align:center;color:#fff;pointer-events:none;}
.name-hero,.giant-name {white-space:nowrap;overflow:hidden;letter-spacing:normal;}
.name-hero {display:flex;align-items:flex-end;justify-content:center;margin-top:4px;width:100%;padding:38px 8px 74px;line-height:.86;}
.name-hero-text,.giant-name-text {font-family:'Instrument Serif',Georgia,serif;font-weight:400;white-space:nowrap;letter-spacing:-.065em;display:inline-block;line-height:.85;}
.giant-name {margin-top:72px;text-align:center;line-height:.86;}
@media(max-width:900px){.intro-section{gap:4%;}.services-card{height:282px;min-height:282px}.services-card .service-chip{font-size:13px;height:40px;padding:0 15px}.services-label{font-size:46px}.name-hero{padding:36px 8px 65px}.services-instruction{font-size:9px}}
@media(max-width:650px){.intro-section{padding-top:45px;gap:35px;min-height:auto}.services-card{height:270px;min-height:270px}.services-card .service-chip{font-size:12px;height:37px;min-width:70px;padding:0 12px}.services-label{font-size:44px}.name-hero{margin:0;padding:52px 6px 60px}.giant-name{margin-top:50px}}

/* V4 — Framer-inspired draggable Clients block on Work page */
.work-page {padding-top:59px;}
.work-hero {display:grid;grid-template-columns: minmax(0,1fr) minmax(0,1fr);column-gap:22px;align-items:start;margin-bottom:0;}
.work-hero .clients-card {grid-column:2;min-width:0;height:312px;min-height:312px;background:#000;border-radius:8px;}
.clients-card .services-label {font:54px/1 'Instrument Serif',Georgia,serif;}
.clients-card .service-chip {font-size:16px;max-width:65%;min-width:112px;}
.work-page h1 {margin:5px 0 51px;font-size:clamp(92px,9vw,156px);line-height:.98;letter-spacing:-.045em;}
.work-page .work-subtitle {font-size:18px;margin:0 0 54px;}
.work-page .filters {margin-bottom:48px;}
@media(max-width:900px){
  .work-page {padding-top:42px;}
  .work-hero .clients-card {height:282px;min-height:282px;}
  .clients-card .services-label{font-size:46px;}
  .clients-card .service-chip{font-size:13px;min-width:95px;}
  .work-page h1{font-size:clamp(70px,10.5vw,115px);margin-top:14px;}
}
@media(max-width:650px){
  .work-page {padding-top:35px;}
  .work-hero{display:block;}
  .work-hero .clients-card {height:270px;min-height:270px;}
  .clients-card .services-label {font-size:44px;}
  .clients-card .service-chip {font-size:12px;min-width:84px;}
  .work-page h1 {font-size:clamp(58px,15vw,92px);white-space:normal;margin-top:35px;margin-bottom:25px;}
  .work-page .work-subtitle {font-size:16px;margin-bottom:32px;}
  .work-page .filters{margin-bottom:30px;}
}

/* V5 — accessible LinkedIn and Instagram logo buttons in footer */
.socials { display:flex; align-items:center; gap:14px; margin-top:44px; }
.social-icon { width:49px; height:49px; display:inline-flex; align-items:center; justify-content:center; flex:none; color:#fff; border:1px solid rgba(255,255,255,.64); border-radius:50%; text-decoration:none; transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease; }
.social-icon svg {display:block; width:21px; height:21px;}
.social-icon:hover { background:#fff; color:#000; border-color:#fff; transform:translateY(-2px); }
.social-icon:focus-visible {outline:2px solid #fff;outline-offset:4px;}
.footer-bottom > span:first-child { font-weight:500; letter-spacing:.015em; }
@media(max-width:650px) { .socials{gap:12px;margin-top:30px}.social-icon{width:47px;height:47px;} }

/* V6 — Resume nav item and accessible preview page */
.site-header nav {flex-wrap:wrap; row-gap:8px;}
.resume-page {min-height:570px; padding:115px max(1.6%,22px) 140px;}
.resume-kicker {font-size:13px;letter-spacing:.12em;}
.resume-page h1 {font:clamp(100px,17vw,255px)/.93 'Instrument Serif',Georgia,serif;letter-spacing:-.04em;margin:28px 0 40px;}
.resume-content {border-top:1px solid #000;padding-top:32px;max-width:780px;}
.resume-content h2 {font:clamp(35px,5vw,60px)/1.1 'Instrument Serif',Georgia,serif;font-weight:400;margin:0 0 18px;}
.resume-content p {font-size:17px;line-height:1.55;max-width:680px;color:#474747;}
.resume-content code {background:#f1f2f3;border-radius:3px;padding:2px 5px;}
.resume-contact {display:inline-flex;margin-top:16px;border-radius:30px;padding:14px 22px;background:#000;color:#fff;font-size:15px;}
.resume-contact:hover{background:#292929;}
@media (max-width:650px){.resume-page{padding:75px 16px 90px;min-height:460px}.resume-page h1{font-size:19vw}.resume-content p{font-size:15px}}


/* About Me: editorial split layout and animated numbers */
.about-section{padding:0 1.6% 145px;background:#fff;color:#000}
.about-section-heading{display:flex;align-items:center;gap:15px;width:100%;margin-bottom:60px}
.about-section-heading span{font:clamp(30px,3.3vw,52px)/1 "Instrument Serif",Georgia,serif;white-space:nowrap}
.about-section-heading i{width:11px;height:11px;background:#000;transform:rotate(45deg);flex:none}
.about-section-heading b{height:1px;background:#000;flex:1}
.about-content{display:grid;grid-template-columns:36% 1fr;gap:3.5%}
.about-main{min-width:0}
.about-description{font:clamp(21px,2.3vw,36px)/1.2 "DM Sans",sans-serif;letter-spacing:-.045em;max-width:1100px;margin:0 0 52px}
.about-metrics{display:grid;grid-template-columns:1fr 1fr;column-gap:35px;row-gap:34px;margin:0 0 56px}
.about-metric{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.about-metric strong{font:500 clamp(38px,4vw,64px)/1 "DM Sans",sans-serif;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.about-metric span{font-size:clamp(14px,1.2vw,19px)}
.about-portrait{width:100%;aspect-ratio:1.65;border-radius:8px;overflow:hidden;background:#d2d2d2}
.about-portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.about-portrait-placeholder{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(130deg,#e0e0e0,#8e8e8e);color:#fff}
.about-portrait-placeholder>span{font:clamp(100px,19vw,340px)/1 "Instrument Serif",Georgia,serif;opacity:.6}
.about-portrait-placeholder small{position:absolute;bottom:24px;left:25px;font-size:12px;letter-spacing:.08em}
@media(max-width:900px){.about-content{grid-template-columns:28% 1fr;gap:4%}}
@media(max-width:650px){.about-section{padding:0 16px 90px}.about-section-heading{margin-bottom:32px}.about-content{display:block}.about-spacer{display:none}.about-description{font-size:22px;margin-bottom:35px}.about-metrics{gap:28px 20px;margin-bottom:35px}.about-metric strong{font-size:42px}.about-metric span{font-size:13px}.about-portrait{aspect-ratio:1.15}.about-portrait-placeholder>span{font-size:170px}}


/* Version 9 — navigation hover. Keep the resting pills pale gray;
   Home, Work, Contact, and Resume invert to black + white on hover. */
.site-header nav a.pill:hover,
.site-header nav a.pill:focus-visible {
  background-color: #000000;
  color: #ffffff;
}

/* V10 — original Mayo Clinic project image, used on Home, Work, and its case-study cover.
   The existing .cover-art hover transform continues to animate the photograph. */
.cover-mayo-clinic::before{display:none}
.cover-mayo-clinic .cover-art{background:#c7cacb}
.cover-mayo-clinic .mayo-cover-image{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}

.city-cover-image{width:100%;height:100%;object-fit:cover;display:block}

/* Circle the City: real supplied project cover on Home, Work, and case study. */
.cover-circle-the-city{background:#000}
.cover-circle-the-city .cover-art{background:#000}
.cover-circle-the-city .circle-cover-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}

/* V13 — experience timeline beneath About Me, matching the Framer editorial reference. */
.career-experience{
  padding:0 1.6% 142px;
  background:#fff;
  color:#000;
}
.career-experience-heading{display:flex;gap:16px;align-items:center;margin-bottom:80px}
.career-heading-rule{height:1px;background:#000;flex:1}
.career-heading-diamond{display:block;width:10px;height:10px;background:#000;transform:rotate(45deg);flex:none}
.career-experience-heading h2{
  font:clamp(29px,3.05vw,48px)/1 "Instrument Serif",Georgia,serif;
  font-weight:400;white-space:nowrap;margin:0
}
.career-grid{display:grid;grid-template-columns:38% minmax(0,1fr);gap:2%}
.career-list{list-style:none;margin:0;padding:0;min-width:0}
.career-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding:21px 0 24px;border-bottom:1px solid #b9b9b9;
}
.career-row:first-child{border-top:0}
.career-description{display:flex;flex-direction:column;gap:5px;min-width:0}
.career-organization{font:500 clamp(18px,1.5vw,24px)/1.22 "DM Sans",Arial,sans-serif;letter-spacing:-.025em}
.career-role{font:400 clamp(14px,1.13vw,17px)/1.35 "DM Sans",Arial,sans-serif;color:#656565}
.career-dates{white-space:nowrap;flex:none;text-align:right;font:400 clamp(14px,1.15vw,18px)/1.3 "DM Sans",Arial,sans-serif}
@media(max-width:980px){
 .career-grid{grid-template-columns:24% minmax(0,1fr)}
 .career-row{flex-wrap:wrap;gap:10px}
 .career-dates{text-align:left}
}
@media(max-width:650px){
 .career-experience{padding:0 16px 100px}
 .career-experience-heading{margin-bottom:34px;gap:12px}
 .career-experience-heading h2{font-size:34px}
 .career-grid{display:block}
 .career-left-space{display:none}
 .career-row{flex-direction:column;gap:10px;padding:21px 0}
 .career-organization{font-size:21px}
 .career-role{font-size:15px}
 .career-dates{font-size:14px;color:#555}
}

/* V14 — subtle navigation transitions */
@keyframes akPageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
#app { animation: akPageEnter 420ms cubic-bezier(.22,1,.36,1) both; }
body.ak-leaving #app {
  opacity: 0;
  transform: translateY(-7px);
  transition: opacity 190ms ease, transform 190ms ease;
}
.site-header .pill {
  transition: background-color 220ms ease, color 220ms ease, transform 220ms ease;
}
.site-header .pill:hover { transform: translateY(-2px); }
.site-header .pill:active { transform: translateY(0) scale(.97); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  #app { animation: none; }
  body.ak-leaving #app { transition: none; }
  .site-header .pill { transition: none; }
  html { scroll-behavior: auto; }
}

.about-portrait img{object-position:center 18%;}

/* Version 17 — Show the full supplied square portrait without cropping. */
.about-portrait {
  aspect-ratio: 1 / 1;
  background: #e1e2ec;
}
.about-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  filter: none;
}
@media (max-width: 650px) {
  .about-portrait { aspect-ratio: 1 / 1; }
}

/* V18 — Match the new 1248 × 909 portrait's natural proportions; no cropping. */
.about-portrait { aspect-ratio: 1248 / 909; }
.about-portrait img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: none; }
@media (max-width: 650px) {
  .about-portrait { aspect-ratio: 1248 / 909; }
}

/* V19 — Selected Work heading styled to match the About Me section. */
.work-section .section-rule {
  border-top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  min-height: 52px;
  margin-bottom: 54px;
}
.work-section .section-rule::before {
  content: "";
  display: block;
  flex: 1 1 auto;
  min-width: 10px;
  height: 1px;
  background: #000;
}
.work-section .section-rule > span {
  position: static;
  top: auto;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 0;
  background: transparent;
  white-space: nowrap;
  font: clamp(30px, 3.3vw, 52px)/1 "Instrument Serif", Georgia, serif;
}
.work-section .section-rule > span::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  margin: 0;
  vertical-align: initial;
  background: #000;
  transform: rotate(45deg);
}
@media (max-width: 650px) {
  .work-section .section-rule { gap: 8px; margin-bottom: 28px; }
  .work-section .section-rule > span { gap: 9px; font-size: clamp(24px, 7.1vw, 30px); }
  .work-section .section-rule > span::before { width: 8px; height: 8px; flex-basis: 8px; }
}

/* Reinstate the previously requested animated copy-email icon alongside the footer email. */
.contact-email-row{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%}
.contact-email-row .contact-email{display:block;min-width:0}
.copy-email-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;background:transparent;color:#fff;border:1px solid #fff8;border-radius:50%;cursor:pointer;opacity:0;transform:translateX(-7px);transition:opacity .2s ease,transform .2s ease,background .2s ease;color .2s ease;position:relative}
.copy-email-button svg{width:18px;height:18px;display:block}
.copy-email-button .copy-email-check{display:none}
.copy-email-button.is-copied .copy-email-svg{display:none}
.copy-email-button.is-copied .copy-email-check{display:block}
.contact-email-row:hover .copy-email-button,.contact-email-row:focus-within .copy-email-button,.copy-email-button.is-copied{opacity:1;transform:translateX(0)}
.copy-email-button:hover,.copy-email-button:focus-visible{background:#fff;color:#000;border-color:#fff}
@media(hover:none){.copy-email-button{opacity:1;transform:none}}
@media(max-width:650px){.contact-email-row{gap:7px}.copy-email-button{width:36px;height:36px;flex-basis:36px}}

/* V24 — Mayo project naming and new healthcare photograph. */
.cover-mayo-clinic .cover-art{background:#ddd8d0}
.cover-mayo-clinic .mayo-cover-image{object-position:50% 46%}
.cover-mayo-clinic .cover-hover strong{font-size:clamp(31px,3.6vw,58px);line-height:1.02;letter-spacing:-.02em;max-width:96%;text-wrap:balance}
.card-client{display:block;margin:8px 0 6px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:#555}
.card-info .card-description{font-size:15px;color:#666;line-height:1.45;margin-top:9px;max-width:590px}
@media(max-width:720px){.cover-mayo-clinic .cover-hover{padding:18px}.cover-mayo-clinic .cover-hover strong{font-size:clamp(26px,6.3vw,45px)}.card-client{margin-top:7px}.card-info .card-description{font-size:14px;line-height:1.45}}

/* V38 — Cal.com, reference-proportioned black-and-white booking footer. */
.contact-grid{display:grid;grid-template-columns:minmax(320px,26%) minmax(0,1fr);gap:clamp(26px,3.5vw,62px);align-items:start;min-height:0}
.calendar-wrap{display:flex;flex-direction:column;min-width:0;width:100%;max-width:none;min-height:0;padding:18px;background:#fff;color:#000}
.booking-heading{font-size:13px;line-height:1.3}
.booking-ready{display:flex;flex-direction:column;min-width:0}
.booking-instructions{font-size:12px;line-height:1.5;color:#555;margin:15px 0 13px}
.calcom-embed-wrap{width:100%;min-width:0;background:#fff;border:1px solid #e5e5e5;overflow:hidden}
.calcom-embed{width:100%;min-width:0;min-height:535px;height:535px;overflow:hidden;background:#fff}
.calcom-embed iframe{width:100%;height:100%;border:0;display:block}
.calcom-loading{font-size:13px;color:#777;padding:30px 10px;text-align:center;line-height:1.4}
.book-fallback{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:49px;padding:13px 0;margin-top:14px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;text-decoration:none;font-size:11px;letter-spacing:.065em;font-weight:600}
.book-fallback:hover,.book-fallback:focus-visible{background:#f1f1f1}
.booking-help-note{font-size:11px;line-height:1.5;color:#777;margin:12px 0 0}
.booking-setup-state{display:flex;flex-direction:column;min-height:370px;justify-content:center;align-items:flex-start;padding:32px 4px}
.booking-symbol{display:grid;place-items:center;background:#f0f0f0;color:#111;border-radius:50%;width:60px;height:60px;font-size:26px;margin-bottom:28px}
.booking-setup-state h3{font:clamp(40px,3.2vw,60px)/1 'Instrument Serif',Georgia,serif;letter-spacing:-.04em;font-weight:400;margin:0 0 20px}
.booking-setup-state>p{color:#595959;font-size:15px;line-height:1.5;margin:0 0 30px}
.booking-action{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:#111;color:#fff;padding:18px;font-size:12px;letter-spacing:.07em;font-weight:600;transition:background .2s}
.booking-action:hover,.booking-action:focus-visible{background:#444;color:#fff}
.contact-right{min-width:0;max-width:none}
.contact-intro{max-width:580px}
@media(min-width:901px){.contact-section{padding-top:70px}.contact-email-label{margin-top:55px}.socials{margin-top:34px}.giant-name{margin-top:50px}}
@media(min-width:901px) and (max-width:1190px){.contact-grid{grid-template-columns:minmax(315px,32%) minmax(0,1fr);gap:4%}}
@media(min-width:651px) and (max-width:900px){.contact-grid{grid-template-columns:minmax(290px,41%) minmax(0,1fr);gap:4%}.calendar-wrap{padding:14px}.calcom-embed{min-height:545px;height:545px}}
@media(max-width:650px){.contact-grid{grid-template-columns:1fr;gap:42px;min-height:0}.calendar-wrap{width:100%;max-width:none;min-height:0;padding:16px}.calcom-embed{height:565px;min-height:565px}.booking-setup-state{min-height:350px;padding:20px 3px}.booking-setup-state h3{font-size:48px}.booking-instructions{font-size:12px}}

/* V40 — Reference-sized booking card + corrected social icons.
   Visitors can complete bookings in the iframe or open the full Cal.com page. */
@media (min-width: 901px) {
  .contact-section { padding-top: 76px; padding-bottom: 22px; }
  .contact-grid { grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); gap: clamp(38px, 3.7vw, 68px); }
  .calendar-wrap.booking-live { margin-top: 48px; }
}
.calendar-wrap.booking-live {
  display: block;
  width: 100%;
  max-width: 390px;
  padding: 0;
  background: #fff;
  color: #111;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
}
.booking-live .booking-heading,
.booking-live .booking-instructions,
.booking-live .booking-help-note {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.booking-live .calcom-embed-wrap {
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: #fff;
}
.booking-live .calcom-embed {
  height: 383px;
  min-height: 383px;
  max-height: 383px;
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.booking-live .calcom-embed iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  border: 0;
}
.booking-footer-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 13px;
  background: #fff;
  min-height: 37px;
  border-top: 1px solid #e5e5e5;
}
.booking-footer-actions .book-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 9px 0;
  min-height: 37px;
  border: 0;
  background: none;
  color: #333;
  font: 600 9px/1.2 "DM Sans", Arial, sans-serif;
  letter-spacing: .055em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.booking-footer-actions .book-fallback:hover,
.booking-footer-actions .book-fallback:focus-visible {
  background: transparent;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.social-icon--linkedin svg { width: 19px; height: 19px; }
.social-icon svg { flex: none; }
@media (min-width: 651px) and (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(280px, 43%) minmax(0, 1fr); gap: 4%; }
  .calendar-wrap.booking-live { max-width: 390px; margin-top: 40px; }
}
@media (max-width: 650px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .calendar-wrap.booking-live { max-width: 390px; margin: 0 auto; }
  .booking-live .calcom-embed { height: 430px; min-height: 430px; max-height: 430px; }
  }

/* V42 — The booking card fills the left column from the start of “Let's talk”
   to the lower edge of the large wordmark and divider; no expand button. */
@media (min-width: 901px) {
  .calendar-wrap.booking-live { margin-top: 0; }
  .booking-live .calcom-embed {
    height: var(--booking-compact-height, 420px);
    min-height: var(--booking-compact-height, 420px);
    max-height: var(--booking-compact-height, 420px);
  }
}


/* V46 — Upcoming project cards link to distinct coming-soon detail pages. */
.project-card--placeholder{cursor:pointer}
.project-card--placeholder .cover--placeholder{
  isolation:isolate;border:1px solid #d8d8d4;overflow:hidden;
}
.project-card--placeholder .placeholder-art{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(20px,2.4vw,38px);
}
/* Same full-card reveal and zoom used by the published case-study cards. */
.project-card--placeholder .placeholder-hover{
  z-index:3;background:rgba(0,0,0,.67);
  color:#fff;justify-content:flex-end;
}
.project-card--placeholder .placeholder-hover strong{
  font-size:clamp(40px,5vw,80px);line-height:1;letter-spacing:-.025em;
}
.project-card--placeholder .placeholder-hover small{
  margin-top:4px;font-size:12px;letter-spacing:.12em;font-weight:600;
}
.project-card--placeholder:hover .placeholder-hover,
.project-card--placeholder:focus-visible .placeholder-hover{opacity:1}
.cover--placeholder-01{background:#ecece8;color:#181818}
.cover--placeholder-02{background:#171717;color:#f5f5f1;border-color:#171717 !important}
.placeholder-topline,.placeholder-bottomline{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  font-size:clamp(10px,.92vw,13px);font-weight:600;letter-spacing:.13em;
}
.placeholder-bottomline{padding-top:12px;border-top:1px solid currentColor}
.placeholder-bottomline>span{font-size:clamp(17px,2vw,30px);font-weight:400}
.placeholder-number{position:relative;z-index:1;display:block;text-align:center;
  font:normal clamp(140px,21vw,360px)/.78 'Instrument Serif',Georgia,serif;
  letter-spacing:-.075em;align-self:center;
}
.placeholder-geometry{position:absolute;z-index:0;pointer-events:none;
  inset:16% 27%;border:1px solid currentColor;border-radius:50%;opacity:.16;
  transform:rotate(-20deg) scaleX(1.42)
}
.cover--placeholder-02 .placeholder-geometry{inset:18% 25%;border-radius:0;
  transform:rotate(21deg) scale(.89);opacity:.22}
.project-card--placeholder .card-info{padding-top:10px}
.project-card--placeholder .card-client{color:#777}
.project-card--placeholder .placeholder-title-suffix{color:#666}
@media(max-width:720px){
  .project-card--placeholder .placeholder-art{padding:22px}
  .placeholder-number{font-size:clamp(125px,37vw,250px)}
  .placeholder-topline,.placeholder-bottomline{font-size:11px}
}


/* V46 — Upcoming case-study landing pages: editorial, responsive, no invented content. */
.upcoming-case{padding:0 1.6% 125px;color:#111;background:#fff;}
.upcoming-case__top{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #cfcfcf;padding:50px 0 25px;font-size:11px;font-weight:600;letter-spacing:.13em;}
.upcoming-case__back{display:inline-flex;gap:8px;align-items:center;text-decoration:none;transition:opacity .2s;}
.upcoming-case__back:hover{opacity:.55;}
.upcoming-case__hero{padding:100px 0 80px;}
.upcoming-case__eyebrow{display:flex;gap:12px;align-items:center;font-size:12px;font-weight:600;letter-spacing:.12em;}
.upcoming-case__diamond{font-size:12px;}
.upcoming-case__hero h1{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(96px,14.5vw,238px);font-weight:400;line-height:.87;letter-spacing:-.065em;margin:56px 0 72px;}
.upcoming-case__period{font-style:italic;}
.upcoming-case__intro{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:36px;border-top:1px solid #151515;padding-top:24px;}
.upcoming-case__intro>span{font-size:12px;font-weight:600;letter-spacing:.12em;}
.upcoming-case__intro p{font-size:clamp(21px,2.2vw,32px);font-weight:400;line-height:1.28;letter-spacing:-.025em;max-width:690px;margin:0;}
.upcoming-case__visual{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:2.05;isolation:isolate;overflow:hidden;padding:clamp(24px,3vw,54px);background:#efefeb;color:#161616;}
.upcoming-case--02 .upcoming-case__visual{background:#161616;color:#f6f6f4;}
.upcoming-case__visual-index,.upcoming-case__visual-caption{position:relative;z-index:2;font-size:clamp(11px,1vw,14px);font-weight:600;letter-spacing:.13em;}
.upcoming-case__visual-caption{align-self:flex-end;}
.upcoming-case__visual-number{position:absolute;z-index:1;inset:0;display:grid;place-items:center;font:normal clamp(200px,38vw,580px)/1 'Instrument Serif',Georgia,serif;letter-spacing:-.08em;}
.upcoming-case__visual-shape{position:absolute;inset:13% 30%;border:1px solid currentColor;border-radius:50%;opacity:.17;transform:rotate(-20deg) scaleX(1.5);pointer-events:none;}
.upcoming-case--02 .upcoming-case__visual-shape{inset:16% 30%;border-radius:0;transform:rotate(22deg) scale(1.1);}
.upcoming-case__bottom{display:flex;justify-content:space-between;gap:35px;border-top:1px solid #111;padding:34px 0;margin-top:72px;}
.upcoming-case__bottom>div{display:flex;flex-direction:column;gap:16px;}
.upcoming-case__bottom>div:last-child{text-align:right;}
.upcoming-case__bottom span{font-size:11px;font-weight:600;letter-spacing:.12em;}
.upcoming-case__bottom a{font:normal clamp(28px,3vw,49px)/1 'Instrument Serif',Georgia,serif;text-decoration:none;}
.upcoming-case__bottom a:hover{text-decoration:underline;text-underline-offset:6px;}
/* Keep the same editorial reveal on touchscreen layouts, without hiding the project label. */
@media(max-width:650px){
  .project-card--placeholder .placeholder-hover{
    opacity:1;background:linear-gradient(transparent 43%,rgba(0,0,0,.78));
    padding:20px;
  }
  .project-card--placeholder .placeholder-hover span,
  .project-card--placeholder .placeholder-hover small{display:none}
  .project-card--placeholder .placeholder-hover strong{font-size:35px}
}
@media(prefers-reduced-motion:reduce){
  .project-card--placeholder .placeholder-art,.project-card--placeholder .placeholder-hover{transition-duration:.01ms}
}
@media(max-width:750px){
  .upcoming-case__top{padding-top:38px;}
  .upcoming-case__hero{padding:70px 0 54px;}
  .upcoming-case__hero h1{font-size:clamp(90px,18vw,170px);margin:45px 0 56px;}
  .upcoming-case__intro{grid-template-columns:1fr;gap:20px;}
  .upcoming-case__visual{aspect-ratio:1.18;}
  .upcoming-case__visual-number{font-size:clamp(190px,51vw,400px);}
  .upcoming-case__bottom{gap:45px;flex-direction:column;margin-top:44px;}
  .upcoming-case__bottom>div:last-child{text-align:left;}
}
@media(max-width:430px){
  .upcoming-case{padding-bottom:80px;}
  .upcoming-case__top{font-size:9px;gap:12px;}
  .upcoming-case__hero h1{font-size:clamp(82px,20vw,125px);}
  .upcoming-case__visual{aspect-ratio:1.05;padding:20px;}
  .upcoming-case__bottom a{font-size:35px;}
}

/* V48 — concise location and relocation details beneath the landing-page introduction. */
.intro-left{display:flex;flex-direction:column;align-items:flex-start;gap:28px;min-width:0;padding-top:15px}
.intro-left .intro-copy{padding-top:0}
.intro-location{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;color:#484848;font-size:14px;line-height:1.3;letter-spacing:-.01em}
.intro-location-place{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.intro-location-place svg{display:block;width:17px;height:17px;flex:none}
.intro-location-divider{width:1px;height:19px;background:#cdcdcd;flex:none}
.intro-relocation,.intro-availability{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:8px 12px;border:1px solid #dadada;border-radius:100px;background:#f7f7f7;color:#242424;font-weight:500;font-size:13px}
/* Soft green availability light: visible glow with a restrained breathing pulse. */
.intro-relocation-dot,.intro-availability-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#20bf73;
  flex:none;
  box-shadow:0 0 0 3px rgba(32,191,115,.14),0 0 9px rgba(32,191,115,.55),0 0 17px rgba(32,191,115,.2);
  animation:relocation-glow 2.7s ease-in-out infinite;
}
@keyframes relocation-glow{
  0%,100%{box-shadow:0 0 0 3px rgba(32,191,115,.14),0 0 9px rgba(32,191,115,.55),0 0 17px rgba(32,191,115,.2)}
  50%{box-shadow:0 0 0 5px rgba(32,191,115,.19),0 0 13px rgba(32,191,115,.72),0 0 22px rgba(32,191,115,.32)}
}
@media(prefers-reduced-motion:reduce){.intro-relocation-dot,.intro-availability-dot{animation:none}}
@media(max-width:650px){.intro-left{padding-top:0;gap:22px}.intro-location{gap:10px 12px;font-size:13px}.intro-location-divider{height:16px}.intro-relocation,.intro-availability{font-size:12px;padding:7px 10px}}
@media(max-width:390px){.intro-location-divider{display:none}}


/* V50 — Playground: creative experiments remain separate from professional case studies. */
.playground-teaser{margin:0 1.6% 105px;padding:28px 0 31px;border-top:1px solid #111;border-bottom:1px solid #ddd}
.playground-teaser__eyebrow,.playground-page__meta{display:flex;justify-content:space-between;gap:18px;font-size:11px;letter-spacing:.105em;font-weight:600}
.playground-teaser__body{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-top:36px}
.playground-teaser h2{font:normal clamp(54px,8vw,124px)/.97 'Instrument Serif',Georgia,serif;letter-spacing:-.055em;margin:0}
.playground-teaser__period,.playground-page h1 span,.experiment-page h1 span,.experiment-story h2 span,.experiment-page__outro h2 span{font-style:italic}
.playground-teaser p{font-size:clamp(16px,1.4vw,20px);line-height:1.45;max-width:520px;margin:14px 0 0;color:#555}
.playground-teaser__link{color:#111;font-size:clamp(15px,1.4vw,19px);text-decoration:none;border:1px solid #111;border-radius:100px;padding:18px 23px;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.playground-teaser__link:hover,.playground-teaser__link:focus-visible{background:#111;color:#fff;transform:translateY(-2px)}
.work-page>.playground-teaser{margin:90px 0 0}
.playground-page,.experiment-page{padding:75px 1.6% 130px;min-height:70vh}
.playground-page__intro{margin-bottom:62px}
.playground-page h1{font:normal clamp(102px,17vw,265px)/.9 'Instrument Serif',Georgia,serif;letter-spacing:-.065em;margin:90px 0 54px}
.playground-page__sub{display:flex;align-items:end;justify-content:space-between;gap:30px;border-top:1px solid #111;padding-top:30px}
.playground-page__sub p{font-size:clamp(22px,2.2vw,34px);line-height:1.3;letter-spacing:-.028em;max-width:850px;margin:0}
.playground-page__sub span{font-size:11px;font-weight:600;line-height:1.6;letter-spacing:.075em;white-space:nowrap;text-align:right}
.playground-grid{margin-bottom:54px}
.playground-page__footnote{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:23px 0;border-top:1px solid #ddd;color:#606060;font-size:14px}
.playground-page__footnote p{margin:0}.playground-page__footnote a{color:#111;text-decoration:underline;text-underline-offset:4px}
.experiment-cover .cover-art{height:100%;width:100%}
.experiment-cover .cover-hover{background:rgba(0,0,0,.77)}
.experiment-cover .cover-hover strong{font-size:clamp(40px,5.4vw,85px);line-height:.96;letter-spacing:-.03em}
.experiment-art{--art-ink:#171717;--art-paper:#ededea;position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:var(--art-paper);color:var(--art-ink);padding:clamp(17px,2.5vw,35px)}
.experiment-art--impossible-maze{--art-ink:#f0efea;--art-paper:#181818}
.experiment-art__top,.experiment-art__bottom{z-index:1;position:relative;display:flex;justify-content:space-between;gap:12px;font-size:clamp(9px,.85vw,13px);font-weight:600;letter-spacing:.12em;line-height:1.3}
.bubble-art{position:absolute;inset:13% 10%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));align-items:center;justify-items:center;gap:1.4%;transform:rotate(-9deg) scale(1.05)}
.bubble-art__bubble{width:min(100%,95px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff 0%,#f2f2f1 23%,#d7d7d4 62%,#a8a8a4 91%);box-shadow:inset -6px -7px 11px #7775,inset 3px 3px 6px #fff9,1px 3px 5px #aaa6;border:1px solid #c8c8c3}
.bubble-art__bubble.is-popped{background:radial-gradient(circle at 55% 55%,#bebebb,#e6e6e2 62%,#fbfbf8 84%);box-shadow:inset 2px 3px 8px #6664,0 0 0 1px #bbb5;transform:scale(.88)}
.maze-art{position:absolute;inset:14% 9%;display:grid;place-items:center;transform:rotate(-3deg)}
.maze-art svg{width:100%;max-height:100%;height:100%;filter:drop-shadow(0 1px 0 #aaa2)}
.experiment-page{padding-top:40px}
.experiment-page__top{display:flex;justify-content:space-between;gap:18px;padding:28px 0 25px;border-bottom:1px solid #bdbdbd;font-size:11px;font-weight:600;letter-spacing:.11em}
.experiment-page__top a{color:#111;text-decoration:none}.experiment-page__top a:hover{text-decoration:underline;text-underline-offset:5px}
.experiment-page__hero{padding:95px 0 65px}
.experiment-page__kicker{font-size:12px;letter-spacing:.12em;font-weight:600}
.experiment-page h1{font:normal clamp(92px,14.2vw,220px)/.87 'Instrument Serif',Georgia,serif;letter-spacing:-.065em;margin:45px 0 64px;text-wrap:balance}
.experiment-page__intro{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:65px;border-top:1px solid #111;padding-top:26px}
.experiment-page__intro>p{font-size:clamp(22px,2.3vw,35px);line-height:1.29;letter-spacing:-.025em;margin:0;max-width:800px}
.experiment-page__actions{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.experiment-play{display:inline-flex;gap:42px;align-items:center;justify-content:space-between;background:#111;color:#fff;font-size:14px;font-weight:600;letter-spacing:.08em;padding:20px 25px;border-radius:100px;min-width:210px;text-decoration:none;transition:transform .2s,background .2s}
.experiment-play:hover,.experiment-play:focus-visible{background:#444;transform:translateY(-2px)}
.experiment-page__actions>span{color:#666;font-size:12px}
.experiment-page__visual-link{position:relative;display:block;text-decoration:none;aspect-ratio:2.05;overflow:hidden}
.experiment-art--detail{padding:clamp(24px,4vw,66px)}
.experiment-art--detail .experiment-art__top,.experiment-art--detail .experiment-art__bottom{font-size:clamp(10px,1.1vw,16px)}
.experiment-page__visual-cta{position:absolute;bottom:42px;left:50%;transform:translateX(-50%) translateY(8px);z-index:3;padding:17px 25px;border-radius:50px;background:#fff;color:#111;font-size:13px;font-weight:600;letter-spacing:.1em;white-space:nowrap;opacity:0;transition:opacity .25s,transform .25s}
.experiment-page__visual-link:hover .experiment-page__visual-cta,.experiment-page__visual-link:focus-visible .experiment-page__visual-cta{opacity:1;transform:translateX(-50%) translateY(0)}
.experiment-page__visual-link .experiment-art{transition:transform .4s}.experiment-page__visual-link:hover .experiment-art{transform:scale(1.015)}
.experiment-page__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:32px 0 42px;border-bottom:1px solid #d3d3d3}
.experiment-page__facts>div{display:flex;flex-direction:column;gap:12px}.experiment-page__facts span{font-size:11px;color:#666;letter-spacing:.08em}.experiment-page__facts strong{font-size:16px;font-weight:500}
.experiment-story{max-width:1300px;margin:60px auto 90px}
.experiment-story section{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;border-bottom:1px solid #ddd;padding:55px 0}
.experiment-story section>div>span{font-size:11px;font-weight:600;letter-spacing:.12em}
.experiment-story h2{font:normal clamp(55px,6.5vw,102px)/.97 'Instrument Serif',Georgia,serif;letter-spacing:-.04em;margin:18px 0 0}
.experiment-story p{font-size:clamp(19px,2.1vw,28px);line-height:1.4;letter-spacing:-.012em;margin:0}
.experiment-page__outro{display:grid;grid-template-columns:1fr 1fr;gap:35px;border-top:1px solid #111;padding-top:36px}
.experiment-page__outro>div{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.experiment-page__outro>div:nth-child(2){align-items:flex-end;text-align:right}
.experiment-page__outro span{font-size:11px;letter-spacing:.12em;font-weight:600}
.experiment-page__outro h2{font:normal clamp(58px,7vw,110px)/.9 'Instrument Serif',Georgia,serif;letter-spacing:-.04em;margin:8px 0}
.experiment-next{font:normal clamp(40px,5vw,77px)/1 'Instrument Serif',Georgia,serif;color:#111;text-decoration:none}
.experiment-next:hover{text-decoration:underline;text-underline-offset:5px}
.experiment-all{font-size:14px;color:#666;text-underline-offset:4px}
@media(max-width:900px){.playground-page h1{margin:66px 0 40px}.experiment-page__intro{gap:25px}.experiment-story section{gap:32px}.experiment-page__hero{padding:72px 0 55px}.experiment-page h1{margin:35px 0 45px}}
@media(max-width:650px){.playground-teaser{margin:0 16px 78px;padding:20px 0 28px}.playground-teaser__eyebrow{font-size:9px}.playground-teaser__body{display:block;margin-top:30px}.playground-teaser h2{font-size:clamp(58px,13vw,95px)}.playground-teaser p{font-size:17px;margin-bottom:26px}.playground-teaser__link{display:inline-flex;font-size:14px;padding:14px 17px}.work-page>.playground-teaser{margin:70px 0 0}.playground-page,.experiment-page{padding-left:16px;padding-right:16px;padding-bottom:86px}.playground-page{padding-top:55px}.playground-page__meta{font-size:9px}.playground-page h1{font-size:clamp(80px,17vw,130px);margin:65px 0 34px}.playground-page__sub{display:block;padding-top:22px}.playground-page__sub p{font-size:23px}.playground-page__sub span{display:block;text-align:left;margin-top:22px;font-size:10px}.playground-page__footnote{display:block;line-height:1.5}.playground-page__footnote a{display:inline-block;margin-top:12px}.experiment-cover .cover-hover strong{font-size:clamp(35px,8vw,55px)}.experiment-art__top,.experiment-art__bottom{font-size:9px}.experiment-page{padding-top:30px}.experiment-page__top{font-size:9px}.experiment-page__hero{padding:52px 0 40px}.experiment-page h1{font-size:clamp(71px,15vw,120px);margin:35px 0}.experiment-page__intro{display:block}.experiment-page__intro>p{font-size:23px}.experiment-page__actions{margin-top:27px}.experiment-play{padding:17px 23px}.experiment-page__visual-link{aspect-ratio:1.1}.experiment-page__visual-cta{bottom:24px;opacity:1;transform:translateX(-50%);font-size:11px;padding:13px 18px}.experiment-page__facts{grid-template-columns:1fr 1fr;gap:30px 15px}.experiment-page__facts strong{font-size:14px}.experiment-story{margin:35px auto 66px}.experiment-story section{display:block;padding:42px 0}.experiment-story h2{font-size:65px;margin-bottom:25px}.experiment-story p{font-size:19px}.experiment-page__outro{display:block}.experiment-page__outro>div:nth-child(2){align-items:flex-start;text-align:left;border-top:1px solid #ddd;padding-top:35px;margin-top:42px}.experiment-page__outro h2{font-size:75px}.experiment-next{font-size:55px}.experiment-art--detail{padding:20px}.bubble-art{inset:21% 4%;grid-template-columns:repeat(7,1fr);gap:0}.maze-art{inset:22% 4%}}
@media(hover:none){.experiment-page__visual-cta{opacity:1;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.experiment-page__visual-link .experiment-art,.experiment-page__visual-cta,.experiment-play,.playground-teaser__link{transition-duration:.01ms}}
/* Keep all five primary destinations on a single compact row on small phones. */
@media(max-width:650px){
  .site-header nav{display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .site-header nav::-webkit-scrollbar{display:none}
  .site-header nav .pill{flex:0 0 auto;font-size:12px;padding:8px 10px;min-height:37px}
}

/* V51 — Surplus cover for upcoming Project 02 on Home and Work.
   The existing card hover overlay, subtle image zoom, and link remain intact. */
.cover--placeholder-02{background:#36dba0;border-color:#36dba0!important}
.project-card--placeholder .placeholder-art--surplus{position:absolute;inset:0;overflow:hidden}
.placeholder-art--surplus img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}


/* V54 — LeaveLens cover for upcoming Project 01 on Home and Work. */
.cover--placeholder-01{background:#f4f5f8;border-color:#e0e3eb!important}
.project-card--placeholder .placeholder-art--leavelens{position:absolute;inset:0;overflow:hidden;background:#f4f5f8}
.placeholder-art--leavelens img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}

/* V56 — Surplus project identity on both work cards and its preview page. */
.project-card--surplus .card-info .card-description,.project-card--leavelens .card-info .card-description{max-width:680px;margin-top:11px;line-height:1.5}
.project-card--surplus .card-client,.project-card--leavelens .card-client{display:block;margin-bottom:7px}
.upcoming-case--02 .upcoming-case__hero h1,.upcoming-case--01 .upcoming-case__hero h1{
  font-size:clamp(76px,10vw,155px);
  max-width:1400px;
  line-height:.94;
  overflow-wrap:break-word;
}
.upcoming-case--02 .upcoming-case__intro>span,.upcoming-case--01 .upcoming-case__intro>span{line-height:1.65}
.upcoming-case__status{color:#777;font-size:14px;line-height:1.5;margin:27px 0 0}
.upcoming-case--02 .upcoming-case__visual--surplus{
  aspect-ratio:2.05;padding:0;background:#36dba0;color:#111;
  position:relative;
}
.upcoming-case__visual--surplus img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.upcoming-case__visual-badge{position:absolute;bottom:20px;left:22px;background:#fff;color:#111;font-size:11px;font-weight:600;letter-spacing:.11em;padding:12px 16px}
@media(max-width:650px){
  .upcoming-case--02 .upcoming-case__hero h1,.upcoming-case--01 .upcoming-case__hero h1{font-size:clamp(67px,15.5vw,115px);overflow-wrap:anywhere}
  .upcoming-case--02 .upcoming-case__visual--surplus{aspect-ratio:1.1}
  .upcoming-case__visual--surplus img{object-position:center center}
  .upcoming-case__visual-badge{bottom:12px;left:12px;font-size:9px;padding:10px 12px}
}


/* V57 — LeaveLens identity and case-study preview; same responsive editorial
   presentation as Surplus, with the left navigation preserved in the image. */
.upcoming-case--01 .upcoming-case__visual--leavelens{
  aspect-ratio:2.05;padding:0;background:#f3f5f9;color:#142033;
  position:relative;
}
.upcoming-case__visual--leavelens img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:left top;
}
@media(max-width:650px){
  .upcoming-case--01 .upcoming-case__visual--leavelens{aspect-ratio:1.1}
  .upcoming-case__visual--leavelens img{object-position:left top}
}

/* V60 — responsive refinement for compact phones, touch devices, and wide screens.
   The visual system, typography, project order, and hover behavior are unchanged. */
/* Grid text and controls must be allowed to shrink instead of pushing a column out. */
.intro-section > *, .projects-grid > *, .contact-grid > *,
.case-heading > *, .circle-split > *, .mesa-split > *,
.experiment-page__intro > *, .experiment-story section > * { min-width: 0; }

/* The entire five-link navigation fits even the 320px compact phone layout. */
@media (max-width: 374px) {
  .site-header nav { gap: 3px; }
  .site-header nav .pill {
    font-size: 11px;
    padding: 8px 7px;
    min-height: 44px;
  }
}

/* Long emphasized lines must remain visible at the narrowest supported width. */
@media (max-width: 380px) {
  .circle-split h2, .mesa-split h2 {
    font-size: clamp(40px, 12.5vw, 48px);
    overflow-wrap: break-word;
  }
  .circle-statement p, .circle-transition p,
  .mesa-question p, .mesa-design-note p { font-size: clamp(36px, 10.5vw, 45px); }
  .circle-ending > h2, .mesa-ending > h2 { font-size: clamp(48px, 16vw, 65px); }
}

/* At intermediate tablet widths, keep long hover titles inside their images. */
@media (min-width: 651px) and (max-width: 900px) {
  .project-card .cover-hover { padding: 18px; }
  .project-card .cover-hover strong,
  .project-card--placeholder .placeholder-hover strong {
    font-size: clamp(27px, 3.5vw, 34px);
    line-height: 1.02;
    overflow-wrap: break-word;
  }
}

/* A real touch screen has no hover: keep the artwork visible, but provide the
   same title/action cue against a soft bottom gradient. */
@media (hover: none), (pointer: coarse) {
  .project-card .cover-hover,
  .project-card--placeholder .placeholder-hover {
    opacity: 1;
    background: linear-gradient(to bottom, transparent 42%, rgba(0,0,0,.66) 100%);
  }
  .project-card .cover-hover strong,
  .project-card--placeholder .placeholder-hover strong {
    font-size: clamp(24px, 4vw, 38px);
    line-height: 1.04;
    overflow-wrap: break-word;
  }
}
@media (hover: none) and (max-width: 650px),
       (pointer: coarse) and (max-width: 650px) {
  .project-card .cover-hover, .project-card--placeholder .placeholder-hover {
    padding: clamp(13px, 4vw, 22px);
  }
  .project-card .cover-hover strong,
  .project-card--placeholder .placeholder-hover strong {
    font-size: clamp(25px, 6.2vw, 35px);
  }
}

/* On extra-wide monitors, keep a readable editorial canvas instead of
   stretching images and paragraphs indefinitely across a 4K desktop. */
@media (min-width: 2000px) {
  .site-header, .intro-section, .name-hero, .work-section,
  .about-section, .career-experience, .experience, .work-page,
  .playground-page, .experiment-page, .case-page, .upcoming-case,
  .mayo-case, .mesa-case, .circle-case, .resume-page,
  .contact-grid, .footer-bottom, .playground-teaser {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* V60 compact-width typography: keep the final Circle the City headline and
   the italic Playground punctuation inside the visible content margins. */
@media (max-width: 420px) {
  .circle-ending > h2 { font-size: clamp(34px, 10vw, 42px); }
}
@media (max-width: 374px) {
  .playground-page h1 { font-size: clamp(61px, 18vw, 75px); }
}

/* Compact and touch views show the un-obscured project image with a small,
   readable action chip. Desktop hover still uses the full editorial reveal. */
@media (max-width: 650px), (hover: none), (pointer: coarse) {
  .project-card .cover-hover,
  .project-card--placeholder .placeholder-hover {
    opacity: 1;
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0;
    padding: clamp(12px, 3.3vw, 22px);
  }
  .project-card .cover-hover strong,
  .project-card--placeholder .placeholder-hover strong,
  .project-card--placeholder .placeholder-hover small { display: none; }
  .project-card .cover-hover > span,
  .project-card--placeholder .placeholder-hover > span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border-radius: 100px;
    padding: 8px 12px;
    background: rgba(0,0,0,.78);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .065em;
    white-space: nowrap;
  }
}

/* V61 — Matching green availability badge beneath the introduction.
   Natural wrapping keeps all three items legible on compact phones. */
.intro-availability{flex:none}

/* V64 / evidence-led project cards and opening snapshots */
.work-evidence{display:flex;gap:1.4rem;flex-wrap:wrap;border-top:1px solid #d8d8d8;margin-top:1.1rem;padding-top:.9rem}
.work-evidence>div{display:flex;align-items:baseline;gap:.55rem;min-width:0}
.work-evidence strong{font-size:1rem;font-weight:650;white-space:nowrap}
.work-evidence span{font-size:.75rem;line-height:1.35;color:#686868}
.case-evidence-band{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1.5rem;border-top:1px solid #222;border-bottom:1px solid #222;padding:1.6rem 0;margin:2.2rem 0 3rem;font-family:"DM Sans",sans-serif}
.case-evidence-facts{display:grid;gap:1.15rem}
.case-evidence-facts>div{display:grid;gap:.35rem}
.case-evidence-facts span{font-size:.7rem;letter-spacing:.12em;color:#777}
.case-evidence-facts strong{font-size:1rem;font-weight:500;line-height:1.45}
.case-evidence-stat{display:flex;flex-direction:column;gap:.5rem}
.case-evidence-stat strong{font-size:clamp(2.6rem,4.6vw,5rem);font-weight:600;line-height:1}
.case-evidence-stat span{font-size:.9rem;color:#555;line-height:1.4}
.case-evidence-note{grid-column:1/-1;color:#777;font-size:.78rem;line-height:1.5;margin:0}

/* V72 — longer, evidence-grounded metrics remain readable in two-up project cards
   and on smaller tablets, without changing the site's editorial visual language. */
.work-evidence{row-gap:.85rem}
.work-evidence>div{flex:1 1 13.5rem;align-items:baseline}
@media(max-width:940px){
  .case-evidence-band{grid-template-columns:1fr 1fr;column-gap:1.3rem;row-gap:1.45rem}
  .case-evidence-facts{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:1rem}
  .case-evidence-stat strong{font-size:clamp(2.3rem,5.4vw,4rem)}
}
@media(max-width:640px){
  .case-evidence-facts{grid-template-columns:1fr}
  .case-evidence-stat strong{font-size:2.6rem}
}

/* v76: keep project-card evidence visually aligned after removing redundant CTA */
.project-card--surplus .card-info{display:flex;flex-direction:column;align-items:stretch}
.project-card--surplus .work-evidence{width:100%;margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,45px);align-items:start}
.project-card--surplus .work-evidence>div{min-width:0}
.project-card--surplus .card-description{max-width:100%}
@media(max-width:560px){.project-card--surplus .work-evidence{gap:12px}}

/* v79 — Keep the evidence dividers on exactly the same horizontal baseline
   across cards in each grid row, regardless of description wrapping. */
.projects-grid > .project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.projects-grid > .project-card > .cover { flex: 0 0 auto; width: 100%; }
.projects-grid > .project-card > .card-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
}
.projects-grid > .project-card > .card-info > .work-evidence {
  width: 100%;
  margin-top: auto;
  padding-top: 24px;
}

/* v81 — One shared row rhythm for two-up project cards.
   Subgrid makes the cover, title, category, summary, divider and evidence
   occupy the same grid tracks across BOTH cards, even when text wraps. */
@media (min-width: 651px) {
  .projects-grid { align-items: stretch; grid-auto-flow: row dense; }
  .projects-grid > .project-card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    gap: 0;
    height: auto;
    align-self: stretch;
    min-height: 0;
  }
  .projects-grid > .project-card > .cover {
    grid-row: span 1;
    width: 100%;
    height: auto;
    align-self: start;
    margin: 0;
  }
  .projects-grid > .project-card > .card-info {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    gap: 0;
    padding: 10px 0 0;
    min-height: 0;
    align-items: start;
  }
  .projects-grid > .project-card > .card-info > .card-client,
  .projects-grid > .project-card > .card-info > h3,
  .projects-grid > .project-card > .card-info > p,
  .projects-grid > .project-card > .card-info > .work-evidence { min-height: 0; }
  .projects-grid > .project-card > .card-info > .card-client { margin: 8px 0 6px; }
  .projects-grid > .project-card > .card-info > h3 { margin: 0 0 4px; }
  .projects-grid > .project-card > .card-info > .card-description {
    margin: 10px 0 0;
    max-width: 100%;
  }
  .projects-grid > .project-card > .card-info > .work-evidence,
  .projects-grid > .project-card--surplus > .card-info > .work-evidence {
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #d8d8d8;
    width: 100%;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    column-gap: clamp(16px, 2vw, 30px);
    row-gap: 8px;
  }
  .projects-grid > .project-card .work-evidence > div {
    display: flex;
    flex: initial;
    gap: 8px;
    align-items: baseline;
    min-width: 0;
  }
  .projects-grid > .project-card .work-evidence span { overflow-wrap: anywhere; }
}
/* On phones every project occupies a full row; use a natural readable flow. */
@media (max-width: 650px) {
  .projects-grid > .project-card > .card-info > .work-evidence {
    margin-top: 16px;
    padding-top: 14px;
  }
}


/* Phone-only portfolio notice. Never shown on tablets or desktop. */
html.mobile-gated, html.mobile-gated body { overflow: hidden !important; min-height: 100%; }
html.mobile-gated #app { display: none !important; }
#mobile-experience-notice { display: none; }
html.mobile-gated #mobile-experience-notice {
  display: flex; flex-direction: column; justify-content: space-between;
  position: fixed; inset: 0; z-index: 2147483647; overflow-y: auto;
  background: #fff; color: #111; padding: max(24px, env(safe-area-inset-top)) 7vw max(24px, env(safe-area-inset-bottom));
  font-family: "DM Sans", Arial, sans-serif;
}
.mobile-notice-top, .mobile-notice-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-notice-top { padding-bottom: 18px; border-bottom: 1px solid #dedede; }
.mobile-notice-top > span:last-child { font-size: 9px; letter-spacing: .12em; color: #777; white-space: nowrap; }
.mobile-notice-logo { font-family: "Instrument Serif", Georgia, serif; font-size: 34px; line-height: 1; letter-spacing: -.06em; }
.mobile-notice-main { padding: 45px 0 56px; max-width: 440px; }
.mobile-notice-device { margin-bottom: 46px; color: #111; }
.mobile-notice-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .16em; margin: 0 0 19px; color: #757575; }
.mobile-notice-main h1 { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(46px, 12vw, 76px); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; margin: 0 0 25px; }
.mobile-notice-main h1 em { font-weight: 400; }
.mobile-notice-copy { font-size: 17px; line-height: 1.6; color: #555; margin: 0; max-width: 350px; }
.mobile-notice-footer { border-top: 1px solid #dedede; padding-top: 18px; font-size: 9px; letter-spacing: .12em; color: #777; }
@media (max-height: 580px) { .mobile-notice-main { padding: 24px 0; } .mobile-notice-device { margin-bottom: 18px; } .mobile-notice-main h1 { font-size: clamp(36px, 8vh, 58px); margin-bottom: 15px; } .mobile-notice-copy { font-size: 14px; } }