/* A composed introduction: editorial copy and a small personal studio. */
body.design-combined #designIntro {
  display:grid; grid-template-columns:minmax(0,620px) 220px;
  grid-template-rows:auto auto auto; column-gap:clamp(60px,8vw,120px); row-gap:0;
  justify-content:center; align-content:center; align-items:start;
  padding:100px 64px 72px;
}
body.design-combined #designIntro .design-hello {
  grid-column:1; grid-row:1; width:auto; margin:0 0 26px; text-align:left;
  font-size:clamp(18px,1.6vw,23px); font-weight:500; letter-spacing:-.025em; white-space:normal;
}
body.design-combined #designIntro .design-hello-name { color:#6b747b; margin-left:7px; font-size:.85em; }
body.design-combined #designIntro .design-manifest {
  grid-column:1; grid-row:2; width:100%; max-width:560px; text-align:left;
  margin:0 0 36px; font-size:clamp(38px,3vw,62px); line-height:1.15; letter-spacing:-.05em;
}
body.design-combined #designIntro .design-manifest [data-word] { color:#008ce9; }
body.design-combined #designIntro .design-hero-nav { grid-column:1; grid-row:3; justify-content:flex-start; gap:12px; padding-top:24px; width:100%; }
body.design-combined #designIntro .design-hero-nav button { font-size:15px; padding:14px 21px; }
body.design-combined #designIntro .design-hero-nav [data-mode-enter='work'] { background:#171c20; border-color:#171c20; color:white; }
/* EDIT: View my work hover color
   Change the three values below (fill, border, and the small shadow chip). */
body.design-combined #designIntro .design-hero-nav [data-mode-enter='work']:is(:hover,:focus-visible,.is-preview) { background:#008ce9; border-color:#e5f5ff; box-shadow:0 3px 0 #40596a; }
body.design-combined #designIntro .hero-profile {
  grid-column:2; grid-row:1 / 4; align-self:center; width:200px; height:230px; object-fit:cover;
  margin:0;
}
body.design-combined #designIntro .hero-playbits { width:220px; height:400px; inset:50% auto auto calc(50% + 250px); transform:translateY(-50%); }
body.design-combined #designIntro .hero-toy--star { width:86px; height:86px; left:-30px; top:0; filter:drop-shadow(2px 3px 0 #171717); }
body.design-combined #designIntro .hero-toy--pencil { width:48px; height:126px; right:-36px; top:95px; }
body.design-combined #designIntro .hero-toy--key { left:auto; right:12px; bottom:0; width:70px; height:65px; border-radius:12px; }
body.design-combined #designIntro .hero-toy--key span { font-size:25px; }
body.design-combined #designIntro .hero-toy--key small { font-size:12px; }
@media (max-width:1100px) and (min-width:701px) {
  body.design-combined #designIntro { grid-template-columns:minmax(0,520px) 170px; column-gap:55px; padding-inline:50px; }
  body.design-combined #designIntro .hero-profile { width:165px; height:195px; }
  body.design-combined #designIntro .hero-playbits { left:auto; right:50px; width:170px; height:350px; }
}
@media (max-width:700px) {
  body.design-combined #designIntro { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; padding:88px 28px 32px; align-content:center; }
  body.design-combined #designIntro .hero-profile { grid-column:1; grid-row:1; justify-self:center; width:100px; height:112px; margin:0 0 28px; border-width:5px; }
  body.design-combined #designIntro .design-hello { grid-row:2; text-align:center; font-size:18px; margin-bottom:20px; }
  body.design-combined #designIntro .design-manifest { grid-row:3; text-align:center; font-size:clamp(30px,7.7vw,46px); max-width:480px; justify-self:center; margin-bottom:26px; }
  body.design-combined #designIntro .design-hero-nav { grid-row:4; justify-content:center; padding-top:20px; }
  body.design-combined #designIntro .design-hero-nav button { font-size:13px; padding:12px 15px; }
  body.design-combined #designIntro .hero-playbits { inset:0; width:100%; height:100%; transform:none; }
  body.design-combined #designIntro .hero-toy--star { width:52px; height:52px; left:calc(50% - 132px); top:calc(50% - 180px); }
  body.design-combined #designIntro .hero-toy--pencil { width:30px; height:80px; right:calc(50% - 125px); top:calc(50% - 175px); }
  body.design-combined #designIntro .hero-toy--key { width:43px; height:40px; right:calc(50% - 112px); bottom:auto; top:calc(50% - 87px); border-radius:8px; box-shadow:0 4px 0 #171717; }
  body.design-combined #designIntro .hero-toy--key span { font-size:18px; }
  body.design-combined #designIntro .hero-toy--key small { font-size:9px; }
}
@media (max-height:620px) {
  body.design-combined #home .hero.design-scroll-hero { min-height:620px; }
  body.design-combined.is-hero { overflow-y:auto; }
}

/* Keep the cutout and its interactive objects in one responsive composition. */
body.design-combined #designIntro { grid-template-columns:minmax(0,620px) 300px; column-gap:clamp(52px,6vw,96px); }
body.design-combined #designIntro .hero-portrait-scene { grid-column:2; grid-row:1 / 4; align-self:center; position:relative; width:300px; height:390px; }
body.design-combined #designIntro .hero-profile { position:absolute; inset:50px auto auto 0; width:300px; height:auto; object-fit:contain; margin:0; border:0; outline:0; box-shadow:none; transform:none; }
body.design-combined #designIntro .hero-playbits { inset:0; width:100%; height:100%; transform:none; }
body.design-combined #designIntro .hero-toy--star { width:68px; height:68px; left:0; top:0; }
body.design-combined #designIntro .hero-toy--pencil { width:42px; height:110px; right:-18px; top:54px; }
body.design-combined #designIntro .hero-toy--key { width:58px; height:54px; right:0; bottom:-12px; }
@media (max-width:1100px) and (min-width:701px) {
  body.design-combined #designIntro { grid-template-columns:minmax(0,520px) 240px; column-gap:40px; padding-inline:48px; }
  body.design-combined #designIntro .hero-portrait-scene { width:240px; height:330px; }
  body.design-combined #designIntro .hero-profile { width:240px; top:45px; }
  body.design-combined #designIntro .hero-toy--star { width:60px; height:60px; }
  body.design-combined #designIntro .hero-toy--pencil { width:35px; height:92px; right:-12px; }
}
@media (max-width:700px) {
  body.design-combined #designIntro { grid-template-columns:minmax(0,1fr); column-gap:0; padding-top:80px; }
  body.design-combined #designIntro .hero-portrait-scene { grid-column:1; grid-row:1; justify-self:center; width:210px; height:204px; margin-bottom:24px; }
  body.design-combined #designIntro .hero-profile { width:180px; inset:10px auto auto 15px; }
  body.design-combined #designIntro .hero-toy--star { width:43px; height:43px; left:-16px; top:5px; }
  body.design-combined #designIntro .hero-toy--pencil { width:28px; height:74px; right:-9px; top:24px; }
  body.design-combined #designIntro .hero-toy--key { width:39px; height:36px; right:-6px; top:auto; bottom:4px; }
}

/* Reference composition: generous portrait, bold copy, a shared drawn baseline. */
body.design-combined #designIntro {
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  column-gap:4%; padding:100px clamp(40px,7vw,112px) 64px;
  max-width:1440px; margin-inline:auto;
}
body.design-combined #designIntro .design-hello { align-self:end; margin-bottom:30px; font-size:clamp(19px,1.8vw,28px); }
body.design-combined #designIntro .design-hello::after {
  content:''; display:inline-block; width:28px; height:32px; margin-left:8px; vertical-align:top;
  background:linear-gradient(115deg,transparent 39%,#0099fd 42% 56%,transparent 59%) 1px 0/12px 18px no-repeat,
    linear-gradient(155deg,transparent 39%,#0099fd 42% 56%,transparent 59%) 12px 10px/16px 12px no-repeat,
    linear-gradient(15deg,transparent 39%,#0099fd 42% 56%,transparent 59%) 12px 23px/16px 9px no-repeat;
}
body.design-combined #designIntro .design-manifest { max-width:none; font-size:clamp(34px,3.8vw,58px); line-height:1.12; margin-bottom:0; font-weight:600; }
body.design-combined #designIntro .design-manifest span { font-weight:600; }
body.design-combined #designIntro .design-hero-nav { align-self:start; padding-top:40px; }
body.design-combined #designIntro .hero-portrait-scene { width:100%; max-width:430px; justify-self:center; height:auto; aspect-ratio:1/1.12; align-self:center; }
body.design-combined #designIntro .hero-profile { inset:0; width:100%; height:auto; }
body.design-combined #designIntro .hero-toy--star { width:20%; height:auto; aspect-ratio:1; left:auto; right:2%; top:2%; }
body.design-combined #designIntro .hero-toy--pencil { width:11%; height:auto; aspect-ratio:70/180; right:-4%; top:34%; }
body.design-combined #designIntro .hero-toy--key { width:17%; height:auto; aspect-ratio:1.05; right:-1%; bottom:8%; }
body.design-combined #designIntro .hero-toy--key span { font-size:clamp(22px,2.4vw,36px); }
body.design-combined #designIntro .hero-toy--key small { font-size:clamp(12px,1.25vw,18px); }
.hero-narrative-stroke { position:absolute; width:142%; height:auto; right:11%; bottom:8%; z-index:2; pointer-events:none; overflow:visible; opacity:var(--hero-copy-opacity,1); }
.hero-pencil-loop { position:absolute; width:12%; right:6%; top:54%; z-index:5; pointer-events:none; opacity:var(--hero-copy-opacity,1); }
body.design-combined #designIntro .hero-toy--star::after,
body.design-combined #designIntro .hero-toy--key::after { content:''; position:absolute; right:-17px; top:-15px; width:21px; height:26px; background:linear-gradient(115deg,transparent 39%,#171717 42% 56%,transparent 59%) 0 0/12px 16px no-repeat,linear-gradient(155deg,transparent 39%,#171717 42% 56%,transparent 59%) 8px 14px/14px 10px no-repeat; pointer-events:none; }
@media (min-width:701px) and (max-height:720px) {
  body.design-combined #designIntro { padding-top:86px; padding-bottom:36px; }
  body.design-combined #designIntro .hero-portrait-scene { max-width:410px; justify-self:center; }
}
@media (max-width:700px) {
  body.design-combined #designIntro { grid-template-columns:minmax(0,1fr); padding:82px 26px 32px; }
  body.design-combined #designIntro .hero-portrait-scene { width:220px; height:auto; aspect-ratio:1/1.06; margin-bottom:14px; }
  body.design-combined #designIntro .design-hello { margin-bottom:20px; font-size:18px; }
  body.design-combined #designIntro .design-hello::after { width:22px; height:26px; margin-left:3px; }
  body.design-combined #designIntro .design-manifest { font-size:clamp(29px,7.8vw,43px); margin-bottom:0; }
  body.design-combined #designIntro .design-hero-nav { padding-top:28px; }
  body.design-combined #designIntro .hero-toy--key span { font-size:19px; }
  body.design-combined #designIntro .hero-toy--key small { font-size:10px; }
  .hero-narrative-stroke { width:112%; right:3%; bottom:4%; }
}

/* The greeting carries the playful star; the pencil anchors the portrait. */
body.design-combined #designIntro .design-hello::after { display:none; }
body.design-combined #designIntro .design-hello { width:fit-content; max-width:calc(100% - 64px); }
body.design-combined #designIntro .design-hello .hero-toy--star { width:48px; height:48px; left:calc(100% + 14px); right:auto; top:50%; margin-top:-24px; }
body.design-combined #designIntro .hero-toy--star::after { display:none; }
body.design-combined #designIntro .hero-toy--pencil { top:auto; bottom:7%; right:-1%; width:11%; }
@media (max-width:700px) {
 body.design-combined #designIntro .design-hello { justify-self:center; margin-left:-36px; }
 body.design-combined #designIntro .design-hello .hero-toy--star { width:34px; height:34px; left:calc(100% + 8px); margin-top:-17px; }
}

/* Tighter copy–portrait pairing, centered as one composition. */
@media (min-width:701px) {
  body.design-combined #designIntro {
    grid-template-columns: minmax(0, 560px) 400px;
    column-gap: 28px;
    justify-content: center;
    align-content: center;
    align-items: center;
    max-width: none;
    margin-inline: 0;
  }
  body.design-combined #designIntro .hero-portrait-scene {
    grid-row: 1 / 4;
    justify-self: center;
    align-self: center;
    width: 400px;
    max-width: 400px;
  }
  body.design-combined #designIntro .design-hello {
    max-width: calc(100% - 72px);
  }
  body.design-combined #designIntro .design-hello .hero-toy--star {
    width: 58px;
    height: 58px;
    left: calc(100% + 6px);
    top: 50%;
    margin-top: -29px;
  }
  body.design-combined #designIntro .hero-toy--pencil {
    width: 13%;
    right: -2%;
  }
}