/* Layout: full-bleed photo bands and black tee wall, type set hard left in condensed caps; the copper full stop from the tee artwork is the only ornament. */
:root{
  --ground:#1b1e1d; --chalk:#f5f6f3; --stone:#d5d9d1; --sage:#718176; --copper:#ae4f2d; --copper-lit:#e0703f;
  --muted:#4f5753; --black:#000; --wall-text:#c9cec7;
  --display:"DS Archivo","DS Archivo Fallback","Arial Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  --body:"DS Manrope","DS Manrope Fallback","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(16px,4.6vw,72px);
  color-scheme:light;
}
@font-face{font-family:"DS Archivo";src:url("/assets/fonts/archivo-narrow-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"DS Manrope";src:url("/assets/fonts/manrope-latin.woff2") format("woff2");font-weight:200 800;font-display:swap}
/* Stand-ins sized to the web fonts, so the page does not jump when they arrive. Measured in Chrome against the real fonts: the average text width
   of Manrope is 102.25% of Arial Regular and 100.0% of Arial Bold; Archivo Narrow matches Arial Narrow (100.0%). Ascent and descent are the web fonts' own, divided by the size adjustment. */
@font-face{font-family:"DS Manrope Fallback";src:local("Arial"),local("ArialMT");font-weight:200 599;size-adjust:102.25%;ascent-override:104.25%;descent-override:29.34%}
@font-face{font-family:"DS Manrope Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 800;size-adjust:100%;ascent-override:106.6%;descent-override:30%}
@font-face{font-family:"DS Archivo Fallback";src:local("Arial Narrow"),local("ArialNarrow");font-weight:400 599;size-adjust:100%;ascent-override:103.5%;descent-override:31.2%}
@font-face{font-family:"DS Archivo Fallback";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold");font-weight:600 700;size-adjust:100%;ascent-override:103.5%;descent-override:31.2%}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--chalk);color:var(--ground);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--copper-lit);outline-offset:3px}
/* focus ring: copper on the light sections, the lighter copper on the dark ones */
.on-light :focus-visible,.about :focus-visible,.app :focus-visible,.see-head :focus-visible,.wont :focus-visible,.hello :focus-visible,.rec :focus-visible,.close :focus-visible,.ticker :focus-visible,.top.solid :focus-visible,.skins[data-t=light] :focus-visible,.skins[data-t=rose] :focus-visible{outline-color:var(--copper)}
.open :focus-visible,.film :focus-visible,.months :focus-visible,.priv :focus-visible,.living :focus-visible,.wall :focus-visible,.foot :focus-visible,.skins[data-t=dark] :focus-visible,.skins[data-t=storm] :focus-visible{outline-color:var(--copper-lit)}
.caps{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.022em;line-height:.88;text-wrap:balance}
.dot{color:var(--copper-lit)}
.on-light .dot{color:var(--copper)}
.go{display:inline-flex;align-items:baseline;gap:.6em;font-weight:700;font-size:.95rem;text-decoration:none;padding:.7em 0;border-bottom:2px solid currentColor;min-height:44px}
.go i{font-style:normal;transition:transform .25s ease}
.go:hover i{transform:translate(3px,-3px)}

.brand{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.store-btn{font-size:.95rem;font-weight:700;text-decoration:none;padding:12px 10px;margin-inline:-10px;line-height:1.6}
.store-btn:hover{text-decoration:underline;text-decoration-color:var(--copper-lit);text-underline-offset:6px;text-decoration-thickness:2px}

/* skip link */
.skip-link{position:absolute;top:-100px;left:16px;background:#1b1e1d;color:#f5f6f3;padding:14px;z-index:100}
.skip-link:focus{top:12px}
/* header */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--gut) 14px;color:var(--chalk);transition:transform .3s ease,background-color .3s ease,color .3s ease}
.top.solid{background:var(--chalk);color:var(--ground);box-shadow:0 1px 0 var(--stone)}
.top.away{transform:translateY(-100%)}
.mark{font-weight:800;font-size:1.65rem;letter-spacing:-.055em;text-decoration:none;line-height:1}
.top nav{display:flex;gap:clamp(14px,2.4vw,34px);font-size:.82rem;font-weight:700}
.top nav a{text-decoration:none;padding:12px 0}
.top nav a:hover{text-decoration:underline;text-decoration-color:var(--copper-lit);text-underline-offset:6px;text-decoration-thickness:2px}

/* 1 hero */
.hero{position:relative;height:min(94svh,940px);min-height:560px;background:var(--ground);color:var(--chalk);overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 30%;animation:push 26s ease-in-out infinite alternate;transform-origin:35% 40%}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.09) translateX(-1.2%)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b0d0c99 0,#0b0d0c8f calc(env(safe-area-inset-top,0px) + 76px),#0b0d0c00 max(22%,calc(env(safe-area-inset-top,0px) + 150px)),#0b0d0c00 45%,#0b0d0ccc 100%)}
.hero-in{position:absolute;inset:auto 0 0;z-index:2;padding:0 var(--gut) clamp(20px,4vw,44px);display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px}
.hero h1{font-size:clamp(3.6rem,min(15.5vw,25svh),14.5rem);margin-left:-.04em}
.hero-side{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-bottom:.9rem;max-width:19rem}
.hero-side p{font-size:1rem;font-weight:600;color:#fff;margin-bottom:.4rem;text-shadow:0 1px 14px #0009}
.credit{position:absolute;z-index:2;right:var(--gut);top:calc(86px + env(safe-area-inset-top,0px));writing-mode:vertical-rl;font-size:.68rem;letter-spacing:.08em;color:#f5f6f3cc}
.motion-btn,.film-btn{position:absolute;z-index:3;right:var(--gut);bottom:14px;background:none;border:1px solid #f5f6f388;color:var(--chalk);font:700 .7rem/1 var(--body);padding:0 12px;min-height:44px;min-width:44px;cursor:pointer}

/* 2 ticker */
.ticker{background:var(--chalk);border-bottom:1px solid var(--stone);overflow:hidden;padding-block:15px}
.ticker ul{display:flex;gap:0;list-style:none;margin:0;padding:0;width:max-content;animation:slide 60s linear infinite}
.ticker:hover ul,.ticker:focus-within ul{animation-play-state:paused}
.ticker li{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:-.01em;white-space:nowrap;padding-right:2.6em;position:relative}
.ticker li::after{content:"";position:absolute;right:1.15em;top:50%;width:.36em;height:.36em;background:var(--copper);transform:translateY(-50%)}
.ticker s{text-decoration-color:var(--copper);text-decoration-thickness:.12em}
.ticker small{font-family:var(--body);font-weight:600;text-transform:none;font-size:.62em;letter-spacing:0;color:var(--muted);margin-left:.5em}
@keyframes slide{to{transform:translateX(-50%)}}

/* 3 shop wall */
.wall{background:var(--black);color:var(--chalk);padding-block:clamp(36px,5vw,72px) 0}
.wall-head{padding-inline:var(--gut);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:end}
.wall h2{font-size:clamp(3.2rem,10.5vw,9.5rem)}
.wall-head p{color:var(--wall-text);max-width:26rem;margin-bottom:.9rem}
.rail-wrap{position:relative;margin-top:clamp(22px,3vw,44px)}
.rail{display:flex;gap:clamp(10px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:0 var(--gut) 8px;scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.tee{flex:0 0 clamp(250px,34vw,520px);scroll-snap-align:start;text-decoration:none;color:inherit}
.tee:nth-child(even){margin-top:clamp(18px,4vw,64px)}
/* each tee's picture sits in a frame; home.js rolls the next product up into every frame in turn */
.tee .pic{position:relative;overflow:hidden;aspect-ratio:1}
.tee img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.75,.2,1);-webkit-user-drag:none;user-select:none}
.tee img.in{transform:translateY(101%);transition:none}
.tee img.out{transform:translateY(-101%)}
.tee:hover img:not(.in):not(.out){transform:scale(1.045) rotate(-.6deg)}
.tee span{transition:opacity .3s ease}
.tee.swap span{opacity:0}
.tee span{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;border-top:1px solid #ffffff2e;padding-top:10px;font-size:.84rem;font-weight:700}
.tee span em{font-style:normal;font-weight:500;color:var(--wall-text)}
.rail-btns{display:flex;gap:8px;padding:18px var(--gut) 0;justify-content:flex-end}
.rail-btns button{width:48px;height:48px;background:none;border:1px solid #ffffff55;color:var(--chalk);font-size:1.1rem;cursor:pointer}
.rail-btns button:hover{background:var(--chalk);color:var(--black)}
.look{position:relative;margin-top:clamp(24px,3.5vw,52px)}
.look::before{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(0deg,#0b0d0cc7 0,#0b0d0c85 45%,#0b0d0c00 100%);pointer-events:none}
.look figcaption{position:absolute;right:var(--gut);bottom:clamp(16px,3vw,40px);text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.look figcaption small{font-size:.74rem;color:#f5f6f3dd}

/* 4 app: phones on an arc that turns with the scroll */
.app{padding-block:clamp(36px,5vw,72px) clamp(28px,4vw,56px)}
.app-intro{padding-inline:var(--gut)}
.app h2{font-size:clamp(3rem,8.4vw,7.6rem)}
.app-intro p{max-width:30rem;margin-top:1.3rem;color:var(--muted);font-size:1.05rem}
.stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;overflow:hidden}
.scene{position:relative;height:100%;perspective:1150px;perspective-origin:50% 40%;--pw:min(clamp(190px,21vw,300px),35svh)}
.ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.ph{position:absolute;width:var(--pw);aspect-ratio:780/1688;left:calc(var(--pw) / -2);top:calc(var(--pw) * -1.082);transform-style:preserve-3d;--rad:calc(var(--pw) * .168);--ti-hi:#eceae3;--ti:#b6b4ad;--ti-lo:#85837d}
/* titanium band: flat sides, bright chamfer at each edge */
.ph i{position:absolute;inset:0;border-radius:var(--rad);background:linear-gradient(90deg,var(--ti-hi) 0,var(--ti-lo) 4%,var(--ti) 22%,var(--ti) 78%,var(--ti-lo) 96%,var(--ti-hi) 100%)}
/* side buttons: action + volume on the left, power on the right */
.ph i.btn::before{content:"";position:absolute;left:calc(var(--pw) * -.012);width:calc(var(--pw) * .02);top:17.5%;height:25%;border-radius:2px;background:linear-gradient(180deg,var(--ti-lo) 0 13%,#0000 13% 25%,var(--ti-lo) 25% 60%,#0000 60% 66%,var(--ti-lo) 66% 100%)}
.ph i.btn::after{content:"";position:absolute;right:calc(var(--pw) * -.012);width:calc(var(--pw) * .02);top:28%;height:13%;border-radius:2px;background:var(--ti-lo)}
.ph .back{position:absolute;inset:0;border-radius:var(--rad);background:linear-gradient(155deg,#cfcdc6,#a5a39c 75%);box-shadow:inset 0 0 0 calc(var(--pw) * .012) var(--ti);backface-visibility:hidden}
/* camera plateau with three lenses */
.ph .back::before{content:"";position:absolute;left:5.5%;top:2.6%;width:47%;aspect-ratio:1;border-radius:24%;background:
  radial-gradient(circle at 28% 28%,#1d2a36 0 6%,#050607 6.5% 13%,#3a3936 13.5% 15.5%,#0000 16%),
  radial-gradient(circle at 28% 72%,#1d2a36 0 6%,#050607 6.5% 13%,#3a3936 13.5% 15.5%,#0000 16%),
  radial-gradient(circle at 72% 50%,#1d2a36 0 6%,#050607 6.5% 13%,#3a3936 13.5% 15.5%,#0000 16%),
  radial-gradient(circle at 74% 17%,#f3f1e6 0 3%,#0000 3.5%),
  linear-gradient(150deg,#c4c2bb,#9c9a93);box-shadow:0 0 0 1px #8b8983,0 2px 5px #0004}
.ph .face{position:absolute;inset:0;border-radius:var(--rad);background:#040404;padding:calc(var(--pw) * .026);box-shadow:inset 0 0 0 1.2px var(--ti-lo);backface-visibility:hidden;overflow:hidden}
.ph .face img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--pw) * .145)}
.ph .isl{position:absolute;z-index:1;left:50%;top:calc(var(--pw) * .056);width:30%;height:calc(var(--pw) * .086);transform:translateX(-50%);background:#000;border-radius:99px}
.ph .isl::after{content:"";position:absolute;right:9%;top:50%;width:19%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 40% 40%,#1c2733,#07090b 60%)}
.ph .face::before{content:"";position:absolute;inset:0;background:var(--chalk);opacity:var(--fade,0);pointer-events:none;z-index:2}
.ph .face::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(112deg,#fff0 32%,#ffffff38 46%,#ffffff0d 52%,#fff0 62%);background-size:320% 100%;background-position:var(--sheen,50%) 0}
.ph .floor{position:absolute;left:-8%;right:-8%;top:101.5%;height:9%;background:radial-gradient(ellipse at center,#1b1e1d66 0,#1b1e1d44 22%,#1b1e1d1f 45%,#1b1e1d0a 60%,#1b1e1d00 72%)}
.words{position:relative;padding-inline:var(--gut);min-height:15rem}
.beat{position:absolute;inset:0 var(--gut) auto var(--gut);opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.beat.on{opacity:1;transform:none;pointer-events:auto}
.beat h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:.95;letter-spacing:-.015em}
.beat p{max-width:25rem;margin-top:.9rem;color:var(--muted)}
.ticks{position:absolute;left:var(--gut);bottom:-2.2rem;display:flex;gap:6px}
.ticks i{width:28px;height:3px;background:var(--stone);transition:background-color .3s}
.ticks i.on{background:var(--copper)}
.get{margin-inline:var(--gut);border-top:1px solid var(--stone);padding-top:34px;display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
.store{display:inline-flex;flex-direction:column;justify-content:center;background:var(--ground);color:var(--chalk);text-decoration:none;padding:9px 20px 10px;min-height:54px;border-radius:9px;line-height:1.15}
.store small{font-size:.66rem;font-weight:500}
.store b{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.store:hover{background:var(--copper)}
.get p{flex-basis:100%;font-size:.86rem;color:var(--muted);max-width:30rem}

/* 5 capture film slot */
.film{position:relative;background:var(--ground);color:var(--chalk)}
.film img{width:100%;height:clamp(420px,62vw,820px);object-fit:cover;object-position:60% 35%}
.film video{position:relative;display:block;width:100%;height:clamp(420px,62vw,820px);object-fit:cover;object-position:60% 35%;opacity:0}
.film.live video{opacity:1}
/* the poster sits behind the film (the film is positioned too, and comes later) and is all anyone sees until it plays */
.film .film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 35%}
.film-btn{bottom:clamp(22px,5vw,70px);background:#0b0d0c99}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0d0cb8 0,#0b0d0c40 46%,#0b0d0c00 70%);pointer-events:none}
.film-in{position:absolute;z-index:2;left:var(--gut);bottom:clamp(22px,5vw,70px);max-width:min(30rem,calc(100% - 2*var(--gut)))}
.film h2{font-size:clamp(2.6rem,6.4vw,5.6rem)}
.film p{margin-top:1rem;color:#e7eae4}

/* 6 about */
/* the photo runs to the edges of its half: no stone border around it */
.about{background:var(--stone);padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;align-items:stretch}
.about h2{font-size:clamp(2.8rem,7vw,6.2rem)}
.about p{max-width:29rem;font-size:1.05rem}
.about p+p{margin-top:1rem}
.about figure{margin:0}
.about figure img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;object-position:35% 50%}
.about figcaption{font-size:.74rem;color:var(--muted);margin-top:8px}
.about .txt{display:flex;flex-direction:column;justify-content:center;gap:1.6rem;padding:clamp(32px,4.5vw,64px) var(--gut)}

/* 7 footer */
.foot{background:var(--ground);color:var(--chalk);padding:clamp(32px,4.5vw,60px) var(--gut) 0;overflow:hidden}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 60px}
.foot-top p{max-width:25rem;font-size:1.2rem;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.foot nav{display:grid;grid-template-columns:auto auto;gap:4px 44px;font-size:.88rem;font-weight:600}
.foot nav a{text-decoration:none;padding:10px 0;min-height:44px}
.foot nav a:hover{text-decoration:underline;text-decoration-color:var(--copper-lit);text-underline-offset:5px}
.foot-mark{font-weight:800;letter-spacing:-.065em;font-size:clamp(4rem,23vw,24rem);line-height:1;margin:clamp(12px,2vw,28px) 0 0 -.05em;padding-bottom:.2em;white-space:nowrap}
.legal{font-size:.72rem;color:#aab2a9;margin-top:clamp(28px,4vw,56px);padding-top:14px;border-top:1px solid #ffffff22}

@media (max-width:820px){
  .hero-in{grid-template-columns:1fr}
  .credit{display:none}
  .wall-head{grid-template-columns:1fr}
  .stage{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
  /* the header is 76px plus the safe area: the scene starts below it and the phone is sized to what is left above the words */
  .stage{padding-top:calc(84px + env(safe-area-inset-top,0px))}
  .scene{--pw:min(46vw,calc((100svh - 84px - env(safe-area-inset-top,0px) - 13.4rem - 72px) / 2.164));perspective:900px;perspective-origin:50% 50%}
  .words{min-height:11rem;margin-bottom:2.4rem}
  .about{grid-template-columns:1fr}
  .about figure{margin-top:0;order:2}
  .look figcaption{left:var(--gut);right:auto;text-align:left;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero img,.ticker ul{animation:none}
  .ticker{overflow-x:auto}
  .tee img,.beat,.top,.go i{transition:none}
}
/* size pass 14 Nov: nothing under 13px, headlines capped so they stop covering the picture */
.mark{padding-block:9px}
.top nav{font-size:.95rem}
.credit{font-size:.8rem}
.motion-btn,.film-btn{font-size:.82rem}
.tee span{font-size:.95rem}
.look figcaption small,.about figcaption{font-size:.875rem}
.store small{font-size:.75rem}
.get p{font-size:.95rem}
.legal{font-size:.82rem}
.legal a{display:inline-block;padding-block:12px;margin-block:-12px}
.ticker small{font-size:max(.62em,.82rem)}
.ticker li a{display:inline-block;padding-block:9px}
.ticker{padding-block:6px}
.hero h1{font-size:clamp(3.4rem,min(12.4vw,21svh),11rem)}
.wall h2{font-size:clamp(3rem,8.6vw,7.6rem)}
.app h2{font-size:clamp(2.8rem,7.4vw,7rem)}
.about h2{font-size:clamp(2.6rem,6.4vw,5.8rem)}
/* arrows drawn as lines so no device swaps them for emoji */
.go i{display:inline-flex;align-self:center}
.arw{display:block}
/* paper grain over everything, so no area is a flat fill */
body::after{content:"";position:fixed;inset:0;z-index:45;pointer-events:none;opacity:.11;background-image:url("/static/grain.d421172836.svg")}
/* carousel stage: a lit studio floor in place of a blank fill */
.app .stage{background:radial-gradient(ellipse 46% 40% at 36% 44%,#ffffff 0,#ffffff00 70%),linear-gradient(180deg,#e9ece5 0,#f6f7f4 58%,#cfd4cb 58.15%,#dde1d9 74%,#eceee9 100%)}

main{display:block}
main:focus{outline:none}

/* phones: an even bottom-up gradient under the film's words, so they read across the whole width */
@media (max-width:820px){
  /* the whole frame shows, at its own shape, and the words sit under it */
  .film::after{display:none}
  .film video,.film .film-poster{height:auto;aspect-ratio:1440/806;object-position:50% 50%}
  .film .film-poster{inset:0 0 auto 0}
  .film-in{position:static;max-width:none;padding:22px var(--gut) 30px}
}
/* short screens (a phone held sideways): nothing is pinned, so nothing is clipped; every phone and every line shows in turn */
@media (max-height:600px){
  .app .track{height:auto}
  .stage{position:static;height:auto;display:block;overflow:visible}
  .scene{height:auto;perspective:none;--pw:min(34vw,190px);padding:28px var(--gut)}
  .ring{position:static;width:auto;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:28px;transform:none!important}
  .ring .ph{position:relative;left:auto;top:auto;transform:none!important;visibility:visible!important}
  .words{min-height:0;display:grid;gap:1.6rem;padding-block:8px 28px;margin-bottom:0}
  .beat{position:static;opacity:1;transform:none;pointer-events:auto}
  .ticks{display:none}
}