/* TRAMA ZERO — original fictional fashion-commerce demo for Punto Due Studio */
:root{
  --ink:#11100e;
  --bone:#ece7dc;
  --paper:#f3efe7;
  --oxide:#a34d2a;
  --line:rgba(17,16,14,.18);
  --muted:#6d685f;
  --header-h:72px;
  --pad:clamp(18px,2.4vw,40px);
  --sans:"Helvetica Neue","Arial Nova",Arial,sans-serif;
  --cond:"Arial Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open,body.drawer-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--oxide);color:var(--paper)}
.skip-link{position:fixed;left:12px;top:-80px;z-index:999;background:#fff;padding:12px 16px;border:1px solid #111}
.skip-link:focus{top:12px}

.site-header{height:var(--header-h);padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:fixed;inset:0 0 auto;z-index:80;color:var(--ink);mix-blend-mode:difference;filter:invert(1);transition:background .3s,color .3s,filter .3s,mix-blend-mode .3s}
.site-header.is-scrolled,.site-header.is-solid{background:rgba(243,239,231,.93);backdrop-filter:blur(16px);mix-blend-mode:normal;filter:none;border-bottom:1px solid var(--line)}
.brand{font-family:var(--cond);font-weight:800;letter-spacing:-.05em;font-size:21px;line-height:.8;display:flex;flex-direction:column;width:max-content}
.brand-zero{margin-left:14px}
.desktop-nav{display:flex;gap:30px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.desktop-nav a{position:relative}
.desktop-nav a:after{content:"";height:1px;position:absolute;left:0;right:100%;bottom:-6px;background:currentColor;transition:right .25s ease}
.desktop-nav a:hover:after,.desktop-nav a:focus-visible:after{right:0}
.header-actions{justify-self:end;display:flex;align-items:center;gap:18px}
.text-button,.menu-trigger,.bag-close{border:0;background:none;padding:8px 0;cursor:pointer}
.text-button{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.menu-trigger{width:32px;height:32px;display:none;position:relative}
.menu-trigger span{position:absolute;left:4px;width:24px;height:1px;background:currentColor;transition:transform .3s,top .3s}
.menu-trigger span:first-child{top:11px}.menu-trigger span:last-child{top:20px}
.menu-open .menu-trigger span:first-child{top:16px;transform:rotate(45deg)}
.menu-open .menu-trigger span:last-child{top:16px;transform:rotate(-45deg)}

.mobile-menu{position:fixed;z-index:70;inset:var(--header-h) 0 0;background:var(--ink);color:var(--paper);padding:clamp(28px,7vw,60px) var(--pad);display:flex;flex-direction:column;justify-content:space-between;transform:translateY(-105%);visibility:hidden;transition:transform .55s cubic-bezier(.75,0,.15,1),visibility .55s}
.mobile-menu[aria-hidden="false"]{transform:none;visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{border-top:1px solid rgba(255,255,255,.18);padding:16px 0 18px;font-family:var(--cond);font-size:clamp(42px,12vw,72px);font-weight:700;letter-spacing:-.055em;line-height:.95;display:grid;grid-template-columns:45px 1fr}
.mobile-menu nav a:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.mobile-menu nav span{font:10px/1 var(--sans);letter-spacing:.12em;padding-top:9px}
.mobile-menu>p{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#99948b}

.eyebrow{margin:0 0 18px;font-size:10px;text-transform:uppercase;letter-spacing:.18em;font-weight:600}
.eyebrow--light{color:#aaa49b}
.arrow-link{display:inline-flex;gap:22px;justify-content:space-between;align-items:center;border-bottom:1px solid currentColor;padding:0 0 7px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;min-width:210px}
.arrow-link span{font-size:16px}
.button{display:inline-flex;min-height:50px;align-items:center;justify-content:center;padding:0 20px;border:1px solid var(--ink);text-transform:uppercase;font-size:11px;letter-spacing:.14em;transition:background .25s,color .25s}
.button--dark{background:var(--ink);color:var(--paper)}
.button--dark:hover,.button--dark:focus-visible{background:var(--oxide);border-color:var(--oxide)}

.hero{min-height:100svh;position:relative;display:grid;grid-template-columns:52% 48%;padding-top:var(--header-h);background:var(--bone);overflow:hidden}
.hero-copy{padding:clamp(80px,11vh,138px) var(--pad) 34px;display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:2}
.hero-copy h1{margin:0;font-family:var(--cond);font-weight:800;font-size:clamp(72px,9.1vw,166px);letter-spacing:-.075em;line-height:.76;text-transform:uppercase}
.hero-copy h1 span{display:block}
.hero-copy h1 span:last-child{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.7em;letter-spacing:-.055em;text-transform:none;margin-left:4.5vw;margin-top:.15em}
.hero-bottom{display:grid;grid-template-columns:minmax(220px,380px) auto;gap:34px;align-items:end}
.hero-bottom>p{margin:0;max-width:37ch;font-size:14px;line-height:1.6}
.hero-media{margin:0;position:relative;height:calc(100svh - var(--header-h));overflow:hidden;background:#b4afa5}
.hero-media img{width:100%;height:100%;object-fit:cover;transition:transform .2s linear;will-change:transform}
.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.25));pointer-events:none}
.hero-media figcaption{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;color:#fff;display:flex;justify-content:space-between;font-size:9px;text-transform:uppercase;letter-spacing:.15em}
.hero-index{position:absolute;left:52%;top:var(--header-h);transform:translateX(-50%);z-index:3;background:var(--oxide);color:#fff;width:50px;height:50px;display:grid;place-items:center;font-size:10px;letter-spacing:.12em}

.marquee{overflow:hidden;background:var(--ink);color:var(--paper);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.marquee-track{white-space:nowrap;display:flex;align-items:center;gap:26px;width:max-content;padding:14px 0;font:700 13px/1 var(--cond);letter-spacing:.15em;animation:marquee 22s linear infinite}
.marquee-track i{font-style:normal;color:var(--oxide)}
@keyframes marquee{to{transform:translateX(-50%)}}

.collection{padding:clamp(92px,11vw,170px) var(--pad) clamp(100px,12vw,190px)}
.section-head{display:grid;grid-template-columns:1fr 1.35fr .65fr;column-gap:34px;align-items:start;margin-bottom:clamp(55px,8vw,115px)}
.section-head .eyebrow{padding-top:12px}
.section-head h2,.weave-copy h2,.campaign-copy h2,.closing-cta h2{margin:0;font-family:var(--cond);font-size:clamp(58px,7.6vw,138px);font-weight:800;line-height:.82;letter-spacing:-.07em;text-transform:uppercase}
.section-head>p:last-child{margin:10px 0 0;max-width:32ch;font-size:14px;line-height:1.65}
.product-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,48px);align-items:start}
.product-card{min-width:0}
.product-card--large{grid-row:span 2}
.product-media{position:relative;overflow:hidden;aspect-ratio:4/5;background:#ddd7cc}
.product-card--large .product-media{aspect-ratio:4/5}
.product-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.product-card a:hover .product-media img{transform:scale(1.025)}
.media-number{position:absolute;top:14px;left:14px;width:34px;height:34px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:9px;color:#fff;mix-blend-mode:difference}
.product-meta{display:flex;justify-content:space-between;gap:30px;padding:14px 0 0;border-top:1px solid var(--line);margin-top:8px}
.product-meta h3{margin:0 0 4px;font-size:14px;font-weight:600}
.product-meta p,.product-meta strong{margin:0;font-size:11px;font-weight:400;color:var(--muted)}
.product-card--text{min-height:430px;background:var(--ink);color:var(--bone);padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.product-card--text h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(36px,4vw,64px);line-height:1;letter-spacing:-.04em;margin:0 0 20px;max-width:12ch}
.product-card--text>div>p:last-child{max-width:44ch;color:#aaa49b;font-size:13px}
.textile-swatch{display:flex;gap:6px}
.textile-swatch span{width:30px;height:30px;border-radius:50%;background:var(--bone)}
.textile-swatch span:nth-child(2){background:#222}
.textile-swatch span:nth-child(3){background:var(--oxide)}
.product-card--text .arrow-link{color:var(--bone)}

.weave-section{min-height:100svh;background:var(--ink);color:var(--bone);display:grid;grid-template-columns:36% 64%;overflow:hidden}
.weave-copy{padding:clamp(70px,9vw,145px) var(--pad);position:relative;z-index:2}
.weave-copy h2{font-size:clamp(68px,8.8vw,150px);margin-bottom:42px}
.weave-copy>p:not(.eyebrow){max-width:30ch;color:#aaa49b;font-size:14px;line-height:1.65}
.interaction-key{position:absolute;bottom:32px;left:var(--pad);display:flex;gap:12px}
.interaction-key span{border:1px solid rgba(255,255,255,.25);padding:7px 10px;border-radius:99px;font-size:9px;text-transform:uppercase;letter-spacing:.12em}
.weave-stage{position:relative;min-height:740px;cursor:grab;touch-action:pan-y;overflow:hidden;background:radial-gradient(circle at 55% 46%,#302d29 0,#181715 34%,#11100e 68%)}
.weave-stage:active{cursor:grabbing}
#weave-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.weave-fallback{position:absolute;inset:10%;display:grid;place-items:center;transform:rotate(-8deg);opacity:.55}
.weave-fallback i{position:absolute;width:72%;height:14%;border-radius:50%;border:18px solid var(--bone);transform:rotate(22deg)}
.weave-fallback i:nth-child(2){border-color:#262421;transform:rotate(83deg) scale(.85)}
.weave-fallback i:nth-child(3){border-color:var(--oxide);transform:rotate(142deg) scale(.68)}
.weave-stage.is-live .weave-fallback{opacity:0}
.stage-meta{position:absolute;z-index:3;bottom:20px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#aaa49b;pointer-events:none}

.manifesto{padding:clamp(110px,14vw,220px) var(--pad);background:var(--bone)}
.manifesto blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(64px,10vw,180px);line-height:.82;letter-spacing:-.065em;margin:clamp(55px,8vw,120px) 0;text-align:center}
.manifesto-grid{display:grid;grid-template-columns:1fr 1fr;gap:25%;max-width:960px;margin-left:auto}
.manifesto-grid p{font-size:14px;line-height:1.7;margin:0}

.campaign-break{display:grid;grid-template-columns:62% 38%;min-height:80svh;background:#d6d0c5}
.campaign-break figure{margin:0;position:relative;overflow:hidden;min-height:720px}
.campaign-break figure img{width:100%;height:100%;object-fit:cover}
.campaign-break figcaption{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;color:#fff;font-size:9px;text-transform:uppercase;letter-spacing:.13em}
.campaign-copy{padding:80px var(--pad);display:flex;flex-direction:column;justify-content:space-between}
.campaign-copy h2{font-size:clamp(56px,6vw,105px)}
.campaign-copy .button{align-self:flex-start}

.closing-cta{padding:clamp(100px,13vw,190px) var(--pad);display:flex;align-items:flex-end;justify-content:space-between;background:var(--paper)}
.closing-cta h2{font-size:clamp(74px,10vw,176px)}
.circle-link{width:clamp(120px,15vw,220px);aspect-ratio:1;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:space-around;transition:background .25s,color .25s,transform .35s}
.circle-link:hover{background:var(--oxide);color:#fff;border-color:var(--oxide);transform:rotate(-8deg)}
.circle-link span{font-size:10px}.circle-link b{font-size:34px;font-weight:400}

.site-footer{background:var(--ink);color:var(--bone);padding:36px var(--pad) 22px}
.footer-brand{font-family:var(--cond);font-size:clamp(72px,15vw,260px);font-weight:800;letter-spacing:-.075em;line-height:.82;white-space:nowrap;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:28px}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:28px 0 60px}
.footer-grid span{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#77736c}
.footer-grid p{font-size:12px;margin:8px 0 0}
.demo-disclosure{border-top:1px solid rgba(255,255,255,.18);padding-top:16px;margin:0;color:#77736c;font-size:10px;max-width:80ch}

.bag-drawer{position:fixed;z-index:120;right:0;top:0;width:min(430px,100%);height:100dvh;background:var(--paper);transform:translateX(105%);transition:transform .45s cubic-bezier(.75,0,.15,1);display:flex;flex-direction:column;padding:0 20px 20px;border-left:1px solid var(--line)}
.bag-drawer[aria-hidden="false"]{transform:none}
.bag-head{height:var(--header-h);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.bag-close{font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.bag-empty{margin:auto 0;text-align:center}
.bag-empty p{font-family:var(--serif);font-size:32px;font-style:italic}
.bag-empty a{text-transform:uppercase;font-size:10px;letter-spacing:.15em;border-bottom:1px solid}
.bag-item{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:20px 0}
.bag-thumb{aspect-ratio:4/5;background:#ddd;overflow:hidden}.bag-thumb img{width:100%;height:100%;object-fit:cover}
.bag-item strong{font-size:13px}.bag-item p,.bag-item span{font-size:11px;color:var(--muted)}
.bag-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;font-size:10px;color:var(--muted)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:110;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-open .scrim{opacity:1;pointer-events:auto}

/* PRODUCT */
.product-page{padding-top:var(--header-h);background:var(--paper)}
.product-hero{display:grid;grid-template-columns:58% 42%;min-height:calc(100svh - var(--header-h));border-top:1px solid var(--line)}
.product-gallery{background:#cbc5ba;min-height:820px;position:relative;overflow:hidden}
.product-gallery>img{width:100%;height:100%;object-fit:cover}
.product-gallery .gallery-tag{position:absolute;top:18px;left:18px;background:var(--paper);padding:9px 12px;font-size:9px;text-transform:uppercase;letter-spacing:.14em}
.product-buy{padding:clamp(44px,6vw,88px) var(--pad);display:flex;flex-direction:column;justify-content:space-between}
.product-buy h1{font-family:var(--cond);font-size:clamp(68px,7.6vw,130px);line-height:.78;letter-spacing:-.07em;text-transform:uppercase;margin:0 0 26px}
.product-buy h1 em{font-family:var(--serif);font-size:.6em;text-transform:none;font-weight:400}
.product-price{font-size:14px;margin:0 0 48px}
.product-description{max-width:45ch;font-size:14px;line-height:1.65;margin:0 0 40px}
.option-group{border-top:1px solid var(--line);padding:14px 0 20px}
.option-head{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.13em;margin-bottom:13px}
.size-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.size-row button{height:44px;background:transparent;border:1px solid var(--line);cursor:pointer;font-size:11px}
.size-row button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.color-row{display:flex;gap:9px}.color-chip{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);padding:4px;background:transparent;cursor:pointer}.color-chip i{display:block;width:100%;height:100%;border-radius:50%;background:#171717}.color-chip:nth-child(2) i{background:#ded8ca}.color-chip:nth-child(3) i{background:var(--oxide)}
.add-button{width:100%;height:58px;background:var(--ink);color:var(--paper);border:0;cursor:pointer;text-transform:uppercase;letter-spacing:.14em;font-size:11px;margin-top:20px;transition:background .2s}
.add-button:hover,.add-button:focus-visible{background:var(--oxide)}
.product-notice{margin:10px 0 0;font-size:9px;color:var(--muted);text-align:center}
.product-story{padding:clamp(100px,12vw,190px) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:var(--bone)}
.product-story h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(58px,7vw,120px);line-height:.85;letter-spacing:-.055em;margin:0}
.product-story-copy{display:flex;flex-direction:column;justify-content:flex-end;max-width:520px}
.product-story-copy p{font-size:14px;line-height:1.7}
.spec-list{margin-top:32px;border-top:1px solid var(--line)}
.spec-list div{display:grid;grid-template-columns:140px 1fr;padding:12px 0;border-bottom:1px solid var(--line);font-size:11px}.spec-list span:first-child{text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.product-detail-media{display:grid;grid-template-columns:1fr 1fr;min-height:720px}.detail-image{overflow:hidden;background:#ddd}.detail-image img{width:100%;height:100%;object-fit:cover}.detail-copy{background:var(--oxide);color:#fff;padding:var(--pad);display:flex;flex-direction:column;justify-content:space-between}.detail-copy h2{font-family:var(--cond);font-size:clamp(60px,7vw,126px);letter-spacing:-.07em;line-height:.82;text-transform:uppercase;margin:0}.detail-copy p{max-width:38ch;font-size:13px;line-height:1.65}

.not-found{min-height:100svh;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--header-h) + 60px) var(--pad) 30px}.not-found strong{font-family:var(--cond);font-size:clamp(150px,28vw,500px);line-height:.72;letter-spacing:-.09em;color:var(--oxide)}.not-found h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(42px,7vw,104px);margin:0}.not-found p{max-width:45ch;color:#99948b}.not-found .arrow-link{color:#fff}

@media (max-width:980px){
  .desktop-nav{display:none}.menu-trigger{display:block}
  .site-header{grid-template-columns:1fr auto}
  .hero{grid-template-columns:1fr;min-height:auto}.hero-copy{min-height:74svh;padding-top:110px}.hero-media{height:76svh}.hero-index{left:auto;right:0;transform:none}
  .hero-bottom{grid-template-columns:1fr auto}
  .section-head{grid-template-columns:1fr 1.6fr}.section-head>p:last-child{grid-column:2;margin-top:34px}
  .weave-section{grid-template-columns:1fr}.weave-copy{padding-bottom:40px}.weave-stage{min-height:70svh}.interaction-key{display:none}
  .campaign-break{grid-template-columns:1fr}.campaign-break figure{min-height:65svh}.campaign-copy{min-height:540px}
  .product-hero{grid-template-columns:1fr}.product-gallery{min-height:72svh}.product-buy{min-height:680px}.product-story{grid-template-columns:1fr}.product-detail-media{grid-template-columns:1fr}.detail-image{min-height:65svh}.detail-copy{min-height:560px}
}

@media (max-width:640px){
  :root{--header-h:64px;--pad:19px}
  .brand{font-size:18px}.header-actions{gap:12px}
  .hero-copy{min-height:67svh;padding-top:84px;padding-bottom:24px}.hero-copy h1{font-size:clamp(59px,18vw,78px);line-height:.8}.hero-copy h1 span:last-child{margin-left:12vw;font-size:.68em}.hero-bottom{grid-template-columns:1fr;gap:22px}.hero-bottom>p{font-size:13px;max-width:34ch}.hero-media{height:69svh}.hero-media figcaption span:nth-child(2){display:none}.hero-index{width:42px;height:42px}
  .marquee-track{padding:12px 0;font-size:11px}
  .collection{padding-top:84px;padding-bottom:100px}.section-head{grid-template-columns:1fr;margin-bottom:52px}.section-head h2{font-size:56px}.section-head .eyebrow{padding-top:0}.section-head>p:last-child{grid-column:auto;margin-top:24px}.product-grid{grid-template-columns:1fr;gap:48px}.product-card--large{grid-row:auto}.product-card--text{min-height:390px}.product-meta{padding-top:10px}.product-card--text h3{font-size:45px}
  .weave-copy{padding-top:80px}.weave-copy h2{font-size:74px}.weave-stage{min-height:62svh}.stage-meta{font-size:8px}.stage-meta span:last-child{display:none}
  .manifesto{padding-top:100px;padding-bottom:110px}.manifesto blockquote{text-align:left;font-size:65px;margin:66px 0}.manifesto-grid{grid-template-columns:1fr;gap:24px;margin-left:0}.manifesto-grid p{font-size:13px}
  .campaign-break figure{min-height:58svh}.campaign-copy{min-height:470px;padding-top:58px;padding-bottom:58px}.campaign-copy h2{font-size:58px}
  .closing-cta{align-items:flex-start;gap:40px;flex-direction:column}.closing-cta h2{font-size:73px}.circle-link{width:124px;align-self:flex-end}
  .footer-grid{grid-template-columns:1fr;gap:20px;padding-bottom:42px}.footer-brand{font-size:25vw}
  .product-gallery{min-height:65svh}.product-buy{min-height:640px;padding-top:48px}.product-buy h1{font-size:72px}.product-story h2{font-size:64px}.product-detail-media{display:block}.detail-image{min-height:58svh}.detail-copy{min-height:500px}.detail-copy h2{font-size:64px}.spec-list div{grid-template-columns:115px 1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.marquee-track{animation:none}.product-media img,.hero-media img{transform:none!important}
}