/* BEAUTY NAVI review list 36984cc843cc: copy of styles.css made by tools/build_wp_package.py. Edit the project file and rebuild; do not edit this copy. */
/* BEAUTY NAVI — review portal, refined (design ③, adopted 2026-10-06: owner's type sizes + art-director fixes)
   Same look as hillsgrace.or.jp: dark header, Shippori Mincho B1 headings, Noto Sans JP text and figures,
   Marcellus only for Latin words, white and ivory grounds, hairlines, square corners, gold used sparingly.
   One spacing scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96.
   Type (owner 2026-10-06): 11 · 12 · 13 · 14 · 16 (review text) · 19 (review title) · 20 (list heading); phones: 15 · 17 · 17.
   Header (owner 2026-10-07): stays at the top while scrolling, as on hillsgrace.or.jp (.hdr sticky). Its height is --hdr
   (72px; 56px on phones); everything that scrolls to a place or sticks (left menu, anchors, app.js) clears it. It holds
   the logo block and 公式サイト ↗ only (its menu links were removed, owner 2026-10-07); on phones the logo and a
   hamburger (≡) that opens a full-screen menu with 公式サイト ↗, the patient stories and 公式サイトで確認 (owner 2026-10-07
   afternoon). Phones: the top menu (search, treatment chips, 年代) stays under it as well (2026-10-07), and what
   scrolls clears both. PC / tablets: the whole left column (search, filters, stories, official links) stays under it
   and scrolls inside itself (owner 2026-10-07 afternoon).
   The page title (h1) is for screen readers and search engines only: no hero band above the search (2026-10-07). */

html{color-scheme:light;background:#fff;-webkit-text-size-adjust:100%;
  /* anchors (#bn-reviews, #bn-treatments) and keyboard focus scroll to just below the sticky header: --hdr + 16px
     (and Tab down the page stops 16px above the bottom edge, so the focus ring is not cut off there).
     A media query, not the page's container query (html is outside the container); above 700px it is never smaller
     than the header, so a classic scrollbar (container 15px narrower than the viewport) can only add space. */
  scroll-padding:88px 0 16px}
/* phones: the header alone (56px). The top menu that stays under it there (.bn-side) is cleared by scroll-margin-top on
   what scrolls under it (the chips and the list, below), so focusing a control inside the menu never moves the page. */
@media (max-width:700px){html{scroll-padding-top:56px}}
/* the phones' menu (below) is open: the page behind it does not scroll (only the menu does); the gutter keeps a classic
   scrollbar's width so nothing shifts in a narrow desktop window */
html.bn-menu-lock{overflow:hidden;scrollbar-gutter:stable}
body{margin:0;background:#fff}
.cursor-interaction{cursor:pointer}

#bn-preview{
  --ink:#1c1815;--head:#292620;--text:#2f2a25;--sub:#5f574e;--mute:#6f675c;
  /* --field: the search field's frame, 3.4:1 against white (a form field's edge must be seen, WCAG 1.4.11) */
  --line:#e7e0d6;--line-2:#d6ccbe;--field:#958a7d;--ivory:#f6f3ed;--ivory-2:#fbf9f5;--tint:#f3eada;
  --gold:#a08247;--gold-ink:#7e6228;--dark:#14110e;--on-dark:#ede7de;--foot:#1c1814;
  --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --latin:"Marcellus","Times New Roman",serif;
  --wrap:1120px;--gutter:40px;--pad:max(var(--gutter),calc((100% - var(--wrap)) / 2));
  --side:232px;--gap:64px;--hdr:72px;
  container-type:inline-size;
  font-family:var(--sans);font-size:15px;line-height:1.8;letter-spacing:.02em;color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;color-scheme:only light
}
#bn-preview *,#bn-preview *::before,#bn-preview *::after{box-sizing:border-box}
#bn-preview [hidden]{display:none!important}
#bn-preview :is(h1,h2,h3,p){margin:0}
#bn-preview :is(button,input,select){font:inherit;color:inherit;letter-spacing:inherit}
#bn-preview button{background:none;border:0;padding:0;border-radius:0}
#bn-preview a{color:inherit;text-decoration:none}
#bn-preview :is(a,button,input,select,summary):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#bn-preview .bn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- header (same dark band as hillsgrace.or.jp, sticky like its .hdr) ---------- */
#bn-preview .bn-header{position:sticky;top:0;z-index:110;display:flex;align-items:center;gap:40px;min-height:var(--hdr);padding:0 var(--pad);background:var(--dark);color:var(--on-dark);border-bottom:1px solid rgba(237,231,222,.14)}
/* wordmark with a small line under it, like the official site's .brand .wm + .sub; the whole block links to the top */
/* the block never shrinks below its text (2026-10-07 review: at 341-349px it shrank and the subtitle ran out of it,
   up to 1-2px into the 公式サイト button with the fallback fonts); the small-phone sizes below make everything fit instead */
#bn-preview .bn-brand{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;margin-right:auto;color:#fff}
#bn-preview .bn-brand-name{font-family:var(--latin);font-size:24px;line-height:1;letter-spacing:.16em;color:#fff;white-space:nowrap}
#bn-preview .bn-brand-sub{margin-top:6px;font-size:10.5px;line-height:1.3;letter-spacing:.12em;color:rgba(237,231,222,.66);white-space:nowrap}
#bn-preview .bn-brand-clinic{font-family:var(--latin)}
#bn-preview .bn-brand-voice{margin-left:.3em}
#bn-preview .bn-header-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid rgba(237,231,222,.5);font-size:13px;letter-spacing:.14em;color:var(--on-dark);white-space:nowrap;transition:background-color .2s,color .2s}
#bn-preview .bn-header-link:hover{background:var(--on-dark);color:var(--dark)}
#bn-preview .bn-header :focus-visible{outline-color:#fff}
/* the header is always in view, so focusing its links (and the phones' ≡) never scrolls the page: without this, Shift+Tab
   from the phones' fixed search to 公式サイト ↗ far down the page made the browser "reveal" it past html's
   scroll-padding (Chrome jumped ~400px up, Safari 48px; 2026-10-07 check) */
#bn-preview .bn-header :is(a,button){scroll-margin-top:calc(-1 * (var(--hdr) + 16px))}
/* phones (owner 2026-10-07 afternoon): the hamburger, 44 x 44, and the menu it opens. Hidden above 700px; app.js shows
   the button once the menu is ready (then the header's 公式サイト ↗ moves into the menu on phones). */
#bn-preview .bn-menu-button,#bn-preview .bn-menu{display:none}

/* ---------- main: the search and the menu on the left, the list on the right ---------- */
/* The left column (owner 2026-10-07 afternoon) holds, top to bottom: the search box, 施術で絞り込む, 年代で絞り込む (and
   条件をすべて解除), 患者さまの物語 and 公式サイトで確認 — one column that stays under the header while the page scrolls
   (sticky, 16px under it, as the menu did before). It is taller than the window, so it scrolls inside itself down to
   16px above the bottom of the window (app.js keeps its bottom there, and above the end of the list so it never runs
   into the footer: --bn-col-max), with a thin scrollbar that stays visible and a soft fade at its bottom edge while
   more is below (.bn-more-below, app.js). (Before, only the menu stuck and was kept short enough not to scroll inside
   at 1440x789; the owner asked for the whole column to stay, 2026-10-07 afternoon.)
   Age / keyword chips (.bn-selection), when there are any, come first in the right column, above the list. */
#bn-preview .bn-main{display:grid;grid-template-columns:var(--side) minmax(0,1fr);grid-template-areas:"side selection" "side results";grid-template-rows:auto 1fr;column-gap:var(--gap);align-items:start;padding:56px var(--pad) 96px}
/* the search (owner 2026-10-07 afternoon: 「検索窓であることがわかりにくい」): a framed white field with the magnifier
   inside on the left (the frame --field, 3.4:1 against white; 2px dark when focused) and a dark filled 検索 button
   like 口コミを見る. In the side column (232px; 224px on tablets) the button is full width under the field; the
   placeholder 「施術名・気になること」 is shown in full, 16px so iPads do not zoom in. Phones: side by side (below). */
#bn-preview .bn-search{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
#bn-preview .bn-search-field{display:flex;align-items:center;min-width:0;height:48px;border:1px solid var(--field);background:#fff;cursor:text;transition:border-color .2s,box-shadow .2s}
#bn-preview .bn-search-field:hover{border-color:var(--sub)}
#bn-preview .bn-search-field:focus-within{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
#bn-preview .bn-search-icon{flex-shrink:0;width:18px;height:18px;margin:0 8px 0 12px;fill:none;stroke:var(--sub);stroke-width:1.6;stroke-linecap:round}
#bn-preview .bn-search input{flex:1;min-width:0;height:100%;padding:0 8px 0 0;border:0;background:transparent;font-size:14px;letter-spacing:.04em;outline:none}
#bn-preview .bn-search input::placeholder{color:#776f63}
/* while the field is empty, Chrome and Safari keep room (about 15px) for the clear button, which is not shown then:
   without it the placeholder has the whole field (in the 224px column it was cut to 「施術名・気になるこ」) */
#bn-preview .bn-search input:placeholder-shown::-webkit-search-cancel-button{display:none}
/* PC / tablets: no 検索 button under the field (owner 2026-10-08); Enter searches (app.js). Phones show it beside the field. */
#bn-preview .bn-search button{display:none;align-items:center;justify-content:center;min-height:44px;padding:0 16px;background:var(--dark);color:#fff;font-size:14px;font-weight:500;letter-spacing:.24em;white-space:nowrap;transition:background-color .2s}
#bn-preview .bn-search button:hover{background:#3b342d}

/* PC / tablets: the whole left column stays under the header and scrolls inside itself (see above). Its box reaches
   8px beyond the column on the left and top (room for focus rings) and 16px on the right, where the 6px scrollbar
   sits 10px clear of the column's content (its gutter is always kept, so the content stays 232 / 224px wide whether
   it scrolls or not). Keyboard focus that moves into a part out of view is brought into view inside it, clear of the
   fade (scroll-padding). */
#bn-preview .bn-side{grid-area:side;align-self:start;min-width:0;position:sticky;top:calc(var(--hdr) + 16px);z-index:1;
  max-height:var(--bn-col-max,calc(100vh - var(--hdr) - 32px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  margin:-8px -16px 0 -8px;padding:8px 10px 8px 8px;scrollbar-gutter:stable;scroll-padding:8px 0 56px}
#bn-preview .bn-side>*{max-width:var(--side)}
#bn-preview .bn-side::-webkit-scrollbar{width:6px}
#bn-preview .bn-side::-webkit-scrollbar-track{background:#f4f0ea}
#bn-preview .bn-side::-webkit-scrollbar-thumb{background:#c9bfb2}
#bn-preview .bn-side::-webkit-scrollbar-thumb:hover{background:#a99f92}
@supports not selector(::-webkit-scrollbar){#bn-preview .bn-side{scrollbar-width:thin;scrollbar-color:#c9bfb2 #f4f0ea}}
/* the fade: white rising over the last 48px of the column's view while more of it is below; none at its end.
   No negative bottom margin (2026-10-07 check): with -8px, WebKit (Safari) dropped the column's 8px bottom padding, so at
   its end アクセス・診療時間 sat on the edge with its focus ring cut off, and in Chrome a window tall enough for the whole
   column (1440x1500, a portrait screen) still scrolled it 8px and kept the fade over its last links. */
#bn-preview .bn-side::after{content:'';position:sticky;bottom:-8px;z-index:1;display:block;height:48px;margin:-48px 0 0;background:linear-gradient(rgba(255,255,255,0),#fff 80%);opacity:0;transition:opacity .2s;pointer-events:none}
#bn-preview .bn-side.bn-more-below::after{opacity:1}
#bn-preview .bn-filter{min-width:0}
#bn-preview .bn-label,#bn-preview summary,#bn-preview :is(.bn-side-stories,.bn-side-official) h2{display:flex;align-items:center;gap:8px;min-height:32px;margin-bottom:8px;font-family:var(--sans);font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.16em;color:var(--mute)}
#bn-preview .bn-treatment-group .bn-label{min-height:56px;margin-bottom:4px}
#bn-preview .bn-treatment-list{display:flex;flex-direction:column;border-left:1px solid var(--line)}
#bn-preview .bn-treatment{display:flex;align-items:center;justify-content:space-between;gap:12px;width:calc(100% + 1px);min-height:31px;margin-left:-1px;padding:5px 0 5px 16px;border-left:2px solid transparent;text-align:left;font-size:14px;line-height:1.5;color:var(--sub);transition:color .15s}
#bn-preview .bn-treatment:hover{color:var(--ink)}
#bn-preview .bn-treatment[aria-pressed=true]{border-left-color:var(--gold);color:var(--ink);font-weight:500}
#bn-preview .bn-treatment-count{flex-shrink:0;font-size:12px;font-weight:400;color:var(--mute);font-variant-numeric:tabular-nums}
#bn-preview .bn-treatment[aria-pressed=true] .bn-treatment-count{color:var(--gold-ink)}
#bn-preview details{margin-top:16px}
#bn-preview summary{list-style:none;cursor:pointer}
#bn-preview summary::-webkit-details-marker{display:none}
#bn-preview summary::after{content:'';flex-shrink:0;width:6px;height:6px;margin:0 6px 0 auto;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg)}
#bn-preview details[open] summary::after{transform:translateY(1px) rotate(-135deg)}
#bn-preview .bn-filter-count{min-width:20px;padding:0 6px;background:var(--ink);color:#fff;font-size:11px;line-height:20px;letter-spacing:0;text-align:center}
#bn-preview .bn-ages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#bn-preview .bn-check{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);background:#fff;font-size:13px;line-height:1.3;color:var(--sub);cursor:pointer;transition:border-color .15s,color .15s}
#bn-preview .bn-check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
#bn-preview .bn-check-count{margin-top:2px;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
#bn-preview .bn-check:hover{border-color:var(--line-2);color:var(--ink)}
#bn-preview .bn-check:has(input:checked){border-color:var(--ink);color:var(--ink);background:var(--ivory-2)}
#bn-preview .bn-check:has(input:checked) .bn-check-count{color:var(--gold-ink)}
#bn-preview .bn-check:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
#bn-preview .bn-reset{display:inline-flex;align-items:center;min-height:32px;margin-top:8px;font-size:12px;letter-spacing:.08em;color:var(--sub);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:5px}
#bn-preview .bn-reset:hover{color:var(--ink);text-decoration-color:var(--ink)}
#bn-preview .bn-show-results{display:none}
/* 患者さまの物語 (owner 2026-10-07): one link per story of the official site's series (hillsgrace.or.jp/#stories, same
   order), each opening in a new tab; right under 年代で絞り込む since 2026-10-07 afternoon (owner), then 公式サイトで確認. The age label is small and muted like the menu's counts; the title is a short
   label chosen for the menu (the full title is the link's accessible name), the menu's 14px, on one line with its ↗:
   the age column (36px) and the gap (6px) are kept tight so the longest labels fit the 224px tablet column with room to
   spare in the fallback fonts too (owner 2026-10-07 follow-up). */
#bn-preview .bn-side-stories{min-width:0;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
#bn-preview .bn-side-stories h2{margin-bottom:0}
#bn-preview .bn-side-note{margin:-4px 0 8px;font-size:11px;line-height:1.5;letter-spacing:.08em;color:var(--mute)}
/* 患者さまの物語 (owner 2026-10-09): each story's eyecatch, small, with 年代 and the short title under it; two columns in
   the left column (three in the phones' menu). The images are the articles' own (azaminohills-blog.com, 300px wide).
   Titles break between phrases (<wbr> in index.html). */
#bn-preview .bn-story-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;margin:8px 0 0;padding:0;list-style:none}
#bn-preview .bn-story-list a{display:flex;flex-direction:column;font-size:13px;line-height:1.5;color:var(--sub)}
#bn-preview .bn-story-list a:hover{color:var(--ink)}
#bn-preview .bn-story-img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:8px;background:var(--line)}
#bn-preview .bn-story-list a:hover .bn-story-img{opacity:.85}
#bn-preview .bn-story-age{font-size:11px;line-height:1.6;letter-spacing:.06em;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
#bn-preview .bn-story-title{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
#bn-preview .bn-side-official{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
#bn-preview .bn-side-official h2{width:100%;margin-bottom:0}
#bn-preview .bn-side-official a{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:13px;color:var(--sub)}
#bn-preview .bn-side-official a:hover{color:var(--ink)}

/* ---------- list header ---------- */
/* at least a window high, so with a short list (a search with few or no matches, the saved view) the sticky left column
   still has the window's height (its bottom never goes below the end of the list): at the top of the page, and also once
   the list's start is brought under the header (a treatment or age chosen far down the list; with - 72px there the
   column's bottom jumped 40px up, 2026-10-07 check) */
#bn-preview .bn-results{grid-area:results;min-width:0;min-height:calc(100vh - var(--hdr) - 32px);container:results/inline-size}
/* the heading gets the full row (a long treatment name never shares it with the tabs);
   below it the treatment's average when one is chosen, then one bar: count on the left, tabs and sort on the right */
#bn-preview .bn-results-header{border-bottom:1px solid var(--ink)}
#bn-preview .bn-results-title{min-width:0}
#bn-preview h2{font-family:var(--mincho);font-weight:400;color:var(--head)}
#bn-preview .bn-results-header h2{font-size:20px;line-height:1.4;letter-spacing:.05em;word-break:auto-phrase;overflow-wrap:anywhere;text-wrap:balance}
/* app.js writes the phrase breaks in as <wbr> (every browser); without Intl.Segmenter, Chrome's auto-phrase above is the fallback */
#bn-preview.bn-phrased :is(.bn-results-header h2,.bn-review h3,.bn-empty h3,.bn-empty p){word-break:keep-all}
#bn-preview .bn-results-header h2:focus{outline:none}
#bn-preview .bn-results-bar{display:flex;align-items:stretch;justify-content:space-between;gap:0 32px}
#bn-preview .bn-count{display:flex;align-items:center;min-width:0;font-size:13px;line-height:1.5;color:var(--sub);font-variant-numeric:tabular-nums}
#bn-preview .bn-results-tools{display:flex;align-items:stretch;gap:32px;flex-shrink:0;margin-bottom:-1px}
#bn-preview .bn-collection{display:flex;gap:24px}
#bn-preview .bn-collection button{display:inline-flex;align-items:center;gap:0;min-height:48px;border-bottom:2px solid transparent;font-size:13px;letter-spacing:.06em;color:var(--mute);white-space:nowrap}
#bn-preview .bn-collection button:hover{color:var(--ink)}
#bn-preview .bn-collection button[aria-pressed=true]{border-bottom-color:var(--ink);color:var(--ink)}
#bn-preview .bn-saved-count{margin-left:8px;font-size:12px;color:var(--gold-ink);font-variant-numeric:tabular-nums}
#bn-preview .bn-sort{display:flex;align-items:center;gap:12px;border-bottom:2px solid transparent;font-size:12px;letter-spacing:.12em;color:var(--mute);white-space:nowrap}
#bn-preview select{appearance:none;-webkit-appearance:none;min-height:40px;padding:0 24px 0 2px;border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%231c1815' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 4px center/10px 7px;font-size:14px;letter-spacing:.04em;color:var(--ink);cursor:pointer}
#bn-preview select:hover{border-bottom-color:var(--ink)}
#bn-preview .bn-results-header select{border-bottom:0}
#bn-preview .bn-summary>span{white-space:nowrap}
#bn-preview .bn-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:12px;letter-spacing:.06em;color:var(--sub)}
#bn-preview .bn-summary-score{display:inline-flex;align-items:baseline;gap:6px}
#bn-preview .bn-summary-star{font-size:12px;color:var(--gold)}
#bn-preview .bn-summary-score strong{font-size:16px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
#bn-preview .bn-summary-label{color:var(--ink)}
#bn-preview .bn-selection{grid-area:selection;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
#bn-preview .bn-selection:empty{display:none}
#bn-preview .bn-selection button{min-height:32px;max-width:100%;padding:0 12px;background:var(--ivory);font-size:13px;letter-spacing:.04em;color:var(--ink);overflow-wrap:anywhere;transition:background-color .15s}
#bn-preview .bn-selection button:hover{background:#ece6dc}

/* ---------- reviews: who / when on the left, the words and the treatments received on the right ---------- */
#bn-preview .bn-review-list{container:list/inline-size}
#bn-preview .bn-review{display:grid;grid-template-columns:168px minmax(0,1fr);column-gap:48px;padding:40px 0;border-bottom:1px solid var(--line)}
#bn-preview .bn-review:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
#bn-preview .bn-review-aside{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding-top:2px}
#bn-preview .bn-who{display:flex;flex-direction:column;gap:2px}
#bn-preview .bn-person{font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.04em;color:var(--ink)}
#bn-preview .bn-review time{font-size:13px;line-height:1.6;letter-spacing:.04em;color:var(--mute);font-variant-numeric:tabular-nums}
#bn-preview .bn-tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0;margin-top:20px}
#bn-preview .bn-review .bn-tag{display:inline-flex;align-items:center;min-height:28px;padding:0;border:0;text-align:left}
#bn-preview .bn-tag-label{display:inline-block;padding:2px 10px;border:0;background:var(--ivory);font-size:13px;line-height:1.7;letter-spacing:.04em;color:var(--sub);transition:background-color .15s,color .15s}
#bn-preview .bn-review .bn-tag:hover .bn-tag-label{background:#ece6dc;color:var(--ink)}
#bn-preview .bn-review .bn-tag[aria-pressed=true] .bn-tag-label{background:var(--tint);color:var(--gold-ink)}
#bn-preview .bn-review-main{min-width:0}
#bn-preview .bn-review-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:28px}
#bn-preview .bn-rating{display:flex;align-items:center;gap:10px}
#bn-preview .bn-stars{font-size:13px;line-height:1;letter-spacing:.1em;color:var(--gold)}
#bn-preview .bn-stars-off{color:var(--line-2)}
#bn-preview .bn-rating strong{font-size:13px;font-weight:500;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
/* titles break only between phrases (the <wbr> from app.js; keep-all below) and in balanced lines */
#bn-preview .bn-review h3{word-break:auto-phrase;text-wrap:balance;margin:10px 0 14px;font-family:var(--mincho);font-weight:500;font-size:19px;line-height:1.6;letter-spacing:.05em;color:var(--head);overflow-wrap:anywhere}
#bn-preview .bn-review .bn-body{font-size:16px;line-height:1.95;letter-spacing:.03em;color:var(--text);overflow-wrap:anywhere}
#bn-preview .bn-review .bn-body p,#bn-preview .bn-reply p{white-space:pre-line}
#bn-preview .bn-review .bn-body p+p{margin-top:1em}
#bn-preview .bn-reply{margin-top:28px;padding:20px 24px;border-left:2px solid var(--gold);background:var(--ivory-2);overflow-wrap:anywhere}
#bn-preview .bn-reply-label{display:block;margin-bottom:8px;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.1em;color:var(--gold-ink)}
#bn-preview .bn-reply p{font-size:14px;line-height:1.9;color:var(--sub)}
#bn-preview .bn-reply p+p{margin-top:.6em}
#bn-preview .bn-bookmark{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:-4px -6px;padding:0 6px;font-size:12px;letter-spacing:.08em;color:var(--mute);white-space:nowrap;transition:color .15s}
#bn-preview .bn-bookmark:hover{color:var(--ink)}
#bn-preview .bn-bookmark svg{width:16px;height:16px;flex-shrink:0}
#bn-preview .bn-bookmark[aria-pressed=true]{color:var(--gold-ink)}
#bn-preview .bn-bookmark[aria-pressed=true] svg path{fill:currentColor}

/* ---------- list end ---------- */
#bn-preview .bn-more-row{display:flex;justify-content:center;padding-top:48px}
#bn-preview .bn-more,#bn-preview .bn-empty button{min-height:56px;min-width:min(320px,100%);padding:0 40px;border:1px solid var(--ink);background:#fff;font-size:14px;letter-spacing:.16em;color:var(--ink);transition:background-color .2s,color .2s}
#bn-preview .bn-more:hover,#bn-preview .bn-empty button:hover{background:var(--ink);color:#fff}
#bn-preview .bn-list-end{padding:40px 0 0;font-size:12px;letter-spacing:.12em;text-align:center;color:var(--mute)}
#bn-preview .bn-empty{padding:64px 24px;border-bottom:1px solid var(--line);text-align:center}
#bn-preview .bn-empty h3{font-family:var(--mincho);font-weight:500;font-size:20px;letter-spacing:.05em;color:var(--head)}
#bn-preview .bn-empty p{margin:12px 0 32px;font-size:14px;color:var(--sub)}
/* the empty state's sentences break between phrases (app.js <wbr>, keep-all above) in balanced lines, so a centred line
   never ends with one lone character (「…まとめられま／す。」 at 744px, 「…ありませ／ん」 at 390px) */
#bn-preview .bn-empty :is(h3,p){word-break:auto-phrase;overflow-wrap:anywhere;text-wrap:balance}

/* ---------- footer ---------- */
#bn-preview .bn-footer{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px 40px;padding:56px var(--pad) 48px;background:var(--foot);font-size:12px;letter-spacing:.08em;color:#b9ae9f}
#bn-preview .bn-footer-id{display:flex;flex-direction:column;gap:16px}
#bn-preview .bn-footer-brand{font-family:var(--latin);font-size:22px;line-height:1;letter-spacing:.16em;color:#fff}
#bn-preview .bn-footer-clinic{font-family:var(--latin);letter-spacing:.12em}
#bn-preview .bn-footer-links{display:flex;flex-wrap:wrap;gap:0 32px}
#bn-preview .bn-footer-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark)}
#bn-preview .bn-footer-links a:hover{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
#bn-preview .bn-footer :focus-visible{outline-color:#fff}

/* ---------- narrower list column: the review folds into one column ---------- */
@container list (max-width:719px){
  #bn-preview .bn-review{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who save" "rating rating" "title title" "body body" "reply reply" "tags tags";padding:32px 0}
  #bn-preview .bn-review-aside,#bn-preview .bn-review-main,#bn-preview .bn-review-head{display:contents}
  #bn-preview .bn-who{grid-area:who;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 16px}
  #bn-preview .bn-bookmark{grid-area:save;align-self:center}
  #bn-preview .bn-rating{grid-area:rating;margin-top:12px}
  #bn-preview .bn-review h3{grid-area:title;margin:10px 0 14px}
  #bn-preview .bn-review .bn-body{grid-area:body}
  #bn-preview .bn-reply{grid-area:reply}
  #bn-preview .bn-tags{grid-area:tags;margin-top:16px}
}

@container results (max-width:640px){
  /* one flowing block: 口コミ一覧 and the count share a line as before; with a treatment chosen the order is
     heading → its average → count → tabs (the summary takes a full line, so the count follows it) */
  #bn-preview .bn-results-header{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px}
  #bn-preview .bn-results-title,#bn-preview .bn-results-bar{display:contents}
  #bn-preview .bn-results-header h2{max-width:100%}
  #bn-preview .bn-summary{flex-basis:100%;margin-top:4px}
  #bn-preview .bn-count{display:block;font-size:12px}
  #bn-preview .bn-results-tools{flex-basis:100%;justify-content:space-between;gap:16px;margin-top:4px}
  #bn-preview .bn-collection{gap:16px}
  #bn-preview .bn-collection button{min-height:44px}
  #bn-preview .bn-sort{min-height:44px}
  #bn-preview .bn-sort>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@container results (max-width:340px){
  #bn-preview .bn-tab-more{display:none}
}

/* ---------- FAQ under the list (2026-10-12): printed by bn-seo.php from the live reviews, so readers without
   JavaScript (AI crawlers) get the counts and a link to every treatment page. It is the end of .bn-results, so the left
   column stays fixed beside it to the end of the page (fitColumn measures .bn-results). */
#bn-preview .bn-faq{margin-top:96px}
#bn-preview .bn-faq-inner{padding-top:56px;border-top:1px solid var(--line)}
#bn-preview .bn-faq h2{font-family:var(--mincho);font-weight:500;font-size:20px;line-height:1.4;letter-spacing:.05em;color:var(--head)}
#bn-preview .bn-faq-list{margin:24px 0 0;padding:0}
#bn-preview .bn-faq-item{padding:24px 0;border-bottom:1px solid var(--line)}
#bn-preview .bn-faq-item:first-child{border-top:1px solid var(--line)}
#bn-preview .bn-faq dt{display:flex;gap:12px;font-family:var(--mincho);font-weight:500;font-size:17px;line-height:1.7;letter-spacing:.04em;color:var(--head)}
#bn-preview .bn-faq-mark{flex:none;font-family:var(--latin);font-size:18px;line-height:1.6;color:var(--gold)}
#bn-preview .bn-faq dd{margin:10px 0 0;padding-left:26px;font-size:15px;line-height:1.95;letter-spacing:.03em;color:var(--text);overflow-wrap:anywhere}
#bn-preview .bn-faq dd p a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
#bn-preview .bn-faq-links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
#bn-preview .bn-faq-links li{list-style:none}
#bn-preview .bn-faq-links a{display:inline-flex;align-items:baseline;gap:8px;min-height:32px;padding:4px 12px;background:var(--ivory);font-size:13px;line-height:1.8;letter-spacing:.04em;color:var(--sub);text-decoration:none;transition:background-color .15s,color .15s}
#bn-preview .bn-faq-links a:hover{background:#ece6dc;color:var(--ink)}
#bn-preview .bn-faq-n{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}

/* ---------- tablets ---------- */
@container (max-width:1023px){
  #bn-preview .bn-main{--side:224px;--gap:40px}
}

/* ---------- phones: search, a row of treatments, then the reviews ---------- */
@container (max-width:700px){
  #bn-preview>*{--pad:16px;--hdr:56px}
  #bn-preview .bn-header{gap:16px}
  #bn-preview .bn-brand-name{font-size:19px;letter-spacing:.14em}
  #bn-preview .bn-brand-sub{margin-top:5px;font-size:10px;letter-spacing:.1em}
  #bn-preview .bn-header-link{min-height:40px;padding:0 14px;font-size:12px;letter-spacing:.1em}
  /* the hamburger menu (owner 2026-10-07 afternoon): once app.js has built it, the header holds the logo and ≡ (44 x 44;
     its lines end at the 16px gutter, the button reaches 12px into it); 公式サイト ↗ moves into the menu. ≡ turns into
     × in the same spot while the menu is open (the same button: aria-expanded). */
  #bn-preview.bn-has-menu .bn-header-link{display:none}
  #bn-preview.bn-has-menu .bn-menu-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;margin-right:-12px;color:var(--on-dark)}
  #bn-preview .bn-menu-icon{position:relative;display:block;width:20px;height:14px}
  #bn-preview .bn-menu-icon span{position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:transform .2s ease,opacity .15s ease}
  #bn-preview .bn-menu-icon span:nth-child(1){top:0}
  #bn-preview .bn-menu-icon span:nth-child(2){top:6.25px}
  #bn-preview .bn-menu-icon span:nth-child(3){top:12.5px}
  #bn-preview .bn-menu-button[aria-expanded=true] .bn-menu-icon span:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
  #bn-preview .bn-menu-button[aria-expanded=true] .bn-menu-icon span:nth-child(2){opacity:0}
  #bn-preview .bn-menu-button[aria-expanded=true] .bn-menu-icon span:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}
  /* the menu: the rest of the screen under the header, in the header's dark (it reads as the header opened), scrolling
     inside itself when its links do not fit; the page behind is locked (html.bn-menu-lock) and inert (app.js). It fades
     and slides in over .2s (none with reduced motion). Contents (app.js, copied from the page so there is one list to
     keep): 公式サイト ↗, 患者さまの物語 with the 10 stories, 公式サイトで確認. */
  #bn-preview.bn-has-menu .bn-menu{display:block;position:absolute;top:100%;left:0;right:0;height:calc(100vh - var(--hdr) + 1px);height:calc(100dvh - var(--hdr) + 1px);
    overflow-y:auto;overscroll-behavior:contain;scroll-padding:16px 0 32px;padding:24px var(--pad) 48px;border-top:1px solid rgba(237,231,222,.14);background:var(--dark);color:var(--on-dark);
    opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
  #bn-preview.bn-menu-open .bn-menu{opacity:1;transform:none;pointer-events:auto}
  /* Tab inside the menu scrolls only the menu (its links come into view 16px clear of its edges, inside html's
     scroll-padding, so the window behind never moves) */
  #bn-preview .bn-menu :is(a,button){scroll-margin:8px 0}
  #bn-preview .bn-menu-site{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;background:var(--on-dark);color:var(--dark);font-size:14px;font-weight:500;letter-spacing:.16em}
  #bn-preview .bn-menu-site:focus-visible{outline-offset:3px}
  #bn-preview .bn-menu :is(.bn-menu-treatments,.bn-menu-ages,.bn-menu-stories,.bn-menu-links){margin-top:32px;padding-top:20px;border-top:1px solid rgba(237,231,222,.14)}
  /* the reviews' menu (owner 2026-10-09): 施術で絞り込む and 年代で絞り込む as in the left column; a tap chooses it,
     closes the menu and shows the list. The current choice is marked in gold, like the left column. */
  #bn-preview .bn-menu-filter{display:grid;margin-top:4px}
  #bn-preview .bn-menu-ages .bn-menu-filter{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  #bn-preview .bn-menu-filter button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:0;padding:0 0 0 12px;border:0;border-left:2px solid transparent;background:none;font:inherit;font-size:15px;line-height:1.5;color:var(--on-dark);text-align:left}
  #bn-preview .bn-menu-filter button:hover{color:#fff}
  #bn-preview .bn-menu-filter button[aria-pressed=true]{border-left-color:var(--gold);color:#fff;font-weight:500}
  #bn-preview .bn-menu-count{font-size:12px;font-weight:400;color:rgba(237,231,222,.6);font-variant-numeric:tabular-nums}
  #bn-preview .bn-menu-filter button[aria-pressed=true] .bn-menu-count{color:#c9ad73}
  #bn-preview .bn-menu h2{min-height:0;margin:0;font-family:var(--sans);font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.16em;color:rgba(237,231,222,.66)}
  #bn-preview .bn-menu .bn-side-note{margin:2px 0 8px;font-size:11px;letter-spacing:.08em;color:rgba(237,231,222,.56)}
  /* the nine stories in three columns (3 x 3) */
  #bn-preview .bn-menu .bn-story-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px;margin-top:12px}
  #bn-preview .bn-menu .bn-story-list a{color:var(--on-dark)}
  #bn-preview .bn-menu .bn-story-img{background:rgba(237,231,222,.14)}
  #bn-preview .bn-menu .bn-story-age{color:rgba(237,231,222,.6)}
  #bn-preview .bn-menu-links{display:flex;flex-direction:column}
  #bn-preview .bn-menu-links h2{margin-bottom:4px}
  #bn-preview .bn-menu-links a{display:flex;align-items:center;gap:8px;min-height:44px;font-size:15px;color:var(--on-dark)}
  /* hover (and the hover a tap leaves behind on touch screens) stays light on the dark: the column's dark hover colour
     would make the label vanish here */
  #bn-preview .bn-menu :is(.bn-story-list a,.bn-menu-links a):hover{color:#fff}
  #bn-preview .bn-menu-site:hover{background:#fff}
  #bn-preview .bn-main{display:block;padding:16px var(--pad) 64px}
  /* The top menu stays under the header while the page scrolls (owner 2026-10-07): the search, the row of treatments and
     the 年代 row are one sticky block (.bn-side) with the page's white, full width, a hairline under it, tucked 1px under
     the header so no sliver of the list ever shows between them. Compact: 8 + 44 + 52 + 40 + 1 = 145px, so header and
     block take 200px of the window (390x844 and 320x640), touch targets 40px and more. 年代 opens inside the block; when
     the choices do not fit, the block scrolls inside itself down to the bottom of the window (only while open, so the
     年代 row's focus ring is not cut off when closed). At the top of the page it sits 24px under the header as before.
     What scrolls under it (chips, list) carries scroll-margin-top = its height (--bn-block, measured by app.js) + 16px. */
  #bn-preview .bn-side{position:sticky;top:calc(var(--hdr) - 1px);z-index:100;margin:0 calc(var(--pad) * -1);padding:8px var(--pad) 0;
    border-bottom:1px solid var(--line);background:#fff;max-height:calc(100vh - var(--hdr) + 1px);max-height:calc(100dvh - var(--hdr) + 1px);
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
  #bn-preview .bn-side:not(:has(details[open])){overflow:visible}
  #bn-preview :is(.bn-selection,.bn-results),#bn-preview :is(.bn-selection,.bn-results) *{scroll-margin-top:calc(var(--bn-block,0px) + 15px)}
  /* the block is not the PC column: no gutter, fade or width cap */
  #bn-preview .bn-side{align-self:auto;scrollbar-gutter:auto;scroll-padding:0}
  #bn-preview .bn-side::after{display:none}
  #bn-preview .bn-side>*{max-width:none}
  /* the search: one row, full width, 44px: the framed field and the dark 検索 side by side */
  #bn-preview .bn-search{flex-direction:row;height:44px;margin-bottom:0}
  #bn-preview .bn-search-field{flex:1;height:44px}
  #bn-preview .bn-search button{display:flex;flex:none;min-height:44px;padding:0 14px;letter-spacing:.12em}
  #bn-preview .bn-treatment-group .bn-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* treatments scroll sideways; the selected one is filled.
     The left fade stays fully clear for the first 9px: a chip scrolled just off to the left ends 8px before the
     selected one (the gap), so its right border never shows as a sliver at the edge. */
  #bn-preview .bn-treatment-list{flex-direction:row;gap:8px;margin:0 calc(var(--pad) * -1);padding:6px var(--pad);border:0;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--pad);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 9px,#000 var(--pad),#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent 0,transparent 9px,#000 var(--pad),#000 calc(100% - 32px),transparent)}
  #bn-preview .bn-treatment-list.bn-at-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 9px,#000 var(--pad));mask-image:linear-gradient(90deg,transparent 0,transparent 9px,#000 var(--pad))}
  /* while a chip has keyboard focus, both edges are cut cleanly at 9px instead of fading, so the focus ring of a chip
     at the edge (11-13px in) is drawn at full strength; the sliver under 9px stays hidden */
  #bn-preview .bn-treatment-list:has(:focus-visible){-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 9px,#000 9px,#000 calc(100% - 9px),transparent calc(100% - 9px));mask-image:linear-gradient(90deg,transparent 0,transparent 9px,#000 9px,#000 calc(100% - 9px),transparent calc(100% - 9px))}
  #bn-preview .bn-treatment-list::-webkit-scrollbar{display:none}
  #bn-preview .bn-treatment{flex:none;width:auto;gap:8px;min-height:40px;margin:0;padding:0 14px;border:1px solid var(--line);font-size:13px;white-space:nowrap;background:#fff}
  #bn-preview .bn-treatment[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:400}
  #bn-preview .bn-treatment[aria-pressed=true] .bn-treatment-count{color:#d9cfbf}
  #bn-preview details{margin-top:0}
  #bn-preview summary{min-height:40px;margin:0;font-size:13px;letter-spacing:.1em;color:var(--ink)}
  #bn-preview .bn-fields{padding:4px 0 20px}
  #bn-preview .bn-ages{gap:8px}
  /* phones keep the roomier boxes (年代 is folded there; opened, its choices fill the block) */
  #bn-preview .bn-check{min-height:48px}
  #bn-preview .bn-reset{min-height:36px}
  #bn-preview .bn-show-results{display:block;width:100%;min-height:48px;margin-top:12px;background:var(--dark);color:#fff;font-size:14px;letter-spacing:.12em}
  #bn-preview :is(.bn-side-stories,.bn-side-official){display:none}
  #bn-preview .bn-selection{margin:16px 0 0}
  #bn-preview .bn-results{min-height:0;margin-top:24px}
  #bn-preview .bn-results-header h2{font-size:17px}
  #bn-preview .bn-review{padding:28px 0}
  #bn-preview .bn-review h3{font-size:17px}
  #bn-preview .bn-review .bn-body{font-size:15px;line-height:1.9;letter-spacing:.02em}
  #bn-preview .bn-reply{margin-top:20px;padding:16px 16px 16px 18px}
  #bn-preview .bn-more-row{padding-top:40px}
  #bn-preview .bn-more{width:100%}
  /* no side padding: 条件を解除してすべて見る stays on one line in its button at 320px */
  #bn-preview .bn-empty{padding-left:0;padding-right:0}
  #bn-preview .bn-faq{margin-top:64px}
  #bn-preview .bn-faq-inner{padding-top:40px}
  #bn-preview .bn-faq h2{font-size:17px}
  #bn-preview .bn-faq dt{font-size:16px}
  #bn-preview .bn-faq dd{padding-left:0}
  #bn-preview .bn-footer{display:block;padding:40px var(--pad) 32px}
  #bn-preview .bn-footer-links{flex-direction:column;align-items:flex-start;margin-top:24px}
}
/* small phones (374px and under): a tighter gap, 公式サイト button and subtitle spacing, so the logo block (which does not
   shrink) and the button sit side by side with room to spare, in the web fonts and in the fallback fonts shown before
   they arrive (2026-10-07 review: 341-349px). 340px and under: the smaller logo as before. */
@container (max-width:374px){
  #bn-preview .bn-header{gap:12px}
  #bn-preview .bn-brand-sub{letter-spacing:.06em}
  #bn-preview .bn-header-link{padding:0 10px;letter-spacing:.06em}
}
@container (max-width:340px){
  #bn-preview .bn-brand-name{font-size:17px;letter-spacing:.12em}
  #bn-preview .bn-brand-sub{font-size:9px}
  #bn-preview .bn-search button{padding:0 12px}
}
@media (pointer:coarse){
  /* the search text 14px (owner 2026-10-08: a little smaller); on touch devices what is typed stays 16px, or iOS
     zooms the page on focus — the placeholder is 14px there too */
  #bn-preview .bn-search input{font-size:16px}
  #bn-preview .bn-search input::placeholder{font-size:14px}
  #bn-preview .bn-review .bn-tag,#bn-preview .bn-bookmark,#bn-preview .bn-selection button,#bn-preview .bn-faq-links a{min-height:44px}
  /* the left menu's rows; the chips in the phones' fixed top menu stay 40px (compact, owner 2026-10-07) */
  @container (min-width:701px){#bn-preview .bn-treatment{min-height:44px}}
}
@media (prefers-reduced-motion:reduce){
  #bn-preview *{transition:none!important;scroll-behavior:auto!important}
}

/* ---------- 運営者情報 (operator.html, owner 2026-10-12): the old theme page in the front page's look — the same header
   and footer, one column of text (16px, as the reviews), headings in the mincho, hairlines between the sections ---------- */
#bn-preview .bn-doc-main{padding:56px var(--pad) 96px;background:#fff}
#bn-preview .bn-doc-body{max-width:720px}
#bn-preview .bn-doc-body h1{margin:0 0 40px;font-family:var(--mincho);font-size:28px;font-weight:500;line-height:1.5;letter-spacing:.08em;color:var(--head)}
#bn-preview .bn-doc-body section{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
#bn-preview .bn-doc-body h2{margin:0 0 12px;font-family:var(--mincho);font-size:19px;font-weight:500;line-height:1.5;letter-spacing:.06em;color:var(--head)}
#bn-preview .bn-doc-body p{margin:0;font-size:16px;line-height:2;color:var(--text)}
#bn-preview .bn-doc-body p+p{margin-top:8px}
#bn-preview .bn-doc-facts{display:grid;gap:4px;margin:0}
#bn-preview .bn-doc-facts div{display:grid;grid-template-columns:6em minmax(0,1fr);column-gap:16px;align-items:baseline}
#bn-preview .bn-doc-facts dt{font-size:13px;letter-spacing:.08em;color:var(--mute)}
#bn-preview .bn-doc-facts dd{margin:0;font-size:16px;line-height:2;color:var(--text)}
#bn-preview .bn-doc-back{margin-top:48px}
#bn-preview .bn-doc-body .bn-doc-back a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--gold-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
#bn-preview .bn-footer-links a[aria-current=page]{color:#fff}
@container (max-width:700px){
  #bn-preview .bn-doc-main{padding:32px var(--pad) 64px}
  #bn-preview .bn-doc-body h1{margin-bottom:28px;font-size:22px}
  #bn-preview .bn-doc-body h2{font-size:17px}
  #bn-preview .bn-doc-body p,#bn-preview .bn-doc-facts dd{font-size:15px}
  #bn-preview .bn-doc-facts div{grid-template-columns:minmax(0,1fr)}
}