/* AER / FORM: compact technical composition, independently moving visual planes. */
:root {--tech-font:"Consolas","Lucida Console",monospace;--object-width:min(58vw,calc(100svh - 56px),1040px);}
html {scroll-padding-top:56px;}
.site-header {height:56px;border-bottom-color:#30353b;gap:24px;}
.wordmark {font-size:21px;letter-spacing:-.055em;}
.wordmark span {font-size:25px;}
.site-header nav {gap:32px;margin-left:0;}
.site-header nav a,.basket-toggle {font-family:var(--tech-font);font-size:10px;}
.site-header nav a {text-transform:uppercase;letter-spacing:.04em;}
.header-tools {display:flex;align-items:center;gap:20px;}
.motion-toggle {margin:0;min-height:32px;padding:5px 8px;font-family:var(--tech-font);font-size:9px;background:transparent;}
.basket-toggle {gap:10px;padding-left:0;}
.basket-count {min-width:22px;height:22px;font-size:10px;}
.hero {position:relative;}
.concept-note {position:absolute;left:var(--gutter);bottom:16px;z-index:6;height:auto;padding:0;border:0;font-family:var(--tech-font);font-size:8px;line-height:1.6;letter-spacing:0;justify-content:start;pointer-events:none;}
.hero-stage {height:calc(100svh - 56px);min-height:620px;max-height:1100px;background:radial-gradient(ellipse at 50% 40%,#12171d 0%,#0b0d11 39%,#090a0c 72%);}
.hero-object {width:var(--object-width);height:auto;aspect-ratio:1559 / 1009;left:50%;top:42%;transform-origin:50% 15%;}
.hero-float {transform-origin:50% 15%;}
.hero-object img {display:block;object-fit:contain;filter:drop-shadow(0 24px 18px #0008);}
.hero-object::before {-webkit-mask-image:url("assets/puffer-hero-technical.png");mask-image:url("assets/puffer-hero-technical.png");filter:blur(13px);}
.hero-object::before,.hero-object::after {display:none;}
.hero-rear {inset:auto;left:50%;top:42%;width:var(--object-width);height:auto;aspect-ratio:1559 / 1009;opacity:1;color:inherit;transform:translate(-50%,-50%) translate3d(var(--rear-x,0px),var(--rear-y,0px),0) rotate(var(--rear-roll,-1deg));transition:transform 600ms cubic-bezier(.22,.8,.26,1);}
.hero-rear>span {position:absolute;inset:0;}
.hero-rear>span::before {content:"";position:absolute;inset:0;-webkit-mask:url("assets/puffer-hero-technical.png") center / contain no-repeat;mask:url("assets/puffer-hero-technical.png") center / contain no-repeat;}
.halo-soft {filter:blur(30px);opacity:.63;transform:scale(1.1);}
.halo-soft::before {background:linear-gradient(115deg,#a9d5ff 5%,#4b86bc 26%,#28466d 49%,#86c8ff 75%,#c2e5ff 95%);}
.halo-rim {filter:blur(8px);opacity:.27;transform:scale(1.025);}
.halo-rim::before {background:linear-gradient(120deg,#d3eaff 10%,#91c9fa 26%,transparent 47%,#598bc5 66%,#c5e7ff 94%);}
.hero-object img {filter:drop-shadow(var(--shadow-x,0px) calc(18px + var(--shadow-y,0px)) 16px #0009);}
.hero-mesh {position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background-image:radial-gradient(circle,#cfdae5 .7px,transparent 1px);background-size:6px 6px;-webkit-mask-image:radial-gradient(circle 115px at var(--cursor-x,50%) var(--cursor-y,45%),#000 12%,transparent 78%);mask-image:radial-gradient(circle 115px at var(--cursor-x,50%) var(--cursor-y,45%),#000 12%,transparent 78%);transition:opacity 200ms ease-out;}
html[data-product-motion="on"] .hero-stage.is-tracking .hero-mesh {opacity:.46;}
.hero-meta {top:42%;font-family:var(--tech-font);font-size:9px;line-height:1.8;letter-spacing:.05em;color:#b7c0ca;gap:13px;}
.hero-meta--left {left:var(--gutter);padding-left:11px;border-left:1px solid #687480;}
.hero-meta--right {right:var(--gutter);padding-right:11px;border-right:1px solid #687480;}
.hero-meta .cross {font-family:Arial,sans-serif;font-size:16px;color:#bdc9d4;}
.hero-copy {left:50%;bottom:5.5%;width:280px;transform:translateX(-50%);text-align:center;}
.hero-copy h1 {font-family:var(--tech-font);font-size:11px;line-height:1.65;letter-spacing:.08em;text-transform:uppercase;margin:0 0 17px;}
.hero-copy .text-link {min-height:40px;width:196px;padding:0 12px;border:1px solid #8e9aa6;font-family:var(--tech-font);font-size:9px;gap:12px;text-align:left;background:#10151a;}
.hero-copy .text-link svg {width:16px;height:16px;}
.hero-corner {position:absolute;bottom:10%;font-family:var(--tech-font);font-size:8px;line-height:1.8;color:#8c98a5;padding:10px 13px;border:1px solid #343d47;max-width:26ch;}
.hero-corner span {display:block;color:#bdc7d1;font-size:8px;letter-spacing:.025em;}
.hero-corner--left {left:var(--gutter);}
.hero-corner--right {right:var(--gutter);text-align:right;}
.hero-corner::before {content:"";position:absolute;left:-1px;top:-1px;width:13px;height:8px;border-left:1px solid #9aa7b4;border-top:1px solid #9aa7b4;}
.details {min-height:710px;}
.detail-media {min-height:710px;background:radial-gradient(ellipse at 42% 48%,#18212a,#090a0c 67%);}
.detail-copy {padding-block:86px;}
.detail-media img {width:178%;height:116%;left:-43%;top:4%;transform:rotate(-6deg) scale(1.02);object-fit:contain;filter:contrast(.78) brightness(.84) saturate(.5) blur(.3px);}
.detail-copy>.fine-print {font-size:10px;line-height:1.7;color:#a4adb7;max-width:48ch;}
.feature-list dd>span {padding-left:3px;color:#91a8ba;}
.section-intro {font-family:var(--tech-font);font-size:11px;margin:26px 0 36px;}
.feature-list>div {min-height:61px;font-family:var(--tech-font);font-size:10px;}
.feature-list dt {text-transform:uppercase;letter-spacing:.03em;}
.collection {padding-block:94px 90px;}
.collection-heading,.material-heading {margin-bottom:42px;}
.collection-heading p,.material-heading p {font-family:var(--tech-font);font-size:10px;max-width:36ch;}
.collection-heading h2,.material-heading h2 {font-size:clamp(48px,5.4vw,78px);}
.model-grid {gap:14px;}
.model-image {border:1px solid #303943;aspect-ratio:1;}
.model-index,.selection-mark {font-family:var(--tech-font);font-size:8px;letter-spacing:.03em;}
.model-footer {height:98px;}
.model-label {height:44px;padding:8px 0;gap:8px;}
.model-label h3 {display:flex;align-items:center;justify-content:center;min-height:32px;border:1px solid #414b55;flex:1;font-family:var(--tech-font);font-size:9px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;}
.color-dot {height:32px;width:auto;flex:1;border:1px solid #414b55;border-radius:0;background:none;display:grid;place-items:center;}
.color-dot::after {content:"FORM / 01";font-family:var(--tech-font);font-size:8px;color:#b8c3ce;letter-spacing:.03em;border-left:3px solid var(--swatch);padding-left:9px;}
.model-open {height:40px;min-height:40px;bottom:4px;padding-inline:12px;border:1px solid #677480;font-family:var(--tech-font);font-size:9px;color:#d0d8df;}
.model-open>span[aria-hidden] {font-size:16px;}
.model-visual {inset:4%;transition-duration:240ms;}
.collection-bottom {margin-top:30px;}
.collection-bottom>p {font-family:var(--tech-font);font-size:10px;}
.collection-bottom .button {font-family:var(--tech-font);font-size:10px;min-height:44px;}
.material {padding-block:90px 80px;}
.material-layout {align-items:start;gap:7%;}
.material-drawing {height:510px;}
.material-info {padding-top:57px;}
.annotation-slot {height:340px;}
.material-info[data-active="2"] {--annotation-y:90px;}
.material-info[data-active="3"] {--annotation-y:180px;}
.material-kicker {font-family:var(--tech-font);font-size:8px;margin-bottom:12px;}
.material-description {min-height:0;}
.material-description h3 {font-family:var(--tech-font);font-size:22px;line-height:1.2;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:14px;}
.material-description p {font-family:var(--tech-font);font-size:10px;line-height:1.8;max-width:36ch;}
.fabric-plane {border-radius:2px;}
.fabric-plane>i {border-radius:0;}
.plane-1 {background:linear-gradient(153deg,#667380,#141d26 28%,#566573 36%,#1b252e 58%,#566572 74%,#0e151d);}
.plane-2 {background:linear-gradient(130deg,#919b9e,#47565e 50%,#859198);}
.plane-3 {background:linear-gradient(130deg,#53626d,#15232e 50%,#4d606e);}
.hotspot {left:calc(54.6% - 18px);width:36px;height:36px;border-radius:0;font-family:var(--tech-font);font-size:9px;}
.hotspot-1 {top:calc(25.69% - 18px);}
.hotspot-2 {left:calc(56.76% - 18px);top:calc(46.67% - 18px);}
.hotspot-3 {left:calc(55.68% - 18px);top:calc(68.82% - 18px);}
.hotspot:focus-visible {border-radius:0;}
.material-lines {overflow:visible;}
.active-callout {d:path("M404 131H505L565 90H820");}
.material-tools {display:flex;align-items:start;gap:7%;margin-top:18px;border-top:1px solid #303943;padding-top:18px;}
.layer-list {display:flex;flex:1;margin:0;border:0;gap:10px;}
.layer-list button {min-height:42px;border:1px solid #414c57;font-family:var(--tech-font);font-size:9px;padding:9px 12px;gap:12px;}
.layer-plus {font-size:16px;}
.material-tools>.fine-print {flex-basis:30%;font-family:var(--tech-font);font-size:8px;}
.drawing-caption,.image-caption {font-family:var(--tech-font);font-size:8px;}
@media (hover:hover) and (pointer:fine) {
  html[data-product-motion="on"] .model-footer {height:52px;}
  html[data-product-motion="on"] .model-open {bottom:4px;opacity:0;transform:none;}
  html[data-product-motion="on"] .model:hover .model-label,html[data-product-motion="on"] .model:focus-within .model-label {opacity:0;transform:none;}
  html[data-product-motion="on"] .model:hover .model-open,html[data-product-motion="on"] .model:focus-within .model-open {opacity:1;transform:none;background:#e1e7e9;color:#111922;border-color:#e1e7e9;}
  html[data-product-motion="on"] .model:hover .model-visual,html[data-product-motion="on"] .model:focus-within .model-visual {--card-scale:1.025;}
  html[data-product-motion="on"] .model-image:hover::after {opacity:.5;}
  html[data-product-motion="on"] .hotspot:hover {transform:none;}
  .motion-toggle:hover {border-color:#b9c6d2;}
}
html[data-product-motion="off"] .hero-rear {transform:translate(-50%,-50%);}
html[data-product-motion="off"] .material-annotation {transform:translateY(var(--annotation-y,0px));}
@media (max-width:1100px) and (min-width:761px) {
  .header-tools {gap:12px;}.site-header nav {gap:22px;}.hero-meta {font-size:8px;}.hero-corner {font-size:7px;max-width:24ch;}.hero-corner span {font-size:7px;}
  .material-layout {grid-template-columns:1.45fr 1fr;}.material-description h3 {font-size:20px;}.material-description p {font-size:9px;}
}
@media (max-width:760px) {
  :root {--object-width:min(88vw,580px);}
  html {scroll-padding-top:58px;}.site-header {height:58px;gap:14px;}.wordmark {font-size:18px;}.wordmark span {font-size:22px;}
  .site-header nav {gap:16px;}.site-header nav a {font-size:9px;}.header-tools {gap:10px;}.motion-toggle {position:fixed;top:68px;right:var(--gutter);z-index:62;min-height:30px;background:#090a0c;}.basket-toggle {font-size:0;}
  .hero-stage {height:calc(100svh - 58px);min-height:570px;max-height:800px;}
  .hero-object {width:var(--object-width);height:auto;top:41%;}.hero-rear {width:var(--object-width);top:41%;}.halo-soft {filter:blur(18px);transform:scale(1.1);}.halo-rim {filter:blur(5px);}
  .hero-meta {top:9%;font-size:8px;gap:8px;}.hero-meta--left {padding-left:7px;}.hero-meta--right {padding-right:7px;}
  .hero-copy {bottom:15%;width:250px;}.hero-copy h1 {font-size:10px;line-height:1.65;margin-bottom:16px;}.hero-copy .text-link {width:198px;min-height:44px;}
  .hero-corner {bottom:5.8%;left:var(--gutter);right:var(--gutter);padding:7px 8px;font-size:8px;max-width:none;}.hero-corner span {font-size:8px;}.hero-corner--right {display:none;}
  .concept-note {bottom:10px;font-size:8px;gap:6px;}.status-dot {width:3px;height:3px;}
  .details {min-height:0;}.detail-media {height:390px;min-height:0;}.detail-media img {width:172%;height:113%;left:-38%;top:4%;transform:rotate(-6deg) scale(1.02);}
  .detail-copy {padding:40px var(--gutter) 68px;}.section-intro {font-size:10px;}.feature-list>div {font-size:10px;min-height:61px;}
  .collection,.material {padding-block:68px;}.collection-heading,.material-heading {margin-bottom:32px;gap:24px;}.collection-heading h2,.material-heading h2 {font-size:49px;}.collection-heading p,.material-heading p {font-size:9px;max-width:19ch;}
  .model-grid {gap:24px 13px;}.model-index {font-size:8px;left:8px;}.selection-mark {font-size:8px;}.model-label {gap:5px;}.model-label h3 {font-size:9px;}.color-dot::after {font-size:8px;padding-left:5px;border-width:2px;}.model-open {font-size:10px;padding-inline:8px;}
  .material-layout {gap:20px;align-items:stretch;}.material-drawing {width:100%;height:345px;}.material-info {padding-top:0;}.annotation-slot {height:auto;min-height:130px;}html[data-product-motion] .material-annotation {transform:none;}.material-description h3 {font-size:24px;}.material-description p {font-size:11px;max-width:45ch;}
  .material-lines {overflow:hidden;}.hotspot {width:34px;height:34px;}.material-tools {display:block;margin-top:22px;padding-top:0;border-top:0;}.layer-list {display:flex;flex-direction:column;gap:0;}.layer-list button {min-height:48px;border:0;border-top:1px solid #414c57;font-size:10px;}.layer-list button:last-child {border-bottom:1px solid #414c57;}.material-tools>.fine-print {margin-top:20px;font-size:8px;}
}
@media (max-width:420px) {
  .site-header nav {gap:12px;}.site-header nav a {font-size:9px;}.hero-copy {bottom:16%;}
}
@media (max-height:700px) and (min-width:761px) {
  .hero-stage {min-height:560px;}.hero-copy {bottom:4%;}.hero-corner {bottom:11%;}
}
@media (pointer:coarse) {
  .hero-rear,html:not([data-product-motion="on"]) .hero-rear {transform:translate(-50%,-50%);}
  .hero-mesh {display:none;}
}

.gallery-return {display:inline-block;margin-top:10px;font-size:10px;line-height:1.8;color:#c3cdd6;text-decoration:underline;text-underline-offset:4px;}
.gallery-return:hover {color:#fff;}