/* Final benefit draft: one source group per card, original folder indices at the top. */
/* Lets the index color crossfade while its folder slides (custom properties don't animate otherwise). */
@property --index-paper { syntax: '<color>'; inherits: true; initial-value: #d8cdbf; }
.benefit {
  --rule: #d8cbbd;
  --sub: #766758;
  --sheet: #fbf8f2;
  --tab-h: calc(38px + env(safe-area-inset-top));
  --tab-w: 28%;
  --index-beige: #d8cdbf;
  /* Folder slide timing, shared by benefit-scroll.js (FOLD_MS) and the index tabs. */
  --fold-time: .42s;
  --fold-ease: cubic-bezier(.2,.7,.1,1);
  position: relative;
  color: var(--ink);
  background: transparent;
  word-break: keep-all;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
:where(.benefit) :where(h2,h3,h4,h5,p) { margin: 0; }
.benefit i { font-style: normal; }
.bn-index { position: relative; isolation: isolate; height: var(--view-h, calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom))); overflow: clip; }
.bn-channel-tabs { position: absolute; inset: 0 0 auto; z-index: 8; height: var(--tab-h); pointer-events: none; }
.bn-tab { position: absolute; top: 0; left: var(--x); z-index: var(--index-z); width: var(--tab-w); height: 100%; pointer-events: auto; }
/* Channel indices are beige; the open one takes its folder's paper so tab and sheet read as one. */
.bn-tab { --index-paper: var(--index-beige); --edge: #b3a08a; transition: --index-paper var(--fold-time) var(--fold-ease); }
.bn-tab.is-date { --index-paper: var(--brick); --edge: var(--brick-deep); }
.bn-tab:not(.is-date)[aria-current] { --index-paper: var(--cream); }
/* Closed indices sit a little lower, so the open one stands tallest; it rises as its folder slides up. */
.bn-tab:not([aria-current]) .ftab { height: calc(100% - 4px); }
/* An index carried by its turning folder (benefit-scroll.js) passes over the others. */
.bn-tab.is-carried { z-index: 5; }
/* Each index overlaps the one to its right, so the paper edge (a thin line around the silhouette)
   and its shadow fall rightward onto the next index. The bottom stays clipped into the sheet. */
.ftab { position: absolute; bottom: -1px; left: 0; display: flex; width: 100%; height: 100%; filter: drop-shadow(.75px 0 0 var(--edge)) drop-shadow(-.75px 0 0 var(--edge)) drop-shadow(0 -.75px 0 var(--edge)) drop-shadow(2px 0 2.5px rgba(36,27,21,.3)); clip-path: inset(-8px -8px 0 -8px); }
.ftab .sh { flex: none; width: 18px; height: 100%; fill: var(--index-paper); }
.ftab .sh.r { transform: scaleX(-1); }
.ftab-label { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding-top: env(safe-area-inset-top); margin: 0 -1px; background: var(--index-paper); color: var(--ink); font: 700 12.5px/1 var(--text); letter-spacing: -.02em; white-space: nowrap; }
.bn-tab.is-date .ftab-label { font: 400 15px/1 var(--display); letter-spacing: .06em; color: var(--cream); }
.bn-tab:focus-visible { outline: none; }
.bn-tab:focus-visible .ftab-label { outline: 2px solid currentColor; outline-offset: -4px; }
.bn-card { position: absolute; inset: var(--tab-h) 0 0; pointer-events: none; background: var(--cream); }
/* Folders lie in one pile; only the open one and a pair mid-turn are painted (benefit-scroll.js). */
.bn-card.is-away { visibility: hidden; }
.bn-card-body { height: 100%; pointer-events: auto; overflow: hidden; }
.bn-paper-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: none; scrollbar-width: thin; scrollbar-color: #c2b09b transparent; }
.bn-paper-scroll:focus-visible { outline: 2px solid var(--brick); outline-offset: -3px; }
.bn-sheet { min-height: 100%; padding: 26px 16px 30px; background: var(--cream); }
html[data-page="benefit"], html[data-page="benefit"] body { overscroll-behavior-y: none; }
.hero.is-backdrop * { animation-play-state: paused !important; }
.bn-channel-head { padding: 0 2px 24px; }
.bn-ch-meta { display: flex; justify-content: space-between; gap: 8px; font: 500 10px/1.4 var(--text); color: var(--sub); }
.bn-ch-meta span:last-child { font: 16px/1 var(--display); white-space: nowrap; }
.bn-channel-head h3 { margin-top: 12px; font: 400 clamp(32px,10.8vw,44px)/1 var(--display); letter-spacing: .01em; }
.bn-intro { margin-top: 10px !important; font: 500 13px/1.65 var(--text); letter-spacing: -.02em; }
.bn-intro strong { font-weight: 750; }
/* Client reference (25SS Double Mileage mobile book), with color held back like comparison draft B:
   brick only on key amounts, the 03 emphasis band and NEW; labels are outlined, bands are neutral.
   Reference: one rule-topped page per benefit,
   centered pill labels, tinted bands carrying the benefit line, gray footnotes. */
.bn-table { margin: 0 0 14px; padding: 22px 32px 20px 16px; background: var(--sheet); text-align: center; }
/* Right padding clears the archive handle's hit area as each card scrolls behind it. */
.bn-th { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); text-align: left; font: 400 26px/1 var(--display); letter-spacing: .02em; }
.bn-no { color: var(--ink); }
.bn-new { align-self: center; margin-left: 2px; padding: 3px 6px 2px; border-radius: 2px; background: var(--brick); color: var(--cream); font: 400 13px/1 var(--display); letter-spacing: .08em; }
.bn-pill { margin: 20px 0 10px !important; }
.bn-pill span { display: inline-block; padding: 6px 15px 5px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font: 400 14px/1 var(--display); letter-spacing: .08em; }
.bn-lead-text { margin: 18px 0 12px !important; font: 600 14px/1.55 var(--text); letter-spacing: -.04em; }
.bn-lead-text b { font-weight: 800; color: var(--brick); }
.bn-band { margin-top: 8px; }
.bn-band-head { padding: 12px 10px; background: #ebe5dc; font: 750 14px/1.5 var(--text); letter-spacing: -.04em; }
.bn-band-head em, .bn-band-body b { font-style: normal; font-weight: 800; color: var(--brick); }
.bn-band-body { padding: 10px 12px 11px; background: #f5f1ea; font: 500 12px/1.65 var(--text); letter-spacing: -.03em; color: var(--ink); }
.bn-band.is-accent .bn-band-head { background: var(--brick); color: var(--cream); }
.bn-band.is-accent .bn-band-head em { color: var(--cream); }
/* Offline preview brands (review #22): the accent band is the toggle, the names fold out below. */
.bn-brand-band summary { display: flex; justify-content: center; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.bn-brand-band summary::-webkit-details-marker { display: none; }
.bn-brand-band summary::after { content: '+'; flex: none; font: 400 20px/1 var(--display); }
.bn-brand-band[open] summary::after { content: '\2212'; }
.bn-brand-band summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bn-brand-list { line-height: 1.8; }
.bn-brand-list span { white-space: nowrap; }
/* Benefit bands: the benefit outweighs its purchase condition (client review 11/03). */
.bn-offer { padding: 13px 12px 14px; background: #ebe5dc; }
.bn-offer-cond { font: 500 12.5px/1.5 var(--text); letter-spacing: -.03em; color: var(--ink); }
.bn-offer-gain { margin-top: 3px !important; font: 800 18px/1.45 var(--text); letter-spacing: -.045em; color: var(--brick); }
.bn-offer-gain small { margin-left: 3px; font: 650 11.5px/1 var(--text); letter-spacing: -.02em; color: var(--ink); }
.bn-offer-note { margin-top: 6px !important; font: 450 11px/1.6 var(--text); letter-spacing: -.03em; color: var(--sub); }
/* Invitation coupon tiers: purchase condition on the left, coupon amount on the right. */
.bn-tiers { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.bn-tiers li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px 9px 12px; background: #f5f1ea; text-align: left; }
.bn-tiers span { font: 500 12px/1.4 var(--text); letter-spacing: -.03em; }
.bn-tiers span b { margin-right: 1px; font: 400 22px/1 var(--display); letter-spacing: .01em; }
.bn-tiers strong { flex: none; font: 400 34px/.9 var(--display); letter-spacing: .01em; color: var(--brick); }
.bn-tiers strong i { margin-left: 2px; font: 800 13px/1 var(--text); }
.bn-sub { margin-top: 5px !important; font: 450 11px/1.65 var(--text); color: var(--sub); letter-spacing: -.02em; }
.bn-foot { margin: 8px 0 0; padding: 0; list-style: none; font: 450 10.5px/1.7 var(--text); color: var(--sub); letter-spacing: -.02em; }
.bn-foot li::before { content: '* '; }
.bn-table > .bn-foot:last-child { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); }
.bn-table > .bn-foot:last-child li::before, .bn-foot.is-bar li::before { content: '| '; }
/* Amount column on the left, labeled rows on the right (brand mileage, discounts). */
.bn-grid { border-top: 1px solid var(--ink); text-align: left; }
.bn-grid-row { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 8px; padding: 10px 0; }
.bn-grid-row + .bn-grid-row { border-top: 1px solid var(--rule); }
.bn-grid-at { font: 500 10.5px/1.45 var(--text); color: var(--sub); letter-spacing: -.03em; }
.bn-grid-at b { display: block; margin-bottom: 2px; font: 800 17px/1.2 var(--text); color: var(--brick); letter-spacing: -.04em; }
.bn-pairs { display: grid; gap: 3px; margin: 0; }
.bn-pairs div { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 3px; }
.bn-pairs dt { display: flex; align-items: center; justify-content: center; padding: 7px 4px; background: #ebe5dc; font: 750 11px/1.4 var(--text); text-align: center; }
.bn-pairs dd { margin: 0; padding: 7px 9px; background: #f5f1ea; font: 500 11.5px/1.55 var(--text); letter-spacing: -.03em; text-align: left; }
.bn-table > .bn-pairs { margin-top: 8px; }
.bn-table > .bn-pairs div { grid-template-columns: 76px minmax(0,1fr); }
/* Overseas gift list: brand and item on the left, purchase threshold on the right. */
.bn-gifts { margin: 0; padding: 0; list-style: none; text-align: left; }
.bn-gifts li { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); }
.bn-gifts span:first-child { font: 700 11.5px/1.5 var(--text); color: var(--ink); }
.bn-gifts span + span { grid-column: 1; font: 450 11px/1.5 var(--text); }
.bn-gifts b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 800 12px/1 var(--text); color: var(--brick); white-space: nowrap; }
.bn-gifts b i { font-weight: 500; color: var(--sub); }
/* Rows with a gift photo are buttons laid out like the other rows; "사진" marks them. */
.bn-gifts li:has(> .bn-gift-open) { display: block; padding: 0; }
.bn-gift-open { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 10px; width: 100%; padding: 7px 0; text-align: left; color: inherit; }
.bn-gift-open span:first-child { font: 700 11.5px/1.5 var(--text); color: var(--ink); }
.bn-gift-open:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.bn-gift-cue { margin-left: 6px; font: 700 10px/1 var(--text); font-style: normal; color: var(--brick); text-decoration: underline; text-underline-offset: 2px; }
/* Gift photo popup (a <dialog> at the end of the body). */
.bn-gift-pop { width: min(calc(100vw - 48px), 340px); max-height: calc(100dvh - 48px); padding: 0; border: 0; background: transparent; overflow: visible; }
.bn-gift-pop::backdrop { background: rgba(36,27,21,.55); }
.bn-gift-card { position: relative; padding: 18px 18px 20px; background: #fbf8f2; color: var(--ink); text-align: center; word-break: keep-all; }
.bn-gift-pop[open] .bn-gift-card { animation: bn-gift-in .32s cubic-bezier(.2,.7,.1,1); }
@keyframes bn-gift-in { from { opacity: 0; transform: translateY(10px); } }
.bn-gift-photo { display: grid; place-items: center; aspect-ratio: 1; background: #fff; }
.bn-gift-photo img { max-width: 84%; max-height: 84%; object-fit: contain; }
.bn-gift-name { display: grid; gap: 3px; margin: 14px 0 0; }
.bn-gift-name span { font: 600 11.5px/1.4 var(--text); color: #766758; }
.bn-gift-name b { font: 800 16px/1.4 var(--text); letter-spacing: -.04em; }
.bn-gift-at { margin: 8px 0 0; font: 700 12px/1.4 var(--text); color: var(--brick); }
.bn-gift-close { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; font: 400 17px/1 var(--text); color: var(--ink); }
.bn-gift-close:focus-visible { outline: 2px solid var(--brick); outline-offset: -4px; }
/* Online: the event is offline-led, so online sits in one quieter card without bands. */
.bn-item { padding: 16px 0 14px; }
.bn-item + .bn-item { border-top: 1px solid var(--rule); }
.bn-item-label span { display: inline-block; padding: 4px 11px 3px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font: 400 13px/1 var(--display); letter-spacing: .06em; }
.bn-item-text { margin-top: 9px !important; font: 600 13px/1.6 var(--text); letter-spacing: -.04em; }
.bn-item-text b { font-weight: 800; color: var(--brick); }
.bn-item-cond { display: block; font: 500 12px/1.5 var(--text); color: var(--ink); }
.bn-item-gain { display: block; margin-top: 2px; font: 800 16px/1.45 var(--text); letter-spacing: -.045em; color: var(--brick); }
.bn-item-gain + .bn-item-cond { margin-top: 10px; }
.bn-coupon { display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 4px 0 2px; }
.bn-coupon p { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bn-coupon small { font: 600 11px/1.3 var(--text); color: var(--sub); }
.bn-coupon b { font: 400 36px/.9 var(--display); letter-spacing: .01em; }
.bn-coupon b i { margin-left: 1px; font: 800 15px/1 var(--text); font-style: normal; }
.bn-coupon > span { padding-bottom: 6px; font: 400 26px/1 var(--display); color: var(--sub); }
.bn-item .bn-sub { margin-top: 2px !important; }
.bn-fold { font: 500 11px/1.7 var(--text); color: var(--sub); }
.bn-table .bn-fold { margin-top: 10px; text-align: left; }
.bn-fold summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; list-style: none; color: #5b4b3c; font-weight: 600; }
.bn-fold summary::-webkit-details-marker { display: none; }
.bn-fold summary::after { content: '+'; flex: none; font: 22px/1 var(--display); }
.bn-fold[open] summary::after { content: '−'; }
.bn-fold summary:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.bn-fold > div { padding: 2px 0 10px; font-size: 12px; line-height: 1.8; }
.bn-notes { margin: 4px 0; padding: 0; list-style: none; font: 450 11px/1.75 var(--text); color: var(--sub); }
.bn-notes li { position: relative; padding-left: 9px; }
.bn-notes li::before { content: '·'; position: absolute; left: 0; }
.bn-channel-notes { padding: 0 4px; }
.bn-table .bn-cta { margin-top: 16px; }
.bn-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 13px 16px; background: var(--brick); color: var(--cream); font: 650 13px/1.5 var(--text); text-align: left; border-radius: 2px; }
.bn-cta span { font-size: 20px; }
.bn-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Kakao share button in KakaoTalk yellow, as the client's invitation mock. */
.bn-kakao { justify-content: center; gap: 8px; background: #fee500; color: rgba(0,0,0,.85); text-align: center; }
.bn-kakao span { font-size: 18px; }
.bn-kakao-icon { flex: none; width: 19px; height: 18px; fill: currentColor; }
.bn-share-status:empty { display: none; }
.bn-share-status { margin: 8px 0 !important; font: 500 11px/1.6 var(--text); color: var(--brick); }
.bn-share-fallback { margin: 8px 0; font: 12px/1.6 var(--text); }
.bn-share-fallback[hidden] { display: none; }
.bn-share-fallback input { display: block; width: 100%; padding: 10px 6px; margin-block: 6px; font: 12px/1.5 var(--text); }
.bn-online-cta { margin-top: 14px; padding-right: 36px; background: transparent; color: var(--brick); border: 1px solid var(--brick); }
.bn-online-cta + .bn-table { margin-top: 14px; }
/* Hangul inside the Bebas card titles (더한섬닷컴, H패션) is set in Pretendard. */
.bn-th-ko { font: 800 .78em/1 var(--text); letter-spacing: -.03em; }
.bn-text-link { display: inline-flex; align-items: center; min-height: 36px; font: 650 11px/1.4 var(--text); text-decoration: underline; text-underline-offset: 3px; }
.bn-cover-return { display: block; width: 100%; min-height: 44px; margin-top: 16px; font: 550 12px/1.4 var(--text); color: var(--sub); }
.bn-card-cover { background: var(--brick); color: var(--cream); }
.bn-card-cover .bn-paper-scroll { overflow: clip; container: benefit-cover / size; }
/* Explicitly refresh visibility across the size container when the pager unhides it. */
.benefit:not(.is-off) .bn-cover-sheet { visibility: visible; }
.bn-cover-sheet { display: flex; flex-direction: column; gap: 26px; height: 100%; padding: 18px 24px 24px; }
.bn-cover-meta { display: flex; justify-content: space-between; align-items: center; font: 18px/1 var(--display); letter-spacing: .04em; }
.bn-main-return { display: inline-flex; align-items: center; min-height: 36px; }
.bn-cv-head > p:first-child { font: 17px/1 var(--display); letter-spacing: .1em; opacity: .75; }
.bn-cv-head h2 { margin-top: 12px; font: 400 clamp(66px,23vw,92px)/.82 var(--display); letter-spacing: .01em; }
.bn-lead { margin-top: 18px !important; font: 500 14px/1.7 var(--text); letter-spacing: -.025em; }
.bn-lead strong { font-weight: 750; }
/* Blank where the date row was; the period already sits in the meta line above. */
.bn-cv-space { flex: 0 0 48px; }
.bn-toc { border-top: 1px solid #b98170; }
.bn-toc button { position: relative; isolation: isolate; display: grid; grid-template-columns: 32px 1fr 18px; gap: 10px; align-items: center; width: 100%; min-height: 62px; text-align: left; }
.bn-toc button::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: #b98170; transform-origin: left; }
.bn-toc-no { font: 25px/1 var(--display); opacity: .65; }
.bn-toc-title { padding-block: 10px; font: 700 17px/1.3 var(--text); letter-spacing: -.04em; }
.bn-toc button i { font-size: 20px; }
.bn-toc button:focus-visible, .bn-main-return:focus-visible { outline: 2px solid var(--cream); outline-offset: -3px; }
.bn-cover-cue { margin-top: auto !important; font: 16px/1 var(--display); letter-spacing: .12em; opacity: .65; }
@container benefit-cover (max-height: 680px) {
  .bn-cover-sheet { gap: 18px; padding: 12px 24px 18px; }
  .bn-cv-head h2 { font-size: min(21vw,82px); }
  .bn-toc button { min-height: 55px; }
}
@container benefit-cover (max-height: 550px) {
  .bn-cover-sheet { gap: 12px; padding: 8px 20px 14px; }
  .bn-cover-meta { font-size: 16px; }
  .bn-cv-head h2 { font-size: 60px; margin-top: 8px; }
  .bn-lead { margin-top: 12px !important; font-size: 12px; }
  .bn-toc button { min-height: 47px; }
  .bn-cv-space { flex-basis: 16px; }
  .bn-toc-title { font-size: 16px; padding-block: 6px; }
  .bn-cover-cue { display: none; }
}
@container benefit-cover (max-height: 420px) {
  .bn-cover-sheet { gap: 6px; padding: 4px 16px 8px; }
  .bn-cv-head > p:first-child, .bn-lead, .bn-cv-space { display: none; }
  .bn-cv-head h2 { font-size: 48px; }
  .bn-toc button { min-height: 44px; }
}
@media (max-width: 359px) {
  .ftab .sh { width: 14px; }
  .ftab-label { font-size: 11px; }
  .bn-tab.is-date .ftab-label { font-size: 13px; }
  .bn-sheet { padding-inline: 12px; }
  .bn-table { padding-left: 12px; padding-right: 32px; }
  .bn-th { font-size: 23px; }
  .bn-grid-row { grid-template-columns: 62px minmax(0,1fr); }
  .bn-pairs div { grid-template-columns: 44px minmax(0,1fr); }
  .bn-band-head { font-size: 13px; }
  .bn-offer-gain { font-size: 16.5px; }
}

/* benefit-motion.js: reveal, press, cover entrance, drag. None of these classes are added under reduced motion. */
.bn-card-body { touch-action: pan-y pinch-zoom; }
.benefit { overscroll-behavior-x: none; }
.bn-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1), scale .18s ease; }
.bn-reveal.is-in { opacity: 1; transform: none; }
.bn-press:not(.bn-reveal) { transition: scale .18s ease; }
.bn-press.is-pressed { scale: .985; }
.bn-band .bn-band-head, .bn-offer, .bn-pairs dt { transition: background-color .18s ease; }
.bn-band.is-pressed .bn-band-head, .bn-offer.is-pressed, .bn-pairs > div.is-pressed dt { background: #e0d8cc; }
.bn-item.is-pressed .bn-item-label span { background: var(--ink); color: var(--cream); }
.bn-item-label span { transition: background-color .18s ease, color .18s ease; }
@media (hover: hover) and (pointer: fine) {
  .bn-band:hover .bn-band-head, .bn-offer:hover, .bn-pairs > div:hover dt { background: #e4ddd2; }
  .bn-toc button:hover i { transform: translate(3px, -3px); }
}
.bn-toc button i { transition: transform .25s ease; }
.bn-toc button::before { content: ''; position: absolute; inset: 0 -8px; z-index: -1; background: rgba(240,233,224,.12); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.bn-toc button.is-chosen::before { transform: scaleX(1); }
.bn-toc button.is-chosen i { transform: translate(4px, -4px); }
.benefit.is-dragging, .benefit.is-dragging * { user-select: none; cursor: grabbing; }
.bn-tab .ftab { transition: transform .2s ease, height var(--fold-time) var(--fold-ease); }
/* A folder lifted sideways casts its shadow from the trailing right edge onto the pile. */
.bn-card.is-travel { box-shadow: 10px 0 24px rgba(36,27,21,.24), 2px 0 4px rgba(36,27,21,.12); }
@media (prefers-reduced-motion: reduce) { .bn-tab, .bn-tab .ftab { transition: none; } }
.bn-tab.is-peek .ftab { transform: translateY(-4px); }

/* Shared STYLE handle travels with the archive panel. */
.bn-style-float {
  position: fixed;
  top: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  left: 50%;
  width: min(100%, var(--page-width, 430px));
  transform: translateX(-50%);
  z-index: 10;
  overflow: clip;
  pointer-events: none;
}
.bn-to-style {
  position: absolute;
  right: 0;
  top: clamp(72px, calc(50% - 66px), calc(100% - 148px));
  width: 44px; /* touch target includes 10px beside the visible tab */
  height: 132px;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.bn-to-style[hidden] { display: none; }
.bn-to-style.is-attached {
  left: -43px; /* 44px hit target; overlap the sheet by 1px to cover subpixel seams */
  right: auto;
  top: var(--handle-top);
  z-index: 3;
  pointer-events: none;
}
.bn-to-style-tab {
  position: absolute;
  left: calc(100% - 17px);
  top: 50%;
  display: flex;
  width: 132px;
  height: 34px;
  transform: translate(-50%, -50%) rotate(-90deg);
  filter: drop-shadow(-2px 0 5px rgba(0, 0, 0, .28));
}
.bn-to-style .sh { flex: none; width: 16px; height: 100%; fill: var(--archive-desk, #1e1712); }
.bn-to-style .sh.r { transform: scaleX(-1); }
.bn-to-style-tab > span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -1px;
  background: var(--archive-desk, #1e1712);
  font: 15px/1 var(--display);
  letter-spacing: .14em;
  color: var(--cream);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .bn-to-style:hover .bn-to-style-tab > span { text-decoration: underline; text-underline-offset: 3px; } }
.bn-to-style:focus-visible { outline: none; }
.bn-to-style:focus-visible .bn-to-style-tab > span { text-decoration: underline; text-underline-offset: 3px; }
/* The brick accent band keeps its colour when hovered or pressed; it only deepens. */
.bn-band.is-accent.is-pressed .bn-band-head, .bn-band.is-accent:hover .bn-band-head { background: var(--brick-deep); }