/* «Бутик» — warm luxury: espresso and champagne, large numerals for the floors over the level's own photo,
   the plan on cream paper with gold, the passport as a centred card. */
:root {
  --bg: #1B1511; --ink: #F3EADF; --muted: #BDAE9B; --line: rgba(232,212,184,.2); --panel: #F6F0E7; --panel-ink: #2A211B;
  --accent: #C9A46A; --accent-ink: #1B1511; --display: Cormorant, Georgia, serif; --text: Inter, system-ui, sans-serif;
  --veil: radial-gradient(ellipse at 50% 45%, rgba(27,21,17,.05), rgba(27,21,17,.72) 75%), linear-gradient(180deg, transparent 50%, rgba(27,21,17,.85));
  --plan-bg: #F3EBDF; --outline: #FBF7F0; --outline-stroke: #6B5A49; --ctx: #F1E8DA; --ctx-void: #EADFCD;
  --unit-stroke: #B9A68E; --g-shop: #FBF7F0; --g-anchor: #EBDCC4; --g-food: #E3E2D2; --g-leisure: #E9DCD6; --hot: #C9A46A;
  --lbl: #2A211B; --esc: #A89277; --level-photo: .38;
}
/* Cormorant defaults to old-style figures (P₃, C₃₄): lining figures read as unit numbers */
body { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.kick { color: var(--accent); letter-spacing: .3em; }
.s-intro { align-items: center; text-align: center; justify-content: center; padding-bottom: 40px; }
.s-intro h1 { font-weight: 500; text-transform: none; font-size: clamp(60px, 10vw, 170px); line-height: .9; }
.s-intro h1 em { font-style: italic; color: var(--accent); }
.s-intro .lead { margin-left: auto; margin-right: auto; }
.s-intro .btn { align-self: center; }
.s-mall h2 { font-weight: 500; font-style: italic; font-size: clamp(36px, 4.6vw, 72px); }
.fig b { font-family: var(--display); font-weight: 500; color: var(--accent); font-size: clamp(40px, 4vw, 66px); }
.btn { border-radius: 999px; }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.levels-head h2 { font-weight: 500; font-style: italic; }
.level-info h3 { font-weight: 500; }
.l-num { font-family: var(--display); font-weight: 500; font-style: italic; }
body[data-screen="levels"] .veil { background: linear-gradient(90deg, rgba(27,21,17,.92) 30%, rgba(27,21,17,.55)); }
body[data-screen="levels"] #bg-video { opacity: 0; }
.kick, .s-intro .lead, .s-mall .lead { text-shadow: 0 1px 18px rgba(20,14,10,.85); }
body[data-screen="mall"] .veil { background: linear-gradient(90deg, rgba(27,21,17,.9), rgba(27,21,17,.55) 55%, rgba(27,21,17,.3)),
  linear-gradient(180deg, rgba(27,21,17,.4), transparent 30%, rgba(27,21,17,.9)); }
/* ---------- step 4: the plan over the level's own photo ----------
   Layout: a narrow glass column on the left (title, floors, search, kind + size filters), the plan takes the full
   height on the right — the floor plates are wider than tall, so the column costs the plan nothing. */
body[data-screen="level"] .bg { opacity: 1; }
body[data-screen="level"] #bg-video { opacity: 0; }
body[data-screen="level"] #level-photo { opacity: 1; transform: scale(1.04); transition: opacity .8s, filter .6s, background-image .6s; }
.s-plan { background: none; grid-template-columns: minmax(270px, 310px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 28px;
  padding: 80px var(--gutter) 18px; --panel: #F6F0E7; --panel-ink: #2A211B; }
/* the column scrolls on short screens; the plan always keeps the full height */
.plan-side { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; scrollbar-width: none; padding-bottom: 30px; }
.s-plan::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(20,15,11,.88) 0, rgba(20,15,11,.62) 360px, rgba(20,15,11,.18) 70%, rgba(20,15,11,.35)),
    linear-gradient(180deg, rgba(20,15,11,.55), transparent 22%, transparent 80%, rgba(20,15,11,.55)); }
.plan-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
.plan-bar .btn.ghost { padding-left: 0; }
.plan-head h2 { font-weight: 500; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.1; }
.plan-head h2 span { color: var(--accent); font-style: italic; }
.plan-head p { color: var(--muted); }
.plan-tools { flex-direction: column; align-items: stretch; gap: 14px; }
.search input { width: 100%; }
.plan-count { margin: 0; }
.plan { grid-column: 2; grid-row: 1; border: 0; background: none; }
.plan-pick { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.plan-pick span { grid-column: 1 / -1; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.plan-pick button { min-height: 36px; padding: 6px 10px; font-size: 12.5px; text-align: left; }
.level-tabs button, .chip, .search input, .zoom, .plan-pick button { border-radius: 999px; border: 1px solid rgba(232,212,184,.26);
  background: rgba(27,21,17,.42); color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.level-tabs button { font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: .04em; }
.level-tabs button[aria-current="true"], .plan-pick button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #1B1511; }
.chip[aria-pressed="true"] { border-color: rgba(232,212,184,.55); }
.chip[aria-pressed="false"] { opacity: .5; }
.chip i { border-radius: 3px; }
.zoom button, .zoom span { color: var(--ink); }
.plan-side .zoom { position: static; align-self: flex-start; }
.plan-side .plan-hint { position: static; color: var(--muted); }
.tip { border-radius: 14px; border: 0; }
.tip em { color: #8A6A33; }
.tip b { font: 600 18px/1.1 Inter, system-ui, sans-serif; }
.plan-svg { transition: transform .9s var(--ease), filter .6s; transform-origin: 50% 55%; }
.plan-svg .unit { transition: fill .25s, opacity .3s, stroke .25s; }
.plan-svg .unit:hover, .plan-svg .unit:focus-visible, .plan-svg .unit.sel { fill: var(--hot); }
.plan-svg .lbl { font-family: Inter, system-ui, sans-serif; font-weight: 600; letter-spacing: .01em; }
.plan-svg .lbl-a { font-family: Inter, system-ui, sans-serif; font-weight: 500; }
.plan-svg .ctx { stroke: none; }

/* 1 · Шёлк — ivory floor floating on the photo; units as cream tiles with hairline gaps; the atrium is open to the photo */
body[data-plan="silk"] .s-plan, body[data-plan="tilt"] .s-plan {
  --outline: #EADFCD; --outline-stroke: #9C8668; --unit-stroke: #EADFCD; --ctx: #DDD0BB;
  --g-shop: #FFFCF6; --g-anchor: #F2E3C8; --g-food: #E5E6D3; --g-leisure: #EEDDD6; --hot: #C9A46A; --esc: #CDBB9F;
  --lbl: #2A211B; --lbl-a: #8A6A33; --plan-bg: #FFF8EC; }
body[data-plan="silk"] .plan-svg, body[data-plan="tilt"] .plan-svg { filter: drop-shadow(0 26px 34px rgba(0,0,0,.5)); }
body[data-plan="silk"] .plan-svg .unit, body[data-plan="tilt"] .plan-svg .unit { stroke-width: 1.6; }
body[data-plan="silk"] .plan-svg .void-edge, body[data-plan="tilt"] .plan-svg .void-edge { stroke: #C9A46A; stroke-width: 1.4; }
body[data-plan="silk"][data-screen="level"] #level-photo { filter: brightness(.55) saturate(.85); }

/* 2 · Ночь — smoked-glass floor, units as tinted glass with champagne hairlines, warm gold on hover */
body[data-plan="night"] .s-plan {
  --outline: rgba(24,18,14,.78); --outline-stroke: rgba(232,212,184,.6); --unit-stroke: rgba(232,212,184,.5); --ctx: rgba(243,234,223,.05);
  --g-shop: rgba(243,234,223,.1); --g-anchor: rgba(201,164,106,.26); --g-food: rgba(150,176,140,.24); --g-leisure: rgba(190,140,156,.24);
  --hot: rgba(201,164,106,.78); --esc: rgba(232,212,184,.22); --lbl: #F6EEE2; --lbl-a: #D9B87C; --plan-bg: #1B1511; }
body[data-plan="night"] .plan-svg .unit { stroke-width: .8; }
body[data-plan="night"] .plan-svg .units { filter: none; }
body[data-plan="night"] .plan-svg .void-edge { stroke: #C9A46A; stroke-width: 1.2; }
body[data-plan="night"] .plan-svg { filter: drop-shadow(0 0 40px rgba(0,0,0,.55)); }
body[data-plan="night"][data-screen="level"] #level-photo { filter: brightness(.42) saturate(.8) blur(1.5px); }

/* 3 · Перспектива — the same ivory plan laid in perspective like a model on a table; lies flat on zoom/pan */
body[data-plan="tilt"] .plan-svg { transform: perspective(1700px) rotateX(36deg) rotateZ(-5deg) scale(.94); filter: drop-shadow(0 40px 40px rgba(0,0,0,.6)); }
body[data-plan="tilt"] .plan.is-flat .plan-svg { transform: none; filter: drop-shadow(0 26px 34px rgba(0,0,0,.5)); }
body[data-plan="tilt"][data-screen="level"] #level-photo { filter: brightness(.5) saturate(.85) blur(3px); }

/* 4 · Золотая линия — the plan drawn in champagne gold over the photo, units fill with gold on hover */
body[data-plan^="gold"] .s-plan {
  --outline: rgba(18,13,10,.8); --outline-stroke: #C9A46A; --unit-stroke: rgba(214,180,120,.85); --ctx: rgba(201,164,106,.08);
  --g-shop: rgba(28,22,17,.55); --g-anchor: rgba(201,164,106,.2); --g-food: rgba(150,180,140,.18); --g-leisure: rgba(190,140,160,.18);
  --hot: rgba(201,164,106,.62); --esc: rgba(201,164,106,.3); --lbl: #F7ECD8; --lbl-a: #D9B87C; --plan-bg: #1B1511; }
body[data-plan^="gold"] .plan-svg .units { filter: none; }
body[data-plan^="gold"] .plan-svg .unit { stroke-width: .9; }
body[data-plan^="gold"] .plan-svg .outline { stroke-width: 1.8; }
body[data-plan^="gold"] .plan-svg .void-edge { stroke: #E8D2A8; stroke-width: 1; stroke-dasharray: 4 3; }
body[data-plan^="gold"][data-screen="level"] #level-photo { filter: brightness(.46) saturate(.85); }

/* 5 · Золотая + профиль (preview of item 1, gold is untouched): the same gold line, the profile under the area,
   and the four kinds told apart at a glance — gold anchors, sage food, plum leisure, dark shops */
body[data-plan="gold2"] .s-plan {
  --g-shop: rgba(30,23,18,.6); --g-anchor: rgba(201,164,106,.32); --g-food: rgba(112,152,104,.36); --g-leisure: rgba(150,104,160,.38);
  --lbl-u: rgba(247,236,216,.78); }
body[data-plan="gold2"] .chip i { border-color: rgba(232,212,184,.6); }
.passport.is-open { background: rgba(27,21,17,.72); backdrop-filter: blur(6px); }
.pp-panel { --line: rgba(42,33,27,.16); --muted: #7A6A58; inset: 4vh auto auto 50%; width: min(94vw, 1080px); max-height: 92vh; border-radius: 20px;
  transform: translate(-50%, 30px); opacity: 0; transition: transform .5s var(--ease), opacity .4s; box-shadow: 0 40px 80px rgba(0,0,0,.4); }
.passport.is-open .pp-panel { transform: translate(-50%, 0); opacity: 1; }
.pp-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.pp-media { aspect-ratio: auto; min-height: 100%; }
.pp-copy h2 { font-weight: 500; font-style: italic; }
/* the area is what the buyer compares: lining figures, not Cormorant's old-style ones */
.pp-area { font: 500 clamp(36px, 3.4vw, 52px)/1.05 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: #A8813F; }
.pp-copy .kick { font-family: Inter, system-ui, sans-serif; color: #8A6A33; text-shadow: none; }
.pp-loc .u.me { fill: #A8813F; }
.pp-close { border-radius: 999px; }
.pp-panel { bottom: auto; height: 92vh; }
.pp-actions .btn.primary { color: var(--accent-ink); }

/* Passport variant 2 (body[data-pp="2"]): wide card, the photo series on the left with arrows + thumbnails,
   the facts beside it fit without scrolling; «Войти в паспорт» is the one big way on */
/* the photo column takes all the width the copy column leaves, so a 3:2 render fills it with little or no margin */
body[data-pp="2"] .pp-panel { inset: 3vh auto auto 50%; width: min(96vw, 1840px); height: 94vh; max-height: 94vh; outline: none; }
body[data-pp="2"] .pp-body { grid-template-columns: minmax(0, 1fr) clamp(330px, 28vw, 440px); overflow: hidden; height: 100%; }
body[data-pp="2"] .pp-gallery { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; background: #15100C; }
body[data-pp="2"] .g-stage { position: relative; min-height: 0; overflow: hidden; }
/* the whole render is always shown (contain, never cropped); the margins left by a stage of another shape
   are filled with the same shot, blurred and dimmed, so it reads as one picture */
body[data-pp="2"] .g-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s; pointer-events: none; }
body[data-pp="2"] .g-bg { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(28px) brightness(.5) saturate(.9); transition: background-image .45s; }
/* only the shown shot takes the pointer: the hidden ones above it must not swallow the click */
body[data-pp="2"] .g-img.is-on { opacity: 1; cursor: zoom-in; pointer-events: auto; }
body[data-pp="2"] .g-full { position: absolute; right: 18px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 38px;
  padding: 8px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(20,15,11,.55); backdrop-filter: blur(8px);
  color: #F3E8D6; font: 500 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .2s; }
body[data-pp="2"] .g-full span { font-size: 16px; }
/* the plan item of the series: a white sheet, no blurred backdrop */
body[data-pp="2"] .g-stage.is-plan { background: #fff; }
body[data-pp="2"] .g-stage.is-plan .g-bg { display: none; }
body[data-pp="2"] .g-img.is-planimg { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
body[data-pp="2"] .g-thumbs button.is-plan { position: relative; background: #fff; }
body[data-pp="2"] .g-thumbs button.is-plan img { object-fit: contain; }
body[data-pp="2"] .g-thumbs button.is-plan span { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 4px; background: #A8813F;
  color: #fff; font: 600 10px/1.2 Inter, system-ui, sans-serif; letter-spacing: .04em; }
body[data-pp="2"] .g-wait { position: absolute; left: 50%; top: 18px; translate: -50% 0; margin: 0; padding: 7px 14px; border-radius: 999px;
  background: rgba(20,15,11,.7); color: #F3E8D6; font: 500 12px/1 Inter, system-ui, sans-serif; }
body[data-pp="2"] .pp-plan-open { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0 0 8px; padding: 9px 14px;
  border: 1px solid rgba(168,129,63,.45); border-radius: 12px; background: rgba(168,129,63,.08); color: #6E5428; font: 500 14px/1.2 Inter, system-ui, sans-serif;
  cursor: pointer; text-align: left; }
body[data-pp="2"] .pp-plan-open:hover { background: rgba(168,129,63,.18); }
body[data-pp="2"] .pp-plan-open span { font-size: 17px; }
body[data-pp="2"] .g-full:hover { background: rgba(168,129,63,.85); }
/* full-screen photo viewer: the render as large as the screen allows, nothing else */
.lb { position: fixed; inset: 0; z-index: 90; background: #0B0806; outline: none; }
.lb-view { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.lb-img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; max-width: none; object-fit: contain; display: block;
  transform: translate(-50%, -50%); user-select: none; -webkit-user-drag: none; }
.lb.is-zoomed .lb-view { cursor: grab; } .lb.is-zoomed .lb-view:active { cursor: grabbing; }
/* the plan is a white drawing sheet: show it on white with a margin, like a printed sheet */
.lb.is-plan { background: #F4F1EC; }
.lb.is-plan .lb-view { inset: 64px 24px 72px; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.12); }
.lb-zoom { position: absolute; right: 24px; bottom: 22px; display: flex; align-items: center; border-radius: 999px; background: rgba(20,15,11,.6);
  backdrop-filter: blur(8px); color: #F3E8D6; font: 500 13px/1 Inter, system-ui, sans-serif; }
.lb-zoom button { width: 42px; height: 42px; border: 0; background: none; color: inherit; font: 400 22px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.lb-zoom span { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.lb-close { position: absolute; top: 18px; right: 18px; min-height: 42px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  background: rgba(20,15,11,.6); backdrop-filter: blur(8px); color: #F3E8D6; font: 500 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.lb-arrow { position: absolute; top: 50%; translate: 0 -50%; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(20,15,11,.5); backdrop-filter: blur(8px); color: #fff; font: 300 40px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.lb-arrow:hover, .lb-close:hover { background: rgba(168,129,63,.85); }
.lb-arrow.prev { left: 24px; } .lb-arrow.next { right: 24px; }
.lb-cap { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; margin: 0; padding: 10px 18px; border-radius: 999px; background: rgba(20,15,11,.6);
  backdrop-filter: blur(8px); color: #F3E8D6; font: 400 14px/1.2 Inter, system-ui, sans-serif; white-space: nowrap; }
.lb-cap b { font-weight: 600; color: #D9B87C; margin-right: 6px; font-variant-numeric: tabular-nums; }
.lb-cap { pointer-events: none; }
/* phone: the caption goes up under «Закрыть», the zoom stays at the bottom — they never cover each other */
@media (max-width: 900px) { .lb-arrow { width: 44px; height: 44px; font-size: 30px; } .lb-arrow.prev { left: 10px; } .lb-arrow.next { right: 10px; }
  .lb-cap { top: 72px; bottom: auto; font-size: 12px; white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 32px); }
  .lb-zoom { left: 50%; right: auto; translate: -50% 0; }
  .lb.is-plan .lb-view { inset: 112px 8px 76px; } }
body[data-pp="2"] .g-stage .ph-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #E8D8BE; }
body[data-pp="2"] .g-arrow { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(20,15,11,.45); backdrop-filter: blur(8px); color: #fff; font: 300 34px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .2s; }
body[data-pp="2"] .g-arrow:hover { background: rgba(168,129,63,.85); }
body[data-pp="2"] .g-arrow.prev { left: 18px; } body[data-pp="2"] .g-arrow.next { right: 18px; }
body[data-pp="2"] .g-cap { position: absolute; left: 18px; bottom: 16px; margin: 0; padding: 9px 14px; border-radius: 999px; background: rgba(20,15,11,.55);
  backdrop-filter: blur(8px); color: #F3E8D6; font: 400 13px/1.2 Inter, system-ui, sans-serif; }
body[data-pp="2"] .g-cap b { font-weight: 600; color: #D9B87C; margin-right: 6px; font-variant-numeric: tabular-nums; }
body[data-pp="2"] .g-thumbs { display: flex; justify-content: safe center; gap: 8px; padding: 10px; overflow-x: auto; scrollbar-width: thin; background: #15100C; }
body[data-pp="2"] .g-thumbs button { flex: 1 1 0; min-width: 72px; max-width: 150px; aspect-ratio: 3 / 2; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  background: none; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; }
body[data-pp="2"] .g-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-pp="2"] .g-thumbs button:hover { opacity: .9; }
body[data-pp="2"] .g-thumbs button[aria-pressed="true"] { opacity: 1; border-color: #C9A46A; }
body[data-pp="2"] .pp-copy { overflow: auto; overscroll-behavior: contain; padding: 26px 34px 18px; display: flex; flex-direction: column; }
body[data-pp="2"] .pp-copy h2 { font-size: clamp(38px, 3.6vw, 58px); padding-right: 120px; }
body[data-pp="2"] .pp-use { font-size: 18px; }
body[data-pp="2"] .pp-area { margin: 12px 0 16px; font-size: clamp(34px, 3vw, 46px); }
body[data-pp="2"] .pp-facts { margin-bottom: 14px; font-size: 15px; }
body[data-pp="2"] .pp-facts dt, body[data-pp="2"] .pp-facts dd { padding: 8px 0; }
body[data-pp="2"] .pp-where { margin: 0 0 14px; }
body[data-pp="2"] .pp-loc { max-height: 130px; }
body[data-pp="2"] .pp-actions { margin-bottom: 14px; }
/* the two actions one under the other, each on one line: the column is too narrow to share a row */
body[data-pp="2"] .pp-actions { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
body[data-pp="2"] .pp-actions .btn { justify-content: center; text-align: center; white-space: nowrap; }
body[data-pp="2"] .pp-enter { min-height: 52px; font-size: 15px; }
body[data-pp="2"] .pp-copy .kick { padding-right: 110px; }
body[data-pp="2"] .pp-src { margin-top: auto; padding-top: 12px; }
/* lower windows step everything down so the copy column fits with no scroll; these come after the base rules */
@media (max-height: 940px) and (min-width: 901px) {
  body[data-pp="2"] .pp-facts dt, body[data-pp="2"] .pp-facts dd { padding: 6px 0; }
  body[data-pp="2"] .pp-loc { max-height: 86px; }
  body[data-pp="2"] .pp-area { margin: 8px 0 12px; }
}
/* short windows (laptop with the browser bar, ~560–780 px high) */
@media (max-height: 780px) and (min-width: 901px) {
  body[data-pp="2"] .pp-copy { padding: 18px 26px 12px; }
  body[data-pp="2"] .pp-copy h2 { font-size: clamp(30px, 3vw, 42px); }
  body[data-pp="2"] .pp-use { margin-top: 4px; font-size: 15px; }
  body[data-pp="2"] .pp-area { margin: 6px 0 8px; font-size: clamp(26px, 2.4vw, 34px); }
  body[data-pp="2"] .pp-facts { margin-bottom: 8px; font-size: 13px; }
  body[data-pp="2"] .pp-facts dt, body[data-pp="2"] .pp-facts dd { padding: 4px 0; }
  body[data-pp="2"] .pp-where { margin-bottom: 8px; }
  body[data-pp="2"] .pp-loc { max-height: 52px; }
  body[data-pp="2"] .pp-plan-open { margin-bottom: 6px; padding: 5px 12px; font-size: 13px; }
  body[data-pp="2"] .pp-actions { margin-bottom: 8px; }
  body[data-pp="2"] .pp-actions .btn, body[data-pp="2"] .pp-enter { min-height: 40px; padding: 8px 14px; font-size: 12px; }
  body[data-pp="2"] .pp-nav { padding-top: 8px; font-size: 13px; }
  body[data-pp="2"] .pp-nav a { padding: 4px 0; }
  body[data-pp="2"] .pp-src { padding-top: 6px; font-size: 11px; }
  body[data-pp="2"] .g-thumbs { padding: 6px; gap: 6px; }
  body[data-pp="2"] .g-thumbs button { max-width: 96px; }
}
@media (max-height: 620px) and (min-width: 901px) {
  body[data-pp="2"] .pp-loc, body[data-pp="2"] .pp-src { display: none; }
}
@media (max-width: 900px) {
  body[data-pp="2"] .pp-panel { inset: 0; width: 100%; height: 100%; max-height: none; }
  /* stacked: the body scrolls as one column, so neither it nor the gallery may be pinned to the screen height */
  body[data-pp="2"] .pp-body { grid-template-columns: 1fr; grid-template-rows: max-content max-content; align-content: start; overflow: auto; }
  body[data-pp="2"] .pp-gallery { grid-template-rows: max-content max-content; }
  body[data-pp="2"] .g-stage { height: 66.7vw; }
  body[data-pp="2"] .g-stage { aspect-ratio: 3 / 2; }
  body[data-pp="2"] .g-arrow { width: 42px; height: 42px; font-size: 28px; }
  body[data-pp="2"] .g-thumbs button { flex: 0 0 84px; }
  body[data-pp="2"] .pp-actions { flex-wrap: wrap; }
  body[data-pp="2"] .pp-enter { flex-basis: 100%; }
  body[data-pp="2"] .pp-copy { overflow: visible; padding: 22px 18px 28px; }
  body[data-pp="2"] .pp-copy h2 { padding-right: 0; }
}
@media (max-width: 900px) {
  .s-plan { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 10px; padding: 64px 12px 10px; }
  .plan-side { gap: 8px; overflow: visible; padding-bottom: 0; }
  .s-plan::before { background: linear-gradient(180deg, rgba(20,15,11,.85), rgba(20,15,11,.45) 45%, rgba(20,15,11,.35)); }
  .plan-bar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .plan-head h2 { font-size: 24px; }
  .plan-tools { gap: 8px; }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chip { flex: none; }
  .plan { grid-column: 1; grid-row: 2; }
  .plan-pick { margin: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .plan-pick span { display: none; }
  .plan-pick button { flex: none; }
  .plan-side .plan-hint { display: none; }
  .plan-side .zoom { position: fixed; right: 12px; bottom: 12px; z-index: 12; }
  .veil, body[data-screen="mall"] .veil { background: linear-gradient(180deg, rgba(27,21,17,.55), rgba(27,21,17,.7) 35%, rgba(27,21,17,.92)); }
  .pp-panel { inset: 0; width: 100%; max-height: none; border-radius: 0; transform: translateY(30px); }
  .passport.is-open .pp-panel { transform: none; }
  .pp-body { grid-template-columns: 1fr; }
  .pp-media { aspect-ratio: 3 / 2; min-height: 0; }
}