/* Preserve the original stacked introduction and card design within one viewport. */
html:has(body[data-portfolio="home"]) { height: 100%; overflow: hidden; }
body[data-portfolio="home"] { height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-top: var(--pf-site-height,56px); }
body[data-portfolio="home"] .hero { flex: none; padding: clamp(24px,5vh,64px) var(--pad) 24px; display: block; }
body[data-portfolio="home"] .name { font-size: clamp(64px,min(13.5vw,18vh),220px); flex-wrap: nowrap; white-space: nowrap; }
body[data-portfolio="home"] .lead { margin: clamp(18px,3.6vh,36px) 0 0; max-width: 560px; font: 400 18px/1.65 var(--pf-font); }
body[data-portfolio="home"] .work { flex: 1; min-height: 0; padding: 0 0 82px; display: flex; flex-direction: column; }
.gallery { position: relative; flex: 1; min-height: 0; width: 100%; perspective: 1500px; perspective-origin: 50% 45%; touch-action: none; cursor: grab; user-select: none; container-type: size; }
.gallery.is-dragging { cursor: grabbing; }
.panel {
  --px: 0px; --pz: 0px; --ry: 0deg; --zi: 0; --op: 1;
  position: absolute; left: 50%; top: 53%;
  width: min(56vw, 780px, 148cqh); aspect-ratio: 16 / 10;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) translate3d(var(--px), 0, var(--pz)) rotateY(var(--ry));
  z-index: var(--zi); opacity: var(--op);
  -webkit-user-drag: none;
  outline: none;
}
.panel:focus-visible .panel-3d { outline-offset: 4px; }

.panel-3d {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  background: var(--project-home-bg, var(--bg));
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75);
  transform-style: preserve-3d;
  transition: border-color .4s, box-shadow .5s, background var(--theme);
}
.panel.is-on .panel-3d { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 50px 100px -30px color-mix(in srgb, var(--accent) 45%, transparent); }
.panel-3d::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(6, 8, 18, .1) 54%, rgba(6, 8, 18, .48) 76%, rgba(6, 8, 18, .82) 100%);
  opacity: 0; transition: opacity .3s;
}
.panel.is-front.is-on .panel-3d::after { opacity: 1; }

.panel-media { position: absolute; inset: 0; display: block; }
.panel-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: var(--fx, 50%) var(--fy, 50%);
  filter: saturate(.7) brightness(.55);
  transition: filter .5s;
}
.panel.is-front .panel-media img { filter: none; }
/* a project's light effect can also play on its panel; script.js draws into this */
.panel-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.panel-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 40px 24px 20px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.panel-kind { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); display: flex; gap: 12px; }
.panel-title { display: block; font-size: clamp(26px, 3.2vw, 46px); line-height: 1; font-weight: 500; letter-spacing: -.02em; margin: 8px 0; transition: color .4s; }
.panel.is-on .panel-title { color: var(--project-bright); }
.panel-roles { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.panel-n { display: none; position: absolute; top: 16px; left: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; transform: translateZ(50px); text-shadow: 0 1px 2px rgba(0,0,0,.6); }

.panel-cta {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  opacity: 0; transform: translateZ(60px) translateY(-6px);
  transition: opacity .3s, transform .4s var(--ease), background var(--theme), color var(--theme);
}
.panel-cta svg { width: 14px; height: 14px; }
.panel.is-front .panel-cta { opacity: 1; transform: translateZ(60px); }
.panel-cta.is-soon { border: 1px dashed color-mix(in srgb, var(--fg) 35%, transparent); }

/* The homepage CTA shares the case-study button geometry and signature color. */
.panel-cta {
  box-sizing: border-box; min-height: var(--pf-control-height); padding: var(--pf-control-padding);
  border: 1px solid var(--project-color); border-radius: var(--pf-control-radius);
  background: var(--project-color); color: var(--project-on-color);
  font: 500 14px/1.5 var(--pf-font); letter-spacing: 0;
}
.panel-cta.is-soon { border-color: var(--project-line); background: var(--project-dark); color: var(--project-pale); }
.panel:focus-visible .panel-3d { outline: 3px solid var(--project-bright); }
.panel-kind, .panel-roles { color: var(--project-pale); }
.gallery-dots { position: fixed; z-index: 5; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 0; padding: 0; }
.gallery-dots button {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer; border-radius: 4px;
}
.gallery-dots button span { width: 5px; height: 5px; border-radius: 100px; background: #ffffff68; transition: width .3s, background .3s, transform .2s; }
.gallery-dots button.is-on span { width: 26px; background: var(--accent); }
.gallery-dots button:hover span { background: #fff; transform: scale(1.15); }
.gallery-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
body[data-portfolio="home"] .work-head {
  position: fixed; right: var(--pad); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 5;
  padding: 0; display: block; text-align: right; border: 0;
  font: 400 12px/1.8 var(--pf-font, sans-serif); letter-spacing: 0;
}
.work-head .muted { color: #ffffffb8; }
.browse-keys { color: #fff; letter-spacing: .15em; }
.gallery-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { z-index: 100; }
.about-dialog {
  width: min(850px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 64px clamp(24px, 5vw, 64px); border: 1px solid #ffffff25;
  border-radius: 14px; background: #101216; color: #f4f4f2; overflow: auto;
  box-shadow: 0 32px 100px #0009;
}
.about-dialog::backdrop { background: #06080cba; backdrop-filter: blur(16px); }
body[data-portfolio="home"] .about-dialog .pf-about { margin: 0; padding: 0; border: 0; background: none; gap: 36px; }
.about-close { position: absolute; right: 20px; top: 12px; display: flex; align-items: center; gap: 12px; min-height: 44px; border: 0; padding: 0 8px; background: none; color: #f4f4f2; font: inherit; cursor: pointer; }
.about-close span { font-size: 24px; }
.about-close:hover, .about-dialog a:hover { color: var(--accent); opacity: 1; }
.about-dialog :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Only deliberate selection reveals the original card typography and button. */
body[data-portfolio="home"] .panel:hover { opacity: var(--op); }
body[data-portfolio="home"] .panel.is-front { opacity: 1; }
.panel-body, .panel-cta { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s; }
.panel.is-front.is-on :is(.panel-body,.panel-cta) { opacity: 1; visibility: visible; }
.panel-cta { max-width: calc(100% - 28px); }
.panel-body { transform: none; }
.gallery:focus-visible { outline: none; }
.gallery:focus-visible .panel.is-front .panel-3d { outline: 3px solid var(--project-bright); outline-offset: -4px; }
@media (max-width: 1000px) {
  body[data-portfolio="home"] .work { padding-bottom: 112px; }
  .gallery-dots { bottom: 58px; }
}
@media (max-width: 700px) {
  body[data-portfolio="home"] .hero { padding-top: 20px; padding-bottom: 14px; }
  body[data-portfolio="home"] .name { font-size: min(15vw,13vh); }
  body[data-portfolio="home"] .lead { margin-top: 18px; font-size: 14px; line-height: 1.5; max-width: 400px; }
  .panel { width: min(84vw,148cqh); }
  .panel-body { padding: 28px 16px 14px; }
  body[data-portfolio="home"] .panel .panel-title { font-size: 26px; margin: 7px 0; }
  body[data-portfolio="home"] .panel .panel-kind { font-size: 9px; letter-spacing: .04em; }
  body[data-portfolio="home"] .panel .panel-roles { font-size: 11px; line-height: 1.45; }
  .panel-cta { font-size: 12px; top: 10px; right: 10px; }
  body[data-portfolio="home"] .work-head { font-size: 11px; bottom: max(14px,env(safe-area-inset-bottom)); }
}
@media (max-height: 650px) {
  body[data-portfolio="home"] .hero { padding-top: 12px; padding-bottom: 12px; }
  body[data-portfolio="home"] .name { font-size: min(13vw,12vh); }
  body[data-portfolio="home"] .lead { margin-top: 14px; font-size: 13px; line-height: 1.5; }
  .panel-body { padding: 22px 14px 12px; }
  body[data-portfolio="home"] .panel .panel-title { font-size: 22px; margin: 4px 0; }
  body[data-portfolio="home"] .panel .panel-kind { font-size: 8px; }
  body[data-portfolio="home"] .panel .panel-roles { font-size: 10px; line-height: 1.4; }
  .panel-cta { font-size: 11px; }
}
.gallery-list-hint { display: none; }
/* Short viewports use a scrollable project list so every case study stays reachable. */
@media (max-height: 450px) {
  html:has(body[data-portfolio="home"]) { height: auto; overflow: auto; }
  body[data-portfolio="home"] { height: auto; min-height: 100dvh; overflow: visible; }
  body[data-portfolio="home"] .hero { padding-top: 16px; padding-bottom: 24px; }
  body[data-portfolio="home"] .name { font-size: clamp(40px,8vw,64px); }
  body[data-portfolio="home"] .lead { font-size: 16px; margin-top: 16px; max-width: 680px; }
  body[data-portfolio="home"] .work { display: block; padding: 0 var(--pad) 24px; }
  .gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; perspective: none; container-type: normal; touch-action: pan-y; cursor: auto; }
  body[data-portfolio="home"] .panel { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; transform: none; opacity: 1; pointer-events: auto !important; }
  .panel-3d { transform-style: flat; }
  .panel-media img { filter: none; }
  body[data-portfolio="home"] .panel :is(.panel-body,.panel-cta) { opacity: 1; visibility: visible; }
  body[data-portfolio="home"] .panel-3d::after { opacity: 1; }
  body[data-portfolio="home"] .panel .panel-title { font-size: 24px; color: var(--project-bright); }
  body[data-portfolio="home"] .panel .panel-kind { font-size: 12px; }
  body[data-portfolio="home"] .panel .panel-roles { font-size: 12px; }
  .panel-body { padding: 40px 16px 16px; }
  .panel-cta { display: none; }
  .gallery-dots { display: none; }
  body[data-portfolio="home"] .work-head { position: static; margin: 0 0 16px; text-align: left; font-size: 12px; }
  .gallery-carousel-hint { display: none; }
  .gallery-list-hint { display: inline; }
}
@media (max-height: 450px) and (max-width: 600px) {
  .gallery { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .panel *, .gallery-dots button span { transition: none !important; }
}