/* ============================================================
   BK5.com — 5 Years of BK
   ============================================================ */

:root{
  --green-hero:#203731;
  --green-deep:#00471b;
  --cream:#eee1c6;
  --blue:#0077c0;
  --blue-badge:#0370ff;
  --blue-link:#94d6ff;
  --blue-caption:#7babd2;
  --yellow:#ffb612;
  --grey-card:#eeeeee;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-back:cubic-bezier(.34,1.4,.64,1);
  --shell:1331.452px;
  --shell-pad:clamp(20px,4vw,54px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#fff;
  color:#000;
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.skip{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:10px 16px;background:#fff;color:#000;border-radius:6px;
  font-weight:700;font-size:13px;letter-spacing:.06em;
  transform:translateY(-160%);transition:transform .25s var(--ease);
}
.skip:focus-visible{transform:translateY(0)}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ── scroll reveal (only when JS is available) ─────────────── */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms);
  will-change:opacity,transform;
}
.js .reveal.is-in{opacity:1;transform:none}
.js .review__rule{transform:scaleX(0)}
.js .review.is-in .review__rule{transform:scaleX(1)}
.js .footer__bar{transform:scaleX(0)}
.js .footer__bar.is-in{transform:scaleX(1)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  --tile:1539.94px;   /* one loop of portraits, matched to their own spacing */
  --k:1;              /* scale, stepped down on narrow screens */
  position:relative;
  height:343px;
  background:var(--green-hero);
  overflow:hidden;
  isolation:isolate;
}
.hero__track{
  position:absolute;
  left:0;
  top:0;
  display:flex;
  width:max-content;
  transform-origin:left top;
  animation:marquee 42s linear infinite;
}
.hero:hover .hero__track{animation-play-state:paused}
.hero__tile{
  position:relative;
  flex:none;
  width:var(--tile);
  height:343px;
}
/* scale is applied before the translate, so one step is exactly one tile */
@keyframes marquee{
  from{transform:scale(var(--k)) translateX(0)}
  to{transform:scale(var(--k)) translateX(calc(var(--tile) * -1))}
}
.portrait{
  position:absolute;
  left:var(--l);
  top:var(--t);
  width:var(--w);
  height:var(--h);
  pointer-events:none;
}
.portrait__head,
.portrait__hat{
  max-width:none;
  position:absolute;
  left:var(--x);
  top:var(--y);
  pointer-events:auto;
  transition:transform .55s var(--ease);
  animation:bob 9s var(--d,0s) ease-in-out infinite;
}
.portrait__head{
  width:var(--s);
  height:var(--s);
  object-fit:cover;
  z-index:1;
  transform:rotate(var(--r));
}
.portrait__head--flip{transform:rotate(var(--r)) scaleX(-1)}
.portrait__hat{
  width:var(--w);
  height:var(--h);
  object-fit:cover;
  z-index:3;
  transform:rotate(calc(var(--r) + var(--tilt,0deg)));
  transform-origin:50% 92%;
}

/* hover: the hat tips, the head leans in */
.portrait:hover .portrait__hat{
  transform:rotate(calc(var(--r) + var(--tilt,0deg) - 9deg)) translateY(-14px) scale(1.03);
  animation-play-state:paused;
}
.portrait:hover .portrait__head{
  transform:rotate(var(--r)) translateY(3px) scale(1.015);
  animation-play-state:paused;
}
.portrait:hover .portrait__head--flip{
  transform:rotate(var(--r)) scaleX(-1) translateY(3px) scale(1.015);
}

@keyframes bob{
  0%,100%{translate:0 0}
  50%{translate:0 -7px}
}

.hero__fade{
  position:absolute;inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(180.9deg,rgba(255,255,255,0) 50%,#000 112%);
  mix-blend-mode:multiply;
}

/* ============================================================
   WORDMARK BAND
   ============================================================ */
.band{
  background:#000;
  padding:22px 20px 30px;
  display:flex;
  justify-content:center;
  overflow:hidden;
}
.wordmark{
  margin:0;
  font-weight:900;
  font-style:italic;
  font-size:clamp(30px,4.2vw,60px);
  line-height:1;
  letter-spacing:-.01em;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  padding:.08em .12em;
}
.wordmark>span{
  display:inline-block;
  animation:wordUp 1s var(--ease-out-back) both;
}
@keyframes wordUp{
  from{transform:translateY(115%) skewX(-6deg);opacity:0}
  to{transform:none;opacity:1}
}
/* light sweep on hover */
.wordmark::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,182,18,.55) 50%,transparent 62%);
  transform:translateX(-110%);
  pointer-events:none;
}
.wordmark:hover::after{animation:sweep 1s var(--ease)}
@keyframes sweep{to{transform:translateX(110%)}}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;
  top:0;
  z-index:60;
  background:#fff;
  border-bottom:1px solid #000;
  transition:box-shadow .3s var(--ease);
}
.nav.is-stuck{box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}
.nav__inner{
  height:60px;
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(14px,3vw,45px);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(14px,2vw,28px);
}

/* search */
.search{
  display:flex;
  align-items:center;
  gap:9px;
  height:30px;
  width:203px;
  max-width:42vw;
  padding:0 14px;
  border-radius:33px;
  background:var(--grey-card);
  border:1px solid transparent;
  transition:width .38s var(--ease),background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.search:hover{background:#e4e4e4}
.search:focus-within{
  width:290px;
  background:#fff;
  border-color:#000;
  box-shadow:0 0 0 3px rgba(0,119,192,.18);
}
.search__icon{width:15px;height:15px;flex:none;color:#000;transition:transform .3s var(--ease)}
.search:focus-within .search__icon{transform:scale(1.15) rotate(-12deg)}
.search__input{
  flex:1;min-width:0;
  border:0;background:none;outline:none;
  font:500 15px/1 "Montserrat",sans-serif;
  color:#000;
}
.search__input::placeholder{color:#000;opacity:.85}
.search__input::-webkit-search-cancel-button{-webkit-appearance:none}

/* icon cluster */
.nav__icons{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
.nav__icon{
  position:relative;
  display:grid;place-items:center;
  height:30px;
  color:#000;
  transition:transform .3s var(--ease-out-back),opacity .2s linear;
}
.nav__icon svg{height:26px;width:auto;display:block}
.nav__sprite{
  display:block;
  width:var(--iw);
  height:30.267px;
  overflow:hidden;
}
.nav__sprite img{
  width:136.891px;
  height:30.267px;
  max-width:none;
  margin-left:var(--ix);
}
.nav__icon:hover{transform:translateY(-3px) scale(1.12)}
.nav__icon:active{transform:translateY(0) scale(.96)}
.nav__badge{
  position:absolute;
  top:-4px;right:-8px;
  min-width:16px;height:16px;
  padding:0 4px;
  border-radius:8px;
  background:var(--blue);
  color:#fff;
  font-size:10px;font-weight:700;line-height:16px;
  text-align:center;
  transform:scale(0);
  transition:transform .3s var(--ease-out-back);
}
.nav__icon:hover .nav__badge{transform:scale(1)}

.nav__progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.nav__progress i{
  display:block;height:100%;width:0;
  background:var(--blue);
  transition:width .1s linear;
}

/* ============================================================
   MERCH
   ============================================================ */
.merch{background:#fff;padding:45px var(--shell-pad)}
.merch__inner{
  max-width:var(--shell);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:90px;
}
.merch__inner--tight{gap:50px}

.merch__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:1291px;
  width:100%;
  margin:0 auto;
}
.merch__title h2{
  margin:0;
  font-weight:800;
  font-style:italic;
  font-size:clamp(21px,2.05vw,29.565px);
  line-height:.89;
  letter-spacing:-.01em;
}
.sortby{
  font-weight:800;
  font-style:italic;
  font-size:clamp(15px,1.4vw,20px);
  line-height:.89;
  letter-spacing:.01em;
  display:inline-flex;
  align-items:center;
  gap:.35em;
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.sortby__plus{display:inline-block;transition:transform .4s var(--ease-out-back)}
.sortby:hover{color:var(--blue)}
.sortby:hover .sortby__plus{transform:rotate(135deg)}

.grid{
  display:grid;
  gap:11.065px;
  width:100%;
  margin:0 auto;
}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ── product card ─────────────────────────────────────────── */
.card{display:flex;flex-direction:column;gap:11.987px;align-items:center}

.card__frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:324.564/400.401;
  overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  will-change:transform;
}
.card__bg{position:absolute;inset:0;background:var(--bg);transition:filter .45s var(--ease)}
.card__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  transition:transform .7s var(--ease);
  will-change:transform;
}
.card__img--cover{object-fit:cover}
.card__img--crop{
  max-width:none;
  position:absolute;
  inset:auto auto auto -17.6%;
  top:16.35%;
  width:135.2%;
  height:73.05%;
  object-fit:cover;
}
.card__cart{
  position:absolute;
  top:7.63px;
  right:2.14%;
  display:grid;place-items:center;
  width:28.041px;
  transform-origin:70% 30%;
  transition:transform .4s var(--ease-out-back),opacity .3s linear;
  opacity:.9;
}
.card__cart img{width:100%;height:auto}

.card__frame:hover{transform:translateY(-8px);box-shadow:0 24px 40px -22px rgba(0,0,0,.45)}
.card__frame:hover .card__img{transform:scale(1.07)}
.card__frame:hover .card__img--crop{transform:scale(1.07)}
.card__frame:hover .card__bg{filter:brightness(.96)}
.card__frame:hover .card__cart{transform:scale(1.22) rotate(-8deg);opacity:1}
.card__frame:hover .card__frame:active{transform:translateY(-3px) scale(.995)}

.card__meta{text-align:center;display:flex;flex-direction:column;gap:16.6px}
.card__name{
  margin:0;
  font-weight:500;
  font-size:14.753px;
  line-height:1.15;
}
.card__name span{
  position:relative;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .4s var(--ease);
  padding-bottom:2px;
}
.card:hover .card__name span{background-size:100% 1px}
.card__price{
  margin:0;
  font-weight:300;
  font-style:italic;
  font-size:14.753px;
  line-height:1.1;
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.card:hover .card__price{color:var(--blue);transform:translateY(-1px)}

/* ============================================================
   FEATURED PRODUCT
   ============================================================ */
.featured{background:var(--cream);padding:50px clamp(20px,4vw,60px)}
.featured__inner{
  max-width:1250px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(32px,4.5vw,65px);
}

.book{position:relative;flex:0 1 592.732px;perspective:1400px}
.book__frame{
  aspect-ratio:592.732/794.77;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .6s var(--ease);
  will-change:transform;
}
.book__frame img{
  max-width:none;
  width:159.61%;
  height:119.04%;
  margin-left:-28.98%;
  margin-top:-12%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.book:hover .book__frame{
  transform:rotateY(-6deg) rotateX(2deg) translateY(-10px);
}
.book:hover .book__frame img{transform:scale(1.04)}

.book__badge{
  position:absolute;
  left:77.2%;
  top:2.29%;
  width:23.33%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--blue-badge);
  animation:badgeFloat 6s ease-in-out infinite;
  transition:transform .5s var(--ease-out-back),box-shadow .5s var(--ease);
}
@keyframes badgeFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -10px}
}
.book:hover .book__badge{
  transform:scale(1.12);
  box-shadow:0 0 0 14px rgba(3,112,255,.16);
}

.featured__info{
  flex:0 1 519.196px;
  display:flex;
  flex-direction:column;
  gap:clamp(38px,5vw,76px);
}
.featured__copy{
  display:flex;
  flex-direction:column;
  gap:clamp(20px,2.5vw,36px);
}
.eyebrow{
  margin:0;
  font-weight:700;
  font-size:clamp(15px,1.5vw,21px);
  line-height:1.5;
  letter-spacing:.25em;
  color:var(--blue);
}
.featured__h{
  margin:0;
  font-weight:700;
  font-size:clamp(32px,3.6vw,50px);
  line-height:.95;
  letter-spacing:-.03em;
  color:var(--green-deep);
}
.featured__body{
  margin:0;
  font-weight:400;
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.43;
  letter-spacing:-.03em;
  color:var(--green-hero);
}
.cta{
  align-self:flex-start;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 25px;
  border-radius:29px;
  background:var(--green-deep);
  color:#fff;
  overflow:hidden;
  transition:transform .35s var(--ease-out-back),box-shadow .35s var(--ease);
}
.cta>span{
  position:relative;z-index:2;
  font-weight:700;
  font-size:16px;
  line-height:1.25;
  letter-spacing:.1em;
  transition:letter-spacing .35s var(--ease),color .35s var(--ease);
}
.cta::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:120%;aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  background:#000;
  transform:scale(0);
  transition:transform .5s var(--ease);
}
.cta:hover{transform:translateY(-3px);box-shadow:0 16px 26px -14px rgba(0,71,27,.75)}
.cta:hover::before{transform:scale(1)}
.cta:hover>span{letter-spacing:.16em}
.cta:active{transform:translateY(-1px) scale(.98)}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{background:var(--green-deep);padding:94px clamp(20px,4vw,60px) 120px}
.reviews__inner{
  max-width:1104px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:94px;
}
.reviews__head{text-align:center;color:var(--cream)}
.reviews__kicker{
  margin:0 0 20px;
  font-weight:900;
  font-style:italic;
  font-size:clamp(26px,3vw,40px);
  line-height:1.05;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.reviews__sub{
  margin:0 0 10px;
  font-weight:400;
  font-size:clamp(22px,2.8vw,40px);
  line-height:1;
}
.reviews__note{
  margin:0;
  font-weight:400;
  font-style:italic;
  font-size:clamp(17px,2.1vw,30px);
  line-height:.95;
}

.reviews__list{
  width:100%;
  max-width:1042px;
  display:flex;
  flex-direction:column;
  gap:37px;
}
.review{display:flex;flex-direction:column;align-items:center;gap:50px}
.review__row{
  display:flex;
  align-items:center;
  gap:clamp(20px,4vw,57.19px);
  width:100%;
  max-width:974.729px;
}
.review__row--top{align-items:flex-start}
.review__avatar{
  flex:none;
  width:clamp(84px,12vw,172.81px);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  transition:transform .45s var(--ease-out-back),box-shadow .45s var(--ease);
}
.review__avatar img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.review:hover .review__avatar{transform:scale(1.06) rotate(-2deg);box-shadow:0 0 0 6px rgba(238,225,198,.22)}
.review:hover .review__avatar img{transform:scale(1.08)}

.review__body{display:flex;flex-direction:column;gap:20px;min-width:0;flex:1}
.review__stars{
  width:clamp(140px,15vw,218.937px);
  height:auto;
  transform-origin:left center;
  transition:transform .4s var(--ease-out-back);
}
.review.is-in .review__stars{animation:starsIn .7s var(--ease-out-back) .15s both}
@keyframes starsIn{
  from{opacity:0;transform:scale(.85) translateX(-10px)}
  to{opacity:1;transform:none}
}
.review:hover .review__stars{transform:scale(1.04)}

.review__quote{
  margin:0;
  color:#fff;
  font-weight:400;
  font-size:clamp(17px,1.95vw,28px);
  line-height:1.15;
}
.review__quote p{margin:0 0 1.15em}
.review__quote p:last-child{margin-bottom:0}
.review__quote a{
  color:var(--blue-link);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .25s var(--ease),text-underline-offset .25s var(--ease);
}
.review__quote a:hover{color:#fff;text-underline-offset:6px}

.review__who{margin:0;color:#fff;letter-spacing:-.03em}
.review__who b{
  display:block;
  font-weight:700;
  font-size:clamp(17px,1.95vw,28px);
  line-height:1.15;
}
.review__who i{
  display:block;
  font-weight:300;
  font-style:italic;
  font-size:clamp(16px,1.95vw,28px);
  line-height:1.15;
}

.review__rule{
  display:block;
  height:1px;
  width:100%;
  align-self:stretch;
  background:var(--cream);
  transform-origin:left center;
  transition:transform .9s var(--ease) .1s;
}

/* ── leave a review ─────────────────────────────────────── */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.composer{width:100%;max-width:1040px}
.leave{
  background:#fff;
  border-radius:35px;
  padding:20px;
  transition:border-radius .35s var(--ease),box-shadow .35s var(--ease);
}
.composer.is-open .leave{
  border-radius:26px;
  box-shadow:0 0 0 4px rgba(238,225,198,.35);
}
.leave__bar{display:flex;align-items:center;gap:14px}
.leave__input{
  flex:1;min-width:0;
  border:0;outline:none;resize:none;
  background:none;
  font:500 clamp(15px,1.4vw,20px)/1.35 "Montserrat",sans-serif;
  color:#000;
  max-height:260px;
  overflow-y:auto;
}
.leave__input::placeholder{color:#000;opacity:.32}
.leave__post{
  flex:none;
  padding:11px 22px;
  border-radius:24px;
  background:var(--green-deep);
  color:#fff;
  font-weight:700;
  font-size:14px;
  letter-spacing:.1em;
  opacity:0;
  transform:translateX(14px) scale(.9);
  pointer-events:none;
  transition:opacity .3s var(--ease),transform .35s var(--ease-out-back),background .25s var(--ease);
}
.composer.is-open .leave__post{opacity:1;transform:none;pointer-events:auto}
.leave__post:hover{background:#000}
.leave__post:active{transform:scale(.96)}
.leave__post:disabled{opacity:.55;cursor:default}
.leave__post.is-done{background:var(--blue)}

/* the drawer holding rating, name and role */
.leave__more{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .4s var(--ease),opacity .3s var(--ease),margin-top .4s var(--ease);
  margin-top:0;
}
.leave__more>*{overflow:hidden;min-height:0}
.composer.is-open .leave__more{
  grid-template-rows:1fr;
  opacity:1;
  margin-top:18px;
}
/* no padding or border here: this box collapses to 0, and a border
   box cannot shrink below its own padding + border */
.leave__drawer{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* star picker: DOM runs 5→1 and the row is reversed, so
   `input:checked ~ label` fills that star and everything below it */
.rating{border:0;border-top:1px solid rgba(0,0,0,.1);margin:0;padding:18px 0 0}
.rating__stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:7px}
.rating input{position:absolute;opacity:0;width:0;height:0}
.rating label{
  cursor:pointer;
  color:rgba(0,0,0,.16);
  transition:color .15s linear,transform .25s var(--ease-out-back);
}
.rating label svg{display:block;width:26px;height:auto;fill:currentColor}
.rating input:checked ~ label{color:var(--yellow)}
.rating__stars:hover input:checked ~ label{color:rgba(0,0,0,.16)}
.rating label:hover,
.rating label:hover ~ label{color:var(--yellow)}
.rating label:hover{transform:scale(1.18)}
.rating input:focus-visible + label{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

.leave__fields{display:flex;flex-wrap:wrap;gap:14px}
.field{flex:1 1 200px;display:flex;flex-direction:column;gap:6px}
.field__label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.field__label em{font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
.field__input{
  border:0;
  border-bottom:1px solid rgba(0,0,0,.2);
  background:none;
  padding:6px 2px;
  font:500 16px/1.2 "Montserrat",sans-serif;
  color:#000;
  outline:none;
  transition:border-color .25s var(--ease);
}
.field__input:focus{border-bottom-color:var(--green-deep)}

.leave__foot{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:13px;
}
.leave__note{font-weight:500}
.leave__note.is-warn{color:#b3261e}
.leave__note.is-ok{color:var(--green-deep)}
.leave__count{opacity:.45;font-variant-numeric:tabular-nums;flex:none}

.leave__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── visitor-submitted reviews ──────────────────────────── */
.review__avatar--monogram{
  display:grid;
  place-items:center;
  background:var(--tone,var(--cream));
  color:var(--green-deep);
  font-weight:800;
  font-size:clamp(28px,4vw,58px);
  letter-spacing:-.02em;
  line-height:1;
}
.review__stars--live{display:flex;gap:7px;align-items:center}
.review__stars--live svg{
  width:clamp(22px,2.4vw,37px);
  height:auto;
  fill:var(--yellow);
  flex:none;
}
.review__stars--live svg.is-empty{fill:rgba(238,225,198,.25)}

.review--new{animation:reviewIn .6s var(--ease) both}
@keyframes reviewIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* ============================================================
   PHILOSOPHIES
   ============================================================ */
.philo{
  position:relative;
  background:#000;
  min-height:735px;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:100px clamp(20px,4vw,60px) 140px;
  isolation:isolate;
}
.philo__art{
  position:absolute;
  right:clamp(0px,10vw,144px);
  top:0;
  bottom:0;
  width:min(670.153px,46.5%);
  z-index:0;
  pointer-events:none;
}
.philo__art img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
  animation:brainPulse 11s ease-in-out infinite;
  transform-origin:60% 50%;
}
@keyframes brainPulse{
  0%,100%{transform:scale(1);opacity:.94}
  50%{transform:scale(1.05);opacity:1}
}
.philo__art::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 22%,transparent 55%);
}

.philo__inner{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  width:100%;
  padding-left:clamp(20px,10.3vw,148px);
}
.philo__kicker{
  margin:0 0 24px;
  font-weight:300;
  font-style:italic;
  font-size:clamp(30px,4.3vw,60.941px);
  line-height:.83;
  color:#fff;
}
.philo__quote{
  margin:0;
  position:relative;
  max-width:700px;
  padding-left:clamp(26px,7.3vw,105px);
  font-weight:900;
  font-style:italic;
  font-size:clamp(30px,3.75vw,54px);
  line-height:.83;
  color:var(--yellow);
}
.philo__text{display:inline}
.philo__mark{
  font-weight:900;
  font-style:italic;
  font-size:clamp(30px,3.75vw,54px);
  line-height:.83;
  color:#fff;
}
.philo__mark--open{position:absolute;left:clamp(2px,5.8vw,84px);top:0}
.philo__mark--close{display:inline-block;rotate:180deg;translate:0 -.22em;margin-left:.06em}

.philo__caption{
  position:absolute;
  right:clamp(20px,7.8vw,112px);
  bottom:206px;
  z-index:2;
  margin:0;
  width:231px;
  max-width:40vw;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
  font-weight:400;
  font-style:italic;
  font-size:clamp(16px,1.8vw,25.321px);
  line-height:1.05;
  color:var(--blue-caption);
  text-align:left;
}

.philo__scroll{
  position:absolute;
  left:50%;
  bottom:52px;
  translate:-50% 0;
  z-index:3;
  width:88.65px;
  animation:arrowNudge 2.4s var(--ease) infinite;
  transition:opacity .25s linear,transform .3s var(--ease);
  opacity:.85;
}
.philo__scroll img{width:100%;height:auto;filter:invert(1) brightness(2)}
.philo__scroll:hover{opacity:1;transform:scale(1.08)}
@keyframes arrowNudge{
  0%,100%{translate:-50% 0}
  50%{translate:-50% 8px}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:#000;color:#fff;padding-top:66px;position:relative}
.footer__cols{
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(20px,5.8vw,84px);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
}
.footer__nav,.footer__social{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.footer__social{text-align:right}
.footer__nav a,.footer__social a{
  display:inline-block;
  font-weight:500;
  font-size:clamp(16px,1.5vw,20px);
  line-height:.89;
  transition:color .25s var(--ease),transform .3s var(--ease);
}
.footer__nav a{position:relative;padding-left:0}
.footer__nav a::before{
  content:"→";
  position:absolute;
  left:-1.15em;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  color:var(--blue);
}
.footer__nav a:hover{color:var(--blue);transform:translateX(10px)}
.footer__nav a:hover::before{opacity:1;transform:translateX(0)}
.footer__social a:hover{color:var(--blue);transform:translateX(-8px)}

.footer__bar{
  height:10px;
  background:var(--blue);
  margin-top:34px;
  transform-origin:left center;
  transition:transform 1.1s var(--ease);
}
.footer__copy{
  margin:0;
  padding:38px 20px 42px;
  text-align:center;
  font-weight:400;
  font-size:16px;
  line-height:.89;
  opacity:.85;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .merch__inner{gap:60px}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reviews__inner{gap:64px}
}

@media (max-width:1080px){
  .featured__inner{flex-direction:column}
  .book{flex:0 1 auto;width:min(520px,100%)}
  .featured__info{flex:0 1 auto;width:100%;max-width:620px}
  .philo__art{width:62%;opacity:.65}
  .philo__caption{position:static;margin-top:56px;max-width:none}
}

@media (max-width:900px){
  .hero{height:250px;--k:.73}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review__row,.review__row--top{align-items:flex-start}
  .philo{min-height:0;padding:80px clamp(20px,4vw,60px) 120px}
}

@media (max-width:680px){
  .hero{height:206px;--k:.6}
  .band{padding:18px 16px 22px}
  .nav__inner{justify-content:space-between}
  .search{width:100%;max-width:none;flex:1}
  .search:focus-within{width:100%}
  .merch{padding:30px 20px}
  .merch__inner{gap:42px}
  .grid--3{grid-template-columns:1fr}
  .reviews{padding:60px 20px 80px}
  .reviews__inner{gap:48px}
  .reviews__list{gap:30px}
  .review{gap:30px}
  .review__row{flex-direction:column;align-items:flex-start;gap:18px}
  .review__body{gap:14px}
  .leave{flex-direction:column;align-items:stretch;border-radius:24px}
  .leave__post{align-self:flex-end}
  .footer{padding-top:44px}
  .footer__cols{flex-direction:column;gap:34px}
  .footer__social{text-align:left}
  .footer__social a:hover{transform:translateX(10px)}
  .footer__bar{margin-top:40px}
}

@media (max-width:420px){
  .grid--4{grid-template-columns:1fr}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .hero__track{animation:none;transform:scale(var(--k))}
  .js .reveal{opacity:1;transform:none}
  .js .review__rule,.js .footer__bar{transform:scaleX(1)}
}