/* The 16 reference styles. Every section is self-contained: .x-<name>. */
.x-play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); flex: none; }
.x-play svg { width: 22px; fill: #fff; margin-left: 3px; }
[data-slide][hidden] { display: none !important; }

/* ---------------- 10 Nike 07 */
.x-num { position: relative; height: max(600px, 88svh); overflow: hidden; background: var(--bg); color: var(--ink); }   /* the same paper as every other section */
.x-num-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 7vw; min-width: 60px; background: var(--ink); color: var(--bg); display: grid; place-items: center; }
.x-num-bar span { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 14px var(--body); letter-spacing: .5em; }
.x-num-left { position: absolute; z-index: 3; left: calc(7vw + 50px); top: 16%; max-width: 330px; }
.x-num-left h2 { font: 400 clamp(46px, 5vw, 76px)/1 'Anton', sans-serif; letter-spacing: .02em; margin: 0 0 14px; }
.x-num-left p { font-size: 14px; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.x-num-left > a { display: inline-block; border: 1px solid currentColor; padding: 6px 22px; font: 600 var(--tiny) var(--body); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; }
.x-num-menu { margin-top: 70px; display: grid; gap: 14px; justify-items: center; width: 220px; }
.x-num-menu small { font: 600 var(--tiny) var(--body); letter-spacing: .3em; }
.x-num-menu b { font: 600 18px var(--body); letter-spacing: .35em; }
.x-num-slide { position: absolute; inset: 0; animation: xfade .6s var(--ease); }
.x-num-big { position: absolute; left: 44%; top: 50%; transform: translateY(-54%); font: 400 clamp(260px, 36vw, 560px)/1 'Anton', sans-serif; color: color-mix(in srgb, var(--ink) 18%, var(--bg)); letter-spacing: .02em; }
.x-num-fig { position: absolute; z-index: 2; left: 52%; bottom: 0; height: 90%; }
.x-num-fig picture, .x-num-fig img { height: 100%; width: auto; }
.x-num-name { position: absolute; z-index: 3; right: 5vw; top: 14%; font: 600 13px var(--mono); max-width: 220px; text-align: right; }
.x-num-pager { position: absolute; z-index: 4; right: 6vw; bottom: 7%; display: flex; align-items: center; gap: 16px; font: 400 28px 'Anton', sans-serif; color: color-mix(in srgb, var(--ink) 45%, var(--bg)); }
.x-num-pager i { width: 110px; height: 1px; background: color-mix(in srgb, var(--ink) 35%, transparent); }
.x-num-pager b { color: var(--ink); font-weight: 400; font-size: 44px; }
.x-num-pager button { background: none; border: 0; font-size: 18px; color: color-mix(in srgb, var(--ink) 72%, transparent); cursor: pointer; }

/* ---------------- 04 Lees Ferry */
.x-bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, 21vw); }
.x-bt { position: relative; overflow: hidden; display: grid; place-items: center; text-decoration: none; color: #fff; }
.x-bt picture { position: absolute; inset: 0; } .x-bt img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transition: transform 1s var(--ease); }   /* never crop a head off */
.x-bt:hover img { transform: scale(1.05); }
.x-bt::after { content: ''; position: absolute; inset: 0; background: var(--tint); mix-blend-mode: multiply; opacity: .7; }
.x-bt.bw img { filter: grayscale(1); } .x-bt.bw::after { opacity: .3; }
.x-bt.big { grid-column: span 2; grid-row: span 2; }
.x-bt span { position: relative; z-index: 2; font: 600 clamp(16px, 1.8vw, 24px) var(--mono); letter-spacing: .25em; border-bottom: 1.5px solid; padding-bottom: 8px; text-align: center; }
.x-stat, .x-tip { display: grid; place-content: center; text-align: center; color: #fff; padding: 20px; position: relative; overflow: hidden; }
.x-stat small, .x-tip small { font: 500 12px var(--mono); letter-spacing: .25em; text-transform: uppercase; opacity: .85; }
/* "confirmed by hand" stands in a red box of its own, under GCash · BDO
   (her word, 11 Oct 2026). It is the line that follows GCash · BDO — named
   that way rather than "the last small", which picked up one in the dialog. */
.x-bento-pay .x-stat > b + small {
  justify-self: center;
  /* her red — the one behind "Wear what you stand for" at the foot of the home
     page (her word, 11 Oct 2026) */
  background: #AE2012;
  color: #EAE2B7;
  opacity: 1;
  padding: 8px 14px;
  border-radius: 4px;
  margin-top: 10px;
}
.x-stat b { font: 300 clamp(48px, 6vw, 96px)/1.1 'Outfit', sans-serif; font-weight: 500; margin: 8px 0; }
.x-stat.wide { grid-column: span 2; }
.x-stat.wide.img { grid-column: 1 / -1; }
.x-stat.img { background: #000; }
/* Her word, 7 Oct 2026: "kita sana ang mukha at shirt design." The band was a
   short strip off the top of a 16:9 photograph, so it held the plants and the
   tops of their heads and cut the shirts away. It is taller now, and framed on
   the band of the picture where the faces and the prints both are, and the
   photograph is no longer washed out to a half — the words keep their footing
   on a dark veil of their own instead. */
.x-bento-pay .x-stat.img { min-height: clamp(360px, 34vw, 480px); }
.x-stat.img picture { position: absolute; inset: 0; opacity: .55; } .x-stat.img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.x-bento-pay .x-stat.img picture { opacity: .82; }
/* the frame starts just above their heads, so the words have the leaves to sit
   on and the faces and the prints are both still in it (her word, 7 Oct 2026) */
.x-bento-pay .x-stat.img img { object-position: 50% 30%; }   /* 9 Oct 2026, hers: the empty top cropped away — the frame starts at their heads and reaches the prints; size unchanged */
/* the words stay at the top where they have always been, over the leaves */
.x-bento-pay .x-stat.img { place-content: start center; padding-top: clamp(26px, 3.4vw, 48px); }
.x-bento-pay .x-stat.img::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,18,28,.74) 0%, rgba(0,18,28,.42) 28%, rgba(0,18,28,.05) 56%, transparent 72%); }
.x-stat.img > *:not(picture) { position: relative; }
.x-bento-pay .x-stat.img > *:not(picture) { z-index: 2; }
.x-tip { background: var(--mint); color: var(--navy); grid-row: span 2; }   /* her mint reads dark, so the words go navy */
.x-tip p { font: 500 17px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin: 24px 0; }
.x-tip button { background: none; border: 0; color: var(--navy); font: 500 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; }

/* ---------------- 15 LOST */
.x-drops { position: relative; min-height: max(640px, 96svh); background: color-mix(in srgb, var(--navy) 18%, var(--cream)); overflow: hidden; }
.x-drops-img { position: absolute; left: 0; top: 0; bottom: 0; width: 64%; }
.x-drops-img picture, .x-drops-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) saturate(.8) contrast(1.05);  object-position: 50% 0%;   /* never crop a head off */ }
.x-drops-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, color-mix(in srgb, var(--navy) 18%, var(--cream))); }
.x-drops-title { position: absolute; right: 4vw; top: 50px; text-align: right; }
.x-drops-title h2 { font: 400 clamp(46px, 6vw, 96px)/1 'Rubik Distressed', var(--display); margin: 0; }
.x-drops-title p { font: 600 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; margin: 6px 0 0; }
.x-drops-list { position: relative; z-index: 2; list-style: none; margin: 0; padding: 110px 0 110px 26%; display: grid; gap: 10px; }
.x-drops-list li { margin-left: var(--off); }
.x-drops-list a { display: inline-block; background: color-mix(in srgb, var(--navy) 10%, var(--cream)); color: var(--navy); padding: 8px 60px 8px 22px; font: 600 14px var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; clip-path: polygon(0 0, 100% 0, 97% 50%, 100% 100%, 0 100%, 2% 50%); transition: background .2s, transform .3s var(--ease); }
.x-drops-list a:hover { background: #111; color: #fff; transform: translateX(8px); }
.x-drops-list time { margin-right: 14px; }
.x-drops-foot { position: absolute; right: 4vw; bottom: 30px; font: 600 var(--tiny) var(--mono); letter-spacing: .1em; }

/* ---------------- 05 Reviva */
.x-retro { background: var(--bg); color: var(--tx); padding-bottom: 60px; }
.x-retro-hero { position: relative; height: max(560px, 86svh); overflow: hidden; }
.x-retro-hero > picture, .x-retro-hero > picture img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.x-retro-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,24,34,.85), transparent 60%); }
.x-retro-copy { position: absolute; z-index: 2; left: 5vw; top: 50%; transform: translateY(-50%); max-width: 720px; }
/* the photo at its own size: words on the left, a framed photo on the right */
.x-retro-hero.is-card { height: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(24px, 5vw, 70px);
  padding: clamp(46px, 6vw, 90px) var(--edge); overflow: visible; }
.x-retro-hero.is-card::after { display: none; }
.x-retro-hero.is-card > picture { order: 2; display: block; width: min(var(--shot), 52vw); height: auto; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(0,18,25,.65); }
.x-retro-hero.is-card > picture img { width: 100%; height: auto; max-height: min(74vh, 620px); object-fit: cover; object-position: 50% 0%; }
.x-retro-hero.is-card .x-retro-copy { position: static; transform: none; max-width: 46ch; }
.x-retro-hero.is-card .x-retro-copy h2 { font-size: clamp(40px, 4.6vw, 82px); line-height: .92; }
.x-retro-hero.is-card .x-retro-copy em { font-size: clamp(22px, 2.2vw, 34px); }
@media (max-width: 900px) {
  .x-retro-hero.is-card { grid-template-columns: 1fr; }
  .x-retro-hero.is-card > picture { order: 0; width: min(var(--shot), 100%); justify-self: center; }
}
.x-retro-copy em { font: 400 clamp(26px, 3vw, 44px) 'Yellowtail', cursive; }
.x-retro-copy h2 { font: 400 clamp(70px, 10vw, 170px)/.86 'Anton', sans-serif; margin: 4px 0 18px; text-transform: uppercase; }
.x-retro-copy h2 span { display: block; }
.x-retro-copy p { max-width: 380px; font-size: 16px; }
.x-retro-btn { display: inline-block; background: var(--ac); color: #fff; padding: 14px 30px; font: 400 20px 'Anton', sans-serif; letter-spacing: .06em; text-decoration: none; box-shadow: 4px 4px 0 var(--tx); border-radius: 6px; }
.x-retro-perks { list-style: none; margin: 0; padding: 30px var(--edge); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; border-bottom: 1px solid rgba(255,230,204,.15); }
.x-retro-perks li { display: flex; gap: 12px; align-items: center; }
.x-retro-perks i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ac); color: #fff; font-style: normal; flex: none; }
.x-retro-perks b { display: block; font-size: 16px; } .x-retro-perks small { opacity: .7; font-size: 13px; }
.x-retro-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 30px var(--edge) 18px; }
.x-rc { position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: var(--ac); text-decoration: none; display: block; }
.x-rc picture, .x-rc img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.x-rc > b { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; background: linear-gradient(transparent, rgba(8,24,34,.9)); font: 400 26px 'Anton', sans-serif; }
.x-rc > i { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--ac); display: grid; place-items: center; font-style: normal; color: #fff; }
.x-rc.new { background: rgba(255,230,204,.06); border: 1px solid rgba(255,230,204,.15); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.x-rc.new b { font: 400 36px/1 'Anton', sans-serif; }
.x-rc.new a { width: 38px; height: 38px; border-radius: 50%; background: var(--ac); color: #fff; display: grid; place-items: center; text-decoration: none; }
.x-retro-deals { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 18px; padding: 0 var(--edge); }
.x-rd { position: relative; display: block; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; text-decoration: none; }
.x-rd, .x-rd.mid { aspect-ratio: auto; height: clamp(380px, 38vw, 560px); }
.x-rd picture, .x-rd img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease);  object-position: 50% 0%;   /* never crop a head off */ }
.x-rd:hover img { transform: scale(1.04); }
.x-rd em { position: absolute; left: 16px; top: 14px; font: 400 24px/1 'Anton', sans-serif; font-style: normal; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.x-rd span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 60px 16px 14px; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.x-rd span b { font: 400 24px/1 'Anton', sans-serif; text-transform: uppercase; }

/* ---------------- phones */
@media (max-width: 860px) {
  .x-retro-perks, .x-retro-cats { grid-template-columns: 1fr 1fr; } .x-retro-deals { grid-template-columns: 1fr; } .x-rd.mid { aspect-ratio: 3/4; }
  .x-num-left { left: calc(7vw + 20px); top: 6%; } .x-num-menu { display: none; } .x-num-big { left: 20%; font-size: 70vw; } .x-num-fig { left: 34%; height: 70%; } .x-num-pager i { width: 30px; }
  .x-bento-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; }
  .x-drops-img { width: 100%; opacity: .5; } .x-drops-list { padding: 140px 4vw 80px; } .x-drops-list li { margin-left: calc(var(--off) / 3); } .x-drops-list a { padding-right: 24px; font-size: 12px; }
}

/* the Shop's own bento (22 Sep 2026): four photo tiles, then a row of numbers
   and words (GCash · BDO has its own tile above the footer) */
.x-bento-shop .x-tip { grid-row: auto; }
.x-bento-shop .x-tip p { font-size: 15px; margin: 16px 0; }
#yinyang, #rising-sun { scroll-margin-top: 90px; }
@media (max-width: 860px) {
  .x-bento-shop .x-stat.wide, .x-bento-shop .x-stat:nth-child(7) { grid-column: 1 / -1; }
  .x-bento-shop .x-tip { grid-column: 1 / -1; grid-row: span 2; }
}

/* The Shop bento keeps only her four tiles, so they sit two by two across
   (her word, 6 Oct 2026). */
.x-bento-shop .x-bento-grid { grid-template-columns: repeat(2, 1fr); }
.x-bento-shop .x-stat.wide, .x-bento-shop .x-tip.wide { grid-column: auto; }
@media (max-width: 800px) { .x-bento-shop .x-bento-grid { grid-template-columns: 1fr; } }
/* its row takes the band's own height, so the footer starts below the photo instead of over it (9 Oct 2026) */
.x-bento-pay .x-bento-grid { grid-auto-rows: auto; }

/* The empty space above their heads is cut at EVERY width, not just mine (her word, 9 Oct 2026):
   the photo is pinned so its top edge is 12.5% down the picture — just above the tallest head.
   (The picture's height is its width × 0.5625, so 12.5% of it is 7.03cqw of the band's width.) */
.x-bento-pay .x-stat.img { container-type: inline-size; }
.x-bento-pay .x-stat.img img { object-position: 50% calc(-7.88cqw); }
/* only when the band is taller than the photo's own shape (narrow phones) does the old frame apply */
@media (max-width: 640px) { .x-bento-pay .x-stat.img img { object-position: 50% 30%; } }
/* 300px tall, at every width (her word, 9 Oct 2026, after trying 200) — still starting just above their heads */
.x-bento-pay .x-stat.img { min-height: 0 !important; height: 300px !important; padding-top: 22px; }
@media (max-width: 640px) { .x-bento-pay .x-stat.img img { object-position: 50% calc(-7.88cqw); } }

/* raised again (her word, 9 Oct 2026): the photo now starts 14% down — the top of the tallest head touches the edge */
/* her own numbers from the control on the page: --pay-pos = how far down the photo the band starts (%),
   --pay-h = the band's height */
.x-bento-pay .x-stat.img { height: var(--pay-h, 300px) !important; }
.x-bento-pay .x-stat.img img { object-position: 50% calc(var(--pay-pos, 14) * -0.5625cqw) !important; }
/* On a phone the band is nearly as tall as it is wide, so the photograph fills
   it exactly and has no room to move up or down. Her "Photo up / down" number
   was shifting it anyway, which left a strip of the tile's black showing under
   it (her word, 10 Oct 2026). Read as a percentage it can only ever move
   within the photograph, so no black can appear. */
@media (max-width: 700px) {
  .x-bento-pay .x-stat.img img { object-position: 50% calc(var(--pay-pos, 14) * 1%) !important; }
  /* On a phone all four tiles are the height the three figures already were —
     one row, not two. The mint one had been asking for two and stood twice as
     tall as the rest (her word, 11 Oct 2026: follow the old size of 6 · 13). */
  .x-bento:not(.x-bento-pay) .x-tip { grid-row: auto; }
  /* 50px above the words and 50 below, inside each of the four coloured tiles
     (her word, 11 Oct 2026) — so the tile is 50 + the words + 50. */
  .x-bento:not(.x-bento-pay) .x-bento-grid { grid-auto-rows: 202px; }
}
.pb-tool { position: absolute; z-index: 20; right: 12px; top: 12px; width: 260px; padding: 14px; border-radius: 14px; background: #fff; color: #002438;
  box-shadow: 0 12px 34px rgba(0,0,0,.35); font: 500 13px/1.4 system-ui, sans-serif; text-align: left; }
.pb-tool b { display: block; font-weight: 700; margin-bottom: 8px; font-size: 13px; letter-spacing: 0; text-transform: none; }
.pb-tool label { display: block; margin: 8px 0; } .pb-tool input[type=range] { width: 100%; }
.pb-tool .pb-row { display: flex; gap: 8px; margin-top: 10px; } .pb-tool button { flex: 1; border: 0; border-radius: 999px; padding: 9px; font-weight: 700; cursor: pointer; }
.pb-tool .pb-save { background: #AE2012; color: #fff; } .pb-tool .pb-close { background: #EAE2B7; color: #002438; }
.pb-open { position: absolute; z-index: 20; right: 12px; top: 12px; border: 0; border-radius: 999px; padding: 8px 14px; background: #fff; color: #002438; font: 700 12px system-ui; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
/* the words dead center of the band, up and down and side to side (her word, 9 Oct 2026) */
.x-bento-pay .x-stat.img { place-content: center !important; justify-content: center !important; align-items: center !important; padding: 0 !important; }
/* her control floats in the corner and takes no room, so the words stay dead center for her too */
.x-bento-pay .x-stat.img > .pb-open, .x-bento-pay .x-stat.img > .pb-tool { position: absolute !important; right: 12px; top: 12px; grid-row: 1; }