*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#222621;background:#faf9f5;font:17px/1.55 Arial,sans-serif}main,header,footer{width:min(1160px,90%);margin:auto}header,footer,.line{display:flex;align-items:center;justify-content:space-between;gap:18px}header{height:82px;border-bottom:1px solid #b8b9af}a{color:inherit;text-underline-offset:5px}header a,.card{text-decoration:none}.logo{font-weight:800;letter-spacing:-1px}.logo b{color:#916142}nav{display:flex;gap:24px}nav a:hover,.card:hover h2{text-decoration:underline}.ey{font:600 11px/1.5 monospace;letter-spacing:.12em;text-transform:uppercase;color:#54594c}.intro{padding:clamp(36px,5vw,70px) 0 30px}h1,h2,h3{font:normal clamp(45px,7.3vw,104px)/.98 Georgia,serif;letter-spacing:-.06em;margin:15px 0 20px}h2{font-size:clamp(34px,4.7vw,68px)}h3{font-size:clamp(28px,3.3vw,45px)}p{max-width:65ch}.lead{font-size:clamp(18px,2vw,24px);max-width:52ch}.card{display:grid;grid-template-columns:40% 60%;background:#e7eadb;border-radius:5px;overflow:hidden}.card article{padding:clamp(24px,4vw,62px);align-self:center}.cta{display:inline-block;background:#25352b;color:white;padding:12px 20px;border-radius:30px;font-size:14px}.stage{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 53% 55%,#e0f4f3,#a5d4d5 62%,#87bcbe);min-height:300px;aspect-ratio:1.75}.stage:before{content:'';position:absolute;inset:8% 19%;border:1px solid #ffffff66;border-radius:50%;transform:rotate(-23deg)}.stage img{position:absolute;object-fit:contain;filter:drop-shadow(6px 12px 9px #173a3840)}.tablet{height:87%;top:6%;left:17%;transform:rotate(-5deg)}.phone{height:68%;bottom:6%;left:58%;transform:rotate(6deg)}.casehero{aspect-ratio:2.55}.casehero .tablet{left:28%}.casehero .phone{left:59%}.facts{display:flex;justify-content:space-between;gap:18px;border-block:1px solid #b8b9af;padding:20px 0;margin:24px 0}.facts span{display:block}.chapter{display:grid;grid-template-columns:1fr 1.25fr;gap:7%;align-items:center;padding:55px 0;border-bottom:1px solid #b8b9af}.plate{display:flex;background:#ece6dd;align-items:center;justify-content:center;gap:5%;padding:6%;border-radius:4px}.plate img{width:44%;height:auto}.single img{width:100%;display:block}.single{background:#dfe8ed;padding:5%;display:block}.gallery{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:#eee7d9;padding:5%;gap:4%}.gallery img{width:100%}footer{padding:32px 0 38px;font-size:14px}.more{margin:45px 0}.line{border-top:1px solid #aaa;padding:16px 0;text-decoration:none}.line:hover{text-decoration:underline}@media(max-width:700px){header{height:63px}nav{gap:14px}.card,.chapter{grid-template-columns:1fr}.chapter{gap:22px;padding:35px 0}.stage{min-height:0;aspect-ratio:1.45}.casehero .tablet{left:12%}.facts{flex-wrap:wrap}.card article{padding:26px}.intro{padding-top:32px}.gallery{grid-template-columns:1fr;gap:15px}.logo,nav{font-size:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Portfolio theme */
:root{color-scheme:dark;--bg:#0B0F19;--slate:#1E293B;--ink:#E2E8F0;--blue:#0EA5E9;--muted:#b5c2d4}
body{background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
h1,h2,h3{font-family:inherit;font-weight:650;letter-spacing:-.055em;line-height:1.03}
header{border-bottom:1px solid #344256}.logo b,.ey{color:var(--blue)}.ey{font-family:inherit;letter-spacing:.13em}.lead,article p,.process p{color:var(--muted)}
.card,.case-intro,.plate,.gallery,.single{background:var(--slate)}.cta{background:var(--blue);color:var(--bg);font-weight:700}.stage{background:radial-gradient(ellipse at 50% 60%,#28506a,#152637 72%)}.stage:before{border-color:#80bada39}
.case-intro{margin-top:26px;border:1px solid #34465a;border-radius:8px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}.case-intro .intro{align-self:center;padding:clamp(24px,4vw,54px)}.case-intro h1{font-size:clamp(44px,6.3vw,88px)}.casehero{width:100%;height:100%;min-height:330px;aspect-ratio:auto}.casehero .tablet{height:77%;top:13%;left:11%}.casehero .phone{height:60%;left:63%;bottom:12%}.facts{grid-column:1/-1;margin:0;padding:22px 4%;border:0;border-top:1px solid #405166}.facts .ey{margin-bottom:4px}
.process{display:grid;grid-template-columns:1fr 1.25fr;gap:7%;padding:60px 0;border-bottom:1px solid var(--slate)}.process h3{font-size:24px;letter-spacing:-.035em;margin:28px 0 6px}.process h3:first-child{margin-top:0}.process p{margin:0}.chapter,.line{border-color:#344256}.single{margin:0}.single figcaption{font-size:13px;color:#c5d2df;margin:8px 0}.detail{margin-top:24px}a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}nav a:hover,.line:hover{color:var(--blue)}
@media(max-width:700px){.case-intro,.process{grid-template-columns:1fr}.casehero{height:auto;min-height:0;aspect-ratio:1.55}.facts{display:grid;grid-template-columns:1fr 1fr;padding:20px}.process{gap:12px;padding:36px 0}.stage .tablet{left:13%}}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 24px}.tags span{border:1px solid #547188;border-radius:99px;padding:4px 10px;font-size:12px;color:#d6e5ee}.results{padding:48px 0}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}.metrics div{padding:18px 0;border-top:1px solid #405166;color:var(--muted)}.metrics strong{display:block;color:var(--blue);font-size:clamp(24px,3.4vw,44px);letter-spacing:-.04em}.facts>div{max-width:24%}@media(max-width:700px){.metrics{grid-template-columns:1fr;gap:0}.facts>div{max-width:none}}

.audience{padding:clamp(32px,5vw,64px) 0;border-top:1px solid #344256}.audience article{max-width:820px}.audience h2{font-size:clamp(32px,4.6vw,61px)}.workflow{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.workflow figure{margin:0;padding:clamp(12px,2vw,24px);background:var(--slate);border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.workflow img{display:block;width:100%;height:clamp(220px,24vw,310px);object-fit:contain}.workflow figcaption{align-self:flex-start;font-size:14px;margin-top:16px;color:var(--ink)}@media(max-width:700px){.workflow{grid-template-columns:1fr}.workflow img{height:auto;max-height:410px}.workflow figure{padding:20px}.workflow figcaption{align-self:center}}

.zoom{position:relative;display:block;width:100%;border:0;padding:0;background:transparent;cursor:zoom-in;color:inherit}.zoom:focus-visible{outline:3px solid var(--blue)}.identity{grid-column:1/-1;background:#2ca9db;margin:0;padding:20px;text-align:center}.identity img{width:min(227px,80%)}#viewer{padding:14px;color:var(--ink);background:var(--bg);border:1px solid #52647d;border-radius:10px;max-width:94vw;max-height:94dvh;box-sizing:border-box}#viewer::backdrop{background:#03060de6}#viewer form{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px;font-size:14px}#viewer form button{border:1px solid #607389;border-radius:6px;background:var(--slate);color:var(--ink);padding:8px 12px;cursor:pointer;white-space:nowrap}#viewer img{display:block;margin:auto;max-width:100%;max-height:78dvh;object-fit:contain}body:has(#viewer[open]){overflow:hidden}

.identity{background:var(--slate)}.identity img{display:block;width:min(100%,480px);margin:auto;border-radius:4px}
#viewer{padding:0;border:0;overflow:visible}#viewer img{max-width:92vw;max-height:86dvh;border-radius:6px}#viewer form{position:absolute;right:8px;top:8px;margin:0}#viewer form button{width:38px;height:38px;border-radius:50%;padding:0;font-size:26px;line-height:1;background:#0b0f19ed}

#viewer form button{display:grid;place-items:center;caret-color:transparent;user-select:none}#viewer form button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.kc-label{margin-top:38px}.kc-art{display:grid;place-items:center;min-width:0;padding:5%;background:radial-gradient(ellipse at 50% 55%,#70558c,#392c52 65%,#251e36)}.kc-art img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 14px #100b2144)}.card>.kc-art{padding:7%}.case-intro:has(.kc-art:not(.kt-card-art)) h1{font-size:clamp(42px,5vw,72px)}@media(max-width:700px){.kc-art img{max-height:350px;object-fit:contain}}

.kt-card-art{background:radial-gradient(ellipse at 50% 55%,#70b9dc,#316884 65%,#20435c)}

.card .tags{margin-bottom:0}
.card .kc-art{overflow:hidden}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card .kc-art img{transition:transform 300ms ease-out}
  .card:hover .kc-art img{transform:scale(1.04)}
}
.dungeon-art{background:radial-gradient(ellipse at 50% 60%,#64636b,#403f47 65%,#29292f)}

@media (min-width:1290px){
  .card h2{text-wrap:balance}
}

/* The text sets the portrait height. The pills sit on their own row. */
.home-intro { text-align:center; }
.home-intro .ey { display:block; margin-bottom:15px; }
.home-intro h1 { margin:0; }
.home-intro .lead { max-width:37rem; margin:20px auto 0; }
.home-intro .tags { justify-content:center; margin:18px 0 0; }
@media (max-width: 700px) {
  .home-intro .ey { letter-spacing: .06em; }
  .home-intro .ey span { white-space: nowrap; }
  .home-intro h1 { font-size: clamp(36px, 10.8vw, 60px); }
}

nav { align-items: center; }
nav .contact-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 7px 18px;
  border-radius: 99px; background: var(--blue); color: var(--bg); font-weight: 700;
}
nav .contact-cta:hover { background: #7dd3fc; color: var(--bg); text-decoration: none; }
.contact-footer {
  display: block; width: 100%; margin-top: clamp(48px, 8vw, 104px);
  padding: 0; background: var(--contact-surface); border-top: 1px solid #344256;
}
.contact-inner { text-align: center; width: min(1160px, 90%); margin: auto; padding: clamp(42px, 6vw, 80px) 0 22px; }
.contact-inner .ey { margin: 0 auto 22px; }
.contact-inner h2 { margin: 0; font-size: clamp(38px, 5.5vw, 76px); }
.contact-actions { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 12px; margin: 44px 0 clamp(38px, 6vw, 72px); }
.contact-actions a, .contact-actions button {
  display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 16px;
  border: 1px solid #54677f; border-radius: 99px; background: transparent; color: inherit;
  font: inherit; text-decoration: none;
}
.contact-actions a:hover, .contact-actions a:focus-visible { color: var(--blue); border-color: currentColor; }
.contact-actions button:disabled { color: #a6b4c6; border-style: dashed; }
.contact-actions small { font-size: 11px; }
.contact-credit { border-top: 1px solid #344256; padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; color: var(--muted); }

.er-art { display:grid; align-items:center; padding:8%; min-width:0; overflow:hidden; background:radial-gradient(ellipse at 50% 55%,#79689d,#48405e 65%,#302a40); }
.er-pair { position:relative; }
.er-pair img { display:block; width:91%; border:1px solid #ffffff36; border-radius:5px; box-shadow:0 8px 22px #150f2455; }
.er-pair img + img { position:absolute; right:0; bottom:-3%; width:21%; border-radius:7px; }
.er-gallery { grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.er-gallery .zoom img { object-fit:contain; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .card .er-pair { transition:transform 300ms ease-out; }
  .card:hover .er-pair { transform:scale(1.04); }
}

.design-art { background: radial-gradient(ellipse at 50% 55%,#85788b,#504655 65%,#342e39); }
.design-section { padding:clamp(32px,5vw,68px) 0; border-bottom:1px solid #344256; }
.design-section h2 { font-size:clamp(32px,4.5vw,58px); margin:8px 0 24px; }
.design-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:26px 20px; }
.design-grid figure { margin:0; min-width:0; }
.design-grid .zoom { display:grid; place-items:center; width:100%; aspect-ratio:4/3; background:#202a38; border:1px solid #344256; border-radius:8px; overflow:hidden; padding:12px; }
.design-grid .zoom img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
.design-grid figcaption { padding:10px 0 0; color:var(--muted); font-size:14px; }
.design-grid figcaption strong { display:block; color:#e2e8f0; font-size:16px; }

.about-hero {display:grid;grid-template-columns:minmax(0,1fr) 34%;grid-template-areas:"label photo" "title photo" "intro photo";column-gap:clamp(24px,4vw,60px);margin:32px 0 44px;padding:clamp(26px,4vw,54px);border-radius:12px;background:#162132;}
.about-hero .ey {grid-area:label;margin:0 0 20px;}
.about-hero .lead {grid-area:intro;margin:20px 0 0;font-size:clamp(17px,1.6vw,21px);}
.about-hero h1 {grid-area:title;margin:0;font-size:clamp(35px,4.1vw,60px);line-height:1.06;}
.about-hero h1 span {display:block;text-wrap:balance;}
.about-hero img {grid-area:photo;width:100%;height:100%;min-height:0;max-height:420px;object-fit:cover;object-position:50% 38%;border-radius:7px;align-self:center;}
.about-history,.about-notes {display:grid;gap:clamp(24px,5vw,72px);border-top:1px solid #344256;padding:clamp(36px,5vw,64px) 0;}
.about-history {grid-template-columns:1fr 1.65fr;}
.about-notes {grid-template-columns:1fr 1fr;}
.about-page h2 {font-size:clamp(30px,4vw,52px);}
.about-roles h3 {font-size:clamp(26px,3vw,40px);margin:6px 0;}
.about-roles article + article {margin-top:27px;padding-top:24px;border-top:1px solid #344256;}
.about-page article p {color:var(--muted);max-width:62ch;}
.about-roles a,nav [aria-current="page"] {color:var(--blue);}
@media(max-width:700px){
 .about-hero {grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "label" "title" "intro";gap:16px;padding:22px;margin:20px 0 30px;}
 .about-hero .ey {align-self:center;margin:0;}
 .about-hero .lead {margin:0;}
 .about-hero img {width:100%;height:auto;max-height:none;aspect-ratio:4 / 3;object-position:50% 24%;}
 .about-history,.about-notes {grid-template-columns:1fr;}
}
@media(max-width:380px){header nav {gap:10px;}nav .contact-cta {padding-inline:12px;}}

header .logo picture, header .logo img { display: block; }
header .logo img { width: auto; height: 36px; }
@media (max-width: 700px) { header .logo img { width: 34px; height: 34px; } }

:root {
  --contact-surface: #111a29;
  --nav-height: 82px;
}
html { scroll-padding-top: calc(var(--nav-height) + 12px); }
header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  padding-inline: max(5%, calc((100% - 1160px) / 2));
  background: var(--contact-surface);
}
.home-intro { padding-bottom: clamp(54px, 6vw, 76px); }
.contact-credit { justify-content: space-between; }
.contact-actions a[href^="mailto:"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.contact-actions a[href^="mailto:"]:is(:hover, :focus-visible) {
  background: #fff;
  border-color: #fff;
}
@media (max-width: 700px) {
  :root { --nav-height: 63px; }
  .home-intro { padding-top: 54px; }
  .contact-credit { flex-direction: column; align-items: center; }
}

@media (max-width: 700px) {
  .contact-ending { display: block; white-space: nowrap; }
}

.card > .kc-art { padding-block: 9% 5%; }
@media (max-width: 700px) {
  .card > .kc-art,
  .card > .er-art { order: -1; }
}

@media (max-width: 700px) {
  .home-intro .lead { text-wrap: balance; }
  .home-intro .blurb-ending { white-space: nowrap; }
}