:root {
  --yellow:#ffcc00;
  --ink:#111;
  --paper:#fff;
  --outside:#e7e7e7;
  --max:1240px;
  --nav-h:46px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--outside)}
body{margin:0;background:var(--outside);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}

.hero{width:min(100%,var(--max));margin:0 auto;background:var(--paper);overflow:hidden}
.original-page-stage{position:relative;width:100%;height:0;background:#fff;overflow:hidden}
.original-page-canvas{position:absolute;left:0;top:0;width:803px;height:602px;transform-origin:0 0;background:#fff;overflow:hidden}
.original-right-panel{position:absolute;left:406.499px;top:0;width:396px;height:602px;background:#f5f5f5}
.original-yellow-panel{position:absolute;left:0;top:0;width:803px;height:157.38px;background:var(--yellow)}
.original-wordmark{position:absolute;left:22.122px;top:-17.02px;width:758.76px;height:182.01px;object-fit:fill}
.original-name{position:absolute;left:225.499px;top:102.98px;width:355.9px;height:50.57px;object-fit:fill}
.original-portrait{position:absolute;left:0;top:272.188px;width:288.53px;height:333.53px;object-fit:fill}
.original-email{position:absolute;left:218.585px;top:172.804px;color:#0000ff;font-family:"Arial Black",Arial,sans-serif;font-size:27.895px;font-weight:900;line-height:1;text-decoration:none;letter-spacing:1.375px;white-space:nowrap}
.original-email:hover,.original-email:focus-visible{text-decoration:underline;outline:none}
.original-nav{position:absolute;inset:0;font-family:"Arial Black",Arial,sans-serif;font-size:35.865px;font-weight:900;line-height:1}
.original-nav a,.original-nav span{position:absolute;white-space:nowrap}
.original-nav a{color:#000;text-decoration:none;transition:color .13s ease}
.original-nav a:hover,.original-nav a:focus-visible{color:var(--yellow);outline:none}
.original-dash{color:#fff;pointer-events:none}
.original-dash-1{left:308.41px;top:214.689px}
.original-link-1{left:345.749px;top:214.689px;letter-spacing:.142px}
.original-dash-2{left:305.458px;top:252.547px}
.original-link-2{left:342.564px;top:252.547px;letter-spacing:.23px}
.original-dash-3{left:283.592px;top:290.405px}
.original-link-3{left:324.299px;top:290.405px;letter-spacing:.05px}
.original-dash-4{left:291.059px;top:330.255px}
.original-link-4{left:336.429px;top:330.255px;letter-spacing:.04px}

.sticky-nav{position:fixed;z-index:1000;top:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,.96);border-bottom:1px solid #d5d5d5;box-shadow:0 2px 12px rgba(0,0,0,.06);transform:translateY(-110%);transition:transform .18s ease;backdrop-filter:blur(8px)}
.sticky-nav.is-visible{transform:translateY(0)}
.sticky-nav-inner{height:100%;max-width:var(--max);margin:auto;display:flex;align-items:center;justify-content:center;gap:0;overflow-x:auto;padding:0 10px;scrollbar-width:none}
.sticky-nav-inner::-webkit-scrollbar{display:none}
.sticky-nav a{flex:0 0 auto;height:100%;display:flex;align-items:center;padding:0 16px;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap;transition:background .12s ease,color .12s ease}
.sticky-nav a:hover,.sticky-nav a:focus-visible,.sticky-nav a.is-active{background:var(--yellow);outline:none}

main{width:min(100%,var(--max));margin:0 auto;background:var(--paper)}
.portfolio-section{padding:clamp(62px,8vw,110px) clamp(18px,4.5vw,64px);scroll-margin-top:var(--nav-h)}
.portfolio-section+ .portfolio-section{border-top:1px solid #ededed}
.portfolio-section h2{margin:0 0 clamp(38px,6vw,72px);color:var(--yellow);font-size:clamp(28px,4vw,48px);font-weight:800;line-height:1.05;text-align:center}

.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,6vw,78px) clamp(24px,5vw,64px);align-items:start}
.work-card{margin:0;min-width:0}
.work-media{display:flex;align-items:flex-end;justify-content:center;gap:10px;min-height:120px;background:#fafafa}
.work-media.multi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.work-media img{display:block;width:100%;height:auto;max-height:72vh;object-fit:contain}
.work-media.multi img{height:100%;max-height:58vh;object-fit:contain}
.work-card figcaption{padding:12px 2px 0;font-family:"Arial Narrow",Arial,Helvetica,sans-serif;font-size:14px;line-height:1.22}
.work-note{font-size:12px;margin-bottom:5px}
.meta-block{margin-top:6px;display:flex;flex-direction:column;align-items:flex-start}
.meta-label{font-size:11px;line-height:1.15;text-transform:none}
.meta-value{font-size:15px;line-height:1.25}

.design-grid{display:grid;gap:clamp(20px,3vw,38px);align-items:start}
.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.posters-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.books-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 18px}
.signs-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}
.design-card{margin:0;min-width:0}
.design-media{background:#fafafa;display:grid;place-items:center;padding:6px}
.design-media img{display:block;width:100%;height:auto;max-height:440px;object-fit:contain}
.books-grid .design-media{aspect-ratio:3/4}
.books-grid .design-media img{width:100%;height:100%;object-fit:contain}
.signs-grid .design-media{aspect-ratio:4/3}
.signs-grid .design-media img{width:100%;height:100%;object-fit:contain}
.design-caption{font-size:12px;line-height:1.35;margin-top:8px}

.info-layout{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:48px;align-items:start;max-width:980px;margin:0 auto 58px}
.info-text,.exhibitions{font-size:15px;line-height:1.65}
.info-text p,.exhibitions p{margin:0 0 24px}
.info-stamp{width:100%;height:auto;position:sticky;top:74px}
.exhibitions{max-width:980px;margin:0 auto;padding-top:40px;border-top:1px solid #ddd}

@media (max-width:900px){
  .posters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .books-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .signs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:680px){
  .works-grid{grid-template-columns:1fr;gap:48px}.work-media img{max-height:none}
  .feature-grid,.posters-grid{grid-template-columns:1fr 1fr}
  .books-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
  .signs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info-layout{grid-template-columns:1fr}.info-stamp{position:static;width:120px}
  .portfolio-section{padding-left:16px;padding-right:16px}.portfolio-section h2{margin-bottom:42px}
}
@media (max-width:430px){
  .feature-grid,.posters-grid{grid-template-columns:1fr}.books-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sticky-nav{transition:none}}


/* --- Refined info section --- */
.info-section {
  padding-bottom: clamp(80px, 10vw, 140px);
}

.info-section > h2 {
  margin-bottom: clamp(46px, 6vw, 74px);
}

.info-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: clamp(32px, 7vw, 90px);
  align-items: start;
  max-width: 980px;
  margin: 0 auto clamp(36px, 5vw, 64px);
}

.info-name {
  font-size: clamp(30px, 4.8vw, 58px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.035em;
}

.info-name span {
  color: var(--yellow);
}

.info-origin {
  margin-top: 12px;
  font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.info-lead {
  max-width: 720px;
  margin: 32px 0 0;
  font-size: clamp(18px, 2.3vw, 27px);
  font-weight: 700;
  line-height: 1.2;
}

.info-stamp {
  position: static;
  width: 100%;
  height: auto;
}

.info-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 980px;
  margin: 0 auto clamp(54px, 7vw, 88px);
  border-top: 3px solid var(--yellow);
  border-bottom: 1px solid #d8d8d8;
}

.info-fact {
  min-height: 110px;
  padding: 18px 22px 20px 0;
}

.info-fact + .info-fact {
  padding-left: 24px;
  border-left: 1px solid #d8d8d8;
}

.info-fact-date {
  display: block;
  margin-bottom: 7px;
  color: var(--yellow);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.info-fact-text {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.info-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 70px);
  max-width: 980px;
  margin: 0 auto clamp(70px, 9vw, 112px);
}

.info-story-block h3,
.exhibition-column h3 {
  margin: 0 0 22px;
  color: var(--yellow);
  font-size: clamp(20px, 2.4vw, 29px);
  font-weight: 800;
  line-height: 1.05;
  text-transform: lowercase;
}

.info-story-block p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.68;
}

.info-story-block strong {
  font-weight: 800;
}

.info-story-block--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  padding-top: 30px;
  border-top: 1px solid #d8d8d8;
}

.info-story-block--wide h3,
.info-story-block--wide p {
  margin-top: 0;
}

.exhibitions--structured {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(40px, 6vw, 82px);
  max-width: 1080px;
  margin: 0 auto;
  padding-top: clamp(42px, 6vw, 70px);
  border-top: 3px solid #111;
  font-size: 14px;
  line-height: 1.45;
}

.exhibition-column h3 {
  position: sticky;
  top: calc(var(--nav-h) + 18px);
  z-index: 1;
  padding: 5px 0 14px;
  background: #fff;
}

.exhibition-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exhibition-list li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid #e2e2e2;
}

.exhibition-list li:first-child {
  border-top-color: #111;
}

.exhibition-list time {
  color: var(--yellow);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.exhibition-list em {
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 760px) {
  .info-hero {
    grid-template-columns: 1fr 100px;
    gap: 24px;
  }

  .info-facts {
    grid-template-columns: 1fr;
  }

  .info-fact {
    min-height: 0;
    padding: 16px 0;
  }

  .info-fact + .info-fact {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #d8d8d8;
  }

  .info-story,
  .exhibitions--structured {
    grid-template-columns: 1fr;
  }

  .info-story-block--wide {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .exhibition-column h3 {
    position: static;
  }
}

@media (max-width: 460px) {
  .info-hero {
    grid-template-columns: 1fr;
  }

  .info-stamp {
    width: 92px;
  }

  .info-lead {
    margin-top: 22px;
  }

  .exhibition-list li {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
  }
}


/* --- subtle smoke on first page --- */
.smoke-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:8;
}
.smoke{
  position:absolute;
  display:block;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.46) 32%, rgba(238,238,238,.2) 58%, rgba(230,230,230,0) 78%);
  filter:blur(8px);
  opacity:0;
  mix-blend-mode:screen;
  animation:smokeDrift 9s ease-in-out infinite;
}
.smoke::before,
.smoke::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
}
.smoke::before{width:62%;height:62%;left:-22%;top:18%;opacity:.8}
.smoke::after{width:58%;height:58%;right:-16%;top:-10%;opacity:.65}
.smoke-1{left:152px;top:470px;width:58px;height:58px;animation-duration:8.6s;animation-delay:-1.2s}
.smoke-2{left:172px;top:447px;width:76px;height:76px;animation-duration:10.4s;animation-delay:-5.4s}
.smoke-3{left:188px;top:418px;width:92px;height:92px;animation-duration:11.2s;animation-delay:-2.8s}
.smoke-4{left:145px;top:490px;width:48px;height:48px;animation-duration:9.1s;animation-delay:-6.5s}
.smoke-5{left:210px;top:438px;width:64px;height:64px;animation-duration:12s;animation-delay:-4.1s}
.smoke-6{left:164px;top:458px;width:70px;height:70px;animation-duration:9.8s;animation-delay:-7.7s}
@keyframes smokeDrift{
  0%{transform:translate(0, 14px) scale(.56);opacity:0}
  10%{opacity:.18}
  30%{opacity:.28}
  60%{opacity:.18}
  100%{transform:translate(78px, -150px) scale(1.45);opacity:0}
}
@media (max-width:680px){
  .smoke{filter:blur(6px)}
}
@media (prefers-reduced-motion:reduce){
  .smoke{animation:none;opacity:.16}
  .smoke-1{transform:translate(28px,-54px) scale(.9)}
  .smoke-2{transform:translate(42px,-84px) scale(1.05)}
  .smoke-3{transform:translate(64px,-110px) scale(1.18)}
  .smoke-4{transform:translate(8px,-18px) scale(.75)}
  .smoke-5{transform:translate(54px,-68px) scale(1)}
  .smoke-6{transform:translate(18px,-40px) scale(.9)}
}


/* --- first-page menu + stronger smoke refinement --- */
.original-email{
  z-index:30;
  pointer-events:auto;
  cursor:pointer;
}
.original-nav{
  z-index:14;
  left:286px;
  top:210px;
  right:auto;
  bottom:auto;
  width:230px;
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:2px;
  font-family:"Arial Black",Arial,sans-serif;
  font-size:35.865px;
  font-weight:900;
  line-height:1;
  text-align:center;
}
.original-nav a,
.original-nav span{
  position:static;
  left:auto;
  top:auto;
  display:block;
  width:auto;
  white-space:nowrap;
}
.original-nav .original-dash{display:none !important}
.original-link-1,
.original-link-2,
.original-link-3,
.original-link-4{
  left:auto;
  top:auto;
  letter-spacing:0;
}

/* Smoke sits visually above the menu, but never blocks clicks. */
.smoke-layer{
  z-index:18;
  pointer-events:none;
}
.smoke{
  filter:blur(7px);
  mix-blend-mode:screen;
  background:radial-gradient(circle at 38% 38%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.62) 28%, rgba(244,244,244,.34) 52%, rgba(226,226,226,.12) 67%, rgba(225,225,225,0) 82%);
  animation-name:smokeAcrossMenu;
}
.smoke-1{left:178px;top:405px;width:68px;height:68px;animation-duration:8.8s;animation-delay:-1.1s}
.smoke-2{left:196px;top:386px;width:88px;height:88px;animation-duration:10.6s;animation-delay:-5.2s}
.smoke-3{left:220px;top:372px;width:104px;height:104px;animation-duration:11.8s;animation-delay:-2.7s}
.smoke-4{left:168px;top:425px;width:58px;height:58px;animation-duration:9.4s;animation-delay:-6.3s}
.smoke-5{left:238px;top:398px;width:80px;height:80px;animation-duration:12.3s;animation-delay:-4.0s}
.smoke-6{left:204px;top:414px;width:76px;height:76px;animation-duration:10.1s;animation-delay:-7.4s}
@keyframes smokeAcrossMenu{
  0%{transform:translate(0,18px) scale(.52);opacity:0}
  9%{opacity:.24}
  28%{opacity:.40}
  54%{opacity:.32}
  76%{opacity:.18}
  100%{transform:translate(155px,-185px) scale(1.55);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .smoke{animation:none;opacity:.20}
  .smoke-1{transform:translate(80px,-88px) scale(1)}
  .smoke-2{transform:translate(110px,-120px) scale(1.15)}
  .smoke-3{transform:translate(132px,-145px) scale(1.28)}
  .smoke-4{transform:translate(62px,-70px) scale(.9)}
  .smoke-5{transform:translate(118px,-108px) scale(1.05)}
  .smoke-6{transform:translate(92px,-96px) scale(1)}
}

/* --- Mobile: keep the original 7-item sticky menu, but wrap it so every option is visible --- */
@media (max-width:680px){
  .sticky-nav{
    height:auto;
    min-height:72px;
  }
  .sticky-nav-inner{
    height:auto;
    min-height:72px;
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    justify-content:center;
    overflow:visible;
    padding:5px 6px;
  }
  .sticky-nav a{
    height:30px;
    padding:0 7px;
    font-size:10.5px;
    line-height:1;
  }
  .portfolio-section{
    scroll-margin-top:84px;
  }
}

@media (max-width:380px){
  .sticky-nav a{
    padding:0 5px;
    font-size:9.5px;
  }
  .portfolio-section{
    scroll-margin-top:112px;
  }
}


/* --- Mobile sticky menu: centered, fully visible --- */
@media (max-width:680px){
  .sticky-nav{
    width:100%;
    left:0;
    right:0;
    overflow:visible;
  }
  .sticky-nav-inner{
    width:100%;
    max-width:100vw;
    margin:0 auto;
    padding:6px 10px;
    box-sizing:border-box;
    justify-content:center;
    align-items:center;
    align-content:center;
    overflow:visible;
  }
  .sticky-nav a{
    flex:0 1 auto;
    max-width:100%;
    text-align:center;
  }
}

@media (max-width:380px){
  .sticky-nav-inner{
    padding-left:8px;
    padding-right:8px;
  }
}