/* The 3D entrance (entrance3d.js). #threshold reserves the render's box (1045×879 px of the approved render: frame, door and the side shadow);
   the still render paints there at once and the 3D canvas takes over identically (html.entrance-live). The canvas is
   transparent: the page is the floor and the wall, so its colour is the render's paper. */
/* Until journey.js takes over (it sets each layer's opacity inline), only the entrance shows: on a slow line the later
   scenes used to paint on top of the door for the first seconds. */
.journey-layer:not(.entry-layer){opacity:0}
.entrance-entry{background:#f7f5f1}
/* The entrance's own stretch of scroll (journey.js: entryExtra()), about four screens (the door, then the hall), pinned. */
.entrance-3d #journey{height:calc(305.555555svh + 4.4 * 55.5555555svh)} /* 3.5 for the door + .9 for the tees (journey.js extra) */
@media(max-width:699px){.entrance-3d #journey{height:calc(305.555555svh + 7.2 * 55.5555555svh)}}

/* Type as in the approved entrance: true black headline, the line above it darker and wide. */
.entrance-entry .intro{z-index:3}
.entrance-entry .intro h1{color:#121110}
.entrance-entry .intro .eyebrow{color:#2e2b26;letter-spacing:.34em}
#threshold.entrance-threshold{aspect-ratio:1045/879;filter:none;perspective:none;z-index:2;width:min(100vw,calc(46svh*1045/879));top:25%}
@media(max-width:700px){.entrance-entry .intro h1{font-size:49px}.entrance-entry .intro .eyebrow{letter-spacing:2.1px}}
@media(min-width:701px){.entrance-entry .intro{top:3svh}.entrance-entry .intro h1{font-size:clamp(44px,7.4svh,88px)}
  #threshold.entrance-threshold{top:15.5svh;width:calc(68svh*1045/879)}}
@media(max-height:650px){#threshold.entrance-threshold{top:24%;width:min(100vw,calc(44svh*1045/879))}}
/* Teaser: the countdown sits under the headline, so the door steps down on wide screens. */
@media(min-width:701px){body[data-teaser=true] #threshold.entrance-threshold{top:29svh;margin-top:0;width:calc(57svh*1045/879)}}
#threshold .doorway.entrance-door{background:none;box-shadow:none;border-radius:0;perspective:none;overflow:visible;isolation:auto;-webkit-tap-highlight-color:transparent}
#threshold .doorway.entrance-door:focus-visible{outline:2px solid #2a2722;outline-offset:8px}
#threshold.entrance-threshold :is(.door-shadow,.beyond,.door-leaf){display:none}
.entrance-still{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.entrance-live .entrance-still{visibility:hidden}
.entrance-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* The cue sits on the floor under the door: one word over a hairline. */
#threshold.entrance-threshold .guide-tap{display:none}
#threshold.entrance-threshold .guide-cue{bottom:auto;top:calc(100% + 10px);display:flex;flex-direction:column-reverse;align-items:center;gap:9px}
#threshold.entrance-threshold .cue-word{font-size:10px;letter-spacing:.38em;padding-left:.38em;text-shadow:none}
#threshold.entrance-threshold .cue-line{height:30px}
@media(min-width:701px){.entrance-entry .entrance-foot{bottom:max(3.5%,calc(env(safe-area-inset-bottom) + 18px))}}
/* Once the camera is past the door, the door's button (and tape) step aside, so the room's pieces take the clicks. */
.entrance-inside #threshold{pointer-events:none}
.entrance-inside #threshold *{pointer-events:none!important}
/* The first collection is shown inside the tunnel (entrance3d.js keeps drawing it behind): the room's own backdrop steps aside. */
.entrance-3d .gallery-layer{background:none}
.entrance-3d .gallery-layer :is(.gallery-world,.gallery-veil){display:none}
/* In the journey the bottom menu steps away (the scroll is the way through); it comes back with the shop (shop.js sets data-shopping). */
.room-nav{transition:opacity .3s cubic-bezier(.23,1,.32,1),translate .3s cubic-bezier(.23,1,.32,1),visibility 0s}
body:not([data-shopping=true]) .room-nav{opacity:0;translate:0 14px;visibility:hidden;pointer-events:none;transition:opacity .2s ease,translate .2s ease,visibility 0s .2s}
@media(prefers-reduced-motion:reduce){.room-nav{transition:none!important}}
/* The end of the journey (journey.js renderJourneyEnd): in the middle of the screen, over the tunnel. On phones it is the
   row's last stop and slides in after the last piece (journey.js sets its translate and opacity). The brand's quiet dark
   glass, Clash Display for the line, DM Sans for the rest; a rail of the collections, the one just seen lit. */
#journey-end.journey-end{top:50%;bottom:auto;left:50%;right:auto;width:min(calc(100vw - 40px),420px);transform:translate(-50%,-50%);box-sizing:border-box;padding:26px 24px 22px;
  border:1px solid #ffffff17;border-radius:28px;background:linear-gradient(180deg,#1a1917e6,#0d0d0ce6);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:0 30px 80px #000a,inset 0 1px 0 #ffffff12;color:#f1eee7;font-family:'DM Sans',sans-serif;text-align:left;will-change:translate,opacity}
.je-rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin-bottom:22px}
.je-rail span{display:grid;gap:8px;min-width:0}
.je-rail i{display:block;height:2px;border-radius:2px;background:#ffffff26}
.je-rail .is-seen i{background:#f1eee7}
.je-rail small{font:600 9px/1.35 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7d786f;text-wrap:balance}
.je-rail .is-seen small{color:#d9d4ca}
/* the count, as the teaser reel ends: wide-set grotesk numerals */
.je-count{margin:6px 0 26px;font:500 clamp(30px,9vw,40px)/1 'Space Grotesk','DM Sans',sans-serif;letter-spacing:.4em;padding-left:.4em;text-align:center;color:#f1eee7;font-variant-numeric:tabular-nums}
.je-choices{display:grid;gap:10px}
#journey-end .je-choice{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:68px;margin:0;padding:14px 14px 14px 20px;box-sizing:border-box;border-radius:20px;
  font-family:'DM Sans',sans-serif;text-align:left;text-decoration:none;cursor:pointer;box-shadow:none;transition:background .18s ease,border-color .18s ease,transform .16s cubic-bezier(.23,1,.32,1)}
#journey-end .je-choice span{display:grid;gap:4px;min-width:0}
#journey-end .je-choice small{font:600 10px 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.62}
#journey-end .je-choice b{font:600 17px/1.15 'Clash Display','Arial Black',Arial,sans-serif;letter-spacing:.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#journey-end .je-arrow{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%}
#journey-end .je-next{border:1px solid #f1eee7;background:#f1eee7;color:#121110}
#journey-end .je-next .je-arrow{background:#121110;color:#f1eee7}
#journey-end .je-shop{border:1px solid #ffffff24;background:#ffffff08;color:#f1eee7}
#journey-end .je-shop .je-arrow{border:1px solid #ffffff2e}
#journey-end .je-next[hidden]{display:none}
#journey-end .je-choice:active{transform:scale(.98)}
@media(hover:hover){#journey-end .je-shop:hover{background:#ffffff14;border-color:#ffffff3d}#journey-end .je-next:hover{background:#fff}}
#journey-end .je-choice:focus-visible{outline:2px solid #f1eee7;outline-offset:3px}
/* The drop room is no longer part of the journey. */
.drop-layer{display:none!important}
/* With the menu gone in the journey, the bag moves to the top right corner, and the product card comes down to the
   bottom edge (the shirts above it grow into the room: journey-cards.js measures the card). */
body:not([data-shopping=true]) .floating-bag{top:max(14px,env(safe-area-inset-top));bottom:auto}
.journey-card{bottom:calc(env(safe-area-inset-bottom) + 18px)}
/* "Continue the journey" swaps the row's collection behind a short fade (journey.js continueJourney). */
#journey-tees{transition:opacity .45s ease}
#journey-tees.is-swapping{opacity:0;transition:opacity .3s ease}
#journey-end.is-leaving{opacity:0!important;pointer-events:none;transition:opacity .25s ease}
/* Wide screens: the product card stands at the right, centred in height (as in the room); the row of shirts has the rest
   of the screen at the left (journey.js renderTrack shifts it there), the shirt in focus as big as the height allows. */
@media(min-width:701px){
  .journey-card.tees-card{left:auto;right:clamp(24px,4vw,72px);top:50%;bottom:auto;transform:translateY(-50%)}
  .journey-card.tees-card .ftn-card{width:min(400px,calc(100vw - 48px))}
  .journey-tee.on-track{--w:min(calc((100vw - 520px)*.62/.82),calc((100vh - 150px)/.82),720px);top:calc(50% - var(--w)/2)!important}
}
/* Wide screens without the 3D entrance: the tees' extra scroll (journey.js extra(), .9) */
@media(min-width:700px){html:not(.entrance-3d) #journey{height:calc(305.555555svh + .9 * 55.5555555svh)}}