/* Archteca: 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.has { color: var(--ink); font-weight: 500; } /* a kind with something picked */
  .trow .tg-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 3px; padding: 0 5px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font-size: var(--fs-micro); font-weight: 600; font-variant-numeric: tabular-nums; animation: sq-in var(--dur-base) var(--ease); }
  .trow .tg:hover, .trow .tg[aria-expanded="true"] { color: var(--ink); }
  .trow .tg svg { width: 11px; height: 11px; transition: transform var(--dur-base) var(--spring); }
  .trow .tg[aria-expanded="true"] svg { transform: rotate(180deg); } /* opens like the sort */
  .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 .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: the flat ink pill (see the end of this file), a size larger. */
  .pill.cta-glow { height: 52px; padding: 0 var(--s-28); }
  @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); }
  .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; }
  @media (max-width: 999px) { html.lb-viewing:not(.lb-side) .dock[data-mode="item"] #info-btn { display: grid; } } /* on desktop the panel already shows it all */
  /* 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, .terms, .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 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); }
  .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: the technical sheet, in the sidebar under the general info; it reads like the dl above it */
  .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. */
  /* One hairline per row, unbroken: the gap between label and value lives inside the label, not between the columns. */
  .proj-info dl, .specs dl { margin: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 0; 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 { padding-right: var(--s-16); }
  .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: 60ch; }
  .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 on the first screen; scroll down for more references ---------- */
  .lb { position: fixed; inset: 0; z-index: var(--z-page); overflow-y: auto; overscroll-behavior: contain; }
  .lb-catcher { position: absolute; inset: 0; cursor: zoom-out; }
  .lb-stage { position: absolute; z-index: 1; transform-origin: 0 0; overflow: hidden; background: var(--surface); will-change: transform; touch-action: pan-y; 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: var(--lbtop, 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)); }
  /* Back: a round arrow, flat like the CTAs; the arrow leans the way it goes on hover, gives a little on press. */
  .lb-back { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); transition: background var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease); }
  .lb-back svg { width: 20px; height: 20px; transition: transform var(--dur-quick) var(--ease); }
  .lb-back:hover { background: var(--surface-2); }
  .lb-back:hover svg { transform: translateX(-2px); }
  .lb-back:active { transform: scale(.94); }
  /* The info column reuses the project page's .proj-info, so posts and projects read as one component. */
  .lb-info { position: absolute; z-index: 2; background: var(--bg); opacity: 0; overflow-y: auto; overscroll-behavior: contain; }
  .lb-info.is-side { top: 0; left: 0; height: 100vh; width: var(--lbw); padding: calc(var(--lbtop, 0px) + 64px + var(--s-24)) 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(var(--lbtop, 0px) + 64px); 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 .filters, .lb-viewing .foot { opacity: 0; }
  html.lb-viewing .head { z-index: var(--z-header-over-page); } /* the navbar stays on over an open post */
  .lb-side.lb-viewing .dock { width: min(600px, calc(100% - 2 * var(--lbw) - 48px)); }
  /* More references: below the first screen, the feed's columns, so scrolling keeps going. */
  .lb-more { position: relative; z-index: 2; margin-top: 100vh; padding: var(--s-56) max(var(--gutter), env(safe-area-inset-right, 0px)) 140px max(var(--gutter), env(safe-area-inset-left, 0px)); background: var(--bg); box-shadow: 0 -1px 0 var(--line); }
  .lb-more header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-8) var(--s-24); margin-bottom: var(--s-24); }
  .lb-more h2 { margin: 0; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; }
  .lb-more header p { margin: 0; color: var(--muted); }
  .lb-more .ph.shot { background: var(--shot); }
  .lb-more .post .ph > img { transition: opacity var(--dur-base) var(--ease); }
  /* Once a post has opened, the grid behind it is out of sight for good, whatever redraws; it comes back as the post closes. */
  html.lb-settled #masonry, html.lb-settled #fgrid { visibility: hidden; }

  /* Page concepts (the switch in the top bar) */
  .lb-vc { display: flex; align-items: center; gap: var(--s-10); margin-left: auto; color: var(--faint); font-size: var(--fs-md); }
  .lb-vc .seg-t { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface); }
  .lb-vc button { height: 28px; padding: 0 var(--s-12); border-radius: var(--r-pill); color: var(--muted); font-size: var(--fs-md); transition: background var(--dur-quick), color var(--dur-quick); }
  .lb-vc button:hover { color: var(--ink); }
  .lb-vc button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-selected); }
  /* On a narrow screen only Abaixo and Espiada apply (the others fall back to Abaixo), and the count gives way. */
  @media (max-width: 999px) { .lb-vc { display: none; } } /* on a phone there is one layout, nothing to switch */
  /* Expand: while a reference grows into the post, a still copy of the page it left fades in place, under the photo. */
  .lb-ghost { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
  .lb[data-vc="panel"] .lb-stage { z-index: 3; }
  /* Painel: tap the photo to look closer. The photo moves inside its own frame; the map sits in its corner. */
  .lb[data-vc="panel"] .lb-stage { cursor: zoom-in; }
  .lb[data-vc="panel"] .lb-stage.is-zoomed { cursor: zoom-out; }
  .lb-stage > img { transform-origin: 0 0; transform: translate(var(--zx, 0px), var(--zy, 0px)) scale(var(--zs, 1)); }
  .lb-map { position: absolute; left: var(--s-16); bottom: var(--s-16); z-index: 2; border-radius: 6px; overflow: hidden; background: rgba(110, 110, 110, .38); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none;
    opacity: 0; transform: scale(.92); transform-origin: 0 100%; transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease); }
  .lb-map.on { opacity: 1; transform: none; }
  .lb-map-win { position: absolute; border-radius: 3px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
  /* Ao lado: the grid starts at the top; the post is a card in its first columns. */
  .lb[data-vc="side"] .lb-more { margin-top: 0; box-shadow: none; background: transparent; }
  .lb[data-vc="side"] .lb-stage { z-index: 3; }
  .lb-card { position: relative; z-index: 1; flex: none; max-width: none; box-shadow: inset 0 0 0 1px var(--line); }
  .lb-cardfill { flex: none; }
  .lb-info.is-card { position: absolute; z-index: 3; background: none; opacity: 1; overflow: visible; padding: 0; }
  .lb-info.is-card .proj-info { position: static; }
  .lb-info.is-card h2 { font-size: var(--fs-2xl); }
  /* Painel: the info and the references in a panel on the right that scrolls by itself; the photo holds still. */
  .lb[data-vc="panel"] { overflow: hidden; }
  .lb[data-vc="panel"] .lb-more { display: none; }
  .lb-info.is-panel { top: var(--lbtop, 0px); right: 0; height: calc(100vh - var(--lbtop, 0px)); width: var(--lbpw); padding: var(--s-24) var(--s-24) 120px; box-shadow: -1px 0 0 var(--line); overflow-y: auto; }
  .lb-info.is-panel .proj-info { position: static; }
  .lb-pmore { margin-top: var(--s-40); padding-top: var(--s-24); border-top: 1px solid var(--line); }
  .lb-pmore header { display: grid; gap: var(--s-4); margin-bottom: var(--s-16); }
  .lb-pmore h2 { margin: 0; font-size: var(--fs-xl); font-weight: 600; }
  .lb-pmore header p { margin: 0; color: var(--muted); font-size: var(--fs-md); }
  .lb-pmore .masonry { gap: var(--s-10); }
  .lb-pmore .mcol { gap: var(--s-16); }
  html.lb-viewing[data-lbvc="panel"] .dock { left: calc((100% - var(--lbpw)) / 2); }
  /* The panel's width. The photo holds still, so on a big screen the references take most of it: 60/40 from 1280px up. */
  :root { --lbpw: 60vw; } /* photo 40 / references 60 by default; the divider lets you pick 50/50 or 60/40 */
  html.lb-viewing[data-lbvc="side"] .dock { left: calc((100% - 0px) / 2); }

  /* Down among them, the floating bar steps aside and the top bar gets a ground. */
  .lb-bar { transition: background var(--dur-quick) var(--ease); }
  html.lb-down .lb-bar { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
  html.lb-viewing .dock { transition: opacity var(--dur-quick) var(--ease), transform var(--dur-base) var(--ease); }
  html.lb-down .dock { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; }

  /* Furniture in the feed's columns: the photo breathes a little closer on hover; catalogue shots sit on white. */
  .furn .ph > img { transition: opacity var(--dur-base) var(--ease); }
  .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. */
  .hs::before { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
  /* Furniture mode: the furnished photos darken as a whole (no hover needed) so the white dots always read,
     even on white walls; each dot sends out a ring, a beat after the last, in a loop. */
  .proj-imgs .frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(130% 100% at 50% 45%, rgba(10, 10, 10, .38), rgba(10, 10, 10, .55));
    opacity: 0; transition: opacity 700ms var(--ease); }
  .dots-on .frame::after { opacity: 1; }
  .dots-on .frame > img { filter: saturate(.85); }
  .dots-on .hs::after { opacity: 1; width: 13px; height: 13px; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28), 0 1px 6px rgba(0, 0, 0, .45); }
  .hs::before { left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .95); opacity: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .dots-on .hs::before { animation: hs-pulse 4000ms cubic-bezier(.25, .5, .3, 1) infinite; animation-delay: calc(var(--d, 0) * 220ms + 600ms); }
    .dots-on .hs:not([aria-expanded="true"]):not(:hover)::after { animation: hs-breathe 4000ms ease-in-out infinite; animation-delay: calc(var(--d, 0) * 220ms + 600ms); }
  }
  /* The ring takes the first half of the beat; the second half is a rest, so the loop never nags. */
  @keyframes hs-pulse { 0% { opacity: .85; transform: scale(1); } 50%, 100% { opacity: 0; transform: scale(3.2); } }
  @keyframes hs-breathe { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.16); } 30% { transform: scale(1); } }
  /* 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. */
  /* Search terms in the sidebar; each runs a search for similar projects. */
  .terms h3 { margin-top: var(--s-28); }
  .terms .chips { display: flex; flex-wrap: wrap; gap: var(--s-6); }
  .terms .chips button { display: inline-flex; align-items: center; gap: var(--s-4); 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); }
  .terms .chips button:hover { background: var(--surface-2); }
  .terms .chips button:active { transform: scale(.96); transition-duration: var(--dur-instant); }
  .terms .chips sup { color: var(--faint); font-size: var(--fs-micro); vertical-align: 5px; }

  /* 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; }
  /* 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 { 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; }
  }

  /* ---------- Seu acervo: the profile. Who, then a switch between cuttings, whole projects and furniture. ---------- */
  .me { display: inline-flex; align-items: center; gap: var(--s-8); height: 34px; padding: 0 var(--s-14) 0 var(--s-4); border-radius: var(--r-pill); background: var(--surface); font-weight: 500; transition: background var(--dur-quick); }
  .me:hover, .me[aria-current="page"] { background: var(--surface-2); }
  .me-av, .prof-av { display: grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 600; letter-spacing: .02em; }
  .me-av img, .prof-av img { width: 100%; height: 100%; object-fit: cover; }
  .me-av { width: 26px; height: 26px; font-size: var(--fs-micro); }
  .me-av.empty, .prof-av.empty { padding: 0; background: var(--surface); color: var(--muted); } /* not the list's .empty state */
  .me-av svg { width: 16px; height: 16px; }

  #pg-profile { padding-top: 0; }
  /* The person in front, the studio's logo behind and to the right. */
  .av-pair { display: flex; align-items: center; }
  .av-pair > :first-child { position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bg); }
  .av-pair .studio { margin-left: -26px; }
  .prof-av.studio { background: var(--surface-2); color: var(--ink); }
  .prof-av.studio.logo { background: #fff; box-shadow: var(--ring); }
  .p-name { min-width: 0; }
  .p-name h2 { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
  .p-meta { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-10); margin: var(--s-8) 0 0; color: var(--muted); font-size: var(--fs-lg); }
  .p-name .office { color: var(--ink); }
  .p-meta span + span::before { content: "·"; margin-right: var(--s-10); color: var(--faint); }
  .p-acts { display: flex; gap: var(--s-8); margin-top: var(--s-20); }
  .pill.line { height: 34px; padding: 0 var(--s-16); background: var(--bg); box-shadow: inset 0 0 0 1px var(--surface-2); transition: box-shadow var(--dur-quick); }
  .pill.line:hover { background: var(--bg); box-shadow: inset 0 0 0 1px var(--faint); }

  .p-edit { max-width: 440px; padding-block: var(--s-64); }
  .pform { display: grid; gap: var(--s-14); }
  .pform label { display: grid; gap: var(--s-4); }
  .pform label > span:first-child { color: var(--muted); font-size: var(--fs-md); }
  .pform .at { display: flex; align-items: center; gap: var(--s-4); color: var(--muted); }
  .pform .row { display: flex; justify-content: flex-end; gap: var(--s-8); }
  .pform .pic { display: flex; align-items: center; gap: var(--s-14); margin-bottom: var(--s-6); }
  .pform .pic label.pill { display: inline-flex; cursor: pointer; }
  .prof-av.sm { width: 72px; height: 72px; font-size: var(--fs-xl); }
  .prof-av.sm svg { width: 28px; height: 28px; }
  #pg-profile .pill.dark { background: var(--ink); color: var(--bg); }
  #pg-profile .pill.dark:hover { background: #2b2b2b; }
  #pg-profile input[type="text"] { width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-option); background: var(--surface); color: var(--ink); font: inherit;
    transition: background var(--dur-quick), box-shadow var(--dur-quick); }
  #pg-profile input[type="text"]:focus { outline: none; background: var(--bg); box-shadow: var(--shadow-field-focus); }
  #pg-profile input::placeholder { color: var(--faint); }
  .lnk { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); transition: color var(--dur-quick); }
  .lnk:hover { color: var(--ink); }

  /* The switch: Salvos or Projetos, as the home's typology words, a line under the one that is open. */
  .p-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12) var(--s-24); margin: 0 0 var(--s-28); }
  .p-none { margin: 0; padding: var(--s-48) 0; color: var(--muted); border-top: 1px solid var(--line); }
  .prof-empty { padding-top: var(--s-64); display: grid; justify-items: center; gap: var(--s-16); }
  .prof-empty p { margin: 0; max-width: 42ch; }

  /* Large cards, square-cornered. At rest only the picture; on hover the picture stays still and the name, the way
     in and the marker appear the way the save marker does on every card: a quick fade, growing a little in place. */
  .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-12); }
  @media (min-width: 1200px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 559px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .gtile { position: relative; display: block; width: 100%; text-align: left; cursor: pointer; }
  .gtile .ph.tile { aspect-ratio: 4 / 5; border-radius: var(--r-img); }
  .gtile .ph.shot { background: var(--shot); }
  .gtile .ph.shot > img { object-fit: contain; padding: 14%; }
  .gpill, .garrow { position: absolute; top: 12px; z-index: 2; opacity: 0; transform: scale(.92);
    transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease); }
  .gpill { left: 12px; display: inline-flex; align-items: center; max-width: calc(100% - 104px); height: 32px; padding: 0 var(--s-12); border-radius: var(--r-pill); transform-origin: left center;
    background: var(--bg); color: var(--ink); font-size: var(--fs-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .garrow { right: 52px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--bg); color: var(--ink); }
  .garrow svg { width: 16px; height: 16px; }
  /* The label, the way in and the marker share one height and one icon size, and sit flat on the picture. */
  /* Everything here is saved, so the filled marker would sit on every picture: it waits for the hover. */
  :is(.gtile, .pitem) .card-save { top: 12px; right: 12px; width: 32px; height: 32px; box-shadow: none; opacity: 0; transform: scale(.92); }
  :is(.gtile, .pitem) .card-save svg { width: 16px; height: 16px; }
  :is(.gtile, .pitem):hover :is(.garrow, .card-save), :is(.gtile, .pitem):focus-within :is(.garrow, .card-save) { opacity: 1; transform: none; }

  /* Projetos: the home's preview card. The studio rests on the corner; the caption adds the type, the area, the photos. */
  .p-projects .studio-pill { opacity: 1; transform: none; max-width: calc(100% - 64px); }
  .p-projects .cap .fx { grid-column: 1 / -1; color: var(--faint); font-size: var(--fs-md); }
  /* On touch there is no hover: the name rests on the picture, the rest stays out of the way. */
  @media (hover: none) {
    :is(.gtile, .pitem) :is(.garrow, .card-save) { display: none; }
  }

  /* Following: the counts on the right; Seguir for a visitor (Editar perfil for the owner), under the name. */
  .p-stats { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-20); margin: var(--s-14) 0 0; color: var(--muted); }
  .p-stats b { color: var(--ink); font-weight: 500; }
  .pill.follow { min-width: 104px; }
  [data-as="visitor"] :is(.gtile, .pitem) .card-save { display: none; }
  [data-as="visitor"] :is(.gtile, .pitem) .garrow { right: 12px; }

  /* Limpo: the portrait and the name, given room, and who follows under the name. No pictures up top. */
  .p-clean { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--s-28); padding-block: var(--s-96) var(--s-96); }
  /* Everything hangs from the top: the portrait, the name, and on the right who follows, level with the name. */
  .p-clean .p-name .p-acts { margin-top: var(--s-16); }
  .pc-right { display: flex; align-items: center; gap: var(--s-20); min-height: calc(var(--fs-title) * 1.05); }
  .p-clean .prof-av { width: 96px; height: 96px; font-size: var(--fs-2xl); font-weight: 500; }
  .p-clean .prof-av svg { width: 36px; height: 36px; }
  .p-clean .p-stats { align-items: center; margin: 0; }
  .p-stats .fl { display: inline-flex; align-items: center; }
  .faces { display: inline-flex; margin-right: var(--s-8); }
  .faces img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--surface); box-shadow: 0 0 0 2px var(--bg); }
  .faces img + img { margin-left: -8px; }
  /* Only the face under the pointer rises a little, and comes to the front. */
  .faces img { position: relative; transition: transform 260ms cubic-bezier(.3, 1.12, .4, 1); }
  .faces img:hover { z-index: 1; transform: translateY(-4px); }
  .p-stats .div { align-self: center; width: 1px; height: 16px; background: var(--line); }
  .p-bar .p-acts { margin: 0; }
  /* Ordenar: the home's sort, its menu under it, aligned to its right edge. */
  .p-sort { position: relative; display: flex; align-items: center; gap: var(--s-4); }
  .p-sortpop { top: calc(100% + 8px); right: 0; --ox: calc(100% - 24px); }
  @media (max-width: 760px) {
    .p-clean { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--s-20); padding-block: var(--s-56); }
    .pc-right { flex-wrap: wrap; gap: var(--s-14); min-height: 0; }
    .p-clean .prof-av { width: 72px; height: 72px; font-size: var(--fs-xl); }
  }

  /* The profile's feed: posts one under another, the way Instagram opens a profile's grid. Under the header,
     over the page; the project's page opens above it and closing that comes back here. */
  .pfeed { position: fixed; inset: calc(var(--head) + env(safe-area-inset-top, 0px)) 0 0; z-index: 19; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); }
  .pfeed-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); padding: var(--s-14) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--s-14) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: var(--bg); color: var(--muted); font-size: var(--fs-md); }
  .pfeed-bar .pill svg { width: 14px; height: 14px; }
  .pfeed-list { display: grid; gap: var(--s-56); width: min(560px, 100%); margin: 0 auto; padding: var(--s-16) var(--gutter) var(--s-96); }
  .fpost { display: grid; gap: var(--s-12); }
  .fpost header { display: flex; align-items: center; gap: var(--s-10); min-width: 0; }
  .fpost .av { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--surface); }
  .fpost .av.shot { background: var(--shot); }
  .fpost .av img { width: 100%; height: 100%; object-fit: cover; }
  .fpost header div { display: grid; min-width: 0; line-height: 1.3; }
  .fpost header b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fpost header small { color: var(--muted); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fpost .fimg { position: relative; width: 100%; overflow: hidden; background: var(--surface); }
  .fpost .fimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .fpost .fimg.shot { background: var(--shot); }
  .fpost .fimg.shot img { object-fit: contain; padding: 10%; }
  .fpost .facts { display: flex; align-items: center; gap: var(--s-8); }
  .fpost .facts .card-save { position: static; opacity: 1; transform: none; box-shadow: none; width: 38px; height: 38px; background: var(--surface); }
  .fpost .facts .card-save[aria-pressed="true"] { background: var(--ink); }
  .fpost .go { margin-left: auto; gap: var(--s-6); }
  .fpost .go svg { width: 14px; height: 14px; }
  .fpost .fcap { margin: 0; color: var(--muted); line-height: 1.5; }
  .fpost .fcap b { color: var(--ink); font-weight: 500; }
  @media (max-width: 700px) { .in-feed .head-c { opacity: 0; pointer-events: none; } } /* the phone's bottom field would sit on the posts' buttons */
  .in-page .pfeed { visibility: hidden; }

  /* A photo on a project's page can be saved on its own. */
  .proj-imgs figure { position: relative; }
  .proj-imgs figure:hover .card-save, .proj-imgs figure:focus-within .card-save { opacity: 1; transform: none; }

  @media (max-width: 600px) {
    .me { width: 34px; padding: 0; justify-content: center; background: none; }
    .me-t { display: none; }
    .p-acts .pill { white-space: nowrap; }
    .p-name h2 { font-size: var(--fs-2xl); }
    .p-name p { font-size: var(--fs-base); }
    .p-bar { margin-bottom: var(--s-20); }
    .p-acts { margin-top: var(--s-14); }
    #pg-profile input[type="text"] { font-size: var(--fs-input); }
    .tiles { gap: var(--s-6); }
    .gpill { top: 8px; left: 8px; height: 24px; padding: 0 var(--s-8); font-size: var(--fs-sm); max-width: calc(100% - 16px); }
  }

  /* ---------- The primary call to action: flat ----------
     A solid ink pill. Hovered, the ground lifts a shade and the arrow, when there is one, steps forward; pressed, it gives a
     little. No glow, no stroke: the same flat pill everywhere a dark CTA appears (.pill.dark, .pill.cta-glow). */
  .pill:is(.dark, .cta-glow) { background: var(--ink); color: var(--bg); transition: background 160ms, transform 200ms cubic-bezier(.3, .9, .4, 1); }
  .pill:is(.dark, .cta-glow):hover { background: #2b2b2b; }
  .pill:is(.dark, .cta-glow):active { transform: scale(.97); }
  .pill:is(.dark, .cta-glow) svg { transition: transform 260ms cubic-bezier(.3, 1.12, .4, 1); }
  .pill:is(.dark, .cta-glow):hover svg { transform: translateX(2px); }


  /* ---------- The post's head in the viewer: what it is on the left, where it came from on the right ---------- */
  .lb-head2 { display: grid; gap: var(--s-24); }
  .lb-info .lb-head2 { max-height: none; overflow: visible; } /* the save menu drops out of it */
  .lb-info.is-panel .lb-head2 { max-width: none; padding-bottom: 0; }
  .lb-head2 .lb-main, .lb-head2 .lb-aside { min-width: 0; }
  .lb-head2 h2 { margin-bottom: var(--s-20); }
  .lb-info.is-panel { container-type: inline-size; }
  @container (min-width: 760px) {
    .lb-head2 { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: var(--s-48); align-items: start; } /* the credits get room to breathe */
    .lb-head2 .lb-aside { padding-top: var(--s-6); }
  }
  .lb-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
  .lb-info.is-top .lb-act { display: none; } /* on a phone the bar below saves */

  /* Save into: the place is picked beside the button. */
  .sv-bar { display: flex; align-items: center; gap: var(--s-6); }
  .sv { position: relative; }
  .sv-pick { display: inline-flex; align-items: center; gap: var(--s-8); height: 40px; padding: 0 var(--s-10) 0 var(--s-6); border-radius: var(--r-pill); background: var(--surface); font-weight: 500; transition: background var(--dur-quick) var(--ease); }
  .sv-pick:hover, .sv-pick[aria-expanded="true"] { background: var(--surface-2); }
  .sv-pick > svg { width: 16px; height: 16px; color: var(--muted); transition: transform var(--dur-base) var(--ease); }
  .sv-pick[aria-expanded="true"] > svg { transform: rotate(180deg); }
  .sv-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sv-swb { display: contents; }
  .sv-sw { display: grid; flex: none; width: 28px; height: 28px; border-radius: var(--r-thumb); overflow: hidden; background: var(--surface-2); gap: var(--s-2); }
  .sv-sw img { width: 100%; height: 100%; object-fit: cover; }
  .sv-sw.n2 { grid-template-columns: 1fr 1fr; }
  .sv-sw.n3, .sv-sw.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .sv-sw.n3 img:first-child { grid-row: span 2; }
  .sv-sw.plus { place-items: center; background: var(--surface); color: var(--muted); }
  .sv-sw.sv-none { place-items: center; /* not .empty: that name is the lists' empty state */ background: var(--bg); color: var(--muted); box-shadow: inset 0 0 0 1px var(--surface-2); }
  .sv-sw.sv-none svg { width: 15px; height: 15px; }
  .sv-row .sv-sw.sv-none svg { width: 18px; height: 18px; }
  .sv-sw.plus svg { width: 16px; height: 16px; }
  .sv-save { position: relative; overflow: hidden; height: 40px; padding: 0 var(--s-20); transition: background var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease), transform var(--dur-quick) var(--spring); }
  .sv-lab { position: relative; display: inline-flex; align-items: center; justify-content: center; }
  .sv-w { display: inline-flex; align-items: center; gap: var(--s-6); white-space: nowrap; }
  .sv-w.gone { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
  .sv-save svg { width: 16px; height: 16px; margin-left: calc(var(--s-4) * -1); }
  .sv-save svg path { stroke-dasharray: 16; }
  .sv-save.on { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--surface-2); }
  .sv-save.on:hover { background: var(--surface); }
  /* The menu appears like the filter menu: a short drop and a fade, from the button it belongs to. */
  .sv-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; width: 280px; padding: var(--s-6); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow-raised);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: 24px 0; transition: opacity var(--dur-quick) var(--ease), transform var(--dur-base) var(--ease), visibility 0s var(--dur-quick); }
  .sv-menu.on { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-quick) var(--ease), transform var(--dur-base) var(--ease); }
  .sv-row { display: flex; align-items: center; gap: var(--s-10); width: 100%; padding: var(--s-6); border-radius: var(--r-option); text-align: left; transition: background var(--dur-quick); }
  .sv-row:hover, .sv-row[aria-selected="true"] { background: var(--surface); }
  .sv-row .sv-sw { width: 40px; height: 40px; border-radius: var(--r-thumb); }
  .sv-row > svg { width: 18px; height: 18px; margin-left: auto; margin-right: var(--s-4); }
  .sv-t { display: grid; min-width: 0; }
  .sv-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .sv-t small { color: var(--muted); font-size: var(--fs-md); }
  .sv-new { margin-top: var(--s-4); }
  .sv-label { margin: var(--s-8) var(--s-6) var(--s-4); padding-top: var(--s-8); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
  .sv-input { flex: 1; min-width: 0; height: 36px; padding: 0 var(--s-10); border: 0; border-radius: var(--r-thumb); background: var(--surface); font: inherit; outline: none; }
  .sv-input:focus { box-shadow: 0 0 0 1.5px var(--ink); }

  /* Saved by: the latest three faces and how many more. The faces lift one at a time, like the profile's followers. */
  .sby { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--s-6) 0 var(--s-4); border-radius: var(--r-pill); transition: background var(--dur-quick) var(--ease); }
  .sby:hover { background: var(--surface); }
  .sby .faces { margin-right: 0; }
  .sby .faces > * { width: 28px; height: 28px; }
  .face-empty { display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; box-shadow: 0 0 0 2px var(--bg); }
  .faces .face-empty + *, .faces * + .face-empty { margin-left: -8px; }
  .sby-n { display: grid; place-items: center; min-width: 28px; height: 28px; margin-left: -8px; padding: 0 var(--s-8); border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 2px var(--bg); color: var(--ink); font-size: var(--fs-md); font-weight: 500; font-variant-numeric: tabular-nums; }
  .sby:hover .sby-n { background: var(--surface-2); }

  /* Who saved it: a small modal that lifts in over a veil. */
  .pp-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); }
  .pp-veil.on { opacity: 1; }
  .pp { position: fixed; left: 50%; top: 50%; z-index: var(--z-sheet); display: flex; flex-direction: column; width: min(400px, calc(100% - 32px)); max-height: min(560px, 80vh); overflow: hidden; border-radius: var(--r-panel); background: var(--bg); box-shadow: var(--shadow-overlay);
    opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.98); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
  .pp.on { opacity: 1; transform: translate(-50%, -50%); }
  /* The header is frosted glass over the list: rows slide under it and go soft; its blur dissolves at the lower edge. */
  .pp header { position: absolute; left: 0; right: 0; top: 0; z-index: 1; isolation: isolate; display: flex; align-items: baseline; gap: var(--s-8); padding: var(--s-20) var(--s-20) var(--s-16); }
  .pp header::before { content: ""; position: absolute; inset: 0 0 calc(var(--s-16) * -1); z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72) 55%, rgba(255, 255, 255, 0));
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent); mask-image: linear-gradient(to bottom, #000 50%, transparent); }
  .pp h3 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
  .pp-n { color: var(--muted); font-variant-numeric: tabular-nums; }
  .pp-x { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -6px 0 auto; border-radius: 50%; color: var(--muted); transition: background var(--dur-quick), color var(--dur-quick); }
  .pp-x:hover { background: var(--surface); color: var(--ink); }
  .pp-x svg { width: 14px; height: 14px; }
  /* The list scrolls with a hairline thumb, no track, and fades out at its edges instead of being cut. */
  .pp ul { margin: 0; padding: 64px var(--s-8) var(--s-12); list-style: none; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(17, 17, 17, .14) transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--s-24)), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--s-24)), transparent 100%); }
  .pp ul::-webkit-scrollbar { width: 10px; }
  .pp ul::-webkit-scrollbar-track { background: transparent; }
  .pp ul::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--r-pill); background: rgba(17, 17, 17, .14) padding-box; }
  .pp ul::-webkit-scrollbar-thumb:hover { background-color: rgba(17, 17, 17, .28); }
  .pp li { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-8) var(--s-12); border-radius: var(--r-option); }
  .pp li > img, .pp li > .face-empty { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: none; }
  .pp-t { display: grid; flex: 1; min-width: 0; }
  .pp-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .pp-t small { color: var(--muted); font-size: var(--fs-md); }
  .pp-follow { flex: none; height: 32px; padding: 0 var(--s-14); border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font-size: var(--fs-md); font-weight: 500; transition: background var(--dur-quick), color var(--dur-quick), transform var(--dur-quick) var(--spring); }
  .pp-follow:hover { background: #2b2b2b; }
  .pp-follow:active { transform: scale(.96); }
  .pp-follow.on { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--surface-2); }
  .pp-follow.on:hover { background: var(--surface); }
  .pp-more { margin: 0; padding: var(--s-12) var(--s-20) var(--s-20); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-md); }

  /* The divider (Painel): a grip on the line between photo and references; drag it, it settles on 40, 50 or 60. */
  .lb-split { position: fixed; top: var(--lbtop, 0px); bottom: 0; right: var(--lbpw); z-index: 4; display: none; width: 17px; margin-right: -8px; cursor: col-resize; touch-action: none; outline: none; }
  .lb[data-vc="panel"] .lb-split { display: block; }
  .lb-split::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--ink); opacity: 0; transition: opacity var(--dur-quick) var(--ease); }
  .lb-grip { position: absolute; left: 50%; top: 50%; width: 6px; height: 44px; margin: -22px 0 0 -3px; border-radius: var(--r-pill); background: var(--bg); box-shadow: 0 0 0 1px rgba(17, 17, 17, .14), var(--shadow-float);
    opacity: 0; transform: scale(.92); transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease), height var(--dur-base) var(--spring), margin var(--dur-base) var(--spring); }
  .lb-split:is(:hover, :focus-visible) .lb-grip, html.lb-splitting .lb-grip { opacity: 1; transform: none; }
  .lb-split:hover::before, html.lb-splitting .lb-split::before { opacity: .12; }
  html.lb-splitting .lb-grip { height: 64px; margin-top: -32px; }
  .lb-split-tip { position: absolute; left: 50%; top: calc(50% + 44px); padding: var(--s-4) var(--s-8); border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
    opacity: 0; transform: translate(-50%, -4px) scale(.92); transition: opacity var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease); }
  html.lb-splitting .lb-split-tip, .lb-split:focus-visible .lb-split-tip { opacity: 1; transform: translate(-50%, 0); }
  html.lb-splitting, html.lb-splitting * { cursor: col-resize !important; user-select: none; }