/* TakeTheRisk site app: panels over the live garden. Everything is scoped to #ttr-stills, #ttr-scrim, #ttr-app, .ttr-layer and .ttr-skip, so the intro (index.html) is untouched.
   Values lifted from the intro and from the four static pages (site.css). The page itself never scrolls: #ttr-app is the scroller. */
.ttr{--dim:rgba(232,220,195,.76);--hair:rgba(214,205,186,.4);--glow:255,226,170;--ivory:#efe9dc;--warm:#e8dcc3;--black:#07090a;--gut:clamp(16px,3vw,3rem);--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--sar:env(safe-area-inset-right);--sal:env(safe-area-inset-left);--edge:max(var(--gut),var(--sal));--pw:min(36rem,42vw);--top:0px;font:300 1rem/1.7 'Space Grotesk',sans-serif;color:var(--warm);font-variant-emoji:text;-webkit-text-size-adjust:100%}
.ttr.r-product{--pw:min(34rem,42vw)}
.ttr.r-lookbook{--pw:min(38rem,44vw)}
.ttr.r-about{--pw:min(40rem,46vw)}
.ttr,.ttr *,.ttr *::before,.ttr *::after{box-sizing:border-box}
.ttr a{color:inherit;text-decoration:none}
.ttr button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-shadow:inherit}
.ttr ul{list-style:none}
.ttr img{display:block;max-width:100%}
.ttr h1,.ttr h2,.ttr h3,.ttr p,.ttr ul,.ttr figure,.ttr dl,.ttr dd{margin:0;padding:0}
.ttr :focus-visible,.ttr-skip:focus-visible{outline:2px solid var(--ivory);outline-offset:3px}
.ttr [tabindex="-1"]:focus{outline:none}
.ttr .serif{font-family:Cinzel,serif}
.ttr .eyebrow{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;opacity:.85;line-height:1.9}
.ttr .tiny{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;line-height:2.1;opacity:.8}
.ttr .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ttr-skip{position:fixed;left:max(16px,env(safe-area-inset-left));top:calc(12px + env(safe-area-inset-top));z-index:300;padding:14px 18px;background:#efe9dc;color:#07090a;font:300 .7rem 'Space Grotesk',sans-serif;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.ttr-skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap}
.ttr-skip[hidden]{display:none}
body:not([data-route="intro"]) #load{display:none} /* a page route paints its still frame and panel at once; the intro's loader is for the doors */
/* ONE crossfade: on a page route the canvas comes up at once (index.html would fade it in over .8 s underneath the still frame, which then fades out over .6 s: two fades and a dark gap). The still frame is the only thing that fades. */
body[data-route]:not([data-route="intro"]) canvas{transition:none}
body:not([data-route="intro"]) header::before{inset:0 0 auto 0;height:calc(8rem + env(safe-area-inset-top));background:linear-gradient(#07090a,rgba(7,9,10,.94) 50%,rgba(7,9,10,.6) 75%,rgba(7,9,10,0))} /* the nav sits on a solid-to-clear band over a panel, like the four static pages */ /* a page route paints its still frame and panel at once; the intro's loader is for the doors */

/* the still layer: frames of the garden (site-img/, captured from the scene), under the panels. They are the first paint, the fallback without WebGL, and they dissolve once the live scene has settled. */
#ttr-stills{position:fixed;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.still{position:absolute;inset:var(--bi,0);background:var(--bp,center)/cover no-repeat;opacity:0;transition:opacity .6s ease}
.still.on{opacity:1}
.s-intro{--bi:0;--bp:center}
.s-shop{--bi:0 -30% 0 0;--bp:left bottom}
.s-product{--bi:0 0 0 -25%;--bp:right bottom}
.s-product.own{--bi:0;--bp:center} /* hoodie.jpg and tee.jpg are frames of the scene at the product pose (garment left of centre, room for the panel on the right): no extra shift */
.s-lookbook{--bi:0 -30% 0 0;--bp:left bottom}
.s-about{--bi:0 -45% 0 0;--bp:left bottom}
@media (max-aspect-ratio:1/1){
  .s-shop,.s-product,.s-lookbook{--bi:0;--bp:center}
  .s-about{--bi:0 -50% 0 0;--bp:left calc(-63.5vw)} /* hall-m scaled to 150% of the width: the blade of light stands at 75% across, right of the heading; the picture starts under the lintel lettering */
}
@media (min-aspect-ratio:1/1) and (max-aspect-ratio:155/100){.s-about{--bi:-50vh -60% 0 -36%}} /* squarer landscape: a taller, left-shifted frame, so the lintel lettering falls above and left of the screen */

/* the scrim: a feathered dark band from the panel's side, so the place stays in view beside it */
#ttr-scrim{position:fixed;inset:0;z-index:19;pointer-events:none;opacity:1;transition:opacity .35s ease}
#ttr-scrim.out{opacity:0}
#ttr-scrim.r-shop,#ttr-scrim.r-lookbook,#ttr-scrim.r-about{background:linear-gradient(90deg,rgba(3,4,5,.92),rgba(3,4,5,.86) calc(var(--pw) + var(--edge)),rgba(3,4,5,.4) calc(var(--pw) + var(--edge) + 5vw),transparent calc(var(--pw) + var(--edge) + 15vw))}
#ttr-scrim.r-product{background:linear-gradient(270deg,rgba(3,4,5,.92),rgba(3,4,5,.86) calc(var(--pw) + var(--edge)),rgba(3,4,5,.4) calc(var(--pw) + var(--edge) + 5vw),transparent calc(var(--pw) + var(--edge) + 15vw))}

/* the panel scroller */
#ttr-app{position:fixed;inset:0;z-index:20;display:block;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(232,220,195,.3) transparent;scroll-padding-top:calc(5.5rem + var(--sat));opacity:1;transition:opacity .35s ease}
#ttr-app[hidden]{display:none}
#ttr-app.out{opacity:0;pointer-events:none}
.ttr .sheet{position:relative;display:flow-root}
.ttr .col{width:var(--pw);margin-left:var(--edge)}
.ttr.r-product .col{margin-left:auto;margin-right:max(var(--gut),var(--sar))}
.ttr .panel{position:relative;padding:calc(clamp(6rem,14vh,8rem) + var(--sat)) 0 clamp(2.5rem,6vh,4rem)}
.ttr .panel:focus{outline:none}

.ttr .head h1,.ttr .display{font-family:Cinzel,serif;font-weight:400;font-size:clamp(2.1rem,calc(var(--pw) * .105),4.6rem);line-height:1.04;letter-spacing:.09em;text-transform:uppercase;color:#f3ead6;text-shadow:0 2px 34px rgba(0,0,0,.85)}
.ttr .head{position:relative;z-index:2;margin-bottom:clamp(28px,5vh,3.5rem)}
.ttr .head::after{content:"";display:block;width:min(16.25rem,60%);height:1px;margin-top:26px;background:linear-gradient(90deg,rgba(var(--glow),.85),rgba(var(--glow),0))}
.ttr .head .eyebrow{margin-bottom:14px}
.ttr .poem{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:clamp(1.25rem,2.3vw,1.8rem);line-height:1.35;color:#f3ead6;text-shadow:0 2px 24px rgba(0,0,0,.85);margin-top:14px}
.ttr .lead{max-width:44ch;margin:14px 0 6px;font-size:1rem;color:var(--dim)}
.ttr .link{display:inline-flex;align-items:center;min-height:max(44px,2.75rem);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;border-bottom:1px solid rgba(232,220,195,.5);padding:0 0 2px}
.ttr .link:hover{border-bottom-color:var(--ivory);color:var(--ivory)}
.ttr .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.9rem 2.2rem;border:1px solid rgba(232,220,195,.75);background:rgba(7,9,10,.28);font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ivory)}
.ttr .btn:hover:not(:disabled){background:var(--ivory);color:var(--black)}
.ttr .soon{display:block;text-align:center;padding:1rem;border:1px dashed var(--hair);font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ivory)}
.ttr .ar{display:inline-block;width:.85em;height:.85em;margin-left:.6em;vertical-align:-.08em;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.ttr .empty{min-height:40svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px}
.ttr .n404{font-size:4rem;color:var(--dim)}

/* the arch: the shape of the doors. A lantern above the apex, a pool of light at the foot, a stone reveal around the picture. */
.ttr .niche{position:relative;display:block;isolation:isolate;padding:4.5rem 0 2.125rem}
.ttr .niche::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-11.875rem;height:26.875rem;background:radial-gradient(circle 3.625rem at 50% 13.8125rem,rgba(255,244,222,.34),rgba(255,244,222,.1) 55%,transparent),radial-gradient(ellipse 50% 13.125rem at 50% 13.8125rem,rgba(var(--glow),.12),transparent);opacity:.7;transition:opacity .6s ease}
.ttr .niche::after{content:"";position:absolute;z-index:-1;left:2%;right:2%;bottom:0;height:4rem;background:radial-gradient(closest-side at 50% 50%,rgba(var(--glow),.5),rgba(var(--glow),.12) 60%,transparent 100%);opacity:.5;transition:opacity .6s ease}
.ttr .niche::before,.ttr .niche::after,.ttr .lantern{pointer-events:none} /* decoration never takes a click or tap from what lies under it */
.ttr .niche:hover::before,.ttr .niche:hover::after,.ttr .niche:focus-within::before,.ttr .niche:focus-within::after,.ttr a:hover .niche::before,.ttr a:hover .niche::after,.ttr a:focus-visible .niche::before,.ttr a:focus-visible .niche::after{opacity:1}
.ttr .lantern{position:absolute;left:50%;top:0;width:2rem;height:4rem;margin-left:-1rem;fill:none;stroke:rgba(226,214,186,.88);stroke-width:.9;stroke-linejoin:round;stroke-linecap:round}
.ttr .lantern .p{opacity:.45}
.ttr .lantern .k{fill:#fff7e8;stroke:none}
.ttr .lantern .h{fill:url(#lg);stroke:none;animation:ttr-flick 9s ease-in-out infinite alternate}
@keyframes ttr-flick{from{opacity:.75}50%{opacity:1}to{opacity:.85}}
@keyframes ttr-fade{from{opacity:.45}}
.ttr .arch{position:relative;display:block;overflow:hidden;padding:8px;border:1px solid rgba(214,205,186,.45);border-radius:999px 999px 0 0;background:linear-gradient(#5a554a,#37342d 30%,#1e1d1a);box-shadow:inset 0 0 0 1px rgba(255,244,214,.16),inset 0 -14px 20px rgba(0,0,0,.55);transition:border-color .6s}
.ttr .niche:hover .arch,.ttr .niche:focus-within .arch,.ttr a:hover .arch,.ttr a:focus-visible .arch{border-color:rgba(var(--glow),.8)}
.ttr .arch>img{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 0 0;background:#0b0c0c;box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.ttr .arch>img.wide{object-fit:contain}
.ttr .arch.frame::after{content:"";position:absolute;z-index:1;inset:8px;border-radius:999px 999px 0 0;pointer-events:none;box-shadow:inset 0 0 58px 8px rgba(5,6,6,.9);opacity:0;transition:opacity .35s} /* supplier mockups: the white background does not meet the stone frame at full brightness; the image itself is never filtered */
.ttr .arch.frame.mock::after{opacity:1}
.ttr .arch.frame.busy>img{opacity:.6;transition:opacity .4s .15s}

/* shop: the two pieces, hoodie left and tee right like their alcoves in the garden */
.ttr .alcoves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,2.4vw,2.5rem);align-items:start}
.ttr .alcove{display:block;padding-bottom:8px}
.ttr .alcove:nth-child(2){margin-top:3.5rem}
.ttr .alcove .niche{padding:3.25rem 0 1.5rem}
.ttr .alcove .lantern{width:1.5rem;height:3rem;margin-left:-.75rem}
.ttr .alcove .arch{aspect-ratio:4/5}
.ttr .alcove .name,.ttr .alcove .price{display:block}
.ttr .alcove .name{margin-top:6px;font:400 1.1rem/1.25 Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:#f3ead6}
.ttr .alcove .price{margin-top:6px;font-size:.95rem;letter-spacing:.08em}
.ttr .alcove .cap{display:block;margin-top:8px;font-size:.74rem;line-height:1.55;color:var(--dim);max-width:34ch}
.ttr .alcove .link{margin-top:6px}

/* product */
.ttr .back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:8px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.ttr .back:hover{opacity:1}
.ttr .buy h1{font:400 clamp(1.6rem,calc(var(--pw) * .068),2.5rem)/1.15 Cinzel,serif;letter-spacing:.08em;text-transform:uppercase;color:#f3ead6;text-shadow:0 2px 34px rgba(0,0,0,.85);margin:6px 0 14px}
.ttr .price{font-size:1.5rem;letter-spacing:.06em;color:var(--ivory)}
.ttr .blurb{margin:12px 0 20px;font-size:.92rem;color:var(--dim)}
.ttr .opt{margin-bottom:18px}
.ttr .opt .label,.ttr .details h2{font-size:.66rem;font-weight:400;letter-spacing:.34em;text-transform:uppercase;opacity:.85;margin-bottom:10px}
.ttr .opt .label{display:flex;justify-content:space-between;gap:12px}
.ttr .opt .label b{font-weight:400;letter-spacing:.14em;color:var(--ivory)}
.ttr .chips{display:flex;flex-wrap:wrap;gap:6px}
.ttr .chip{min-width:max(44px,2.75rem);min-height:max(44px,2.75rem);padding:0 14px;border:1px solid var(--hair);background:rgba(7,9,10,.4);font-size:.72rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;transition:background .25s,color .25s}
.ttr .chip.sq{width:3rem;height:3rem;padding:0}
.ttr .chip:hover{border-color:var(--ivory)}
.ttr .chip[aria-pressed=true]{background:var(--ivory);border-color:var(--ivory);color:var(--black)}
.ttr .sel{margin:6px 0 16px;font-size:.82rem;letter-spacing:.08em;color:var(--ivory)}
.ttr .buy .link{margin-top:14px}
.ttr .gallery{margin-top:clamp(12px,3vh,2rem)}
.ttr .frame{width:min(100%,calc((100vh - 16.875rem)*.8),62.4vh);width:min(100%,calc((100svh - 16.875rem)*.8),62.4svh);margin-inline:auto;aspect-ratio:4/5;touch-action:pan-y}
.ttr .frame.swap>img{animation:ttr-fade .35s ease-out}
.ttr .nav-btn{position:absolute;top:50%;z-index:2;width:max(46px,2.875rem);height:max(46px,2.875rem);margin-top:min(-23px,-1.4375rem);border-radius:50%;border:1px solid rgba(232,220,195,.6);background:rgba(7,9,10,.45);color:var(--ivory);font-size:1rem;transition:background .3s}
.ttr .nav-btn:hover{background:rgba(232,220,195,.9);color:var(--black)}
.ttr .nav-btn.prev{left:10px}.ttr .nav-btn.next{right:10px}
.ttr .gal-cap{display:flex;gap:16px;width:min(100%,calc((100vh - 16.875rem)*.8),62.4vh);width:min(100%,calc((100svh - 16.875rem)*.8),62.4svh);margin:16px auto 0;font-size:.78rem;line-height:1.55;color:var(--dim)}
.ttr .gal-cap .n{flex:none;font-size:.62rem;letter-spacing:.3em;padding-top:3px;color:var(--ivory)}
.ttr .note{margin-top:14px;font-size:.74rem;line-height:1.6;color:var(--dim);max-width:52ch}
.ttr .thumbs{display:flex;gap:10px;margin-top:22px;padding:8px 8px 10px;margin-inline:-8px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent);position:relative}
.ttr .thumbs::-webkit-scrollbar{display:none}
.ttr .thumb{flex:none;width:4rem;height:5rem;scroll-snap-align:center;overflow:hidden;border:1px solid var(--hair);border-radius:999px 999px 0 0;opacity:.55;background:#0b0c0c}
.ttr .thumb img{width:100%;height:100%;object-fit:cover}
.ttr .thumb[aria-pressed=true]{opacity:1;border-color:var(--ivory)}
.ttr .thumb:hover{opacity:1}
.ttr .details{margin-top:22px;padding-top:18px;border-top:1px solid rgba(232,220,195,.18)}
.ttr .details p{margin-bottom:10px;font-size:.86rem;line-height:1.6;color:var(--dim)}
.ttr .buy .link,.ttr .chip{min-height:max(44px,2.75rem)}

/* lookbook: a strip on a landscape screen (inside the panel), a sequence on a phone */
.ttr .walk{position:relative;display:flex;gap:clamp(24px,3vw,3rem);padding:0 0 2rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ttr .walk::-webkit-scrollbar{display:none}
.ttr .walk::after{content:"";flex:none;width:calc(100% - min(19rem,80%) - 3rem)}
.ttr .walk figure{flex:none;width:min(19rem,80%);scroll-snap-align:start}
.ttr .walk figure:nth-child(even){margin-top:3.5rem}
.ttr .walk .arch{aspect-ratio:3/4}
.ttr .walk figcaption{margin-top:16px;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;line-height:2;color:var(--ivory)}
.ttr .walk figcaption small{display:block;font:italic 500 1.05rem/1.3 'Cormorant Garamond',serif;letter-spacing:.02em;text-transform:none;color:var(--dim)}
.ttr .walk-ctl{display:flex;align-items:center;gap:14px;margin-top:8px}
.ttr .walk-ctl .nav-btn{position:static;margin:0}
.ttr .walk-ctl .nav-btn:disabled{opacity:.25;cursor:default}
.ttr .walk-ctl .tiny{min-width:6ch;text-align:center}

/* about */
.ttr .story{display:grid;grid-template-columns:minmax(0,1fr);gap:1.8rem;align-items:start}
.ttr .story .arch{aspect-ratio:3/4;max-width:13rem}
.ttr .story figcaption{margin-top:14px;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;display:flex;justify-content:space-between;gap:12px;max-width:13rem}
.ttr .story h2{font:400 clamp(1.5rem,calc(var(--pw) * .06),2.4rem)/1.15 Cinzel,serif;letter-spacing:.08em;text-transform:uppercase;color:#f3ead6;margin:10px 0 22px}
.ttr .story p{margin-bottom:1.1rem;max-width:36rem;font-size:1.02rem;line-height:1.85;color:rgba(232,220,195,.9);text-shadow:0 1px 18px rgba(0,0,0,.9)}
.ttr .values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:clamp(40px,7vh,72px);padding-top:28px;border-top:1px solid var(--hair)}
.ttr .values h2{font:400 1.2rem/1.2 Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;color:#f3ead6;margin:6px 0 10px}
.ttr .values p{font-size:.88rem;line-height:1.7;color:var(--dim)}
.ttr .contact{margin-top:clamp(32px,6vh,56px);font-size:.9rem}
.ttr .contact a,.ttr .foot-grid p a{display:inline-block;min-height:0;padding:12px 0;margin:-12px 0;border:0;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:3px} /* the underline is currentColor: a fixed light underline inside the text box is what the contrast guard measured as backdrop */
@media (min-width:1280px) and (min-aspect-ratio:1/1){.ttr .story{grid-template-columns:minmax(0,13rem) minmax(0,1fr)}}
@media (max-width:1100px) and (min-aspect-ratio:1/1){.ttr .values{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.ttr .values{grid-template-columns:minmax(0,1fr)}}

/* footer */
.ttr .foot{position:relative;padding:clamp(32px,5vh,56px) 0 calc(28px + var(--sab));border-top:1px solid rgba(232,220,195,.14)}
.ttr .foot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--gut)}
.ttr .foot-about{grid-column:1/-1}
.ttr .foot-brand{font-size:1.1rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ivory);margin-bottom:12px}
.ttr .foot p,.ttr .foot li{font-size:.84rem;color:var(--dim)}
.ttr .foot .eyebrow{margin-bottom:8px;color:var(--warm)}
.ttr .foot a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.ttr .foot a:hover{color:var(--ivory)}
.ttr .foot-grid p a{display:inline-block;min-height:0;min-width:0}
.ttr .legal{margin-top:28px;padding-top:18px;border-top:1px solid rgba(232,220,195,.1);font-size:.72rem!important;letter-spacing:.06em}

/* layers: size guide and bag (the policy dialog styles itself, in policy.js) */
.ttr-layer{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:max(16px,var(--sat)) max(16px,var(--sar)) max(16px,var(--sab)) max(16px,var(--sal));background:rgba(0,0,0,.78);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility 0s .35s}
.ttr-layer.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s}
.ttr-layer.bag{place-items:start end;padding:calc(72px + var(--sat)) max(var(--gut),var(--sar)) 0 max(var(--gut),var(--sal));background:rgba(0,0,0,.45)}
.ttr-sheet{width:min(42rem,100%);max-height:calc(100vh - 32px - var(--sat) - var(--sab));max-height:calc(100dvh - 32px - var(--sat) - var(--sab));overflow-y:auto;padding:clamp(20px,4vw,32px);background:rgba(9,11,12,.96);border:1px solid var(--hair);box-shadow:0 0 80px -20px rgba(var(--glow),.25)}
.ttr-layer.bag .ttr-sheet{width:min(320px,100%);max-height:none}
.ttr-sheet:focus{outline:none}
.ttr-sheet h2{font:400 1.4rem/1.2 Cinzel,serif;letter-spacing:.1em;text-transform:uppercase;color:#f3ead6;margin:4px 0 14px}
.ttr-sheet p,.ttr-sheet dd{font-size:.8rem;line-height:1.6;color:var(--dim)}
.ttr-sheet .btn{width:100%}
.ttr .tablebox{overflow-x:auto;margin:10px 0 6px;border:1px solid rgba(232,220,195,.22)}
.ttr .tablebox table{border-collapse:collapse;min-width:440px;width:100%;font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.ttr .tablebox th,.ttr .tablebox td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(232,220,195,.12)}
.ttr .tablebox thead{background:#191a18;color:var(--ivory)}
.ttr .tablebox thead th{font-size:.72rem;font-weight:400}
.ttr .tablebox thead th i{display:block;font-style:normal;font-size:.62rem;color:var(--dim);margin-top:2px}
.ttr .tablebox tbody th{color:var(--ivory);font-weight:400}
.ttr .tablebox tbody td{color:var(--dim)}
.ttr .tablebox tr.on{background:rgba(238,233,220,.13);box-shadow:inset 3px 0 var(--ivory)}
.ttr .tablebox tr.on td{color:var(--ivory)}
.ttr .tablebox tbody th:first-child{position:sticky;left:0;background:#171815}
.ttr .swipe{display:none}
.ttr details.how{margin-top:14px;border-top:1px solid rgba(232,220,195,.18);padding-top:8px}
.ttr details.how summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:.8rem;color:var(--ivory)}
.ttr details.how dl{display:grid;gap:10px;margin-top:6px}
.ttr details.how dl div{display:grid;grid-template-columns:100px 1fr;gap:12px}
.ttr details.how dt{font-size:.76rem;color:var(--ivory)}

/* a phone, or any portrait screen: no side column. The panel is a bottom sheet that rises over the place (the scene stays in the top part); --top is where it starts. */
@media (max-aspect-ratio:1/1){
  .ttr{--pw:calc(100vw - 2*var(--edge))}
  .ttr.r-shop{--top:34vh;--top:34svh}
  .ttr.r-product{--top:55vh;--top:55svh}
  .ttr.r-lookbook{--top:40vh;--top:40svh}
  .ttr.r-about{--top:36vh;--top:36svh}
  #ttr-scrim{display:none}
  .ttr .sheet{margin-top:var(--top);min-height:calc(100vh - var(--top));min-height:calc(100svh - var(--top))}
  .ttr .sheet::before{content:"";position:absolute;inset:-4.5rem 0 0;pointer-events:none;background:linear-gradient(rgba(3,4,5,0),rgba(3,4,5,.9) 4.5rem)}
  .ttr .col,.ttr.r-product .col{width:auto;margin-left:var(--edge);margin-right:max(var(--edge),var(--sar))}
  .ttr .panel{padding-top:.5rem}
  .ttr .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ttr-layer.bag{place-items:start center}
}
@media (max-width:760px){
  .ttr .swipe{display:block;font-size:.7rem!important}
  .ttr .walk{flex-direction:column;overflow:visible;gap:44px;padding:8px 0 24px;scroll-snap-type:none}
  .ttr .walk::after{display:none}
  .ttr .walk figure{width:min(86%,420px)}
  .ttr .walk figure:nth-child(even){margin-top:0;align-self:flex-end}
  .ttr .walk-ctl{display:none}
  .ttr .alcove .cap{font-size:.7rem}
}
@media (max-width:560px){.ttr .foot-grid{grid-template-columns:minmax(0,1fr)}}
@media (orientation:landscape) and (max-height:520px){ /* phone turned: a compact top so the heading and the picture start on the first screen */
  .ttr .panel{padding-top:calc(72px + var(--sat))}
  .ttr .niche{padding:36px 0 18px}
  .ttr .lantern{width:20px;height:40px;margin-left:-10px}
  .ttr .frame,.ttr .gal-cap{width:min(100%,62.4vh);width:min(100%,62.4svh)}
}
@media (prefers-reduced-motion:reduce){
  .ttr,.ttr *,.ttr *::before,.ttr *::after,#ttr-stills,#ttr-stills *,#ttr-scrim,#ttr-app{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}