/* The Casting Deck. Cards follow the home page deck: image, number and tag on top, a panel below. */
.ad-card-look{position:relative;aspect-ratio:4/5;background:var(--board);border:var(--line);overflow:hidden;color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:16px;text-align:left}
.ad-card-look>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ad-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-family:var(--mono);font-stretch:75%;font-size:11px;line-height:1.3}
.ad-n{background:var(--board);padding:2px 6px}
.ad-tag{background:var(--signal);color:var(--ink);padding:2px 6px;white-space:nowrap}
.ad-panel{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--board);border:var(--line);padding:12px}
.ad-title{font-family:var(--mono);font-stretch:112.5%;font-size:clamp(18px,1.7vw,24px);line-height:1.15;letter-spacing:-.03em}
.ad-word{font-family:var(--mono);font-stretch:75%;font-size:11px;line-height:1.3;color:var(--cobalt)}
.ad-say{font-size:14px;line-height:1.45}

/* first screen: two cards, fanned */
.ad-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:24px 48px;align-items:center;padding:48px 12px}
.ad-hero-t{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ad-kicker{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--cobalt)}
.ad-h1{font-family:var(--mono);font-stretch:112.5%;font-weight:200;font-size:clamp(48px,7.4vw,128px);line-height:.95;letter-spacing:-.06em}
.ad-lede{font-size:clamp(18px,1.7vw,24px);line-height:1.45;max-width:30rem}
.ad-fan{position:relative;height:clamp(420px,46vw,620px);--w:clamp(250px,25vw,370px)}
.ad-fan a{position:absolute;top:4%;left:50%;width:var(--w);margin-left:calc(var(--w) / -2);display:block;text-decoration:none;color:inherit;transition:transform var(--t-deal) var(--ease-draw)}
.ad-fan a:first-child{transform:translateX(-34%) rotate(-6deg)}
.ad-fan a:last-child{transform:translateX(34%) rotate(5deg) translateY(16px)}
.ad-fan a:first-child:hover{transform:translateX(-40%) rotate(-8deg);z-index:2}
.ad-fan a:last-child:hover{transform:translateX(40%) rotate(7deg) translateY(16px);z-index:2}
.ad-fan a:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}

/* the deck */
.ad-deck{padding:48px 12px;display:flex;flex-direction:column;gap:24px;scroll-margin-top:64px}
.ad-deck-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 48px;align-items:end}
.ad-switch{display:flex;width:fit-content;border:var(--line);margin-top:12px}
.ad-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ad-flip{all:unset;box-sizing:border-box;display:block;cursor:pointer;perspective:1400px;aspect-ratio:4/5;position:relative}
.ad-flip:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}
.ad-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s var(--ease-draw);transition-delay:calc(var(--i) * 45ms)}
.ad-flip.is-kaia .ad-inner{transform:rotateY(180deg)}
.ad-face{position:absolute;inset:0;aspect-ratio:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ad-face-k{transform:rotateY(180deg)}
.ad-flip:hover .ad-face{border-color:var(--cobalt)}
.ad-text{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:8px 4px;min-height:0}
.ad-face.is-text{background-color:var(--cobalt);color:#fff}
.ad-face.is-paper{background:#F4EEDD;color:#2A2118;background-image:none}
.ad-text-h{font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(20px,2vw,30px);line-height:1.1;letter-spacing:-.04em}
.ad-face.is-paper .ad-text-h{font-family:"Bodoni Moda",Georgia,serif;font-weight:900;letter-spacing:-.01em}
.ad-text ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.35}
.ad-rack-hint{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3}

/* worlds */
.ad-world{margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px);border-block:var(--line);display:flex;flex-direction:column;gap:24px;scroll-margin-top:44px}
.ad-world .cs-reels{margin-inline:calc((var(--edge) + 12px) * -1);border-bottom:0}
.ad-world-r{background:#E8DFC9;color:var(--ink);padding-bottom:0}
.ad-world-k{background:#111;color:#fff;padding-bottom:0}
.ad-world-k .cs-tag,.ad-world-k .cs-head,.ad-world-k .cs-body{color:#fff}
.ad-world-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 48px;align-items:start}
.ad-world-top .cs-tag{grid-column:1/-1}
.ad-rufus-mark{width:min(100%,640px);height:auto;display:block;mix-blend-mode:multiply}
.ad-kaia-mark{margin:0;font-family:"Bodoni Moda",Georgia,serif;font-weight:900;font-size:clamp(56px,14.4vw,280px);line-height:.9;letter-spacing:-.02em;white-space:nowrap;color:#fff}

/* comp card and lookbook */
.ad-comp{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);background:#F4EEDD;color:#2A2118;border:1.5px solid #fff}
.ad-comp img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
.ad-comp-t{padding:24px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.ad-comp-t dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 24px}
.ad-comp-t dt{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.5;color:#5E5044}
.ad-comp-t dd{margin:0;font-size:16px;line-height:1.35}
.ad-comp-h{margin:0;font-family:"Bodoni Moda",Georgia,serif;font-weight:900;font-size:clamp(28px,3.4vw,48px);line-height:1}
.ad-comp-t a{color:inherit}
.ad-looks{margin-inline:calc((var(--edge) + 12px) * -1);border-top:1.5px solid #fff}
.ad-looks .fig+.fig{border-left-color:#fff}
.ad-honest{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.4}

/* tools */
.ad-sec{padding:48px 12px;display:flex;flex-direction:column;gap:24px;scroll-margin-top:44px}
.ad-tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:var(--line);background:var(--board)}
.ad-tools li{padding:16px 12px;display:flex;flex-direction:column;gap:32px;justify-content:space-between;min-height:144px}
.ad-tools li+li{border-left:var(--line)}
.ad-tools b{font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(15px,1.3vw,20px);line-height:1.15;letter-spacing:-.03em;overflow-wrap:anywhere}
.ad-tools span{font-size:14px;line-height:1.35}

/* prices */
.ad-sec-blue{margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px);border-block:var(--line);color:#fff}
.ad-sec-blue .cs-tag,.ad-sec-blue .cs-head,.ad-sec-blue .cs-body{color:#fff}
.ad-prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ad-price{background:var(--board);color:var(--ink);border:var(--line);padding:16px;display:flex;flex-direction:column;gap:12px;min-height:256px}
.ad-price.is-lead{background:var(--signal)}
.ad-price-n{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3}
.ad-price-p{font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(24px,2.5vw,36px);line-height:1.05;letter-spacing:-.045em}
.ad-price-g{font-size:16px;line-height:1.4;flex:1}
.ad-price-u{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--quiet)}
.ad-price.is-lead .ad-price-u{color:var(--ink)}
.ad-notes{font-size:14px;line-height:1.5;max-width:44rem}
.cs-closer-panel .cs-statement{max-width:none}

@media(max-width:980px){
  .ad-hero,.ad-deck-top,.ad-world-top{grid-template-columns:1fr}
  .ad-hero,.ad-deck,.ad-sec{padding-block:24px}
  .ad-world,.ad-sec-blue{padding-block:24px}
  .ad-world-r,.ad-world-k{padding-bottom:0}
  .ad-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ad-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ad-tools li{border-top:var(--line);min-height:112px;gap:16px}
  .ad-tools li:nth-child(-n+2){border-top:0}
  .ad-tools li:nth-child(odd){border-left:0}
  .ad-prices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .ad-fan{height:400px;--w:220px}
  /* on a phone one card fills the width, so the words stay readable */
  .ad-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc((var(--edge) + 12px) * -1);padding-inline:calc(var(--edge) + 12px);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ad-grid::-webkit-scrollbar{display:none}
  .ad-flip{flex:0 0 82%;scroll-snap-align:center}
  .ad-comp{grid-template-columns:1fr}
  .ad-comp img{aspect-ratio:1/1}
  .ad-comp-t{padding:16px}
  .ad-prices{grid-template-columns:1fr}
  .ad-price{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .ad-inner{transition:none}
}

/* fixes after the first look: the template's own rules win on specificity */
.cs .ad-deck,.cs .ad-sec{gap:24px}
.cs .ad-world{gap:24px;margin-inline:calc(var(--edge) * -1)}
.cs .ad-sec-blue{margin-inline:calc(var(--edge) * -1)}
.ad-face .ad-panel,.ad-face .ad-n{color:var(--ink)}
.ad-fan{--w:clamp(230px,23vw,340px)}
.ad-fan a:first-child{transform:translateX(-50%) rotate(-5deg)}
.ad-fan a:last-child{transform:translateX(50%) rotate(4deg) translateY(16px)}
.ad-fan a:first-child:hover{transform:translateX(-54%) rotate(-7deg)}
.ad-fan a:last-child:hover{transform:translateX(54%) rotate(6deg) translateY(16px)}
.ad-kaia-mark{font-size:clamp(44px,13.2vw,256px)}
.ad-price:last-child{grid-column:span 2}
@media(max-width:767px){
  .ad-fan{--w:172px;height:300px}
  .ad-fan a:first-child{transform:translateX(-48%) rotate(-5deg)}
  .ad-fan a:last-child{transform:translateX(48%) rotate(4deg) translateY(12px)}
  .ad-fan .ad-say{display:none}
  .ad-fan .ad-panel{padding:8px}
  .ad-fan .ad-title{font-size:15px}
  .ad-fan .ad-card-look{padding:8px}
  .ad-price:last-child{grid-column:auto}
}

/* ---------- real deck and gallery ---------- */
.ad-head{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:16px 48px;align-items:end;padding:32px 12px}
.ad-head .ad-h1{font-size:clamp(44px,6.6vw,112px);margin-top:8px}
.ad-deck .deck-row{justify-content:center}
.ad-deck .ad-switch{margin:0}
.ad-deck .pager{margin-inline:auto}
.ad-deck #deckOpen[hidden]{display:none}
.ad-deck .deck-panel .ad-word{font-size:11px}
.cs .ad-deck{gap:16px}
.ad-world-k{padding-bottom:48px}
@media(max-width:980px){.ad-world-k{padding-bottom:24px}}

/* the issue strip deals in when you arrive */
.ad-issues{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc((var(--edge) + 12px) * -1);padding:12px calc(var(--edge) + 12px);scrollbar-width:none}
.ad-issues::-webkit-scrollbar{display:none}
.ad-issue{all:unset;box-sizing:border-box;position:relative;flex:1 0 104px;aspect-ratio:3/4;overflow:hidden;cursor:pointer;scroll-snap-align:start;border:1.5px solid rgba(255,255,255,.35);transition:transform var(--t-press),border-color var(--t-press),opacity .5s ease;transition-delay:0s}
.ad-issue img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.72);transition:filter var(--t-press)}
.ad-issue-t{position:absolute;left:6px;right:6px;bottom:6px;font-family:"Bodoni Moda",Georgia,serif;font-weight:900;font-size:clamp(12px,1vw,15px);line-height:1;color:#fff}
.ad-issue:hover img,.ad-issue[aria-pressed=true] img{filter:none}
.ad-issue:hover{transform:translateY(-4px)}
.ad-issue[aria-pressed=true]{border-color:var(--c);transform:translateY(-6px)}
.ad-issue[aria-pressed=true] .ad-issue-t{color:var(--c)}
.ad-issue:focus-visible{outline:2px solid #fff;outline-offset:2px}
.js .ad-world-k:not(.is-seen) .ad-issue{opacity:0;transform:translateY(32px) rotate(-3deg)}
.ad-world-k.is-seen .ad-issue{animation:ad-deal .6s var(--ease-draw) backwards;animation-delay:calc(var(--i) * 45ms)}
@keyframes ad-deal{from{opacity:0;transform:translateY(32px) rotate(-3deg)}}

/* the issue title takes the shoot's own colour */
.ad-mast{display:flex;flex-direction:column;gap:4px}
.ad-mast-t{margin:0;font-family:"Bodoni Moda",Georgia,serif;font-weight:900;font-size:clamp(44px,10.6vw,204px);line-height:.9;letter-spacing:-.01em;white-space:nowrap;color:var(--accent);transition:color .5s ease}
.ad-mast-s{margin:0;display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:#fff;border-top:1.5px solid var(--accent);padding-top:8px;transition:border-color .5s ease}
.ad-mast-l{margin:0;min-height:1.4em;font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(18px,1.8vw,26px);line-height:1.3;color:#fff}

/* the gallery: one tall tile and four beside it */
.ad-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(200px,24vw,380px);gap:8px;grid-auto-flow:dense}
.ad-tile{all:unset;box-sizing:border-box;position:relative;display:block;overflow:hidden;cursor:zoom-in;background:#222;min-width:0}
.ad-tile:first-child{grid-row:span 2;grid-column:span 2}
.ad-tile img,.ad-tile video{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;transition:transform .6s var(--ease-draw)}
.ad-tile:hover img,.ad-tile:hover video{transform:scale(1.035)}
.ad-tile:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ad-tile-tag{position:absolute;right:8px;top:8px;background:var(--signal);color:var(--ink);font-family:var(--mono);font-stretch:75%;font-size:11px;line-height:1.3;padding:2px 6px}
.ad-tiles.is-in .ad-tile{animation:ad-rise .55s var(--ease-draw) backwards;animation-delay:calc(var(--i) * 60ms)}
@keyframes ad-rise{from{opacity:0;transform:translateY(20px)}}
.ad-world-k .ad-honest{margin:0;color:#fff}
.ad-comp .p1{align-self:flex-start;margin-top:8px}
.ad-comp-t .p1{color:var(--ink)}

/* lightbox */
.ad-light{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100dvh;background:rgba(10,10,10,.94);color:#fff;overflow:hidden}
.ad-light[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ad-light::backdrop{background:rgba(10,10,10,.8)}
.ad-light-box{height:calc(100dvh - 88px);width:100%;display:flex;align-items:center;justify-content:center}
.ad-light-box img,.ad-light-box video{max-width:min(92vw,1000px);max-height:100%;object-fit:contain;display:block}
.ad-light-c{margin:0;display:flex;gap:12px;align-items:center;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3}
.ad-light .deck-arrow{position:absolute;color:var(--ink);width:44px;height:44px}
.ad-light-x{right:16px;top:16px}
.ad-light-p{left:16px;top:50%}
.ad-light-n{right:16px;top:50%}

@media(max-width:980px){
  .ad-head{grid-template-columns:1fr;padding-block:24px}
  .ad-tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:48vw}
  .ad-issue{flex:0 0 92px}
}
@media(prefers-reduced-motion:reduce){
  .ad-world-k.is-seen .ad-issue,.ad-tiles.is-in .ad-tile{animation:none}
  .js .ad-world-k:not(.is-seen) .ad-issue{opacity:1;transform:none}
}