@import url('fonts/fonts.css');
/* Headlines: Clash Display for every title; Syne for the statement moments (collection names, the journey's animated titles).
   Loaded last so it wins over the older Georgia / Space Grotesk heading rules.
   Clash Display is under the ITF Free Font License: use it for our own pages only, never as a font customers can pick in the studio. */
:is(h1,h2,h3,h4,h5,h6),:is(h1,h2,h3,h4,h5,h6) :is(em,i,b,strong,span),
.shop-brand,.card-name,.po-bag-title,.sg-call,.number b,.card b{font-family:'Clash Display','Arial Black',Arial,sans-serif!important;font-weight:600!important;font-style:normal!important;letter-spacing:0!important;word-spacing:.04em}
.gallery-copy h2,.managed-collections h3,.shop-heading h4,.tile-copy b,.col-title,.bd-title,.cs-title,.wf-words,
:is(.gallery-copy h2,.managed-collections h3,.shop-heading h4,.col-title,.bd-title,.cs-title) :is(em,i,b,strong,span){font-family:'Syne','Arial Black',Arial,sans-serif!important;font-weight:800!important;font-style:normal!important;letter-spacing:-.02em!important}
:is(h1,h2,h3,h4,h5,h6),.bd-title,.cs-title,.col-title,.wf-words,.sg-call,.po-bag-title{line-height:1.04}
/* Syne is wider than the old faces: keep the journey's big titles inside a 320px phone. */
.cs-title{font-size:min(clamp(56px,12vw,170px),15.5vw)}
.bd-title{font-size:min(clamp(52px,11vw,150px),15vw)}
/* Phones: Syne 800 runs about 6em per word, so cap the size to keep "Beyond" / "Default" well inside the screen,
   and stack the collection name one word per line instead of letting it run off the edge. */
@media (max-width:760px){
  .bd-title{font-size:min(clamp(52px,11vw,150px),13vw);max-width:100%}
  .bd-title span{max-width:calc(100vw - 32px)}
  .col-title{font-size:min(clamp(32px,9vw,44px),11vw);max-width:100%;overflow-wrap:break-word}
  .theme-beyond .col-title{width:min-content}
  /* Homepage gallery: the collection name breaks into two balanced lines ("Beyond" over "Default") inside the screen. */
  .gallery-copy h2{font-size:min(35px,10.5vw)!important;max-width:min(8.2em,calc(100vw - 32px));margin-inline:auto;text-wrap:balance;overflow-wrap:break-word}
}