/* Acervo: the interface's styles. Every value comes from tokens.css; see system.html for the rules. */
  /* Concept v4 — header, highlights, then photos. Filters live in the floating bar;
     inside a project or post the bar turns into that item's own controls.
     Light only. SF Pro on Apple devices, Inter elsewhere. Rounded like the first prototype. */

  *, *::before, *::after { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 400 14px/1.45 var(--font); letter-spacing: -0.006em;
    font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: var(--z-safe-area); background: var(--bg); }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  img { display: block; max-width: 100%; }
  [hidden] { display: none !important; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
  .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  svg.i { width: 18px; height: 18px; flex: none; }

  /* ---------- Header ---------- */
  .head {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-header); height: var(--head);
    background: #fff; /* solid, the same bar as inside a project */
    transition: opacity var(--dur-quick) var(--ease);
  }
  .head .wrap { position: relative; height: 100%; display: flex; align-items: center; gap: var(--s-28); }
  /* The search lives in the header's middle, always: the bar is the one fixed place to search from. */
  .head-c { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(480px, 36vw); transform: translate(-50%, -50%); transition: opacity var(--dur-base) var(--ease), transform var(--dur-slow) var(--ease), width var(--dur-slow) var(--ease); }
  @media (min-width: 861px) { .head-c:focus-within { width: min(600px, 44vw); } }
  /* Between tablet and wide screens a centred field would run into the menu: it takes the room between them instead. */
  @media (min-width: 861px) and (max-width: 1160px) {
    .head-c, .head-c:focus-within { position: relative; left: auto; top: auto; transform: none; flex: 1 1 auto; width: auto; max-width: 480px; margin-inline: auto; }
  }
  .head .tsearch { height: 42px; gap: var(--s-8); padding: 0 5px 0 var(--s-16); background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px rgba(17, 17, 17, .04); transition: background var(--dur-base), box-shadow var(--dur-base) var(--ease), height var(--dur-base) var(--ease); }
  .head .tsearch:focus-within { height: 46px; background: var(--bg); box-shadow: var(--shadow-field-focus); }
  .head .tsearch > svg { width: 18px; height: 18px; color: var(--muted); }
  .head .tsearch input { font-size: var(--fs-lg); color: var(--ink); }
  .head .tsearch input::placeholder { color: var(--muted); }
  .head .tsearch .kbd { color: var(--faint); border-color: var(--line); }
  .head .tsearch { position: relative; }
  .hint { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); display: flex; align-items: baseline; gap: .3em; color: var(--muted); font-size: var(--fs-lg); pointer-events: none; white-space: nowrap; }
  .hint .roll { position: relative; display: inline-flex; align-items: center; height: 1.4em; line-height: 1.4em; }
  .hint .roll .w { display: inline-flex; color: var(--ink); opacity: .55; }
  .hint .roll .ch { display: inline-block; white-space: pre; will-change: opacity, filter; }
  /* A thin caret shows only while a hint is being rewritten, blinking softly. */
  .hint .caret { width: 1.5px; height: 1.05em; margin-left: 1px; border-radius: 1px; background: var(--ink); opacity: 0; transition: opacity var(--dur-quick); }
  .hint .caret.on { opacity: .5; animation: caret var(--dur-ambient) steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
  .hint[hidden] { display: none; }
  .head .tsearch .ib { width: 34px; height: 34px; color: var(--muted); }
  .head .tsearch .ib:hover, .head .tsearch .ib[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
  .head .tsearch .scope { height: 32px; background: var(--bg); transition: background var(--dur-base); }
  .head .tsearch:focus-within .scope { background: var(--surface); } /* the field turns white when active, so the chip turns gray */
  .head .tsearch:focus-within .scope button:hover { background: var(--surface-2); }
  .head .tsearch .scope button { color: var(--muted); }
  .head .tsearch .scope button:hover { color: var(--ink); background: var(--surface); }
  .mark { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; }
  .mark svg { width: 26px; height: 26px; } /* two arches, one over the other, on the brand orange */
  .nav { display: flex; gap: 22px; font-size: var(--fs-lg); }
  .nav a { color: var(--muted); transition: color var(--dur-quick); }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
  .nav a[aria-current="page"] { font-weight: 500; }
  .head-r { margin-left: auto; display: flex; align-items: center; gap: var(--s-10); }
  .seg { display: inline-flex; padding: 3px; background: var(--surface); border-radius: var(--r-pill); }
  .seg button { display: grid; place-items: center; width: 34px; height: 28px; border-radius: var(--r-pill); color: var(--muted); transition: background var(--dur-quick), color var(--dur-quick); }
  .seg button:hover { color: var(--ink); }
  .seg button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-selected); }
  .seg svg { width: 16px; height: 16px; }
  .pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-6); height: 34px; padding: 0 var(--s-16); border-radius: var(--r-pill); background: var(--surface); font-weight: 500; transition: background var(--dur-quick); }
  .pill:hover { background: var(--surface-2); }


  /* ---------- Filters: typology words on top, a row of kinds under them ---------- */
  .ptools { display: flex; align-items: center; gap: var(--s-10) var(--s-12); padding-block: 0 var(--s-16); }

  /* ---------- Filter bar (after Mobbin): one pill per facet, each opening a searchable list ---------- */
  .mtools { gap: var(--s-16); padding-block: 36px 22px; }
  .mright { flex: none; display: flex; align-items: center; gap: 18px; margin-left: auto; }
  .mshow { color: var(--muted); font-size: var(--fs-md); white-space: nowrap; }
  .mshow b { font-weight: 400; font-variant-numeric: tabular-nums; }
  .mshow b.tick { animation: mtick var(--dur-slow) var(--ease); }
  @keyframes mtick { from { opacity: 0; filter: blur(3px); transform: translateY(3px); } }
  .msort { display: inline-flex; align-items: center; gap: var(--s-6); height: 40px; padding: 0 var(--s-4) 0 var(--s-8); font-size: var(--fs-lg); font-weight: 500; white-space: nowrap; }
  .msort svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--spring); }
  .msort[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* C · Sheet: typology as tabs, everything else in one sheet that slides in from the side. */
  .ctabs { display: flex; gap: 22px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .ctabs::-webkit-scrollbar { display: none; }
  .ctabs button { flex: none; display: inline-flex; align-items: center; height: 40px; color: var(--muted); font-size: var(--fs-lg); font-weight: 500; transition: color var(--dur-quick); }
  .ctabs button:hover { color: var(--ink); }
  .ctabs button:disabled { color: var(--faint); cursor: default; }
  .ctabs .l { position: relative; }
  .ctabs .l::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transition: transform var(--dur-base) var(--spring); }
  .ctabs button[aria-pressed="true"] { color: var(--ink); }
  .ctabs button[aria-pressed="true"] .l::after { transform: none; }
  .ctabs sup { display: inline-block; margin-left: var(--s-2); color: var(--faint); font-size: var(--fs-micro); font-weight: 400; vertical-align: 6px; }
  /* The text row: groups of plain words, each with its count; a group opens and closes from its name. */
  .trow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-10) var(--s-16); padding: var(--s-2) var(--s-2) var(--s-24); }
  .trow .tg { display: inline-flex; align-items: center; gap: 3px; height: 32px; color: var(--faint); font-size: var(--fs-md); transition: color var(--dur-quick); }
  .trow .tg:hover, .trow .tg[aria-expanded="true"] { color: var(--muted); }
  .trow .tg:hover { color: var(--ink); }
  .trow .tg svg { width: 11px; height: 11px; transform: rotate(-90deg); transition: transform var(--dur-base) var(--spring); }
  .trow .tg[aria-expanded="true"] svg { transform: none; }
  .trow .to { display: inline-flex; align-items: center; gap: 3px; height: 32px; color: var(--muted); font-size: var(--fs-base); transition: color var(--dur-quick); }
  .trow .to:hover { color: var(--ink); }
  .trow .to[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
  .trow .to[aria-pressed="true"] .l { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; } /* the word only, never its count */
  .trow .to:disabled { color: var(--faint); cursor: default; }
  .trow .to.in { animation: sq-in var(--dur-base) var(--ease) backwards; animation-delay: calc(var(--n, 0) * var(--stagger) / 2); }
  .trow .to svg { width: 9px; height: 9px; margin-left: var(--s-2); color: var(--faint); }
  .trow .to:hover svg { color: var(--ink); }
  .trow sup { display: inline-block; margin-left: 1px; color: var(--faint); font-size: var(--fs-micro); font-weight: 400; vertical-align: 6px; }
  .trow .tmore { height: 32px; color: var(--faint); font-size: var(--fs-md); transition: color var(--dur-quick); }
  .trow .tmore:hover { color: var(--ink); }
  .trow .sep-v { width: 1px; height: 14px; background: var(--line); }
  .tall { display: inline-flex; align-items: center; gap: var(--s-6); height: 40px; color: var(--ink); font-size: var(--fs-lg); font-weight: 500; white-space: nowrap; }
  .tall svg { width: 16px; height: 16px; }
  .tall sup { display: inline-block; margin-left: -3px; color: var(--muted); font-size: var(--fs-micro); font-weight: 400; vertical-align: 6px; }

  .fsheet-veil { position: fixed; inset: 0; z-index: var(--z-sheet-veil); background: rgba(12, 12, 12, .32); opacity: 0; transition: opacity var(--dur-base) var(--ease); }
  .fsheet-veil.show { opacity: 1; }
  .fsheet { position: fixed; z-index: var(--z-sheet); top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(480px, 100vw); background: var(--bg);
    box-shadow: var(--shadow-overlay); transform: translateX(104%); transition: transform var(--dur-slow) var(--ease); }
  .fsheet.show { transform: none; }
  .fsheet[hidden], .fsheet-veil[hidden] { display: none; }
  .fs-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 var(--s-16) 0 var(--s-24); border-bottom: 1px solid var(--line); }
  .fs-head b { font-size: var(--fs-xl); font-weight: 600; }
  .fs-head > .x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
  .fs-head > .x:hover { background: var(--surface); }
  .fs-head svg { width: 15px; height: 15px; }
  .fs-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-8) var(--s-24) var(--s-24); }
  .fs-foot { flex: none; display: flex; align-items: center; justify-content: space-between; padding: var(--s-14) var(--s-24) calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .fs-foot .clr { font-size: var(--fs-base); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
  .fs-foot .clr:disabled { color: var(--faint); text-decoration: none; cursor: default; }
  .fs-foot .go { height: 46px; padding: 0 22px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--fs-lg); font-weight: 500; transition: background var(--dur-quick), transform var(--dur-base) var(--spring); }
  .fs-foot .go:hover { background: #2a2a2a; }
  .fs-foot .go:active { transform: scale(.97); }

  .fcd { display: flex; align-items: center; min-width: 0; flex: 1; }
  .fcd[hidden], .fcd-below[hidden] { display: none; }
  .fcd-below { position: relative; }
  @keyframes sq-in { from { opacity: 0; filter: blur(4px); transform: translateX(8px); } }

  .fcd .ctabs { gap: var(--s-20); }
  .fs-body { position: relative; }

  /* The filters modal, after Airbnb's: centred, one column, sections divided by hairlines, a live count at the foot. */
  .fsheet.modal { top: 50%; left: 50%; right: auto; bottom: auto; width: min(780px, calc(100vw - 32px)); height: auto; max-height: min(88vh, 880px); border-radius: var(--r-sheet);
    transform: translate(-50%, calc(-50% + 100vh)); box-shadow: var(--shadow-overlay); transition: transform var(--dur-slow) var(--ease); }
  .fsheet.modal.show { transform: translate(-50%, -50%); }
  .am-head { justify-content: space-between; height: 64px; padding: 0 var(--s-14) 0 var(--s-28); }
  .am-head b { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; }
  .am-body { padding: 0 var(--s-28); }
  .am-sec { padding: 30px 0 var(--s-32); border-bottom: 1px solid var(--line); }
  .am-sec:last-child { border-bottom: 0; }
  .am-sec h3 { margin: 0; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.02em; }
  .am-sec > p { margin: var(--s-6) 0 0; color: var(--muted); font-size: var(--fs-base); }
  .am-sec > :nth-child(2):not(p), .am-sec > p + * { margin-top: 18px; }
  .am-sub { margin: var(--s-20) 0 var(--s-10); color: var(--muted); font-size: var(--fs-md); }
  .am-sec > p + .am-sub { margin-top: var(--s-16); }
  .am-chips { display: flex; flex-wrap: wrap; gap: var(--s-10); }
  .am-chip { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px; border-radius: var(--r-pill); font-size: var(--fs-lg);
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .14); transition: box-shadow var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease), transform var(--dur-base) var(--spring); }
  .am-chip:hover { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .45); }
  .am-chip:active { transform: scale(.96); transition-duration: var(--dur-instant); }
  .am-chip[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
  .am-chip:disabled { opacity: .35; cursor: default; }
  .am-chip .ic { width: 20px; height: 20px; }
  .am-kids { margin-top: var(--s-14); padding: var(--s-4) var(--s-16) var(--s-16); border-radius: var(--r-card); background: var(--surface); animation: tile-in var(--dur-base) var(--ease); }
  .am-kids .am-chip { background: var(--bg); }
  .am-row { display: grid; gap: var(--s-12); padding: var(--s-12) 0; }
  .am-row > span { font-size: var(--fs-lg); }
  .am-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--s-20); }
  .am-toggle > span { display: grid; gap: 3px; }
  .am-toggle b { font-size: var(--fs-lg); font-weight: 500; }
  .am-toggle small { color: var(--muted); font-size: var(--fs-md); }
  .am-switch { position: relative; flex: none; width: 48px; height: 30px; border-radius: var(--r-pill); background: #cfcfcb; transition: background var(--dur-base) var(--ease); }
  .am-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-knob); transition: transform var(--dur-slow) var(--spring); }
  .am-switch[aria-checked="true"] { background: var(--ink); }
  .am-switch[aria-checked="true"]::after { transform: translateX(18px); }
  .fsheet.modal .fs-foot { padding: var(--s-14) var(--s-24) var(--s-14) var(--s-28); }
  @media (max-width: 640px) {
    .fsheet.modal { top: auto; bottom: 0; width: 100vw; max-height: 94vh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; transform: translate(-50%, 100%); }
    .fsheet.modal.show { transform: translate(-50%, 0); }
    .am-body { padding: 0 var(--s-20); }
  }

  .mpop { position: absolute; z-index: var(--z-top); display: flex; flex-direction: column; width: min(320px, calc(100vw - 32px)); max-height: min(470px, 70vh);
    background: var(--bg); border-radius: var(--r-panel); box-shadow: var(--shadow-raised);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: var(--ox, 24px) 0;
    transition: opacity var(--dur-instant) var(--ease), transform var(--dur-base) var(--ease), visibility 0s var(--dur-base); }
  .mpop.show { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-quick) var(--ease), transform var(--dur-slow) var(--spring); }
  .mpop.slim { width: 210px; }
  .mpop-s { flex: none; display: flex; align-items: center; gap: var(--s-10); height: 52px; padding: 0 var(--s-16); border-bottom: 1px solid var(--line); color: var(--muted); }
  .mpop-s svg { flex: none; width: 17px; height: 17px; }
  .mpop-s input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-lg); }
  .mpop-s input::placeholder { color: var(--faint); }
  .mpop-list { flex: 1 1 auto; min-height: 0; padding: var(--s-6); overflow-y: auto; overscroll-behavior: contain; }
  .mhd { padding: var(--s-12) var(--s-10) var(--s-6); color: var(--faint); font-size: var(--fs-sm); }
  .mpop hr { height: 1px; margin: var(--s-6) var(--s-4); border: 0; background: var(--line); }
  .mopt { display: flex; align-items: center; gap: var(--s-12); width: 100%; min-height: 40px; padding: 0 var(--s-10); border-radius: var(--r-option); color: var(--ink); font-size: var(--fs-base); text-align: left; transition: background var(--dur-instant); }
  .mopt:hover, .mopt:focus-visible { background: var(--surface); outline: none; }
  .mopt.kid { padding-left: var(--s-40); }
  .mopt .box { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .2);
    transition: background var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease), transform var(--dur-base) var(--spring); }
  .mopt:active .box { transform: scale(.86); transition-duration: var(--dur-instant); }
  .mopt .box svg { width: 12px; height: 12px; color: var(--bg); }
  .mopt .box .ck { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset var(--dur-quick) var(--ease) var(--dur-instant); }
  .mopt .box .dash { opacity: 0; }
  .mopt[aria-selected="true"] .box, .mopt.mixed .box { background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .mopt[aria-selected="true"] .box .ck { stroke-dashoffset: 0; }
  .mopt.mixed .box .dash { opacity: 1; }
  .mopt .l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mopt .n { color: var(--faint); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .mopt:disabled { color: var(--faint); cursor: default; }
  .mopt:disabled:hover { background: none; }
  .mopt.radio .box { display: none; }
  .mopt.radio > svg { flex: none; width: 15px; height: 15px; opacity: 0; transform: scale(.6); transition: opacity var(--dur-quick), transform var(--dur-base) var(--spring); }
  .mopt.radio[aria-selected="true"] > svg { opacity: 1; transform: none; }
  .mempty { padding: 18px var(--s-12); color: var(--muted); font-size: var(--fs-base); }
  .mpop-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-10) var(--s-10) var(--s-10) var(--s-16); border-top: 1px solid var(--line); }
  .mpop-foot .clr { color: var(--muted); font-size: var(--fs-base); transition: color var(--dur-quick); }
  .mpop-foot .clr:hover { color: var(--ink); }
  .mpop-foot .clr:disabled { color: var(--faint); cursor: default; }
  .mpop-foot .go { height: 36px; padding: 0 var(--s-16); border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--fs-base); font-weight: 500; transition: background var(--dur-quick) var(--ease), transform var(--dur-base) var(--spring); }
  .mpop-foot .go:hover { background: #2a2a2a; }
  .mpop-foot .go:active { transform: scale(.97); }

  /* ---------- The opening: a statement and the search, centred. The field docks into the header on scroll. ---------- */
  .hero { display: grid; grid-template-rows: 1fr; padding-block: var(--s-96) var(--s-56); text-align: center; animation: tile-in var(--dur-slow) var(--ease);
    transition: grid-template-rows var(--dur-slow) var(--ease), padding var(--dur-slow) var(--ease), opacity var(--dur-base) var(--ease); }
  .hero-in { min-height: 0; overflow: hidden; }
  .hero.gone { grid-template-rows: 0fr; padding-block: 0 var(--s-8); opacity: 0; pointer-events: none; }
  .hero h2 { margin: 0 auto; max-width: 15ch; font-size: var(--fs-display); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
  .hero .sub { margin: var(--s-16) auto 0; max-width: 46ch; color: var(--muted); font-size: var(--fs-lede); line-height: 1.45; text-wrap: balance; }
  .hero .ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-10); margin-top: var(--s-32); }
  .pill.big { height: 46px; padding: 0 var(--s-24); font-size: var(--fs-lg); transition: background var(--dur-quick), transform var(--dur-base) var(--spring); }
  .pill.big:active { transform: scale(.96); transition-duration: var(--dur-instant); }
  /* The main call to action: black. On hover a faint white glow rises from the bottom edge; the pill keeps
     its size and only gives a little under the press. */
  .pill.cta-glow { position: relative; isolation: isolate; height: 52px; padding: 0 var(--s-28); background: var(--ink); color: #fff; transition: transform var(--dur-base) var(--spring); }
  .pill.cta-glow::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(70% 110% at 50% 120%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%);
    opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
  .pill.cta-glow:hover::after, .pill.cta-glow:focus-visible::after { opacity: 1; }
  .pill.cta-glow:active { transform: scale(.985); transition-duration: var(--dur-instant); }
  @media (max-width: 860px) {
    /* On a phone the bar takes two rows: the mark, menu and actions, then the search across the width. */
    .head { height: auto; }
    .head .wrap { flex-wrap: wrap; row-gap: var(--s-10); padding-block: var(--s-12); }
    .head-c { position: static; order: 10; width: 100%; transform: none; }
    .head .tsearch .kbd { display: none; }
  } /* Featured is off for now: the filters open the page */
  .pchips { padding-bottom: 22px; }
  .types button { width: auto; height: 32px; gap: 5px; padding: 0 var(--s-14); display: inline-flex; align-items: center; font-size: var(--fs-base); }
  .types button[aria-pressed="true"] { font-weight: 500; }
  .types sup { font-size: var(--fs-micro); color: var(--faint); vertical-align: 5px; }
  .pchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); min-width: 0; }
  .pchips .count { color: var(--muted); margin: 0 var(--s-2) 0 var(--s-4); }

  /* ---------- Active filters: shown only when something is filtered ---------- */
  .filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); padding-block: var(--s-10) 18px; }
  .filters .count { color: var(--muted); margin-right: var(--s-4); }
  .fchip { display: inline-flex; align-items: center; gap: var(--s-6); height: 30px; padding: 0 var(--s-8) 0 13px; border-radius: var(--r-pill); background: var(--surface); }
  .fchip:hover { background: var(--surface-2); }
  .fchip svg { width: 14px; height: 14px; color: var(--muted); }
  .clear-all { color: var(--muted); padding: 0 var(--s-6); }
  .clear-all:hover { color: var(--ink); }

  /* ---------- Photo with story-style preview ---------- */
  .ph { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: var(--surface); border-radius: var(--r-img); overflow: hidden; isolation: isolate; }
  .ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-base) var(--ease), transform var(--dur-ambient) var(--ease); }
  .item:hover .ph > img, .post:hover .ph > img { transform: scale(1.035); }
  .ph > img.on { opacity: 1; }
  .multi { position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(17, 17, 17, .42); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity var(--dur-quick); }
  .multi svg { width: 13px; height: 13px; }
  .ph.playing .multi { opacity: 0; }

  /* ---------- Projects grid ---------- */
  .page { padding-block: 0 140px; }
  #pg-feed { padding-top: var(--s-28); }
  .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-40) var(--s-20); }
  .item { position: relative; cursor: pointer; border-radius: var(--r-img); }
  /* Save sits on the photo's corner and shows on hover; once saved it stays, filled. */
  .card-save {
    position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .94); color: var(--ink);
    box-shadow: var(--shadow-on-photo); opacity: 0; transform: scale(.92);
    transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease), background var(--dur-quick), color var(--dur-quick);
  }
  .card-save svg { width: 18px; height: 18px; }
  .item:hover .card-save, .item:focus-within .card-save, .post:hover .card-save, .post:focus-within .card-save, .card-save[aria-pressed="true"] { opacity: 1; transform: none; }
  .card-save:hover { background: #fff; }
  .card-save[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .card-save[aria-pressed="true"] .fillable { fill: currentColor; }
  @media (hover: none) { .card-save { opacity: 1; transform: none; } }
  .cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-12); padding: var(--s-10) var(--s-2) 0; }
  .cap .ti { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cap .yr { color: var(--faint); }
  .cap .by { grid-column: 1 / -1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Plans: a second moment of the project page. Drawings are shown whole on a white sheet, never cropped. */
  .proj-info .modes { margin: -12px 0 var(--s-28); }
  .plan-tabs { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-bottom: var(--s-14); }
  .plan-tabs button { height: 30px; padding: 0 13px; border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-md); transition: background var(--dur-quick), color var(--dur-quick); }
  .plan-tabs button:hover { background: var(--surface-2); }
  .plan-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .sheet { display: block; width: 100%; padding: var(--s-28); background: #fff; border: 1px solid var(--line); border-radius: var(--r-img); cursor: zoom-in; }
  .proj-imgs .sheet img { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--head) - 230px); object-fit: contain; background: transparent; border-radius: 0; }
  .plan-cap { display: flex; justify-content: space-between; gap: var(--s-16); padding: var(--s-10) var(--s-2) 0; color: var(--muted); font-size: var(--fs-md); }
  .plan-cap a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
  .plans-badge { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); color: var(--ink); font-size: var(--fs-xs); font-weight: 500; }
  .plans-badge svg { width: 11px; height: 11px; }
  /* Full-screen drawing: scroll or pinch to zoom, drag to move, double-click to jump in and out. */
  .zoom { position: fixed; inset: 0; z-index: var(--z-top); background: #fff; overflow: hidden; cursor: grab; touch-action: none; }
  .zoom.dragging { cursor: grabbing; }
  .zoom img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
  .zoom-bar { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: max(var(--gutter), env(safe-area-inset-left, 0px)); right: max(var(--gutter), env(safe-area-inset-right, 0px)); display: flex; align-items: center; gap: var(--s-8); }
  .zoom-bar span { margin-right: auto; color: var(--muted); }

  /* ---------- Feed: free masonry, no frames ---------- */
  .masonry { display: flex; gap: var(--s-16); align-items: flex-start; padding-top: var(--s-10); }
  .mcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
  .post { position: relative; cursor: pointer; }
  .pc { display: flex; flex-direction: column; padding: var(--s-8) var(--s-2) 0; }
  .pc .who { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pc .st { color: var(--muted); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .empty { padding: 72px 0; text-align: center; color: var(--muted); }

  /* ---------- Floating bar ---------- */
  .dock {
    position: fixed; z-index: var(--z-bar); left: 50%; transform: translateX(-50%);
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: min(600px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    color: var(--glass-ink);
    transition: transform var(--dur-slow) var(--ease), opacity var(--dur-base) var(--ease);
  }
  .glass { background: var(--glass); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); box-shadow: var(--shadow-glass); }
  .sbar, .ibar { align-items: center; height: 56px; border-radius: var(--r-pill); }
  .sbar { display: flex; gap: var(--s-10); padding: 0 var(--s-8) 0 18px; }
  .ibar { display: none; gap: var(--s-2); padding: 0 var(--s-8); }
  .dock[data-mode="item"] .sbar { display: none; }
  .dock[data-mode="item"] .ibar { display: flex; }
  .sbar > svg { color: var(--glass-muted); }
  .sbar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: var(--fs-input); color: var(--glass-ink); letter-spacing: -0.01em; }
  .sbar input::placeholder { color: var(--glass-muted); }
  .sbar input:focus { outline: none; }
  .sbar input::-webkit-search-cancel-button { display: none; }
  .scope { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 var(--s-6) 0 var(--s-4); border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); white-space: nowrap; max-width: 46%; }
  .scope img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
  .scope span { overflow: hidden; text-overflow: ellipsis; }
  .scope button { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--glass-muted); flex: none; }
  .scope button:hover { color: var(--glass-ink); background: var(--glass-hover); }
  .scope svg { width: 13px; height: 13px; }
  .ib { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--glass-muted); transition: background var(--dur-quick), color var(--dur-quick); flex: none; }
  .ib:hover, .ib[aria-expanded="true"] { background: var(--glass-hover); color: var(--glass-ink); }
  .ib[aria-pressed="true"] { color: var(--glass-ink); }
  .ib[aria-pressed="true"] .fillable { fill: currentColor; }
  .kbd { font-size: var(--fs-xs); color: var(--glass-muted); border: 1px solid var(--glass-line); border-radius: 6px; padding: 1px var(--s-6); }
  .dock.open .kbd { display: none; }
  .ichip { display: flex; align-items: center; gap: var(--s-10); flex: 1; min-width: 0; height: 42px; padding: 0 var(--s-12) 0 5px; border-radius: var(--r-pill); text-align: left; transition: background var(--dur-quick); }
  .ichip:hover { background: var(--glass-hover); }
  .ichip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; transition: opacity var(--dur-quick); }
  .ichip .t { min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ichip .c { color: var(--glass-muted); font-size: var(--fs-md); white-space: nowrap; margin-left: auto; }
  .ibar .div { width: 1px; height: 20px; background: var(--glass-line); margin: 0 var(--s-4); flex: none; }
  /* Furniture is a mode of the photos, so it gets its own pill beside the bar: off, the photos are only
     architecture; on, the pieces in them show. The bar slides left to keep the pair centred. */
  /* On an item the bar shrinks to its content and the Furniture pill sits beside it, the pair centred. */
  .dock[data-mode="item"] { display: flex; justify-content: center; align-items: flex-end; gap: var(--s-8); width: max-content; max-width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); }
  .dock[data-mode="item"] .ibar { flex: 0 1 auto; min-width: 0; height: 48px; padding: 0 var(--s-6); gap: 0; }
  .dock[data-mode="item"] .ib { width: 36px; height: 36px; }
  .dock[data-mode="item"] .ib svg { width: 18px; height: 18px; }
  .dock[data-mode="item"] .ichip { flex: 0 1 auto; height: 38px; gap: var(--s-8); padding: 0 var(--s-12) 0 var(--s-4); }
  .dock[data-mode="item"] .ichip img { width: 28px; height: 28px; }
  .dock[data-mode="item"] .ichip .t { max-width: 190px; font-size: var(--fs-base); }
  .dock[data-mode="item"] .ichip .c { margin-left: var(--s-4); font-size: var(--fs-sm); }
  .ichip[aria-expanded="true"] { background: var(--glass-hover); }
  #info-btn { display: none; }
  html.lb-viewing:not(.lb-side) .dock[data-mode="item"] #info-btn { display: grid; }
  /* A project on a narrow screen keeps its name and tabs above the photos; the sheet moves behind the info button. */
  @media (max-width: 860px) {
    .dock[data-mode="item"][data-kind="project"] #info-btn { display: grid; }
    body:has(.dock[data-mode="item"][data-kind="project"]) #proj-info > :is(dl, .furn-list, .fine) { display: none; }
    body:has(.dock[data-mode="item"][data-kind="project"]) #proj-info { padding-bottom: 0; }
    body:has(.dock[data-mode="item"][data-kind="project"]) .proj-body { gap: var(--s-20); }
  }
  .proj-info.pinfo { position: static; max-width: none; max-height: none; padding: 0 var(--s-12) var(--s-4); }
  .pinfo dl { grid-template-columns: 96px minmax(0, 1fr); }
  .pinfo .fine { margin-top: var(--s-14); }
  .dock[data-mode="item"] .furn-pill { position: static; flex: none; height: 48px; padding: 0 var(--s-16) 0 13px; font-size: var(--fs-md); }
  .furn-pill { position: absolute; left: calc(100% + 10px); bottom: 0; display: inline-flex; align-items: center; gap: var(--s-8); height: 56px; padding: 0 18px 0 15px; border-radius: var(--r-pill); color: var(--glass-ink); font-size: var(--fs-base); font-weight: 500; white-space: nowrap; animation: pill-in var(--dur-slow) var(--spring) backwards; transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--spring); }
  @keyframes pill-in { from { opacity: 0; transform: translateX(-12px) scale(.9); } }
  .furn-pill[hidden] { display: none; }
  .furn-pill svg { width: 19px; height: 19px; }
  .furn-pill:hover { background: rgba(46, 44, 44, .82); } /* the same glass, a touch lighter: it must not turn see-through */
  .furn-pill[aria-pressed="true"]:hover { background: #f1f1f1; }
  .furn-pill:active { transform: scale(.95); transition-duration: var(--dur-instant); }
  .furn-pill[aria-pressed="true"] { background: #fff; color: #111; }
  .dock[data-mode="search"] .furn-pill { display: none; }
  /* Inside a project the bar wears the search bar's light dress: white, a hairline and a shadow you barely see.
     The panel it opens takes the same tokens. Furniture on turns the pill to ink, as a pressed control does. */
  .dock[data-mode="item"] { --glass: rgba(255, 255, 255, .94); --glass-ink: var(--ink); --glass-muted: var(--muted); --glass-line: rgba(17, 17, 17, .08); --glass-hover: var(--surface); }
  .dock[data-mode="item"] .glass { box-shadow: var(--shadow-float); }
  .dock[data-mode="item"] .furn-pill:hover { background: #f4f4f2; }
  .dock[data-mode="item"] .furn-pill[aria-pressed="true"] { background: var(--ink); color: #fff; }
  .dock[data-mode="item"] .furn-pill[aria-pressed="true"]:hover { background: #2a2a2a; }
  .dock[data-mode="item"] .chip[aria-pressed="true"] { color: var(--bg); }

  .panel {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); border-radius: var(--r-float);
    max-height: min(62vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: var(--s-14) var(--s-10) var(--s-10);
    opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985); transform-origin: 50% 100%;
    transition: opacity var(--dur-quick) var(--ease), transform var(--dur-base) var(--ease), visibility 0s var(--dur-base);
    scrollbar-width: thin; scrollbar-color: var(--glass-line) transparent;
  }
  /* With the search up top, its suggestions and filters drop down under whichever field you are in. */
  /* (It lives on the page then, not in the floating bar, whose transform would carry a fixed panel with it.) */
  .panel.top { position: fixed; z-index: var(--z-panel); right: auto; bottom: auto; transform: translateY(-8px) scale(.985); transform-origin: 50% 0; }
  .panel.top { clip-path: inset(0 0 100% 0 round 24px); transition: opacity var(--dur-instant) var(--ease), clip-path var(--dur-slow) var(--ease), width var(--dur-slow) var(--ease), left var(--dur-slow) var(--ease), visibility 0s var(--dur-slow); }
  /* It opens with the field: from the field's own width it widens as the field does, and unfolds downward. */
  .panel.top.up { transform: translateY(8px) scale(.985); transform-origin: 50% 100%; clip-path: inset(100% 0 0 0 round 24px); }
  .head-c > .panel.top.up { position: absolute; top: auto; left: 0; right: 0; bottom: calc(100% + 10px); width: auto; }
  .panel.top.up.show { transform: none; clip-path: inset(0 round 24px); }
  .panel.top.show { opacity: 1; visibility: visible; transform: none; clip-path: inset(0 round 24px); transition: opacity var(--dur-instant) var(--ease), clip-path var(--dur-slow) var(--ease), width var(--dur-slow) var(--ease), left var(--dur-slow) var(--ease); }
  /* Up top it is a light card, like the page, over a dimmed page; the bar's dark glass stays on items. */
  .panel.top { --glass-ink: var(--ink); --glass-muted: var(--muted); --glass-hover: var(--surface); --glass-line: var(--line);
    max-height: min(70vh, 640px); padding: var(--s-20) var(--s-14) var(--s-16); border-radius: var(--r-float); background: rgba(255, 255, 255, .98); color: var(--ink);
    box-shadow: var(--shadow-float); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .panel.top .chip { background: var(--surface); }
  .panel.top .chip:hover { background: var(--surface-2); }
  .panel.top .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .panel.top .chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .6); }
  .panel.top .ps + .ps { margin-top: 22px; }
  .panel.top .ps-h { padding: 0 var(--s-10) var(--s-10); font-size: var(--fs-base); font-weight: 500; color: var(--muted); }
  /* Rows that run sideways, one line each, fading out where they continue. */
  .rowchips, .views-row { display: flex; gap: var(--s-8); overflow-x: auto; padding: 0 var(--s-10) var(--s-2); scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .rowchips::-webkit-scrollbar, .views-row::-webkit-scrollbar { display: none; }
  .rchip { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 var(--s-16) 0 var(--s-12); border-radius: var(--r-card); background: var(--surface); color: var(--ink); font-size: var(--fs-base); font-weight: 500; white-space: nowrap; transition: background var(--dur-quick), transform var(--dur-base) var(--spring); }
  .rchip:hover { background: var(--surface-2); }
  .rchip:active { transform: scale(.96); transition-duration: var(--dur-instant); }
  .rchip svg { width: 15px; height: 15px; color: var(--muted); }
  .rchip img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; margin-left: -4px; }
  .rchip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .rchip[aria-pressed="true"] small { color: rgba(255, 255, 255, .6); }
  .rchip small { color: var(--faint); font-size: var(--fs-sm); font-weight: 400; }
  .rowchips.words { gap: var(--s-2); }
  .rowchips.wrap { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .words .rchip { height: 36px; padding: 0 var(--s-10); gap: 7px; background: none; font-weight: 400; color: var(--ink); }
  .words .rchip:hover { background: var(--surface); }
  .views-row { gap: var(--s-12); }
  .views-row .vcard { width: 168px; aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; text-align: left; }
  .vcard .vc-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-tile); background: var(--surface); }
  .vcard .vc-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
  .vcard:hover .vc-ph img { transform: scale(1.05); }
  .vcard b { display: block; margin-top: var(--s-8); font-size: var(--fs-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vcard span { display: block; color: var(--muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Materials read as swatches: a close crop of the material itself, from a photo in the collection. */
  .rchip .sw { width: 26px; height: 26px; margin-left: -4px; border-radius: 7px; background-size: 520%; background-position: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
  .rchip.studio { font-weight: 500; }
  .views-row button { flex: none; width: 128px; aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden; background: var(--surface); transition: transform var(--dur-base) var(--spring); }
  .views-row button:active { transform: scale(.96); transition-duration: var(--dur-instant); }
  .views-row img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
  .views-row button:hover img { transform: scale(1.05); }
  .all-filters { display: inline-flex; align-items: center; gap: var(--s-8); margin: 18px var(--s-10) 0; color: var(--muted); font-size: var(--fs-md); font-weight: 500; transition: color var(--dur-quick); }
  .all-filters:hover { color: var(--ink); }
  .all-filters svg { width: 15px; height: 15px; }
  /* With the search open, a white veil settles over the page and over the top bar too; only the field and its
     card stay in focus. (The bar's own veil is drawn inside it, under the field.) */
  .scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: rgba(12, 12, 12, .46); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease), visibility 0s var(--dur-base); }
  body.searching .scrim { opacity: 1; visibility: visible; transition: opacity var(--dur-quick) var(--ease); }
  body.searching .head { z-index: var(--z-header-searching); }
  .head::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(12, 12, 12, .46); opacity: 0; visibility: hidden; transition: opacity var(--dur-quick) var(--ease), visibility 0s var(--dur-quick); }
  body.searching .head::after { opacity: 1; visibility: visible; transition: opacity var(--dur-quick) var(--ease); }
  .dock.open .panel { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-quick) var(--ease), transform var(--dur-base) var(--ease); }
  .ps + .ps { margin-top: var(--s-14); }
  .ps-h { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--s-12) var(--s-6); color: var(--glass-muted); font-size: var(--fs-md); }
  .ps-h button { color: var(--glass-muted); }
  .ps-h button:hover { color: var(--glass-ink); }
  .opt { display: flex; align-items: center; gap: var(--s-14); width: 100%; min-height: 46px; padding: 0 var(--s-6) 0 var(--s-14); border-radius: var(--r-card); text-align: left; font-size: var(--fs-lg); cursor: pointer; }
  .opt:hover { background: var(--glass-hover); }
  .opt > svg { width: 15px; height: 15px; color: var(--glass-muted); flex: none; }
  .opt .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .opt .x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--glass-muted); flex: none; }
  .opt .x:hover { color: var(--glass-ink); background: var(--glass-hover); }
  .opt .x svg { width: 14px; height: 14px; }
  .opt.thumb { padding-left: var(--s-8); gap: var(--s-12); min-height: 56px; }
  .opt.thumb img { width: 52px; height: 40px; border-radius: var(--r-thumb); object-fit: cover; flex: none; background: var(--glass-hover); }
  .opt.thumb .sub { display: block; color: var(--glass-muted); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chips { display: flex; flex-wrap: wrap; gap: var(--s-6); padding: var(--s-2) var(--s-8) var(--s-4); }
  .chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 var(--s-14); border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); font-size: var(--fs-base); transition: background var(--dur-quick), color var(--dur-quick); }
  .chip:hover { background: rgba(255, 255, 255, .14); }
  .chip[aria-pressed="true"] { background: var(--glass-ink); color: #161515; }
  .chip small { font-size: var(--fs-xs); color: var(--glass-muted); }
  .chip[aria-pressed="true"] small { color: rgba(22, 21, 21, .5); }
  .chip:disabled { opacity: .3; cursor: default; }

  .toast {
    position: fixed; z-index: var(--z-toast); left: 50%; top: calc(var(--head) + 12px + env(safe-area-inset-top, 0px));
    padding: 9px var(--s-16); border-radius: var(--r-pill); color: var(--glass-ink); font-size: var(--fs-md); white-space: nowrap;
    opacity: 0; transform: translate(-50%, -8px); transition: opacity var(--dur-quick), transform var(--dur-base) var(--ease); pointer-events: none;
  }
  .toast.on { opacity: 1; transform: translate(-50%, 0); }

  /* ---------- Project / post view ---------- */
  /* A project opens as a page of the site: the header stays on top, a breadcrumb leads back, and the content
     rises into place under it while the list keeps its scroll behind. */
  html.in-page .head { z-index: var(--z-header-over-page); }
  .proj { position: fixed; inset: 0; z-index: var(--z-page); background: var(--bg); overflow-y: auto; padding-top: calc(var(--head) + env(safe-area-inset-top, 0px)); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease), visibility 0s var(--dur-base); }
  .proj.open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease); }
  .proj > * { transform: translateY(10px); transition: transform var(--dur-slow) var(--ease); }
  .proj.open > * { transform: none; }
  /* The breadcrumb stays under the header while the page scrolls; a hairline shows once content passes under it. */
  .proj-head { position: sticky; top: 0; /* sticky offsets start below .proj's padding, which already clears the header */ z-index: 4; background: var(--bg); box-shadow: 0 1px 0 transparent; transition: box-shadow var(--dur-base) var(--ease); }
  .proj-head.stuck { box-shadow: 0 1px 0 var(--line); }
  .proj-head .wrap { display: flex; align-items: baseline; gap: var(--s-16); padding-block: var(--s-16) var(--s-14); max-width: 1480px; margin-inline: auto; }
  /* Specs: the sheet in the photos' column, roomy enough to read at a glance. */
  .specs { max-width: 640px; }
  .specs dl { grid-template-columns: 160px minmax(0, 1fr); }
  .specs .fine { max-width: 56ch; }
  .crumbs { display: flex; align-items: baseline; gap: var(--s-8); min-width: 0; font-size: var(--fs-base); }
  .crumbs button { flex: none; color: var(--muted); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--dur-quick), text-decoration-color var(--dur-quick); }
  .crumbs button:hover { color: var(--ink); text-decoration-color: var(--faint); }
  .crumbs .sep { color: var(--faint); }
  .crumbs .here { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .proj-head .pos { flex: none; margin-left: auto; color: var(--faint); font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
  .proj-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-48) var(--s-48); padding-block: var(--s-28) 140px; max-width: 1480px; margin-inline: auto; }
  .proj-info { align-self: start; position: sticky; top: 78px; max-width: 420px; max-height: calc(100vh - var(--head) - 96px); overflow-y: auto; scrollbar-width: none; padding-bottom: var(--s-96); }
  .proj-info::-webkit-scrollbar { display: none; }
  .proj-info .kicker { margin: 0 0 var(--s-12); color: var(--muted); font-size: var(--fs-base); }
  .proj-info h2 { margin: 0 0 var(--s-32); font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
  /* Facts sit on the page, separated only by hairlines. */
  .proj-info dl, .specs dl { margin: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--s-16); border-bottom: 1px solid var(--line); }
  .proj-info dt, .proj-info dd, .specs dt, .specs dd { margin: 0; padding: var(--s-14) 0; border-top: 1px solid var(--line); }
  .proj-info dt, .specs dt { color: var(--muted); }
  .proj-info dd a, .specs dd a { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
  .proj-info .tags { display: flex; flex-wrap: wrap; gap: var(--s-6); padding-block: var(--s-10); }
  .proj-info .tags button { height: 28px; padding: 0 var(--s-12); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-md); transition: background var(--dur-quick); }
  .proj-info .tags button:hover { background: var(--surface-2); }
  /* Technical sheet: every value says where it came from. Folded until asked for; it opens by easing its height. */
  .proj-info h3 { margin: 36px 0 var(--s-10); font-size: var(--fs-md); font-weight: 500; color: var(--muted); }
  .fold-t { display: flex; align-items: center; gap: var(--s-6); margin: var(--s-32) 0 0; padding: var(--s-6) 0; color: var(--muted); font-size: var(--fs-md); font-weight: 500; transition: color var(--dur-quick); }
  .fold-t:hover, .fold-t[aria-expanded="true"] { color: var(--ink); }
  .fold-t svg { width: 13px; height: 13px; transition: transform var(--dur-base) var(--spring); }
  .fold-t[aria-expanded="true"] svg { transform: rotate(180deg); }
  .fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-slow) var(--ease), opacity var(--dur-base) var(--ease); }
  .fold.open { grid-template-rows: 1fr; opacity: 1; }
  .fold > div { min-height: 0; overflow: hidden; }
  .fold:not(.open) > div { visibility: hidden; transition: visibility 0s var(--dur-slow); } /* folded links are out of the tab order */
  .fold > div > dl { margin-top: var(--s-8); }
  .proj-info .val, .specs .val { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4) var(--s-8); }
  .proj-info .val button, .specs .val button { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
  .proj-info .val button:hover, .specs .val button:hover { text-decoration-color: currentColor; }
  .proj-info .na, .specs .na { color: var(--faint); }
  .src { padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font-size: var(--fs-micro); white-space: nowrap; cursor: help; }
  .src.ai { background: var(--ai-bg); color: var(--ai-ink); }
  .proj-imgs figure { scroll-margin-top: calc(var(--head) + 72px); }
  .proj-info .fine, .specs .fine { margin: var(--s-20) 0 0; color: var(--faint); font-size: var(--fs-sm); line-height: 1.55; max-width: 44ch; }
  .proj-info .fine a, .specs .fine a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
  .proj-imgs { display: grid; gap: var(--s-16); }
  /* Each photo stops growing before it would be stretched past its own file (--max, set per photo),
     and never runs taller than the screen. */
  .proj-imgs figure { margin: 0; width: 100%; max-width: min(var(--max, 100%), calc((100vh - var(--head) - 96px) * var(--ar, 1.5))); }
  .proj-imgs img { display: block; width: 100%; height: auto; border-radius: var(--r-img); background: var(--surface); }
  .proj-imgs figcaption { display: flex; gap: var(--s-12); padding: var(--s-8) var(--s-4) 0; color: var(--muted); font-size: var(--fs-md); }
  .proj-imgs figcaption span:first-child { color: var(--faint); }

  /* ---------- Feed viewer: the photo lands whole, no scrolling ---------- */
  .lb { position: fixed; inset: 0; z-index: var(--z-page); }
  .lb-catcher { position: absolute; inset: 0; cursor: zoom-out; }
  .lb-stage { position: fixed; z-index: 1; transform-origin: 0 0; overflow: hidden; background: var(--surface); will-change: transform; touch-action: none; cursor: zoom-out; }
  .lb-stage.is-dragging { cursor: grabbing; }
  .lb-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
  .lb-stage img.hi { opacity: 0; transition: opacity var(--dur-quick) var(--ease); }
  .lb-stage img.hi.ready { opacity: 1; }
  .lb-bar {
    position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 3; height: 64px;
    display: flex; align-items: center; gap: var(--s-8); opacity: 0; pointer-events: none;
    padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
  }
  .lb-bar > * { pointer-events: auto; }
  .lb-bar { gap: var(--s-16); padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .lb-count { margin: 0; color: var(--muted); }
  /* The info column reuses the project page's .proj-info, so posts and projects read as one component. */
  .lb-info { position: fixed; z-index: 2; background: var(--bg); opacity: 0; overflow-y: auto; overscroll-behavior: contain; }
  .lb-info.is-side { top: 0; left: 0; bottom: 0; width: var(--lbw); padding: calc(var(--head) + var(--s-48) + env(safe-area-inset-top, 0px)) var(--s-28) 120px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .lb-info .proj-info { position: static; }
  .lb-info.is-top { top: calc(64px + env(safe-area-inset-top, 0px)); left: 0; right: 0; padding: 0 max(16px, env(safe-area-inset-right, 0px)) var(--s-12) max(16px, env(safe-area-inset-left, 0px)); }
  .lb-info.is-top dl, .lb-info.is-top .fine, .lb-info.is-top .lb-thumbs, .lb-info.is-top .specify { display: none; }
  /* The viewer has no backdrop; on Furniture the filters fade with the tiles so only the piece remains. */
  #pg-furniture > :not(#fgrid) { transition: opacity var(--dur-quick) var(--ease); }
  html.lb-viewing #pg-furniture > :not(#fgrid) { opacity: 0; }
  .lb-info.is-top .kicker { margin-bottom: var(--s-4); font-size: var(--fs-md); }
  .lb-info.is-top h2 { margin: 0; font-size: var(--fs-2xl); }
  .lb-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-20); }
  .lb-thumb { aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; background: var(--surface); opacity: .6; transition: opacity var(--dur-quick), box-shadow var(--dur-quick); }
  .lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .lb-thumb:hover { opacity: 1; }
  .lb-thumb[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
  /* While the viewer is open the rest of the page fades; the posts themselves scatter. */
  .filters, .foot { transition: opacity var(--dur-quick) var(--ease); }
  .lb-viewing .head, .lb-viewing .filters, .lb-viewing .foot { opacity: 0; }
  .lb-side.lb-viewing .dock { width: min(600px, calc(100% - 2 * var(--lbw) - 48px)); }
  /* Preview rail: the posts as small squares, the current one ringed, the next ones below it. */
  .lb-rail {
    position: fixed; z-index: 2; right: max(var(--gutter), env(safe-area-inset-right, 0px));
    top: calc(var(--head) + 44px + env(safe-area-inset-top, 0px)); bottom: 24px; width: 68px;
    display: flex; flex-direction: column; align-items: center; gap: var(--s-8); padding: var(--s-6) 0;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; opacity: 0;
    -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
  .lb-rail::-webkit-scrollbar { display: none; }
  .lb-rail button { flex: none; width: 56px; height: 56px; border-radius: var(--r-img); overflow: hidden; background: var(--surface); opacity: .45; transition: opacity var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease); }
  .lb-rail button:hover { opacity: .85; }
  .lb-rail button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
  .lb-rail img { width: 100%; height: 100%; object-fit: cover; }

  /* Furniture in the feed's columns: the photo breathes a little closer on hover; catalogue shots sit on white. */
  .furn .ph > img { transition: transform var(--dur-ambient) var(--ease), opacity var(--dur-base) var(--ease); }
  .furn:hover .ph > img, .furn:focus-visible .ph > img { transform: scale(1.04); }
  .furn.product .ph { background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .04); }

  /* ---------- POC: furniture dots on project photos ----------
     A small dot sits on a piece in the photo; it stays quiet until the photo is hovered. */
  .proj-imgs .frame { position: relative; }
  .hs { position: absolute; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; display: grid; place-items: center; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
  .hs::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-mark); opacity: .55; transition: opacity var(--dur-base) var(--ease), transform var(--dur-slow) var(--spring), box-shadow var(--dur-base) var(--ease), background var(--dur-quick); }
  .frame:hover .hs::after, .hs:focus-visible::after, .hs[aria-expanded="true"]::after { opacity: 1; }
  .hs:hover::after { transform: scale(1.3); }
  .hs:active::after { transform: scale(.9); transition-duration: var(--dur-instant); }
  .hs[aria-expanded="true"]::after { background: #fff; transform: scale(1.3); box-shadow: var(--shadow-mark-open); }
  .hs .tag { position: absolute; left: 30px; top: 50%; transform: translate(-4px, -50%); padding: var(--s-4) 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .96); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-label); opacity: 0; transition: opacity var(--dur-quick) var(--ease), transform var(--dur-base) var(--ease); pointer-events: none; }
  .hs.flip .tag { left: auto; right: 30px; transform: translate(4px, -50%); }
  .hs:hover .tag, .hs:focus-visible .tag { opacity: 1; transform: translate(0, -50%); }
  .hs[aria-expanded="true"] .tag { opacity: 0; }
  /* The project's photos as a grid of justified rows; a photo opens in focus on click. */
  .pgrid { display: grid; gap: var(--s-8); }
  .prow { display: flex; gap: var(--s-8); }
  .prow figure { flex: var(--ar) 1 0; min-width: 0; max-width: none; margin: 0; }
  .prow figure > img, .prow .frame > img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; cursor: zoom-in; transition: opacity var(--dur-base), filter var(--dur-base); }
  .prow figure > img:hover, .prow .frame > img:hover { filter: brightness(.94); }
  .prow figure.out > img, .prow figure.out .frame > img { visibility: hidden; }
  .pf-bar .t b { font-size: var(--fs-input); font-weight: 500; letter-spacing: -.005em; }
  .pf-q { padding: 0; font: inherit; color: inherit; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(17, 17, 17, .25);
    text-underline-offset: 5px; transition: text-decoration-color var(--dur-quick) var(--ease); }
  .pf-q:hover, .pf-q:focus-visible { text-decoration-color: currentColor; }
  @media (max-width: 600px) {
    .prow { display: contents; }
    .pf-bar { flex-direction: column; align-items: flex-start; gap: var(--s-10); }
  }
  /* Off: no dots. On: the grid stays exactly as it is and the dots pop in, one by one. */
  .proj-imgs:not(.dots-on) .hs { visibility: hidden; opacity: 0; pointer-events: none; }
  .dots-on .hs { animation: dot-in var(--dur-slow) var(--spring) backwards; animation-delay: calc(var(--d, 0) * var(--stagger) + var(--dur-instant)); }
  @keyframes dot-in { from { opacity: 0; transform: scale(.3); } }
  /* Shown from the button, the dots stand out a little more, and ring twice as they land so the eye finds them. */
  .dots-on .hs::after { opacity: .9; }
  .hs::before { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; pointer-events: none; }
  .ring .hs::before { animation: hs-ring var(--dur-ambient) var(--ease) 2 backwards; animation-delay: calc(var(--d, 0) * var(--stagger) + var(--dur-slow)); }
  @keyframes hs-ring { from { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } to { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
  /* A named classic in the pop-up: its designer and maker under the name, then the similar pieces to buy. */
  .pop-head .src { margin-left: var(--s-2); font-size: var(--fs-micro); color: var(--ai-ink); }
  .pop-real { margin: -6px 0 var(--s-12) var(--s-2); color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; }
  .pop-sub { margin: 0 0 var(--s-8) var(--s-2); color: var(--faint); font-size: var(--fs-xs); }
  /* The pieces in the photos, listed in the sidebar; each leads to its dot. */
  .furn-list h3 { margin-top: var(--s-28); }
  .furn-list .chips { display: flex; flex-wrap: wrap; gap: var(--s-6); }
  .furn-list .chips button { display: inline-flex; align-items: center; gap: var(--s-6); height: 28px; padding: 0 var(--s-12); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-md); transition: background var(--dur-quick), transform var(--dur-base) var(--spring); }
  .furn-list .chips button:hover { background: var(--surface-2); }
  .furn-list .chips button:active { transform: scale(.96); transition-duration: var(--dur-instant); }
  /* A named classic: the AI badge's colour as a small dot before the name. */
  .furn-list .chips .classic { background: var(--ai-bg); color: var(--ai-ink); }
  .furn-list .chips i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  .furn-list .fine { margin-top: var(--s-12); }

  /* The pop-up: a small card beside its dot, the same component on every photo. It grows out of the dot
     (the origin is set per dot) on the photos' spring. Three pieces, square like Boobam's own grid. */
  .pop { position: absolute; z-index: 3; width: 360px; padding: var(--s-14); border-radius: var(--r-pop); background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: var(--ring); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* a hairline, no drop shadow */
  .pop-head { display: flex; align-items: center; gap: var(--s-6); padding: 0 0 var(--s-12) var(--s-2); }
  .pop-head .x { margin: -4px -4px -4px auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); transition: background var(--dur-quick), color var(--dur-quick), transform var(--dur-base) var(--spring); }
  .pop-head .x:hover { background: var(--surface); color: var(--ink); }
  .pop-head .x:active { transform: scale(.9); transition-duration: var(--dur-instant); }
  .pop-head .x svg { width: 12px; height: 12px; }
  .pop-head b { font-size: var(--fs-md); font-weight: 600; }
  .pop-head span { color: var(--muted); font-size: var(--fs-sm); }
  .pop-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
  .pop-list .pop-tile { aspect-ratio: 1; }
  .pop-list .pop-ph { width: 100%; height: 100%; aspect-ratio: auto; }
  @media (max-width: 600px) {
    .pop { position: fixed; left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important; width: auto; z-index: var(--z-top); }
  }
  .pop-tile { position: relative; display: grid; min-width: 0; text-align: left; cursor: zoom-in; transition: transform var(--dur-base) var(--spring); -webkit-tap-highlight-color: transparent; }
  .pop-tile:active { transform: scale(.97); transition-duration: var(--dur-instant); }
  .pop-tile .pop-ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-img); background: var(--surface); }
  .pop-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-ambient) var(--ease); }
  .pop-tile:hover img, .pop-tile:focus-visible img { transform: scale(1.05); }
  /* Images first: the name only rises over the photo on hover. */
  /* A frosted strip, not a dark gradient: the blur fades out upward, so the product stays light and the name reads in ink. */
  .pop-tile .t { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px var(--s-10) 9px; background: linear-gradient(to top, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0)); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-slow) var(--ease); pointer-events: none; }
  .pop-tile:hover .t, .pop-tile:focus-visible .t { opacity: 1; transform: none; }
  .pop-tile .card-save { top: 6px; right: 6px; width: 28px; height: 28px; }
  .pop-tile .card-save svg { width: 15px; height: 15px; }
  /* Save shows for the tile under the pointer or keyboard focus, never for a tile that only holds focus. */
  .pop-tile:hover .card-save, .pop-tile:focus-visible .card-save, .pop-tile .card-save:focus-visible { opacity: 1; transform: none; }
  @media (hover: none) { .pop-tile .card-save { display: none; } } /* on touch, Save lives on the expanded piece */
  .pop-tile.out .pop-ph img, .pop-tile.out .t, .pop-tile.out .card-save { visibility: hidden; } /* while its photo is out on the screen */
  .pop-tile.in { animation: tile-in var(--dur-slow) var(--ease) backwards; animation-delay: calc(var(--n, 0) * var(--stagger) + var(--dur-instant)); }
  @keyframes tile-in { from { opacity: 0; transform: translateY(8px); } }

  /* The expanded piece: the photo flies out of its tile onto a quiet veil; the actions sit under it. */
  .pv { position: fixed; inset: 0; z-index: var(--z-viewer); }
  .pv-veil { position: absolute; inset: 0; background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); cursor: zoom-out; }
  .pv-stage { position: fixed; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: var(--surface); will-change: transform, clip-path; cursor: zoom-out; }
  .pv-stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .pv-bar { position: fixed; display: flex; align-items: center; gap: var(--s-16); }
  .pv-bar .t { display: grid; gap: var(--s-2); min-width: 0; margin-right: auto; }
  .pv-bar .t b { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; }
  .pv-bar .t span { color: var(--muted); font-size: var(--fs-md); }
  .pv-bar .t .why { color: var(--faint); font-size: var(--fs-sm); }
  .pv-bar .acts { display: flex; align-items: center; gap: var(--s-8); flex: none; }
  .pv-bar .pill { transition: background var(--dur-quick), color var(--dur-quick), transform var(--dur-base) var(--spring); }
  .pv-bar .pill:active, .pv-top .pill:active, .pv-arrow:active { transform: scale(.94); transition-duration: var(--dur-instant); }
  .pv-bar .pill.icon { width: 34px; padding: 0; }
  .pv-bar .pill.dark { padding: 0 var(--s-12) 0 var(--s-16); background: var(--ink); color: var(--bg); }
  .pv-bar .pill.dark:hover { background: #2b2b2b; }
  .pv-bar .pill.dark svg { transition: transform var(--dur-base) var(--spring); }
  .pv-bar .pill.dark:hover svg { transform: translateX(2px); }
  .pv-bar .pill svg { width: 17px; height: 17px; }
  .pv-bar .pill[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .pv-bar .pill[aria-pressed="true"] .fillable { fill: currentColor; }
  .pv-top { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); left: max(var(--gutter), env(safe-area-inset-left, 0px)); right: max(var(--gutter), env(safe-area-inset-right, 0px)); display: flex; align-items: center; gap: var(--s-8); }
  .pv-top .count { margin-right: auto; color: var(--muted); font-size: var(--fs-md); }
  .pv-rail { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: var(--s-8); max-width: calc(100vw - 32px); padding: var(--s-4); overflow-x: auto; scrollbar-width: none; }
  .pv-rail::-webkit-scrollbar { display: none; }
  .pv-rail[hidden] { display: none; }
  .pv-rail button { flex: none; width: 56px; height: 56px; border-radius: var(--r-img); background: var(--shot); opacity: .5; transition: opacity var(--dur-quick), transform var(--dur-base) var(--spring), box-shadow var(--dur-quick); }
  .pv-rail button:hover { opacity: .85; }
  .pv-rail button:active { transform: scale(.94); transition-duration: var(--dur-instant); }
  .pv-rail button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
  .pv-rail img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
  .pv:not(.ready) .pv-rail { transform: translate(-50%, 8px); }
  .pv-arrow { position: fixed; top: 50%; width: 40px; height: 40px; margin-top: -20px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--ink); transition: background var(--dur-quick), transform var(--dur-base) var(--spring); }
  .pv-arrow:hover { background: var(--line); }
  .pv-arrow svg { width: 16px; height: 16px; }
  /* The chrome arrives after the photo lands, a beat apart, and leaves at once. */
  .pv-ui { transition: opacity var(--dur-base) var(--ease), transform var(--dur-slow) var(--ease); }
  .pv-bar.pv-ui { transition-delay: var(--dur-instant); }
  .pv:not(.ready) .pv-ui { opacity: 0; pointer-events: none; transition-duration: var(--dur-instant); transition-delay: 0s; }
  .pv:not(.ready) .pv-bar { transform: translateY(8px); }

  .pop-tile .pop-ph { background: var(--shot); }
  /* A Boobam piece on its own page: the product on its white, then the photo it is like. */
  .proj-imgs .product-shot img { background: var(--shot); }
  .linkish { text-align: left; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
  .linkish:hover { text-decoration-color: currentColor; }

  .specify { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-4); }
  .proj-info .fits { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .proj-info .fits button { text-align: left; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
  .specify .pill.dark { background: var(--ink); color: var(--bg); }
  .specify .pill.dark:hover { background: #2b2b2b; }

  /* ---------- Footer ---------- */
  .foot { border-top: 1px solid var(--line); padding-top: var(--s-28); }
  .foot-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--s-24); }
  .foot p { margin: 0; }
  .foot .blurb { max-width: 42ch; }
  .foot nav { display: grid; gap: var(--s-4); align-content: start; }
  .foot nav a { color: var(--muted); }
  .foot nav a:hover { color: var(--ink); }
  .foot .fine { color: var(--muted); font-size: var(--fs-sm); }
  .foot .fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--faint); }
  .foot .word { margin-top: var(--s-56); line-height: 0; }
  .foot .word svg { width: 100%; height: auto; display: block; overflow: visible; }
  .foot .word text { font-family: var(--font); font-weight: 600; letter-spacing: -0.05em; fill: var(--ink); }
  .foot .base { display: flex; justify-content: space-between; padding-block: var(--s-16) 100px; color: var(--muted); font-size: var(--fs-sm); }

  /* ---------- Responsive ---------- */
  @media (max-width: 860px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .proj-body { grid-template-columns: 1fr; gap: var(--s-32); padding-top: var(--s-28); }
    .proj-info { position: static; max-width: none; padding-bottom: 0; }
    .foot-top { grid-template-columns: 1fr 1fr; }
    .foot .blurb { grid-column: 1 / -1; }
  }
  @media (max-width: 600px) {
    :root { --gutter: 16px; }
    .head .wrap { gap: 18px; }
    .mark span { display: none; }
    .nav { gap: var(--s-16); }
    .grid { grid-template-columns: 1fr; gap: var(--s-28); }
    .masonry { gap: var(--s-10); }
    .mcol { gap: 18px; }
    .kbd, .ibar .credit-btn { display: none; }
    /* The project bar spans the width: the title takes what is left, Show furniture shrinks to its icon. */
    .dock[data-mode="item"] { width: calc(100% - 24px); }
    .dock[data-mode="item"] .ibar { flex: 1 1 auto; }
    .dock[data-mode="item"] .ichip { flex: 1 1 auto; min-width: 0; }
    .dock[data-mode="item"] .ichip .t { max-width: none; }
    .dock[data-mode="item"] #src-btn { display: none; }
    .dock[data-mode="item"] .furn-pill { width: 52px; height: 52px; padding: 0; justify-content: center; }
    .dock[data-mode="item"] .furn-pill #furn-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hero { padding-block: var(--s-48) var(--s-8); }
    .dock { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .sbar, .ibar { height: 52px; }
    .ibar .ib { width: 36px; height: 36px; }
    .ichip .c { display: none; }
  }
  /* On a phone: the typology words get the full width and scroll; the count, All filters and the sort sit under them. */
  @media (max-width: 700px) {
    .mtools { flex-wrap: wrap; row-gap: var(--s-4); padding-block: var(--s-20) var(--s-10); }
    .fcd { flex-basis: 100%; }
    .fcd .ctabs { gap: 18px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
    .mright { width: 100%; gap: var(--s-16); margin-left: 0; }
    .mshow { margin-right: auto; font-size: var(--fs-md); }
    .tall, .msort { height: 36px; font-size: var(--fs-base); }
    .trow { flex-wrap: nowrap; gap: var(--s-14); margin-inline: calc(-1 * var(--gutter)); padding: var(--s-2) var(--gutter) 18px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
    .trow::-webkit-scrollbar { display: none; }
    .trow > * { flex: none; white-space: nowrap; }
    .trow .to, .trow .tg, .trow .tmore { height: 36px; }
  }
  /* On a phone the search lives at the bottom, where the thumb is. The header keeps the mark, the pages and
     Sign in on one row. Inside a project or post the item bar takes the search's place. */
  @media (max-width: 700px) {
    .head { height: var(--head); }
    .head .wrap { flex-wrap: nowrap; padding-block: 0; }
    .head-c { position: fixed; z-index: 2; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); top: auto;
      bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; transform: none; order: 0; transition: opacity var(--dur-base) var(--ease); }
    .head .tsearch, .head .tsearch:focus-within { height: 52px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
      box-shadow: var(--shadow-raised); }
    .head .tsearch:focus-within { box-shadow: var(--shadow-raised-focus); }
    .head .tsearch .scope { background: var(--surface); }
    .head .tsearch input, .hint { font-size: var(--fs-input); } /* under 16px, iOS zooms the page into the field */
    .head-c.on-keys { bottom: 8px; }
    body:has(.dock[data-mode="item"]) .head-c, body:has(.pv:not([hidden])) .head-c { opacity: 0; transform: translateY(24px); pointer-events: none; }
    .page { padding-bottom: var(--s-96); }
    .foot { padding-bottom: var(--s-96); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  }